@music-vine/cadence 2.2.0 → 2.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -72,7 +72,7 @@ const Slider = React.memo(
|
|
|
72
72
|
(props.value ?? props.defaultValue ?? []).map((_, index) => /* @__PURE__ */ jsx(
|
|
73
73
|
SliderPrimitive.Thumb,
|
|
74
74
|
{
|
|
75
|
-
className: "block h-3 w-3 rounded-full border-2 border-gray-900 bg-brand-primary ring-offset-white transition-colors hover:cursor-grab focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50 dark:border-gray-50 dark:
|
|
75
|
+
className: "block h-3 w-3 rounded-full border-2 border-gray-900 bg-brand-primary ring-offset-white transition-colors hover:cursor-grab focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50 dark:border-gray-50 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300"
|
|
76
76
|
},
|
|
77
77
|
index
|
|
78
78
|
))
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/components/slider.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * @module Slider\n *\n * Range input slider with draggable thumb. Built on Radix UI Slider primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/slider Shadcn Slider}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/slider Radix Slider}\n *\n * @example\n * // Basic slider\n * <Slider defaultValue={[50]} max={100} step={1} />\n *\n * @example\n * // With value display\n * <Slider defaultValue={[50]} max={100} showValue />\n *\n * @example\n * // Controlled slider\n * const [value, setValue] = useState([25]);\n *\n * <Slider value={value} onValueChange={setValue} max={100} />\n *\n * @example\n * // Vertical orientation\n * <Slider orientation=\"vertical\" className=\"h-48\" />\n */\nimport { cva } from \"class-variance-authority\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst sliderVariants = cva(\n \"relative flex h-full w-full touch-none select-none items-center justify-center\",\n {\n variants: {\n variant: {\n default: \"\",\n dynamic: \"\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nconst trackVariants = cva(\n \"relative overflow-hidden rounded-full bg-gray-200 hover:cursor-pointer\",\n {\n variants: {\n variant: {\n default: \"bg-gray-200\",\n dynamic: \"bg-gray-100 dark:bg-gray-700\",\n },\n orientation: {\n horizontal: \"h-1 w-full\",\n vertical: \"h-full w-1\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n orientation: \"horizontal\",\n },\n }\n);\n\n/**\n * Props for the Slider component.\n * @property variant - Visual style: `\"default\"` or `\"dynamic\"`\n * @property showValue - Display current value next to slider (horizontal only)\n */\ninterface SliderProps\n extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n variant?: \"default\" | \"dynamic\";\n ref?: Ref<React.ElementRef<typeof SliderPrimitive.Root>>;\n /** Display the current value to the right of the slider */\n showValue?: boolean;\n}\n\nconst Slider = React.memo(\n ({\n className,\n orientation = \"horizontal\",\n variant,\n showValue = false,\n ref,\n ...props\n }: SliderProps) => {\n const sliderElement = (\n <SliderPrimitive.Root\n className={cn(sliderVariants({ variant, className }))}\n orientation={orientation}\n ref={ref}\n {...props}\n >\n <SliderPrimitive.Track\n className={cn(trackVariants({ variant, orientation }))}\n >\n <SliderPrimitive.Range\n className={cn(\n \"absolute bg-brand-primary\",\n orientation === \"horizontal\" ? \"h-full\" : \"right-0 w-full\"\n )}\n data-orientation={orientation}\n />\n </SliderPrimitive.Track>\n {(props.value ?? props.defaultValue ?? []).map((_, index) => (\n <SliderPrimitive.Thumb\n className=\"block h-3 w-3 rounded-full border-2 border-gray-900 bg-brand-primary ring-offset-white transition-colors hover:cursor-grab focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50 dark:border-gray-50 dark:
|
|
4
|
+
"sourcesContent": ["/**\n * @module Slider\n *\n * Range input slider with draggable thumb. Built on Radix UI Slider primitive.\n *\n * @see {@link https://ui.shadcn.com/docs/components/slider Shadcn Slider}\n * @see {@link https://www.radix-ui.com/primitives/docs/components/slider Radix Slider}\n *\n * @example\n * // Basic slider\n * <Slider defaultValue={[50]} max={100} step={1} />\n *\n * @example\n * // With value display\n * <Slider defaultValue={[50]} max={100} showValue />\n *\n * @example\n * // Controlled slider\n * const [value, setValue] = useState([25]);\n *\n * <Slider value={value} onValueChange={setValue} max={100} />\n *\n * @example\n * // Vertical orientation\n * <Slider orientation=\"vertical\" className=\"h-48\" />\n */\nimport { cva } from \"class-variance-authority\";\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport type { Ref } from \"react\";\nimport * as React from \"react\";\n\nimport { cn } from \"../lib/utils\";\n\nconst sliderVariants = cva(\n \"relative flex h-full w-full touch-none select-none items-center justify-center\",\n {\n variants: {\n variant: {\n default: \"\",\n dynamic: \"\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n);\n\nconst trackVariants = cva(\n \"relative overflow-hidden rounded-full bg-gray-200 hover:cursor-pointer\",\n {\n variants: {\n variant: {\n default: \"bg-gray-200\",\n dynamic: \"bg-gray-100 dark:bg-gray-700\",\n },\n orientation: {\n horizontal: \"h-1 w-full\",\n vertical: \"h-full w-1\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n orientation: \"horizontal\",\n },\n }\n);\n\n/**\n * Props for the Slider component.\n * @property variant - Visual style: `\"default\"` or `\"dynamic\"`\n * @property showValue - Display current value next to slider (horizontal only)\n */\ninterface SliderProps\n extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {\n variant?: \"default\" | \"dynamic\";\n ref?: Ref<React.ElementRef<typeof SliderPrimitive.Root>>;\n /** Display the current value to the right of the slider */\n showValue?: boolean;\n}\n\nconst Slider = React.memo(\n ({\n className,\n orientation = \"horizontal\",\n variant,\n showValue = false,\n ref,\n ...props\n }: SliderProps) => {\n const sliderElement = (\n <SliderPrimitive.Root\n className={cn(sliderVariants({ variant, className }))}\n orientation={orientation}\n ref={ref}\n {...props}\n >\n <SliderPrimitive.Track\n className={cn(trackVariants({ variant, orientation }))}\n >\n <SliderPrimitive.Range\n className={cn(\n \"absolute bg-brand-primary\",\n orientation === \"horizontal\" ? \"h-full\" : \"right-0 w-full\"\n )}\n data-orientation={orientation}\n />\n </SliderPrimitive.Track>\n {(props.value ?? props.defaultValue ?? []).map((_, index) => (\n <SliderPrimitive.Thumb\n className=\"block h-3 w-3 rounded-full border-2 border-gray-900 bg-brand-primary ring-offset-white transition-colors hover:cursor-grab focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50 dark:border-gray-50 dark:ring-offset-gray-950 dark:focus-visible:ring-gray-300\"\n key={index}\n />\n ))}\n </SliderPrimitive.Root>\n );\n\n if (showValue && orientation === \"horizontal\") {\n return (\n <div className=\"flex items-center gap-3\">\n {sliderElement}\n <span className=\"min-w-[2rem] text-right text-gray-700 text-sm tabular-nums dark:text-gray-200\">\n {props.value?.at(0) ?? props.defaultValue?.at(0) ?? 0}\n </span>\n </div>\n );\n }\n\n return sliderElement;\n }\n);\n\nexport { Slider, sliderVariants };\nexport type { SliderProps };\n"],
|
|
5
5
|
"mappings": "AA2FM,SASI,KATJ;AAjEN,SAAS,WAAW;AACpB,SAAS,UAAU,uBAAuB;AAE1C,YAAY,WAAW;AAEvB,SAAS,UAAU;AAEnB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,MACX;AAAA,MACA,aAAa;AAAA,QACX,YAAY;AAAA,QACZ,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAeA,MAAM,SAAS,MAAM;AAAA,EACnB,CAAC;AAAA,IACC;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,GAAG;AAAA,EACL,MAAmB;AACjB,UAAM,gBACJ;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,CAAC;AAAA,QACpD;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,WAAW,GAAG,cAAc,EAAE,SAAS,YAAY,CAAC,CAAC;AAAA,cAErD;AAAA,gBAAC,gBAAgB;AAAA,gBAAhB;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,gBAAgB,eAAe,WAAW;AAAA,kBAC5C;AAAA,kBACA,oBAAkB;AAAA;AAAA,cACpB;AAAA;AAAA,UACF;AAAA,WACE,MAAM,SAAS,MAAM,gBAAgB,CAAC,GAAG,IAAI,CAAC,GAAG,UACjD;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cACC,WAAU;AAAA;AAAA,YACL;AAAA,UACP,CACD;AAAA;AAAA;AAAA,IACH;AAGF,QAAI,aAAa,gBAAgB,cAAc;AAC7C,aACE,qBAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACD,oBAAC,UAAK,WAAU,iFACb,gBAAM,OAAO,GAAG,CAAC,KAAK,MAAM,cAAc,GAAG,CAAC,KAAK,GACtD;AAAA,SACF;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|