@stokelp/ui 2.104.0 → 2.104.2

package/dist/components/checkbox-card/CheckboxCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxCard.js","names":[],"sources":["../../../src/components/checkbox-card/CheckboxCard.tsx"],"sourcesContent":["import { ark, Checkbox as ArkCheckbox, type CheckboxRootProps } from '@ark-ui/react'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { checkboxCard, type CheckboxCardVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, JsxStyleProps } from '@stokelp/styled-system/types'\nimport { ComponentProps, forwardRef } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { type CheckboxProps } from '~/components/checkbox'\nimport { CheckIcon, MinusIcon } from '~/shared/assets/icons'\n\ntype StyledCheckboxRootProps = Assign<JsxStyleProps, CheckboxRootProps>\n\nexport interface CheckboxCardProps extends Omit<StyledCheckboxRootProps, 'value'>, CheckboxCardVariantProps {\n  value?: string | number\n}\n\nconst { withProvider, withContext } = createStyleContext(checkboxCard, {\n  dataAttr: true,\n})\n\nconst CheckboxCardRoot = withProvider(styled(ArkCheckbox.Root))\n\nexport const CheckboxCardTitle = withContext(styled(ArkCheckbox.Label), 'title')\nexport const CheckboxCardContent = withContext(styled('div'), 'content')\nexport const CheckboxCardDescription = withContext(styled('p'), 'description')\nexport const CheckboxCardImage = withContext(styled(ark.img), 'image')\n\nexport type CheckboxCardTitleProps = ComponentProps<typeof CheckboxCardTitle>\nexport type CheckboxCardContentProps = ComponentProps<typeof CheckboxCardContent>\nexport type CheckboxCardDescriptionProps = ComponentProps<typeof CheckboxCardDescription>\nexport type CheckboxCardImageProps = ComponentProps<typeof CheckboxCardImage>\n\nexport const CheckboxCard = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {\n  const [variantProps, checkboxProps] = checkboxCard.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(checkboxProps)\n  const { children, className, ...rootProps } = localProps\n  const styles = checkboxCard(variantProps)\n\n  return (\n    <CheckboxCardRoot\n      ref={ref}\n      className={cx(styles.root, css(cssProps), className)}\n      {...rootProps}\n      value={rootProps.value as string | undefined}\n    >\n      <ArkCheckbox.Control className={styles.control}>\n        <ArkCheckbox.Indicator>\n          <CheckIcon />\n        </ArkCheckbox.Indicator>\n        <ArkCheckbox.Indicator indeterminate>\n          <MinusIcon />\n        </ArkCheckbox.Indicator>\n      </ArkCheckbox.Control>\n      {children}\n      <ArkCheckbox.HiddenInput />\n    </CheckboxCardRoot>\n  )\n})\n\nCheckboxCard.displayName = 'CheckboxCard'\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,GAAc,EACrE,UAAU,GACZ,CAAC,GAEK,IAAmB,EAAa,EAAO,EAAY,IAAI,CAAC,GAEjD,IAAoB,EAAY,EAAO,EAAY,KAAK,GAAG,OAAO,GAClE,IAAsB,EAAY,EAAO,KAAK,GAAG,SAAS,GAC1D,IAA0B,EAAY,EAAO,GAAG,GAAG,aAAa,GAChE,IAAoB,EAAY,EAAO,EAAI,GAAG,GAAG,OAAO,GAOxD,IAAe,GAA6C,GAAO,MAAQ;CACtF,IAAM,CAAC,GAAc,KAAiB,EAAa,kBAAkB,CAAK,GACpE,CAAC,GAAU,KAAc,EAAc,CAAa,GACpD,EAAE,aAAU,cAAW,GAAG,MAAc,GACxC,IAAS,EAAa,CAAY;CAExC,OACE,kBAAC,GAAD;EACO;EACL,WAAW,EAAG,EAAO,MAAM,EAAI,CAAQ,GAAG,CAAS;EACnD,GAAI;EACJ,OAAO,EAAU;YAJnB;GAME,kBAAC,EAAY,SAAb;IAAqB,WAAW,EAAO;cAAvC,CACE,kBAAC,EAAY,WAAb,EAAA,UACE,kBAAC,GAAD,CAAY,CAAA,EACS,CAAA,GACvB,kBAAC,EAAY,WAAb;KAAuB,eAAA;eACrB,kBAAC,GAAD,CAAY,CAAA;IACS,CAAA,CACJ;;GACpB;GACD,kBAAC,EAAY,aAAb,CAA0B,CAAA;EACV;;AAEtB,CAAC;AAED,EAAa,cAAc"}
+{"version":3,"file":"CheckboxCard.js","names":[],"sources":["../../../src/components/checkbox-card/CheckboxCard.tsx"],"sourcesContent":["import { ark, Checkbox as ArkCheckbox, type CheckboxRootProps } from '@ark-ui/react'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { checkboxCard, type CheckboxCardVariantProps } from '@stokelp/styled-system/recipes'\nimport type { Assign, JsxStyleProps, StyledComponent } from '@stokelp/styled-system/types'\nimport { ComponentProps, forwardRef, type JSX } from 'react'\nimport { createStyleContext } from '~/utils/slots'\nimport { type CheckboxProps } from '~/components/checkbox'\nimport { CheckIcon, MinusIcon } from '~/shared/assets/icons'\n\ntype StyledCheckboxRootProps = Assign<JsxStyleProps, CheckboxRootProps>\n\nexport interface CheckboxCardProps extends Omit<StyledCheckboxRootProps, 'value'>, CheckboxCardVariantProps {\n  value?: string | number\n}\n\nconst { withProvider, withContext } = createStyleContext(checkboxCard, {\n  dataAttr: true,\n})\n\n// See Table.tsx for why we pin the literal tag.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nconst CheckboxCardRoot = withProvider(styled(ArkCheckbox.Root))\n\nexport const CheckboxCardTitle = withContext(styled(ArkCheckbox.Label), 'title')\nexport const CheckboxCardContent = withContext(styledTag('div'), 'content')\nexport const CheckboxCardDescription = withContext(styledTag('p'), 'description')\nexport const CheckboxCardImage = withContext(styled(ark.img), 'image')\n\nexport type CheckboxCardTitleProps = ComponentProps<typeof CheckboxCardTitle>\nexport type CheckboxCardContentProps = ComponentProps<typeof CheckboxCardContent>\nexport type CheckboxCardDescriptionProps = ComponentProps<typeof CheckboxCardDescription>\nexport type CheckboxCardImageProps = ComponentProps<typeof CheckboxCardImage>\n\nexport const CheckboxCard = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {\n  const [variantProps, checkboxProps] = checkboxCard.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(checkboxProps)\n  const { children, className, ...rootProps } = localProps\n  const styles = checkboxCard(variantProps)\n\n  return (\n    <CheckboxCardRoot\n      ref={ref}\n      className={cx(styles.root, css(cssProps), className)}\n      {...rootProps}\n      value={rootProps.value as string | undefined}\n    >\n      <ArkCheckbox.Control className={styles.control}>\n        <ArkCheckbox.Indicator>\n          <CheckIcon />\n        </ArkCheckbox.Indicator>\n        <ArkCheckbox.Indicator indeterminate>\n          <MinusIcon />\n        </ArkCheckbox.Indicator>\n      </ArkCheckbox.Control>\n      {children}\n      <ArkCheckbox.HiddenInput />\n    </CheckboxCardRoot>\n  )\n})\n\nCheckboxCard.displayName = 'CheckboxCard'\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,GAAc,EACrE,UAAU,GACZ,CAAC,GAGK,KAAoD,MACxD,EAAO,CAAG,GAEN,IAAmB,EAAa,EAAO,EAAY,IAAI,CAAC,GAEjD,IAAoB,EAAY,EAAO,EAAY,KAAK,GAAG,OAAO,GAClE,IAAsB,EAAY,EAAU,KAAK,GAAG,SAAS,GAC7D,IAA0B,EAAY,EAAU,GAAG,GAAG,aAAa,GACnE,IAAoB,EAAY,EAAO,EAAI,GAAG,GAAG,OAAO,GAOxD,IAAe,GAA6C,GAAO,MAAQ;CACtF,IAAM,CAAC,GAAc,KAAiB,EAAa,kBAAkB,CAAK,GACpE,CAAC,GAAU,KAAc,EAAc,CAAa,GACpD,EAAE,aAAU,cAAW,GAAG,MAAc,GACxC,IAAS,EAAa,CAAY;CAExC,OACE,kBAAC,GAAD;EACO;EACL,WAAW,EAAG,EAAO,MAAM,EAAI,CAAQ,GAAG,CAAS;EACnD,GAAI;EACJ,OAAO,EAAU;YAJnB;GAME,kBAAC,EAAY,SAAb;IAAqB,WAAW,EAAO;cAAvC,CACE,kBAAC,EAAY,WAAb,EAAA,UACE,kBAAC,GAAD,CAAY,CAAA,EACS,CAAA,GACvB,kBAAC,EAAY,WAAb;KAAuB,eAAA;eACrB,kBAAC,GAAD,CAAY,CAAA;IACS,CAAA,CACJ;;GACpB;GACD,kBAAC,EAAY,aAAb,CAA0B,CAAA;EACV;;AAEtB,CAAC;AAED,EAAa,cAAc"}

package/dist/components/chip/Chip.d.ts

@@ -4,7 +4,7 @@ import { StyledComponent } from '@stokelp/styled-system/types';
 import { PolymorphicProps } from '@ark-ui/react';
 import { ChipRecipe } from '@stokelp/styled-system/recipes';
 export declare const Chip: ComponentVariants<StyledComponent<ForwardRefExoticComponent< ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & PolymorphicProps>, {}>, ChipRecipe>;
-export declare const ChipAvatar: StyledComponent<"img", {}>;
+export declare const ChipAvatar: StyledComponent<string, {}>;
 export declare const ChipLabel: StyledComponent<ForwardRefExoticComponent< ClassAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & PolymorphicProps>, {}>;
 export declare const ChipClearTrigger: StyledComponent<ForwardRefExoticComponent< ClassAttributes<HTMLButtonElement> & ButtonHTMLAttributes<HTMLButtonElement> & PolymorphicProps>, {}>;
 export interface ChipProps extends ComponentProps<typeof Chip> {

package/dist/components/drawer/Drawer.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../utils/slots.cjs"),t=require("../icon-button/IconButton.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("usehooks-ts"),c=require("@stokelp/styled-system/tokens");var{withProvider:l,withContext:u}=e.createStyleContext(i.drawer),d=l(n.Dialog.Root,void 0,{defaultProps:{unmountOnExit:!0,lazyMount:!0}}),f=u((0,r.styled)(n.ark.main),`body`),p=u((0,r.styled)(n.Dialog.CloseTrigger),`closeTrigger`),m=u((0,r.styled)(n.ark.footer),`footer`),h=(0,a.forwardRef)(({children:e,showCloseTrigger:r=!0,...i},a)=>(0,o.jsxs)(n.ark.header,{...i,ref:a,children:[e,r&&(0,o.jsx)(p,{asChild:!0,children:(0,o.jsx)(t.IconButton,{ml:`auto`,"aria-label":`close`,variant:`tertiary`,children:(0,o.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,o.jsx)(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z`,fill:`currentColor`})})})})]}));h.displayName=`DrawerHeader`;var g=u(h,`header`),_=u((0,r.styled)(n.Dialog.Title),`title`),v=u((0,r.styled)(n.Dialog.Trigger),`trigger`),y=u((0,r.styled)(n.Dialog.Positioner),`positioner`),b=u((0,r.styled)(n.Dialog.Backdrop),`backdrop`),x=(0,a.forwardRef)(({children:e,...t},r)=>{let i=(0,s.useMediaQuery)(`(max-width: ${(0,c.token)(`breakpoints.md`)})`,{defaultValue:!1}),{open:l,getContentProps:u}=(0,n.useDialogContext)();return(0,a.useLayoutEffect)(()=>{if(!l)return;let{id:e}=u();if(!e)return;let t=document.getElementById(e);if(t){let e=t.querySelector(`footer`);e&&(i?t.style.setProperty(`--footer-height`,`${Math.ceil(e.clientHeight)}px`):t.style.setProperty(`--footer-height`,`70px`))}},[l,i]),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(b,{}),(0,o.jsx)(y,{children:(0,o.jsx)(n.Dialog.Content,{ref:r,...t,children:e})})]})});x.displayName=n.Dialog.Content.displayName;var S=u((0,r.styled)(x),`content`),C=n.Dialog.Context;exports.Drawer=d,exports.DrawerBody=f,exports.DrawerCloseTrigger=p,exports.DrawerContent=S,exports.DrawerContext=C,exports.DrawerFooter=m,exports.DrawerHeader=g,exports.DrawerTitle=_,exports.DrawerTrigger=v;
+"use client";const e=require("../../utils/slots.cjs"),t=require("../icon-button/IconButton.cjs");let n=require("@ark-ui/react"),r=require("@stokelp/styled-system/jsx"),i=require("@stokelp/styled-system/recipes"),a=require("react"),o=require("react/jsx-runtime"),s=require("usehooks-ts"),c=require("@stokelp/styled-system/tokens");var{withProvider:l,withContext:u}=e.createStyleContext(i.drawer),d=l(n.Dialog.Root,void 0,{defaultProps:{unmountOnExit:!0,lazyMount:!0}}),f=u((0,r.styled)(n.ark.main),`body`),p=u((0,r.styled)(n.Dialog.CloseTrigger),`closeTrigger`),m=u((0,r.styled)(n.ark.footer),`footer`),h=(0,a.forwardRef)(({children:e,showCloseTrigger:r=!0,...i},a)=>(0,o.jsxs)(n.ark.header,{...i,ref:a,children:[e,r&&(0,o.jsx)(p,{asChild:!0,children:(0,o.jsx)(t.IconButton,{ml:`auto`,"aria-label":`close`,variant:`tertiary`,children:(0,o.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,o.jsx)(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z`,fill:`currentColor`})})})})]}));h.displayName=`DrawerHeader`;var g=u(h,`header`),_=u((0,r.styled)(n.Dialog.Title),`title`),v=u((0,r.styled)(n.Dialog.Trigger),`trigger`),y=u((0,r.styled)(n.Dialog.Positioner),`positioner`),b=u((0,r.styled)(n.Dialog.Backdrop),`backdrop`),x=(0,a.forwardRef)(({children:e,...t},r)=>{let i=(0,s.useMediaQuery)(`(max-width: ${(0,c.token)(`breakpoints.md`)})`,{defaultValue:!1}),{open:l,getContentProps:u}=(0,n.useDialogContext)();return(0,a.useLayoutEffect)(()=>{if(!l)return;let{id:e}=u();if(!e)return;let t=document.getElementById(e);if(t){let e=t.querySelector(`footer`);e&&(i?t.style.setProperty(`--footer-height`,`${Math.ceil(e.clientHeight)}px`):t.style.setProperty(`--footer-height`,`70px`))}},[l,i]),(0,a.useEffect)(()=>{if(process.env.NODE_ENV===`production`||l)return;let e=window.setTimeout(()=>{let e=document.body;document.querySelector(`[data-scope="dialog"][data-state="open"]`)||(e.style.pointerEvents===`none`&&(e.style.pointerEvents=``),e.hasAttribute(`data-inert`)&&e.removeAttribute(`data-inert`),e.getAttribute(`style`)===``&&e.removeAttribute(`style`))},350);return()=>window.clearTimeout(e)},[l]),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(b,{}),(0,o.jsx)(y,{children:(0,o.jsx)(n.Dialog.Content,{ref:r,...t,children:e})})]})});x.displayName=n.Dialog.Content.displayName;var S=u((0,r.styled)(x),`content`),C=n.Dialog.Context;exports.Drawer=d,exports.DrawerBody=f,exports.DrawerCloseTrigger=p,exports.DrawerContent=S,exports.DrawerContext=C,exports.DrawerFooter=m,exports.DrawerHeader=g,exports.DrawerTitle=_,exports.DrawerTrigger=v;
 //# sourceMappingURL=Drawer.cjs.map

package/dist/components/drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":"0UAUA,GAAM,CAAE,eAAc,eAAgB,EAAA,mBAAmB,EAAA,MAAM,EAElD,EAAS,EAAa,EAAA,OAAU,KAAM,IAAA,GAAW,CAC5D,aAAc,CACZ,cAAe,GACf,UAAW,EACb,CACF,CAAC,EACY,EAAa,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,IAAI,EAAG,MAAM,EACjD,EAAqB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,YAAY,EAAG,cAAc,EAC/E,EAAe,GAAA,EAAA,EAAA,QAAmB,EAAA,IAAI,MAAM,EAAG,QAAQ,EAM9D,GAAA,EAAA,EAAA,aACH,CAAE,WAAU,mBAAmB,GAAM,GAAG,GAAS,KAChD,EAAA,EAAA,MAAC,EAAA,IAAI,OAAL,CAAY,GAAI,EAAY,eAA5B,CACG,EACA,IACC,EAAA,EAAA,KAAC,EAAD,CAAoB,QAAA,aAClB,EAAA,EAAA,KAAC,EAAA,WAAD,CAAY,GAAG,OAAO,aAAW,QAAQ,QAAQ,qBAC/C,EAAA,EAAA,KAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,uCAChE,EAAA,EAAA,KAAC,OAAD,CACE,SAAS,UACT,SAAS,UACT,EAAE,4fACF,KAAK,cACN,CAAA,CACE,CAAA,CACK,CAAA,CACM,CAAA,CAEZ,GAEhB,EACA,EAAO,YAAc,eAErB,IAAa,EAAe,EAAY,EAAQ,QAAQ,EAC3C,EAAc,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,KAAK,EAAG,OAAO,EAC1D,EAAgB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,OAAO,EAAG,SAAS,EAEvE,EAAmB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,UAAU,EAAG,YAAY,EACzE,EAAiB,GAAA,EAAA,EAAA,QAAmB,EAAA,OAAU,QAAQ,EAAG,UAAU,EAEnE,GAAA,EAAA,EAAA,aACH,CAAE,WAAU,GAAG,GAAS,IAAQ,CAC/B,IAAM,GAAA,EAAA,EAAA,eAAyB,gBAAA,EAAA,EAAA,OAAqB,gBAAgB,EAAE,GAAI,CACxE,aAAc,EAChB,CAAC,EACK,CAAE,OAAM,oBAAA,EAAA,EAAA,kBAAqC,EAmBnD,OAjBA,EAAA,EAAA,qBAAsB,CACpB,GAAI,CAAC,EAAM,OACX,GAAM,CAAE,MAAO,EAAgB,EAC/B,GAAI,CAAC,EAAI,OACT,IAAM,EAAW,SAAS,eAAe,CAAE,EAC3C,GAAI,EAAU,CACZ,IAAM,EAAU,EAAS,cAAc,QAAQ,EAC3C,IACE,EACF,EAAS,MAAM,YAAY,kBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,EAEpF,EAAS,MAAM,YAAY,kBAAmB,MAAM,EAG1D,CACF,EAAG,CAAC,EAAM,CAAQ,CAAC,GAGjB,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,KAAC,EAAD,CAAiB,CAAA,GACjB,EAAA,EAAA,KAAC,EAAD,CAAA,UACE,EAAA,EAAA,KAAC,EAAA,OAAU,QAAX,CAAwB,MAAK,GAAI,EAC9B,UACgB,CAAA,CACH,CAAA,CAClB,CAAA,CAAA,CAEN,CACF,EACA,EAAQ,YAAc,EAAA,OAAU,QAAQ,YAExC,IAAa,EAAgB,GAAA,EAAA,EAAA,QAAmB,CAAO,EAAG,SAAS,EACtD,EAAgB,EAAA,OAAU"}
+{"version":3,"file":"Drawer.cjs","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    // Workaround: in React StrictMode (Next.js dev), @zag-js/dismissable's\n    // disablePointerEventsOutside cleanup can leave `<body>` with\n    // `pointer-events: none` / `data-inert`, freezing the page after close.\n    // Gated inside the effect body so consumer bundlers DCE it in production.\n    useEffect(() => {\n      if (process.env.NODE_ENV === 'production') return\n      if (open) return\n      const id = window.setTimeout(() => {\n        const body = document.body\n        const stillOpen = document.querySelector('[data-scope=\"dialog\"][data-state=\"open\"]')\n        if (stillOpen) return\n        if (body.style.pointerEvents === 'none') body.style.pointerEvents = ''\n        if (body.hasAttribute('data-inert')) body.removeAttribute('data-inert')\n        if (body.getAttribute('style') === '') body.removeAttribute('style')\n      }, 350)\n      return () => window.clearTimeout(id)\n    }, [open])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":"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"}

package/dist/components/drawer/Drawer.js

@@ -4,30 +4,30 @@ import { IconButton as t } from "../icon-button/IconButton.js";
 import { Dialog as n, ark as r, useDialogContext as i } from "@ark-ui/react";
 import { styled as a } from "@stokelp/styled-system/jsx";
 import { drawer as o } from "@stokelp/styled-system/recipes";
-import { forwardRef as s, useLayoutEffect as c } from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useMediaQuery as f } from "usehooks-ts";
-import { token as p } from "@stokelp/styled-system/tokens";
+import { forwardRef as s, useEffect as c, useLayoutEffect as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { useMediaQuery as p } from "usehooks-ts";
+import { token as m } from "@stokelp/styled-system/tokens";
 //#region src/components/drawer/Drawer.tsx
-var { withProvider: m, withContext: h } = e(o), g = m(n.Root, void 0, { defaultProps: {
+var { withProvider: h, withContext: g } = e(o), _ = h(n.Root, void 0, { defaultProps: {
 	unmountOnExit: !0,
 	lazyMount: !0
-} }), _ = h(a(r.main), "body"), v = h(a(n.CloseTrigger), "closeTrigger"), y = h(a(r.footer), "footer"), b = s(({ children: e, showCloseTrigger: n = !0, ...i }, a) => /* @__PURE__ */ d(r.header, {
+} }), v = g(a(r.main), "body"), y = g(a(n.CloseTrigger), "closeTrigger"), b = g(a(r.footer), "footer"), x = s(({ children: e, showCloseTrigger: n = !0, ...i }, a) => /* @__PURE__ */ f(r.header, {
 	...i,
 	ref: a,
-	children: [e, n && /* @__PURE__ */ u(v, {
+	children: [e, n && /* @__PURE__ */ d(y, {
 		asChild: !0,
-		children: /* @__PURE__ */ u(t, {
+		children: /* @__PURE__ */ d(t, {
 			ml: "auto",
 			"aria-label": "close",
 			variant: "tertiary",
-			children: /* @__PURE__ */ u("svg", {
+			children: /* @__PURE__ */ d("svg", {
 				width: "16",
 				height: "16",
 				viewBox: "0 0 16 16",
 				fill: "none",
 				xmlns: "http://www.w3.org/2000/svg",
-				children: /* @__PURE__ */ u("path", {
+				children: /* @__PURE__ */ d("path", {
 					fillRule: "evenodd",
 					clipRule: "evenodd",
 					d: "M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z",
@@ -37,10 +37,10 @@ var { withProvider: m, withContext: h } = e(o), g = m(n.Root, void 0, { defaultP
 		})
 	})]
 }));
-b.displayName = "DrawerHeader";
-var x = h(b, "header"), S = h(a(n.Title), "title"), C = h(a(n.Trigger), "trigger"), w = h(a(n.Positioner), "positioner"), T = h(a(n.Backdrop), "backdrop"), E = s(({ children: e, ...t }, r) => {
-	let a = f(`(max-width: ${p("breakpoints.md")})`, { defaultValue: !1 }), { open: o, getContentProps: s } = i();
-	return c(() => {
+x.displayName = "DrawerHeader";
+var S = g(x, "header"), C = g(a(n.Title), "title"), w = g(a(n.Trigger), "trigger"), T = g(a(n.Positioner), "positioner"), E = g(a(n.Backdrop), "backdrop"), D = s(({ children: e, ...t }, r) => {
+	let a = p(`(max-width: ${m("breakpoints.md")})`, { defaultValue: !1 }), { open: o, getContentProps: s } = i();
+	return l(() => {
 		if (!o) return;
 		let { id: e } = s();
 		if (!e) return;
@@ -49,15 +49,22 @@ var x = h(b, "header"), S = h(a(n.Title), "title"), C = h(a(n.Trigger), "trigger
 			let e = t.querySelector("footer");
 			e && (a ? t.style.setProperty("--footer-height", `${Math.ceil(e.clientHeight)}px`) : t.style.setProperty("--footer-height", "70px"));
 		}
-	}, [o, a]), /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(T, {}), /* @__PURE__ */ u(w, { children: /* @__PURE__ */ u(n.Content, {
+	}, [o, a]), c(() => {
+		if (process.env.NODE_ENV === "production" || o) return;
+		let e = window.setTimeout(() => {
+			let e = document.body;
+			document.querySelector("[data-scope=\"dialog\"][data-state=\"open\"]") || (e.style.pointerEvents === "none" && (e.style.pointerEvents = ""), e.hasAttribute("data-inert") && e.removeAttribute("data-inert"), e.getAttribute("style") === "" && e.removeAttribute("style"));
+		}, 350);
+		return () => window.clearTimeout(e);
+	}, [o]), /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(E, {}), /* @__PURE__ */ d(T, { children: /* @__PURE__ */ d(n.Content, {
 		ref: r,
 		...t,
 		children: e
 	}) })] });
 });
-E.displayName = n.Content.displayName;
-var D = h(a(E), "content"), O = n.Context;
+D.displayName = n.Content.displayName;
+var O = g(a(D), "content"), k = n.Context;
 //#endregion
-export { g as Drawer, _ as DrawerBody, v as DrawerCloseTrigger, D as DrawerContent, O as DrawerContext, y as DrawerFooter, x as DrawerHeader, S as DrawerTitle, C as DrawerTrigger };
+export { _ as Drawer, v as DrawerBody, y as DrawerCloseTrigger, O as DrawerContent, k as DrawerContext, b as DrawerFooter, S as DrawerHeader, C as DrawerTitle, w as DrawerTrigger };
 
 //# sourceMappingURL=Drawer.js.map

package/dist/components/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,CAAM,GAElD,IAAS,EAAa,EAAU,MAAM,KAAA,GAAW,EAC5D,cAAc;CACZ,eAAe;CACf,WAAW;AACb,EACF,CAAC,GACY,IAAa,EAAY,EAAO,EAAI,IAAI,GAAG,MAAM,GACjD,IAAqB,EAAY,EAAO,EAAU,YAAY,GAAG,cAAc,GAC/E,IAAe,EAAY,EAAO,EAAI,MAAM,GAAG,QAAQ,GAM9D,IAAS,GACZ,EAAE,aAAU,sBAAmB,IAAM,GAAG,KAAS,MAChD,kBAAC,EAAI,QAAL;CAAY,GAAI;CAAY;WAA5B,CACG,GACA,KACC,kBAAC,GAAD;EAAoB,SAAA;YAClB,kBAAC,GAAD;GAAY,IAAG;GAAO,cAAW;GAAQ,SAAQ;aAC/C,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,OAAM;cAChE,kBAAC,QAAD;KACE,UAAS;KACT,UAAS;KACT,GAAE;KACF,MAAK;IACN,CAAA;GACE,CAAA;EACK,CAAA;CACM,CAAA,CAEZ;EAEhB;AACA,EAAO,cAAc;AAErB,IAAa,IAAe,EAAY,GAAQ,QAAQ,GAC3C,IAAc,EAAY,EAAO,EAAU,KAAK,GAAG,OAAO,GAC1D,IAAgB,EAAY,EAAO,EAAU,OAAO,GAAG,SAAS,GAEvE,IAAmB,EAAY,EAAO,EAAU,UAAU,GAAG,YAAY,GACzE,IAAiB,EAAY,EAAO,EAAU,QAAQ,GAAG,UAAU,GAEnE,IAAU,GACb,EAAE,aAAU,GAAG,KAAS,MAAQ;CAC/B,IAAM,IAAW,EAAc,eAAe,EAAM,gBAAgB,EAAE,IAAI,EACxE,cAAc,GAChB,CAAC,GACK,EAAE,SAAM,uBAAoB,EAAiB;CAmBnD,OAjBA,QAAsB;EACpB,IAAI,CAAC,GAAM;EACX,IAAM,EAAE,UAAO,EAAgB;EAC/B,IAAI,CAAC,GAAI;EACT,IAAM,IAAW,SAAS,eAAe,CAAE;EAC3C,IAAI,GAAU;GACZ,IAAM,IAAU,EAAS,cAAc,QAAQ;GAC/C,AAAI,MACE,IACF,EAAS,MAAM,YAAY,mBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,IAEpF,EAAS,MAAM,YAAY,mBAAmB,MAAM;EAG1D;CACF,GAAG,CAAC,GAAM,CAAQ,CAAC,GAGjB,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,CAAiB,CAAA,GACjB,kBAAC,GAAD,EAAA,UACE,kBAAC,EAAU,SAAX;EAAwB;EAAK,GAAI;EAC9B;CACgB,CAAA,EACH,CAAA,CAClB,EAAA,CAAA;AAEN,CACF;AACA,EAAQ,cAAc,EAAU,QAAQ;AAExC,IAAa,IAAgB,EAAY,EAAO,CAAO,GAAG,SAAS,GACtD,IAAgB,EAAU"}
+{"version":3,"file":"Drawer.js","names":[],"sources":["../../../src/components/drawer/Drawer.tsx"],"sourcesContent":["import { ark, Dialog as ArkDrawer, useDialogContext } from '@ark-ui/react'\nimport { useMediaQuery } from 'usehooks-ts'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { drawer } from '@stokelp/styled-system/recipes'\nimport { token } from '@stokelp/styled-system/tokens'\nimport { ComponentProps, ComponentPropsWithoutRef, ElementRef, forwardRef, useEffect, useLayoutEffect } from 'react'\n\nimport { createStyleContext } from '~/utils/slots'\nimport { IconButton } from '~/components/icon-button'\n\nconst { withProvider, withContext } = createStyleContext(drawer)\n\nexport const Drawer = withProvider(ArkDrawer.Root, undefined, {\n  defaultProps: {\n    unmountOnExit: true,\n    lazyMount: true,\n  },\n})\nexport const DrawerBody = withContext(styled(ark.main), 'body')\nexport const DrawerCloseTrigger = withContext(styled(ArkDrawer.CloseTrigger), 'closeTrigger')\nexport const DrawerFooter = withContext(styled(ark.footer), 'footer')\n\ntype HeaderProps = ComponentPropsWithoutRef<typeof ark.header> & {\n  showCloseTrigger?: boolean\n}\n\nconst Header = forwardRef<ElementRef<typeof ark.header>, HeaderProps>(\n  ({ children, showCloseTrigger = true, ...props }, ref) => (\n    <ark.header {...props} ref={ref}>\n      {children}\n      {showCloseTrigger && (\n        <DrawerCloseTrigger asChild>\n          <IconButton ml=\"auto\" aria-label=\"close\" variant=\"tertiary\">\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </IconButton>\n        </DrawerCloseTrigger>\n      )}\n    </ark.header>\n  ),\n)\nHeader.displayName = 'DrawerHeader'\n\nexport const DrawerHeader = withContext(Header, 'header')\nexport const DrawerTitle = withContext(styled(ArkDrawer.Title), 'title')\nexport const DrawerTrigger = withContext(styled(ArkDrawer.Trigger), 'trigger')\n\nconst DrawerPositioner = withContext(styled(ArkDrawer.Positioner), 'positioner')\nconst DrawerBackdrop = withContext(styled(ArkDrawer.Backdrop), 'backdrop')\n\nconst Content = forwardRef<ElementRef<typeof ArkDrawer.Content>, ComponentPropsWithoutRef<typeof ArkDrawer.Content>>(\n  ({ children, ...props }, ref) => {\n    const isMobile = useMediaQuery(`(max-width: ${token('breakpoints.md')})`, {\n      defaultValue: false,\n    })\n    const { open, getContentProps } = useDialogContext()\n\n    useLayoutEffect(() => {\n      if (!open) return\n      const { id } = getContentProps()\n      if (!id) return\n      const $content = document.getElementById(id)\n      if ($content) {\n        const $footer = $content.querySelector('footer')\n        if ($footer) {\n          if (isMobile) {\n            $content.style.setProperty('--footer-height', `${Math.ceil($footer.clientHeight)}px`)\n          } else {\n            $content.style.setProperty('--footer-height', `70px`)\n          }\n        }\n      }\n    }, [open, isMobile])\n\n    // Workaround: in React StrictMode (Next.js dev), @zag-js/dismissable's\n    // disablePointerEventsOutside cleanup can leave `<body>` with\n    // `pointer-events: none` / `data-inert`, freezing the page after close.\n    // Gated inside the effect body so consumer bundlers DCE it in production.\n    useEffect(() => {\n      if (process.env.NODE_ENV === 'production') return\n      if (open) return\n      const id = window.setTimeout(() => {\n        const body = document.body\n        const stillOpen = document.querySelector('[data-scope=\"dialog\"][data-state=\"open\"]')\n        if (stillOpen) return\n        if (body.style.pointerEvents === 'none') body.style.pointerEvents = ''\n        if (body.hasAttribute('data-inert')) body.removeAttribute('data-inert')\n        if (body.getAttribute('style') === '') body.removeAttribute('style')\n      }, 350)\n      return () => window.clearTimeout(id)\n    }, [open])\n\n    return (\n      <>\n        <DrawerBackdrop />\n        <DrawerPositioner>\n          <ArkDrawer.Content ref={ref} {...props}>\n            {children}\n          </ArkDrawer.Content>\n        </DrawerPositioner>\n      </>\n    )\n  },\n)\nContent.displayName = ArkDrawer.Content.displayName\n\nexport const DrawerContent = withContext(styled(Content), 'content')\nexport const DrawerContext = ArkDrawer.Context\n\nexport interface DrawerProps extends ComponentProps<typeof Drawer> {}\nexport interface DrawerBackdropProps extends ComponentProps<typeof DrawerBackdrop> {}\nexport interface DrawerBodyProps extends ComponentProps<typeof DrawerBody> {}\nexport interface DrawerCloseTriggerProps extends ComponentProps<typeof DrawerCloseTrigger> {}\nexport interface DrawerContentProps extends ComponentProps<typeof DrawerContent> {}\nexport interface DrawerFooterProps extends ComponentProps<typeof DrawerFooter> {}\nexport interface DrawerHeaderProps extends ComponentProps<typeof DrawerHeader> {}\nexport interface DrawerPositionerProps extends ComponentProps<typeof DrawerPositioner> {}\nexport interface DrawerTitleProps extends ComponentProps<typeof DrawerTitle> {}\nexport interface DrawerTriggerProps extends ComponentProps<typeof DrawerTrigger> {}\nexport interface DrawerContextProps extends ComponentProps<typeof DrawerContext> {}\n"],"mappings":";;;;;;;;;;;AAUA,IAAM,EAAE,iBAAc,mBAAgB,EAAmB,CAAM,GAElD,IAAS,EAAa,EAAU,MAAM,KAAA,GAAW,EAC5D,cAAc;CACZ,eAAe;CACf,WAAW;AACb,EACF,CAAC,GACY,IAAa,EAAY,EAAO,EAAI,IAAI,GAAG,MAAM,GACjD,IAAqB,EAAY,EAAO,EAAU,YAAY,GAAG,cAAc,GAC/E,IAAe,EAAY,EAAO,EAAI,MAAM,GAAG,QAAQ,GAM9D,IAAS,GACZ,EAAE,aAAU,sBAAmB,IAAM,GAAG,KAAS,MAChD,kBAAC,EAAI,QAAL;CAAY,GAAI;CAAY;WAA5B,CACG,GACA,KACC,kBAAC,GAAD;EAAoB,SAAA;YAClB,kBAAC,GAAD;GAAY,IAAG;GAAO,cAAW;GAAQ,SAAQ;aAC/C,kBAAC,OAAD;IAAK,OAAM;IAAK,QAAO;IAAK,SAAQ;IAAY,MAAK;IAAO,OAAM;cAChE,kBAAC,QAAD;KACE,UAAS;KACT,UAAS;KACT,GAAE;KACF,MAAK;IACN,CAAA;GACE,CAAA;EACK,CAAA;CACM,CAAA,CAEZ;EAEhB;AACA,EAAO,cAAc;AAErB,IAAa,IAAe,EAAY,GAAQ,QAAQ,GAC3C,IAAc,EAAY,EAAO,EAAU,KAAK,GAAG,OAAO,GAC1D,IAAgB,EAAY,EAAO,EAAU,OAAO,GAAG,SAAS,GAEvE,IAAmB,EAAY,EAAO,EAAU,UAAU,GAAG,YAAY,GACzE,IAAiB,EAAY,EAAO,EAAU,QAAQ,GAAG,UAAU,GAEnE,IAAU,GACb,EAAE,aAAU,GAAG,KAAS,MAAQ;CAC/B,IAAM,IAAW,EAAc,eAAe,EAAM,gBAAgB,EAAE,IAAI,EACxE,cAAc,GAChB,CAAC,GACK,EAAE,SAAM,uBAAoB,EAAiB;CAqCnD,OAnCA,QAAsB;EACpB,IAAI,CAAC,GAAM;EACX,IAAM,EAAE,UAAO,EAAgB;EAC/B,IAAI,CAAC,GAAI;EACT,IAAM,IAAW,SAAS,eAAe,CAAE;EAC3C,IAAI,GAAU;GACZ,IAAM,IAAU,EAAS,cAAc,QAAQ;GAC/C,AAAI,MACE,IACF,EAAS,MAAM,YAAY,mBAAmB,GAAG,KAAK,KAAK,EAAQ,YAAY,EAAE,GAAG,IAEpF,EAAS,MAAM,YAAY,mBAAmB,MAAM;EAG1D;CACF,GAAG,CAAC,GAAM,CAAQ,CAAC,GAMnB,QAAgB;EAEd,IADA,QAAA,IAAA,aAA6B,gBACzB,GAAM;EACV,IAAM,IAAK,OAAO,iBAAiB;GACjC,IAAM,IAAO,SAAS;GACJ,SAAS,cAAc,8CACrC,MACA,EAAK,MAAM,kBAAkB,WAAQ,EAAK,MAAM,gBAAgB,KAChE,EAAK,aAAa,YAAY,KAAG,EAAK,gBAAgB,YAAY,GAClE,EAAK,aAAa,OAAO,MAAM,MAAI,EAAK,gBAAgB,OAAO;EACrE,GAAG,GAAG;EACN,aAAa,OAAO,aAAa,CAAE;CACrC,GAAG,CAAC,CAAI,CAAC,GAGP,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD,CAAiB,CAAA,GACjB,kBAAC,GAAD,EAAA,UACE,kBAAC,EAAU,SAAX;EAAwB;EAAK,GAAI;EAC9B;CACgB,CAAA,EACH,CAAA,CAClB,EAAA,CAAA;AAEN,CACF;AACA,EAAQ,cAAc,EAAU,QAAQ;AAExC,IAAa,IAAgB,EAAY,EAAO,CAAO,GAAG,SAAS,GACtD,IAAgB,EAAU"}

package/dist/components/flag/styled.d.ts

@@ -1,7 +1,5 @@
-import { ComponentProps, ForwardRefExoticComponent, SVGProps, RefAttributes } from 'react';
+import { ComponentProps, ForwardRefExoticComponent } from 'react';
 import { StyledComponent } from '@stokelp/styled-system/types';
-import { PolymorphicProps } from '@ark-ui/react';
-import { FlagVariantProps } from '@stokelp/styled-system/recipes';
 declare const flags: {
     af: import("react/jsx-runtime").JSX.Element;
     al: import("react/jsx-runtime").JSX.Element;
@@ -210,11 +208,15 @@ declare const flags: {
     zw: import("react/jsx-runtime").JSX.Element;
 };
 export type FlagCountryCode = keyof typeof flags;
-declare const StyledFlag: StyledComponent<ForwardRefExoticComponent< SVGProps<SVGSVGElement> & PolymorphicProps>, FlagVariantProps>;
+declare const StyledFlag: StyledComponent<any, {
+    [x: string]: unknown;
+    [x: number]: unknown;
+    shape?: unknown;
+}>;
 type StyledFlagProps = ComponentProps<typeof StyledFlag>;
 export type FlagProps = StyledFlagProps & {
     countryCode: FlagCountryCode;
 };
 export declare const FlagCountryCodes: FlagCountryCode[];
-export declare const Flag: ForwardRefExoticComponent<Omit<FlagProps, "ref"> & RefAttributes<SVGSVGElement>>;
+export declare const Flag: ForwardRefExoticComponent<any>;
 export {};

package/dist/components/form/FormControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.cjs","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl } from '@stokelp/styled-system/recipes'\n\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n})\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":"oIAKA,IAAM,GAAA,EAAA,EAAA,QAA2B,MAAO,EAAA,YAAa,CACnD,aAAc,CACZ,KAAM,OACR,CACF,CAAC,EAOY,GAAqC,CAAE,YAAW,aAAY,GAAG,MAMrE,EAAA,EAAA,KAAC,EAAD,CAJL,GAAI,EAAY,CAAE,eAAgB,EAAK,EAAI,CAAC,EAC5C,GAAI,EAAa,CAAE,gBAAiB,EAAK,EAAI,CAAC,EAGJ,GAAI,CAAQ,CAAA"}
+{"version":3,"file":"FormControl.cjs","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl, type FormControlVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// Explicit `as` cast pins the literal `'div'` against TS's d.ts emit-time\n// widening (which would otherwise produce `StyledComponent<string, …>` and\n// strip every native HTML attribute — children, id, role, aria-*, etc. —\n// from consumer typings). Same pattern as IconButton.tsx.\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n}) as StyledComponent<'div', FormControlVariantProps>\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":"oIAUA,IAAM,GAAA,EAAA,EAAA,QAA2B,MAAO,EAAA,YAAa,CACnD,aAAc,CACZ,KAAM,OACR,CACF,CAAC,EAOY,GAAqC,CAAE,YAAW,aAAY,GAAG,MAMrE,EAAA,EAAA,KAAC,EAAD,CAJL,GAAI,EAAY,CAAE,eAAgB,EAAK,EAAI,CAAC,EAC5C,GAAI,EAAa,CAAE,gBAAiB,EAAK,EAAI,CAAC,EAGJ,GAAI,CAAQ,CAAA"}

package/dist/components/form/FormControl.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, FC } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { FormControlVariantProps } from '@stokelp/styled-system/recipes';
+import { StyledComponent } from '@stokelp/styled-system/types';
 declare const StyledFormControl: StyledComponent<"div", FormControlVariantProps>;
 export type FormControlProps = ComponentProps<typeof StyledFormControl> & {
     isInvalid?: boolean;

package/dist/components/form/FormControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl } from '@stokelp/styled-system/recipes'\n\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n})\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":";;;;;AAKA,IAAM,IAAoB,EAAO,OAAO,GAAa,EACnD,cAAc,EACZ,MAAM,QACR,EACF,CAAC,GAOY,KAAqC,EAAE,cAAW,eAAY,GAAG,QAMrE,kBAAC,GAAD;CAJL,GAAI,IAAY,EAAE,gBAAgB,GAAK,IAAI,CAAC;CAC5C,GAAI,IAAa,EAAE,iBAAiB,GAAK,IAAI,CAAC;CAGJ,GAAI;AAAQ,CAAA"}
+{"version":3,"file":"FormControl.js","names":[],"sources":["../../../src/components/form/FormControl.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formControl, type FormControlVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// Explicit `as` cast pins the literal `'div'` against TS's d.ts emit-time\n// widening (which would otherwise produce `StyledComponent<string, …>` and\n// strip every native HTML attribute — children, id, role, aria-*, etc. —\n// from consumer typings). Same pattern as IconButton.tsx.\nconst StyledFormControl = styled('div', formControl, {\n  defaultProps: {\n    role: 'group',\n  },\n}) as StyledComponent<'div', FormControlVariantProps>\n\nexport type FormControlProps = ComponentProps<typeof StyledFormControl> & {\n  isInvalid?: boolean\n  isRequired?: boolean\n}\n\nexport const FormControl: FC<FormControlProps> = ({ isInvalid, isRequired, ...props }) => {\n  const invalidProps = {\n    ...(isInvalid ? { 'aria-invalid': true } : {}),\n    ...(isRequired ? { 'aria-required': true } : {}),\n  }\n\n  return <StyledFormControl {...invalidProps} {...props} />\n}\n"],"mappings":";;;;;AAUA,IAAM,IAAoB,EAAO,OAAO,GAAa,EACnD,cAAc,EACZ,MAAM,QACR,EACF,CAAC,GAOY,KAAqC,EAAE,cAAW,eAAY,GAAG,QAMrE,kBAAC,GAAD;CAJL,GAAI,IAAY,EAAE,gBAAgB,GAAK,IAAI,CAAC;CAC5C,GAAI,IAAa,EAAE,iBAAiB,GAAK,IAAI,CAAC;CAGJ,GAAI;AAAQ,CAAA"}

package/dist/components/form/FormHelperText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.cjs","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText } from '@stokelp/styled-system/recipes'\n\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n})\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":"qGAKA,IAAa,GAAA,EAAA,EAAA,QAAwB,IAAK,EAAA,eAAgB,CACxD,SAAU,EACZ,CAAC"}
+{"version":3,"file":"FormHelperText.cjs","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText, type FormHelperTextVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n}) as StyledComponent<'p', FormHelperTextVariantProps>\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":"qGAOA,IAAa,GAAA,EAAA,EAAA,QAAwB,IAAK,EAAA,eAAgB,CACxD,SAAU,EACZ,CAAC"}

package/dist/components/form/FormHelperText.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { FormHelperTextVariantProps } from '@stokelp/styled-system/recipes';
+import { StyledComponent } from '@stokelp/styled-system/types';
 export declare const FormHelperText: StyledComponent<"p", FormHelperTextVariantProps>;
 export interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {
 }

package/dist/components/form/FormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.js","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText } from '@stokelp/styled-system/recipes'\n\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n})\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":";;;;AAKA,IAAa,IAAiB,EAAO,KAAK,GAAgB,EACxD,UAAU,GACZ,CAAC"}
+{"version":3,"file":"FormHelperText.js","names":[],"sources":["../../../src/components/form/FormHelperText.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { formHelperText, type FormHelperTextVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nexport const FormHelperText = styled('p', formHelperText, {\n  dataAttr: true,\n}) as StyledComponent<'p', FormHelperTextVariantProps>\n\nexport interface FormHelperTextProps extends ComponentProps<typeof FormHelperText> {}\n"],"mappings":";;;;AAOA,IAAa,IAAiB,EAAO,KAAK,GAAgB,EACxD,UAAU,GACZ,CAAC"}

package/dist/components/form/FormLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.cjs","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel } from '@stokelp/styled-system/recipes'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\nconst StyledFormLabel = styled('label', formLabel)\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":"sNAOA,IAAM,GAAA,EAAA,EAAA,QAAyB,QAAS,EAAA,SAAS,EAOpC,EAAgC,GAAS,CACpD,GAAM,CAAC,EAAc,GAAc,EAAA,UAAU,kBAAkB,CAAK,EAC9D,CAAC,EAAU,IAAA,EAAA,EAAA,eAA4B,CAAU,EACjD,CAAE,WAAU,YAAW,QAAO,qBAAoB,GAAG,GAAc,EACnE,GAAA,EAAA,EAAA,WAAmB,CAAY,EAErC,OACE,EAAA,EAAA,MAAC,EAAD,CAAiB,WAAA,EAAA,EAAA,IAAc,EAAO,MAAA,EAAA,EAAA,KAAU,CAAQ,EAAG,CAAS,EAAG,GAAI,WAA3E,CACG,EACA,GAAQ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAO,eAAQ,CAAY,CAAA,EAAI,KACxD,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAO,YACd,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAO,KAClB,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,uCAEN,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,+fACF,KAAK,cACN,CAAA,CACE,CAAA,CACE,CAAA,EACP,IACW,GAErB"}
+{"version":3,"file":"FormLabel.cjs","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel, type FormLabelVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nconst StyledFormLabel = styled('label', formLabel) as StyledComponent<'label', FormLabelVariantProps>\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":"sNASA,IAAM,GAAA,EAAA,EAAA,QAAyB,QAAS,EAAA,SAAS,EAOpC,EAAgC,GAAS,CACpD,GAAM,CAAC,EAAc,GAAc,EAAA,UAAU,kBAAkB,CAAK,EAC9D,CAAC,EAAU,IAAA,EAAA,EAAA,eAA4B,CAAU,EACjD,CAAE,WAAU,YAAW,QAAO,qBAAoB,GAAG,GAAc,EACnE,GAAA,EAAA,EAAA,WAAmB,CAAY,EAErC,OACE,EAAA,EAAA,MAAC,EAAD,CAAiB,WAAA,EAAA,EAAA,IAAc,EAAO,MAAA,EAAA,EAAA,KAAU,CAAQ,EAAG,CAAS,EAAG,GAAI,WAA3E,CACG,EACA,GAAQ,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAO,eAAQ,CAAY,CAAA,EAAI,KACxD,GACC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,MAAO,YACd,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAO,KAClB,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,uCAEN,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,+fACF,KAAK,cACN,CAAA,CACE,CAAA,CACE,CAAA,EACP,IACW,GAErB"}

package/dist/components/form/FormLabel.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, FC, ReactNode } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { FormLabelVariantProps } from '@stokelp/styled-system/recipes';
+import { StyledComponent } from '@stokelp/styled-system/types';
 declare const StyledFormLabel: StyledComponent<"label", FormLabelVariantProps>;
 export type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {
     addon?: ReactNode;

package/dist/components/form/FormLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabel.js","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel } from '@stokelp/styled-system/recipes'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\nconst StyledFormLabel = styled('label', formLabel)\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAM,IAAkB,EAAO,SAAS,CAAS,GAOpC,KAAgC,MAAS;CACpD,IAAM,CAAC,GAAc,KAAc,EAAU,kBAAkB,CAAK,GAC9D,CAAC,GAAU,KAAc,EAAc,CAAU,GACjD,EAAE,aAAU,cAAW,UAAO,uBAAoB,GAAG,MAAc,GACnE,IAAS,EAAU,CAAY;CAErC,OACE,kBAAC,GAAD;EAAiB,WAAW,EAAG,EAAO,MAAM,EAAI,CAAQ,GAAG,CAAS;EAAG,GAAI;YAA3E;GACG;GACA,IAAQ,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAQ;GAAY,CAAA,IAAI;GACxD,IACC,kBAAC,GAAD;IAAS,OAAO;cACd,kBAAC,OAAD;KACE,WAAW,EAAO;KAClB,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,OAAM;eAEN,kBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACE,CAAA,IACP;EACW;;AAErB"}
+{"version":3,"file":"FormLabel.js","names":[],"sources":["../../../src/components/form/FormLabel.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from 'react'\n\nimport { splitCssProps, styled } from '@stokelp/styled-system/jsx'\nimport { formLabel, type FormLabelVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { css, cx } from '@stokelp/styled-system/css'\nimport { Tooltip } from '~/components/tooltip/Tooltip'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nconst StyledFormLabel = styled('label', formLabel) as StyledComponent<'label', FormLabelVariantProps>\n\nexport type FormLabelProps = ComponentProps<typeof StyledFormLabel> & {\n  addon?: ReactNode\n  tooltipInformation?: ReactNode\n}\n\nexport const FormLabel: FC<FormLabelProps> = props => {\n  const [variantProps, labelProps] = formLabel.splitVariantProps(props)\n  const [cssProps, localProps] = splitCssProps(labelProps)\n  const { children, className, addon, tooltipInformation, ...rootProps } = localProps\n  const styles = formLabel(variantProps)\n\n  return (\n    <StyledFormLabel className={cx(styles.root, css(cssProps), className)} {...rootProps}>\n      {children}\n      {addon ? <span className={styles.addon}>{addon}</span> : null}\n      {tooltipInformation ? (\n        <Tooltip label={tooltipInformation}>\n          <svg\n            className={styles.icon}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M7.33337 4.66659H8.66671V5.99992H7.33337V4.66659ZM7.33337 7.33325H8.66671V11.3333H7.33337V7.33325ZM8.00004 1.33325C4.32004 1.33325 1.33337 4.31992 1.33337 7.99992C1.33337 11.6799 4.32004 14.6666 8.00004 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8.00004 1.33325ZM8.00004 13.3333C5.06004 13.3333 2.66671 10.9399 2.66671 7.99992C2.66671 5.05992 5.06004 2.66659 8.00004 2.66659C10.94 2.66659 13.3334 5.05992 13.3334 7.99992C13.3334 10.9399 10.94 13.3333 8.00004 13.3333Z\"\n              fill=\"currentColor\"\n            />\n          </svg>\n        </Tooltip>\n      ) : null}\n    </StyledFormLabel>\n  )\n}\n"],"mappings":";;;;;;;AASA,IAAM,IAAkB,EAAO,SAAS,CAAS,GAOpC,KAAgC,MAAS;CACpD,IAAM,CAAC,GAAc,KAAc,EAAU,kBAAkB,CAAK,GAC9D,CAAC,GAAU,KAAc,EAAc,CAAU,GACjD,EAAE,aAAU,cAAW,UAAO,uBAAoB,GAAG,MAAc,GACnE,IAAS,EAAU,CAAY;CAErC,OACE,kBAAC,GAAD;EAAiB,WAAW,EAAG,EAAO,MAAM,EAAI,CAAQ,GAAG,CAAS;EAAG,GAAI;YAA3E;GACG;GACA,IAAQ,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAQ;GAAY,CAAA,IAAI;GACxD,IACC,kBAAC,GAAD;IAAS,OAAO;cACd,kBAAC,OAAD;KACE,WAAW,EAAO;KAClB,OAAM;KACN,QAAO;KACP,SAAQ;KACR,MAAK;KACL,OAAM;eAEN,kBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACE,CAAA,IACP;EACW;;AAErB"}

package/dist/components/input/HighlightedInput.d.ts

@@ -2,10 +2,10 @@ import { ComponentProps, FC } from 'react';
 import { ComponentVariants } from '../../utils/slots';
 import { StyledComponent } from '@stokelp/styled-system/types';
 import { HighlightedInputRecipe, InputVariantProps } from '@stokelp/styled-system/recipes';
-export declare const Root: ComponentVariants<StyledComponent<"div", {}>, HighlightedInputRecipe>;
+export declare const Root: ComponentVariants<StyledComponent<string, {}>, HighlightedInputRecipe>;
 export declare const InputSlot: StyledComponent<"input", InputVariantProps>;
-export declare const Renderer: StyledComponent<"p", {}>;
-export declare const Highlight: StyledComponent<"span", {}>;
+export declare const Renderer: StyledComponent<string, {}>;
+export declare const Highlight: StyledComponent<string, {}>;
 export type HighlightedInputRootProps = ComponentProps<typeof Root>;
 export type HighlightedInputInputProps = ComponentProps<typeof InputSlot>;
 export type HighlightedInputRendererProps = ComponentProps<typeof Renderer>;

package/dist/components/input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import type { ComponentProps, WheelEvent } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { input } from '@stokelp/styled-system/recipes'\n\nexport const Input = styled('input', input, {\n  defaultProps: {\n    onWheel: (event: WheelEvent<HTMLInputElement>) => {\n      if (event.currentTarget.type === 'number') {\n        event.currentTarget.blur()\n      }\n    },\n  },\n  dataAttr: true,\n})\n\nexport type InputProps = ComponentProps<typeof Input>\n"],"mappings":"qGAKA,IAAa,GAAA,EAAA,EAAA,QAAe,QAAS,EAAA,MAAO,CAC1C,aAAc,CACZ,QAAU,GAAwC,CAC5C,EAAM,cAAc,OAAS,UAC/B,EAAM,cAAc,KAAK,CAE7B,CACF,EACA,SAAU,EACZ,CAAC"}
+{"version":3,"file":"Input.cjs","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import type { ComponentProps, WheelEvent } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { input, type InputVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\n// Without this, `Input` becomes `StyledComponent<string, …>` and loses every\n// native HTML input attribute (type, placeholder, value, ref, etc.) in the\n// emitted d.ts.\nexport const Input = styled('input', input, {\n  defaultProps: {\n    onWheel: (event: WheelEvent<HTMLInputElement>) => {\n      if (event.currentTarget.type === 'number') {\n        event.currentTarget.blur()\n      }\n    },\n  },\n  dataAttr: true,\n}) as StyledComponent<'input', InputVariantProps>\n\nexport type InputProps = ComponentProps<typeof Input>\n"],"mappings":"qGAUA,IAAa,GAAA,EAAA,EAAA,QAAe,QAAS,EAAA,MAAO,CAC1C,aAAc,CACZ,QAAU,GAAwC,CAC5C,EAAM,cAAc,OAAS,UAC/B,EAAM,cAAc,KAAK,CAE7B,CACF,EACA,SAAU,EACZ,CAAC"}

package/dist/components/input/Input.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { InputVariantProps } from '@stokelp/styled-system/recipes';
+import { StyledComponent } from '@stokelp/styled-system/types';
 export declare const Input: StyledComponent<"input", InputVariantProps>;
 export type InputProps = ComponentProps<typeof Input>;

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import type { ComponentProps, WheelEvent } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { input } from '@stokelp/styled-system/recipes'\n\nexport const Input = styled('input', input, {\n  defaultProps: {\n    onWheel: (event: WheelEvent<HTMLInputElement>) => {\n      if (event.currentTarget.type === 'number') {\n        event.currentTarget.blur()\n      }\n    },\n  },\n  dataAttr: true,\n})\n\nexport type InputProps = ComponentProps<typeof Input>\n"],"mappings":";;;;AAKA,IAAa,IAAQ,EAAO,SAAS,GAAO;CAC1C,cAAc,EACZ,UAAU,MAAwC;EAChD,AAAI,EAAM,cAAc,SAAS,YAC/B,EAAM,cAAc,KAAK;CAE7B,EACF;CACA,UAAU;AACZ,CAAC"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import type { ComponentProps, WheelEvent } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { input, type InputVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\n// Without this, `Input` becomes `StyledComponent<string, …>` and loses every\n// native HTML input attribute (type, placeholder, value, ref, etc.) in the\n// emitted d.ts.\nexport const Input = styled('input', input, {\n  defaultProps: {\n    onWheel: (event: WheelEvent<HTMLInputElement>) => {\n      if (event.currentTarget.type === 'number') {\n        event.currentTarget.blur()\n      }\n    },\n  },\n  dataAttr: true,\n}) as StyledComponent<'input', InputVariantProps>\n\nexport type InputProps = ComponentProps<typeof Input>\n"],"mappings":";;;;AAUA,IAAa,IAAQ,EAAO,SAAS,GAAO;CAC1C,cAAc,EACZ,UAAU,MAAwC;EAChD,AAAI,EAAM,cAAc,SAAS,YAC/B,EAAM,cAAc,KAAK;CAE7B,EACF;CACA,UAAU;AACZ,CAAC"}

package/dist/components/input/InputAddon.d.ts

@@ -1,7 +1,8 @@
-import { ComponentProps, ForwardRefExoticComponent, ClassAttributes, HTMLAttributes } from 'react';
+import { ComponentProps } from 'react';
 import { StyledComponent } from '@stokelp/styled-system/types';
-import { PolymorphicProps } from '@ark-ui/react';
-import { InputAddonVariantProps } from '@stokelp/styled-system/recipes';
-export declare const InputAddon: StyledComponent<ForwardRefExoticComponent< ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & PolymorphicProps>, InputAddonVariantProps>;
+export declare const InputAddon: StyledComponent<any, {
+    [x: string]: unknown;
+    [x: number]: unknown;
+}>;
 export interface InputAddonProps extends ComponentProps<typeof InputAddon> {
 }

package/dist/components/input/InputGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.cjs","names":[],"sources":["../../../src/components/input/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { inputGroup } from '@stokelp/styled-system/recipes'\n\nexport const InputGroup = styled('div', inputGroup, {\n  dataAttr: true,\n})\n\nexport interface InputGroupProps extends ComponentProps<typeof InputGroup> {}\n"],"mappings":"qGAKA,IAAa,GAAA,EAAA,EAAA,QAAoB,MAAO,EAAA,WAAY,CAClD,SAAU,EACZ,CAAC"}
+{"version":3,"file":"InputGroup.cjs","names":[],"sources":["../../../src/components/input/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { inputGroup, type InputGroupVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nexport const InputGroup = styled('div', inputGroup, {\n  dataAttr: true,\n}) as StyledComponent<'div', InputGroupVariantProps>\n\nexport interface InputGroupProps extends ComponentProps<typeof InputGroup> {}\n"],"mappings":"qGAOA,IAAa,GAAA,EAAA,EAAA,QAAoB,MAAO,EAAA,WAAY,CAClD,SAAU,EACZ,CAAC"}

package/dist/components/input/InputGroup.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from 'react';
-import { StyledComponent } from '@stokelp/styled-system/types';
 import { InputGroupVariantProps } from '@stokelp/styled-system/recipes';
+import { StyledComponent } from '@stokelp/styled-system/types';
 export declare const InputGroup: StyledComponent<"div", InputGroupVariantProps>;
 export interface InputGroupProps extends ComponentProps<typeof InputGroup> {
 }

package/dist/components/input/InputGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputGroup.js","names":[],"sources":["../../../src/components/input/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { inputGroup } from '@stokelp/styled-system/recipes'\n\nexport const InputGroup = styled('div', inputGroup, {\n  dataAttr: true,\n})\n\nexport interface InputGroupProps extends ComponentProps<typeof InputGroup> {}\n"],"mappings":";;;;AAKA,IAAa,IAAa,EAAO,OAAO,GAAY,EAClD,UAAU,GACZ,CAAC"}
+{"version":3,"file":"InputGroup.js","names":[],"sources":["../../../src/components/input/InputGroup.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\n\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { inputGroup, type InputGroupVariantProps } from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\n\n// See FormControl.tsx for why we pin the literal tag with an `as` cast.\nexport const InputGroup = styled('div', inputGroup, {\n  dataAttr: true,\n}) as StyledComponent<'div', InputGroupVariantProps>\n\nexport interface InputGroupProps extends ComponentProps<typeof InputGroup> {}\n"],"mappings":";;;;AAOA,IAAa,IAAa,EAAO,OAAO,GAAY,EAClD,UAAU,GACZ,CAAC"}

package/dist/components/pagination/Pagination.d.ts

@@ -2,7 +2,7 @@ import { ComponentProps, FC } from 'react';
 import { ComponentVariants } from '../../utils/slots';
 import { StyledComponent } from '@stokelp/styled-system/types';
 import { PaginationRecipe } from '@stokelp/styled-system/recipes';
-declare const StyledPagination: ComponentVariants<StyledComponent<"div", {}>, PaginationRecipe>;
+declare const StyledPagination: ComponentVariants<StyledComponent<string, {}>, PaginationRecipe>;
 type StyledPaginationProps = ComponentProps<typeof StyledPagination>;
 export interface PaginationProps extends Omit<StyledPaginationProps, 'children' | 'defaultValue' | 'onChange'> {
     total: number;

package/dist/components/radio-card-group/RadioCardGroup.d.ts

@@ -4,8 +4,8 @@ import { StyledComponent } from '@stokelp/styled-system/types';
 import { ComponentVariants } from '../../utils/slots';
 import { RadioCardGroupRecipe } from '@stokelp/styled-system/recipes';
 export declare const RadioCardGroupItemTitle: StyledComponent<ForwardRefExoticComponent<ArkRadioGroup.ItemTextProps & RefAttributes<HTMLSpanElement>>, {}>;
-export declare const RadioCardGroupItemContent: StyledComponent<"div", {}>;
-export declare const RadioCardGroupItemDescription: StyledComponent<"p", {}>;
+export declare const RadioCardGroupItemContent: StyledComponent<string, {}>;
+export declare const RadioCardGroupItemDescription: StyledComponent<string, {}>;
 export declare const RadioCardGroupItemImage: StyledComponent<ForwardRefExoticComponent< ClassAttributes<HTMLImageElement> & ImgHTMLAttributes<HTMLImageElement> & PolymorphicProps>, {}>;
 export declare const RadioCardGroup: ComponentVariants<StyledComponent<ForwardRefExoticComponent<ArkRadioGroup.RootProps & RefAttributes<HTMLDivElement>>, {}>, RadioCardGroupRecipe>;
 export declare const RadioCardGroupItem: StyledComponent<ForwardRefExoticComponent<Omit<Omit<ArkRadioGroup.ItemProps & RefAttributes<HTMLLabelElement>, "ref">, "value"> & {

package/dist/components/switch-card/SwitchCard.d.ts

@@ -5,8 +5,8 @@ import { ComponentProps, ForwardRefExoticComponent, RefAttributes, ClassAttribut
 export interface SwitchCardProps extends Assign<JsxStyleProps, SwitchRootProps>, SwitchCardVariantProps {
 }
 export declare const SwitchCardTitle: StyledComponent<ForwardRefExoticComponent<ArkSwitch.LabelProps & RefAttributes<HTMLSpanElement>>, {}>;
-export declare const SwitchCardContent: StyledComponent<"div", {}>;
-export declare const SwitchCardDescription: StyledComponent<"p", {}>;
+export declare const SwitchCardContent: StyledComponent<string, {}>;
+export declare const SwitchCardDescription: StyledComponent<string, {}>;
 export declare const SwitchCardImage: StyledComponent<ForwardRefExoticComponent< ClassAttributes<HTMLImageElement> & ImgHTMLAttributes<HTMLImageElement> & PolymorphicProps>, {}>;
 export type SwitchCardTitleProps = ComponentProps<typeof SwitchCardTitle>;
 export type SwitchCardContentProps = ComponentProps<typeof SwitchCardContent>;

package/dist/components/table/Table.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../utils/slots.cjs"),t=require("./TableProvider.cjs");let n=require("@stokelp/styled-system/jsx"),r=require("@stokelp/styled-system/recipes"),i=require("react"),a=require("react/jsx-runtime");var{withProvider:o,withContext:s}=e.createStyleContext(r.table),c=(0,n.styled)(`div`,r.tableContainer),l=o((0,n.styled)(`table`),`root`),u=(0,i.forwardRef)(({children:e,onSortChange:n,descriptor:r,...i},o)=>(0,a.jsx)(t.TableProvider,{descriptor:r,onSortChange:n,children:(0,a.jsx)(l,{ref:o,...i,children:e})}));u.displayName=`Table`;var d=s((0,n.styled)(`thead`),`thead`),f=s((0,n.styled)(`div`),`sortIndicatorRoot`),p=s((0,n.styled)(`svg`),`sortIndicator`),m=s((0,n.styled)(`tbody`),`tbody`),h=s((0,n.styled)(`tr`),`tr`),g=s((0,n.styled)(`th`),`th`),_=(0,i.forwardRef)(({children:e,addon:n,sortKey:r,onClick:i,...o},s)=>{let{dispatch:c,sortDescriptor:l}=t.useTable(),u=e=>{r&&(l===null?c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`asc`}}):l.key===r?l.direction===`asc`?c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`desc`}}):c({type:`CLEAR_SORT_DESCRIPTOR`}):c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`asc`}})),i?.(e)};return(0,a.jsxs)(g,{ref:s,...o,...r?{"data-sortable":!0}:{},role:`group`,onClick:u,children:[e,n?(0,a.jsxs)(`span`,{className:`th__addon`,children:[`\xA0`,n]}):null,l&&l.key===r?(0,a.jsxs)(f,{"data-state":`active`,children:[(0,a.jsx)(p,{"data-active":l.direction===`asc`?!0:void 0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z`,fill:`currentColor`})}),(0,a.jsx)(p,{"data-active":l.direction===`desc`?!0:void 0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z`,fill:`currentColor`})})]}):r?(0,a.jsxs)(f,{"data-state":`idle`,children:[(0,a.jsx)(p,{"data-active":!0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z`,fill:`currentColor`})}),(0,a.jsx)(p,{"data-active":!0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z`,fill:`currentColor`})})]}):null]})});_.displayName=`Th`;var v=s((0,n.styled)(`td`),`td`),y=(0,n.styled)(`td`,r.tableGroupTitle),b=(0,i.forwardRef)((e,t)=>{let n=(0,i.useRef)(null);return(0,i.useLayoutEffect)(()=>{if(n.current){let e=n.current?.closest(`table`)?.querySelector(`thead > tr`);e&&n.current.setAttribute(`colspan`,e.children.length.toString())}},[]),(0,a.jsx)(`tr`,{ref:t,className:`table_tr__group__title`,children:(0,a.jsx)(y,{ref:n,...e})})});b.displayName=`TableGroupTitle`;var x=(0,n.styled)(`td`,r.tableEmptyRow),S=(0,i.forwardRef)((e,t)=>{let n=(0,i.useRef)(null);return(0,i.useLayoutEffect)(()=>{if(n.current){let e=n.current?.closest(`table`)?.querySelector(`thead > tr`);e&&n.current.setAttribute(`colspan`,e.children.length.toString())}},[]),(0,a.jsx)(`tr`,{ref:t,className:`table_tr__empty`,children:(0,a.jsx)(x,{ref:n,...e})})});S.displayName=`TableEmptyRow`,exports.Table=u,exports.TableContainer=c,exports.TableEmptyRow=S,exports.TableGroupTitle=b,exports.Tbody=m,exports.Td=v,exports.Th=_,exports.Thead=d,exports.Tr=h;
+"use client";const e=require("../../utils/slots.cjs"),t=require("./TableProvider.cjs");let n=require("@stokelp/styled-system/jsx"),r=require("@stokelp/styled-system/recipes"),i=require("react"),a=require("react/jsx-runtime");var{withProvider:o,withContext:s}=e.createStyleContext(r.table),c=e=>(0,n.styled)(e),l=(0,n.styled)(`div`,r.tableContainer),u=o(c(`table`),`root`),d=(0,i.forwardRef)(({children:e,onSortChange:n,descriptor:r,...i},o)=>(0,a.jsx)(t.TableProvider,{descriptor:r,onSortChange:n,children:(0,a.jsx)(u,{ref:o,...i,children:e})}));d.displayName=`Table`;var f=s(c(`thead`),`thead`),p=s(c(`div`),`sortIndicatorRoot`),m=s(c(`svg`),`sortIndicator`),h=s(c(`tbody`),`tbody`),g=s(c(`tr`),`tr`),_=s(c(`th`),`th`),v=(0,i.forwardRef)(({children:e,addon:n,sortKey:r,onClick:i,...o},s)=>{let{dispatch:c,sortDescriptor:l}=t.useTable(),u=e=>{r&&(l===null?c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`asc`}}):l.key===r?l.direction===`asc`?c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`desc`}}):c({type:`CLEAR_SORT_DESCRIPTOR`}):c({type:`UPDATE_SORT_DESCRIPTOR`,payload:{key:r,direction:`asc`}})),i?.(e)};return(0,a.jsxs)(_,{ref:s,...o,...r?{"data-sortable":!0}:{},role:`group`,onClick:u,children:[e,n?(0,a.jsxs)(`span`,{className:`th__addon`,children:[`\xA0`,n]}):null,l&&l.key===r?(0,a.jsxs)(p,{"data-state":`active`,children:[(0,a.jsx)(m,{"data-active":l.direction===`asc`?!0:void 0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z`,fill:`currentColor`})}),(0,a.jsx)(m,{"data-active":l.direction===`desc`?!0:void 0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z`,fill:`currentColor`})})]}):r?(0,a.jsxs)(p,{"data-state":`idle`,children:[(0,a.jsx)(m,{"data-active":!0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z`,fill:`currentColor`})}),(0,a.jsx)(m,{"data-active":!0,viewBox:`0 0 8 8`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,a.jsx)(`path`,{d:`M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z`,fill:`currentColor`})})]}):null]})});v.displayName=`Th`;var y=s(c(`td`),`td`),b=(0,n.styled)(`td`,r.tableGroupTitle),x=(0,i.forwardRef)((e,t)=>{let n=(0,i.useRef)(null);return(0,i.useLayoutEffect)(()=>{if(n.current){let e=n.current?.closest(`table`)?.querySelector(`thead > tr`);e&&n.current.setAttribute(`colspan`,e.children.length.toString())}},[]),(0,a.jsx)(`tr`,{ref:t,className:`table_tr__group__title`,children:(0,a.jsx)(b,{ref:n,...e})})});x.displayName=`TableGroupTitle`;var S=(0,n.styled)(`td`,r.tableEmptyRow),C=(0,i.forwardRef)((e,t)=>{let n=(0,i.useRef)(null);return(0,i.useLayoutEffect)(()=>{if(n.current){let e=n.current?.closest(`table`)?.querySelector(`thead > tr`);e&&n.current.setAttribute(`colspan`,e.children.length.toString())}},[]),(0,a.jsx)(`tr`,{ref:t,className:`table_tr__empty`,children:(0,a.jsx)(S,{ref:n,...e})})});C.displayName=`TableEmptyRow`,exports.Table=d,exports.TableContainer=l,exports.TableEmptyRow=C,exports.TableGroupTitle=x,exports.Tbody=h,exports.Td=y,exports.Th=v,exports.Thead=f,exports.Tr=g;
 //# sourceMappingURL=Table.cjs.map

package/dist/components/table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import type { ComponentProps, ElementRef, FC, MouseEvent, ReactNode } from 'react'\nimport { forwardRef, useLayoutEffect, useRef } from 'react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport { table, tableContainer, tableEmptyRow, tableGroupTitle } from '@stokelp/styled-system/recipes'\nimport { createStyleContext } from '~/utils/slots'\nimport { TableProvider, type TableProviderProps, useTable } from './TableProvider'\n\nconst { withProvider, withContext } = createStyleContext(table)\n\nexport const TableContainer = styled('div', tableContainer)\n\nconst StyledTable = withProvider(styled('table'), 'root')\ntype StyledTableProps = ComponentProps<typeof StyledTable>\n\nexport type TableProps = StyledTableProps & Pick<TableProviderProps, 'onSortChange' | 'descriptor'>\n\nexport const Table = forwardRef<ElementRef<typeof StyledTable>, TableProps>(\n  ({ children, onSortChange, descriptor, ...props }, ref) => {\n    return (\n      <TableProvider descriptor={descriptor} onSortChange={onSortChange}>\n        <StyledTable ref={ref} {...props}>\n          {children}\n        </StyledTable>\n      </TableProvider>\n    )\n  },\n) as FC<TableProps>\n\nTable.displayName = 'Table'\n\nexport const Thead = withContext(styled('thead'), 'thead')\nconst SortIndicatorRoot = withContext(styled('div'), 'sortIndicatorRoot')\nconst SortIndicator = withContext(styled('svg'), 'sortIndicator')\nexport const Tbody = withContext(styled('tbody'), 'tbody')\nexport const Tr = withContext(styled('tr'), 'tr')\nconst StyledTh = withContext(styled('th'), 'th')\n\ntype StyledThProps = ComponentProps<typeof StyledTh>\n\nexport type ThProps = StyledThProps & {\n  addon?: ReactNode\n  sortKey?: string\n}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ThProps>(\n  ({ children, addon, sortKey, onClick, ...props }, ref) => {\n    const { dispatch, sortDescriptor } = useTable()\n\n    const handleOnClick = (e: MouseEvent<HTMLTableCellElement>) => {\n      if (sortKey) {\n        if (sortDescriptor === null) {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        } else if (sortDescriptor.key === sortKey) {\n          if (sortDescriptor.direction === 'asc') {\n            dispatch({\n              type: 'UPDATE_SORT_DESCRIPTOR',\n              payload: {\n                key: sortKey,\n                direction: 'desc',\n              },\n            })\n          } else {\n            dispatch({\n              type: 'CLEAR_SORT_DESCRIPTOR',\n            })\n          }\n        } else {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        }\n      }\n      onClick?.(e)\n    }\n\n    return (\n      <StyledTh\n        ref={ref}\n        {...props}\n        {...(sortKey ? { 'data-sortable': true } : {})}\n        role=\"group\"\n        onClick={handleOnClick}\n      >\n        {children}\n        {addon ? <span className=\"th__addon\">&nbsp;{addon}</span> : null}\n        {sortDescriptor && sortDescriptor.key === sortKey ? (\n          <SortIndicatorRoot data-state=\"active\">\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'asc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'desc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : sortKey ? (\n          <SortIndicatorRoot data-state=\"idle\">\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : null}\n      </StyledTh>\n    )\n  },\n) as FC<ThProps>\n\nTh.displayName = 'Th'\n\nexport const Td = withContext(styled('td'), 'td')\n\nconst StyledTableGroupTitle = styled('td', tableGroupTitle)\nexport type TableGroupTitleProps = ComponentProps<typeof StyledTableGroupTitle>\nexport const TableGroupTitle = forwardRef<HTMLTableRowElement, TableGroupTitleProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableGroupTitle>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__group__title\">\n      <StyledTableGroupTitle ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableGroupTitleProps>\nTableGroupTitle.displayName = 'TableGroupTitle'\n\nconst StyledTableEmptyRow = styled('td', tableEmptyRow)\nexport type TableEmptyRowProps = ComponentProps<typeof StyledTableEmptyRow>\nexport const TableEmptyRow = forwardRef<HTMLTableRowElement, TableEmptyRowProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableEmptyRow>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__empty\">\n      <StyledTableEmptyRow ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableEmptyRowProps>\nTableEmptyRow.displayName = 'TableEmptyRow'\n\nexport interface TheadProps extends ComponentProps<typeof Thead> {}\n\nexport interface TbodyProps extends ComponentProps<typeof Tbody> {}\n\nexport interface TrProps extends ComponentProps<typeof Tr> {}\n\nexport interface TdProps extends ComponentProps<typeof Td> {}\n\nexport interface TableContainerProps extends ComponentProps<typeof TableContainer> {}\n"],"mappings":"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"}
+{"version":3,"file":"Table.cjs","names":[],"sources":["../../../src/components/table/Table.tsx"],"sourcesContent":["import type { ComponentProps, ElementRef, FC, JSX, MouseEvent, ReactNode } from 'react'\nimport { forwardRef, useLayoutEffect, useRef } from 'react'\nimport { styled } from '@stokelp/styled-system/jsx'\nimport {\n  table,\n  tableContainer,\n  tableEmptyRow,\n  tableGroupTitle,\n  type TableContainerVariantProps,\n  type TableEmptyRowVariantProps,\n  type TableGroupTitleVariantProps,\n} from '@stokelp/styled-system/recipes'\nimport type { StyledComponent } from '@stokelp/styled-system/types'\nimport { createStyleContext } from '~/utils/slots'\nimport { TableProvider, type TableProviderProps, useTable } from './TableProvider'\n\nconst { withProvider, withContext } = createStyleContext(table)\n\n// Helper: `styled('tag')` returns `StyledComponent<T, {}>` but TS widens the\n// literal to `string` at d.ts emit, stripping every native HTML attribute\n// from consumer typings. This wrapper pins the literal tag via the generic.\nconst styledTag = <T extends keyof JSX.IntrinsicElements>(tag: T): StyledComponent<T, {}> =>\n  styled(tag) as StyledComponent<T, {}>\n\nexport const TableContainer = styled('div', tableContainer) as StyledComponent<'div', TableContainerVariantProps>\n\nconst StyledTable = withProvider(styledTag('table'), 'root')\ntype StyledTableProps = ComponentProps<typeof StyledTable>\n\nexport type TableProps = StyledTableProps & Pick<TableProviderProps, 'onSortChange' | 'descriptor'>\n\nexport const Table = forwardRef<ElementRef<typeof StyledTable>, TableProps>(\n  ({ children, onSortChange, descriptor, ...props }, ref) => {\n    return (\n      <TableProvider descriptor={descriptor} onSortChange={onSortChange}>\n        <StyledTable ref={ref} {...props}>\n          {children}\n        </StyledTable>\n      </TableProvider>\n    )\n  },\n) as FC<TableProps>\n\nTable.displayName = 'Table'\n\nexport const Thead = withContext(styledTag('thead'), 'thead')\nconst SortIndicatorRoot = withContext(styledTag('div'), 'sortIndicatorRoot')\nconst SortIndicator = withContext(styledTag('svg'), 'sortIndicator')\nexport const Tbody = withContext(styledTag('tbody'), 'tbody')\nexport const Tr = withContext(styledTag('tr'), 'tr')\nconst StyledTh = withContext(styledTag('th'), 'th')\n\ntype StyledThProps = ComponentProps<typeof StyledTh>\n\nexport type ThProps = StyledThProps & {\n  addon?: ReactNode\n  sortKey?: string\n}\n\nexport const Th = forwardRef<ElementRef<typeof StyledTh>, ThProps>(\n  ({ children, addon, sortKey, onClick, ...props }, ref) => {\n    const { dispatch, sortDescriptor } = useTable()\n\n    const handleOnClick = (e: MouseEvent<HTMLTableCellElement>) => {\n      if (sortKey) {\n        if (sortDescriptor === null) {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        } else if (sortDescriptor.key === sortKey) {\n          if (sortDescriptor.direction === 'asc') {\n            dispatch({\n              type: 'UPDATE_SORT_DESCRIPTOR',\n              payload: {\n                key: sortKey,\n                direction: 'desc',\n              },\n            })\n          } else {\n            dispatch({\n              type: 'CLEAR_SORT_DESCRIPTOR',\n            })\n          }\n        } else {\n          dispatch({\n            type: 'UPDATE_SORT_DESCRIPTOR',\n            payload: {\n              key: sortKey,\n              direction: 'asc',\n            },\n          })\n        }\n      }\n      onClick?.(e)\n    }\n\n    return (\n      <StyledTh\n        ref={ref}\n        {...props}\n        {...(sortKey ? { 'data-sortable': true } : {})}\n        role=\"group\"\n        onClick={handleOnClick}\n      >\n        {children}\n        {addon ? <span className=\"th__addon\">&nbsp;{addon}</span> : null}\n        {sortDescriptor && sortDescriptor.key === sortKey ? (\n          <SortIndicatorRoot data-state=\"active\">\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'asc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator\n              data-active={sortDescriptor.direction === 'desc' ? true : undefined}\n              viewBox=\"0 0 8 8\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : sortKey ? (\n          <SortIndicatorRoot data-state=\"idle\">\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33334 4.83332L4.00001 3.16666L5.66668 4.83332H2.33334Z\" fill=\"currentColor\" />\n            </SortIndicator>\n            <SortIndicator data-active={true} viewBox=\"0 0 8 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M2.33333 3.16666L3.99999 4.83332L5.66666 3.16666H2.33333Z\" fill=\"currentColor\" />\n            </SortIndicator>\n          </SortIndicatorRoot>\n        ) : null}\n      </StyledTh>\n    )\n  },\n) as FC<ThProps>\n\nTh.displayName = 'Th'\n\nexport const Td = withContext(styledTag('td'), 'td')\n\nconst StyledTableGroupTitle = styled('td', tableGroupTitle) as StyledComponent<'td', TableGroupTitleVariantProps>\nexport type TableGroupTitleProps = ComponentProps<typeof StyledTableGroupTitle>\nexport const TableGroupTitle = forwardRef<HTMLTableRowElement, TableGroupTitleProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableGroupTitle>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__group__title\">\n      <StyledTableGroupTitle ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableGroupTitleProps>\nTableGroupTitle.displayName = 'TableGroupTitle'\n\nconst StyledTableEmptyRow = styled('td', tableEmptyRow) as StyledComponent<'td', TableEmptyRowVariantProps>\nexport type TableEmptyRowProps = ComponentProps<typeof StyledTableEmptyRow>\nexport const TableEmptyRow = forwardRef<HTMLTableRowElement, TableEmptyRowProps>((props, ref) => {\n  const $td = useRef<ElementRef<typeof StyledTableEmptyRow>>(null)\n  useLayoutEffect(() => {\n    if ($td.current) {\n      const tableColumns = $td.current?.closest('table')?.querySelector('thead > tr')\n      if (tableColumns) {\n        $td.current.setAttribute('colspan', tableColumns.children.length.toString())\n      }\n    }\n  }, [])\n\n  return (\n    <tr ref={ref} className=\"table_tr__empty\">\n      <StyledTableEmptyRow ref={$td} {...props} />\n    </tr>\n  )\n}) as FC<TableEmptyRowProps>\nTableEmptyRow.displayName = 'TableEmptyRow'\n\nexport interface TheadProps extends ComponentProps<typeof Thead> {}\n\nexport interface TbodyProps extends ComponentProps<typeof Tbody> {}\n\nexport interface TrProps extends ComponentProps<typeof Tr> {}\n\nexport interface TdProps extends ComponentProps<typeof Td> {}\n\nexport interface TableContainerProps extends ComponentProps<typeof TableContainer> {}\n"],"mappings":"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"}

package/dist/components/table/Table.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps, FC, ReactNode } from 'react';
-import { TableProviderProps } from './TableProvider';
+import { TableContainerVariantProps, TableEmptyRowVariantProps, TableGroupTitleVariantProps, TableRecipe } from '@stokelp/styled-system/recipes';
 import { StyledComponent } from '@stokelp/styled-system/types';
-import { TableContainerVariantProps, TableRecipe, TableGroupTitleVariantProps, TableEmptyRowVariantProps } from '@stokelp/styled-system/recipes';
+import { TableProviderProps } from './TableProvider';
 import { ComponentVariants } from '../../utils/slots';
 export declare const TableContainer: StyledComponent<"div", TableContainerVariantProps>;
 declare const StyledTable: ComponentVariants<StyledComponent<"table", {}>, TableRecipe>;