@ngrok/mantle 0.32.3 → 0.40.1

package/dist/card.d.ts

@@ -3,128 +3,128 @@ import { ComponentProps, HTMLAttributes } from 'react';
 import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
 
 type CardProps = ComponentProps<"div"> & WithAsChild;
+type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
 /**
  * A container that can be used to display content in a box resembling a
- * physical card. The root component of the all Card components.
- *
- * @see https://mantle.ngrok.com/components/card#api-card
- *
- * @example
- * ```tsx
- * <Card>
- *   <CardBody>
- *     <p>Laborum in aute officia adipisicing elit velit.</p>
- *   </CardBody>
- * </Card>
- *
- * <Card>
- *   <CardHeader>
- *     <CardTitle>Card Title Here</CardTitle>
- *   </CardHeader>
- *   <CardBody>
- *     <p>Laborum in aute officia adipisicing elit velit.</p>
- *   </CardBody>
- *   <CardFooter>
- *     <p>Card footer</p>
- *   </CardFooter>
- * </Card>
- * ```
- */
-declare const Card: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The main content of a card. Usually composed as a direct child of a `Card` component.
- *
- * @see https://mantle.ngrok.com/components/card#api-card-body
- *
- * @example
- * ```tsx
- * <Card>
- *   <CardBody>
- *     <p>Laborum in aute officia adipisicing elit velit.</p>
- *   </CardBody>
- * </Card>
- *
- * <Card>
- *   <CardHeader>
- *     <CardTitle>Card Title Here</CardTitle>
- *   </CardHeader>
- *   <CardBody>
- *     <p>Laborum in aute officia adipisicing elit velit.</p>
- *   </CardBody>
- *   <CardFooter>
- *     <p>Card footer</p>
- *   </CardFooter>
- * </Card>
- * ```
- */
-declare const CardBody: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The footer container of a card. Usually composed as a direct child of a `Card` component.
- *
- * @see https://mantle.ngrok.com/components/card#api-card-footer
- *
- * @example
- * ```tsx
- * <Card>
- *   <CardHeader>
- *     <CardTitle>Card Title Here</CardTitle>
- *   </CardHeader>
- *   <CardBody>
- *     <p>Laborum in aute officia adipisicing elit velit.</p>
- *   </CardBody>
- *   <CardFooter>
- *     <p>Card footer</p>
- *   </CardFooter>
- * </Card>
- * ```
- */
-declare const CardFooter: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The header container of a card. Usually composed as a direct child of a `Card` component.
+ * physical card.
  *
- * @see https://mantle.ngrok.com/components/card#api-card-header
+ * @see https://mantle.ngrok.com/components/card
  *
  * @example
  * ```tsx
- * <Card>
- *   <CardHeader>
- *     <CardTitle>Card Title Here</CardTitle>
- *   </CardHeader>
- *   <CardBody>
+ * <Card.Root>
+ *   <Card.Body>
  *     <p>Laborum in aute officia adipisicing elit velit.</p>
- *   </CardBody>
- *   <CardFooter>
- *     <p>Card footer</p>
- *   </CardFooter>
- * </Card>
- * ```
- */
-declare const CardHeader: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-type CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;
-/**
- * The title of a card. Usually composed as a direct child of a `CardHeader`
- * component.
- * Renders as an `h3` element by default, but can be changed to any other
- * element by using the `asChild` prop. It is preferred to use a heading element
- * (h1-h6) for accessibility reasons.
- *
- * @see https://mantle.ngrok.com/components/card#api-card-title
+ *   </Card.Body>
+ * </Card.Root>
  *
- * @example
- * ```tsx
- * <Card>
- *   <CardHeader>
- *     <CardTitle>Card Title Here</CardTitle>
- *   </CardHeader>
- *   <CardBody>
+ * <Card.Root>
+ *   <Card.Header>
+ *     <Card.Title>Card Title Here</Card.Title>
+ *   </Card.Header>
+ *   <Card.Body>
  *     <p>Laborum in aute officia adipisicing elit velit.</p>
- *   </CardBody>
- *   <CardFooter>
+ *   </Card.Body>
+ *   <Card.Footer>
  *     <p>Card footer</p>
- *   </CardFooter>
- * </Card>
+ *   </Card.Footer>
+ * </Card.Root>
  * ```
  */
-declare const CardTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLHeadingElement>>;
+declare const Card: {
+    /**
+     * A container that can be used to display content in a box resembling a physical card.
+     *
+     * @see https://mantle.ngrok.com/components/card#api-card-root
+     *
+     * @example
+     * ```tsx
+     * <Card.Root>
+     *   <Card.Body>
+     *     <p>Laborum in aute officia adipisicing elit velit.</p>
+     *   </Card.Body>
+     * </Card.Root>
+     * ```
+     */
+    readonly Root: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The main content of a card.
+     *
+     * @see https://mantle.ngrok.com/components/card#api-card-body
+     *
+     * @example
+     * ```tsx
+     * <Card.Root>
+     *   <Card.Body>
+     *     <p>Laborum in aute officia adipisicing elit velit.</p>
+     *   </Card.Body>
+     * </Card.Root>
+     * ```
+     */
+    readonly Body: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The footer container of a card.
+     *
+     * @see https://mantle.ngrok.com/components/card#api-card-footer
+     *
+     * @example
+     * ```tsx
+     * <Card.Root>
+     *   <Card.Header>
+     *     <Card.Title>Card Title Here</Card.Title>
+     *   </Card.Header>
+     *   <Card.Body>
+     *     <p>Laborum in aute officia adipisicing elit velit.</p>
+     *   </Card.Body>
+     *   <Card.Footer>
+     *     <p>Card footer</p>
+     *   </Card.Footer>
+     * </Card.Root>
+     * ```
+     */
+    readonly Footer: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The header container of a card.
+     *
+     * @see https://mantle.ngrok.com/components/card#api-card-header
+     *
+     * @example
+     * ```tsx
+     * <Card.Root>
+     *   <Card.Header>
+     *     <Card.Title>Card Title Here</Card.Title>
+     *   </Card.Header>
+     *   <Card.Body>
+     *     <p>Laborum in aute officia adipisicing elit velit.</p>
+     *   </Card.Body>
+     *   <Card.Footer>
+     *     <p>Card footer</p>
+     *   </Card.Footer>
+     * </Card.Root>
+     * ```
+     */
+    readonly Header: react.ForwardRefExoticComponent<Omit<CardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * The title of a card.
+     *
+     * @see https://mantle.ngrok.com/components/card#api-card-title
+     *
+     * @example
+     * ```tsx
+     * <Card.Root>
+     *   <Card.Header>
+     *     <Card.Title>Card Title Here</Card.Title>
+     *   </Card.Header>
+     *   <Card.Body>
+     *     <p>Laborum in aute officia adipisicing elit velit.</p>
+     *   </Card.Body>
+     *   <Card.Footer>
+     *     <p>Card footer</p>
+     *   </Card.Footer>
+     * </Card.Root>
+     * ```
+     */
+    readonly Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & WithAsChild & react.RefAttributes<HTMLHeadingElement>>;
+};
 
-export { Card, CardBody, CardFooter, CardHeader, type CardProps, CardTitle, type CardTitleProps };
+export { Card, type CardProps, type CardTitleProps };

package/dist/card.js

@@ -1,2 +1,2 @@
-import{a}from"./chunk-AZ56JGNY.js";import{Slot as n}from"@radix-ui/react-slot";import{forwardRef as p}from"react";import{jsx as s}from"react/jsx-runtime";var m=p(({asChild:e=!1,className:o,children:r,...t},d)=>s(e?n:"div",{ref:d,className:a("divide-card-muted border-card bg-card relative divide-y rounded-md border",o),...t,children:r}));m.displayName="Card";var i=p(({asChild:e=!1,className:o,children:r,...t},d)=>s(e?n:"div",{ref:d,className:a("p-6",o),...t,children:r}));i.displayName="CardBody";var l=p(({asChild:e=!1,className:o,children:r,...t},d)=>s(e?n:"div",{ref:d,className:a("px-6 py-3",o),...t,children:r}));l.displayName="CardFooter";var f=p(({asChild:e=!1,className:o,children:r,...t},d)=>s(e?n:"div",{ref:d,className:a("px-6 py-3",o),...t,children:r}));f.displayName="CardHeader";var c=p(({className:e,asChild:o,...r},t)=>s(o?n:"h3",{ref:t,className:a("text-strong text-base font-medium",e),...r}));c.displayName="CardTitle";export{m as Card,i as CardBody,l as CardFooter,f as CardHeader,c as CardTitle};
+import{a as p}from"./chunk-AZ56JGNY.js";import{Slot as d}from"@radix-ui/react-slot";import{forwardRef as a}from"react";import{jsx as s}from"react/jsx-runtime";var C=a(({asChild:o=!1,className:e,children:r,...t},n)=>s(o?d:"div",{ref:n,className:p("divide-card-muted border-card bg-card relative divide-y rounded-md border",e),...t,children:r}));C.displayName="Card";var i=a(({asChild:o=!1,className:e,children:r,...t},n)=>s(o?d:"div",{ref:n,className:p("p-6",e),...t,children:r}));i.displayName="CardBody";var l=a(({asChild:o=!1,className:e,children:r,...t},n)=>s(o?d:"div",{ref:n,className:p("px-6 py-3",e),...t,children:r}));l.displayName="CardFooter";var f=a(({asChild:o=!1,className:e,children:r,...t},n)=>s(o?d:"div",{ref:n,className:p("px-6 py-3",e),...t,children:r}));f.displayName="CardHeader";var c=a(({className:o,asChild:e,...r},t)=>s(e?d:"h3",{ref:t,className:p("text-strong text-base font-medium",o),...r}));c.displayName="CardTitle";var y={Root:C,Body:i,Footer:l,Header:f,Title:c};export{y as Card};
 //# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/card/card.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype CardProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card. The root component of the all Card components.\n *\n * @see https://mantle.ngrok.com/components/card#api-card\n *\n * @example\n * ```tsx\n * <Card>\n *   <CardBody>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </CardBody>\n * </Card>\n *\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Card Title Here</CardTitle>\n *   </CardHeader>\n *   <CardBody>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </CardBody>\n *   <CardFooter>\n *     <p>Card footer</p>\n *   </CardFooter>\n * </Card>\n * ```\n */\nconst Card = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"divide-card-muted border-card bg-card relative divide-y rounded-md border\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nCard.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-body\n *\n * @example\n * ```tsx\n * <Card>\n *   <CardBody>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </CardBody>\n * </Card>\n *\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Card Title Here</CardTitle>\n *   </CardHeader>\n *   <CardBody>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </CardBody>\n *   <CardFooter>\n *     <p>Card footer</p>\n *   </CardFooter>\n * </Card>\n * ```\n */\nconst CardBody = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"p-6\", className)} {...rest}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nCardBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-footer\n *\n * @example\n * ```tsx\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Card Title Here</CardTitle>\n *   </CardHeader>\n *   <CardBody>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </CardBody>\n *   <CardFooter>\n *     <p>Card footer</p>\n *   </CardFooter>\n * </Card>\n * ```\n */\nconst CardFooter = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"px-6 py-3\", className)} {...rest}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nCardFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-header\n *\n * @example\n * ```tsx\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Card Title Here</CardTitle>\n *   </CardHeader>\n *   <CardBody>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </CardBody>\n *   <CardFooter>\n *     <p>Card footer</p>\n *   </CardFooter>\n * </Card>\n * ```\n */\nconst CardHeader = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"px-6 py-3\", className)} {...rest}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nCardHeader.displayName = \"CardHeader\";\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `CardHeader`\n * component.\n * Renders as an `h3` element by default, but can be changed to any other\n * element by using the `asChild` prop. It is preferred to use a heading element\n * (h1-h6) for accessibility reasons.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-title\n *\n * @example\n * ```tsx\n * <Card>\n *   <CardHeader>\n *     <CardTitle>Card Title Here</CardTitle>\n *   </CardHeader>\n *   <CardBody>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </CardBody>\n *   <CardFooter>\n *     <p>Card footer</p>\n *   </CardFooter>\n * </Card>\n * ```\n */\nconst CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"text-strong text-base font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCardTitle.displayName = \"CardTitle\";\n\nexport {\n\t//,\n\tCard,\n\tCardBody,\n\tCardFooter,\n\tCardHeader,\n\tCardTitle,\n};\n\nexport type {\n\t//,\n\tCardProps,\n\tCardTitleProps,\n};\n"],"mappings":"mCAAA,OAAS,QAAAA,MAAY,uBAErB,OAAS,cAAAC,MAAkB,QAsCxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EACV,4EACAL,CACD,EACC,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,OA4BnB,IAAMS,EAAWR,EAChB,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,MAAOL,CAAS,EAAI,GAAGE,EACxD,SAAAD,EACF,CAGH,EACAK,EAAS,YAAc,WAsBvB,IAAMC,EAAaT,EAClB,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,YAAaL,CAAS,EAAI,GAAGE,EAC9D,SAAAD,EACF,CAGH,EACAM,EAAW,YAAc,aAsBzB,IAAMC,EAAaV,EAClB,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,YAAaL,CAAS,EAAI,GAAGE,EAC9D,SAAAD,EACF,CAGH,EACAO,EAAW,YAAc,aA4BzB,IAAMC,EAAYX,EACjB,CAAC,CAAE,UAAAE,EAAW,QAAAD,EAAS,GAAGW,CAAM,EAAGP,IAGjCP,EAFYG,EAAUK,EAAO,KAE5B,CACA,IAAKD,EACL,UAAWE,EAAG,oCAAqCL,CAAS,EAC3D,GAAGU,EACL,CAGH,EACAD,EAAU,YAAc","names":["Slot","forwardRef","jsx","Card","forwardRef","asChild","className","children","rest","ref","Slot","cx","CardBody","CardFooter","CardHeader","CardTitle","props"]}
+{"version":3,"sources":["../src/components/card/card.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ComponentProps, ComponentRef, HTMLAttributes } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype CardProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card. The root component of the all Card components.\n *\n * @see https://mantle.ngrok.com/components/card#api-card\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"divide-card-muted border-card bg-card relative divide-y rounded-md border\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"Card\";\n\n/**\n * The main content of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-body\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Body = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"p-6\", className)} {...rest}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nBody.displayName = \"CardBody\";\n\n/**\n * The footer container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-footer\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Footer = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"px-6 py-3\", className)} {...rest}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nFooter.displayName = \"CardFooter\";\n\n/**\n * The header container of a card. Usually composed as a direct child of a `Card` component.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-header\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Header = forwardRef<ComponentRef<\"div\">, CardProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"px-6 py-3\", className)} {...rest}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nHeader.displayName = \"CardHeader\";\n\ntype CardTitleProps = HTMLAttributes<HTMLHeadingElement> & WithAsChild;\n\n/**\n * The title of a card. Usually composed as a direct child of a `Card.Header`\n * component.\n * Renders as an `h3` element by default, but can be changed to any other\n * element by using the `asChild` prop. It is preferred to use a heading element\n * (h1-h6) for accessibility reasons.\n *\n * @see https://mantle.ngrok.com/components/card#api-card-title\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Title = forwardRef<HTMLHeadingElement, CardTitleProps>(\n\t({ className, asChild, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"h3\";\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"text-strong text-base font-medium\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTitle.displayName = \"CardTitle\";\n\n/**\n * A container that can be used to display content in a box resembling a\n * physical card.\n *\n * @see https://mantle.ngrok.com/components/card\n *\n * @example\n * ```tsx\n * <Card.Root>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n * </Card.Root>\n *\n * <Card.Root>\n *   <Card.Header>\n *     <Card.Title>Card Title Here</Card.Title>\n *   </Card.Header>\n *   <Card.Body>\n *     <p>Laborum in aute officia adipisicing elit velit.</p>\n *   </Card.Body>\n *   <Card.Footer>\n *     <p>Card footer</p>\n *   </Card.Footer>\n * </Card.Root>\n * ```\n */\nconst Card = {\n\t/**\n\t * A container that can be used to display content in a box resembling a physical card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The main content of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t * </Card.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The footer container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-footer\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tFooter,\n\t/**\n\t * The header container of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The title of a card.\n\t *\n\t * @see https://mantle.ngrok.com/components/card#api-card-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <Card.Root>\n\t *   <Card.Header>\n\t *     <Card.Title>Card Title Here</Card.Title>\n\t *   </Card.Header>\n\t *   <Card.Body>\n\t *     <p>Laborum in aute officia adipisicing elit velit.</p>\n\t *   </Card.Body>\n\t *   <Card.Footer>\n\t *     <p>Card footer</p>\n\t *   </Card.Footer>\n\t * </Card.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCard,\n};\n\nexport type {\n\t//,\n\tCardProps,\n\tCardTitleProps,\n};\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBAErB,OAAS,cAAAC,MAAkB,QAsCxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EACV,4EACAL,CACD,EACC,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,OA4BnB,IAAMS,EAAOR,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,MAAOL,CAAS,EAAI,GAAGE,EACxD,SAAAD,EACF,CAGH,EACAK,EAAK,YAAc,WAsBnB,IAAMC,EAAST,EACd,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,YAAaL,CAAS,EAAI,GAAGE,EAC9D,SAAAD,EACF,CAGH,EACAM,EAAO,YAAc,aAsBrB,IAAMC,EAASV,EACd,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,YAAaL,CAAS,EAAI,GAAGE,EAC9D,SAAAD,EACF,CAGH,EACAO,EAAO,YAAc,aA4BrB,IAAMC,EAAQX,EACb,CAAC,CAAE,UAAAE,EAAW,QAAAD,EAAS,GAAGW,CAAM,EAAGP,IAGjCP,EAFYG,EAAUK,EAAO,KAE5B,CACA,IAAKD,EACL,UAAWE,EAAG,oCAAqCL,CAAS,EAC3D,GAAGU,EACL,CAGH,EACAD,EAAM,YAAc,YA6BpB,IAAME,EAAO,CAeZ,KAAAd,EAeA,KAAAS,EAqBA,OAAAC,EAqBA,OAAAC,EAqBA,MAAAC,CACD","names":["Slot","forwardRef","jsx","Root","forwardRef","asChild","className","children","rest","ref","Slot","cx","Body","Footer","Header","Title","props","Card"]}

package/dist/{chunk-IVXZIYX4.js → chunk-2ID2TLYD.js}

@@ -1,2 +1,2 @@
 import*as i from"@radix-ui/react-dialog";import{createContext as l,forwardRef as n,useContext as s,useEffect as p,useState as m}from"react";import{jsx as r}from"react/jsx-runtime";var a=l({hasDescription:!1,setHasDescription:()=>{}});function D(t){let[o,e]=m(!1);return r(a.Provider,{value:{hasDescription:o,setHasDescription:e},children:r(i.Root,{...t})})}D.displayName="DialogPrimitiveRoot";var c=i.Trigger;c.displayName="DialogPrimitiveTrigger";var g=i.Portal;g.displayName="DialogPrimitivePortal";var v=i.Close;v.displayName="DialogPrimitiveClose";var P=i.Overlay;P.displayName="DialogPrimitiveOverlay";var f=n((t,o)=>{let e=s(a);return r(i.Content,{ref:o,...e.hasDescription?{}:{"aria-describedby":void 0},...t})});f.displayName="DialogPrimitiveContent";var C=i.Title,d=n((t,o)=>{let e=s(a);return p(()=>(e.setHasDescription(!0),()=>e.setHasDescription(!1)),[e]),r(i.Description,{ref:o,...t})});d.displayName="DialogPrimitiveDescription";export{D as a,c as b,g as c,v as d,P as e,f,C as g,d as h};
-//# sourceMappingURL=chunk-IVXZIYX4.js.map
+//# sourceMappingURL=chunk-2ID2TLYD.js.map

package/dist/chunk-2ID2TLYD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/dialog/primitive.tsx"],"sourcesContent":["\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport {\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseState,\n} from \"react\";\n\ntype InternalDialogContextValue = {\n\thasDescription: boolean;\n\tsetHasDescription: (value: boolean) => void;\n};\n\nconst InternalDialogContext = createContext<InternalDialogContextValue>({\n\thasDescription: false,\n\tsetHasDescription: () => {},\n});\n\nfunction Root(props: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) {\n\tconst [hasDescription, setHasDescription] = useState(false);\n\n\treturn (\n\t\t<InternalDialogContext.Provider\n\t\t\tvalue={{ hasDescription, setHasDescription }}\n\t\t>\n\t\t\t<DialogPrimitive.Root {...props} />\n\t\t</InternalDialogContext.Provider>\n\t);\n}\nRoot.displayName = \"DialogPrimitiveRoot\";\n\nconst Trigger = DialogPrimitive.Trigger;\nTrigger.displayName = \"DialogPrimitiveTrigger\";\n\nconst Portal = DialogPrimitive.Portal;\nPortal.displayName = \"DialogPrimitivePortal\";\n\nconst Close = DialogPrimitive.Close;\nClose.displayName = \"DialogPrimitiveClose\";\n\nconst Overlay = DialogPrimitive.Overlay;\nOverlay.displayName = \"DialogPrimitiveOverlay\";\n\n/**\n * The main content container of the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n */\nconst Content = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>((props, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\treturn (\n\t\t<DialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\t// If there's no description, we remove the default applied aria-describedby attribute from radix dialog\n\t\t\t{...(!ctx.hasDescription ? { \"aria-describedby\": undefined } : {})}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nContent.displayName = \"DialogPrimitiveContent\";\n\nconst Title = DialogPrimitive.Title;\n\n/**\n * An accessible description for the dialog primitive.\n * This is a low-level primitive used by higher-level dialog components.\n */\nconst Description = forwardRef<\n\tComponentRef<\"p\">,\n\tComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>((props, ref) => {\n\tconst ctx = useContext(InternalDialogContext);\n\n\tuseEffect(() => {\n\t\tctx.setHasDescription(true);\n\t\treturn () => ctx.setHasDescription(false);\n\t}, [ctx]);\n\n\treturn <DialogPrimitive.Description ref={ref} {...props} />;\n});\nDescription.displayName = \"DialogPrimitiveDescription\";\n\nexport {\n\t//,\n\tRoot,\n\tTrigger,\n\tPortal,\n\tClose,\n\tOverlay,\n\tContent,\n\tDescription,\n\tTitle,\n};\n"],"mappings":"AAEA,UAAYA,MAAqB,yBACjC,OAGC,iBAAAC,EACA,cAAAC,EACA,cAAAC,EACA,aAAAC,EACA,YAAAC,MACM,QAmBJ,cAAAC,MAAA,oBAZH,IAAMC,EAAwBN,EAA0C,CACvE,eAAgB,GAChB,kBAAmB,IAAM,CAAC,CAC3B,CAAC,EAED,SAASO,EAAKC,EAA8D,CAC3E,GAAM,CAACC,EAAgBC,CAAiB,EAAIN,EAAS,EAAK,EAE1D,OACCC,EAACC,EAAsB,SAAtB,CACA,MAAO,CAAE,eAAAG,EAAgB,kBAAAC,CAAkB,EAE3C,SAAAL,EAAiB,OAAhB,CAAsB,GAAGG,EAAO,EAClC,CAEF,CACAD,EAAK,YAAc,sBAEnB,IAAMI,EAA0B,UAChCA,EAAQ,YAAc,yBAEtB,IAAMC,EAAyB,SAC/BA,EAAO,YAAc,wBAErB,IAAMC,EAAwB,QAC9BA,EAAM,YAAc,uBAEpB,IAAMC,EAA0B,UAChCA,EAAQ,YAAc,yBAMtB,IAAMC,EAAUd,EAGd,CAACO,EAAOQ,IAAQ,CACjB,IAAMC,EAAMf,EAAWI,CAAqB,EAE5C,OACCD,EAAiB,UAAhB,CACA,IAAKW,EAEJ,GAAKC,EAAI,eAAqD,CAAC,EAArC,CAAE,mBAAoB,MAAU,EAC1D,GAAGT,EACL,CAEF,CAAC,EACDO,EAAQ,YAAc,yBAEtB,IAAMG,EAAwB,QAMxBC,EAAclB,EAGlB,CAACO,EAAOQ,IAAQ,CACjB,IAAMC,EAAMf,EAAWI,CAAqB,EAE5C,OAAAH,EAAU,KACTc,EAAI,kBAAkB,EAAI,EACnB,IAAMA,EAAI,kBAAkB,EAAK,GACtC,CAACA,CAAG,CAAC,EAEDZ,EAAiB,cAAhB,CAA4B,IAAKW,EAAM,GAAGR,EAAO,CAC1D,CAAC,EACDW,EAAY,YAAc","names":["DialogPrimitive","createContext","forwardRef","useContext","useEffect","useState","jsx","InternalDialogContext","Root","props","hasDescription","setHasDescription","Trigger","Portal","Close","Overlay","Content","ref","ctx","Title","Description"]}

package/dist/{chunk-3X4AKTRA.js → chunk-4GGDPFNZ.js}

@@ -1,2 +1,2 @@
-import{a as P}from"./chunk-MF2QITTY.js";import{b as h}from"./chunk-J6ZF5J72.js";import{a as d}from"./chunk-I6T6YV2L.js";import{a as r}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as b}from"@phosphor-icons/react/CaretDown";import{CaretUpIcon as N}from"@phosphor-icons/react/CaretUp";import{CheckIcon as R}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as T,forwardRef as n,useContext as B}from"react";import{jsx as t,jsxs as S}from"react/jsx-runtime";var y=T({}),W=n(({"aria-invalid":o,children:a,id:i,validation:l,onBlur:c,onValueChange:p,onChange:u,...s},m)=>t(e.Root,{...s,onValueChange:f=>{u?.(f),p?.(f)},children:t(y.Provider,{value:{"aria-invalid":o,id:i,validation:l,onBlur:c,ref:m},children:a})}));W.displayName="Select";var L=e.Group;L.displayName="SelectGroup";var V=e.Value;V.displayName="SelectValue";var E=n(({"aria-invalid":o,className:a,children:i,id:l,validation:c,...p},u)=>{let s=B(y),m=s["aria-invalid"]??o,f=m!=null&&m!=="false",v=s.validation??c,g=f?"error":typeof v=="function"?v():v,w=m??g==="error",I=s.id??l;return S(e.Trigger,{"aria-invalid":w,className:r("h-9 text-sm","border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left","hover:border-neutral-400","focus:outline-none focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger",a),"data-validation":g||void 0,id:I,ref:P(u,s.ref),...p,children:[i,t(e.Icon,{asChild:!0,children:t(d,{svg:t(b,{weight:"bold"}),className:"size-4"})})]})});E.displayName="SelectTrigger";var x=n(({className:o,...a},i)=>t(e.ScrollUpButton,{ref:i,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:t(d,{svg:t(N,{weight:"bold"}),className:"size-4"})}));x.displayName="SelectScrollUpButton";var C=n(({className:o,...a},i)=>t(e.ScrollDownButton,{ref:i,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:t(d,{svg:t(b,{weight:"bold"}),className:"size-4"})}));C.displayName="SelectScrollDownButton";var z=n(({className:o,children:a,position:i="popper",width:l="trigger",...c},p)=>t(e.Portal,{children:S(e.Content,{ref:p,className:r("border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md","bg-popover",i==="popper"&&"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]",l==="trigger"&&"w-[var(--radix-select-trigger-width)]",o),position:i,...c,children:[t(x,{}),t(e.Viewport,{className:r("p-1",i==="popper"&&"h-[var(--radix-select-trigger-height)] w-full"),children:a}),t(C,{})]})}));z.displayName="SelectContent";var D=n(({className:o,...a},i)=>t(e.Label,{ref:i,className:r("px-2 py-1.5 text-sm font-semibold",o),...a}));D.displayName="SelectLabel";var H=n(({className:o,children:a,icon:i,...l},c)=>S(e.Item,{ref:c,className:r("relative flex gap-2 w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none","focus:bg-popover-hover","data-disabled:pointer-events-none data-disabled:opacity-50","data-state-checked:bg-filled-accent data-state-checked:text-on-filled","focus:data-state-checked:bg-filled-accent",o),...l,children:[i&&t(d,{svg:i}),t(e.ItemText,{children:a}),t(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:t(d,{svg:t(R,{weight:"bold"}),className:"size-4"})})]}));H.displayName="SelectItem";var M=n(({className:o,...a},i)=>t(h,{ref:i,className:r("-mx-1 my-1 h-px w-auto",o),...a}));M.displayName="SelectSeparator";export{W as a,L as b,V as c,E as d,z as e,D as f,H as g,M as h};
-//# sourceMappingURL=chunk-3X4AKTRA.js.map
+import{a as P}from"./chunk-MF2QITTY.js";import{b as h}from"./chunk-J6ZF5J72.js";import{a as d}from"./chunk-I6T6YV2L.js";import{a as r}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as b}from"@phosphor-icons/react/CaretDown";import{CaretUpIcon as z}from"@phosphor-icons/react/CaretUp";import{CheckIcon as D}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as H,forwardRef as n,useContext as M}from"react";import{jsx as t,jsxs as g}from"react/jsx-runtime";var y=H({}),C=n(({"aria-invalid":i,children:a,id:o,validation:l,onBlur:s,onValueChange:p,onChange:u,...c},m)=>t(e.Root,{...c,onValueChange:f=>{u?.(f),p?.(f)},children:t(y.Provider,{value:{"aria-invalid":i,id:o,validation:l,onBlur:s,ref:m},children:a})}));C.displayName="Select";var x=e.Group;x.displayName="SelectGroup";var w=e.Value;w.displayName="SelectValue";var I=n(({"aria-invalid":i,className:a,children:o,id:l,validation:s,...p},u)=>{let c=M(y),m=c["aria-invalid"]??i,f=m!=null&&m!=="false",v=c.validation??s,S=f?"error":typeof v=="function"?v():v,V=m??S==="error",E=c.id??l;return g(e.Trigger,{"aria-invalid":V,className:r("h-9 text-sm","border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left","hover:border-neutral-400","focus:outline-none focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger",a),"data-validation":S||void 0,id:E,ref:P(u,c.ref),...p,children:[o,t(e.Icon,{asChild:!0,children:t(d,{svg:t(b,{weight:"bold"}),className:"size-4"})})]})});I.displayName="SelectTrigger";var N=n(({className:i,...a},o)=>t(e.ScrollUpButton,{ref:o,className:r("flex cursor-default items-center justify-center py-1",i),...a,children:t(d,{svg:t(z,{weight:"bold"}),className:"size-4"})}));N.displayName="SelectScrollUpButton";var R=n(({className:i,...a},o)=>t(e.ScrollDownButton,{ref:o,className:r("flex cursor-default items-center justify-center py-1",i),...a,children:t(d,{svg:t(b,{weight:"bold"}),className:"size-4"})}));R.displayName="SelectScrollDownButton";var T=n(({className:i,children:a,position:o="popper",width:l="trigger",...s},p)=>t(e.Portal,{children:g(e.Content,{ref:p,className:r("border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md","bg-popover",o==="popper"&&"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]",l==="trigger"&&"w-[var(--radix-select-trigger-width)]",i),position:o,...s,children:[t(N,{}),t(e.Viewport,{className:r("p-1",o==="popper"&&"h-[var(--radix-select-trigger-height)] w-full"),children:a}),t(R,{})]})}));T.displayName="SelectContent";var B=n(({className:i,...a},o)=>t(e.Label,{ref:o,className:r("px-2 py-1.5 text-sm font-semibold",i),...a}));B.displayName="SelectLabel";var W=n(({className:i,children:a,icon:o,...l},s)=>g(e.Item,{ref:s,className:r("relative flex gap-2 w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none","focus:bg-popover-hover","data-disabled:pointer-events-none data-disabled:opacity-50","data-state-checked:bg-filled-accent data-state-checked:text-on-filled","focus:data-state-checked:bg-filled-accent",i),...l,children:[o&&t(d,{svg:o}),t(e.ItemText,{children:a}),t(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:t(d,{svg:t(D,{weight:"bold"}),className:"size-4"})})]}));W.displayName="SelectItem";var L=n(({className:i,...a},o)=>t(h,{ref:o,className:r("-mx-1 my-1 h-px w-auto",i),...a}));L.displayName="SelectSeparator";var q={Root:C,Content:T,Group:x,Item:W,Label:B,Separator:L,Trigger:I,Value:w};export{q as a};
+//# sourceMappingURL=chunk-4GGDPFNZ.js.map

package/dist/chunk-4GGDPFNZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUpIcon } from \"@phosphor-icons/react/CaretUp\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tFocusEvent,\n\tPropsWithChildren,\n\tReactNode,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype WithAriaInvalid = Pick<\n\tSelectHTMLAttributes<HTMLSelectElement>,\n\t\"aria-invalid\"\n>;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = PropsWithChildren & {\n\tautoComplete?: string;\n\tdefaultOpen?: boolean;\n\tdefaultValue?: string;\n\tdir?: \"ltr\" | \"rtl\";\n\tdisabled?: boolean;\n\tform?: string;\n\tid?: string;\n\tname?: string;\n\t/**\n\t * Event handler called when Select blurs.\n\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t */\n\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Event handler called when the value changes.\n\t * @deprecated Use `onValueChange` instead.\n\t */\n\tonChange?: (value: string) => void;\n\tonOpenChange?(open: boolean): void;\n\tonValueChange?(value: string): void;\n\topen?: boolean;\n\trequired?: boolean;\n\tvalue?: string;\n} & WithValidation &\n\tWithAriaInvalid;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select#api-select\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Root = forwardRef<HTMLButtonElement, SelectProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tchildren,\n\t\t\tid,\n\t\t\tvalidation,\n\t\t\tonBlur,\n\t\t\tonValueChange,\n\t\t\tonChange,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root\n\t\t\t\t{...props}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tonChange?.(value);\n\t\t\t\t\tonValueChange?.(value);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SelectContext.Provider\n\t\t\t\t\tvalue={{ \"aria-invalid\": _ariaInvalid, id, validation, onBlur, ref }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nRoot.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-group\n */\nconst Group = SelectPrimitive.Group;\nGroup.displayName = \"SelectGroup\";\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"apple\">Apple</Select.Item>\n *     <Select.Item value=\"banana\">Banana</Select.Item>\n *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-value\n */\nconst Value = SelectPrimitive.Value;\nValue.displayName = \"SelectValue\";\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<\n\ttypeof SelectPrimitive.Trigger\n> &\n\tWithAriaInvalid &\n\tWithValidation;\n\n/**\n * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n *\n * @see https://mantle.ngrok.com/components/select#api-select-trigger\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"apple\">Apple</Select.Item>\n *     <Select.Item value=\"banana\">Banana</Select.Item>\n *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Trigger = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Trigger>,\n\tSelectTriggerProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInValidProp,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tid: propId,\n\t\t\tvalidation: propValidation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst _ariaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst _validation = ctx.validation ?? propValidation;\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-9 text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-none focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nTrigger.displayName = \"SelectTrigger\";\n\n/**\n * The button that scrolls the select content up.\n * @private\n */\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretUpIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/**\n * The button that scrolls the select content down.\n * @private\n */\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<Icon svg={<CaretDownIcon weight=\"bold\" />} className=\"size-4\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<\n\ttypeof SelectPrimitive.Content\n> & {\n\t/**\n\t * The width of the content. Defaults to the width of the trigger.\n\t * If set to \"content\", the content will use the intrinsic content width; it will be the width of the longest/widest item.\n\t * @default \"trigger\"\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"apple\">Apple</Select.Item>\n *     <Select.Item value=\"banana\">Banana</Select.Item>\n *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-content\n */\nconst Content = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Content>,\n\tSelectContentProps\n>(\n\t(\n\t\t{ className, children, position = \"popper\", width = \"trigger\", ...props },\n\t\tref,\n\t) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]\",\n\t\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"p-1\",\n\t\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\t\"h-[var(--radix-select-trigger-height)] w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-label\n */\nconst Label = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-semibold\", className)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"SelectLabel\";\n\ntype SelectItemProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {\n\ticon?: ReactNode;\n};\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n * Displays the children as the option's text.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Item value=\"apple\">Apple</Select.Item>\n *     <Select.Item value=\"banana\">Banana</Select.Item>\n *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-item\n */\nconst Item = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Item>,\n\tSelectItemProps\n>(({ className, children, icon, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex gap-2 w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none\",\n\t\t\t\"focus:bg-popover-hover\",\n\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\"data-state-checked:bg-filled-accent data-state-checked:text-on-filled\",\n\t\t\t\"focus:data-state-checked:bg-filled-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{icon && <Icon svg={icon} />}\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items or groups of items in the select content.\n *\n * @example\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-separator\n */\nconst SelectSeparatorComponent = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1 my-1 h-px w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nSelectSeparatorComponent.displayName = \"SelectSeparator\";\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/select\n *\n * @example\n * ```tsx\n * <Select.Root>\n *   <Select.Trigger>\n *     <Select.Value placeholder=\"Select a fruit\" />\n *   </Select.Trigger>\n *   <Select.Content>\n *     <Select.Group>\n *       <Select.Label>Fruits</Select.Label>\n *       <Select.Item value=\"apple\">Apple</Select.Item>\n *       <Select.Item value=\"banana\">Banana</Select.Item>\n *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n *     </Select.Group>\n *     <Select.Separator />\n *     <Select.Group>\n *       <Select.Label>Veggies</Select.Label>\n *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n *     </Select.Group>\n *   </Select.Content>\n * </Select.Root>\n * ```\n */\nconst Select = {\n\t/**\n\t * Displays a list of options for the user to pick from—triggered by a button.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The component that pops out when the select is open as a portal adjacent to the trigger button.\n\t * It contains a scrolling viewport of the select items.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-content\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Item value=\"apple\">Apple</Select.Item>\n\t *     <Select.Item value=\"banana\">Banana</Select.Item>\n\t *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tContent,\n\t/**\n\t * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n\t * Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-group\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tGroup,\n\t/**\n\t * An option within a select menu. Similar to an html `<option>` element.\n\t * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n\t * Displays the children as the option's text.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-item\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Item value=\"apple\">Apple</Select.Item>\n\t *     <Select.Item value=\"banana\">Banana</Select.Item>\n\t *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tItem,\n\t/**\n\t * Used to render the label of a group. It won't be focusable using arrow keys.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-label\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tLabel,\n\t/**\n\t * Used to visually separate items or groups of items in the select content.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-separator\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Group>\n\t *       <Select.Label>Fruits</Select.Label>\n\t *       <Select.Item value=\"apple\">Apple</Select.Item>\n\t *       <Select.Item value=\"banana\">Banana</Select.Item>\n\t *       <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *     </Select.Group>\n\t *     <Select.Separator />\n\t *     <Select.Group>\n\t *       <Select.Label>Veggies</Select.Label>\n\t *       <Select.Item value=\"carrot\">Carrot</Select.Item>\n\t *       <Select.Item value=\"cucumber\">Cucumber</Select.Item>\n\t *     </Select.Group>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tSeparator: SelectSeparatorComponent,\n\t/**\n\t * The button that toggles the select. The Select.Content will position itself adjacent to the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Item value=\"apple\">Apple</Select.Item>\n\t *     <Select.Item value=\"banana\">Banana</Select.Item>\n\t *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t * ```\n\t */\n\tTrigger,\n\t/**\n\t * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n\t *\n\t * @see https://mantle.ngrok.com/components/select#api-select-value\n\t *\n\t * @example\n\t * <Select.Root>\n\t *   <Select.Trigger>\n\t *     <Select.Value placeholder=\"Select a fruit\" />\n\t *   </Select.Trigger>\n\t *   <Select.Content>\n\t *     <Select.Item value=\"apple\">Apple</Select.Item>\n\t *     <Select.Item value=\"banana\">Banana</Select.Item>\n\t *     <Select.Item value=\"cherry\">Cherry</Select.Item>\n\t *   </Select.Content>\n\t * </Select.Root>\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tSelect,\n};\n"],"mappings":"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","names":["CaretDownIcon","CaretUpIcon","CheckIcon","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Root","forwardRef","_ariaInvalid","children","id","validation","onBlur","onValueChange","onChange","props","ref","value","Group","Value","Trigger","ariaInValidProp","className","propId","propValidation","ctx","useContext","isInvalid","_validation","ariaInvalid","cx","composeRefs","Icon","CaretDownIcon","SelectScrollUpButton","CaretUpIcon","SelectScrollDownButton","Content","position","width","Label","Item","icon","CheckIcon","SelectSeparatorComponent","Separator","Select"]}

package/dist/{chunk-ERBZR6SY.js → chunk-EYZYDUS2.js}

@@ -1,2 +1,2 @@
 function t(n){return n!=null&&n instanceof HTMLInputElement}export{t as a};
-//# sourceMappingURL=chunk-ERBZR6SY.js.map
+//# sourceMappingURL=chunk-EYZYDUS2.js.map

package/dist/chunk-EYZYDUS2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input/is-input.ts"],"sourcesContent":["/**\n * Type guard for an HTMLInputElement.\n *\n * @example\n * ```tsx\n * function handleElement(element: HTMLElement) {\n *   if (isInput(element)) {\n *     // TypeScript now knows element is HTMLInputElement\n *     element.value = \"new value\";\n *     element.focus();\n *   }\n * }\n * ```\n */\nexport function isInput(value: unknown): value is HTMLInputElement {\n\treturn value != null && value instanceof HTMLInputElement;\n}\n"],"mappings":"AAcO,SAASA,EAAQC,EAA2C,CAClE,OAAOA,GAAS,MAAQA,aAAiB,gBAC1C","names":["isInput","value"]}

package/dist/chunk-F4N3P7B7.js

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

package/dist/chunk-F4N3P7B7.js.map

@@ -0,0 +1 @@
+{"version":3,"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-[100px]\">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#api-table-root\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow =\n\t\t\tuseHorizontalOverflowObserver<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 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 &&\n\t\t\t\t\t\t!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 &&\n\t\t\t\t\thorizontalOverflow.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-[100px]\">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#api-table\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-[100px]\">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#api-table-header\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-strong bg-base\",\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-[100px]\">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#api-table-body\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\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-[100px]\">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#api-table-foot\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\"bg-gray-50/50 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\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-[100px]\">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#api-table-row\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// \"data-state-selected:bg-gray-200\",\n\t\t\t\t\"[&>td]:bg-card [tbody:has(tr:not(:only-child))>&>td]:hover:bg-card-hover\",\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-[100px]\">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#api-table-header\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-12 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-[100px]\">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#api-table-cell\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-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-size-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-[100px]\">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#api-table-caption\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(\n\t\t\t\t\"py-4 text-sm text-gray-500\",\n\t\t\t\t\"border-t border-card-muted\",\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</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-[100px]\">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#api-table-body\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-[100px]\">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#api-table-caption\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-[100px]\">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#api-table-cell\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-[100px]\">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#api-table-element\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-[100px]\">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#api-table-foot\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-[100px]\">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#api-table-header\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-[100px]\">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#api-table-header\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-[100px]\">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#api-table-root\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-[100px]\">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#api-table-row\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-[100px]\">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(\n\t\t\t\t\telement.scrollWidth - element.scrollLeft - element.clientWidth,\n\t\t\t\t) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\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":"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","names":["forwardRef","useEffect","useMemo","useRef","useState","jsx","Root","forwardRef","children","className","props","ref","horizontalOverflow","useHorizontalOverflowObserver","cx","composeRefs","Element","Head","Body","Foot","Row","Header","Cell","Caption","Table","useHorizontalOverflowObserver","ref","useRef","state","setState","useState","useEffect","element","checkState","hasOverflow","scrolledToEnd","previous","resizeObserver","mutationObserver","useMemo"]}

package/dist/{chunk-CGUSOD4E.js → chunk-HSTG2BTX.js}

@@ -31,4 +31,4 @@ import{a as T}from"./chunk-D3XF6J5A.js";import{Fragment as M,jsx as i,jsxs as k}
 	htmlElement.dataset.theme = themePreference;
 })();
 `.trim()}var A=({defaultTheme:e="system",includeNunitoSans:t=!1,nonce:n,storageKey:o=u})=>G(z,{children:[y("script",{dangerouslySetInnerHTML:{__html:Q({defaultTheme:e,storageKey:o})},nonce:n}),y(g,{includeNunitoSans:t})]});A.displayName="MantleThemeHeadContent";function re(e){let{className:t="",defaultTheme:n="system",storageKey:o=u}=e??{};return x(()=>{if(!p())return{className:b(t),"data-applied-theme":"system","data-theme":"system"};let r=window.matchMedia(m).matches,f=window.matchMedia(l).matches,s=d(o,n),a=S(s,{prefersDarkMode:r,prefersHighContrast:f});return{className:b(t,a),"data-applied-theme":a,"data-theme":s}},[t,n,o])}export{g as a,H as b,w as c,ee as d,I as e,te as f,W as g,O as h,ne as i,c as j,oe as k,se as l,Q as m,A as n,re as o};
-//# sourceMappingURL=chunk-CGUSOD4E.js.map
+//# sourceMappingURL=chunk-HSTG2BTX.js.map