@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

package/dist/components/segmented-control/SegmentedControlHeading.js

@@ -1,23 +1,24 @@
-import { styled as e } from "../../styled.js";
-import { Text as t } from "../text/Text.js";
-import { SegmentedControlContext as n } from "./SegmentedControlContext.js";
-import * as r from "react";
+import { styled } from "../../styled.js";
+import { Text } from "../text/Text.js";
+import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import * as React$1 from "react";
 //#region src/components/segmented-control/SegmentedControlHeading.tsx
-var i = e(t, {
+var StyledHeading = styled(Text, {
 	base: ["font-body", "text-text-regular"],
 	variants: { size: {
 		sm: ["text-sm", "leading-[1.53]"],
 		md: ["text-md", "leading-normal"],
 		lg: ["text-lg", "leading-[1.52]"]
 	} }
-}, { enabledResponsiveVariants: !0 }), a = (e) => {
-	let { size: t } = r.useContext(n);
-	return /* @__PURE__ */ r.createElement(i, {
-		...e,
-		size: t
+}, { enabledResponsiveVariants: true });
+var SegmentedControlHeading = (props) => {
+	const { size } = React$1.useContext(SegmentedControlContext);
+	return /* @__PURE__ */ React$1.createElement(StyledHeading, {
+		...props,
+		size
 	});
 };
 //#endregion
-export { a as SegmentedControlHeading };
+export { SegmentedControlHeading };
 
 //# sourceMappingURL=SegmentedControlHeading.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-regular'],\n    variants: {\n      size: {\n        sm: ['text-sm', 'leading-[1.53]'],\n        md: ['text-md', 'leading-normal'],\n        lg: ['text-lg', 'leading-[1.52]']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,IAAgB,EACpB,GACA;CACE,MAAM,CAAC,aAAa,oBAAoB;CACxC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEY,KACX,MACgB;CAChB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAwB;AAE1D,QAAO,kBAAA,cAAC,GAAD;EAAe,GAAI;EAAa;EAAQ,CAAA"}
+{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledHeading = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-regular'],\n    variants: {\n      size: {\n        sm: ['text-sm', 'leading-[1.53]'],\n        md: ['text-md', 'leading-normal'],\n        lg: ['text-lg', 'leading-[1.52]']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;AAOA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,oBAAoB;CACxC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EACjC,IAAI,CAAC,WAAW,iBAAiB;EAClC,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,2BACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,eAAD;EAAe,GAAI;EAAa;EAAQ,CAAA"}

package/dist/components/segmented-control/SegmentedControlIcon.js

@@ -1,19 +1,20 @@
-import { Icon as e } from "../icon/Icon.js";
-import { SegmentedControlContext as t } from "./SegmentedControlContext.js";
-import * as n from "react";
+import { Icon } from "../icon/Icon.js";
+import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import * as React$1 from "react";
 //#region src/components/segmented-control/SegmentedControlIcon.tsx
-var r = {
+var sizeMap = {
 	sm: "sm",
 	md: "md",
 	lg: "md"
-}, i = (i) => {
-	let { size: a } = n.useContext(t);
-	return /* @__PURE__ */ n.createElement(e, {
-		...i,
-		size: r[a]
+};
+var SegmentedControlIcon = (props) => {
+	const { size } = React$1.useContext(SegmentedControlContext);
+	return /* @__PURE__ */ React$1.createElement(Icon, {
+		...props,
+		size: sizeMap[size]
 	});
 };
 //#endregion
-export { i as SegmentedControlIcon };
+export { SegmentedControlIcon };
 
 //# sourceMappingURL=SegmentedControlIcon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlIcon.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"mappings":";;;;AAKA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,KACX,MACgB;CAChB,IAAM,EAAE,YAAS,EAAM,WAAW,EAAwB;AAE1D,QAAO,kBAAA,cAAC,GAAD;EAAM,GAAI;EAAO,MAAM,EAAQ;EAAmB,CAAA"}
+{"version":3,"file":"SegmentedControlIcon.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlIcon.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '../icon/Icon'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst sizeMap = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md'\n}\n\nexport const SegmentedControlIcon = (\n  props: Omit<React.ComponentProps<typeof Icon>, 'size'>\n): JSX.Element => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <Icon {...props} size={sizeMap[size as string]} />\n}\n"],"mappings":";;;;AAKA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,wBACX,UACgB;CAChB,MAAM,EAAE,SAAS,QAAM,WAAW,wBAAwB;AAE1D,QAAO,wBAAA,cAAC,MAAD;EAAM,GAAI;EAAO,MAAM,QAAQ;EAAmB,CAAA"}

package/dist/components/segmented-control/SegmentedControlItem.js

@@ -1,9 +1,9 @@
-import { styled as e } from "../../styled.js";
-import { SegmentedControlContext as t } from "./SegmentedControlContext.js";
-import * as n from "react";
-import { Trigger as r } from "@radix-ui/react-tabs";
+import { styled } from "../../styled.js";
+import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import * as React$1 from "react";
+import { Trigger } from "@radix-ui/react-tabs";
 //#region src/components/segmented-control/SegmentedControlItem.tsx
-var i = e(r, {
+var StyledItem = styled(Trigger, {
 	base: [
 		"relative",
 		"bg-transparent",
@@ -57,17 +57,18 @@ var i = e(r, {
 			]
 		}
 	}
-}, { enabledResponsiveVariants: !0 }), a = n.forwardRef(({ children: e, ...r }, a) => {
-	let { size: o, theme: s } = n.useContext(t);
-	return /* @__PURE__ */ n.createElement(i, {
-		...r,
-		theme: s,
-		size: o,
-		ref: a
-	}, e);
+}, { enabledResponsiveVariants: true });
+var SegmentedControlItem = React$1.forwardRef(({ children, ...props }, ref) => {
+	const { size, theme } = React$1.useContext(SegmentedControlContext);
+	return /* @__PURE__ */ React$1.createElement(StyledItem, {
+		...props,
+		theme,
+		size,
+		ref
+	}, children);
 });
-a.displayName = "SegmentedControlItem";
+SegmentedControlItem.displayName = "SegmentedControlItem";
 //#endregion
-export { a as SegmentedControlItem };
+export { SegmentedControlItem };
 
 //# sourceMappingURL=SegmentedControlItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n  Trigger,\n  {\n    base: [\n      'relative',\n      'bg-transparent',\n      'rounded-md',\n      'p-0',\n      'z-2',\n      'min-w-35',\n      'border-2',\n      'border-transparent',\n      'cursor-pointer',\n      'select-none',\n      'flex',\n      'flex-col',\n      'items-center',\n      'data-[state=active]:border-2',\n      'data-[state=active]:border-transparent',\n      'data-[state=active]:focus-visible:border-primary-800',\n      'data-[state=active]:focus-visible:shadow-none',\n      'data-[state=active]:font-semibold',\n      'data-[state=active]:shadow-none',\n      'data-[state=active]:text-(--text-bold)',\n      'data-[state=inactive]:font-normal',\n      'data-[state=inactive]:text-grey-900',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'focus-visible:outline-none'\n    ],\n    variants: {\n      theme: {\n        primary: [\n          'data-[state=inactive]:hover:bg-primary-300',\n          'focus-visible:border-primary-800'\n        ],\n        marsh: [\n          'data-[state=inactive]:hover:bg-marsh-300',\n          'focus-visible:border-marsh-800'\n        ]\n      },\n      size: {\n        sm: ['flex-[unset]', 'gap-2', 'px-6', 'py-4'],\n        md: ['flex-1', 'gap-3', 'px-4', 'py-6'],\n        lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;AAOA,IAAM,IAAa,EACjB,GACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,mCACD;GACD,OAAO,CACL,4CACA,iCACD;GACF;EACD,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;IAAO;GAC7C,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACvC,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACxC;EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAEY,IAAuB,EAAM,YAGvC,EAAE,aAAU,GAAG,KAAS,MAAQ;CACjC,IAAM,EAAE,SAAM,aAAU,EAAM,WAAW,EAAwB;AAEjE,QACE,kBAAA,cAAC,GAAD;EAAY,GAAI;EAAc;EAAa;EAAW;EAEzC,EADV,EACU;EAEf;AAEF,EAAqB,cAAc"}
+{"version":3,"file":"SegmentedControlItem.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItem.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledItem = styled(\n  Trigger,\n  {\n    base: [\n      'relative',\n      'bg-transparent',\n      'rounded-md',\n      'p-0',\n      'z-2',\n      'min-w-35',\n      'border-2',\n      'border-transparent',\n      'cursor-pointer',\n      'select-none',\n      'flex',\n      'flex-col',\n      'items-center',\n      'data-[state=active]:border-2',\n      'data-[state=active]:border-transparent',\n      'data-[state=active]:focus-visible:border-primary-800',\n      'data-[state=active]:focus-visible:shadow-none',\n      'data-[state=active]:font-semibold',\n      'data-[state=active]:shadow-none',\n      'data-[state=active]:text-(--text-bold)',\n      'data-[state=inactive]:font-normal',\n      'data-[state=inactive]:text-grey-900',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'focus-visible:outline-none'\n    ],\n    variants: {\n      theme: {\n        primary: [\n          'data-[state=inactive]:hover:bg-primary-300',\n          'focus-visible:border-primary-800'\n        ],\n        marsh: [\n          'data-[state=inactive]:hover:bg-marsh-300',\n          'focus-visible:border-marsh-800'\n        ]\n      },\n      size: {\n        sm: ['flex-[unset]', 'gap-2', 'px-6', 'py-4'],\n        md: ['flex-1', 'gap-3', 'px-4', 'py-6'],\n        lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = React.forwardRef<\n  HTMLButtonElement,\n  Omit<React.ComponentProps<typeof StyledItem>, 'size'>\n>(({ children, ...props }, ref) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...props} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n})\n\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n"],"mappings":";;;;;AAOA,IAAM,aAAa,OACjB,SACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,mCACD;GACD,OAAO,CACL,4CACA,iCACD;GACF;EACD,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;IAAO;GAC7C,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACvC,IAAI;IAAC;IAAU;IAAS;IAAQ;IAAO;GACxC;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAED,IAAa,uBAAuB,QAAM,YAGvC,EAAE,UAAU,GAAG,SAAS,QAAQ;CACjC,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,wBAAwB;AAEjE,QACE,wBAAA,cAAC,YAAD;EAAY,GAAI;EAAc;EAAa;EAAW;EAEzC,EADV,SACU;EAEf;AAEF,qBAAqB,cAAc"}

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

@@ -1,9 +1,9 @@
-import { styled as e } from "../../styled.js";
-import { Tabs as t } from "../tabs/Tabs.js";
-import { SegmentedControlContext as n } from "./SegmentedControlContext.js";
-import * as r from "react";
+import { styled } from "../../styled.js";
+import { Tabs } from "../tabs/Tabs.js";
+import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import * as React$1 from "react";
 //#region src/components/segmented-control/SegmentedControlItemList.tsx
-var i = e(t.TriggerList, {
+var StyledTriggerList = styled(Tabs.TriggerList, {
 	base: [
 		"relative",
 		"p-1",
@@ -16,7 +16,8 @@ var i = e(t.TriggerList, {
 		primary: ["bg-primary-200"],
 		marsh: ["bg-marsh-200"]
 	} }
-}), a = e("div", {
+});
+var SelectionIndicator = styled("div", {
 	base: [
 		"absolute",
 		"bg-white",
@@ -30,52 +31,68 @@ var i = e(t.TriggerList, {
 		],
 		false: ["transition-none"]
 	} }
-}), o = (e) => {
-	let { theme: t, defaultValue: o, value: s } = r.useContext(n), c = r.useRef([]), l = r.Children.toArray(e.children).findIndex((e) => e?.props.value === s), [u, d] = r.useState({
+});
+var SegmentedControlItemList = (props) => {
+	const { theme, defaultValue, value } = React$1.useContext(SegmentedControlContext);
+	const tabsRef = React$1.useRef([]);
+	const selectedIndex = React$1.Children.toArray(props.children).findIndex((child) => child?.props.value === value);
+	const [indicatorStyles, setIndicatorStyles] = React$1.useState({
 		left: 0,
 		height: 0,
 		width: 0
-	}), [f, p] = r.useState(!1), m = r.useCallback(() => {
-		let e = c.current[l];
-		if (!e) return;
-		let { width: t, height: n } = e.getBoundingClientRect();
-		d({
-			left: Math.round(e.offsetLeft),
-			height: Math.round(n),
-			width: Math.round(t)
+	});
+	const [hasInteracted, setHasInteracted] = React$1.useState(false);
+	const updateIndicatorPosition = React$1.useCallback(() => {
+		const currentTab = tabsRef.current[selectedIndex];
+		if (!currentTab) return;
+		const { width, height } = currentTab.getBoundingClientRect();
+		setIndicatorStyles({
+			left: Math.round(currentTab.offsetLeft),
+			height: Math.round(height),
+			width: Math.round(width)
 		});
-	}, [l]);
-	return r.useEffect(() => {
-		let e = new ResizeObserver(m), t = c.current;
-		return t.forEach((t) => {
-			t && e.observe(t);
-		}), () => {
-			t.forEach((t) => {
-				t && e.unobserve(t);
-			}), e.disconnect();
+	}, [selectedIndex]);
+	React$1.useEffect(() => {
+		const resizeObserver = new ResizeObserver(updateIndicatorPosition);
+		const currentTabs = tabsRef.current;
+		currentTabs.forEach((tab) => {
+			if (tab) resizeObserver.observe(tab);
+		});
+		return () => {
+			currentTabs.forEach((tab) => {
+				if (tab) resizeObserver.unobserve(tab);
+			});
+			resizeObserver.disconnect();
+		};
+	}, [selectedIndex, updateIndicatorPosition]);
+	React$1.useEffect(() => {
+		window.addEventListener("resize", updateIndicatorPosition);
+		return () => {
+			window.removeEventListener("resize", updateIndicatorPosition);
 		};
-	}, [l, m]), r.useEffect(() => (window.addEventListener("resize", m), () => {
-		window.removeEventListener("resize", m);
-	}), [m]), r.useEffect(() => {
-		m();
-	}, [l, m]), /* @__PURE__ */ r.createElement(i, {
-		theme: t,
-		defaultValue: o,
-		...e
-	}, /* @__PURE__ */ r.createElement(a, {
-		interacted: f,
-		style: u
-	}), r.Children.map(e.children, (e, t) => {
-		if (!r.isValidElement(e)) throw Error("Child passed to SegmentedControlItemList is not a valid element");
-		return r.cloneElement(e, {
-			onClick: (t) => {
-				p(!0), e.props.onClick && e.props.onClick(t);
+	}, [updateIndicatorPosition]);
+	React$1.useEffect(() => {
+		updateIndicatorPosition();
+	}, [selectedIndex, updateIndicatorPosition]);
+	return /* @__PURE__ */ React$1.createElement(StyledTriggerList, {
+		theme,
+		defaultValue,
+		...props
+	}, /* @__PURE__ */ React$1.createElement(SelectionIndicator, {
+		interacted: hasInteracted,
+		style: indicatorStyles
+	}), React$1.Children.map(props.children, (child, index) => {
+		if (!React$1.isValidElement(child)) throw new Error(`Child passed to SegmentedControlItemList is not a valid element`);
+		return React$1.cloneElement(child, {
+			onClick: (e) => {
+				setHasInteracted(true);
+				if (child.props.onClick) child.props.onClick(e);
 			},
-			ref: (e) => c.current[t] = e
+			ref: (el) => tabsRef.current[index] = el
 		});
 	}));
 };
 //#endregion
-export { o as SegmentedControlItemList };
+export { SegmentedControlItemList };
 
 //# sourceMappingURL=SegmentedControlItemList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-lg',\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: ['absolute', 'bg-white', 'rounded-md'],\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({\n      left: Math.round(currentTab.offsetLeft),\n      height: Math.round(height),\n      width: Math.round(width)\n    })\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"],"mappings":";;;;;AAQA,IAAM,IAAoB,EAAO,EAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,SAAS,CAAC,iBAAiB;EAC3B,OAAO,CAAC,eAAe;EACxB,EACF;CACF,CAAC,EAEI,IAAqB,EAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;EAAa;CAC5C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;GAAiB;EACnD,OAAO,CAAC,kBAAkB;EAC3B,EACF;CACF,CAAC,EAEW,KACX,MACgB;CAChB,IAAM,EAAE,UAAO,iBAAc,aAAU,EAAM,WAC3C,EACD,EAEK,IAAU,EAAM,OAA+B,EAAE,CAAC,EAElD,IAAgB,EAAM,SAAS,QAAQ,EAAM,SAAS,CAAC,WAC1D,MAAW,GAA8B,MAAM,UAAU,EAC3D,EAEK,CAAC,GAAiB,KAAsB,EAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;EACR,CAAC,EACI,CAAC,GAAe,KAAoB,EAAM,SAAS,GAAM,EAEzD,IAA0B,EAAM,kBAAkB;EACtD,IAAM,IAAa,EAAQ,QAAQ;AACnC,MAAI,CAAC,EAAY;EAEjB,IAAM,EAAE,UAAO,cAAW,EAAW,uBAAuB;AAC5D,IAAmB;GACjB,MAAM,KAAK,MAAM,EAAW,WAAW;GACvC,QAAQ,KAAK,MAAM,EAAO;GAC1B,OAAO,KAAK,MAAM,EAAM;GACzB,CAAC;IACD,CAAC,EAAc,CAAC;AA4BnB,QA1BA,EAAM,gBAAgB;EACpB,IAAM,IAAiB,IAAI,eAAe,EAAwB,EAC5D,IAAc,EAAQ;AAK5B,SAJA,EAAY,SAAS,MAAQ;AAC3B,GAAI,KAAK,EAAe,QAAQ,EAAI;IACpC,QAEW;AAIX,GAHA,EAAY,SAAS,MAAQ;AAC3B,IAAI,KAAK,EAAe,UAAU,EAAI;KACtC,EACF,EAAe,YAAY;;IAE5B,CAAC,GAAe,EAAwB,CAAC,EAE5C,EAAM,iBACJ,OAAO,iBAAiB,UAAU,EAAwB,QAC7C;AACX,SAAO,oBAAoB,UAAU,EAAwB;KAE9D,CAAC,EAAwB,CAAC,EAE7B,EAAM,gBAAgB;AACpB,KAAyB;IACxB,CAAC,GAAe,EAAwB,CAAC,EAG1C,kBAAA,cAAC,GAAD;EAA0B;EAAqB;EAAc,GAAI;EAsB7C,EArBlB,kBAAA,cAAC,GAAD;EAAoB,YAAY;EAAe,OAAO;EAAmB,CAAA,EACxE,EAAM,SAAS,IAAI,EAAM,WAAW,GAAO,MAAU;AACpD,MAAI,CAAC,EAAM,eAAe,EAAM,CAC9B,OAAU,MACR,kEACD;AAGH,SAAO,EAAM,aACX,GAGA;GACE,UAAU,MAAM;AAEd,IADA,EAAiB,GAAK,EAClB,EAAM,MAAM,WAAS,EAAM,MAAM,QAAQ,EAAE;;GAEjD,MAAM,MAAQ,EAAQ,QAAQ,KAAS;GACxC,CACF;GACD,CACgB"}
+{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-lg',\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: ['absolute', 'bg-white', 'rounded-md'],\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({\n      left: Math.round(currentTab.offsetLeft),\n      height: Math.round(height),\n      width: Math.round(width)\n    })\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"],"mappings":";;;;;AAQA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU,EACR,OAAO;EACL,SAAS,CAAC,iBAAiB;EAC3B,OAAO,CAAC,eAAe;EACxB,EACF;CACF,CAAC;AAEF,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;EAAa;CAC5C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;GAAiB;EACnD,OAAO,CAAC,kBAAkB;EAC3B,EACF;CACF,CAAC;AAEF,IAAa,4BACX,UACgB;CAChB,MAAM,EAAE,OAAO,cAAc,UAAU,QAAM,WAC3C,wBACD;CAED,MAAM,UAAU,QAAM,OAA+B,EAAE,CAAC;CAExD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,SAAS,CAAC,WAC1D,UAAW,OAA8B,MAAM,UAAU,MAC3D;CAED,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;EACR,CAAC;CACF,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,MAAM;CAE/D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;AACnC,MAAI,CAAC,WAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,uBAAuB;AAC5D,qBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,WAAW;GACvC,QAAQ,KAAK,MAAM,OAAO;GAC1B,OAAO,KAAK,MAAM,MAAM;GACzB,CAAC;IACD,CAAC,cAAc,CAAC;AAEnB,SAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,eAAe,wBAAwB;EAClE,MAAM,cAAc,QAAQ;AAC5B,cAAY,SAAS,QAAQ;AAC3B,OAAI,IAAK,gBAAe,QAAQ,IAAI;IACpC;AAEF,eAAa;AACX,eAAY,SAAS,QAAQ;AAC3B,QAAI,IAAK,gBAAe,UAAU,IAAI;KACtC;AACF,kBAAe,YAAY;;IAE5B,CAAC,eAAe,wBAAwB,CAAC;AAE5C,SAAM,gBAAgB;AACpB,SAAO,iBAAiB,UAAU,wBAAwB;AAC1D,eAAa;AACX,UAAO,oBAAoB,UAAU,wBAAwB;;IAE9D,CAAC,wBAAwB,CAAC;AAE7B,SAAM,gBAAgB;AACpB,2BAAyB;IACxB,CAAC,eAAe,wBAAwB,CAAC;AAE5C,QACE,wBAAA,cAAC,mBAAD;EAA0B;EAAqB;EAAc,GAAI;EAsB7C,EArBlB,wBAAA,cAAC,oBAAD;EAAoB,YAAY;EAAe,OAAO;EAAmB,CAAA,EACxE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;AACpD,MAAI,CAAC,QAAM,eAAe,MAAM,CAC9B,OAAM,IAAI,MACR,kEACD;AAGH,SAAO,QAAM,aACX,OAGA;GACE,UAAU,MAAM;AACd,qBAAiB,KAAK;AACtB,QAAI,MAAM,MAAM,QAAS,OAAM,MAAM,QAAQ,EAAE;;GAEjD,MAAM,OAAQ,QAAQ,QAAQ,SAAS;GACxC,CACF;GACD,CACgB"}

package/dist/components/segmented-control/SegmentedControlRoot.js

@@ -1,41 +1,45 @@
-import { styled as e } from "../../styled.js";
-import { Tabs as t } from "../tabs/Tabs.js";
-import { SegmentedControlContext as n } from "./SegmentedControlContext.js";
-import * as r from "react";
+import { styled } from "../../styled.js";
+import { Tabs } from "../tabs/Tabs.js";
+import { SegmentedControlContext } from "./SegmentedControlContext.js";
+import * as React$1 from "react";
 //#region src/components/segmented-control/SegmentedControlRoot.tsx
-var i = e(t, {
+var StyledSegmentedControlRoot = styled(Tabs, {
 	base: ["[&>div]:border-none"],
 	variants: { size: {
 		sm: ["w-[unset]!"],
 		md: [],
 		lg: []
 	} }
-}, { enabledResponsiveVariants: !0 }), a = ({ size: e, theme: t = "primary", defaultValue: a, children: o, ...s }) => {
-	let c = s.value !== void 0, [l, u] = r.useState(a), d = c ? s.value : l, f = c ? s.onValueChange : u;
-	r.useEffect(() => {
-		!c && a && u(a);
-	}, [a, c]);
-	let p = r.useMemo(() => ({
-		size: e,
-		theme: t,
-		defaultValue: a,
-		onValueChange: f,
-		value: d
+}, { enabledResponsiveVariants: true });
+var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, ...props }) => {
+	const isControlled = props.value !== void 0;
+	const [internalValue, setInternalValue] = React$1.useState(defaultValue);
+	const currentValue = isControlled ? props.value : internalValue;
+	const handleValueChange = isControlled ? props.onValueChange : setInternalValue;
+	React$1.useEffect(() => {
+		if (!isControlled && defaultValue) setInternalValue(defaultValue);
+	}, [defaultValue, isControlled]);
+	const value = React$1.useMemo(() => ({
+		size,
+		theme,
+		defaultValue,
+		onValueChange: handleValueChange,
+		value: currentValue
 	}), [
-		e,
-		t,
-		a,
-		f,
-		d
+		size,
+		theme,
+		defaultValue,
+		handleValueChange,
+		currentValue
 	]);
-	return /* @__PURE__ */ r.createElement(n.Provider, { value: p }, /* @__PURE__ */ r.createElement(i, {
-		size: e,
-		value: d,
-		onValueChange: f,
-		...s
-	}, o));
+	return /* @__PURE__ */ React$1.createElement(SegmentedControlContext.Provider, { value }, /* @__PURE__ */ React$1.createElement(StyledSegmentedControlRoot, {
+		size,
+		value: currentValue,
+		onValueChange: handleValueChange,
+		...props
+	}, children));
 };
 //#endregion
-export { a as SegmentedControlRoot };
+export { SegmentedControlRoot };
 
 //# sourceMappingURL=SegmentedControlRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]!'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n  typeof StyledSegmentedControlRoot\n> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"mappings":";;;;;AAQA,IAAM,IAA6B,EACjC,GACA;CACE,MAAM,CAAC,sBAAsB;CAC7B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,aAAa;EAClB,IAAI,EAAE;EACN,IAAI,EAAE;EACP,EACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAQY,KAAwB,EACnC,SACA,WAAQ,WACR,iBACA,aACA,GAAG,QACwE;CAC3E,IAAM,IAAe,EAAM,UAAU,KAAA,GAE/B,CAAC,GAAe,KAAoB,EAAM,SAAS,EAAa,EAEhE,IAAe,IAAe,EAAM,QAAQ,GAC5C,IAAoB,IACtB,EAAM,gBACN;AAEJ,GAAM,gBAAgB;AACpB,EAAI,CAAC,KAAgB,KACnB,EAAiB,EAAa;IAE/B,CAAC,GAAc,EAAa,CAAC;CAEhC,IAAM,IAAQ,EAAM,eACX;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;EACR,GACD;EAAC;EAAM;EAAO;EAAc;EAAmB;EAAa,CAC7D;AAED,QACE,kBAAA,cAAC,EAAwB,UAAzB,EAAyC,UASN,EARjC,kBAAA,cAAC,GAAD;EACQ;EACN,OAAO;EACP,eAAe;EACf,GAAI;EAGuB,EAD1B,EAC0B,CACI"}
+{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs/Tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]!'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps extends React.ComponentProps<\n  typeof StyledSegmentedControlRoot\n> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"mappings":";;;;;AAQA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,sBAAsB;CAC7B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,aAAa;EAClB,IAAI,EAAE;EACN,IAAI,EAAE;EACP,EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAQD,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,GAAG,YACwE;CAC3E,MAAM,eAAe,MAAM,UAAU,KAAA;CAErC,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,aAAa;CAEtE,MAAM,eAAe,eAAe,MAAM,QAAQ;CAClD,MAAM,oBAAoB,eACtB,MAAM,gBACN;AAEJ,SAAM,gBAAgB;AACpB,MAAI,CAAC,gBAAgB,aACnB,kBAAiB,aAAa;IAE/B,CAAC,cAAc,aAAa,CAAC;CAEhC,MAAM,QAAQ,QAAM,eACX;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;EACR,GACD;EAAC;EAAM;EAAO;EAAc;EAAmB;EAAa,CAC7D;AAED,QACE,wBAAA,cAAC,wBAAwB,UAAzB,EAAyC,OASN,EARjC,wBAAA,cAAC,4BAAD;EACQ;EACN,OAAO;EACP,eAAe;EACf,GAAI;EAGuB,EAD1B,SAC0B,CACI"}

package/dist/components/select/Select.js

@@ -1,7 +1,7 @@
-import { styled as e } from "../../styled.js";
-import * as t from "react";
+import { styled } from "../../styled.js";
+import * as React$1 from "react";
 //#region src/components/select/Select.tsx
-var n = e("select", {
+var StyledSelect = styled("select", {
 	base: [
 		"bg-(image:--bg-chevron)",
 		"appearance-none",
@@ -76,21 +76,23 @@ var n = e("select", {
 		appearance: "modern",
 		class: ["bg-danger-light", "focus:outline-danger"]
 	}]
-}, { enabledResponsiveVariants: !0 }), r = t.forwardRef(({ placeholder: e, children: r, size: i = "md", appearance: a = "standard", ...o }, s) => {
-	let c = {
-		size: i,
-		appearance: a,
-		ref: s,
-		...o
+}, { enabledResponsiveVariants: true });
+var Select = React$1.forwardRef(({ placeholder, children, size = "md", appearance = "standard", ...remainingProps }, ref) => {
+	const props = {
+		size,
+		appearance,
+		ref,
+		...remainingProps
 	};
-	return [o.value, o.defaultValue].every((e) => e === void 0) && (c.defaultValue = ""), /* @__PURE__ */ t.createElement(n, c, e && /* @__PURE__ */ t.createElement("option", {
-		disabled: !0,
-		hidden: !0,
+	if ([remainingProps.value, remainingProps.defaultValue].every((value) => value === void 0)) props.defaultValue = "";
+	return /* @__PURE__ */ React$1.createElement(StyledSelect, props, placeholder && /* @__PURE__ */ React$1.createElement("option", {
+		disabled: true,
+		hidden: true,
 		value: ""
-	}, e), r);
+	}, placeholder), children);
 });
-r.displayName = "Select";
+Select.displayName = "Select";
 //#endregion
-export { r as Select };
+export { Select };
 
 //# sourceMappingURL=Select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"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(\n  'select',\n  {\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  { enabledResponsiveVariants: true }\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"],"mappings":";;;AAKA,IAAM,IAAe,EACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,uBAAuB;EACnD,CACF;CACF,EACD,EAAE,2BAA2B,IAAM,CACpC,EAgBY,IAAS,EAAM,YAExB,EACE,gBACA,aACA,UAAO,MACP,gBAAa,YACb,GAAG,KAEL,MACG;CAEH,IAAM,IAAmD;EACvD;EACA;EACA;EACA,GAAG;EACJ;AAUD,QAPE,CAAC,EAAe,OAAO,EAAe,aAAa,CAAC,OACjD,MAAU,MAAU,KAAA,EACtB,KAED,EAAM,eAAe,KAIrB,kBAAA,cAAC,GAAiB,GACf,KACC,kBAAA,cAAC,UAAD;EAAQ,UAAA;EAAS,QAAA;EAAO,OAAM;EAErB,EADN,EACM,EAEV,EACY;EAGpB;AAED,EAAO,cAAc"}
+{"version":3,"file":"Select.js","names":[],"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(\n  'select',\n  {\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  { enabledResponsiveVariants: true }\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"],"mappings":";;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,kBAAkB,CAChB;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,gBAAgB;EACzB,EACD;EACE,OAAO;EACP,YAAY;EACZ,OAAO,CAAC,mBAAmB,uBAAuB;EACnD,CACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAgBD,IAAa,SAAS,QAAM,YAExB,EACE,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,kBAEL,QACG;CAEH,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;EACJ;AAED,KACE,CAAC,eAAe,OAAO,eAAe,aAAa,CAAC,OACjD,UAAU,UAAU,KAAA,EACtB,CAED,OAAM,eAAe;AAGvB,QACE,wBAAA,cAAC,cAAiB,OACf,eACC,wBAAA,cAAC,UAAD;EAAQ,UAAA;EAAS,QAAA;EAAO,OAAM;EAErB,EADN,YACM,EAEV,SACY;EAGpB;AAED,OAAO,cAAc"}

package/dist/components/select-field/SelectField.js

@@ -1,33 +1,37 @@
-import { useFieldError as e } from "../form/useFieldError.js";
-import { FieldWrapper as t } from "../field-wrapper/FieldWrapper.js";
-import { useFormCustomContext as n } from "../form/useFormCustomContext.js";
-import { Select as r } from "../select/Select.js";
-import * as i from "react";
-import { useFormContext as a } from "react-hook-form";
+import { useFieldError } from "../form/useFieldError.js";
+import { FieldWrapper } from "../field-wrapper/FieldWrapper.js";
+import { useFormCustomContext } from "../form/useFormCustomContext.js";
+import { Select } from "../select/Select.js";
+import * as React$1 from "react";
+import { useFormContext } from "react-hook-form";
 //#region src/components/select-field/SelectField.tsx
-var o = ({ className: o, hideLabel: s, children: c, name: l, label: u, validation: d, prompt: f, description: p, appearance: m, ...h }) => {
-	let { register: g } = a(), _ = n(), { error: v } = e(l), y = d ? g(d) : g, b = _?.appearance || m;
-	return /* @__PURE__ */ i.createElement(t, {
-		className: o,
-		description: p,
-		error: v,
-		fieldId: l,
-		hideLabel: s,
-		label: u,
-		prompt: f,
-		required: !!d?.required,
-		appearance: b
-	}, /* @__PURE__ */ i.createElement(r, {
-		name: l,
-		id: l,
-		appearance: b,
-		...h,
-		ref: y,
-		...v && { state: "error" }
-	}, c));
+var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }) => {
+	const { register } = useFormContext();
+	const context = useFormCustomContext();
+	const { error } = useFieldError(name);
+	const ref = validation ? register(validation) : register;
+	const formAppearance = context?.appearance || appearance;
+	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
+		className,
+		description,
+		error,
+		fieldId: name,
+		hideLabel,
+		label,
+		prompt,
+		required: Boolean(validation?.required),
+		appearance: formAppearance
+	}, /* @__PURE__ */ React$1.createElement(Select, {
+		name,
+		id: name,
+		appearance: formAppearance,
+		...remainingProps,
+		ref,
+		...error && { state: "error" }
+	}, children));
 };
-o.displayName = "SelectField";
+SelectField.displayName = "SelectField";
 //#endregion
-export { o as SelectField };
+export { SelectField };
 
 //# sourceMappingURL=SelectField.js.map

package/dist/components/select-field/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,KAAe,EAC1B,cACA,cACA,aACA,SACA,UACA,eACA,WACA,gBACA,eACA,GAAG,QACmB;CACtB,IAAM,EAAE,gBAAa,GAAgB,EAC/B,IAAU,GAAsB,EAChC,EAAE,aAAU,EAAc,EAAK,EAC/B,IAAM,IAAa,EAAS,EAAW,GAAG,GAC1C,IAAiB,GAAS,cAAc;AAE9C,QACE,kBAAA,cAAC,GAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,EAAQ,GAAY;EAC9B,YAAY;EAYC,EAVb,kBAAA,cAAC,GAAD;EACQ;EACN,IAAI;EACJ,YAAY;EACZ,GAAI;EACC;EACL,GAAK,KAAS,EAAE,OAAO,SAAS;EAGzB,EADN,EACM,CACI;;AAInB,EAAY,cAAc"}
+{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: SelectFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        {...remainingProps}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;AAE9C,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAYC,EAVb,wBAAA,cAAC,QAAD;EACQ;EACN,IAAI;EACJ,YAAY;EACZ,GAAI;EACC;EACL,GAAK,SAAS,EAAE,OAAO,SAAS;EAGzB,EADN,SACM,CACI;;AAInB,YAAY,cAAc"}