@ngrok/mantle 0.67.0 → 0.68.1

package/dist/slider.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-slider";function i({className:i,color:o=`bg-accent-500`,defaultValue:s,max:c=100,min:l=0,minStepsBetweenThumbs:u=1,step:d=1,showTicks:f=!1,value:p,...m}){let h=p==null?void 0:Array.isArray(p)?p:[p],g=s==null?void 0:Array.isArray(s)?s:[s],_=h??g??[l],v=a(f,l,c,d);return n(r.Root,{"data-slot":`slider`,defaultValue:g,value:h,min:l,minStepsBetweenThumbs:u,max:c,step:d,className:e(`[--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`,v>0&&`mb-3`,i),...m,children:[t(r.Track,{"data-slot":`slider-track`,className:e(`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:t(r.Range,{"data-slot":`slider-range`,className:e(`absolute select-none data-orientation-horizontal:h-full data-orientation-vertical:w-full`,o)})}),Array.from({length:_.length},(n,i)=>t(r.Thumb,{"data-slot":`slider-thumb`,className:e(`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`)},i)),v>0&&t(`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:v},(e,n)=>t(`span`,{"data-slot":`slider-tick`,className:`bg-card-border h-1.5 w-px`},n))})]})}function a(e,t,n,r){let i=n-t;return!e||!Number.isFinite(i)||!Number.isFinite(r)||r<=0||i<=0?0:Math.floor(i/r)+1}export{i as Slider};
+import{t as e}from"./cx-D1HYnpvA.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import*as r from"@radix-ui/react-slider";function i({className:i,color:o=`bg-accent-600`,defaultValue:s,max:c=100,min:l=0,minStepsBetweenThumbs:u=1,step:d=1,showTicks:f=!1,value:p,...m}){let h=p==null?void 0:Array.isArray(p)?p:[p],g=s==null?void 0:Array.isArray(s)?s:[s],_=h??g??[l],v=a(f,l,c,d);return n(r.Root,{"data-slot":`slider`,defaultValue:g,value:h,min:l,minStepsBetweenThumbs:u,max:c,step:d,className:e(`[--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`,v>0&&`mb-3`,i),...m,children:[t(r.Track,{"data-slot":`slider-track`,className:e(`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:t(r.Range,{"data-slot":`slider-range`,className:e(`absolute select-none data-orientation-horizontal:h-full data-orientation-vertical:w-full`,o)})}),Array.from({length:_.length},(n,i)=>t(r.Thumb,{"data-slot":`slider-thumb`,className:e(`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`)},i)),v>0&&t(`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:v},(e,n)=>t(`span`,{"data-slot":`slider-tick`,className:`bg-card-border h-1.5 w-px`},n))})]})}function a(e,t,n,r){let i=n-t;return!e||!Number.isFinite(i)||!Number.isFinite(r)||r<=0||i<=0?0:Math.floor(i/r)+1}export{i as Slider};
 //# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"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":"gIA2FA,SAAS,EAAO,CACf,YACA,QAAQ,gBACR,eACA,MAAM,IACN,MAAM,EACN,wBAAwB,EACxB,OAAO,EACP,YAAY,GACZ,QACA,GAAG,GACY,CACf,IAAM,EAAkB,GAAS,KAAkD,IAAA,GAA1C,MAAM,QAAQ,EAAM,CAAG,EAAQ,CAAC,EAAM,CACzE,EACL,GAAgB,KAIb,IAAA,GAHA,MAAM,QAAQ,EAAa,CAC1B,EACA,CAAC,EAAa,CAEb,EAAS,GAAmB,GAA0B,CAAC,EAAI,CAC3D,EAAY,EAAiB,EAAW,EAAK,EAAK,EAAK,CAE7D,OACC,EAAC,EAAgB,KAAjB,CACC,YAAU,SACV,aAAc,EACd,MAAO,EACF,MACkB,wBAClB,MACC,OACN,UAAW,EACV,uCACA,4NACA,EAAY,GAAK,OACjB,EACA,CACD,GAAI,WAdL,CAgBC,EAAC,EAAgB,MAAjB,CACC,YAAU,eACV,UAAW,EACV,4DACA,uEACA,mEACA,UAED,EAAC,EAAgB,MAAjB,CACC,YAAU,eACV,UAAW,EACV,2FACA,EACA,CACA,CAAA,CACqB,CAAA,CACvB,MAAM,KAAK,CAAE,OAAQ,EAAO,OAAQ,EAAG,EAAG,IAC1C,EAAC,EAAgB,MAAjB,CACC,YAAU,eAEV,UAAW,EACV,8EACA,0CACA,gCACA,qFACA,4CACA,iEACA,CACA,CATI,EASJ,CACD,CACD,EAAY,GACZ,EAAC,MAAD,CACC,YAAU,eACV,UAAU,6FACV,cAAY,gBAEX,MAAM,KAAK,CAAE,OAAQ,EAAW,EAAG,EAAG,IACtC,EAAC,OAAD,CAAkB,YAAU,cAAc,UAAU,4BAA8B,CAAvE,EAAuE,CACjF,CACG,CAAA,CAEe,GAazB,SAAS,EAAiB,EAAoB,EAAa,EAAa,EAAsB,CAC7F,IAAM,EAAQ,EAAM,EAIpB,MAHI,CAAC,GAAa,CAAC,OAAO,SAAS,EAAM,EAAI,CAAC,OAAO,SAAS,EAAK,EAAI,GAAQ,GAAK,GAAS,EACrF,EAED,KAAK,MAAM,EAAQ,EAAK,CAAG"}
+{"version":3,"file":"slider.js","names":[],"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-600\",\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":"gIA2FA,SAAS,EAAO,CACf,YACA,QAAQ,gBACR,eACA,MAAM,IACN,MAAM,EACN,wBAAwB,EACxB,OAAO,EACP,YAAY,GACZ,QACA,GAAG,GACY,CACf,IAAM,EAAkB,GAAS,KAAkD,IAAA,GAA1C,MAAM,QAAQ,EAAM,CAAG,EAAQ,CAAC,EAAM,CACzE,EACL,GAAgB,KAIb,IAAA,GAHA,MAAM,QAAQ,EAAa,CAC1B,EACA,CAAC,EAAa,CAEb,EAAS,GAAmB,GAA0B,CAAC,EAAI,CAC3D,EAAY,EAAiB,EAAW,EAAK,EAAK,EAAK,CAE7D,OACC,EAAC,EAAgB,KAAjB,CACC,YAAU,SACV,aAAc,EACd,MAAO,EACF,MACkB,wBAClB,MACC,OACN,UAAW,EACV,uCACA,4NACA,EAAY,GAAK,OACjB,EACA,CACD,GAAI,WAdL,CAgBC,EAAC,EAAgB,MAAjB,CACC,YAAU,eACV,UAAW,EACV,4DACA,uEACA,mEACA,UAED,EAAC,EAAgB,MAAjB,CACC,YAAU,eACV,UAAW,EACV,2FACA,EACA,CACA,CAAA,CACqB,CAAA,CACvB,MAAM,KAAK,CAAE,OAAQ,EAAO,OAAQ,EAAG,EAAG,IAC1C,EAAC,EAAgB,MAAjB,CACC,YAAU,eAEV,UAAW,EACV,8EACA,0CACA,gCACA,qFACA,4CACA,iEACA,CACA,CATI,EASJ,CACD,CACD,EAAY,GACZ,EAAC,MAAD,CACC,YAAU,eACV,UAAU,6FACV,cAAY,gBAEX,MAAM,KAAK,CAAE,OAAQ,EAAW,EAAG,EAAG,IACtC,EAAC,OAAD,CAAkB,YAAU,cAAc,UAAU,4BAA8B,CAAvE,EAAuE,CACjF,CACG,CAAA,CAEe,GAazB,SAAS,EAAiB,EAAoB,EAAa,EAAa,EAAsB,CAC7F,IAAM,EAAQ,EAAM,EAIpB,MAHI,CAAC,GAAa,CAAC,OAAO,SAAS,EAAM,EAAI,CAAC,OAAO,SAAS,EAAK,EAAI,GAAQ,GAAK,GAAS,EACrF,EAED,KAAK,MAAM,EAAQ,EAAK,CAAG"}

package/dist/slot.d.ts

@@ -1,5 +1,5 @@
-import * as react from "react";
-import * as _radix_ui_react_slot0 from "@radix-ui/react-slot";
+import * as _$react from "react";
+import * as _$_radix_ui_react_slot0 from "@radix-ui/react-slot";
 
 //#region src/components/slot/slot.d.ts
 /**
@@ -16,7 +16,7 @@ import * as _radix_ui_react_slot0 from "@radix-ui/react-slot";
  * </Slot>
  * ```
  */
-declare const Slot: react.ForwardRefExoticComponent<Omit<_radix_ui_react_slot0.SlotProps & react.RefAttributes<HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Slot: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_slot0.SlotProps & _$react.RefAttributes<HTMLElement>, "ref"> & _$react.RefAttributes<HTMLElement>>;
 //#endregion
 export { Slot };
 //# sourceMappingURL=slot.d.ts.map

package/dist/split-button.d.ts

@@ -1,9 +1,9 @@
-import { t as IconButton } from "./icon-button-DMNdrMSf.js";
-import { t as Button } from "./button-B--2eT25.js";
-import { t as DropdownMenu } from "./dropdown-menu-slQCdKvp.js";
-import * as react from "react";
+import { t as IconButton } from "./icon-button-gO-7F_MZ.js";
+import { t as Button } from "./button-BaNwe1ud.js";
+import { t as DropdownMenu } from "./dropdown-menu-D6MiVSR-.js";
+import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
-import * as _radix_ui_react_dropdown_menu0 from "@radix-ui/react-dropdown-menu";
+import * as _$_radix_ui_react_dropdown_menu0 from "@radix-ui/react-dropdown-menu";
 
 //#region src/components/split-button/split-button.d.ts
 type RootProps = ComponentProps<typeof DropdownMenu.Root> & ComponentProps<"div">;
@@ -21,19 +21,19 @@ type MenuTriggerProps = Omit<ComponentProps<typeof IconButton>, "appearance" | "
  * @example
  * ```tsx
  * <SplitButton.Root>
- *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement="end" onClick={copyMarkdownPage}>
+ *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>
  *     Copy page
  *   </SplitButton.PrimaryAction>
  *   <SplitButton.MenuTrigger label="Open doc actions menu" />
  *   <SplitButton.MenuContent>
  *     <SplitButton.MenuItem onClick={copyMarkdownPage}>
- *       Copy page
  *       <Icon svg={<CopyIcon />} />
+ *       Copy page
  *     </SplitButton.MenuItem>
  *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>
  *       <a href={markdownUrl} target="_blank">
- *         View as Markdown
  *         <Icon svg={<FileTextIcon />} />
+ *         View as Markdown
  *       </a>
  *     </SplitButton.MenuItem>
  *   </SplitButton.MenuContent>
@@ -51,7 +51,7 @@ declare const SplitButton: {
    * @example
    * ```tsx
    * <SplitButton.Root>
-   *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement="end" onClick={copyMarkdownPage}>
+   *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>
    *     Copy page
    *   </SplitButton.PrimaryAction>
    *   <SplitButton.MenuTrigger label="Open doc actions menu" />
@@ -70,7 +70,7 @@ declare const SplitButton: {
    * </SplitButton.Root>
    * ```
    */
-  readonly Root: react.ForwardRefExoticComponent<Omit<RootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Root: _$react.ForwardRefExoticComponent<Omit<RootProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * The most common action users can trigger with a single click.
    *
@@ -79,7 +79,7 @@ declare const SplitButton: {
    * @example
    * ```tsx
    * <SplitButton.Root>
-   *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement="end" onClick={copyMarkdownPage}>
+   *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>
    *     Copy page
    *   </SplitButton.PrimaryAction>
    *   <SplitButton.MenuTrigger label="Open doc actions menu" />
@@ -98,7 +98,7 @@ declare const SplitButton: {
    * </SplitButton.Root>
    * ```
    */
-  readonly PrimaryAction: react.ForwardRefExoticComponent<Omit<PrimaryActionProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+  readonly PrimaryAction: _$react.ForwardRefExoticComponent<Omit<PrimaryActionProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
   /**
    * The button that opens the split button dropdown menu.
    *
@@ -107,7 +107,7 @@ declare const SplitButton: {
    * @example
    * ```tsx
    * <SplitButton.Root>
-   *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement="end" onClick={copyMarkdownPage}>
+   *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>
    *     Copy page
    *   </SplitButton.PrimaryAction>
    *   <SplitButton.MenuTrigger label="Open doc actions menu" />
@@ -126,7 +126,7 @@ declare const SplitButton: {
    * </SplitButton.Root>
    * ```
    */
-  readonly MenuTrigger: react.ForwardRefExoticComponent<Omit<MenuTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+  readonly MenuTrigger: _$react.ForwardRefExoticComponent<Omit<MenuTriggerProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
   /**
    * The container for the split button dropdown menu content. Appears in a
    * portal with scrolling and animations.
@@ -136,7 +136,7 @@ declare const SplitButton: {
    * @example
    * ```tsx
    * <SplitButton.Root>
-   *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement="end" onClick={copyMarkdownPage}>
+   *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>
    *     Copy page
    *   </SplitButton.PrimaryAction>
    *   <SplitButton.MenuTrigger label="Open doc actions menu" />
@@ -155,9 +155,9 @@ declare const SplitButton: {
    * </SplitButton.Root>
    * ```
    */
-  readonly MenuContent: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dropdown_menu0.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+  readonly MenuContent: _$react.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_dropdown_menu0.DropdownMenuContentProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & {
     width?: "trigger" | "content";
-  } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * A standard item in the split button dropdown menu that can be selected or
    * activated.
@@ -167,7 +167,7 @@ declare const SplitButton: {
    * @example
    * ```tsx
    * <SplitButton.Root>
-   *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement="end" onClick={copyMarkdownPage}>
+   *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>
    *     Copy page
    *   </SplitButton.PrimaryAction>
    *   <SplitButton.MenuTrigger label="Open doc actions menu" />
@@ -186,9 +186,9 @@ declare const SplitButton: {
    * </SplitButton.Root>
    * ```
    */
-  readonly MenuItem: react.ForwardRefExoticComponent<Omit<Omit<_radix_ui_react_dropdown_menu0.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+  readonly MenuItem: _$react.ForwardRefExoticComponent<Omit<Omit<_$_radix_ui_react_dropdown_menu0.DropdownMenuItemProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & {
     inset?: boolean;
-  } & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  } & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
 };
 //#endregion
 export { SplitButton };

package/dist/split-button.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./icon-button-CeeHZOhh.js";import{t as r}from"./button-CdPMhyKg.js";import{t as i}from"./dropdown-menu-9nO7ch0t.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{forwardRef as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=o(({className:t,children:n,dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,...u},d)=>s(i.Root,{dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,children:s(`div`,{"data-slot":`split-button`,className:e(`flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!`,t),ref:d,...u,children:n})}));c.displayName=`SplitButton`;const l=o(({type:e=`button`,...t},n)=>s(r,{appearance:`outlined`,priority:`neutral`,ref:n,type:e,...t}));l.displayName=`SplitButtonPrimaryAction`;const u=o(({icon:e,type:r=`button`,...o},c)=>s(i.Trigger,{asChild:!0,className:`group`,children:s(n,{icon:e??s(t,{svg:s(a,{weight:`bold`,className:`size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150`})}),appearance:`outlined`,ref:c,type:r,...o})}));u.displayName=`SplitButtonMenuTrigger`;const d=o(({align:e=`end`,...t},n)=>s(i.Content,{align:e,ref:n,...t}));d.displayName=`SplitButtonMenuContent`;const f=o(({className:t,...n},r)=>s(i.Item,{className:e(`justify-between gap-4`,t),ref:r,...n}));f.displayName=`SplitButtonMenuItem`;const p={Root:c,PrimaryAction:l,MenuTrigger:u,MenuContent:d,MenuItem:f};export{p as SplitButton};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./icon-BMH0fD_b.js";import{t as n}from"./icon-button-CxxVPiKp.js";import{t as r}from"./button-BKykcpgJ.js";import{t as i}from"./dropdown-menu-9nO7ch0t.js";import{CaretDownIcon as a}from"@phosphor-icons/react/CaretDown";import{forwardRef as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=o(({className:t,children:n,dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,...u},d)=>s(i.Root,{dir:r,open:a,defaultOpen:o,onOpenChange:c,modal:l,children:s(`div`,{"data-slot":`split-button`,className:e(`flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!`,t),ref:d,...u,children:n})}));c.displayName=`SplitButton`;const l=o(({type:e=`button`,...t},n)=>s(r,{appearance:`outlined`,priority:`neutral`,ref:n,type:e,...t}));l.displayName=`SplitButtonPrimaryAction`;const u=o(({icon:e,type:r=`button`,...o},c)=>s(i.Trigger,{asChild:!0,className:`group`,children:s(n,{icon:e??s(t,{svg:s(a,{weight:`bold`,className:`size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150`})}),appearance:`outlined`,ref:c,type:r,...o})}));u.displayName=`SplitButtonMenuTrigger`;const d=o(({align:e=`end`,...t},n)=>s(i.Content,{align:e,ref:n,...t}));d.displayName=`SplitButtonMenuContent`;const f=o(({className:t,...n},r)=>s(i.Item,{className:e(`gap-2`,t),ref:r,...n}));f.displayName=`SplitButtonMenuItem`;const p={Root:c,PrimaryAction:l,MenuTrigger:u,MenuContent:d,MenuItem:f};export{p as SplitButton};
 //# sourceMappingURL=split-button.js.map

package/dist/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","names":[],"sources":["../src/components/split-button/split-button.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { forwardRef, type ComponentProps, type ComponentRef, type ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button } from \"../button/button.js\";\nimport { IconButton } from \"../button/icon-button.js\";\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu.js\";\nimport { Icon } from \"../icon/icon.js\";\n\ntype RootProps = ComponentProps<typeof DropdownMenu.Root> & ComponentProps<\"div\">;\n\nconst Root = forwardRef<ComponentRef<\"div\">, RootProps>(\n\t({ className, children, dir, open, defaultOpen, onOpenChange, modal, ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Root\n\t\t\t\tdir={dir}\n\t\t\t\topen={open}\n\t\t\t\tdefaultOpen={defaultOpen}\n\t\t\t\tonOpenChange={onOpenChange}\n\t\t\t\tmodal={modal}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"split-button\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</DropdownMenu.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"SplitButton\";\n\ntype PrimaryActionProps = Omit<ComponentProps<typeof Button>, \"appearance\" | \"type\" | \"priority\"> &\n\tPick<ComponentProps<\"button\">, \"type\">;\n\nconst PrimaryAction = forwardRef<ComponentRef<\"button\">, PrimaryActionProps>(\n\t({ type = \"button\", ...props }, ref) => {\n\t\treturn <Button appearance=\"outlined\" priority=\"neutral\" ref={ref} type={type} {...props} />;\n\t},\n);\nPrimaryAction.displayName = \"SplitButtonPrimaryAction\";\n\ntype MenuTriggerProps = Omit<\n\tComponentProps<typeof IconButton>,\n\t\"appearance\" | \"size\" | \"asChild\" | \"icon\"\n> &\n\tPick<ComponentProps<\"button\">, \"type\"> & {\n\t\ticon?: ReactNode;\n\t};\n\nconst MenuTrigger = forwardRef<ComponentRef<\"button\">, MenuTriggerProps>(\n\t({ icon, type = \"button\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Trigger asChild className=\"group\">\n\t\t\t\t<IconButton\n\t\t\t\t\ticon={\n\t\t\t\t\t\ticon ?? (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tsvg={\n\t\t\t\t\t\t\t\t\t<CaretDownIcon\n\t\t\t\t\t\t\t\t\t\tweight=\"bold\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tappearance=\"outlined\"\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={type}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</DropdownMenu.Trigger>\n\t\t);\n\t},\n);\nMenuTrigger.displayName = \"SplitButtonMenuTrigger\";\n\nconst MenuContent = forwardRef<\n\tComponentRef<typeof DropdownMenu.Content>,\n\tComponentProps<typeof DropdownMenu.Content>\n>(({ align = \"end\", ...props }, ref) => {\n\treturn <DropdownMenu.Content align={align} ref={ref} {...props} />;\n});\nMenuContent.displayName = \"SplitButtonMenuContent\";\n\nconst MenuItem = forwardRef<\n\tComponentRef<typeof DropdownMenu.Item>,\n\tComponentProps<typeof DropdownMenu.Item>\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<DropdownMenu.Item className={cx(\"justify-between gap-4\", className)} ref={ref} {...props} />\n\t);\n});\nMenuItem.displayName = \"SplitButtonMenuItem\";\n\n/**\n * A button group which provides a default action with one click while revealing\n * related alternatives through a dropdown menu. Best for when users typically\n * want one action but occasionally need variants.\n *\n * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n *\n * @example\n * ```tsx\n * <SplitButton.Root>\n *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n *     Copy page\n *   </SplitButton.PrimaryAction>\n *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n *   <SplitButton.MenuContent>\n *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n *       Copy page\n *       <Icon svg={<CopyIcon />} />\n *     </SplitButton.MenuItem>\n *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n *       <a href={markdownUrl} target=\"_blank\">\n *         View as Markdown\n *         <Icon svg={<FileTextIcon />} />\n *       </a>\n *     </SplitButton.MenuItem>\n *   </SplitButton.MenuContent>\n * </SplitButton.Root>\n * ```\n */\nconst SplitButton = {\n\t/**\n\t * A button group which provides a default action with one click while revealing\n\t * related alternatives through a dropdown menu. Best for when users typically\n\t * want one action but occasionally need variants.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The most common action users can trigger with a single click.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonprimaryaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tPrimaryAction,\n\t/**\n\t * The button that opens the split button dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenutrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuTrigger,\n\t/**\n\t * The container for the split button dropdown menu content. Appears in a\n\t * portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenucontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuContent,\n\t/**\n\t * A standard item in the split button dropdown menu that can be selected or\n\t * activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenuitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} iconPlacement=\"end\" onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuItem,\n} as const;\n\nexport { SplitButton };\n"],"mappings":"yVAUA,MAAM,EAAO,GACX,CAAE,YAAW,WAAU,MAAK,OAAM,cAAa,eAAc,QAAO,GAAG,GAAS,IAE/E,EAAC,EAAa,KAAd,CACM,MACC,OACO,cACC,eACP,iBAEP,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,sQACA,EACA,CACI,MACL,GAAI,EAEH,WACI,CAAA,CACa,CAAA,CAGtB,CACD,EAAK,YAAc,cAKnB,MAAM,EAAgB,GACpB,CAAE,OAAO,SAAU,GAAG,GAAS,IACxB,EAAC,EAAD,CAAQ,WAAW,WAAW,SAAS,UAAe,MAAW,OAAM,GAAI,EAAS,CAAA,CAE5F,CACD,EAAc,YAAc,2BAU5B,MAAM,EAAc,GAClB,CAAE,OAAM,OAAO,SAAU,GAAG,GAAS,IAEpC,EAAC,EAAa,QAAd,CAAsB,QAAA,GAAQ,UAAU,iBACvC,EAAC,EAAD,CACC,KACC,GACC,EAAC,EAAD,CACC,IACC,EAAC,EAAD,CACC,OAAO,OACP,UAAU,wFACT,CAAA,CAEF,CAAA,CAGJ,WAAW,WACN,MACC,OACN,GAAI,EACH,CAAA,CACoB,CAAA,CAGzB,CACD,EAAY,YAAc,yBAE1B,MAAM,EAAc,GAGjB,CAAE,QAAQ,MAAO,GAAG,GAAS,IACxB,EAAC,EAAa,QAAd,CAA6B,QAAY,MAAK,GAAI,EAAS,CAAA,CACjE,CACF,EAAY,YAAc,yBAE1B,MAAM,EAAW,GAGd,CAAE,YAAW,GAAG,GAAS,IAE1B,EAAC,EAAa,KAAd,CAAmB,UAAW,EAAG,wBAAyB,EAAU,CAAO,MAAK,GAAI,EAAS,CAAA,CAE7F,CACF,EAAS,YAAc,sBA+BvB,MAAM,EAAc,CA8BnB,OA4BA,gBA4BA,cA6BA,cA6BA,WACA"}
+{"version":3,"file":"split-button.js","names":[],"sources":["../src/components/split-button/split-button.tsx"],"sourcesContent":["import { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { forwardRef, type ComponentProps, type ComponentRef, type ReactNode } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Button } from \"../button/button.js\";\nimport { IconButton } from \"../button/icon-button.js\";\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu.js\";\nimport { Icon } from \"../icon/icon.js\";\n\ntype RootProps = ComponentProps<typeof DropdownMenu.Root> & ComponentProps<\"div\">;\n\nconst Root = forwardRef<ComponentRef<\"div\">, RootProps>(\n\t({ className, children, dir, open, defaultOpen, onOpenChange, modal, ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Root\n\t\t\t\tdir={dir}\n\t\t\t\topen={open}\n\t\t\t\tdefaultOpen={defaultOpen}\n\t\t\t\tonOpenChange={onOpenChange}\n\t\t\t\tmodal={modal}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"split-button\"\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"flex flex-row [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px [&>*:focus]:relative [&>*:focus]:z-10 [&>*:hover]:relative [&>*:hover]:z-10 *:active:scale-100!\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</DropdownMenu.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"SplitButton\";\n\ntype PrimaryActionProps = Omit<ComponentProps<typeof Button>, \"appearance\" | \"type\" | \"priority\"> &\n\tPick<ComponentProps<\"button\">, \"type\">;\n\nconst PrimaryAction = forwardRef<ComponentRef<\"button\">, PrimaryActionProps>(\n\t({ type = \"button\", ...props }, ref) => {\n\t\treturn <Button appearance=\"outlined\" priority=\"neutral\" ref={ref} type={type} {...props} />;\n\t},\n);\nPrimaryAction.displayName = \"SplitButtonPrimaryAction\";\n\ntype MenuTriggerProps = Omit<\n\tComponentProps<typeof IconButton>,\n\t\"appearance\" | \"size\" | \"asChild\" | \"icon\"\n> &\n\tPick<ComponentProps<\"button\">, \"type\"> & {\n\t\ticon?: ReactNode;\n\t};\n\nconst MenuTrigger = forwardRef<ComponentRef<\"button\">, MenuTriggerProps>(\n\t({ icon, type = \"button\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<DropdownMenu.Trigger asChild className=\"group\">\n\t\t\t\t<IconButton\n\t\t\t\t\ticon={\n\t\t\t\t\t\ticon ?? (\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\tsvg={\n\t\t\t\t\t\t\t\t\t<CaretDownIcon\n\t\t\t\t\t\t\t\t\t\tweight=\"bold\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"size-4 group-data-[state=open]:-rotate-180 transition-transform ease-out duration-150\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tappearance=\"outlined\"\n\t\t\t\t\tref={ref}\n\t\t\t\t\ttype={type}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</DropdownMenu.Trigger>\n\t\t);\n\t},\n);\nMenuTrigger.displayName = \"SplitButtonMenuTrigger\";\n\nconst MenuContent = forwardRef<\n\tComponentRef<typeof DropdownMenu.Content>,\n\tComponentProps<typeof DropdownMenu.Content>\n>(({ align = \"end\", ...props }, ref) => {\n\treturn <DropdownMenu.Content align={align} ref={ref} {...props} />;\n});\nMenuContent.displayName = \"SplitButtonMenuContent\";\n\nconst MenuItem = forwardRef<\n\tComponentRef<typeof DropdownMenu.Item>,\n\tComponentProps<typeof DropdownMenu.Item>\n>(({ className, ...props }, ref) => {\n\treturn <DropdownMenu.Item className={cx(\"gap-2\", className)} ref={ref} {...props} />;\n});\nMenuItem.displayName = \"SplitButtonMenuItem\";\n\n/**\n * A button group which provides a default action with one click while revealing\n * related alternatives through a dropdown menu. Best for when users typically\n * want one action but occasionally need variants.\n *\n * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n *\n * @example\n * ```tsx\n * <SplitButton.Root>\n *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n *     Copy page\n *   </SplitButton.PrimaryAction>\n *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n *   <SplitButton.MenuContent>\n *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n *       <Icon svg={<CopyIcon />} />\n *       Copy page\n *     </SplitButton.MenuItem>\n *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n *       <a href={markdownUrl} target=\"_blank\">\n *         <Icon svg={<FileTextIcon />} />\n *         View as Markdown\n *       </a>\n *     </SplitButton.MenuItem>\n *   </SplitButton.MenuContent>\n * </SplitButton.Root>\n * ```\n */\nconst SplitButton = {\n\t/**\n\t * A button group which provides a default action with one click while revealing\n\t * related alternatives through a dropdown menu. Best for when users typically\n\t * want one action but occasionally need variants.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The most common action users can trigger with a single click.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonprimaryaction\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tPrimaryAction,\n\t/**\n\t * The button that opens the split button dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenutrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuTrigger,\n\t/**\n\t * The container for the split button dropdown menu content. Appears in a\n\t * portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenucontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuContent,\n\t/**\n\t * A standard item in the split button dropdown menu that can be selected or\n\t * activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/split-button#splitbuttonmenuitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <SplitButton.Root>\n\t *   <SplitButton.PrimaryAction icon={<CopyIcon />} onClick={copyMarkdownPage}>\n\t *     Copy page\n\t *   </SplitButton.PrimaryAction>\n\t *   <SplitButton.MenuTrigger label=\"Open doc actions menu\" />\n\t *   <SplitButton.MenuContent>\n\t *     <SplitButton.MenuItem onClick={copyMarkdownPage}>\n\t *       Copy page\n\t *       <Icon svg={<CopyIcon />} />\n\t *     </SplitButton.MenuItem>\n\t *     <SplitButton.MenuItem asChild onClick={copyMarkdownPage}>\n\t *       <a href={markdownUrl} target=\"_blank\">\n\t *         View as Markdown\n\t *         <Icon svg={<FileTextIcon />} />\n\t *       </a>\n\t *     </SplitButton.MenuItem>\n\t *   </SplitButton.MenuContent>\n\t * </SplitButton.Root>\n\t * ```\n\t */\n\tMenuItem,\n} as const;\n\nexport { SplitButton };\n"],"mappings":"yVAUA,MAAM,EAAO,GACX,CAAE,YAAW,WAAU,MAAK,OAAM,cAAa,eAAc,QAAO,GAAG,GAAS,IAE/E,EAAC,EAAa,KAAd,CACM,MACC,OACO,cACC,eACP,iBAEP,EAAC,MAAD,CACC,YAAU,eACV,UAAW,EACV,sQACA,EACA,CACI,MACL,GAAI,EAEH,WACI,CAAA,CACa,CAAA,CAGtB,CACD,EAAK,YAAc,cAKnB,MAAM,EAAgB,GACpB,CAAE,OAAO,SAAU,GAAG,GAAS,IACxB,EAAC,EAAD,CAAQ,WAAW,WAAW,SAAS,UAAe,MAAW,OAAM,GAAI,EAAS,CAAA,CAE5F,CACD,EAAc,YAAc,2BAU5B,MAAM,EAAc,GAClB,CAAE,OAAM,OAAO,SAAU,GAAG,GAAS,IAEpC,EAAC,EAAa,QAAd,CAAsB,QAAA,GAAQ,UAAU,iBACvC,EAAC,EAAD,CACC,KACC,GACC,EAAC,EAAD,CACC,IACC,EAAC,EAAD,CACC,OAAO,OACP,UAAU,wFACT,CAAA,CAEF,CAAA,CAGJ,WAAW,WACN,MACC,OACN,GAAI,EACH,CAAA,CACoB,CAAA,CAGzB,CACD,EAAY,YAAc,yBAE1B,MAAM,EAAc,GAGjB,CAAE,QAAQ,MAAO,GAAG,GAAS,IACxB,EAAC,EAAa,QAAd,CAA6B,QAAY,MAAK,GAAI,EAAS,CAAA,CACjE,CACF,EAAY,YAAc,yBAE1B,MAAM,EAAW,GAGd,CAAE,YAAW,GAAG,GAAS,IACpB,EAAC,EAAa,KAAd,CAAmB,UAAW,EAAG,QAAS,EAAU,CAAO,MAAK,GAAI,EAAS,CAAA,CACnF,CACF,EAAS,YAAc,sBA+BvB,MAAM,EAAc,CA8BnB,OA4BA,gBA4BA,cA6BA,cA6BA,WACA"}

package/dist/{svg-only-BH9PBSGl.d.ts → svg-only-Db3eUPWM.d.ts}

@@ -1,5 +1,5 @@
 import { t as SvgAttributes } from "./types-yU-Byhue.js";
-import * as react from "react";
+import * as _$react from "react";
 import { ReactNode } from "react";
 
 //#region src/components/icon/svg-only.d.ts
@@ -22,7 +22,7 @@ type SvgOnlyProps = Omit<SvgAttributes, "children"> & {
  * <SvgOnly svg={<ShrimpIcon />} />
  * ```
  */
-declare const SvgOnly: react.ForwardRefExoticComponent<Omit<SvgOnlyProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+declare const SvgOnly: _$react.ForwardRefExoticComponent<Omit<SvgOnlyProps, "ref"> & _$react.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { SvgOnlyProps as n, SvgOnly as t };
-//# sourceMappingURL=svg-only-BH9PBSGl.d.ts.map
+//# sourceMappingURL=svg-only-Db3eUPWM.d.ts.map

package/dist/switch.d.ts

@@ -1,5 +1,5 @@
-import * as react from "react";
-import * as _radix_ui_react_switch0 from "@radix-ui/react-switch";
+import * as _$react from "react";
+import * as _$_radix_ui_react_switch0 from "@radix-ui/react-switch";
 
 //#region src/components/switch/switch.d.ts
 /**
@@ -17,12 +17,12 @@ import * as _radix_ui_react_switch0 from "@radix-ui/react-switch";
  * </form>
  * ```
  */
-declare const Switch: react.ForwardRefExoticComponent<Omit<_radix_ui_react_switch0.SwitchProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+declare const Switch: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_switch0.SwitchProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & {
   /**
    * Makes the switch immutable, meaning the user can not edit the control.
    */
   readOnly?: boolean;
-} & react.RefAttributes<HTMLButtonElement>>;
+} & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { Switch };
 //# sourceMappingURL=switch.d.ts.map

package/dist/switch.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./booleanish-CBGdPL3Q.js";import{forwardRef as n}from"react";import r from"clsx";import{jsx as i}from"react/jsx-runtime";import{Root as a,Thumb as o}from"@radix-ui/react-switch";const s=n(({"aria-readonly":n,className:s,readOnly:c,onClick:l,...u},d)=>{let f=t(c??n);return i(a,{"aria-readonly":f,className:e(`peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-hidden`,`disabled:cursor-default disabled:opacity-50`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`data-state-checked:bg-blue-500 data-state-unchecked:bg-gray-400`,s),onClick:e=>{if(f){e.preventDefault(),e.stopPropagation();return}l?.(e)},ref:d,...u,children:i(o,{className:r(`pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform`,`data-state-checked:translate-x-4.5 data-state-unchecked:translate-x-0.5`)})})});s.displayName=`Switch`;export{s as Switch};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./booleanish-CBGdPL3Q.js";import{forwardRef as n}from"react";import r from"clsx";import{jsx as i}from"react/jsx-runtime";import{Root as a,Thumb as o}from"@radix-ui/react-switch";const s=n(({"aria-readonly":n,className:s,readOnly:c,onClick:l,...u},d)=>{let f=t(c??n);return i(a,{"aria-readonly":f,className:e(`peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-hidden`,`disabled:cursor-default disabled:opacity-50`,`focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4`,`data-state-checked:bg-accent-600 data-state-unchecked:bg-gray-400`,s),onClick:e=>{if(f){e.preventDefault(),e.stopPropagation();return}l?.(e)},ref:d,...u,children:i(o,{className:r(`pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform`,`data-state-checked:translate-x-4.5 data-state-unchecked:translate-x-0.5`)})})});s.displayName=`Switch`;export{s as Switch};
 //# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":["SwitchPrimitiveRoot","SwitchPrimitiveThumb","clsx"],"sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import { Root as SwitchPrimitiveRoot, Thumb as SwitchPrimitiveThumb } from \"@radix-ui/react-switch\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitiveRoot> & {\n\t/**\n\t * Makes the switch immutable, meaning the user can not edit the control.\n\t */\n\treadOnly?: boolean;\n};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n *\n * @see https://mantle.ngrok.com/components/switch\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"airplane-mode\" className=\"flex items-center gap-2\">\n *     Airplane Mode\n *     <Switch name=\"airplane-mode\" id=\"airplane-mode\" />\n *   </Label>\n * </form>\n * ```\n */\nconst Switch = forwardRef<ComponentRef<typeof SwitchPrimitiveRoot>, SwitchProps>(\n\t({ \"aria-readonly\": _ariaReadOnly, className, readOnly: _readOnly, onClick, ...props }, ref) => {\n\t\tconst readOnly = parseBooleanish(_readOnly ?? _ariaReadOnly);\n\n\t\treturn (\n\t\t\t<SwitchPrimitiveRoot\n\t\t\t\taria-readonly={readOnly}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-hidden\",\n\t\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"data-state-checked:bg-blue-500 data-state-unchecked:bg-gray-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SwitchPrimitiveThumb\n\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\"pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform\",\n\t\t\t\t\t\t\"data-state-checked:translate-x-4.5 data-state-unchecked:translate-x-0.5\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</SwitchPrimitiveRoot>\n\t\t);\n\t},\n);\nSwitch.displayName = \"Switch\";\n\nexport {\n\t//\n\tSwitch,\n};\n"],"mappings":"qOA6BA,MAAM,EAAS,GACb,CAAE,gBAAiB,EAAe,YAAW,SAAU,EAAW,UAAS,GAAG,GAAS,IAAQ,CAC/F,IAAM,EAAW,EAAgB,GAAa,EAAc,CAE5D,OACC,EAACA,EAAD,CACC,gBAAe,EACf,UAAW,EACV,4FACA,8CACA,oHACA,kEACA,EACA,CACD,QAAU,GAAU,CACnB,GAAI,EAAU,CACb,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,OAED,IAAU,EAAM,EAEZ,MACL,GAAI,WAEJ,EAACC,EAAD,CACC,UAAWC,EACV,gGACA,0EACA,CACA,CAAA,CACmB,CAAA,EAGxB,CACD,EAAO,YAAc"}
+{"version":3,"file":"switch.js","names":["SwitchPrimitiveRoot","SwitchPrimitiveThumb","clsx"],"sources":["../src/components/switch/switch.tsx"],"sourcesContent":["import { Root as SwitchPrimitiveRoot, Thumb as SwitchPrimitiveThumb } from \"@radix-ui/react-switch\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { parseBooleanish } from \"../../types/booleanish.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitiveRoot> & {\n\t/**\n\t * Makes the switch immutable, meaning the user can not edit the control.\n\t */\n\treadOnly?: boolean;\n};\n\n/**\n * A form control that allows the user to toggle between checked and not checked.\n *\n * @see https://mantle.ngrok.com/components/switch\n *\n * @example\n * ```tsx\n * <form>\n *   <Label htmlFor=\"airplane-mode\" className=\"flex items-center gap-2\">\n *     Airplane Mode\n *     <Switch name=\"airplane-mode\" id=\"airplane-mode\" />\n *   </Label>\n * </form>\n * ```\n */\nconst Switch = forwardRef<ComponentRef<typeof SwitchPrimitiveRoot>, SwitchProps>(\n\t({ \"aria-readonly\": _ariaReadOnly, className, readOnly: _readOnly, onClick, ...props }, ref) => {\n\t\tconst readOnly = parseBooleanish(_readOnly ?? _ariaReadOnly);\n\n\t\treturn (\n\t\t\t<SwitchPrimitiveRoot\n\t\t\t\taria-readonly={readOnly}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full outline-hidden\",\n\t\t\t\t\t\"disabled:cursor-default disabled:opacity-50\",\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"data-state-checked:bg-accent-600 data-state-unchecked:bg-gray-400\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tif (readOnly) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SwitchPrimitiveThumb\n\t\t\t\t\tclassName={clsx(\n\t\t\t\t\t\t\"pointer-events-none block size-4 rounded-full bg-[#fff] shadow-md ring-0 transition-transform\",\n\t\t\t\t\t\t\"data-state-checked:translate-x-4.5 data-state-unchecked:translate-x-0.5\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t</SwitchPrimitiveRoot>\n\t\t);\n\t},\n);\nSwitch.displayName = \"Switch\";\n\nexport {\n\t//\n\tSwitch,\n};\n"],"mappings":"qOA6BA,MAAM,EAAS,GACb,CAAE,gBAAiB,EAAe,YAAW,SAAU,EAAW,UAAS,GAAG,GAAS,IAAQ,CAC/F,IAAM,EAAW,EAAgB,GAAa,EAAc,CAE5D,OACC,EAACA,EAAD,CACC,gBAAe,EACf,UAAW,EACV,4FACA,8CACA,oHACA,oEACA,EACA,CACD,QAAU,GAAU,CACnB,GAAI,EAAU,CACb,EAAM,gBAAgB,CACtB,EAAM,iBAAiB,CACvB,OAED,IAAU,EAAM,EAEZ,MACL,GAAI,WAEJ,EAACC,EAAD,CACC,UAAWC,EACV,gGACA,0EACA,CACA,CAAA,CACmB,CAAA,EAGxB,CACD,EAAO,YAAc"}

package/dist/{table-CU7zx1pH.d.ts → table-C7BejaFW.d.ts}

@@ -1,4 +1,4 @@
-import * as react from "react";
+import * as _$react from "react";
 
 //#region src/components/table/table.d.ts
 /**
@@ -79,7 +79,7 @@ declare const Table: {
    * </Table.Root>
    * ```
    */
-  readonly Body: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+  readonly Body: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & _$react.RefAttributes<HTMLTableSectionElement>>;
   /**
    * An optional caption that specifies the caption (or title) of a table, providing an accessible description.
    *
@@ -118,7 +118,7 @@ declare const Table: {
    * </Table.Root>
    * ```
    */
-  readonly Caption: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
+  readonly Caption: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & _$react.RefAttributes<HTMLElement>>;
   /**
    * A cell that contains data and may be used as a child of a table row.
    *
@@ -157,7 +157,7 @@ declare const Table: {
    * </Table.Root>
    * ```
    */
-  readonly Cell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & react.RefAttributes<HTMLTableDataCellElement>>;
+  readonly Cell: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & _$react.RefAttributes<HTMLTableDataCellElement>>;
   /**
    * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.
    *
@@ -196,7 +196,7 @@ declare const Table: {
    * </Table.Root>
    * ```
    */
-  readonly Element: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & react.RefAttributes<HTMLTableElement>>;
+  readonly Element: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & _$react.RefAttributes<HTMLTableElement>>;
   /**
    * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.
    *
@@ -235,7 +235,7 @@ declare const Table: {
    * </Table.Root>
    * ```
    */
-  readonly Foot: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+  readonly Foot: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & _$react.RefAttributes<HTMLTableSectionElement>>;
   /**
    * The head section of a table. Contains the table's column headers information.
    *
@@ -274,7 +274,7 @@ declare const Table: {
    * </Table.Root>
    * ```
    */
-  readonly Head: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+  readonly Head: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & _$react.RefAttributes<HTMLTableSectionElement>>;
   /**
    * A cell that defines the header of a group of table cells as a child of a table row.
    *
@@ -313,7 +313,7 @@ declare const Table: {
    * </Table.Root>
    * ```
    */
-  readonly Header: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & react.RefAttributes<HTMLTableHeaderCellElement>>;
+  readonly Header: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & _$react.RefAttributes<HTMLTableHeaderCellElement>>;
   /**
    * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.
    *
@@ -352,7 +352,7 @@ declare const Table: {
    * </Table.Root>
    * ```
    */
-  readonly Root: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  readonly Root: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
   /**
    * Defines a row of cells in a table. Contains a mix of table cells and table headers.
    *
@@ -391,8 +391,8 @@ declare const Table: {
    * </Table.Root>
    * ```
    */
-  readonly Row: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & react.RefAttributes<HTMLTableRowElement>>;
+  readonly Row: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & _$react.RefAttributes<HTMLTableRowElement>>;
 };
 //#endregion
 export { Table as t };
-//# sourceMappingURL=table-CU7zx1pH.d.ts.map
+//# sourceMappingURL=table-C7BejaFW.d.ts.map

package/dist/table-CnYWz6IT.js

@@ -0,0 +1,2 @@
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./compose-refs-DeIsFv68.js";import{forwardRef as n,useEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=n(({children:n,className:r,...i},a)=>{let o=v();return s(`div`,{className:e(`group/table scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full`,r),"data-sticky-active":o.state.hasOverflow&&!o.state.scrolledToEnd||void 0,"data-x-overflow":o.state.hasOverflow,"data-x-scroll-end":o.state.hasOverflow&&o.state.scrolledToEnd,ref:t(o.ref,a),...i,children:n})});c.displayName=`TableRoot`;const l=n(({children:t,className:n,...r},i)=>s(`table`,{ref:i,className:e(`table-auto border-collapse caption-bottom w-full min-w-full text-left`,n),...r,children:t}));l.displayName=`TableElement`;const u=n(({children:t,className:n,...r},i)=>s(`thead`,{ref:i,className:e(`border-b border-card-muted`,`divide-y divide-card-muted`,`text-muted bg-base`,`[&>tr]:bg-base`,n),...r,children:t}));u.displayName=`TableHead`;const d=n(({children:t,className:n,...r},i)=>s(`tbody`,{className:e(`divide-y divide-card-muted`,`text-body`,`[thead+&]:border-t [thead+&]:border-card-muted`,`[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover`,n),ref:i,...r,children:t}));d.displayName=`TableBody`;const f=n(({children:t,className:n,...r},i)=>s(`tfoot`,{ref:i,className:e(`font-medium text-body`,`border-t border-card-muted`,`divide-y divide-card-muted`,`[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover`,n),...r,children:t}));f.displayName=`TableFoot`;const p=n(({children:t,className:n,...r},i)=>s(`tr`,{ref:i,className:e(n),...r,children:t}));p.displayName=`TableRow`;const m=n(({children:t,className:n,...r},i)=>s(`th`,{ref:i,className:e(`h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0`,n),...r,children:t}));m.displayName=`TableHeader`;const h=n(({children:t,className:n,...r},i)=>s(`td`,{ref:i,className:e(`p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono`,n),...r,children:t}));h.displayName=`TableCell`;const g=n(({children:t,className:n,...r},i)=>s(`caption`,{ref:i,className:e(`py-4 text-sm text-gray-500`,`border-t border-card-muted`,n),...r,children:t}));g.displayName=`TableCaption`;const _={Body:d,Caption:g,Cell:h,Element:l,Foot:f,Head:u,Header:m,Root:c,Row:p};function v(){let e=a(null),[t,n]=o({hasOverflow:!1,scrolledToEnd:!1});return r(()=>{let t=e.current;if(!t)return;let r=()=>{let e=t.scrollWidth>t.clientWidth,r=Math.abs(t.scrollWidth-t.scrollLeft-t.clientWidth)<1;n(t=>t.hasOverflow!==e||t.scrolledToEnd!==r?{hasOverflow:e,scrolledToEnd:r}:t)},i=new ResizeObserver(r);i.observe(t);let a=new MutationObserver(r);return a.observe(t,{childList:!0,subtree:!0}),t.addEventListener(`scroll`,r,{passive:!0}),r(),()=>{i.disconnect(),a.disconnect(),t.removeEventListener(`scroll`,r)}},[]),i(()=>({ref:e,state:t}),[t])}export{_ as t};
+//# sourceMappingURL=table-CnYWz6IT.js.map

package/dist/table-CnYWz6IT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-CnYWz6IT.js","names":[],"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<Table.Root>` is the root container element for all `Table`s.\n * It provides styling and additional functionality, such as horizontal overflow\n * detection.\n *\n * Must be used as the parent of a `<Table.Element>`.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableroot\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow = useHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow && horizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\tref={composeRefs(horizontalOverflow.ref, ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table.Element>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<Table.Caption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<Table.Head>`\n * 4. either one of the following:\n *    - 0 or more: `<Table.Body>`\n *    - 0 or more: `<Table.Row>`\n * 5. optional: `<Table.Foot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table.Element>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n *   1. The row boxes fill the table in the source code order from top to bottom.\n *      Each row box occupies one row of cells.\n *   2. A row group box occupies one or more row boxes.\n *   3. Column boxes are placed next to each other in source code order.\n *      Depending on the value of the dir attribute, the columns are laid in\n *      left-to-right or right-to-left direction. A column box occupies one or\n *      more columns of table cells.\n *   4. A column group box occupies one or more column boxes.\n *   5. A cell box may span over multiple rows and columns. User agents trim\n *      cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableelement\n */\nconst Element = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"table-auto border-collapse caption-bottom w-full min-w-full text-left\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t);\n\t},\n);\nElement.displayName = \"TableElement\";\n\n/**\n * The `<Table.Head>` is a container for the table's column headers.\n * Encapsulates a set of `<Table.Row>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<Table.Header>`).\n *\n * Must be used as a child of a `<Table.Element>`. It should only come after any\n * `<Table.Caption>` or `<colgroup>` and before any `<Table.Body>` or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Head = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"border-b border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-muted bg-base\",\n\t\t\t\t\"[&>tr]:bg-base\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nHead.displayName = \"TableHead\";\n\n/**\n * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, or `<Table.Head>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablebody\n */\nconst Body = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-body\",\n\t\t\t\t\"[thead+&]:border-t [thead+&]:border-card-muted\",\n\t\t\t\t\"[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover\", // Body row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nBody.displayName = \"TableBody\";\n\n/**\n * The `<Table.Foot>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, `<Table.Head>`, and `<Table.Body>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>` elements\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablefoot\n */\nconst Foot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"font-medium text-body\",\n\t\t\t\t\"border-t border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nFoot.displayName = \"TableFoot\";\n\n/**\n * The `<Table.Row>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.\n *\n * Must be used as a child of a `<Table.Head>`, `<Table.Body>`, or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Header>` or `<Table.Cell>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablerow\n */\nconst Row = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// This could be removed, or simplified\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nRow.displayName = \"TableRow\";\n\n/**\n * The `<Table.Header>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<Table.Row>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Header = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nHeader.displayName = \"TableHeader\";\n\n/**\n * The `<Table.Cell>` defines a cell of a table that contains data and may be\n * used as a child of a `<Table.Row>`.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecell\n */\nconst Cell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nCell.displayName = \"TableCell\";\n\n/**\n * The optional `<Table.Caption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table.Element>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecaption\n */\nconst Caption = forwardRef<ComponentRef<\"caption\">, ComponentProps<\"caption\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<caption\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"py-4 text-sm text-gray-500\", \"border-t border-card-muted\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</caption>\n\t),\n);\nCaption.displayName = \"TableCaption\";\n\n/**\n * A structured way to display data in rows and columns. The API matches the\n * HTML table element 1:1.\n *\n * @see https://mantle.ngrok.com/components/table\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n */\nconst Table = {\n\t/**\n\t * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An optional caption that specifies the caption (or title) of a table, providing an accessible description.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecaption\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCaption,\n\t/**\n\t * A cell that contains data and may be used as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCell,\n\t/**\n\t * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableelement\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tElement,\n\t/**\n\t * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablefoot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tFoot,\n\t/**\n\t * The head section of a table. Contains the table's column headers information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A cell that defines the header of a group of table cells as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Defines a row of cells in a table. Contains a mix of table cells and table headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tTable,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(element.scrollWidth - element.scrollLeft - element.clientWidth) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (previous.hasOverflow !== hasOverflow || previous.scrolledToEnd !== scrolledToEnd) {\n\t\t\t\t\treturn { hasOverflow, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(checkState);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(checkState);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", checkState, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", checkState);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"gNA+CA,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IAAQ,CAC3C,IAAM,EAAqB,GAAoD,CAE/E,OACC,EAAC,MAAD,CACC,UAAW,EACV,kIACA,EACA,CACD,qBACE,EAAmB,MAAM,aAAe,CAAC,EAAmB,MAAM,eACnE,IAAA,GAED,kBAAiB,EAAmB,MAAM,YAC1C,oBACC,EAAmB,MAAM,aAAe,EAAmB,MAAM,cAElE,IAAK,EAAY,EAAmB,IAAK,EAAI,CAC7C,GAAI,EAEH,WACI,CAAA,EAGR,CACD,EAAK,YAAc,YAmEnB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IAElC,EAAC,QAAD,CACM,MACL,UAAW,EACV,wEACA,EACA,CACD,GAAI,EAEH,WACM,CAAA,CAGV,CACD,EAAQ,YAAc,eAiDtB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,QAAD,CACM,MACL,UAAW,EAEV,6BACA,6BACA,qBACA,iBACA,EACA,CACD,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAK,YAAc,YA+CnB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,QAAD,CACC,UAAW,EAEV,6BACA,YACA,iDACA,qDACA,EACA,CACI,MACL,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAK,YAAc,YAiDnB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,QAAD,CACM,MACL,UAAW,EAEV,wBACA,6BACA,6BACA,kDACA,EACA,CACD,GAAI,EAEH,WACM,CAAA,CAET,CACD,EAAK,YAAc,YA8CnB,MAAM,EAAM,GACV,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,KAAD,CACM,MACL,UAAW,EAEV,EACA,CACD,GAAI,EAEH,WACG,CAAA,CAEN,CACD,EAAI,YAAc,WAgDlB,MAAM,EAAS,GACb,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,KAAD,CACM,MACL,UAAW,EACV,qFACA,EACA,CACD,GAAI,EAEH,WACG,CAAA,CAEN,CACD,EAAO,YAAc,cA8CrB,MAAM,EAAO,GACX,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,KAAD,CACM,MACL,UAAW,EACV,qEACA,EACA,CACD,GAAI,EAEH,WACG,CAAA,CAEN,CACD,EAAK,YAAc,YA8CnB,MAAM,EAAU,GACd,CAAE,WAAU,YAAW,GAAG,GAAS,IACnC,EAAC,UAAD,CACM,MACL,UAAW,EAAG,6BAA8B,6BAA8B,EAAU,CACpF,GAAI,EAEH,WACQ,CAAA,CAEX,CACD,EAAQ,YAAc,eAyCtB,MAAM,EAAQ,CAuCb,OAuCA,UAuCA,OAuCA,UAuCA,OAuCA,OAuCA,SAuCA,OAuCA,MACA,CAaD,SAAS,GAAuD,CAC/D,IAAM,EAAM,EAAiB,KAAK,CAC5B,CAAC,EAAO,GAAY,EAAS,CAClC,YAAa,GACb,cAAe,GACf,CAAC,CAsCF,OApCA,MAAgB,CACf,IAAM,EAAU,EAAI,QACpB,GAAI,CAAC,EACJ,OAGD,IAAM,MAAmB,CACxB,IAAM,EAAc,EAAQ,YAAc,EAAQ,YAC5C,EACL,KAAK,IAAI,EAAQ,YAAc,EAAQ,WAAa,EAAQ,YAAY,CAAG,EAE5E,EAAU,GACL,EAAS,cAAgB,GAAe,EAAS,gBAAkB,EAC/D,CAAE,cAAa,gBAAe,CAE/B,EACN,EAGG,EAAiB,IAAI,eAAe,EAAW,CACrD,EAAe,QAAQ,EAAQ,CAE/B,IAAM,EAAmB,IAAI,iBAAiB,EAAW,CAOzD,OANA,EAAiB,QAAQ,EAAS,CAAE,UAAW,GAAM,QAAS,GAAM,CAAC,CAErE,EAAQ,iBAAiB,SAAU,EAAY,CAAE,QAAS,GAAM,CAAC,CAEjE,GAAY,KAEC,CACZ,EAAe,YAAY,CAC3B,EAAiB,YAAY,CAC7B,EAAQ,oBAAoB,SAAU,EAAW,GAEhD,EAAE,CAAC,CAEC,OAAe,CAAE,MAAK,QAAO,EAAG,CAAC,EAAM,CAAC"}

package/dist/table.d.ts

@@ -1,2 +1,2 @@
-import { t as Table } from "./table-CU7zx1pH.js";
+import { t as Table } from "./table-C7BejaFW.js";
 export { Table };

package/dist/table.js

@@ -1 +1 @@
-import{t as e}from"./table-OYhLMxeE.js";export{e as Table};
+import{t as e}from"./table-CnYWz6IT.js";export{e as Table};