diff --git a/apps/v4/content/docs/components/base/skeleton.mdx b/apps/v4/content/docs/components/base/skeleton.mdx index fed8b37757..5b76c21c34 100644 --- a/apps/v4/content/docs/components/base/skeleton.mdx +++ b/apps/v4/content/docs/components/base/skeleton.mdx @@ -5,11 +5,7 @@ base: base component: true --- - + ## Installation @@ -59,10 +55,26 @@ import { Skeleton } from "@/components/ui/skeleton" ## Examples +### Avatar + + + ### Card + +### Text + + + +### Form + + + +### Table + + diff --git a/apps/v4/content/docs/components/base/slider.mdx b/apps/v4/content/docs/components/base/slider.mdx index cf1217614a..6b7f9d1691 100644 --- a/apps/v4/content/docs/components/base/slider.mdx +++ b/apps/v4/content/docs/components/base/slider.mdx @@ -8,11 +8,7 @@ links: api: https://base-ui.com/react/components/slider#api-reference --- - + ## Installation @@ -65,3 +61,37 @@ import { Slider } from "@/components/ui/slider" ```tsx ``` + +## Examples + +### Range + +Use an array with two values for a range slider. + + + +### Multiple Thumbs + +Use an array with multiple values for multiple thumbs. + + + +### Vertical + +Use `orientation="vertical"` for a vertical slider. + + + +### Controlled + + + +### Disabled + +Use the `disabled` prop to disable the slider. + + + +## API Reference + +See the [Base UI Slider](https://base-ui.com/react/components/slider#api-reference) documentation. diff --git a/apps/v4/content/docs/components/base/sonner.mdx b/apps/v4/content/docs/components/base/sonner.mdx index ebaba95c4c..d17a29af36 100644 --- a/apps/v4/content/docs/components/base/sonner.mdx +++ b/apps/v4/content/docs/components/base/sonner.mdx @@ -33,7 +33,7 @@ npx shadcn@latest add sonner Add the Toaster component -```tsx title="app/layout.tsx" {1,9} +```tsx title="app/layout.tsx" {1,9} showLineNumbers import { Toaster } from "@/components/ui/sonner" export default function RootLayout({ children }) { @@ -107,53 +107,20 @@ toast("Event has been created.") ## Examples +### Types + -## Changelog +### Description -### 2025-10-13 Icons + -We've updated the Sonner component to use icons from `lucide`. Update your `sonner.tsx` file to use the new icons. +### Position -```tsx showLineNumbers title="components/ui/sonner.tsx" {3-9,20-26} -"use client" +Use the `position` prop to change the position of the toast. -import { - CircleCheckIcon, - InfoIcon, - Loader2Icon, - OctagonXIcon, - TriangleAlertIcon, -} from "lucide-react" -import { useTheme } from "next-themes" -import { Toaster as Sonner, ToasterProps } from "sonner" + -const Toaster = ({ ...props }: ToasterProps) => { - const { theme = "system" } = useTheme() +## API Reference - return ( - , - info: , - warning: , - error: , - loading: , - }} - style={ - { - "--normal-bg": "var(--popover)", - "--normal-text": "var(--popover-foreground)", - "--normal-border": "var(--border)", - "--border-radius": "var(--radius)", - } as React.CSSProperties - } - {...props} - /> - ) -} - -export { Toaster } -``` +See the [Sonner API Reference](https://sonner.emilkowal.ski/api) for more information. diff --git a/apps/v4/content/docs/components/radix/skeleton.mdx b/apps/v4/content/docs/components/radix/skeleton.mdx index 2e542a82fe..b35a35286f 100644 --- a/apps/v4/content/docs/components/radix/skeleton.mdx +++ b/apps/v4/content/docs/components/radix/skeleton.mdx @@ -5,11 +5,7 @@ base: radix component: true --- - + ## Installation @@ -59,10 +55,26 @@ import { Skeleton } from "@/components/ui/skeleton" ## Examples +### Avatar + + + ### Card + +### Text + + + +### Form + + + +### Table + + diff --git a/apps/v4/content/docs/components/radix/slider.mdx b/apps/v4/content/docs/components/radix/slider.mdx index eff8e1fbf3..8ee9c6aa32 100644 --- a/apps/v4/content/docs/components/radix/slider.mdx +++ b/apps/v4/content/docs/components/radix/slider.mdx @@ -8,11 +8,7 @@ links: api: https://www.radix-ui.com/docs/primitives/components/slider#api-reference --- - + ## Installation @@ -65,3 +61,37 @@ import { Slider } from "@/components/ui/slider" ```tsx ``` + +## Examples + +### Range + +Use an array with two values for a range slider. + + + +### Multiple Thumbs + +Use an array with multiple values for multiple thumbs. + + + +### Vertical + +Use `orientation="vertical"` for a vertical slider. + + + +### Controlled + + + +### Disabled + +Use the `disabled` prop to disable the slider. + + + +## API Reference + +See the [Radix UI Slider](https://www.radix-ui.com/docs/primitives/components/slider#api-reference) documentation. diff --git a/apps/v4/content/docs/components/radix/sonner.mdx b/apps/v4/content/docs/components/radix/sonner.mdx index 0e3561232b..598ee2b23f 100644 --- a/apps/v4/content/docs/components/radix/sonner.mdx +++ b/apps/v4/content/docs/components/radix/sonner.mdx @@ -33,7 +33,7 @@ npx shadcn@latest add sonner Add the Toaster component -```tsx title="app/layout.tsx" {1,9} +```tsx title="app/layout.tsx" {1,9} showLineNumbers import { Toaster } from "@/components/ui/sonner" export default function RootLayout({ children }) { @@ -107,53 +107,20 @@ toast("Event has been created.") ## Examples +### Types + -## Changelog +### Description -### 2025-10-13 Icons + -We've updated the Sonner component to use icons from `lucide`. Update your `sonner.tsx` file to use the new icons. +### Position -```tsx showLineNumbers title="components/ui/sonner.tsx" {3-9,20-26} -"use client" +Use the `position` prop to change the position of the toast. -import { - CircleCheckIcon, - InfoIcon, - Loader2Icon, - OctagonXIcon, - TriangleAlertIcon, -} from "lucide-react" -import { useTheme } from "next-themes" -import { Toaster as Sonner, ToasterProps } from "sonner" + -const Toaster = ({ ...props }: ToasterProps) => { - const { theme = "system" } = useTheme() +## API Reference - return ( - , - info: , - warning: , - error: , - loading: , - }} - style={ - { - "--normal-bg": "var(--popover)", - "--normal-text": "var(--popover-foreground)", - "--normal-border": "var(--border)", - "--border-radius": "var(--radius)", - } as React.CSSProperties - } - {...props} - /> - ) -} - -export { Toaster } -``` +See the [Sonner API Reference](https://sonner.emilkowal.ski/api) for more information. diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx index d44b1e5a1d..27e14066a6 100644 --- a/apps/v4/examples/__index__.tsx +++ b/apps/v4/examples/__index__.tsx @@ -3905,19 +3905,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "slider-basic": { - name: "slider-basic", - filePath: "examples/radix/slider-basic.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/slider-basic") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "slider-basic" - return { default: mod.default || mod[exportName] } - }), - }, "slider-controlled": { name: "slider-controlled", filePath: "examples/radix/slider-controlled.tsx", @@ -3957,19 +3944,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "slider-fields": { - name: "slider-fields", - filePath: "examples/radix/slider-fields.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/slider-fields") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "slider-fields" - return { default: mod.default || mod[exportName] } - }), - }, "slider-multiple": { name: "slider-multiple", filePath: "examples/radix/slider-multiple.tsx", @@ -4009,19 +3983,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "sonner-basic": { - name: "sonner-basic", - filePath: "examples/radix/sonner-basic.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/sonner-basic") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "sonner-basic" - return { default: mod.default || mod[exportName] } - }), - }, "sonner-demo": { name: "sonner-demo", filePath: "examples/radix/sonner-demo.tsx", @@ -4035,6 +3996,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "sonner-description": { + name: "sonner-description", + filePath: "examples/radix/sonner-description.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sonner-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sonner-description" + return { default: mod.default || mod[exportName] } + }), + }, + "sonner-position": { + name: "sonner-position", + filePath: "examples/radix/sonner-position.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/sonner-position") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sonner-position" + return { default: mod.default || mod[exportName] } + }), + }, "sonner-types": { name: "sonner-types", filePath: "examples/radix/sonner-types.tsx", @@ -4048,19 +4035,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "sonner-with-description": { - name: "sonner-with-description", - filePath: "examples/radix/sonner-with-description.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/sonner-with-description") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "sonner-with-description" - return { default: mod.default || mod[exportName] } - }), - }, "spinner-badge": { name: "spinner-badge", filePath: "examples/radix/spinner-badge.tsx", @@ -9317,19 +9291,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "slider-basic": { - name: "slider-basic", - filePath: "examples/base/slider-basic.tsx", - component: React.lazy(async () => { - const mod = await import("./base/slider-basic") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "slider-basic" - return { default: mod.default || mod[exportName] } - }), - }, "slider-controlled": { name: "slider-controlled", filePath: "examples/base/slider-controlled.tsx", @@ -9369,19 +9330,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "slider-fields": { - name: "slider-fields", - filePath: "examples/base/slider-fields.tsx", - component: React.lazy(async () => { - const mod = await import("./base/slider-fields") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "slider-fields" - return { default: mod.default || mod[exportName] } - }), - }, "slider-multiple": { name: "slider-multiple", filePath: "examples/base/slider-multiple.tsx", @@ -9421,19 +9369,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "sonner-basic": { - name: "sonner-basic", - filePath: "examples/base/sonner-basic.tsx", - component: React.lazy(async () => { - const mod = await import("./base/sonner-basic") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "sonner-basic" - return { default: mod.default || mod[exportName] } - }), - }, "sonner-demo": { name: "sonner-demo", filePath: "examples/base/sonner-demo.tsx", @@ -9447,6 +9382,32 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "sonner-description": { + name: "sonner-description", + filePath: "examples/base/sonner-description.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sonner-description") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sonner-description" + return { default: mod.default || mod[exportName] } + }), + }, + "sonner-position": { + name: "sonner-position", + filePath: "examples/base/sonner-position.tsx", + component: React.lazy(async () => { + const mod = await import("./base/sonner-position") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "sonner-position" + return { default: mod.default || mod[exportName] } + }), + }, "sonner-types": { name: "sonner-types", filePath: "examples/base/sonner-types.tsx", @@ -9460,19 +9421,6 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "sonner-with-description": { - name: "sonner-with-description", - filePath: "examples/base/sonner-with-description.tsx", - component: React.lazy(async () => { - const mod = await import("./base/sonner-with-description") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "sonner-with-description" - return { default: mod.default || mod[exportName] } - }), - }, "spinner-badge": { name: "spinner-badge", filePath: "examples/base/spinner-badge.tsx", diff --git a/apps/v4/examples/base/skeleton-avatar.tsx b/apps/v4/examples/base/skeleton-avatar.tsx index ba64414984..1560e7cbf9 100644 --- a/apps/v4/examples/base/skeleton-avatar.tsx +++ b/apps/v4/examples/base/skeleton-avatar.tsx @@ -2,7 +2,7 @@ import { Skeleton } from "@/examples/base/ui/skeleton" export function SkeletonAvatar() { return ( -
+
diff --git a/apps/v4/examples/base/skeleton-card.tsx b/apps/v4/examples/base/skeleton-card.tsx index 68cdbbd302..1576fcf62a 100644 --- a/apps/v4/examples/base/skeleton-card.tsx +++ b/apps/v4/examples/base/skeleton-card.tsx @@ -3,13 +3,13 @@ import { Skeleton } from "@/examples/base/ui/skeleton" export function SkeletonCard() { return ( - + - + ) diff --git a/apps/v4/examples/base/skeleton-demo.tsx b/apps/v4/examples/base/skeleton-demo.tsx index e4575b79e3..c91e55aaf5 100644 --- a/apps/v4/examples/base/skeleton-demo.tsx +++ b/apps/v4/examples/base/skeleton-demo.tsx @@ -2,7 +2,7 @@ import { Skeleton } from "@/examples/base/ui/skeleton" export function SkeletonDemo() { return ( -
+
diff --git a/apps/v4/examples/base/skeleton-form.tsx b/apps/v4/examples/base/skeleton-form.tsx index 11c37f11d2..cbaeca5087 100644 --- a/apps/v4/examples/base/skeleton-form.tsx +++ b/apps/v4/examples/base/skeleton-form.tsx @@ -2,16 +2,16 @@ import { Skeleton } from "@/examples/base/ui/skeleton" export function SkeletonForm() { return ( -
+
- +
- +
- +
) } diff --git a/apps/v4/examples/base/skeleton-table.tsx b/apps/v4/examples/base/skeleton-table.tsx index d5b093d600..12e855ae58 100644 --- a/apps/v4/examples/base/skeleton-table.tsx +++ b/apps/v4/examples/base/skeleton-table.tsx @@ -2,22 +2,14 @@ import { Skeleton } from "@/examples/base/ui/skeleton" export function SkeletonTable() { return ( -
-
- - - -
-
- - - -
-
- - - -
+
+ {Array.from({ length: 5 }).map((_, index) => ( +
+ + + +
+ ))}
) } diff --git a/apps/v4/examples/base/skeleton-text.tsx b/apps/v4/examples/base/skeleton-text.tsx index 556af4b377..3d6f0c40a8 100644 --- a/apps/v4/examples/base/skeleton-text.tsx +++ b/apps/v4/examples/base/skeleton-text.tsx @@ -2,7 +2,7 @@ import { Skeleton } from "@/examples/base/ui/skeleton" export function SkeletonText() { return ( -
+
diff --git a/apps/v4/examples/base/slider-basic.tsx b/apps/v4/examples/base/slider-basic.tsx deleted file mode 100644 index d6bef32198..0000000000 --- a/apps/v4/examples/base/slider-basic.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Slider } from "@/examples/base/ui/slider" - -export function SliderBasic() { - return -} diff --git a/apps/v4/examples/base/slider-controlled.tsx b/apps/v4/examples/base/slider-controlled.tsx index ea5f10acc2..51c99bbb84 100644 --- a/apps/v4/examples/base/slider-controlled.tsx +++ b/apps/v4/examples/base/slider-controlled.tsx @@ -8,7 +8,7 @@ export function SliderControlled() { const [value, setValue] = React.useState([0.3, 0.7]) return ( -
+
diff --git a/apps/v4/examples/base/slider-demo.tsx b/apps/v4/examples/base/slider-demo.tsx index 8c9de95809..d68c5950ae 100644 --- a/apps/v4/examples/base/slider-demo.tsx +++ b/apps/v4/examples/base/slider-demo.tsx @@ -1,17 +1,12 @@ import { Slider } from "@/examples/base/ui/slider" -import { cn } from "@/lib/utils" - -type SliderProps = React.ComponentProps - -export function SliderDemo({ className, ...props }: SliderProps) { +export function SliderDemo() { return ( ) } diff --git a/apps/v4/examples/base/slider-disabled.tsx b/apps/v4/examples/base/slider-disabled.tsx index 357db50a8c..4f5611e59c 100644 --- a/apps/v4/examples/base/slider-disabled.tsx +++ b/apps/v4/examples/base/slider-disabled.tsx @@ -1,5 +1,13 @@ import { Slider } from "@/examples/base/ui/slider" export function SliderDisabled() { - return + return ( + + ) } diff --git a/apps/v4/examples/base/slider-fields.tsx b/apps/v4/examples/base/slider-fields.tsx deleted file mode 100644 index 98e44aaf9e..0000000000 --- a/apps/v4/examples/base/slider-fields.tsx +++ /dev/null @@ -1,119 +0,0 @@ -"use client" - -import * as React from "react" -import { useState } from "react" -import { - Field, - FieldDescription, - FieldGroup, - FieldLabel, -} from "@/examples/base/ui/field" -import { Slider } from "@/examples/base/ui/slider" - -export function SliderFields() { - const [volume, setVolume] = useState([50]) - const [brightness, setBrightness] = useState([75]) - const [temperature, setTemperature] = useState([0.3, 0.7]) - const [priceRange, setPriceRange] = useState([25, 75]) - const [colorBalance, setColorBalance] = useState([10, 20, 70]) - - return ( - - - Volume - setVolume(value as number[])} - max={100} - step={1} - /> - - - Screen Brightness - setBrightness(value as number[])} - max={100} - step={5} - /> - - Current brightness: {brightness[0]}% - - - - Video Quality - Higher quality uses more bandwidth. - - - - Temperature Range - setTemperature(value as number[])} - min={0} - max={1} - step={0.1} - /> - - Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)} - - - - Price Range - setPriceRange(value as number[])} - max={100} - step={5} - /> - - ${priceRange[0]} - ${priceRange[1]} - - - - Color Balance - setColorBalance(value as number[])} - max={100} - step={10} - /> - - Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{" "} - {colorBalance[2]}% - - - - Invalid Slider - - This slider has validation errors. - - - Disabled Slider - - This slider is currently disabled. - - - ) -} diff --git a/apps/v4/examples/base/slider-multiple.tsx b/apps/v4/examples/base/slider-multiple.tsx index 4d5cd1819b..4581e1e240 100644 --- a/apps/v4/examples/base/slider-multiple.tsx +++ b/apps/v4/examples/base/slider-multiple.tsx @@ -1,5 +1,12 @@ import { Slider } from "@/examples/base/ui/slider" export function SliderMultiple() { - return + return ( + + ) } diff --git a/apps/v4/examples/base/slider-range.tsx b/apps/v4/examples/base/slider-range.tsx index 332d69ca2b..2db8f3fd51 100644 --- a/apps/v4/examples/base/slider-range.tsx +++ b/apps/v4/examples/base/slider-range.tsx @@ -1,5 +1,12 @@ import { Slider } from "@/examples/base/ui/slider" export function SliderRange() { - return + return ( + + ) } diff --git a/apps/v4/examples/base/slider-vertical.tsx b/apps/v4/examples/base/slider-vertical.tsx index 6eec36e8b0..cccf18f05e 100644 --- a/apps/v4/examples/base/slider-vertical.tsx +++ b/apps/v4/examples/base/slider-vertical.tsx @@ -2,7 +2,7 @@ import { Slider } from "@/examples/base/ui/slider" export function SliderVertical() { return ( -
+
toast("Event has been created")} - variant="outline" - className="w-fit" - > - Show Toast - - ) -} diff --git a/apps/v4/examples/base/sonner-with-description.tsx b/apps/v4/examples/base/sonner-description.tsx similarity index 86% rename from apps/v4/examples/base/sonner-with-description.tsx rename to apps/v4/examples/base/sonner-description.tsx index f6e13508eb..106483a2fe 100644 --- a/apps/v4/examples/base/sonner-with-description.tsx +++ b/apps/v4/examples/base/sonner-description.tsx @@ -1,7 +1,9 @@ +"use client" + import { Button } from "@/examples/base/ui/button" import { toast } from "sonner" -export function SonnerWithDescription() { +export function SonnerDescription() { return ( + + + + + +
+ ) +} diff --git a/apps/v4/examples/base/ui/slider.tsx b/apps/v4/examples/base/ui/slider.tsx index 93b399ac92..ab1d8c5190 100644 --- a/apps/v4/examples/base/ui/slider.tsx +++ b/apps/v4/examples/base/ui/slider.tsx @@ -24,7 +24,7 @@ function Slider({ return ( - + +
diff --git a/apps/v4/examples/radix/skeleton-card.tsx b/apps/v4/examples/radix/skeleton-card.tsx index a7d9b8e0de..e68c1c5756 100644 --- a/apps/v4/examples/radix/skeleton-card.tsx +++ b/apps/v4/examples/radix/skeleton-card.tsx @@ -3,13 +3,13 @@ import { Skeleton } from "@/examples/radix/ui/skeleton" export function SkeletonCard() { return ( - + - + ) diff --git a/apps/v4/examples/radix/skeleton-demo.tsx b/apps/v4/examples/radix/skeleton-demo.tsx index 641b210096..d020bf10e2 100644 --- a/apps/v4/examples/radix/skeleton-demo.tsx +++ b/apps/v4/examples/radix/skeleton-demo.tsx @@ -2,7 +2,7 @@ import { Skeleton } from "@/examples/radix/ui/skeleton" export function SkeletonDemo() { return ( -
+
diff --git a/apps/v4/examples/radix/skeleton-form.tsx b/apps/v4/examples/radix/skeleton-form.tsx index 9d7e9b3fd1..b58067385d 100644 --- a/apps/v4/examples/radix/skeleton-form.tsx +++ b/apps/v4/examples/radix/skeleton-form.tsx @@ -2,16 +2,16 @@ import { Skeleton } from "@/examples/radix/ui/skeleton" export function SkeletonForm() { return ( -
+
- +
- +
- +
) } diff --git a/apps/v4/examples/radix/skeleton-table.tsx b/apps/v4/examples/radix/skeleton-table.tsx index 9706ac7324..a0d0a452b0 100644 --- a/apps/v4/examples/radix/skeleton-table.tsx +++ b/apps/v4/examples/radix/skeleton-table.tsx @@ -2,22 +2,14 @@ import { Skeleton } from "@/examples/radix/ui/skeleton" export function SkeletonTable() { return ( -
-
- - - -
-
- - - -
-
- - - -
+
+ {Array.from({ length: 5 }).map((_, index) => ( +
+ + + +
+ ))}
) } diff --git a/apps/v4/examples/radix/skeleton-text.tsx b/apps/v4/examples/radix/skeleton-text.tsx index 5d33903d60..26887a9a5c 100644 --- a/apps/v4/examples/radix/skeleton-text.tsx +++ b/apps/v4/examples/radix/skeleton-text.tsx @@ -2,7 +2,7 @@ import { Skeleton } from "@/examples/radix/ui/skeleton" export function SkeletonText() { return ( -
+
diff --git a/apps/v4/examples/radix/slider-basic.tsx b/apps/v4/examples/radix/slider-basic.tsx deleted file mode 100644 index 50f731f78e..0000000000 --- a/apps/v4/examples/radix/slider-basic.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { Slider } from "@/examples/radix/ui/slider" - -export function SliderBasic() { - return -} diff --git a/apps/v4/examples/radix/slider-controlled.tsx b/apps/v4/examples/radix/slider-controlled.tsx index 93627c1b36..bf6bf14afb 100644 --- a/apps/v4/examples/radix/slider-controlled.tsx +++ b/apps/v4/examples/radix/slider-controlled.tsx @@ -8,7 +8,7 @@ export function SliderControlled() { const [value, setValue] = React.useState([0.3, 0.7]) return ( -
+
diff --git a/apps/v4/examples/radix/slider-demo.tsx b/apps/v4/examples/radix/slider-demo.tsx index f85c1a74a7..a2e003c30f 100644 --- a/apps/v4/examples/radix/slider-demo.tsx +++ b/apps/v4/examples/radix/slider-demo.tsx @@ -1,17 +1,12 @@ import { Slider } from "@/examples/radix/ui/slider" -import { cn } from "@/lib/utils" - -type SliderProps = React.ComponentProps - -export function SliderDemo({ className, ...props }: SliderProps) { +export function SliderDemo() { return ( ) } diff --git a/apps/v4/examples/radix/slider-disabled.tsx b/apps/v4/examples/radix/slider-disabled.tsx index 9054191357..c77e81b9c3 100644 --- a/apps/v4/examples/radix/slider-disabled.tsx +++ b/apps/v4/examples/radix/slider-disabled.tsx @@ -1,5 +1,13 @@ import { Slider } from "@/examples/radix/ui/slider" export function SliderDisabled() { - return + return ( + + ) } diff --git a/apps/v4/examples/radix/slider-fields.tsx b/apps/v4/examples/radix/slider-fields.tsx deleted file mode 100644 index 9fe3a4a468..0000000000 --- a/apps/v4/examples/radix/slider-fields.tsx +++ /dev/null @@ -1,119 +0,0 @@ -"use client" - -import * as React from "react" -import { useState } from "react" -import { - Field, - FieldDescription, - FieldGroup, - FieldLabel, -} from "@/examples/radix/ui/field" -import { Slider } from "@/examples/radix/ui/slider" - -export function SliderFields() { - const [volume, setVolume] = useState([50]) - const [brightness, setBrightness] = useState([75]) - const [temperature, setTemperature] = useState([0.3, 0.7]) - const [priceRange, setPriceRange] = useState([25, 75]) - const [colorBalance, setColorBalance] = useState([10, 20, 70]) - - return ( - - - Volume - - - - Screen Brightness - - - Current brightness: {brightness[0]}% - - - - Video Quality - Higher quality uses more bandwidth. - - - - Temperature Range - - - Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)} - - - - Price Range - - - ${priceRange[0]} - ${priceRange[1]} - - - - Color Balance - - - Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{" "} - {colorBalance[2]}% - - - - Invalid Slider - - This slider has validation errors. - - - Disabled Slider - - This slider is currently disabled. - - - ) -} diff --git a/apps/v4/examples/radix/slider-multiple.tsx b/apps/v4/examples/radix/slider-multiple.tsx index b0e2f9296e..166af5f543 100644 --- a/apps/v4/examples/radix/slider-multiple.tsx +++ b/apps/v4/examples/radix/slider-multiple.tsx @@ -1,5 +1,12 @@ import { Slider } from "@/examples/radix/ui/slider" export function SliderMultiple() { - return + return ( + + ) } diff --git a/apps/v4/examples/radix/slider-range.tsx b/apps/v4/examples/radix/slider-range.tsx index d280cad67b..31724468bb 100644 --- a/apps/v4/examples/radix/slider-range.tsx +++ b/apps/v4/examples/radix/slider-range.tsx @@ -1,5 +1,12 @@ import { Slider } from "@/examples/radix/ui/slider" export function SliderRange() { - return + return ( + + ) } diff --git a/apps/v4/examples/radix/slider-vertical.tsx b/apps/v4/examples/radix/slider-vertical.tsx index 9149260696..693ec1e72d 100644 --- a/apps/v4/examples/radix/slider-vertical.tsx +++ b/apps/v4/examples/radix/slider-vertical.tsx @@ -2,7 +2,7 @@ import { Slider } from "@/examples/radix/ui/slider" export function SliderVertical() { return ( -
+
toast("Event has been created")} - variant="outline" - className="w-fit" - > - Show Toast - - ) -} diff --git a/apps/v4/examples/radix/sonner-with-description.tsx b/apps/v4/examples/radix/sonner-description.tsx similarity index 86% rename from apps/v4/examples/radix/sonner-with-description.tsx rename to apps/v4/examples/radix/sonner-description.tsx index ced6067a39..d2610e6361 100644 --- a/apps/v4/examples/radix/sonner-with-description.tsx +++ b/apps/v4/examples/radix/sonner-description.tsx @@ -1,7 +1,9 @@ +"use client" + import { Button } from "@/examples/radix/ui/button" import { toast } from "sonner" -export function SonnerWithDescription() { +export function SonnerDescription() { return ( + + + + + +
+ ) +} diff --git a/apps/v4/public/r/styles/base-lyra/slider.json b/apps/v4/public/r/styles/base-lyra/slider.json index fbef2cc7a1..2086fcc595 100644 --- a/apps/v4/public/r/styles/base-lyra/slider.json +++ b/apps/v4/public/r/styles/base-lyra/slider.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-lyra/ui/slider.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-maia/slider.json b/apps/v4/public/r/styles/base-maia/slider.json index 52834a7779..3648685762 100644 --- a/apps/v4/public/r/styles/base-maia/slider.json +++ b/apps/v4/public/r/styles/base-maia/slider.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-maia/ui/slider.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-mira/slider.json b/apps/v4/public/r/styles/base-mira/slider.json index c246643f50..cc1025e915 100644 --- a/apps/v4/public/r/styles/base-mira/slider.json +++ b/apps/v4/public/r/styles/base-mira/slider.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-mira/ui/slider.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-nova/slider.json b/apps/v4/public/r/styles/base-nova/slider.json index 90a9719640..e716ad8bf5 100644 --- a/apps/v4/public/r/styles/base-nova/slider.json +++ b/apps/v4/public/r/styles/base-nova/slider.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-nova/ui/slider.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-vega/slider.json b/apps/v4/public/r/styles/base-vega/slider.json index 7a30c05346..70da61efe3 100644 --- a/apps/v4/public/r/styles/base-vega/slider.json +++ b/apps/v4/public/r/styles/base-vega/slider.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/base-vega/ui/slider.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Slider({\n className,\n defaultValue,\n value,\n min = 0,\n max = 100,\n ...props\n}: SliderPrimitive.Root.Props) {\n const _values = React.useMemo(\n () =>\n Array.isArray(value)\n ? value\n : Array.isArray(defaultValue)\n ? defaultValue\n : [min, max],\n [value, defaultValue, min, max]\n )\n\n return (\n \n \n \n \n \n {Array.from({ length: _values.length }, (_, index) => (\n \n ))}\n \n \n )\n}\n\nexport { Slider }\n", "type": "registry:ui" } ], diff --git a/apps/v4/registry/bases/base/ui/slider.tsx b/apps/v4/registry/bases/base/ui/slider.tsx index e977f00288..2db9fc2db5 100644 --- a/apps/v4/registry/bases/base/ui/slider.tsx +++ b/apps/v4/registry/bases/base/ui/slider.tsx @@ -25,7 +25,7 @@ function Slider({ return ( - +