@ngrok/mantle 0.63.2 → 0.64.1

package/dist/hover-card.d.ts

@@ -26,7 +26,7 @@ declare const HoverCard: {
     /**
      * The root, stateful component that manages the open/closed state of the hover card.
      *
-     * @see https://mantle.ngrok.com/components/hover-card#api-hover-card
+     * @see https://mantle.ngrok.com/components/hover-card#hovercardroot
      *
      * @example
      * ```tsx
@@ -47,7 +47,7 @@ declare const HoverCard: {
     /**
      * The content to render inside the hover card. Appears in a portal with rich styling and animations.
      *
-     * @see https://mantle.ngrok.com/components/hover-card#api-hover-card-content
+     * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent
      *
      * @example
      * ```tsx
@@ -69,7 +69,7 @@ declare const HoverCard: {
     /**
      * The portal container for rendering hover card content outside the normal DOM tree.
      *
-     * @see https://mantle.ngrok.com/components/hover-card#api-hover-card-portal
+     * @see https://mantle.ngrok.com/components/hover-card#api-reference
      *
      * @example
      * ```tsx
@@ -89,7 +89,7 @@ declare const HoverCard: {
     /**
      * The trigger element that opens the hover card when hovered.
      *
-     * @see https://mantle.ngrok.com/components/hover-card#api-hover-card-trigger
+     * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger
      *
      * @example
      * ```tsx

package/dist/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/hover-card/hover-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n * This is the root, stateful component that manages the open/closed state of the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#api-hover-card\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Root = ({\n\tcloseDelay = 300,\n\topenDelay = 100,\n\t...props\n}: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>) => (\n\t<HoverCardPrimitive.Root closeDelay={closeDelay} openDelay={openDelay} {...props} />\n);\nRoot.displayName = \"HoverCard\";\n\n/**\n * The trigger element that opens the hover card when hovered.\n *\n * @see https://mantle.ngrok.com/components/hover-card#api-hover-card-trigger\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Trigger = HoverCardPrimitive.Trigger;\nTrigger.displayName = \"HoverCardTrigger\";\n\n/**\n * The portal for a HoverCard. Should be rendered as a child of the `HoverCard` component.\n * Renders a portal that the `HoverCard.Content` is rendered into.\n *\n * You likely don't need to use this component directly, as it is used internally by the `HoverCard.Content` component.\n */\nconst Portal = HoverCardPrimitive.Portal;\nPortal.displayName = \"HoverCardPortal\";\n\n/**\n * The content to render inside the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#api-hover-card-content\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof HoverCardPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, onClick, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<Portal>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 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\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = HoverCardPrimitive.Content.displayName;\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n *\n * @see https://mantle.ngrok.com/components/hover-card\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst HoverCard = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the hover card.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#api-hover-card\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button>Hover me</Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content>\n\t *     <p>This is the hover card content.</p>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the hover card. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#api-hover-card-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" variant=\"link\">@username</Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content side=\"top\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">User Profile</Text>\n\t *       <Text>Additional information about the user.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Follow</Button>\n\t *     </div>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The portal container for rendering hover card content outside the normal DOM tree.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#api-hover-card-portal\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Text>Hover over me</Text>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Portal>\n\t *     <HoverCard.Content>\n\t *       <Text>This content is rendered in a portal.</Text>\n\t *     </HoverCard.Content>\n\t *   </HoverCard.Portal>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * The trigger element that opens the hover card when hovered.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#api-hover-card-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" variant=\"ghost\">\n\t *       Hover for details\n\t *     </Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content>\n\t *     <div className=\"space-y-1\">\n\t *       <Text weight=\"strong\">Quick Info</Text>\n\t *       <Text>This appears when you hover over the trigger.</Text>\n\t *     </div>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tHoverCard,\n};\n"],"mappings":"wCAEA,UAAYA,MAAwB,6BACpC,OAAS,cAAAC,MAAkB,QA6B1B,cAAAC,MAAA,oBALD,IAAMC,EAAO,CAAC,CACb,WAAAC,EAAa,IACb,UAAAC,EAAY,IACZ,GAAGC,CACJ,IACCJ,EAAoB,OAAnB,CAAwB,WAAYE,EAAY,UAAWC,EAAY,GAAGC,EAAO,EAEnFH,EAAK,YAAc,YAqBnB,IAAMI,EAA6B,UACnCA,EAAQ,YAAc,mBAQtB,IAAMC,EAA4B,SAClCA,EAAO,YAAc,kBAqBrB,IAAMC,EAAUC,EAGd,CAAC,CAAE,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,SAAU,WAAAC,EAAa,EAAG,GAAGR,CAAM,EAAGS,IACtEb,EAACM,EAAA,CACA,SAAAN,EAAoB,UAAnB,CACA,IAAKa,EACL,MAAOF,EACP,WAAYC,EACZ,UAAWE,EACV,qFACA,+TACAL,CACD,EACA,QAAUM,GAAU,CAInBA,EAAM,gBAAgB,EACtBL,IAAUK,CAAK,CAChB,EACC,GAAGX,EACL,EACD,CACA,EACDG,EAAQ,YAAiC,UAAQ,YAqBjD,IAAMS,EAAY,CAkBjB,KAAAf,EAsBA,QAAAM,EAoBA,OAAAD,EAuBA,QAAAD,CACD","names":["HoverCardPrimitive","forwardRef","jsx","Root","closeDelay","openDelay","props","Trigger","Portal","Content","forwardRef","className","onClick","align","sideOffset","ref","cx","event","HoverCard"]}
+{"version":3,"sources":["../src/components/hover-card/hover-card.tsx"],"sourcesContent":["\"use client\";\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n * This is the root, stateful component that manages the open/closed state of the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Root = ({\n\tcloseDelay = 300,\n\topenDelay = 100,\n\t...props\n}: ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>) => (\n\t<HoverCardPrimitive.Root closeDelay={closeDelay} openDelay={openDelay} {...props} />\n);\nRoot.displayName = \"HoverCard\";\n\n/**\n * The trigger element that opens the hover card when hovered.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Trigger = HoverCardPrimitive.Trigger;\nTrigger.displayName = \"HoverCardTrigger\";\n\n/**\n * The portal for a HoverCard. Should be rendered as a child of the `HoverCard` component.\n * Renders a portal that the `HoverCard.Content` is rendered into.\n *\n * You likely don't need to use this component directly, as it is used internally by the `HoverCard.Content` component.\n */\nconst Portal = HoverCardPrimitive.Portal;\nPortal.displayName = \"HoverCardPortal\";\n\n/**\n * The content to render inside the hover card.\n *\n * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof HoverCardPrimitive.Content>,\n\tComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, onClick, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<Portal>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-popover border-popover z-50 w-64 rounded-md border p-4 shadow-md outline-hidden\",\n\t\t\t\t\"data-state-open:animate-in data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:fade-in-0 data-state-closed:zoom-out-95 data-state-open:zoom-in-95 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\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = HoverCardPrimitive.Content.displayName;\n\n/**\n * A floating card that appears when a user hovers over a trigger element.\n *\n * @see https://mantle.ngrok.com/components/hover-card\n *\n * @example\n * ```tsx\n * <HoverCard.Root>\n *   <HoverCard.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Hover me\n *     </Button>\n *   </HoverCard.Trigger>\n *   <HoverCard.Content>\n *     <p>This is the hover card content.</p>\n *   </HoverCard.Content>\n * </HoverCard.Root>\n * ```\n */\nconst HoverCard = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the hover card.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button>Hover me</Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content>\n\t *     <p>This is the hover card content.</p>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The content to render inside the hover card. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" variant=\"link\">@username</Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content side=\"top\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">User Profile</Text>\n\t *       <Text>Additional information about the user.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Follow</Button>\n\t *     </div>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The portal container for rendering hover card content outside the normal DOM tree.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#api-reference\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Text>Hover over me</Text>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Portal>\n\t *     <HoverCard.Content>\n\t *       <Text>This content is rendered in a portal.</Text>\n\t *     </HoverCard.Content>\n\t *   </HoverCard.Portal>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tPortal,\n\t/**\n\t * The trigger element that opens the hover card when hovered.\n\t *\n\t * @see https://mantle.ngrok.com/components/hover-card#hovercardtrigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <HoverCard.Root>\n\t *   <HoverCard.Trigger asChild>\n\t *     <Button type=\"button\" variant=\"ghost\">\n\t *       Hover for details\n\t *     </Button>\n\t *   </HoverCard.Trigger>\n\t *   <HoverCard.Content>\n\t *     <div className=\"space-y-1\">\n\t *       <Text weight=\"strong\">Quick Info</Text>\n\t *       <Text>This appears when you hover over the trigger.</Text>\n\t *     </div>\n\t *   </HoverCard.Content>\n\t * </HoverCard.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tHoverCard,\n};\n"],"mappings":"wCAEA,UAAYA,MAAwB,6BACpC,OAAS,cAAAC,MAAkB,QA6B1B,cAAAC,MAAA,oBALD,IAAMC,EAAO,CAAC,CACb,WAAAC,EAAa,IACb,UAAAC,EAAY,IACZ,GAAGC,CACJ,IACCJ,EAAoB,OAAnB,CAAwB,WAAYE,EAAY,UAAWC,EAAY,GAAGC,EAAO,EAEnFH,EAAK,YAAc,YAqBnB,IAAMI,EAA6B,UACnCA,EAAQ,YAAc,mBAQtB,IAAMC,EAA4B,SAClCA,EAAO,YAAc,kBAqBrB,IAAMC,EAAUC,EAGd,CAAC,CAAE,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,SAAU,WAAAC,EAAa,EAAG,GAAGR,CAAM,EAAGS,IACtEb,EAACM,EAAA,CACA,SAAAN,EAAoB,UAAnB,CACA,IAAKa,EACL,MAAOF,EACP,WAAYC,EACZ,UAAWE,EACV,qFACA,+TACAL,CACD,EACA,QAAUM,GAAU,CAInBA,EAAM,gBAAgB,EACtBL,IAAUK,CAAK,CAChB,EACC,GAAGX,EACL,EACD,CACA,EACDG,EAAQ,YAAiC,UAAQ,YAqBjD,IAAMS,EAAY,CAkBjB,KAAAf,EAsBA,QAAAM,EAoBA,OAAAD,EAuBA,QAAAD,CACD","names":["HoverCardPrimitive","forwardRef","jsx","Root","closeDelay","openDelay","props","Trigger","Portal","Content","forwardRef","className","onClick","align","sideOffset","ref","cx","event","HoverCard"]}

package/dist/{icon-CkvpQ4BK.d.ts → icon-DXTMiV1L.d.ts}

@@ -11,7 +11,7 @@ type IconProps = Omit<SvgAttributes, "children"> & {
 /**
  * Decorates an svg icon with automatic sizing styles and a `shrink-0` class.
  *
- * @see https://mantle.ngrok.com/components/icon#api-icon
+ * @see https://mantle.ngrok.com/components/icon
  *
  * @example
  * ```tsx

package/dist/{icon-button-D4BTvC7F.d.ts → icon-button-CT71Ti9V.d.ts}

@@ -78,7 +78,7 @@ type IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & WithAsChild & I
  * as submitting a form or opening a dialog.
  * Renders only a single icon as children with an accessible, screen-reader-only label.
  *
- * @see https://mantle.ngrok.com/components/button#api-icon-button
+ * @see https://mantle.ngrok.com/components/button
  *
  * @example
  * ```tsx

package/dist/icon.d.ts

@@ -1,4 +1,4 @@
-export { I as Icon, a as IconProps } from './icon-CkvpQ4BK.js';
-export { S as SvgOnly, a as SvgOnlyProps } from './svg-only-Bj2yffO4.js';
+export { I as Icon, a as IconProps } from './icon-DXTMiV1L.js';
+export { S as SvgOnly, a as SvgOnlyProps } from './svg-only-Cp8Mu_sh.js';
 export { S as SvgAttributes } from './types-BuKAGhC-.js';
 import 'react';

package/dist/icon.js

@@ -1,2 +1,2 @@
-import"./chunk-72TJUKMV.js";import{a as b}from"./chunk-SBVSECWW.js";import{a}from"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{b as Icon,a as SvgOnly};
+import"./chunk-72TJUKMV.js";import{a as b}from"./chunk-IVQ626TU.js";import{a}from"./chunk-SBQHQ2SJ.js";import"./chunk-PFXFESEN.js";export{b as Icon,a as SvgOnly};
 //# sourceMappingURL=icon.js.map

package/dist/icons.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { d as SortingMode, A as AlphanumericSortingDirection, T as TimeSortingDirection, S as SortingDirection } from './direction-DHheuUag.js';
 import { S as SvgAttributes } from './types-BuKAGhC-.js';
 import { T as Theme } from './themes-Bi46K9ZW.js';
-import 'react';
+import { ComponentProps } from 'react';
 
 type Props = SvgAttributes & ({
     mode: Extract<SortingMode, "alphanumeric">;
@@ -66,4 +66,22 @@ declare namespace ThemeIcon {
     var displayName: string;
 }
 
-export { AutoThemeIcon, SortIcon, ThemeIcon, TrafficPolicyFileIcon };
+/**
+ * Props for an inline svg icon.
+ */
+type InlineIconProps = Omit<ComponentProps<"svg">, "xmlns" | "fill" | "viewBox" | "color" | "children"> & {
+    /**
+     * The fill color mode of the svg icon.
+     * If set to `"inherit"`, the icon will inherit the color of its parent using `currentColor`
+     * If set to `"auto"`, the icon will use "branded" fill color(s) that are not inherited.
+     * @default "auto"
+     */
+    color?: "inherit" | "auto";
+};
+
+/**
+ * An inline svg icon that renders the ngrok logo. Fill color is determined by the `color` CSS property.
+ */
+declare function NgrokIcon(props: Omit<InlineIconProps, "color">): react_jsx_runtime.JSX.Element;
+
+export { AutoThemeIcon, type InlineIconProps, NgrokIcon, SortIcon, ThemeIcon, TrafficPolicyFileIcon };

package/dist/icons.js

@@ -1,2 +1,2 @@
-import{a as h}from"./chunk-W2YQRWR5.js";import{a as s}from"./chunk-HL2HWYKP.js";import"./chunk-7MJQGBE4.js";import{m}from"./chunk-ZYMZVPDT.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-PFXFESEN.js";import{DesktopIcon as f}from"@phosphor-icons/react/Desktop";import{MoonIcon as n}from"@phosphor-icons/react/Moon";import{SunIcon as i}from"@phosphor-icons/react/Sun";import{jsx as t}from"react/jsx-runtime";function c(o){let e=m();return t(r,{theme:e,...o})}c.displayName="AutoThemeIcon";function r({theme:o,...e}){switch(o){case"system":return t(f,{...e});case"light":return t(i,{...e});case"dark":return t(n,{...e});case"light-high-contrast":return t(i,{...e,weight:"fill"});case"dark-high-contrast":return t(n,{...e,weight:"fill"})}}r.displayName="ThemeIcon";export{c as AutoThemeIcon,s as SortIcon,r as ThemeIcon,h as TrafficPolicyFileIcon};
+import{a}from"./chunk-W2YQRWR5.js";import{a as l}from"./chunk-HL2HWYKP.js";import"./chunk-7MJQGBE4.js";import{m as c}from"./chunk-HF3KJHO3.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-PFXFESEN.js";import{DesktopIcon as p}from"@phosphor-icons/react/Desktop";import{MoonIcon as m}from"@phosphor-icons/react/Moon";import{SunIcon as n}from"@phosphor-icons/react/Sun";import{jsx as o}from"react/jsx-runtime";function h(t){let e=c();return o(r,{theme:e,...t})}h.displayName="AutoThemeIcon";function r({theme:t,...e}){switch(t){case"system":return o(p,{...e});case"light":return o(n,{...e});case"dark":return o(m,{...e});case"light-high-contrast":return o(n,{...e,weight:"fill"});case"dark-high-contrast":return o(m,{...e,weight:"fill"})}}r.displayName="ThemeIcon";import{jsx as i}from"react/jsx-runtime";function s(t){return i("svg",{viewBox:"0 0 94 36",fill:"currentColor",...t,children:i("path",{d:"M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47Zm-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877v-.003Zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26-.001-.232Zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617-.002.002Zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502Z"})})}export{h as AutoThemeIcon,s as NgrokIcon,l as SortIcon,r as ThemeIcon,a as TrafficPolicyFileIcon};
 //# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/icons/theme.tsx"],"sourcesContent":["import { DesktopIcon } from \"@phosphor-icons/react/Desktop\";\nimport { MoonIcon } from \"@phosphor-icons/react/Moon\";\nimport { SunIcon } from \"@phosphor-icons/react/Sun\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\nimport type { Theme } from \"../theme/themes.js\";\n\n/**\n * An icon that automatically adapts to the current applied theme.\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction AutoThemeIcon(props: SvgAttributes) {\n\tconst appliedTheme = useAppliedTheme();\n\n\treturn <ThemeIcon theme={appliedTheme} {...props} />;\n}\nAutoThemeIcon.displayName = \"AutoThemeIcon\";\n\ntype ThemeIconProps = SvgAttributes & { theme: Theme };\n\n/**\n * An icon that adapts to a specific theme.\n * It will render a different icon based on the provided theme:\n * - `system`: DesktopIcon\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction ThemeIcon({ theme, ...props }: ThemeIconProps) {\n\tswitch (theme) {\n\t\tcase \"system\":\n\t\t\treturn <DesktopIcon {...props} />;\n\t\tcase \"light\":\n\t\t\treturn <SunIcon {...props} />;\n\t\tcase \"dark\":\n\t\t\treturn <MoonIcon {...props} />;\n\t\tcase \"light-high-contrast\":\n\t\t\treturn <SunIcon {...props} weight=\"fill\" />;\n\t\tcase \"dark-high-contrast\":\n\t\t\treturn <MoonIcon {...props} weight=\"fill\" />;\n\t}\n}\nThemeIcon.displayName = \"ThemeIcon\";\n\nexport {\n\t//,\n\tAutoThemeIcon,\n\tThemeIcon,\n};\n"],"mappings":"+PAAA,OAAS,eAAAA,MAAmB,gCAC5B,OAAS,YAAAC,MAAgB,6BACzB,OAAS,WAAAC,MAAe,4BAehB,cAAAC,MAAA,oBAHR,SAASC,EAAcC,EAAsB,CAC5C,IAAMC,EAAeC,EAAgB,EAErC,OAAOJ,EAACK,EAAA,CAAU,MAAOF,EAAe,GAAGD,EAAO,CACnD,CACAD,EAAc,YAAc,gBAa5B,SAASI,EAAU,CAAE,MAAAC,EAAO,GAAGJ,CAAM,EAAmB,CACvD,OAAQI,EAAO,CACd,IAAK,SACJ,OAAON,EAACO,EAAA,CAAa,GAAGL,EAAO,EAChC,IAAK,QACJ,OAAOF,EAACQ,EAAA,CAAS,GAAGN,EAAO,EAC5B,IAAK,OACJ,OAAOF,EAACS,EAAA,CAAU,GAAGP,EAAO,EAC7B,IAAK,sBACJ,OAAOF,EAACQ,EAAA,CAAS,GAAGN,EAAO,OAAO,OAAO,EAC1C,IAAK,qBACJ,OAAOF,EAACS,EAAA,CAAU,GAAGP,EAAO,OAAO,OAAO,CAC5C,CACD,CACAG,EAAU,YAAc","names":["DesktopIcon","MoonIcon","SunIcon","jsx","AutoThemeIcon","props","appliedTheme","useAppliedTheme","ThemeIcon","theme","DesktopIcon","SunIcon","MoonIcon"]}
+{"version":3,"sources":["../src/components/icons/theme.tsx","../src/components/icons/ngrok.tsx"],"sourcesContent":["import { DesktopIcon } from \"@phosphor-icons/react/Desktop\";\nimport { MoonIcon } from \"@phosphor-icons/react/Moon\";\nimport { SunIcon } from \"@phosphor-icons/react/Sun\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { useAppliedTheme } from \"../theme/theme-provider.js\";\nimport type { Theme } from \"../theme/themes.js\";\n\n/**\n * An icon that automatically adapts to the current applied theme.\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction AutoThemeIcon(props: SvgAttributes) {\n\tconst appliedTheme = useAppliedTheme();\n\n\treturn <ThemeIcon theme={appliedTheme} {...props} />;\n}\nAutoThemeIcon.displayName = \"AutoThemeIcon\";\n\ntype ThemeIconProps = SvgAttributes & { theme: Theme };\n\n/**\n * An icon that adapts to a specific theme.\n * It will render a different icon based on the provided theme:\n * - `system`: DesktopIcon\n * - `light`: SunIcon\n * - `dark`: MoonIcon\n * - `light-high-contrast`: SunIcon (fill)\n * - `dark-high-contrast`: MoonIcon (fill)\n */\nfunction ThemeIcon({ theme, ...props }: ThemeIconProps) {\n\tswitch (theme) {\n\t\tcase \"system\":\n\t\t\treturn <DesktopIcon {...props} />;\n\t\tcase \"light\":\n\t\t\treturn <SunIcon {...props} />;\n\t\tcase \"dark\":\n\t\t\treturn <MoonIcon {...props} />;\n\t\tcase \"light-high-contrast\":\n\t\t\treturn <SunIcon {...props} weight=\"fill\" />;\n\t\tcase \"dark-high-contrast\":\n\t\t\treturn <MoonIcon {...props} weight=\"fill\" />;\n\t}\n}\nThemeIcon.displayName = \"ThemeIcon\";\n\nexport {\n\t//,\n\tAutoThemeIcon,\n\tThemeIcon,\n};\n","import type { InlineIconProps } from \"./types.js\";\n\n/**\n * An inline svg icon that renders the ngrok logo. Fill color is determined by the `color` CSS property.\n */\nexport function NgrokIcon(props: Omit<InlineIconProps, \"color\">) {\n\treturn (\n\t\t<svg viewBox=\"0 0 94 36\" fill=\"currentColor\" {...props}>\n\t\t\t<path d=\"M32.272 12.011c-1.298-1.466-2.904-2.205-4.812-2.205-1.176 0-2.26.233-3.255.7a7.995 7.995 0 0 0-2.581 1.906 9.205 9.205 0 0 0-1.715 2.853 9.773 9.773 0 0 0-.628 3.546c0 1.25.194 2.39.58 3.419.362.98.918 1.877 1.635 2.636A7.543 7.543 0 0 0 24 26.584c.965.41 2.025.617 3.176.617.522 0 1.005-.041 1.445-.116.439-.075.858-.2 1.26-.37.4-.175.79-.398 1.18-.664.385-.27.792-.612 1.21-1.018v4.353h-.005v.421h-5.33l-4.005 4.64v.798h15.037v-24.98h-5.697v1.746Zm-.014 7.979a4.25 4.25 0 0 1-.786 1.215 3.555 3.555 0 0 1-2.592 1.1 3.627 3.627 0 0 1-1.464-.292 3.508 3.508 0 0 1-1.166-.808 3.93 3.93 0 0 1-1.054-2.72c0-.519.097-1.006.298-1.457a3.77 3.77 0 0 1 .804-1.181 4.114 4.114 0 0 1 1.162-.808 3.484 3.484 0 0 1 2.817-.016c.448.19.844.463 1.181.81.336.347.6.743.804 1.194.202.452.298.95.298 1.493 0 .505-.104 1.005-.302 1.47Zm-16.261-7.708a6.173 6.173 0 0 0-2.06-1.602 4.875 4.875 0 0 0-.57-.22 6.383 6.383 0 0 0-.923-.216H8.383L5.697 13.39v-3.082H.002v16.61h5.695V15.712h5.35l.444-.01v11.214h5.697V16.528c0-.885-.084-1.674-.25-2.366a4.655 4.655 0 0 0-.941-1.877v-.003Zm38.367-2.018h-6.213l-2.47 2.863v-2.864h-5.7v16.61h5.71l.004-11.117h4.144l4.526-5.26-.001-.232Zm31.051 7.672 7.79-7.392v-.281H85.7l-5.975 5.991V0h-5.696v26.87h5.696v-6.766l6.262 6.763h7.663v-.316l-8.233-8.617-.002.002Zm-16.11-5.78a9.436 9.436 0 0 0-3.085-1.842 10.953 10.953 0 0 0-3.855-.664c-1.407 0-2.705.226-3.884.678a9.611 9.611 0 0 0-3.072 1.858 8.488 8.488 0 0 0-2.016 2.788 8.281 8.281 0 0 0-.722 3.449c0 1.362.24 2.596.722 3.707a8.52 8.52 0 0 0 2.002 2.862c.85.798 1.86 1.415 3.036 1.847 1.177.432 2.455.647 3.842.647 1.406 0 2.707-.215 3.919-.647 1.204-.431 2.24-1.04 3.098-1.833a8.583 8.583 0 0 0 2.031-2.816c.493-1.09.742-2.29.742-3.611 0-1.316-.244-2.52-.722-3.612a8.424 8.424 0 0 0-2.035-2.81Zm-3.558 7.864c-.2.461-.463.869-.786 1.215a3.573 3.573 0 0 1-2.592 1.1c-.502 0-.981-.096-1.434-.291a3.44 3.44 0 0 1-1.16-.809 4.155 4.155 0 0 1-.788-1.215 3.825 3.825 0 0 1-.297-1.537c0-.517.098-1.004.297-1.456.201-.451.46-.849.787-1.194a3.579 3.579 0 0 1 2.597-1.1c.502 0 .98.096 1.43.29.448.19.839.461 1.16.81.328.345.586.752.786 1.214.2.461.297.954.297 1.471 0 .538-.096 1.04-.297 1.502Z\" />\n\t\t</svg>\n\t);\n}\n"],"mappings":"+PAAA,OAAS,eAAAA,MAAmB,gCAC5B,OAAS,YAAAC,MAAgB,6BACzB,OAAS,WAAAC,MAAe,4BAehB,cAAAC,MAAA,oBAHR,SAASC,EAAcC,EAAsB,CAC5C,IAAMC,EAAeC,EAAgB,EAErC,OAAOJ,EAACK,EAAA,CAAU,MAAOF,EAAe,GAAGD,EAAO,CACnD,CACAD,EAAc,YAAc,gBAa5B,SAASI,EAAU,CAAE,MAAAC,EAAO,GAAGJ,CAAM,EAAmB,CACvD,OAAQI,EAAO,CACd,IAAK,SACJ,OAAON,EAACO,EAAA,CAAa,GAAGL,EAAO,EAChC,IAAK,QACJ,OAAOF,EAACQ,EAAA,CAAS,GAAGN,EAAO,EAC5B,IAAK,OACJ,OAAOF,EAACS,EAAA,CAAU,GAAGP,EAAO,EAC7B,IAAK,sBACJ,OAAOF,EAACQ,EAAA,CAAS,GAAGN,EAAO,OAAO,OAAO,EAC1C,IAAK,qBACJ,OAAOF,EAACS,EAAA,CAAU,GAAGP,EAAO,OAAO,OAAO,CAC5C,CACD,CACAG,EAAU,YAAc,YCtCrB,cAAAK,MAAA,oBAHI,SAASC,EAAUC,EAAuC,CAChE,OACCF,EAAC,OAAI,QAAQ,YAAY,KAAK,eAAgB,GAAGE,EAChD,SAAAF,EAAC,QAAK,EAAE,8mEAA8mE,EACvnE,CAEF","names":["DesktopIcon","MoonIcon","SunIcon","jsx","AutoThemeIcon","props","appliedTheme","useAppliedTheme","ThemeIcon","theme","DesktopIcon","SunIcon","MoonIcon","jsx","NgrokIcon","props"]}

package/dist/input.d.ts

@@ -12,7 +12,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "
  * Used to create interactive controls for web-based forms in order to accept data from the user.
  * A versatile input element that supports various types, validation states, and can be composed with other elements.
  *
- * @see https://mantle.ngrok.com/components/input#api-input
+ * @see https://mantle.ngrok.com/components/input
  *
  * @example
  * ```tsx
@@ -31,7 +31,7 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
  * The actual <input /> element that captures user input.
  * Used internally by Input component or when you need direct control over the input element.
  *
- * @see https://mantle.ngrok.com/components/input#api-input-capture
+ * @see https://mantle.ngrok.com/components/input
  *
  * @example
  * ```tsx
@@ -58,7 +58,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
  * A specialized input component for password entry with a toggle button to show/hide the password value.
  * Provides enhanced security UX by allowing users to verify their input while maintaining privacy.
  *
- * @see https://mantle.ngrok.com/components/input#api-password-input
+ * @see https://mantle.ngrok.com/components/input
  *
  * @example
  * ```tsx

package/dist/input.js

@@ -1,2 +1,2 @@
-import{a as H}from"./chunk-EYZYDUS2.js";import{a as C}from"./chunk-HKSO72E5.js";import{a as d}from"./chunk-SBVSECWW.js";import"./chunk-NZ6DRFAL.js";import{a as b}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as L}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as E}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as W}from"@phosphor-icons/react/WarningDiamond";import A from"clsx";import{createContext as N,forwardRef as g,useContext as V,useRef as k}from"react";import{jsx as t,jsxs as M}from"react/jsx-runtime";var m=g(({children:e,className:n,...r},i)=>{let o=!!e,a=k(null);return o?t(y,{className:n,forwardedRef:i,innerRef:a,...r,children:e}):t(y,{...r,className:n,forwardedRef:i,innerRef:a,children:t(f,{...r})})});m.displayName="Input";var f=g(({"aria-invalid":e,className:n,validation:r,...i},o)=>{let{"aria-invalid":a,forwardedRef:s,innerRef:c,validation:I,...l}=V(P),p=I??r,x=(typeof p=="function"?p():p)||void 0,u=a??e??p==="error",v={...l,...i,type:i.type??l.type??"text"};return t("input",{"aria-invalid":u,"data-validation":x,className:b("placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden",n),ref:C(o,s,c),...v})});f.displayName="InputCapture";var P=N({validation:void 0,innerRef:{current:null}}),y=({"aria-invalid":e,"aria-disabled":n,children:r,className:i,disabled:o,forwardedRef:a,innerRef:s,style:c,type:I,validation:l,...p})=>{let u=e!=null&&e!=="false"?"error":typeof l=="function"?l():l,v=e??u==="error";return t(P.Provider,{value:{"aria-invalid":e,"aria-disabled":n,disabled:o,type:I,validation:u,...p,forwardedRef:a,innerRef:s},children:M("div",{"aria-invalid":v,"aria-disabled":o??n,"data-validation":u||void 0,className:b("pointer-coarse:text-base h-9 text-sm","bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4","aria-disabled:opacity-50","has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5","border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent","data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger","autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]",i),onClick:()=>{s?.current?.focus()},onKeyDown:()=>{s?.current!==document.activeElement&&s?.current?.focus()},style:c,children:[r,t(T,{name:p.name,validation:u})]})})};y.displayName="InputContainer";var T=({name:e,validation:n})=>{switch(n){case"error":return M("div",{className:"text-danger-600 pointer-events-none order-last select-none",children:[t("span",{className:"sr-only",children:A("The value entered for the",e,"input has failed validation.")}),t(d,{svg:t(E,{"aria-hidden":!0,weight:"fill"})})]});case"success":return t("div",{className:"text-success-600 pointer-events-none order-last select-none",children:t(d,{svg:t(L,{weight:"fill"})})});case"warning":return t("div",{className:"text-warning-600 pointer-events-none order-last select-none",children:t(d,{svg:t(W,{weight:"fill"})})});default:return null}};T.displayName="ValidationFeedback";import{EyeIcon as O}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as j}from"@phosphor-icons/react/EyeClosed";import{forwardRef as B,useEffect as F,useState as _}from"react";import{jsx as h,jsxs as w}from"react/jsx-runtime";var R=B(({onValueVisibilityChange:e,showValue:n=!1,...r},i)=>{let[o,a]=_(n),s=o?"text":"password",c=o?O:j;return F(()=>{a(n)},[n]),w(m,{type:s,ref:i,...r,children:[h(f,{}),w("button",{type:"button",tabIndex:-1,className:"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0",onClick:()=>{a(!o),e?.(!o)},children:[w("span",{className:"sr-only",children:["Turn password visibility ",o?"off":"on"]}),h(d,{svg:h(c,{"aria-hidden":!0})})]})]})});R.displayName="PasswordInput";export{m as Input,f as InputCapture,R as PasswordInput,H as isInput};
+import{a as H}from"./chunk-EYZYDUS2.js";import{a as x}from"./chunk-HKSO72E5.js";import{a as u}from"./chunk-IVQ626TU.js";import"./chunk-SBQHQ2SJ.js";import{a as v}from"./chunk-PFXFESEN.js";import{CheckCircleIcon as L}from"@phosphor-icons/react/CheckCircle";import{WarningIcon as E}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as W}from"@phosphor-icons/react/WarningDiamond";import A from"clsx";import{createContext as N,forwardRef as C,useContext as V,useRef as k}from"react";import{jsx as t,jsxs as T}from"react/jsx-runtime";var m=C(({children:n,className:e,...r},i)=>{let o=!!n,a=k(null);return o?t(b,{className:e,forwardedRef:i,innerRef:a,...r,children:n}):t(b,{...r,className:e,forwardedRef:i,innerRef:a,children:t(f,{...r})})});m.displayName="Input";var f=C(({"aria-invalid":n,className:e,validation:r,...i},o)=>{let{"aria-invalid":a,forwardedRef:s,innerRef:d,validation:I,...l}=V(g),p=I??r,w=(typeof p=="function"?p():p)||void 0,c=a??n??p==="error",R={...l,...i,type:i.type??l.type??"text"};return t("input",{"aria-invalid":c,"data-validation":w,className:v("placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden",e),ref:x(o,s,d),...R})});f.displayName="InputCapture";var g=N({validation:void 0,innerRef:{current:null}}),b=({"aria-invalid":n,"aria-disabled":e,children:r,className:i,disabled:o,forwardedRef:a,innerRef:s,style:d,type:I,validation:l,...p})=>{let c=n!=null&&n!=="false"?"error":typeof l=="function"?l():l;return t(g.Provider,{value:{"aria-invalid":n,"aria-disabled":e,disabled:o,type:I,validation:c,...p,forwardedRef:a,innerRef:s},children:T("div",{role:"none","data-disabled":(o??e)||void 0,"data-validation":c||void 0,className:v("pointer-coarse:text-base h-9 text-sm","bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4","data-disabled:opacity-50","has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5","border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent","data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success","data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning","data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger","autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]",i),onClick:()=>{s?.current?.focus()},onKeyDown:()=>{s?.current!==document.activeElement&&s?.current?.focus()},style:d,children:[r,t(P,{name:p.name,validation:c})]})})};b.displayName="InputContainer";var P=({name:n,validation:e})=>{switch(e){case"error":return T("div",{className:"text-danger-600 pointer-events-none order-last select-none",children:[t("span",{className:"sr-only",children:A("The value entered for the",n,"input has failed validation.")}),t(u,{svg:t(E,{"aria-hidden":!0,weight:"fill"})})]});case"success":return t("div",{className:"text-success-600 pointer-events-none order-last select-none",children:t(u,{svg:t(L,{weight:"fill"})})});case"warning":return t("div",{className:"text-warning-600 pointer-events-none order-last select-none",children:t(u,{svg:t(W,{weight:"fill"})})});default:return null}};P.displayName="ValidationFeedback";import{EyeIcon as O}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as j}from"@phosphor-icons/react/EyeClosed";import{forwardRef as B,useEffect as F,useState as _}from"react";import{jsx as y,jsxs as h}from"react/jsx-runtime";var M=B(({onValueVisibilityChange:n,showValue:e=!1,...r},i)=>{let[o,a]=_(e),s=o?"text":"password",d=o?O:j;return F(()=>{a(e)},[e]),h(m,{type:s,ref:i,...r,children:[y(f,{}),h("button",{type:"button",tabIndex:-1,className:"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0",onClick:()=>{a(!o),n?.(!o)},children:[h("span",{className:"sr-only",children:["Turn password visibility ",o?"off":"on"]}),y(u,{svg:y(d,{"aria-hidden":!0})})]})]})});M.displayName="PasswordInput";export{m as Input,f as InputCapture,M as PasswordInput,H as isInput};
 //# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/input/input.tsx","../src/components/input/password-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentRef,\n\tForwardedRef,\n\tInputHTMLAttributes,\n\tMutableRefObject,\n\tPropsWithChildren,\n} from \"react\";\nimport { createContext, forwardRef, useContext, useRef } 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 { Validation, WithAutoComplete, WithInputType, WithValidation } from \"./types.js\";\n\ntype BaseProps = WithAutoComplete & WithInputType & WithValidation;\n\n/**\n * The props for the `Input` component.\n */\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps &\n\tPropsWithChildren;\n\n/**\n * Used to create interactive controls for web-based forms in order to accept data from the user.\n * A versatile input element that supports various types, validation states, and can be composed with other elements.\n *\n * @see https://mantle.ngrok.com/components/input#api-input\n *\n * @example\n * ```tsx\n * <Input\n *   type=\"email\"\n *   placeholder=\"Enter your email\"\n *   validation=\"success\"\n * />\n * ```\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n\t({ children, className, ...props }, forwardedRef) => {\n\t\tconst hasChildren = Boolean(children);\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\n\t\tif (hasChildren) {\n\t\t\treturn (\n\t\t\t\t<InputContainer\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tforwardedRef={forwardedRef}\n\t\t\t\t\tinnerRef={innerRef}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</InputContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<InputContainer\n\t\t\t\t{...props}\n\t\t\t\tclassName={className}\n\t\t\t\tforwardedRef={forwardedRef}\n\t\t\t\tinnerRef={innerRef}\n\t\t\t>\n\t\t\t\t<InputCapture {...props} />\n\t\t\t</InputContainer>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps;\n\n/**\n * The actual <input /> element that captures user input.\n * Used internally by Input component or when you need direct control over the input element.\n *\n * @see https://mantle.ngrok.com/components/input#api-input-capture\n *\n * @example\n * ```tsx\n * <Input>\n *   <InputCapture />\n *   <Icon svg={<SearchIcon />} />\n * </Input>\n * ```\n */\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, validation: _validation, ...restProps }, ref) => {\n\t\tconst {\n\t\t\t\"aria-invalid\": ctxAriaInvalid,\n\t\t\tforwardedRef: ctxForwardedRef,\n\t\t\tinnerRef: ctxInnerRef,\n\t\t\tvalidation: ctxValidation,\n\t\t\t...ctx\n\t\t} = useContext(InputContext);\n\n\t\tconst validation = ctxValidation ?? _validation;\n\t\tconst validationValue =\n\t\t\t(typeof validation === \"function\" ? validation() : validation) || undefined;\n\t\tconst ariaInvalid = ctxAriaInvalid ?? _ariaInvalid ?? validation === \"error\";\n\t\tconst props = {\n\t\t\t...ctx,\n\t\t\t...restProps,\n\t\t\ttype: restProps.type ?? ctx.type ?? \"text\",\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validationValue}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={composeRefs(ref, ctxForwardedRef, ctxInnerRef)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInputCapture.displayName = \"InputCapture\";\n\ntype InputContextType = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps & {\n\t\t/**\n\t\t * inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * forwarded ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef?: ForwardedRef<HTMLInputElement>;\n\t};\n\nconst InputContext = createContext<InputContextType>({\n\tvalidation: undefined,\n\tinnerRef: { current: null },\n});\n\ntype InputContainerProps = InputHTMLAttributes<HTMLInputElement> &\n\tBaseProps & {\n\t\t/**\n\t\t * @private inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * @private ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef: ForwardedRef<HTMLInputElement>;\n\t};\n\n/**\n * The container for the input element.\n */\nconst InputContainer = ({\n\t\"aria-invalid\": _ariaInvalid,\n\t\"aria-disabled\": _ariaDisabled,\n\tchildren,\n\tclassName,\n\tdisabled,\n\tforwardedRef,\n\tinnerRef,\n\tstyle,\n\ttype,\n\tvalidation: _validation,\n\t...props\n}: InputContainerProps) => {\n\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\tconst validation = isInvalid\n\t\t? \"error\"\n\t\t: typeof _validation === \"function\"\n\t\t\t? _validation()\n\t\t\t: _validation;\n\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\n\treturn (\n\t\t<InputContext.Provider\n\t\t\tvalue={{\n\t\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\t\tdisabled,\n\t\t\t\ttype,\n\t\t\t\tvalidation,\n\t\t\t\t...props,\n\t\t\t\tforwardedRef,\n\t\t\t\tinnerRef,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"aria-disabled:opacity-50\",\n\t\t\t\t\t\"has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5\",\n\t\t\t\t\t\"border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t}}\n\t\t\t\tonKeyDown={() => {\n\t\t\t\t\tif (innerRef?.current !== document.activeElement) {\n\t\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<ValidationFeedback name={props.name} validation={validation} />\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\nInputContainer.displayName = \"InputContainer\";\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n\nconst ValidationFeedback = ({\n\tname,\n\tvalidation,\n}: {\n\tname?: string;\n\tvalidation: Validation | undefined;\n}) => {\n\tswitch (validation) {\n\t\tcase \"error\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-danger-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\t{clsx(\"The value entered for the\", name, \"input has failed validation.\")}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Icon svg={<WarningIcon aria-hidden weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"success\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-success-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<Icon svg={<CheckCircleIcon weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"warning\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-warning-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<Icon svg={<WarningDiamondIcon weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\nValidationFeedback.displayName = \"ValidationFeedback\";\n","\"use client\";\n\nimport { EyeIcon } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosedIcon } from \"@phosphor-icons/react/EyeClosed\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Input, InputCapture } from \"./input.js\";\nimport type { InputType, WithAutoComplete, WithValidation } from \"./types.js\";\n\ntype PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tWithValidation &\n\tWithAutoComplete & {\n\t\t/**\n\t\t * Callback for when the visibility of the password value changes.\n\t\t */\n\t\tonValueVisibilityChange?: (visible: boolean) => void;\n\t\t/**\n\t\t * Show/hide the password value as a controlled state.\n\t\t * @default false\n\t\t */\n\t\tshowValue?: boolean;\n\t};\n\ntype PasswordInputType = Extract<InputType, \"text\" | \"password\">;\n\n/**\n * A specialized input component for password entry with a toggle button to show/hide the password value.\n * Provides enhanced security UX by allowing users to verify their input while maintaining privacy.\n *\n * @see https://mantle.ngrok.com/components/input#api-password-input\n *\n * @example\n * ```tsx\n * <PasswordInput\n *   placeholder=\"Enter your password\"\n *   showValue={false}\n *   onValueVisibilityChange={(visible) => console.log('Password visible:', visible)}\n * />\n * ```\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n\t({ onValueVisibilityChange, showValue = false, ...props }, ref) => {\n\t\tconst [showPassword, setShowPassword] = useState<boolean>(showValue);\n\t\tconst type: PasswordInputType = showPassword ? \"text\" : \"password\";\n\t\tconst EyeCon = showPassword ? EyeIcon : EyeClosedIcon;\n\n\t\tuseEffect(() => {\n\t\t\tsetShowPassword(showValue);\n\t\t}, [showValue]);\n\n\t\treturn (\n\t\t\t<Input type={type} ref={ref} {...props}>\n\t\t\t\t<InputCapture />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetShowPassword(!showPassword);\n\t\t\t\t\t\tonValueVisibilityChange?.(!showPassword);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"sr-only\">Turn password visibility {showPassword ? \"off\" : \"on\"}</span>\n\t\t\t\t\t<Icon svg={<EyeCon aria-hidden />} />\n\t\t\t\t</button>\n\t\t\t</Input>\n\t\t);\n\t},\n);\nPasswordInput.displayName = \"PasswordInput\";\n\nexport { PasswordInput };\nexport type { PasswordInputProps };\n"],"mappings":"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","names":["CheckCircleIcon","WarningIcon","WarningDiamondIcon","clsx","createContext","forwardRef","useContext","useRef","jsx","jsxs","Input","forwardRef","children","className","props","forwardedRef","hasChildren","innerRef","useRef","InputContainer","InputCapture","_ariaInvalid","_validation","restProps","ref","ctxAriaInvalid","ctxForwardedRef","ctxInnerRef","ctxValidation","ctx","useContext","InputContext","validation","validationValue","ariaInvalid","cx","composeRefs","createContext","_ariaDisabled","disabled","style","type","ValidationFeedback","ValidationFeedback","name","validation","jsxs","jsx","clsx","Icon","WarningIcon","CheckCircleIcon","WarningDiamondIcon","EyeIcon","EyeClosedIcon","forwardRef","useEffect","useState","jsx","jsxs","PasswordInput","forwardRef","onValueVisibilityChange","showValue","props","ref","showPassword","setShowPassword","useState","type","EyeCon","EyeIcon","EyeClosedIcon","useEffect","Input","InputCapture","Icon"]}
+{"version":3,"sources":["../src/components/input/input.tsx","../src/components/input/password-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentRef,\n\tForwardedRef,\n\tInputHTMLAttributes,\n\tMutableRefObject,\n\tPropsWithChildren,\n} from \"react\";\nimport { createContext, forwardRef, useContext, useRef } 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 { Validation, WithAutoComplete, WithInputType, WithValidation } from \"./types.js\";\n\ntype BaseProps = WithAutoComplete & WithInputType & WithValidation;\n\n/**\n * The props for the `Input` component.\n */\ntype InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps &\n\tPropsWithChildren;\n\n/**\n * Used to create interactive controls for web-based forms in order to accept data from the user.\n * A versatile input element that supports various types, validation states, and can be composed with other elements.\n *\n * @see https://mantle.ngrok.com/components/input\n *\n * @example\n * ```tsx\n * <Input\n *   type=\"email\"\n *   placeholder=\"Enter your email\"\n *   validation=\"success\"\n * />\n * ```\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n\t({ children, className, ...props }, forwardedRef) => {\n\t\tconst hasChildren = Boolean(children);\n\t\tconst innerRef = useRef<ComponentRef<\"input\">>(null);\n\n\t\tif (hasChildren) {\n\t\t\treturn (\n\t\t\t\t<InputContainer\n\t\t\t\t\tclassName={className}\n\t\t\t\t\tforwardedRef={forwardedRef}\n\t\t\t\t\tinnerRef={innerRef}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</InputContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<InputContainer\n\t\t\t\t{...props}\n\t\t\t\tclassName={className}\n\t\t\t\tforwardedRef={forwardedRef}\n\t\t\t\tinnerRef={innerRef}\n\t\t\t>\n\t\t\t\t<InputCapture {...props} />\n\t\t\t</InputContainer>\n\t\t);\n\t},\n);\nInput.displayName = \"Input\";\n\ntype InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps;\n\n/**\n * The actual <input /> element that captures user input.\n * Used internally by Input component or when you need direct control over the input element.\n *\n * @see https://mantle.ngrok.com/components/input\n *\n * @example\n * ```tsx\n * <Input>\n *   <InputCapture />\n *   <Icon svg={<SearchIcon />} />\n * </Input>\n * ```\n */\nconst InputCapture = forwardRef<HTMLInputElement, InputCaptureProps>(\n\t({ \"aria-invalid\": _ariaInvalid, className, validation: _validation, ...restProps }, ref) => {\n\t\tconst {\n\t\t\t\"aria-invalid\": ctxAriaInvalid,\n\t\t\tforwardedRef: ctxForwardedRef,\n\t\t\tinnerRef: ctxInnerRef,\n\t\t\tvalidation: ctxValidation,\n\t\t\t...ctx\n\t\t} = useContext(InputContext);\n\n\t\tconst validation = ctxValidation ?? _validation;\n\t\tconst validationValue =\n\t\t\t(typeof validation === \"function\" ? validation() : validation) || undefined;\n\t\tconst ariaInvalid = ctxAriaInvalid ?? _ariaInvalid ?? validation === \"error\";\n\t\tconst props = {\n\t\t\t...ctx,\n\t\t\t...restProps,\n\t\t\ttype: restProps.type ?? ctx.type ?? \"text\",\n\t\t};\n\n\t\treturn (\n\t\t\t<input\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tdata-validation={validationValue}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"placeholder:text-placeholder min-w-0 flex-1 bg-transparent text-left autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] focus:outline-hidden\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={composeRefs(ref, ctxForwardedRef, ctxInnerRef)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nInputCapture.displayName = \"InputCapture\";\n\ntype InputContextType = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tBaseProps & {\n\t\t/**\n\t\t * inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * forwarded ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef?: ForwardedRef<HTMLInputElement>;\n\t};\n\nconst InputContext = createContext<InputContextType>({\n\tvalidation: undefined,\n\tinnerRef: { current: null },\n});\n\ntype InputContainerProps = InputHTMLAttributes<HTMLInputElement> &\n\tBaseProps & {\n\t\t/**\n\t\t * @private inner ref for the input element, controlled by `Input`\n\t\t */\n\t\tinnerRef: MutableRefObject<HTMLInputElement | null>;\n\t\t/**\n\t\t * @private ref to the input element, forwarded from `Input` to `InputCapture`\n\t\t */\n\t\tforwardedRef: ForwardedRef<HTMLInputElement>;\n\t};\n\n/**\n * The container for the input element.\n */\nconst InputContainer = ({\n\t\"aria-invalid\": _ariaInvalid,\n\t\"aria-disabled\": _ariaDisabled,\n\tchildren,\n\tclassName,\n\tdisabled,\n\tforwardedRef,\n\tinnerRef,\n\tstyle,\n\ttype,\n\tvalidation: _validation,\n\t...props\n}: InputContainerProps) => {\n\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\tconst validation = isInvalid\n\t\t? \"error\"\n\t\t: typeof _validation === \"function\"\n\t\t\t? _validation()\n\t\t\t: _validation;\n\treturn (\n\t\t<InputContext.Provider\n\t\t\tvalue={{\n\t\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\t\tdisabled,\n\t\t\t\ttype,\n\t\t\t\tvalidation,\n\t\t\t\t...props,\n\t\t\t\tforwardedRef,\n\t\t\t\tinnerRef,\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\trole=\"none\"\n\t\t\t\tdata-disabled={(disabled ?? _ariaDisabled) || undefined}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"pointer-coarse:text-base h-9 text-sm\",\n\t\t\t\t\t\"bg-form relative flex w-full items-center gap-1.5 rounded-md border px-3 py-2 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-hidden focus-within:ring-4 focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\t\"data-disabled:opacity-50\",\n\t\t\t\t\t\"has-[input:not(:first-child)]:ps-2.5 has-[input:not(:last-child)]:pe-2.5 [&>:not(input)]:shrink-0 [&_svg]:size-5\",\n\t\t\t\t\t\"border-form text-strong has-focus-visible:border-accent-600 has-focus-visible:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 has-focus-visible:data-validation-success:border-success-600 has-focus-visible:data-validation-success:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:border-warning-600 has-focus-visible:data-validation-warning:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 has-focus-visible:data-validation-error:border-danger-600 has-focus-visible:data-validation-error:ring-focus-danger\",\n\t\t\t\t\t\"autofill:shadow-[inset_0_0_0px_1000px_var(--color-blue-50)] has-autofill:bg-blue-50 has-autofill:[-webkit-text-fill-color:var(--text-color-strong)]\", // Autofill styling on the input itself and any children with autofill styling\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t}}\n\t\t\t\tonKeyDown={() => {\n\t\t\t\t\tif (innerRef?.current !== document.activeElement) {\n\t\t\t\t\t\tinnerRef?.current?.focus();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<ValidationFeedback name={props.name} validation={validation} />\n\t\t\t</div>\n\t\t</InputContext.Provider>\n\t);\n};\nInputContainer.displayName = \"InputContainer\";\n\nexport { Input, InputCapture };\nexport type { InputProps, InputCaptureProps };\n\nconst ValidationFeedback = ({\n\tname,\n\tvalidation,\n}: {\n\tname?: string;\n\tvalidation: Validation | undefined;\n}) => {\n\tswitch (validation) {\n\t\tcase \"error\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-danger-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\t{clsx(\"The value entered for the\", name, \"input has failed validation.\")}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Icon svg={<WarningIcon aria-hidden weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"success\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-success-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<Icon svg={<CheckCircleIcon weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tcase \"warning\":\n\t\t\treturn (\n\t\t\t\t<div className=\"text-warning-600 pointer-events-none order-last select-none\">\n\t\t\t\t\t<Icon svg={<WarningDiamondIcon weight=\"fill\" />} />\n\t\t\t\t</div>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn null;\n\t}\n};\nValidationFeedback.displayName = \"ValidationFeedback\";\n","\"use client\";\n\nimport { EyeIcon } from \"@phosphor-icons/react/Eye\";\nimport { EyeClosedIcon } from \"@phosphor-icons/react/EyeClosed\";\nimport { forwardRef, useEffect, useState } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Input, InputCapture } from \"./input.js\";\nimport type { InputType, WithAutoComplete, WithValidation } from \"./types.js\";\n\ntype PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, \"autoComplete\" | \"type\"> &\n\tWithValidation &\n\tWithAutoComplete & {\n\t\t/**\n\t\t * Callback for when the visibility of the password value changes.\n\t\t */\n\t\tonValueVisibilityChange?: (visible: boolean) => void;\n\t\t/**\n\t\t * Show/hide the password value as a controlled state.\n\t\t * @default false\n\t\t */\n\t\tshowValue?: boolean;\n\t};\n\ntype PasswordInputType = Extract<InputType, \"text\" | \"password\">;\n\n/**\n * A specialized input component for password entry with a toggle button to show/hide the password value.\n * Provides enhanced security UX by allowing users to verify their input while maintaining privacy.\n *\n * @see https://mantle.ngrok.com/components/input\n *\n * @example\n * ```tsx\n * <PasswordInput\n *   placeholder=\"Enter your password\"\n *   showValue={false}\n *   onValueVisibilityChange={(visible) => console.log('Password visible:', visible)}\n * />\n * ```\n */\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\n\t({ onValueVisibilityChange, showValue = false, ...props }, ref) => {\n\t\tconst [showPassword, setShowPassword] = useState<boolean>(showValue);\n\t\tconst type: PasswordInputType = showPassword ? \"text\" : \"password\";\n\t\tconst EyeCon = showPassword ? EyeIcon : EyeClosedIcon;\n\n\t\tuseEffect(() => {\n\t\t\tsetShowPassword(showValue);\n\t\t}, [showValue]);\n\n\t\treturn (\n\t\t\t<Input type={type} ref={ref} {...props}>\n\t\t\t\t<InputCapture />\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"text-body hover:text-strong ml-1 cursor-pointer bg-inherit p-0\"\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetShowPassword(!showPassword);\n\t\t\t\t\t\tonValueVisibilityChange?.(!showPassword);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span className=\"sr-only\">Turn password visibility {showPassword ? \"off\" : \"on\"}</span>\n\t\t\t\t\t<Icon svg={<EyeCon aria-hidden />} />\n\t\t\t\t</button>\n\t\t\t</Input>\n\t\t);\n\t},\n);\nPasswordInput.displayName = \"PasswordInput\";\n\nexport { PasswordInput };\nexport type { PasswordInputProps };\n"],"mappings":"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","names":["CheckCircleIcon","WarningIcon","WarningDiamondIcon","clsx","createContext","forwardRef","useContext","useRef","jsx","jsxs","Input","forwardRef","children","className","props","forwardedRef","hasChildren","innerRef","useRef","InputContainer","InputCapture","_ariaInvalid","_validation","restProps","ref","ctxAriaInvalid","ctxForwardedRef","ctxInnerRef","ctxValidation","ctx","useContext","InputContext","validation","validationValue","ariaInvalid","cx","composeRefs","createContext","_ariaDisabled","disabled","style","type","ValidationFeedback","ValidationFeedback","name","validation","jsxs","jsx","clsx","Icon","WarningIcon","CheckCircleIcon","WarningDiamondIcon","EyeIcon","EyeClosedIcon","forwardRef","useEffect","useState","jsx","jsxs","PasswordInput","forwardRef","onValueVisibilityChange","showValue","props","ref","showPassword","setShowPassword","useState","type","EyeCon","EyeIcon","EyeClosedIcon","useEffect","Input","InputCapture","Icon"]}

package/dist/label.d.ts

@@ -6,7 +6,7 @@ import * as react from 'react';
  * checkbox, radio button, etc. The label is typically displayed next to the
  * form control and helps users understand its purpose.
  *
- * @see https://mantle.ngrok.com/components/label#api-label
+ * @see https://mantle.ngrok.com/components/label
  *
  * @example
  * ```tsx

package/dist/label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\t/**\n\t * If set, the label will appear disabled.\n\t */\n\tdisabled?: boolean;\n};\n\n/**\n * A Label represents a caption for an item in a user interface. It is used to\n * provide a description or title for a form control, such as an input field,\n * checkbox, radio button, etc. The label is typically displayed next to the\n * form control and helps users understand its purpose.\n *\n * @see https://mantle.ngrok.com/components/label#api-label\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"name\">\n *   Name: <Input type=\"text\" id=\"name\" />\n * </Label>\n *\n * <div className=\"flex items-center gap-2\">\n *   <Label htmlFor=\"name-2\">Name:</Label>\n *   <Input type=\"text\" id=\"name-2\" />\n * </div>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"label\">, LabelProps>(\n\t(\n\t\t{ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props },\n\t\tref,\n\t) => (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: this is a composable label component\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tclassName={cx(\n\t\t\t\t\"text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\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</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"wCAAA,OAAS,cAAAA,MAAkB,QAqCzB,cAAAC,MAAA,oBANF,IAAMC,EAAQC,EACb,CACC,CAAE,gBAAiBC,EAAe,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,YAAAC,EAAa,GAAGC,CAAM,EACvFC,IAGAT,EAAC,SACA,gBAAeM,GAAYH,EAC3B,UAAWO,EACV,qIACAL,CACD,EACA,YAAcM,GAAU,CAERA,EAAM,OACV,QAAQ,iCAAiC,IAIpDJ,IAAcI,CAAK,EAGf,CAACA,EAAM,kBAAoBA,EAAM,OAAS,GAC7CA,EAAM,eAAe,EAEvB,EACA,IAAKF,EACJ,GAAGD,EAEH,SAAAJ,EACF,CAEF,EACAH,EAAM,YAAc","names":["forwardRef","jsx","Label","forwardRef","_ariaDisabled","children","className","disabled","onMouseDown","props","ref","cx","event"]}
+{"version":3,"sources":["../src/components/label/label.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype LabelProps = ComponentPropsWithoutRef<\"label\"> & {\n\t/**\n\t * If set, the label will appear disabled.\n\t */\n\tdisabled?: boolean;\n};\n\n/**\n * A Label represents a caption for an item in a user interface. It is used to\n * provide a description or title for a form control, such as an input field,\n * checkbox, radio button, etc. The label is typically displayed next to the\n * form control and helps users understand its purpose.\n *\n * @see https://mantle.ngrok.com/components/label\n *\n * @example\n * ```tsx\n * <Label htmlFor=\"name\">\n *   Name: <Input type=\"text\" id=\"name\" />\n * </Label>\n *\n * <div className=\"flex items-center gap-2\">\n *   <Label htmlFor=\"name-2\">Name:</Label>\n *   <Input type=\"text\" id=\"name-2\" />\n * </div>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"label\">, LabelProps>(\n\t(\n\t\t{ \"aria-disabled\": _ariaDisabled, children, className, disabled, onMouseDown, ...props },\n\t\tref,\n\t) => (\n\t\t// biome-ignore lint/a11y/noLabelWithoutControl: this is a composable label component\n\t\t<label\n\t\t\taria-disabled={disabled ?? _ariaDisabled}\n\t\t\tclassName={cx(\n\t\t\t\t\"text-strong cursor-pointer text-sm peer-disabled:cursor-default has-disabled:cursor-default aria-disabled:cursor-default font-sans\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonMouseDown={(event) => {\n\t\t\t\t// only prevent text selection if clicking inside the label itself\n\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\tif (target.closest(\"button, input, select, textarea\")) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tonMouseDown?.(event);\n\n\t\t\t\t// prevent text selection when double clicking label\n\t\t\t\tif (!event.defaultPrevented && event.detail > 1) {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t}\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</label>\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport {\n\t//\n\tLabel,\n};\n"],"mappings":"wCAAA,OAAS,cAAAA,MAAkB,QAqCzB,cAAAC,MAAA,oBANF,IAAMC,EAAQC,EACb,CACC,CAAE,gBAAiBC,EAAe,SAAAC,EAAU,UAAAC,EAAW,SAAAC,EAAU,YAAAC,EAAa,GAAGC,CAAM,EACvFC,IAGAT,EAAC,SACA,gBAAeM,GAAYH,EAC3B,UAAWO,EACV,qIACAL,CACD,EACA,YAAcM,GAAU,CAERA,EAAM,OACV,QAAQ,iCAAiC,IAIpDJ,IAAcI,CAAK,EAGf,CAACA,EAAM,kBAAoBA,EAAM,OAAS,GAC7CA,EAAM,eAAe,EAEvB,EACA,IAAKF,EACJ,GAAGD,EAEH,SAAAJ,EACF,CAEF,EACAH,EAAM,YAAc","names":["forwardRef","jsx","Label","forwardRef","_ariaDisabled","children","className","disabled","onMouseDown","props","ref","cx","event"]}

package/dist/mantle.css

@@ -9,55 +9,55 @@
 MARK: FONT FACES
 */
 @font-face {
+	font-display: fallback;
 	font-family: "Roobert";
+	font-style: normal;
+	font-weight: 300 900;
 	src:
 		url("https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2")
 			format("woff2 supports variations"),
 		url("https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2")
 			format("woff2-variations");
-	font-weight: 300 900;
-	font-display: swap;
-	font-style: normal;
 }
 
 @font-face {
+	font-display: fallback;
 	font-family: "JetBrains Mono";
+	font-style: normal;
+	font-weight: 100 800;
 	src:
 		url("https://assets.ngrok.com/fonts/jetbrains/jetbrainsmono-wght.woff2")
 			format("woff2 supports variations"),
 		url("https://assets.ngrok.com/fonts/jetbrains/jetbrainsmono-wght.woff2")
 			format("woff2-variations");
-	font-weight: 100 800;
-	font-display: swap;
-	font-style: normal;
 }
 
 @font-face {
+	font-display: fallback;
 	font-family: "JetBrains Mono";
+	font-style: italic;
+	font-weight: 100 800;
 	src:
 		url("https://assets.ngrok.com/fonts/jetbrains/jetbrainsmono-italic-wght.woff2")
 			format("woff2 supports variations"),
 		url("https://assets.ngrok.com/fonts/jetbrains/jetbrainsmono-italic-wght.woff2")
 			format("woff2-variations");
-	font-weight: 100 800;
-	font-display: swap;
-	font-style: italic;
 }
 
 @font-face {
+	font-display: fallback;
 	font-family: "Family";
-	font-display: swap;
-	src: url("https://assets.ngrok.com/fonts/family/family-regular.woff2") format("woff2");
-	font-weight: normal;
 	font-style: normal;
+	font-weight: normal;
+	src: url("https://assets.ngrok.com/fonts/family/family-regular.woff2") format("woff2");
 }
 
 @font-face {
+	font-display: fallback;
 	font-family: "Family";
-	font-display: swap;
-	src: url("https://assets.ngrok.com/fonts/family/family-italic.woff2") format("woff2");
-	font-weight: normal;
 	font-style: italic;
+	font-weight: normal;
+	src: url("https://assets.ngrok.com/fonts/family/family-italic.woff2") format("woff2");
 }
 
 /**

package/dist/media-object.d.ts

@@ -44,7 +44,7 @@ declare const MediaObject: {
      * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`
      * components as direct children.
      *
-     * @see https://mantle.ngrok.com/components/media-object#api-media-object-root
+     * @see https://mantle.ngrok.com/components/media-object#mediaobjectroot
      *
      * @example
      * ```tsx
@@ -62,7 +62,7 @@ declare const MediaObject: {
     /**
      * The container for an image or icon to display in the media slot of the media object.
      *
-     * @see https://mantle.ngrok.com/components/media-object#api-media-object-media
+     * @see https://mantle.ngrok.com/components/media-object#mediaobjectmedia
      *
      * @example
      * ```tsx
@@ -80,7 +80,7 @@ declare const MediaObject: {
     /**
      * The container for the content slot of a media object.
      *
-     * @see https://mantle.ngrok.com/components/media-object#api-media-object-content
+     * @see https://mantle.ngrok.com/components/media-object#mediaobjectcontent
      *
      * @example
      * ```tsx

package/dist/media-object.js

@@ -1,2 +1,2 @@
-import{a as m}from"./chunk-ODDNPNLN.js";import{a as p}from"./chunk-PFXFESEN.js";import{forwardRef as r}from"react";import{jsx as i}from"react/jsx-runtime";var l=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("flex gap-4",o),style:n,children:t}));l.displayName="MediaObject";var d=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("shrink-0 leading-none",o),style:n,children:t}));d.displayName="MediaObjectMedia";var c=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("min-w-0 flex-1",o),style:n,children:t}));c.displayName="MediaObject.Content";var f={Root:l,Media:d,Content:c};export{f as MediaObject};
+import{a as m}from"./chunk-ADF5DAYG.js";import{a as p}from"./chunk-PFXFESEN.js";import{forwardRef as r}from"react";import{jsx as i}from"react/jsx-runtime";var l=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("flex gap-4",o),style:n,children:t}));l.displayName="MediaObject";var d=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("shrink-0 leading-none",o),style:n,children:t}));d.displayName="MediaObjectMedia";var c=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("min-w-0 flex-1",o),style:n,children:t}));c.displayName="MediaObject.Content";var f={Root:l,Media:d,Content:c};export{f as MediaObject};
 //# sourceMappingURL=media-object.js.map

package/dist/media-object.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/media-object/media-object.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype Props = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n */\nconst Root = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"flex gap-4\", className)} style={style}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"MediaObject\";\n\n/**\n * The container for an image or icon to display in the media slot of the media object.\n */\nconst Media = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"shrink-0 leading-none\", className)} style={style}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nMedia.displayName = \"MediaObjectMedia\";\n\n/**\n * The container for the content slot of a media object.\n */\nconst Content = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"min-w-0 flex-1\", className)} style={style}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nContent.displayName = \"MediaObject.Content\";\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n *\n * Change the spacing between the media and content by passing a `gap-*` class.\n * The default gap is `gap-4`.\n *\n * Use flexbox utilities to change the alignment of the media and content.\n *\n * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n * components as direct children.\n *\n * @see https://mantle.ngrok.com/components/media-object\n *\n * @example\n * ```tsx\n * <MediaObject.Root>\n *   <MediaObject.Media>\n *     <ExampleMedia />\n *   </MediaObject.Media>\n *   <MediaObject.Content>\n *     <p>Ea culpa id id ea minim labore.</p>\n *   </MediaObject.Content>\n * </MediaObject.Root>\n * ```\n */\nconst MediaObject = {\n\t/**\n\t * The media object is an image/icon (media) to the left, with descriptive\n\t * content (title and subtitle/description) to the right. This is the root\n\t * component of the media object.\n\t *\n\t * Change the spacing between the media and content by passing a `gap-*` class.\n\t * The default gap is `gap-4`.\n\t *\n\t * Use flexbox utilities to change the alignment of the media and content.\n\t *\n\t * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n\t * components as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for an image or icon to display in the media slot of the media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-media\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tMedia,\n\t/**\n\t * The container for the content slot of a media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tContent,\n} as const;\n\nexport {\n\t//,\n\tMediaObject,\n};\n"],"mappings":"gFACA,OAAS,cAAAA,MAAkB,QAiBxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,aAAcL,CAAS,EAAG,MAAOE,EAClE,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,cAKnB,IAAMS,EAAQR,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,wBAAyBL,CAAS,EAAG,MAAOE,EAC7E,SAAAD,EACF,CAGH,EACAK,EAAM,YAAc,mBAKpB,IAAMC,EAAUT,EACf,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,iBAAkBL,CAAS,EAAG,MAAOE,EACtE,SAAAD,EACF,CAGH,EACAM,EAAQ,YAAc,sBA6BtB,IAAMC,EAAc,CA4BnB,KAAAX,EAkBA,MAAAS,EAkBA,QAAAC,CACD","names":["forwardRef","jsx","Root","forwardRef","asChild","className","children","style","ref","Slot","cx","Media","Content","MediaObject"]}
+{"version":3,"sources":["../src/components/media-object/media-object.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype Props = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n */\nconst Root = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"flex gap-4\", className)} style={style}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"MediaObject\";\n\n/**\n * The container for an image or icon to display in the media slot of the media object.\n */\nconst Media = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"shrink-0 leading-none\", className)} style={style}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nMedia.displayName = \"MediaObjectMedia\";\n\n/**\n * The container for the content slot of a media object.\n */\nconst Content = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"min-w-0 flex-1\", className)} style={style}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nContent.displayName = \"MediaObject.Content\";\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n *\n * Change the spacing between the media and content by passing a `gap-*` class.\n * The default gap is `gap-4`.\n *\n * Use flexbox utilities to change the alignment of the media and content.\n *\n * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n * components as direct children.\n *\n * @see https://mantle.ngrok.com/components/media-object\n *\n * @example\n * ```tsx\n * <MediaObject.Root>\n *   <MediaObject.Media>\n *     <ExampleMedia />\n *   </MediaObject.Media>\n *   <MediaObject.Content>\n *     <p>Ea culpa id id ea minim labore.</p>\n *   </MediaObject.Content>\n * </MediaObject.Root>\n * ```\n */\nconst MediaObject = {\n\t/**\n\t * The media object is an image/icon (media) to the left, with descriptive\n\t * content (title and subtitle/description) to the right. This is the root\n\t * component of the media object.\n\t *\n\t * Change the spacing between the media and content by passing a `gap-*` class.\n\t * The default gap is `gap-4`.\n\t *\n\t * Use flexbox utilities to change the alignment of the media and content.\n\t *\n\t * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n\t * components as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#mediaobjectroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for an image or icon to display in the media slot of the media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#mediaobjectmedia\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tMedia,\n\t/**\n\t * The container for the content slot of a media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#mediaobjectcontent\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tContent,\n} as const;\n\nexport {\n\t//,\n\tMediaObject,\n};\n"],"mappings":"gFACA,OAAS,cAAAA,MAAkB,QAiBxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,aAAcL,CAAS,EAAG,MAAOE,EAClE,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,cAKnB,IAAMS,EAAQR,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,wBAAyBL,CAAS,EAAG,MAAOE,EAC7E,SAAAD,EACF,CAGH,EACAK,EAAM,YAAc,mBAKpB,IAAMC,EAAUT,EACf,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,iBAAkBL,CAAS,EAAG,MAAOE,EACtE,SAAAD,EACF,CAGH,EACAM,EAAQ,YAAc,sBA6BtB,IAAMC,EAAc,CA4BnB,KAAAX,EAkBA,MAAAS,EAkBA,QAAAC,CACD","names":["forwardRef","jsx","Root","forwardRef","asChild","className","children","style","ref","Slot","cx","Media","Content","MediaObject"]}

package/dist/pagination.d.ts

@@ -50,7 +50,7 @@ type CursorPageSizeValueProps = Omit<ComponentProps<"span">, "children"> & WithA
 /**
  * Displays the current page size when using cursor-based pagination as a read-only value.
  *
- * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-value
+ * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue
  *
  * @example
  * ```tsx
@@ -73,7 +73,7 @@ declare namespace PageSizeValue {
  * of data. It doesn't let you jump to a specific page or know how many total pages
  * there are, but it's more efficient for large or real-time data sets.
  *
- * @see https://mantle.ngrok.com/components/cursor-pagination
+ * @see https://mantle.ngrok.com/components/pagination
  *
  * @example
  * ```tsx
@@ -92,7 +92,7 @@ declare const CursorPagination: {
     /**
      * The root container of the cursor pagination component.
      *
-     * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-pagination
+     * @see https://mantle.ngrok.com/components/pagination#cursorpaginationroot
      *
      * @example
      * ```tsx
@@ -111,7 +111,7 @@ declare const CursorPagination: {
     /**
      * A pair of buttons for navigating between pages of data when using cursor-based pagination.
      *
-     * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-buttons
+     * @see https://mantle.ngrok.com/components/pagination#cursorpaginationbuttons
      *
      * @example
      * ```tsx
@@ -127,7 +127,7 @@ declare const CursorPagination: {
     /**
      * A select input for changing the number of items per page when using cursor-based pagination.
      *
-     * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-select
+     * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizeselect
      *
      * @example
      * ```tsx
@@ -141,7 +141,7 @@ declare const CursorPagination: {
     /**
      * Displays the current page size when using cursor-based pagination as a read-only value.
      *
-     * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-value
+     * @see https://mantle.ngrok.com/components/pagination#cursorpaginationpagesizevalue
      *
      * @example
      * ```tsx

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-KVXXQCAI.js";import{b as v}from"./chunk-LURP5WQR.js";import"./chunk-HKSO72E5.js";import{a as b}from"./chunk-OHPGAB7U.js";import{c as m}from"./chunk-U32WN4A7.js";import"./chunk-QWZXK2IF.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import{a as z}from"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as P}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as U}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as j}from"@phosphor-icons/react/CaretRight";import{createContext as k,forwardRef as c,useContext as y,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),x=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});x.displayName="CursorPagination";var h=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(b,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(U,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(v,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(j,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));h.displayName="CursorButtons";var E=[5,10,20,50,100],N=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=y(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});N.displayName="CursorPageSizeSelect";function O({asChild:r=!1,className:e,...a}){let t=y(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?z:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}O.displayName="CursorPageSizeValue";var F={Root:x,Buttons:h,PageSizeSelect:N,PageSizeValue:O};import{useEffect as T,useState as V}from"react";function W({listSize:r,pageSize:e}){let[a,t]=V(1),[i,o]=V(e);T(()=>{o(e),t(1)},[e]),T(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function B(u){let L=Math.max(1,Math.min(u,n));t(L)}function R(){d&&t(u=>Math.min(u+1,n))}function w(){C&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function M(){t(n)}function G(){t(1)}return{currentPage:a,goToFirstPage:G,goToLastPage:M,goToPage:B,hasNextPage:d,hasPreviousPage:C,nextPage:R,offset:g,pageSize:i,previousPage:w,setPageSize:I,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
+import{a as p}from"./chunk-ZS2HEB67.js";import{b as v}from"./chunk-MLXONRJD.js";import"./chunk-HKSO72E5.js";import{a as b}from"./chunk-OHPGAB7U.js";import"./chunk-W5A5HSFE.js";import{c as m}from"./chunk-CBRSMQ26.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import{a as z}from"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as P}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as U}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as j}from"@phosphor-icons/react/CaretRight";import{createContext as k,forwardRef as c,useContext as y,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),x=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});x.displayName="CursorPagination";var h=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(b,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(U,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(v,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(j,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));h.displayName="CursorButtons";var E=[5,10,20,50,100],N=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=y(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});N.displayName="CursorPageSizeSelect";function O({asChild:r=!1,className:e,...a}){let t=y(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?z:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}O.displayName="CursorPageSizeValue";var F={Root:x,Buttons:h,PageSizeSelect:N,PageSizeValue:O};import{useEffect as T,useState as V}from"react";function W({listSize:r,pageSize:e}){let[a,t]=V(1),[i,o]=V(e);T(()=>{o(e),t(1)},[e]),T(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function B(u){let L=Math.max(1,Math.min(u,n));t(L)}function R(){d&&t(u=>Math.min(u+1,n))}function w(){C&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function M(){t(n)}function G(){t(1)}return{currentPage:a,goToFirstPage:G,goToLastPage:M,goToPage:B,hasNextPage:d,hasPreviousPage:C,nextPage:R,offset:g,pageSize:i,previousPage:w,setPageSize:I,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map