@ngrok/mantle 0.64.1 → 0.64.2
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.
- package/dist/mantle.css +15 -0
- package/dist/slider.d.ts +13 -2
- package/dist/slider.js +1 -1
- package/dist/slider.js.map +1 -1
- package/package.json +1 -1
package/dist/mantle.css
CHANGED
|
@@ -160,6 +160,9 @@ MARK: THEME
|
|
|
160
160
|
--divide-color-card: var(--border-color-card);
|
|
161
161
|
--divide-color-card-muted: var(--border-color-card-muted);
|
|
162
162
|
|
|
163
|
+
--color-card-border: var(--color-card-border);
|
|
164
|
+
--color-card-border-muted: var(--color-card-border-muted);
|
|
165
|
+
|
|
163
166
|
--text-color-strong: var(--text-color-strong);
|
|
164
167
|
--text-color-body: var(--text-color-body);
|
|
165
168
|
--text-color-muted: var(--text-color-muted);
|
|
@@ -329,6 +332,9 @@ MARK: LIGHT DEFS
|
|
|
329
332
|
--divide-color-card: var(--color-neutral-300);
|
|
330
333
|
--divide-color-card-muted: var(--color-neutral-200);
|
|
331
334
|
|
|
335
|
+
--color-card-border: var(--color-neutral-300);
|
|
336
|
+
--color-card-border-muted: var(--color-neutral-200);
|
|
337
|
+
|
|
332
338
|
--text-color-strong: var(--color-neutral-950);
|
|
333
339
|
--text-color-body: --alpha(var(--color-neutral-950) / 0.75);
|
|
334
340
|
--text-color-muted: --alpha(var(--color-neutral-950) / 0.6);
|
|
@@ -669,6 +675,9 @@ MARK: DARK DEFS
|
|
|
669
675
|
--divide-color-card: var(--color-neutral-300);
|
|
670
676
|
--divide-color-card-muted: var(--color-neutral-200);
|
|
671
677
|
|
|
678
|
+
--color-card-border: var(--color-neutral-300);
|
|
679
|
+
--color-card-border-muted: var(--color-neutral-200);
|
|
680
|
+
|
|
672
681
|
--text-color-strong: #fff;
|
|
673
682
|
--text-color-body: --alpha(#fff / 0.7);
|
|
674
683
|
--text-color-muted: --alpha(#fff / 0.5);
|
|
@@ -973,6 +982,9 @@ MARK: LIGHT HICON DEFS
|
|
|
973
982
|
--divide-color-card: var(--color-neutral-300);
|
|
974
983
|
--divide-color-card-muted: var(--color-neutral-200);
|
|
975
984
|
|
|
985
|
+
--color-card-border: var(--color-neutral-300);
|
|
986
|
+
--color-card-border-muted: var(--color-neutral-300);
|
|
987
|
+
|
|
976
988
|
--text-color-strong: var(--color-black);
|
|
977
989
|
--text-color-body: var(--color-neutral-950);
|
|
978
990
|
--text-color-muted: --alpha(var(--color-black) / 0.75);
|
|
@@ -1277,6 +1289,9 @@ MARK: DARK HICON DEFS
|
|
|
1277
1289
|
--divide-color-card: var(--color-neutral-300);
|
|
1278
1290
|
--divide-color-card-muted: var(--color-neutral-300);
|
|
1279
1291
|
|
|
1292
|
+
--color-card-border: var(--color-neutral-300);
|
|
1293
|
+
--color-card-border-muted: var(--color-neutral-300);
|
|
1294
|
+
|
|
1280
1295
|
--text-color-strong: var(--color-black);
|
|
1281
1296
|
--text-color-body: var(--color-neutral-950);
|
|
1282
1297
|
--text-color-muted: --alpha(var(--color-black) / 0.75);
|
package/dist/slider.d.ts
CHANGED
|
@@ -34,7 +34,18 @@ type SliderValueProps = {
|
|
|
34
34
|
/**
|
|
35
35
|
* Props for the {@link Slider} component.
|
|
36
36
|
*/
|
|
37
|
-
type SliderProps = SliderBaseProps & SliderValueProps
|
|
37
|
+
type SliderProps = SliderBaseProps & SliderValueProps & {
|
|
38
|
+
/**
|
|
39
|
+
* The color of the slider range. Accepts any Tailwind `bg-*` class.
|
|
40
|
+
* @default "bg-accent-500"
|
|
41
|
+
*/
|
|
42
|
+
color?: `bg-${string}`;
|
|
43
|
+
/**
|
|
44
|
+
* Whether to show tick marks along the track at each `step` interval.
|
|
45
|
+
* @default false
|
|
46
|
+
*/
|
|
47
|
+
showTicks?: boolean;
|
|
48
|
+
};
|
|
38
49
|
/**
|
|
39
50
|
* An input where the user selects a value from within a given range.
|
|
40
51
|
*
|
|
@@ -70,6 +81,6 @@ type SliderProps = SliderBaseProps & SliderValueProps;
|
|
|
70
81
|
* />
|
|
71
82
|
* ```
|
|
72
83
|
*/
|
|
73
|
-
declare function Slider({ className, defaultValue,
|
|
84
|
+
declare function Slider({ className, color, defaultValue, max, min, minStepsBetweenThumbs, step, showTicks, value, ...props }: SliderProps): react_jsx_runtime.JSX.Element;
|
|
74
85
|
|
|
75
86
|
export { Slider, type SliderProps };
|
package/dist/slider.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{a
|
|
1
|
+
import{a}from"./chunk-PFXFESEN.js";import*as e from"@radix-ui/react-slider";import{jsx as o,jsxs as g}from"react/jsx-runtime";function P({className:n,color:s="bg-accent-500",defaultValue:t,max:i=100,min:r=0,minStepsBetweenThumbs:f=1,step:c=1,showTicks:p=!1,value:l,...v}){let m=l!=null?Array.isArray(l)?l:[l]:void 0,b=t!=null?Array.isArray(t)?t:[t]:void 0,h=m??b??[r],d=y(p,r,i,c);return g(e.Root,{"data-slot":"slider",defaultValue:b,value:m,min:r,minStepsBetweenThumbs:f,max:i,step:c,className:a("[--slider-thumb-size:--spacing(4.5)]","data-orientation-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-orientation-vertical:h-full data-orientation-vertical:w-auto data-orientation-vertical:flex-col",d>0&&"mb-3",n),...v,children:[o(e.Track,{"data-slot":"slider-track",className:a("bg-neutral-300 rounded-full relative grow overflow-hidden","data-orientation-horizontal:h-1.5 data-orientation-horizontal:w-full","data-orientation-vertical:w-1.5 data-orientation-vertical:h-full"),children:o(e.Range,{"data-slot":"slider-range",className:a("absolute select-none data-orientation-horizontal:h-full data-orientation-vertical:w-full",s)})}),Array.from({length:h.length},(S,u)=>o(e.Thumb,{"data-slot":"slider-thumb",className:a("bg-card border-card relative size-(--slider-thumb-size) rounded-full border","shadow-md transition-[color,box-shadow]","after:absolute after:-inset-2","focus-visible:ring-3 focus-visible:ring-accent-500/20 focus-visible:outline-hidden","block shrink-0 cursor-pointer select-none","data-disabled:pointer-events-none data-disabled:cursor-default")},u)),d>0&&o("div",{"data-slot":"slider-ticks",className:"absolute top-full mt-1.5 flex w-full justify-between px-[calc(var(--slider-thumb-size)/2)]","aria-hidden":"true",children:Array.from({length:d},(S,u)=>o("span",{"data-slot":"slider-tick",className:"bg-card-border h-1.5 w-px"},u))})]})}function y(n,s,t,i){let r=t-s;return!n||!Number.isFinite(r)||!Number.isFinite(i)||i<=0||r<=0?0:Math.floor(r/i)+1}export{P as Slider};
|
|
2
2
|
//# sourceMappingURL=slider.js.map
|
package/dist/slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SliderBaseProps = Omit<ComponentProps<typeof SliderPrimitive.Root>, \"defaultValue\" | \"value\">;\n\n/**\n * Value props for the {@link Slider} component. Either both `defaultValue` and\n * `value` must be the same type (both `number` or both `number[]`), or only one\n * may be provided.\n */\ntype SliderValueProps =\n\t| {\n\t\t\t/**\n\t\t\t * The value of the slider when initially rendered. Use when you do not need\n\t\t\t * to control the state of the slider.\n\t\t\t */\n\t\t\tdefaultValue?: number;\n\t\t\t/**\n\t\t\t * The controlled value of the slider. Must be used with `onValueChange`.\n\t\t\t */\n\t\t\tvalue?: number;\n\t }\n\t| {\n\t\t\t/**\n\t\t\t * The values of the slider when initially rendered. Use when you do not need\n\t\t\t * to control the state of the slider. Pass an array to create a range slider\n\t\t\t * with multiple thumbs.\n\t\t\t */\n\t\t\tdefaultValue?: number[];\n\t\t\t/**\n\t\t\t * The controlled values of the slider. Must be used with `onValueChange`.\n\t\t\t * Pass an array to create a range slider with multiple thumbs.\n\t\t\t */\n\t\t\tvalue?: number[];\n\t };\n\n/**\n * Props for the {@link Slider} component.\n */\ntype SliderProps = SliderBaseProps &
|
|
1
|
+
{"version":3,"sources":["../src/components/slider/slider.tsx"],"sourcesContent":["\"use client\";\n\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport type { ComponentProps } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SliderBaseProps = Omit<ComponentProps<typeof SliderPrimitive.Root>, \"defaultValue\" | \"value\">;\n\n/**\n * Value props for the {@link Slider} component. Either both `defaultValue` and\n * `value` must be the same type (both `number` or both `number[]`), or only one\n * may be provided.\n */\ntype SliderValueProps =\n\t| {\n\t\t\t/**\n\t\t\t * The value of the slider when initially rendered. Use when you do not need\n\t\t\t * to control the state of the slider.\n\t\t\t */\n\t\t\tdefaultValue?: number;\n\t\t\t/**\n\t\t\t * The controlled value of the slider. Must be used with `onValueChange`.\n\t\t\t */\n\t\t\tvalue?: number;\n\t }\n\t| {\n\t\t\t/**\n\t\t\t * The values of the slider when initially rendered. Use when you do not need\n\t\t\t * to control the state of the slider. Pass an array to create a range slider\n\t\t\t * with multiple thumbs.\n\t\t\t */\n\t\t\tdefaultValue?: number[];\n\t\t\t/**\n\t\t\t * The controlled values of the slider. Must be used with `onValueChange`.\n\t\t\t * Pass an array to create a range slider with multiple thumbs.\n\t\t\t */\n\t\t\tvalue?: number[];\n\t };\n\n/**\n * Props for the {@link Slider} component.\n */\ntype SliderProps = SliderBaseProps &\n\tSliderValueProps & {\n\t\t/**\n\t\t * The color of the slider range. Accepts any Tailwind `bg-*` class.\n\t\t * @default \"bg-accent-500\"\n\t\t */\n\t\tcolor?: `bg-${string}`;\n\t\t/**\n\t\t * Whether to show tick marks along the track at each `step` interval.\n\t\t * @default false\n\t\t */\n\t\tshowTicks?: boolean;\n\t};\n\n/**\n * An input where the user selects a value from within a given range.\n *\n * @see https://mantle.ngrok.com/components/slider\n *\n * @example\n * ```tsx\n * // single thumb\n * <Slider\n * defaultValue={75}\n * max={100}\n * step={1}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // range\n * <Slider\n * defaultValue={[25, 50]}\n * max={100}\n * step={5}\n * />\n * ```\n *\n * @example\n * ```tsx\n * // multiple thumbs\n * <Slider\n * defaultValue={[10, 20, 70]}\n * max={100}\n * step={10}\n * />\n * ```\n */\nfunction Slider({\n\tclassName,\n\tcolor = \"bg-accent-500\",\n\tdefaultValue,\n\tmax = 100,\n\tmin = 0,\n\tminStepsBetweenThumbs = 1,\n\tstep = 1,\n\tshowTicks = false,\n\tvalue,\n\t...props\n}: SliderProps) {\n\tconst normalizedValue = value != null ? (Array.isArray(value) ? value : [value]) : undefined;\n\tconst normalizedDefaultValue =\n\t\tdefaultValue != null\n\t\t\t? Array.isArray(defaultValue)\n\t\t\t\t? defaultValue\n\t\t\t\t: [defaultValue]\n\t\t\t: undefined;\n\tconst values = normalizedValue ?? normalizedDefaultValue ?? [min];\n\tconst tickCount = computeTickCount(showTicks, min, max, step);\n\n\treturn (\n\t\t<SliderPrimitive.Root\n\t\t\tdata-slot=\"slider\"\n\t\t\tdefaultValue={normalizedDefaultValue}\n\t\t\tvalue={normalizedValue}\n\t\t\tmin={min}\n\t\t\tminStepsBetweenThumbs={minStepsBetweenThumbs}\n\t\t\tmax={max}\n\t\t\tstep={step}\n\t\t\tclassName={cx(\n\t\t\t\t\"[--slider-thumb-size:--spacing(4.5)]\",\n\t\t\t\t\"data-orientation-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-orientation-vertical:h-full data-orientation-vertical:w-auto data-orientation-vertical:flex-col\",\n\t\t\t\ttickCount > 0 && \"mb-3\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SliderPrimitive.Track\n\t\t\t\tdata-slot=\"slider-track\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-neutral-300 rounded-full relative grow overflow-hidden\",\n\t\t\t\t\t\"data-orientation-horizontal:h-1.5 data-orientation-horizontal:w-full\",\n\t\t\t\t\t\"data-orientation-vertical:w-1.5 data-orientation-vertical:h-full\",\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<SliderPrimitive.Range\n\t\t\t\t\tdata-slot=\"slider-range\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"absolute select-none data-orientation-horizontal:h-full data-orientation-vertical:w-full\",\n\t\t\t\t\t\tcolor,\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</SliderPrimitive.Track>\n\t\t\t{Array.from({ length: values.length }, (_, index) => (\n\t\t\t\t<SliderPrimitive.Thumb\n\t\t\t\t\tdata-slot=\"slider-thumb\"\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"bg-card border-card relative size-(--slider-thumb-size) rounded-full border\",\n\t\t\t\t\t\t\"shadow-md transition-[color,box-shadow]\",\n\t\t\t\t\t\t\"after:absolute after:-inset-2\",\n\t\t\t\t\t\t\"focus-visible:ring-3 focus-visible:ring-accent-500/20 focus-visible:outline-hidden\",\n\t\t\t\t\t\t\"block shrink-0 cursor-pointer select-none\",\n\t\t\t\t\t\t\"data-disabled:pointer-events-none data-disabled:cursor-default\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{tickCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"slider-ticks\"\n\t\t\t\t\tclassName=\"absolute top-full mt-1.5 flex w-full justify-between px-[calc(var(--slider-thumb-size)/2)]\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t>\n\t\t\t\t\t{Array.from({ length: tickCount }, (_, index) => (\n\t\t\t\t\t\t<span key={index} data-slot=\"slider-tick\" className=\"bg-card-border h-1.5 w-px\" />\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</SliderPrimitive.Root>\n\t);\n}\n\nexport { Slider };\nexport type { SliderProps };\n\n// MARK: - Private\n\n/**\n * Compute the number of tick marks to render based on the slider's range and step.\n * Returns 0 if ticks are disabled or if the step/range is invalid.\n */\nfunction computeTickCount(showTicks: boolean, min: number, max: number, step: number): number {\n\tconst range = max - min;\n\tif (!showTicks || !Number.isFinite(range) || !Number.isFinite(step) || step <= 0 || range <= 0) {\n\t\treturn 0;\n\t}\n\treturn Math.floor(range / step) + 1;\n}\n"],"mappings":"mCAEA,UAAYA,MAAqB,yBAgH/B,OAwBE,OAAAC,EAxBF,QAAAC,MAAA,oBAvBF,SAASC,EAAO,CACf,UAAAC,EACA,MAAAC,EAAQ,gBACR,aAAAC,EACA,IAAAC,EAAM,IACN,IAAAC,EAAM,EACN,sBAAAC,EAAwB,EACxB,KAAAC,EAAO,EACP,UAAAC,EAAY,GACZ,MAAAC,EACA,GAAGC,CACJ,EAAgB,CACf,IAAMC,EAAkBF,GAAS,KAAQ,MAAM,QAAQA,CAAK,EAAIA,EAAQ,CAACA,CAAK,EAAK,OAC7EG,EACLT,GAAgB,KACb,MAAM,QAAQA,CAAY,EACzBA,EACA,CAACA,CAAY,EACd,OACEU,EAASF,GAAmBC,GAA0B,CAACP,CAAG,EAC1DS,EAAYC,EAAiBP,EAAWH,EAAKD,EAAKG,CAAI,EAE5D,OACCR,EAAiB,OAAhB,CACA,YAAU,SACV,aAAca,EACd,MAAOD,EACP,IAAKN,EACL,sBAAuBC,EACvB,IAAKF,EACL,KAAMG,EACN,UAAWS,EACV,uCACA,4NACAF,EAAY,GAAK,OACjBb,CACD,EACC,GAAGS,EAEJ,UAAAZ,EAAiB,QAAhB,CACA,YAAU,eACV,UAAWkB,EACV,4DACA,uEACA,kEACD,EAEA,SAAAlB,EAAiB,QAAhB,CACA,YAAU,eACV,UAAWkB,EACV,2FACAd,CACD,EACD,EACD,EACC,MAAM,KAAK,CAAE,OAAQW,EAAO,MAAO,EAAG,CAACI,EAAGC,IAC1CpB,EAAiB,QAAhB,CACA,YAAU,eAEV,UAAWkB,EACV,8EACA,0CACA,gCACA,qFACA,4CACA,gEACD,GARKE,CASN,CACA,EACAJ,EAAY,GACZhB,EAAC,OACA,YAAU,eACV,UAAU,6FACV,cAAY,OAEX,eAAM,KAAK,CAAE,OAAQgB,CAAU,EAAG,CAACG,EAAGC,IACtCpB,EAAC,QAAiB,YAAU,cAAc,UAAU,6BAAzCoB,CAAqE,CAChF,EACF,GAEF,CAEF,CAWA,SAASC,EAAiBC,EAAoBC,EAAaC,EAAaC,EAAsB,CAC7F,IAAMC,EAAQF,EAAMD,EACpB,MAAI,CAACD,GAAa,CAAC,OAAO,SAASI,CAAK,GAAK,CAAC,OAAO,SAASD,CAAI,GAAKA,GAAQ,GAAKC,GAAS,EACrF,EAED,KAAK,MAAMA,EAAQD,CAAI,EAAI,CACnC","names":["SliderPrimitive","jsx","jsxs","Slider","className","color","defaultValue","max","min","minStepsBetweenThumbs","step","showTicks","value","props","normalizedValue","normalizedDefaultValue","values","tickCount","computeTickCount","cx","_","index","computeTickCount","showTicks","min","max","step","range"]}
|