@atom-learning/components 6.0.0-beta.0 → 6.0.0-beta.10

package/dist/components/segmented-control/SegmentedControlItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-xl',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2'\n  ],\n  variants: {\n    theme: {\n      primary: ['bg-primary-200'],\n      marsh: ['bg-marsh-200']\n    }\n  }\n})\n\nconst SelectionIndicator = styled('div', {\n  base: [\"content-['']\", 'absolute', 'bg-white', 'rounded-lg'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator\n        interacted={hasInteracted}\n        className={indicatorStyles}\n      />\n      {React.Children.map(props.children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"+KAQA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,KAAM,CACJ,WACA,MACA,aACA,kBACA,iCACA,gBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,gBAAgB,EAC1B,MAAO,CAAC,cAAc,CACxB,CACF,CACF,CAAC,EAEKC,EAAqBF,EAAO,MAAO,CACvC,KAAM,CAAC,eAAgB,WAAY,WAAY,YAAY,EAC3D,SAAU,CACR,WAAY,CACV,KAAM,CAAC,eAAgB,UAAW,gBAAgB,EAClD,MAAO,CAAC,iBAAiB,CAC3B,CACF,CACF,CAAC,EAEYG,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAE,CAAA,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,CAAa,EAChD,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAsB,EAC3DJ,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EACF,CAAA,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACT,EAAA,CAAkB,MAAOM,EAAO,aAAcC,EAAe,GAAGF,CAC/DI,EAAAA,EAAA,cAACN,EAAA,CACC,WAAYa,EACZ,UAAWF,CACb,CAAA,EACCL,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,CAAK,EAAIE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}
+{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-xl',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2'\n  ],\n  variants: {\n    theme: {\n      primary: ['bg-primary-200'],\n      marsh: ['bg-marsh-200']\n    }\n  }\n})\n\nconst SelectionIndicator = styled('div', {\n  base: [\"content-['']\", 'absolute', 'bg-white', 'rounded-lg'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n      {React.Children.map(props.children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"+KAQA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,KAAM,CACJ,WACA,MACA,aACA,kBACA,iCACA,gBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,gBAAgB,EAC1B,MAAO,CAAC,cAAc,CACxB,CACF,CACF,CAAC,EAEKC,EAAqBF,EAAO,MAAO,CACvC,KAAM,CAAC,eAAgB,WAAY,WAAY,YAAY,EAC3D,SAAU,CACR,WAAY,CACV,KAAM,CAAC,eAAgB,UAAW,gBAAgB,EAClD,MAAO,CAAC,iBAAiB,CAC3B,CACF,CACF,CAAC,EAEYG,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAE,CAAA,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,CAAa,EAChD,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAsB,EAC3DJ,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EACF,CAAA,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACT,EAAA,CAAkB,MAAOM,EAAO,aAAcC,EAAe,GAAGF,CAC/DI,EAAAA,EAAA,cAACN,EAAA,CAAmB,WAAYa,EAAe,MAAOF,CAAiB,CAAA,EACtEL,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,CAAK,EAAIE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}

package/dist/components/segmented-control/SegmentedControlRoot.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { SegmentedControlTheme } from './SegmentedControl.types';
+declare const StyledSegmentedControlRoot: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>, never> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>, "size"> & {
+    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SegmentedControlRootProps extends React.ComponentProps<typeof StyledSegmentedControlRoot> {
+    theme?: SegmentedControlTheme;
+}
+export declare const SegmentedControlRoot: ({ size, theme, defaultValue, children, ...props }: React.PropsWithChildren<SegmentedControlRootProps>) => React.JSX.Element;
+export {};

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1 @@
+export * from './SegmentedControl';

package/dist/components/select/Select.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Override } from '../../utilities/types';
+declare const StyledSelect: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
+    ref?: ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
+}, "size" | "appearance" | "state"> & {
+    size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
+    state?: ("error" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "error">>) | undefined;
+    appearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export type SelectProps = Override<React.ComponentProps<typeof StyledSelect>, {
+    as?: never;
+    placeholder?: string;
+}>;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & React.RefAttributes<HTMLSelectElement>>;
+export {};

package/dist/components/select/Select.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as p}from"../../styled.js";const c=p("select",{base:["bg-(image:--bg-chevron)","appearance-none","[background-repeat:no-repeat,repeat-x]","rounded-md","text-grey-1000","block","font-body","font-normal","leading-[1.4]","w-full","hover:cursor-pointer","-ms-expand:hidden","disabled:opacity-30","disabled:cursor-not-allowed","*[[disabled]]:opacity-30","*[[disabled]]:cursor-not-allowed"],variants:{size:{sm:["bg-position-[right_--spacing(2)_top_50%,0_0]","bg-size-[18px_auto,100%]","text-sm","h-8","pl-2","pr-8"],md:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-10","pl-3","pr-10"],lg:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-12","pl-3","pr-10"]},state:{error:{}},appearance:{standard:["bg-white","border","border-grey-700","focus:border-primary-800","focus:outline-none"],modern:["bg-grey-100","border-none","focus:outline-2","focus:outline-blue-800","focus:outline-offset-1","focus:outline-solid","focus:z-1"]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus:outline-danger"]}]}),t=r.forwardRef(({placeholder:o,children:n,size:d="md",appearance:s="standard",...e},i)=>{const a={size:d,appearance:s,ref:i,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(a.defaultValue=""),r.createElement(c,{...a},o&&r.createElement("option",{disabled:!0,hidden:!0,value:""},o),n)});t.displayName="Select";export{t as Select};
+import*as r from"react";import{styled as p}from"../../styled.js";const c=p("select",{base:["bg-(image:--bg-chevron)","appearance-none","[background-repeat:no-repeat,repeat-x]","rounded-md","text-grey-1000","block","font-body","font-normal","leading-[1.4]","w-full","hover:cursor-pointer","-ms-expand:hidden","disabled:opacity-30","disabled:cursor-not-allowed","*[[disabled]]:opacity-30","*[[disabled]]:cursor-not-allowed"],variants:{size:{sm:["bg-position-[right_--spacing(2)_top_50%,0_0]","bg-size-[18px_auto,100%]","text-sm","h-8","pl-2","pr-8"],md:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-10","pl-3","pr-10"],lg:["bg-position-[right_--spacing(3)_top_50%,0_0]","bg-size-[20px_auto,100%]","text-md","h-12","pl-3","pr-10"]},state:{error:[]},appearance:{standard:["bg-white","border","border-grey-700","focus:border-primary-800","focus:outline-none"],modern:["bg-grey-100","border-none","focus:outline-2","focus:outline-blue-800","focus:outline-offset-1","focus:outline-solid","focus:z-1"]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus:outline-danger"]}]}),t=r.forwardRef(({placeholder:o,children:n,size:d="md",appearance:s="standard",...e},i)=>{const a={size:d,appearance:s,ref:i,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(a.defaultValue=""),r.createElement(c,{...a},o&&r.createElement("option",{disabled:!0,hidden:!0,value:""},o),n)});t.displayName="Select";export{t as Select};
 //# sourceMappingURL=Select.js.map

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  base: [\n    'bg-(image:--bg-chevron)',\n    'appearance-none',\n    '[background-repeat:no-repeat,repeat-x]',\n    'rounded-md',\n    'text-grey-1000',\n    'block',\n    'font-body',\n    'font-normal',\n    'leading-[1.4]',\n    'w-full',\n    'hover:cursor-pointer',\n    '-ms-expand:hidden',\n    'disabled:opacity-30',\n    'disabled:cursor-not-allowed',\n    '*[[disabled]]:opacity-30',\n    '*[[disabled]]:cursor-not-allowed'\n  ],\n  variants: {\n    size: {\n      sm: [\n        'bg-position-[right_--spacing(2)_top_50%,0_0]',\n        'bg-size-[18px_auto,100%]',\n        'text-sm',\n        'h-8',\n        'pl-2',\n        'pr-8'\n      ],\n      md: [\n        'bg-position-[right_--spacing(3)_top_50%,0_0]',\n        'bg-size-[20px_auto,100%]',\n        'text-md',\n        'h-10',\n        'pl-3',\n        'pr-10'\n      ],\n      lg: [\n        'bg-position-[right_--spacing(3)_top_50%,0_0]',\n        'bg-size-[20px_auto,100%]',\n        'text-md',\n        'h-12',\n        'pl-3',\n        'pr-10'\n      ]\n    },\n    state: {\n      error: {}\n    },\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-700',\n        'focus:border-primary-800',\n        'focus:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus:outline-2',\n        'focus:outline-blue-800',\n        'focus:outline-offset-1',\n        'focus:outline-solid',\n        'focus:z-1'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus:outline-danger']\n    }\n  ]\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.ForwardRefExoticComponent<SelectProps> =\n  React.forwardRef(\n    (\n      {\n        placeholder,\n        children,\n        size = 'md',\n        appearance = 'standard',\n        ...remainingProps\n      },\n      ref\n    ) => {\n      const props = { size, appearance, ref, ...remainingProps }\n\n      if (\n        [remainingProps.value, remainingProps.defaultValue].every(\n          (value) => value === undefined\n        )\n      ) {\n        props.defaultValue = ''\n      }\n\n      return (\n        <StyledSelect {...props}>\n          {placeholder && (\n            <option disabled hidden value=\"\">\n              {placeholder}\n            </option>\n          )}\n          {children}\n        </StyledSelect>\n      )\n    }\n  )\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","Select","React","placeholder","children","size","appearance","remainingProps","ref","props","value"],"mappings":"iEAKA,MAAMA,EAAeC,EAAO,SAAU,CACpC,KAAM,CACJ,0BACA,kBACA,yCACA,aACA,iBACA,QACA,YACA,cACA,gBACA,SACA,uBACA,oBACA,sBACA,8BACA,2BACA,kCACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,+CACA,2BACA,UACA,MACA,OACA,MACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,CACF,EACA,MAAO,CACL,MAAO,EACT,EACA,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,2BACA,oBACF,EACA,OAAQ,CACN,cACA,cACA,kBACA,yBACA,yBACA,sBACA,WACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,sBAAsB,CACnD,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,CACE,CACE,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAQ,CAAE,KAAAJ,EAAM,WAAAC,EAAY,IAAAE,EAAK,GAAGD,CAAe,EAEzD,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBP,EAAA,cAACH,EAAA,CAAc,GAAGU,CACfN,EAAAA,GACCD,EAAA,cAAC,SAAA,CAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,EAAA,EAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  base: [\n    'bg-(image:--bg-chevron)',\n    'appearance-none',\n    '[background-repeat:no-repeat,repeat-x]',\n    'rounded-md',\n    'text-grey-1000',\n    'block',\n    'font-body',\n    'font-normal',\n    'leading-[1.4]',\n    'w-full',\n    'hover:cursor-pointer',\n    '-ms-expand:hidden',\n    'disabled:opacity-30',\n    'disabled:cursor-not-allowed',\n    '*[[disabled]]:opacity-30',\n    '*[[disabled]]:cursor-not-allowed'\n  ],\n  variants: {\n    size: {\n      sm: [\n        'bg-position-[right_--spacing(2)_top_50%,0_0]',\n        'bg-size-[18px_auto,100%]',\n        'text-sm',\n        'h-8',\n        'pl-2',\n        'pr-8'\n      ],\n      md: [\n        'bg-position-[right_--spacing(3)_top_50%,0_0]',\n        'bg-size-[20px_auto,100%]',\n        'text-md',\n        'h-10',\n        'pl-3',\n        'pr-10'\n      ],\n      lg: [\n        'bg-position-[right_--spacing(3)_top_50%,0_0]',\n        'bg-size-[20px_auto,100%]',\n        'text-md',\n        'h-12',\n        'pl-3',\n        'pr-10'\n      ]\n    },\n    state: {\n      error: []\n    },\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-700',\n        'focus:border-primary-800',\n        'focus:outline-none'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus:outline-2',\n        'focus:outline-blue-800',\n        'focus:outline-offset-1',\n        'focus:outline-solid',\n        'focus:z-1'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus:outline-danger']\n    }\n  ]\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      placeholder,\n      children,\n      size = 'md',\n      appearance = 'standard',\n      ...remainingProps\n    },\n    ref\n  ) => {\n    // Type assertion needed due to responsive variant size prop compatibility\n    const props: React.ComponentProps<typeof StyledSelect> = {\n      size,\n      appearance,\n      ref,\n      ...remainingProps\n    }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","Select","React","placeholder","children","size","appearance","remainingProps","ref","props","value"],"mappings":"iEAKA,MAAMA,EAAeC,EAAO,SAAU,CACpC,KAAM,CACJ,0BACA,kBACA,yCACA,aACA,iBACA,QACA,YACA,cACA,gBACA,SACA,uBACA,oBACA,sBACA,8BACA,2BACA,kCACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,+CACA,2BACA,UACA,MACA,OACA,MACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,EACA,GAAI,CACF,+CACA,2BACA,UACA,OACA,OACA,OACF,CACF,EACA,MAAO,CACL,MAAO,EACT,EACA,WAAY,CACV,SAAU,CACR,WACA,SACA,kBACA,2BACA,oBACF,EACA,OAAQ,CACN,cACA,cACA,kBACA,yBACA,yBACA,sBACA,WACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,MAAO,CAAC,eAAe,CACzB,EACA,CACE,MAAO,QACP,WAAY,SACZ,MAAO,CAAC,kBAAmB,sBAAsB,CACnD,CACF,CACF,CAAC,EAgBYC,EAASC,EAAM,WAC1B,CACE,CACE,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,GAAGC,CACL,EACAC,IACG,CAEH,MAAMC,EAAmD,CACvD,KAAAJ,EACA,WAAAC,EACA,IAAAE,EACA,GAAGD,CACL,EAEA,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBP,EAAA,cAACH,EAAA,CAAc,GAAGU,CACfN,EAAAA,GACCD,EAAA,cAAC,SAAA,CAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,EAAA,EAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}

package/dist/components/select/index.d.ts

@@ -0,0 +1,2 @@
+export type { SelectProps } from './Select';
+export { Select } from './Select';

package/dist/components/select-field/SelectField.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
+import { SelectProps } from '../../components/select';
+type SelectFieldProps = SelectProps & FieldElementWrapperProps;
+export declare const SelectField: {
+    ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }: SelectFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/select-field/index.d.ts

@@ -0,0 +1 @@
+export { SelectField } from './SelectField';

package/dist/components/side-bar/SideBar.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Theme } from '../../styled';
+declare const Root: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+}, "type"> & {
+    type?: ("static" | "expandable" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "static" | "expandable">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type SideBarProps = React.ComponentProps<typeof Root> & {
+    className?: string;
+    offset?: number | string;
+} & React.ComponentProps<typeof Theme>;
+export declare const SideBar: {
+    ({ theme, className, children, type, offset, style, ...rest }: SideBarProps): React.JSX.Element;
+    Brand: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+        ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
+    }, never> & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+    BrandLogo: {
+        (props: Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+            ref?: ((instance: HTMLImageElement | null) => void) | React.RefObject<HTMLImageElement> | null | undefined;
+        }, "fluid"> & {
+            fluid?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+        } & {
+            as?: React.ElementType;
+        }, "ref"> & React.RefAttributes<HTMLImageElement>, "ref">, "as"> & {
+            as?: never;
+        }): React.JSX.Element;
+        displayName: string;
+    };
+    BrandName: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+        ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
+    }, "size" | "weight" | "family" | "noCapsize"> & {
+        weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
+        family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+        size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
+        noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    } & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, "as"> & {
+        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>, never> & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Header: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, never> & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Body: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, never> & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+    }, never> & {
+        as?: React.ElementType;
+    }, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    displayName: string;
+};
+export {};

package/dist/components/side-bar/SideBar.js

@@ -1,2 +1,2 @@
-import x from"clsx";import a from"react";import{useInteractOutside as v,useFocusWithin as B,useHover as y}from"react-aria";import{styled as i,Theme as g}from"../../styled.js";import{SideBarBrand as w,SideBarBrandLogo as E,SideBarBrandName as S,SideBarHeader as _,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as F}from"./SideBarContext.js";const k={"--background":"white","--text":"var(--color-grey-800)","--border":"var(--color-grey-200)"},W=i("div",{base:["sticky","z-1"],variants:{type:{static:[],expandable:["w-22"]}}}),P=i("div",{base:["bg-(--background)","border-r","border-r-(--border)","shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]","flex","flex-col","h-full","overflow-hidden","will-change-width","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-shadow","motion-safe:transition-[width]"],variants:{type:{static:[],expandable:[]},isExpanded:{true:["w-[16rem]"],false:["w-22"]}},compoundVariants:[{isExpanded:!0,type:"expandable",class:["shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]"]}]}),V=i("div",{base:["bottom-0","left-0","absolute","right-0","top-0","transition-all"],variants:{isVisible:{true:["delay-0","visible"],false:["delay-50","invisible"]}}}),e=({theme:n,className:d,children:l,type:t="expandable",offset:p="0px",style:m,...c})=>{const[o,r]=a.useState(t==="static"),s=a.useRef(null);v({ref:s,onInteractOutside:()=>r(!1)});const{focusWithinProps:f}=B({onFocusWithin:()=>r(!0),onBlurWithin:()=>r(!1)}),{hoverProps:u,isHovered:b}=y({onHoverStart:()=>r(!0),onHoverEnd:()=>r(!1)}),h=t==="expandable"?{...f,...u,onTouchEnd:()=>r(!0),ref:s}:{};return a.createElement(F.Provider,{value:{isExpanded:o}},a.createElement(g,{theme:n||k},a.createElement(W,{...c,style:{...m,"--offset":p},type:t,className:x("h-[calc(100svh-var(--offset))]","top-(--offset)",d)},a.createElement(P,{...h,isExpanded:o,type:t},l,t==="expandable"&&a.createElement(V,{isVisible:!b&&!o})))))};e.Brand=w,e.BrandLogo=E,e.BrandName=S,e.Header=_,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
+import x from"clsx";import a from"react";import{useInteractOutside as v,useFocusWithin as B,useHover as y}from"react-aria";import{styled as i,Theme as g}from"../../styled.js";import{SideBarBrand as w,SideBarBrandLogo as E,SideBarBrandName as S,SideBarHeader as _,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as k}from"./SideBarContext.js";const F={"--background":"white","--text":"var(--color-grey-800)","--border":"var(--color-grey-200)"},W=i("div",{base:["sticky","z-1"],variants:{type:{static:[],expandable:["w-22"]}}}),P=i("div",{base:["bg-(--background)","border-r","border-r-(--border)","shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]","flex","flex-col","h-full","overflow-hidden","will-change-width","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-[shadow,width]"],variants:{type:{static:[],expandable:[]},isExpanded:{true:["w-[16rem]"],false:["w-22"]}},compoundVariants:[{isExpanded:!0,type:"expandable",class:["shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]"]}]}),T=i("div",{base:["bottom-0","left-0","absolute","right-0","top-0","transition-all"],variants:{isVisible:{true:["delay-0","visible"],false:["delay-50","invisible"]}}}),e=({theme:d,className:n,children:l,type:t="expandable",offset:p="0px",style:c,...m})=>{const[o,r]=a.useState(t==="static"),s=a.useRef(null);v({ref:s,onInteractOutside:()=>r(!1)});const{focusWithinProps:f}=B({onFocusWithin:()=>r(!0),onBlurWithin:()=>r(!1)}),{hoverProps:u,isHovered:b}=y({onHoverStart:()=>r(!0),onHoverEnd:()=>r(!1)}),h=t==="expandable"?{...f,...u,onTouchEnd:()=>r(!0),ref:s}:{};return a.createElement(k.Provider,{value:{isExpanded:o}},a.createElement(g,{theme:d||F},a.createElement(W,{...m,style:{...c,"--offset":p},type:t,className:x("h-[calc(100svh-var(--offset))]","top-(--offset)",n)},a.createElement(P,{...h,isExpanded:o,type:t},l,t==="expandable"&&a.createElement(T,{isVisible:!b&&!o})))))};e.Brand=w,e.BrandLogo=E,e.BrandName=S,e.Header=_,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
 //# sourceMappingURL=SideBar.js.map

package/dist/components/side-bar/SideBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\n\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-shadow',\n    'motion-safe:transition-[width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n}\n\nexport const SideBar = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={clsx(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["light","Root","styled","Content","PointerBlocker","SideBar","theme","className","children","type","offset","style","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","Theme","clsx","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"6XAgBA,MAAMA,EAAQ,CACZ,eAAgB,QAChB,SAAU,wBACV,WAAY,uBACd,EAEMC,EAAOC,EAAO,MAAO,CACzB,KAAM,CAAC,SAAU,KAAK,EACtB,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CAAC,MAAM,CACrB,CACF,CACF,CAAC,EAEKC,EAAUD,EAAO,MAAO,CAC5B,KAAM,CACJ,oBACA,WACA,sBACA,2CACA,OACA,WACA,SACA,kBACA,oBACA,2BACA,uBACA,gCACA,gCACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CAAA,EACR,WAAY,CAAA,CACd,EACA,WAAY,CACV,KAAM,CAAC,WAAW,EAClB,MAAO,CAAC,MAAM,CAChB,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,MAAO,CAAC,4CAA4C,CACtD,CACF,CACF,CAAC,EAEKE,EAAiBF,EAAO,MAAO,CACnC,KAAM,CACJ,WACA,SACA,WACA,UACA,QACA,gBACF,EACA,SAAU,CACR,UAAW,CACT,KAAM,CAAC,UAAW,SAAS,EAC3B,MAAO,CAAC,WAAY,WAAW,CACjC,CACF,CACF,CAAC,EAOYG,EAAU,CAAC,CACtB,MAAAC,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,MAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJd,IAAS,aACL,CACE,GAAGS,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAAA,EAEN,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,CAAA,EAC3CE,EAAA,cAACU,EAAA,CAAM,MAAOnB,GAASN,GACrBe,EAAA,cAACd,EAAA,CACE,GAAGW,EACJ,MAAO,CAAE,GAAGD,EAAO,WAAYD,CAAO,EACtC,KAAMD,EACN,UAAWiB,EACT,iCACA,iBACAnB,CACF,CAEAQ,EAAAA,EAAA,cAACZ,EAAA,CAAS,GAAGoB,EAAiB,WAAYV,EAAY,KAAMJ,GACzDD,EAKAC,IAAS,cACRM,EAAA,cAACX,EAAA,CAAe,UAAW,CAACiB,GAAa,CAACR,CAAY,CAAA,CAE1D,CACF,CACF,CACF,CAEJ,EAEAR,EAAQ,MAAQsB,EAChBtB,EAAQ,UAAYuB,EACpBvB,EAAQ,UAAYwB,EACpBxB,EAAQ,OAASyB,EACjBzB,EAAQ,KAAO0B,EACf1B,EAAQ,OAAS2B,EAEjB3B,EAAQ,YAAc"}
+{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\n\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nexport const SideBar = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={clsx(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["light","Root","styled","Content","PointerBlocker","SideBar","theme","className","children","type","offset","style","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","Theme","clsx","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"6XAgBA,MAAMA,EAAQ,CACZ,eAAgB,QAChB,SAAU,wBACV,WAAY,uBACd,EAEMC,EAAOC,EAAO,MAAO,CACzB,KAAM,CAAC,SAAU,KAAK,EACtB,SAAU,CACR,KAAM,CACJ,OAAQ,CAAA,EACR,WAAY,CAAC,MAAM,CACrB,CACF,CACF,CAAC,EAEKC,EAAUD,EAAO,MAAO,CAC5B,KAAM,CACJ,oBACA,WACA,sBACA,2CACA,OACA,WACA,SACA,kBACA,oBACA,2BACA,uBACA,uCACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CACd,CAAA,EACA,WAAY,CACV,KAAM,CAAC,WAAW,EAClB,MAAO,CAAC,MAAM,CAChB,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,MAAO,CAAC,4CAA4C,CACtD,CACF,CACF,CAAC,EAEKE,EAAiBF,EAAO,MAAO,CACnC,KAAM,CACJ,WACA,SACA,WACA,UACA,QACA,gBACF,EACA,SAAU,CACR,UAAW,CACT,KAAM,CAAC,UAAW,SAAS,EAC3B,MAAO,CAAC,WAAY,WAAW,CACjC,CACF,CACF,CAAC,EAOYG,EAAU,CAAC,CACtB,MAAAC,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,MAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJd,IAAS,aACL,CACE,GAAGS,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAAA,EAEN,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,CAAA,EAC3CE,EAAA,cAACU,EAAA,CAAM,MAAOnB,GAASN,GACrBe,EAAA,cAACd,EAAA,CACE,GAAGW,EACJ,MAAO,CAAE,GAAGD,EAAO,WAAYD,CAAO,EACtC,KAAMD,EACN,UAAWiB,EACT,iCACA,iBACAnB,CACF,CAEAQ,EAAAA,EAAA,cAACZ,EAAA,CAAS,GAAGoB,EAAiB,WAAYV,EAAY,KAAMJ,GACzDD,EAKAC,IAAS,cACRM,EAAA,cAACX,EAAA,CAAe,UAAW,CAACiB,GAAa,CAACR,CAAY,CAAA,CAE1D,CACF,CACF,CACF,CAEJ,EAEAR,EAAQ,MAAQsB,EAChBtB,EAAQ,UAAYuB,EACpBvB,EAAQ,UAAYwB,EACpBxB,EAAQ,OAASyB,EACjBzB,EAAQ,KAAO0B,EACf1B,EAAQ,OAAS2B,EAEjB3B,EAAQ,YAAc"}

package/dist/components/side-bar/SideBarComponents.d.ts

@@ -0,0 +1,46 @@
+export declare const SideBarHeader: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SideBarBody: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SideBarFooter: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SideBarBrand: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const SideBarBrandLogo: {
+    (props: Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+        ref?: ((instance: HTMLImageElement | null) => void) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    }, "fluid"> & {
+        fluid?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+    } & {
+        as?: import("react").ElementType;
+    }, "ref"> & import("react").RefAttributes<HTMLImageElement>, "ref">, "as"> & {
+        as?: never;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+export declare const SideBarBrandName: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+}, "size" | "weight" | "family" | "noCapsize"> & {
+    weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
+    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+    size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
+    noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "as"> & {
+    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, never> & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/side-bar/SideBarContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare const SideBarContext: React.Context<{
+    isExpanded?: boolean;
+}>;
+export declare const useSidebarState: () => {
+    isExpanded?: boolean;
+};

package/dist/components/side-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { SideBar } from './SideBar';
+export { useSidebarState } from './SideBarContext';

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SliderSteps } from './SliderSteps';
+import { SliderValue } from './SliderValue';
+declare const StyledTrack: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-slider").SliderTrackProps & React.RefAttributes<HTMLSpanElement>, "theme"> & {
+    theme?: ("light" | "tonal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "light" | "tonal">>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const StyledSlider: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>, never> & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export type SliderProps = React.ComponentProps<typeof StyledSlider> & React.ComponentProps<typeof StyledTrack>;
+type SliderType = ReturnType<typeof React.forwardRef<HTMLSpanElement, SliderProps>> & {
+    Value: typeof SliderValue;
+    Steps: typeof SliderSteps;
+};
+export declare const Slider: SliderType;
+export {};

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-round',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-round',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-round',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  React.ComponentProps<typeof StyledTrack>\n\ntype SliderType = React.ForwardRefExoticComponent<SliderProps> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider: SliderType = React.forwardRef(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      className,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper className={className}>\n        <StyledSlider\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack theme={theme}>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","className","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"sXASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,KAAM,CACJ,gBACA,OACA,WACA,oCACA,iCACF,EACA,SAAU,CACR,MAAO,CACL,MAAO,CAAC,UAAU,EAClB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,KAAM,CACJ,eACA,OACA,WACA,aACA,cACA,iBACA,oCACA,uCACA,kCACA,8BACA,qBACF,CACF,CAAC,EAEKC,EAAcJ,EAAOK,EAAO,CAChC,KAAM,CACJ,iBACA,gBACA,SACA,WACA,8BACA,qBACF,CACF,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,KAAM,CACJ,iBACA,gBACA,QACA,SACA,wBACA,kBACA,yBACA,4BACA,sBACA,8BACA,qBACF,CACF,CAAC,EAUYC,EAAqBC,EAAM,WACtC,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,UAAWL,CAAAA,EACrBN,EAAA,cAACP,EAAA,CACC,aAAcS,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAAAA,EAEJR,EAAA,cAACV,EAAA,CAAY,MAAOe,CAClBL,EAAAA,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQ,OAAAgB,CAAAA,CAAAA,CAAK,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}
+{"version":3,"file":"Slider.js","sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { CSSWrapper } from '~/utilities'\n\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-round',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-round',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-round',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  React.ComponentProps<typeof StyledTrack>\n\ntype SliderType = ReturnType<\n  typeof React.forwardRef<HTMLSpanElement, SliderProps>\n> & {\n  Value: typeof SliderValue\n  Steps: typeof SliderSteps\n}\n\nexport const Slider = React.forwardRef<HTMLSpanElement, SliderProps>(\n  (\n    {\n      value,\n      defaultValue,\n      min = 0,\n      max = 100,\n      theme = 'tonal',\n      className,\n      children,\n      ...remainingProps\n    },\n    ref\n  ) => {\n    const values = value || defaultValue\n    return (\n      <CSSWrapper className={className}>\n        <StyledSlider\n          defaultValue={defaultValue}\n          value={value}\n          min={min}\n          max={max}\n          ref={ref}\n          {...remainingProps}\n        >\n          <StyledTrack theme={theme}>\n            <StyledRange />\n          </StyledTrack>\n          {values?.length &&\n            values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n        </StyledSlider>\n        {children}\n      </CSSWrapper>\n    )\n  }\n) as SliderType\n\nSlider.Value = SliderValue\nSlider.Steps = SliderSteps\n\nSlider.displayName = 'Slider'\n"],"names":["StyledTrack","styled","Track","StyledSlider","Root","StyledRange","Range","StyledThumb","Thumb","Slider","React","value","defaultValue","min","max","theme","className","children","remainingProps","ref","values","CSSWrapper","_","i","SliderValue","SliderSteps"],"mappings":"sXASA,MAAMA,EAAcC,EAAOC,EAAO,CAChC,KAAM,CACJ,gBACA,OACA,WACA,oCACA,iCACF,EACA,SAAU,CACR,MAAO,CACL,MAAO,CAAC,UAAU,EAClB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAEKC,EAAeF,EAAOG,EAAM,CAChC,KAAM,CACJ,eACA,OACA,WACA,aACA,cACA,iBACA,oCACA,uCACA,kCACA,8BACA,qBACF,CACF,CAAC,EAEKC,EAAcJ,EAAOK,EAAO,CAChC,KAAM,CACJ,iBACA,gBACA,SACA,WACA,8BACA,qBACF,CACF,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,KAAM,CACJ,iBACA,gBACA,QACA,SACA,wBACA,kBACA,yBACA,4BACA,sBACA,8BACA,qBACF,CACF,CAAC,EAYYC,EAASC,EAAM,WAC1B,CACE,CACE,MAAAC,EACA,aAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,IACN,MAAAC,EAAQ,QACR,UAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EACAC,IACG,CACH,MAAMC,EAAST,GAASC,EACxB,OACEF,EAAA,cAACW,EAAA,CAAW,UAAWL,CAAAA,EACrBN,EAAA,cAACP,EAAA,CACC,aAAcS,EACd,MAAOD,EACP,IAAKE,EACL,IAAKC,EACL,IAAKK,EACJ,GAAGD,CAAAA,EAEJR,EAAA,cAACV,EAAA,CAAY,MAAOe,CAClBL,EAAAA,EAAA,cAACL,EAAA,IAAY,CACf,GACCe,GAAA,KAAA,OAAAA,EAAQ,SACPA,EAAO,IAAI,CAACE,EAAGC,IAAMb,EAAA,cAACH,EAAA,CAAY,IAAK,QAAQ,OAAAgB,CAAAA,CAAAA,CAAK,CAAE,CAC1D,EACCN,CACH,CAEJ,CACF,EAEAR,EAAO,MAAQe,EACff,EAAO,MAAQgB,EAEfhB,EAAO,YAAc"}

package/dist/components/slider/SliderSteps.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type SliderStepsType = {
+    steps?: {
+        label: string;
+        value: number;
+    }[];
+};
+type SliderStepsProps = {
+    min: number;
+    max: number;
+} & SliderStepsType;
+export declare const SliderSteps: ({ min, max, steps }: SliderStepsProps) => React.JSX.Element | null;
+export {};

package/dist/components/slider/SliderValue.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type SliderValueType = {
+    outputLabel?: (value: number | number[]) => string;
+};
+type SliderValueProps = SliderValueType & {
+    value?: number[];
+};
+export declare const SliderValue: ({ value, outputLabel }: SliderValueProps) => React.JSX.Element;
+export {};

package/dist/components/slider/index.d.ts

@@ -0,0 +1 @@
+export * from './Slider';

package/dist/components/slider-field/SliderField.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FieldElementWrapperProps } from '../../components/field-wrapper';
+import { SliderProps } from '../../components/slider';
+import { SliderStepsType } from '../../components/slider/SliderSteps';
+import { SliderValueType } from '../slider/SliderValue';
+type SliderFieldProps = SliderProps & SliderStepsType & SliderValueType & FieldElementWrapperProps;
+export declare const SliderField: {
+    ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min, max, steps, ...remainingProps }: SliderFieldProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/slider-field/index.d.ts

@@ -0,0 +1 @@
+export { SliderField } from './SliderField';

package/dist/components/sortable/Handle.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Icon } from '../icon';
+export declare const StyledHandle: React.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
+}, "theme" | "size" | "appearance" | "isRounded"> & {
+    theme?: ("warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "warning" | "success" | "neutral" | "primary" | "white" | "primaryDark" | "danger">>) | undefined;
+    appearance?: ("simple" | "outline" | "solid" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "simple" | "outline" | "solid">>) | undefined;
+    size?: ("sm" | "md" | "lg" | "xs" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs">>) | undefined;
+    isRounded?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>, "children" | "label" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
+    as?: string | React.ReactNode;
+    children: React.ReactNode;
+    label: string;
+} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "isDragging"> & {
+    isDragging?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
+} & {
+    as?: React.ElementType;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export type THandleProps = Omit<React.ComponentProps<typeof StyledHandle>, 'children'> & Pick<React.ComponentProps<typeof Icon>, 'size'>;
+export declare const Handle: React.ForwardRefExoticComponent<Omit<THandleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/sortable/Handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Handle.js","sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle: React.ForwardRefExoticComponent<THandleProps> =\n  React.forwardRef(({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  })\n\nHandle.displayName = 'Handle'\n"],"names":["StyledHandle","styled","ActionIcon","Handle","React","isDragging","size","rest","ref","Icon","DragHandle"],"mappings":"oNAQa,MAAAA,EAAeC,EAAOC,EAAY,CAC7C,KAAM,CACJ,gBACA,eACA,kCACA,8BACA,qBACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CAAC,iBAAiB,EACxB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAQYC,EACXC,EAAM,WAAW,CAAC,CAAE,WAAAC,EAAY,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAE7CJ,EAAA,cAACJ,EACC,CAAA,IAAKQ,EACL,WAAYH,EACZ,WAAW,SACX,WAAY,GACZ,KAAMC,EACL,GAAGC,CAAAA,EAEJH,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAY,CACxB,CAEH,EAEHP,EAAO,YAAc"}
+{"version":3,"file":"Handle.js","sources":["../../../src/components/sortable/Handle.tsx"],"sourcesContent":["import { DragHandle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nexport const StyledHandle = styled(ActionIcon, {\n  base: [\n    'text-inherit!',\n    'fill-current',\n    'disabled:**:pointer-events-none',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    isDragging: {\n      true: ['cursor-grabbing'],\n      false: ['cursor-grab']\n    }\n  }\n})\n\nexport type THandleProps = Omit<\n  React.ComponentProps<typeof StyledHandle>,\n  'children'\n> &\n  Pick<React.ComponentProps<typeof Icon>, 'size'>\n\nexport const Handle = React.forwardRef<HTMLButtonElement, THandleProps>(\n  ({ isDragging, size, ...rest }, ref) => {\n    return (\n      <StyledHandle\n        ref={ref}\n        isDragging={isDragging}\n        appearance=\"simple\"\n        hasTooltip={false}\n        size={size}\n        {...rest}\n      >\n        <Icon is={DragHandle} />\n      </StyledHandle>\n    )\n  }\n)\n\nHandle.displayName = 'Handle'\n"],"names":["StyledHandle","styled","ActionIcon","Handle","React","isDragging","size","rest","ref","Icon","DragHandle"],"mappings":"oNAQa,MAAAA,EAAeC,EAAOC,EAAY,CAC7C,KAAM,CACJ,gBACA,eACA,kCACA,8BACA,qBACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CAAC,iBAAiB,EACxB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EAQYC,EAASC,EAAM,WAC1B,CAAC,CAAE,WAAAC,EAAY,KAAAC,EAAM,GAAGC,CAAK,EAAGC,IAE5BJ,EAAA,cAACJ,EACC,CAAA,IAAKQ,EACL,WAAYH,EACZ,WAAW,SACX,WAAY,GACZ,KAAMC,EACL,GAAGC,CAAAA,EAEJH,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAAA,CAAY,CACxB,CAGN,EAEAP,EAAO,YAAc"}

package/dist/components/sortable/SortableHandle.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { THandleProps } from './Handle';
+export type TSortableHandleProps = {
+    targetId: React.ReactText;
+    disabled?: boolean;
+    label?: string;
+} & Omit<THandleProps, 'label'>;
+export declare const SortableHandle: {
+    ({ targetId, disabled, label, ...rest }: TSortableHandleProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/sortable/SortableItem.d.ts

@@ -0,0 +1,14 @@
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import * as React from 'react';
+export type TSortableItemProps = {
+    id: UniqueIdentifier;
+    asChild?: boolean;
+    isDragHandle?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>;
+};
+export declare const SortableItem: {
+    ({ id, asChild, className, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<TSortableItemProps>): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/sortable/SortableItem.js

@@ -1,2 +1,2 @@
-import{useSortable as p}from"@dnd-kit/sortable";import{Slot as y}from"@radix-ui/react-slot";import f from"clsx";import*as g from"react";const s=({id:r,asChild:o=!1,className:d,style:i,isDragHandle:a=!1,disabled:t,...n})=>{const{transform:e,setNodeRef:c,isDragging:l,listeners:m,attributes:b}=p({id:r});return g.createElement(o?y:"div",{ref:c,style:{...i,"--scale":1,"--translate-x":(e==null?void 0:e.x)||0,"--translate-y":(e==null?void 0:e.y)||0},"data-dragging":l,"data-disabled":t,...a&&!t?m:{},...a&&!t?b:{},...n,className:f("translate-x-[calc(var(--translate-x)*1px)]","translate-y-[calc(var(--translate-y)*1px)]","scale-(--scale)",l&&"z-5","disabled:**:pointer-events-none","disabled:cursor-not-allowed","disabled:opacity-30",a&&["[object Object]"],d)})};s.displayName="SortableItem";export{s as SortableItem};
+import{useSortable as p}from"@dnd-kit/sortable";import{Slot as g}from"@radix-ui/react-slot";import u from"clsx";import*as y from"react";const s=({id:l,asChild:o=!1,className:i,style:d,isDragHandle:e=!1,disabled:r,...n})=>{const{transform:a,setNodeRef:c,isDragging:t,listeners:m,attributes:b}=p({id:l});return y.createElement(o?g:"div",{ref:c,style:{...d,"--scale":1,"--translate-x":(a==null?void 0:a.x)||0,"--translate-y":(a==null?void 0:a.y)||0},"data-dragging":t,"data-disabled":r,...e&&!r?m:{},...e&&!r?b:{},...n,className:u("translate-x-[calc(var(--translate-x)*1px)]","translate-y-[calc(var(--translate-y)*1px)]","scale-(--scale)",t&&"z-5","disabled:**:pointer-events-none","disabled:cursor-not-allowed","disabled:opacity-30",e&&(t?"cursor-grabbing":"cursor-grab"),i)})};s.displayName="SortableItem";export{s as SortableItem};
 //# sourceMappingURL=SortableItem.js.map

package/dist/components/sortable/SortableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableItem.js","sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={clsx(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && ['[object Object]'],\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"names":["SortableItem","id","asChild","className","style","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Slot","clsx"],"mappings":"wIAea,MAAAA,EAAe,CAAC,CAC3B,GAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,SAAAC,EACA,GAAGC,CACL,IAAmD,CACjD,KAAM,CAAE,UAAAC,EAAW,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,EAC/DC,EAAY,CAAE,GAAAZ,CAAG,CAAC,EAGpB,OACEa,EAAA,cAFgBZ,EAAUa,EAAO,MAEhC,CACC,IAAKN,EACL,MAAO,CACL,GAAGL,EACH,UAAW,EACX,iBAAiBI,GAAA,KAAAA,OAAAA,EAAW,IAAK,EACjC,iBAAiBA,GAAA,KAAAA,OAAAA,EAAW,IAAK,CACnC,EACA,gBAAeE,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAC,EAC7C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,CAAA,EAC7C,GAAGL,EACJ,UAAWS,EACT,6CACA,6CACA,kBACAN,GAAc,MACd,kCACA,8BACA,sBACAL,GAAgB,CAAC,iBAAiB,EAClCF,CACF,CACF,CAAA,CAEJ,EAEAH,EAAa,YAAc"}
+{"version":3,"file":"SortableItem.js","sources":["../../../src/components/sortable/SortableItem.tsx"],"sourcesContent":["import type { UniqueIdentifier } from '@dnd-kit/core'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { Slot } from '@radix-ui/react-slot'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nexport type TSortableItemProps = {\n  id: UniqueIdentifier\n  asChild?: boolean\n  isDragHandle?: boolean\n  disabled?: boolean\n  className?: string\n  style?: Pick<React.HTMLAttributes<HTMLDivElement>, 'style'>\n}\n\nexport const SortableItem = ({\n  id,\n  asChild = false,\n  className,\n  style,\n  isDragHandle = false,\n  disabled,\n  ...rest\n}: React.PropsWithChildren<TSortableItemProps>) => {\n  const { transform, setNodeRef, isDragging, listeners, attributes } =\n    useSortable({ id })\n\n  const Component = asChild ? Slot : 'div'\n  return (\n    <Component\n      ref={setNodeRef}\n      style={{\n        ...style,\n        '--scale': 1,\n        '--translate-x': transform?.x || 0,\n        '--translate-y': transform?.y || 0\n      }}\n      data-dragging={isDragging}\n      data-disabled={disabled}\n      {...(isDragHandle && !disabled ? listeners : {})}\n      {...(isDragHandle && !disabled ? attributes : {})}\n      {...rest}\n      className={clsx(\n        'translate-x-[calc(var(--translate-x)*1px)]',\n        'translate-y-[calc(var(--translate-y)*1px)]',\n        'scale-(--scale)',\n        isDragging && 'z-5',\n        'disabled:**:pointer-events-none',\n        'disabled:cursor-not-allowed',\n        'disabled:opacity-30',\n        isDragHandle && (isDragging ? 'cursor-grabbing' : 'cursor-grab'),\n        className\n      )}\n    />\n  )\n}\n\nSortableItem.displayName = 'SortableItem'\n"],"names":["SortableItem","id","asChild","className","style","isDragHandle","disabled","rest","transform","setNodeRef","isDragging","listeners","attributes","useSortable","React","Slot","clsx"],"mappings":"wIAea,MAAAA,EAAe,CAAC,CAC3B,GAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,SAAAC,EACA,GAAGC,CACL,IAAmD,CACjD,KAAM,CAAE,UAAAC,EAAW,WAAAC,EAAY,WAAAC,EAAY,UAAAC,EAAW,WAAAC,CAAW,EAC/DC,EAAY,CAAE,GAAAZ,CAAG,CAAC,EAGpB,OACEa,EAAA,cAFgBZ,EAAUa,EAAO,MAEhC,CACC,IAAKN,EACL,MAAO,CACL,GAAGL,EACH,UAAW,EACX,iBAAiBI,GAAA,KAAAA,OAAAA,EAAW,IAAK,EACjC,iBAAiBA,GAAA,KAAAA,OAAAA,EAAW,IAAK,CACnC,EACA,gBAAeE,EACf,gBAAeJ,EACd,GAAID,GAAgB,CAACC,EAAWK,EAAY,CAAC,EAC7C,GAAIN,GAAgB,CAACC,EAAWM,EAAa,GAC7C,GAAGL,EACJ,UAAWS,EACT,6CACA,6CACA,kBACAN,GAAc,MACd,kCACA,8BACA,sBACAL,IAAiBK,EAAa,kBAAoB,eAClDP,CACF,CACF,CAAA,CAEJ,EAEAH,EAAa,YAAc"}

package/dist/components/sortable/SortableRoot.d.ts

@@ -0,0 +1,15 @@
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import * as React from 'react';
+type TSortableRootProps = {
+    sortableIds: React.ReactText[];
+    onSortChange: (onSortChangeData: {
+        order: UniqueIdentifier[];
+        oldIndex: number;
+        newIndex: number;
+    }) => void;
+};
+export declare const SortableRoot: {
+    ({ sortableIds, onSortChange, children }: React.PropsWithChildren<TSortableRootProps>): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/sortable/index.d.ts

@@ -0,0 +1,21 @@
+export declare const Sortable: {
+    Root: {
+        ({ sortableIds, onSortChange, children }: React.PropsWithChildren<{
+            sortableIds: React.ReactText[];
+            onSortChange: (onSortChangeData: {
+                order: import("@dnd-kit/core").UniqueIdentifier[];
+                oldIndex: number;
+                newIndex: number;
+            }) => void;
+        }>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ id, asChild, className, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
+        displayName: string;
+    };
+    Handle: {
+        ({ targetId, disabled, label, ...rest }: import("./SortableHandle").TSortableHandleProps): import("react").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/components/spacer/Spacer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A flexible flex spacer that expands along the major axis of its containing flex layout.
+ * It renders a `div` by default, and takes up any available space.
+ */
+export declare const Spacer: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/spacer/index.d.ts

@@ -0,0 +1 @@
+export { Spacer } from './Spacer';

package/dist/components/stepper/Stepper.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IStepperProps } from './types';
+export declare const Stepper: {
+    ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons, className }: React.PropsWithChildren<IStepperProps>): React.JSX.Element;
+    displayName: string;
+} & {
+    StepBack: ({ label, children, ...rest }: import("./types").IStepperNavigateProps & React.ComponentProps<typeof import("..").Button>) => React.JSX.Element;
+    StepForward: ({ label, children, onClick, ...rest }: import("./types").IStepperNavigateProps & Partial<React.ComponentProps<typeof import("..").Button>>) => React.JSX.Element;
+    Steps: ({ className }: import("./types").IStepperStepsProps) => React.JSX.Element;
+};

package/dist/components/stepper/StepperStepBack.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Button } from '../button';
+import { IStepperNavigateProps } from './types';
+export declare const StepperStepBack: ({ label, children, ...rest }: IStepperNavigateProps & React.ComponentProps<typeof Button>) => React.JSX.Element;