@atom-learning/components 9.0.0 → 10.0.0

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  className,\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearText = 'Clear',\n  onChange,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElRef, setInputElRef] = useCallbackRef()\n  const [innerValue, setInnerValue] = React.useState(defaultValue)\n  const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n    defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n  )\n  React.useEffect(() => {\n    if (typeof value === 'undefined') return\n    setInnerValue(value)\n    setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n  }, [value])\n\n  const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n  React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n  const handleClear = () => {\n    const inputEl = inputElRef.current\n    if (!inputEl) return\n\n    // https://stackoverflow.com/a/46012210\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set\n    nativeInputValueSetter?.call?.(inputEl, '')\n    const ev2 = new Event('input', {\n      bubbles: true\n    })\n    inputEl.dispatchEvent(ev2)\n    inputEl.focus()\n    onValueChange?.('')\n  }\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n\n    const newValue = event.target.value\n    setInnerValue(newValue)\n    onValueChange?.(newValue)\n    setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n  }\n\n  const getIcon = () => {\n    if (activeIcon === INPUT_ICON.SEARCH)\n      return (\n        <StyledIcon\n          is={Search}\n          size={size}\n          className={cn(\n            size == 'sm' ? 'size-4' : 'size-5',\n            'top-1/2',\n            '-translate-y-1/2'\n          )}\n        />\n      )\n\n    return (\n      <ActionIcon\n        label={clearText}\n        theme=\"neutral\"\n        size={iconSize}\n        onClick={handleClear}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <InputBackground\n      size={size}\n      appearance={appearance}\n      theme={theme}\n      className={cn('relative', 'w-auto', className)}\n    >\n      <InputText\n        ref={setInputElRef}\n        size={size}\n        type=\"search\"\n        {...rest}\n        value={innerValue}\n        onChange={handleOnChange}\n        className={cn(\n          size === 'sm' ? 'pr-8' : 'pr-10',\n          '[&::-webkit-search-decoration]:appearance-none',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          '[&::-webkit-search-results-button]:appearance-none'\n        )}\n      />\n      {getIcon()}\n    </InputBackground>\n  )\n}\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;CAAqB;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,WACmB;CACtB,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAC/D,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAA,UAAA,QACF;CACA,QAAM,gBAAgB;EACpB,IAAI,OAAO,UAAU,aAAa;EAClC,cAAc,KAAK;EACnB,cAAc,QAAA,UAAA,QAA4C;CAC5D,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,QAAM,oBAAoB,WAAW,WAAW,OAA2B;CAE3E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;EACxB,cAAc,WAAA,UAAA,QAA+C;CAC/D;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  className,\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearText = 'Clear',\n  onChange,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElRef, setInputElRef] = useCallbackRef()\n  const [innerValue, setInnerValue] = React.useState(defaultValue)\n  // Derived during render — mirroring `value` into state via an effect would\n  // paint one stale frame per controlled update.\n  const currentValue = value ?? innerValue\n  const activeIcon = currentValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n\n  const iconSize = getFieldIconSize(size)\n\n  const composedInputRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setInputElRef\n  )\n\n  const handleClear = () => {\n    const inputEl = inputElRef.current\n    if (!inputEl) return\n\n    // https://stackoverflow.com/a/46012210\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set\n    nativeInputValueSetter?.call?.(inputEl, '')\n    const ev2 = new Event('input', {\n      bubbles: true\n    })\n    inputEl.dispatchEvent(ev2)\n    inputEl.focus()\n    onValueChange?.('')\n  }\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n\n    const newValue = event.target.value\n    setInnerValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  const getIcon = () => {\n    if (activeIcon === INPUT_ICON.SEARCH)\n      return (\n        <StyledIcon\n          is={Search}\n          size={size}\n          className={cn(\n            size == 'sm' ? 'size-4' : 'size-5',\n            'top-1/2',\n            '-translate-y-1/2'\n          )}\n        />\n      )\n\n    return (\n      <ActionIcon\n        label={clearText}\n        theme=\"neutral\"\n        size={iconSize}\n        onClick={handleClear}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <InputBackground\n      size={size}\n      appearance={appearance}\n      theme={theme}\n      className={cn('relative', 'w-auto', className)}\n    >\n      <InputText\n        ref={composedInputRef}\n        size={size}\n        type=\"search\"\n        {...rest}\n        value={currentValue}\n        onChange={handleOnChange}\n        className={cn(\n          size === 'sm' ? 'pr-8' : 'pr-10',\n          '[&::-webkit-search-decoration]:appearance-none',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          '[&::-webkit-search-results-button]:appearance-none'\n        )}\n      />\n      {getIcon()}\n    </InputBackground>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA0BA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;CAAqB;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,WACmB;CACtB,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAG/D,MAAM,eAAe,SAAS;CAC9B,MAAM,aAAa,eAAA,UAAA;CAEnB,MAAM,WAAW,iBAAiB,IAAI;CAEtC,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB"}

package/dist/components/section-message/SectionMessage.context.js

@@ -5,26 +5,25 @@ var SectionMessageContext = React$1.createContext(null);
 var SectionMessageProvider = ({ theme = "info", children }) => {
 	const [hasIcon, setHasIcon] = React$1.useState(false);
 	const [hasDismiss, setHasDismiss] = React$1.useState(false);
-	const value = React$1.useMemo(() => ({
-		theme,
-		hasIcon,
-		setHasIcon,
-		hasDismiss,
-		setHasDismiss
-	}), [
-		theme,
-		hasIcon,
-		setHasIcon,
-		hasDismiss,
-		setHasDismiss
-	]);
-	return /* @__PURE__ */ jsx(SectionMessageContext.Provider, {
-		value,
+	return /* @__PURE__ */ jsx(SectionMessageContext, {
+		value: React$1.useMemo(() => ({
+			theme,
+			hasIcon,
+			setHasIcon,
+			hasDismiss,
+			setHasDismiss
+		}), [
+			theme,
+			hasIcon,
+			setHasIcon,
+			hasDismiss,
+			setHasDismiss
+		]),
 		children
 	});
 };
 var useSectionMessageContext = () => {
-	const context = React$1.useContext(SectionMessageContext);
+	const context = React$1.use(SectionMessageContext);
 	if (!context) throw new Error("useSectionMessageContext must be used within a SectionMessageProvider");
 	return context;
 };

package/dist/components/section-message/SectionMessage.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.context.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SectionMessageTheme } from './SectionMessage'\n\nexport type SectionMessageContextValue = {\n  theme: SectionMessageTheme\n  hasIcon: boolean\n  setHasIcon: React.Dispatch<React.SetStateAction<boolean>>\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\nexport type SectionMessageProviderProps = {\n  theme: SectionMessageTheme\n  children: React.ReactNode\n}\n\nexport const SectionMessageContext =\n  React.createContext<SectionMessageContextValue | null>(null)\n\nexport const SectionMessageProvider = ({\n  theme = 'info',\n  children\n}: SectionMessageProviderProps) => {\n  const [hasIcon, setHasIcon] = React.useState(false)\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n\n  const value = React.useMemo<SectionMessageContextValue>(\n    () => ({ theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss }),\n    [theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss]\n  )\n\n  return (\n    <SectionMessageContext.Provider value={value}>\n      {children}\n    </SectionMessageContext.Provider>\n  )\n}\n\nexport const useSectionMessageContext = (): SectionMessageContextValue => {\n  const context = React.useContext(SectionMessageContext)\n\n  if (!context) {\n    throw new Error(\n      'useSectionMessageContext must be used within a SectionMessageProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAgBA,IAAa,wBACX,QAAM,cAAiD,IAAI;AAE7D,IAAa,0BAA0B,EACrC,QAAQ,QACR,eACiC;CACjC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,KAAK;CAClD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CAExD,MAAM,QAAQ,QAAM,eACX;EAAE;EAAO;EAAS;EAAY;EAAY;CAAc,IAC/D;EAAC;EAAO;EAAS;EAAY;EAAY;CAAa,CACxD;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAuC;EACpC;CAC6B,CAAA;AAEpC;AAEA,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,WAAW,qBAAqB;CAEtD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,uEACF;CAGF,OAAO;AACT"}
+{"version":3,"file":"SectionMessage.context.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SectionMessageTheme } from './SectionMessage'\n\nexport type SectionMessageContextValue = {\n  theme: SectionMessageTheme\n  hasIcon: boolean\n  setHasIcon: React.Dispatch<React.SetStateAction<boolean>>\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\nexport type SectionMessageProviderProps = {\n  theme: SectionMessageTheme\n  children: React.ReactNode\n}\n\nexport const SectionMessageContext =\n  React.createContext<SectionMessageContextValue | null>(null)\n\nexport const SectionMessageProvider = ({\n  theme = 'info',\n  children\n}: SectionMessageProviderProps) => {\n  const [hasIcon, setHasIcon] = React.useState(false)\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n\n  const value = React.useMemo<SectionMessageContextValue>(\n    () => ({ theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss }),\n    [theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss]\n  )\n\n  return <SectionMessageContext value={value}>{children}</SectionMessageContext>\n}\n\nexport const useSectionMessageContext = (): SectionMessageContextValue => {\n  const context = React.use(SectionMessageContext)\n\n  if (!context) {\n    throw new Error(\n      'useSectionMessageContext must be used within a SectionMessageProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAgBA,IAAa,wBACX,QAAM,cAAiD,IAAI;AAE7D,IAAa,0BAA0B,EACrC,QAAQ,QACR,eACiC;CACjC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,KAAK;CAClD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CAOxD,OAAO,oBAAC,uBAAD;EAA8B,OALvB,QAAM,eACX;GAAE;GAAO;GAAS;GAAY;GAAY;EAAc,IAC/D;GAAC;GAAO;GAAS;GAAY;GAAY;EAAa,CAGnB;EAAQ;CAAgC,CAAA;AAC/E;AAEA,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,IAAI,qBAAqB;CAE/C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,uEACF;CAGF,OAAO;AACT"}

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

@@ -10,7 +10,7 @@ var badgeSizeMap = {
 	lg: "sm"
 };
 var SegmentedControlBadge = ({ className, ...rest }) => {
-	const { size } = React$1.useContext(SegmentedControlContext);
+	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(Badge, {
 		...rest,
 		size: badgeSizeMap[size],

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>) => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...rest}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', 'font-normal', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,yBAAyB,EACpC,WACA,GAAG,WACmD;CACtD,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,SAAS;CACtD,CAAA;AAEL"}
+{"version":3,"file":"SegmentedControlBadge.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlBadge.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Badge } from '../badge/Badge'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst badgeSizeMap = {\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm'\n}\n\nexport const SegmentedControlBadge = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Badge>, 'size'>) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return (\n    <Badge\n      {...rest}\n      size={badgeSizeMap[size as string]}\n      className={cn('border-none', 'font-normal', className)}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,yBAAyB,EACpC,WACA,GAAG,WACmD;CACtD,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,MAAM,aAAa;EACnB,WAAW,GAAG,eAAe,eAAe,SAAS;CACtD,CAAA;AAEL"}

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

@@ -17,7 +17,7 @@ var StyledText = styled(Text, {
 	} }
 }, { enableResponsiveVariants: true });
 var SegmentedControlDescription = (props) => {
-	const { size } = React$1.useContext(SegmentedControlContext);
+	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(StyledText, {
 		...props,
 		size

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-subtle', 'font-normal'],\n    variants: {\n      size: {\n        sm: ['text-xs', 'leading-[1.6]'],\n        md: ['text-sm', 'leading-[1.53]'],\n        lg: ['text-md', 'leading-normal']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n) => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;CAAa;CACrD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,eAAe;EAC/B,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,+BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OAAO,oBAAC,YAAD;EAAY,GAAI;EAAa;CAAO,CAAA;AAC7C"}
+{"version":3,"file":"SegmentedControlDescription.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlDescription.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledText = styled(\n  Text,\n  {\n    base: ['font-body', 'text-text-subtle', 'font-normal'],\n    variants: {\n      size: {\n        sm: ['text-xs', 'leading-[1.6]'],\n        md: ['text-sm', 'leading-[1.53]'],\n        lg: ['text-md', 'leading-normal']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlDescription = (\n  props: Omit<React.ComponentProps<typeof StyledText>, 'size'>\n) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return <StyledText {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,aAAa,OACjB,MACA;CACE,MAAM;EAAC;EAAa;EAAoB;CAAa;CACrD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,eAAe;EAC/B,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,+BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OAAO,oBAAC,YAAD;EAAY,GAAI;EAAa;CAAO,CAAA;AAC7C"}

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

@@ -13,7 +13,7 @@ var StyledHeading = styled(Text, {
 	} }
 }, { enableResponsiveVariants: true });
 var SegmentedControlHeading = (props) => {
-	const { size } = React$1.useContext(SegmentedControlContext);
+	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(StyledHeading, {
 		...props,
 		size

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'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\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  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n) => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,mBAAmB;CACvC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,2BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAa;CAAO,CAAA;AAChD"}
+{"version":3,"file":"SegmentedControlHeading.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlHeading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\nimport { SegmentedControlContext } from './SegmentedControl.context'\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  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlHeading = (\n  props: Omit<React.ComponentProps<typeof StyledHeading>, 'size'>\n) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return <StyledHeading {...props} size={size} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OACpB,MACA;CACE,MAAM,CAAC,aAAa,mBAAmB;CACvC,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;EAChC,IAAI,CAAC,WAAW,gBAAgB;CAClC,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,2BACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OAAO,oBAAC,eAAD;EAAe,GAAI;EAAa;CAAO,CAAA;AAChD"}

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

@@ -9,7 +9,7 @@ var sizeMap = {
 	lg: "md"
 };
 var SegmentedControlIcon = (props) => {
-	const { size } = React$1.useContext(SegmentedControlContext);
+	const { size } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(Icon, {
 		...props,
 		size: sizeMap[size]

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 './SegmentedControl.context'\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) => {\n  const { size } = React.useContext(SegmentedControlContext)\n\n  return (\n    <Icon\n      {...(props as React.ComponentProps<typeof Icon>)}\n      size={sizeMap[size as string]}\n    />\n  )\n}\n"],"mappings":";;;;;AAKA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,WAAW,uBAAuB;CAEzD,OACE,oBAAC,MAAD;EACE,GAAK;EACL,MAAM,QAAQ;CACf,CAAA;AAEL"}
+{"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 './SegmentedControl.context'\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) => {\n  const { size } = React.use(SegmentedControlContext)\n\n  return (\n    <Icon\n      {...(props as React.ComponentProps<typeof Icon>)}\n      size={sizeMap[size as string]}\n    />\n  )\n}\n"],"mappings":";;;;;AAKA,IAAM,UAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBACX,UACG;CACH,MAAM,EAAE,SAAS,QAAM,IAAI,uBAAuB;CAElD,OACE,oBAAC,MAAD;EACE,GAAK;EACL,MAAM,QAAQ;CACf,CAAA;AAEL"}

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

@@ -64,7 +64,7 @@ var StyledItem = styled(Trigger, {
 	}
 }, { enableResponsiveVariants: true });
 var SegmentedControlItem = ({ ref, children, ...rest }) => {
-	const { size, theme } = React$1.useContext(SegmentedControlContext);
+	const { size, theme } = React$1.use(SegmentedControlContext);
 	return /* @__PURE__ */ jsx(StyledItem, {
 		...rest,
 		theme,

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'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledItem = styled(\n  Trigger,\n  {\n    base: [\n      'relative',\n      'bg-transparent',\n      'rounded-md',\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      'justify-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-3', 'px-6', 'py-4'],\n        md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n        lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n      }\n    },\n    defaultVariants: {\n      size: 'md',\n      theme: 'primary'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = ({\n  ref,\n  children,\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledItem>, 'size'>) => {\n  const { size, theme } = React.useContext(SegmentedControlContext)\n\n  return (\n    <StyledItem {...rest} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n}\n"],"mappings":";;;;;;AAMA,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;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,kCACF;GACA,OAAO,CACL,4CACA,gCACF;EACF;EACA,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;GAAM;GAC5C,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;GACtC,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;EACxC;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,wBAAwB,EACnC,KACA,UACA,GAAG,WACwD;CAC3D,MAAM,EAAE,MAAM,UAAU,QAAM,WAAW,uBAAuB;CAEhE,OACE,oBAAC,YAAD;EAAY,GAAI;EAAa;EAAa;EAAW;EAClD;CACS,CAAA;AAEhB"}
+{"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'\nimport { SegmentedControlContext } from './SegmentedControl.context'\n\nconst StyledItem = styled(\n  Trigger,\n  {\n    base: [\n      'relative',\n      'bg-transparent',\n      'rounded-md',\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      'justify-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-3', 'px-6', 'py-4'],\n        md: ['flex-1', 'gap-4', 'px-4', 'py-6'],\n        lg: ['flex-1', 'gap-4', 'px-4', 'py-6']\n      }\n    },\n    defaultVariants: {\n      size: 'md',\n      theme: 'primary'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nexport const SegmentedControlItem = ({\n  ref,\n  children,\n  ...rest\n}: Omit<React.ComponentProps<typeof StyledItem>, 'size'>) => {\n  const { size, theme } = React.use(SegmentedControlContext)\n\n  return (\n    <StyledItem {...rest} theme={theme} size={size} ref={ref}>\n      {children}\n    </StyledItem>\n  )\n}\n"],"mappings":";;;;;;AAMA,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;CACF;CACA,UAAU;EACR,OAAO;GACL,SAAS,CACP,8CACA,kCACF;GACA,OAAO,CACL,4CACA,gCACF;EACF;EACA,MAAM;GACJ,IAAI;IAAC;IAAgB;IAAS;IAAQ;GAAM;GAC5C,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;GACtC,IAAI;IAAC;IAAU;IAAS;IAAQ;GAAM;EACxC;CACF;CACA,iBAAiB;EACf,MAAM;EACN,OAAO;CACT;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAa,wBAAwB,EACnC,KACA,UACA,GAAG,WACwD;CAC3D,MAAM,EAAE,MAAM,UAAU,QAAM,IAAI,uBAAuB;CAEzD,OACE,oBAAC,YAAD;EAAY,GAAI;EAAa;EAAa;EAAW;EAClD;CACS,CAAA;AAEhB"}

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

@@ -2,6 +2,7 @@ import { styled } from "../../styled.js";
 import { Tabs } from "../tabs/Tabs.js";
 import { SegmentedControlContext } from "./SegmentedControl.context.js";
 import * as React$1 from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/segmented-control/SegmentedControlItemList.tsx
 var StyledTriggerList = styled(Tabs.TriggerList, {
@@ -34,7 +35,7 @@ var SelectionIndicator = styled("div", {
 	} }
 });
 var SegmentedControlItemList = (props) => {
-	const { theme, defaultValue, value } = React$1.useContext(SegmentedControlContext);
+	const { theme, defaultValue, value } = React$1.use(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({
@@ -53,26 +54,28 @@ var SegmentedControlItemList = (props) => {
 			width: Math.round(width)
 		});
 	}, [selectedIndex]);
+	const updateIndicatorPositionRef = React$1.useRef(updateIndicatorPosition);
+	React$1.useLayoutEffect(() => {
+		updateIndicatorPositionRef.current = updateIndicatorPosition;
+	});
+	const tabCount = React$1.Children.count(props.children);
 	React$1.useEffect(() => {
-		const resizeObserver = new ResizeObserver(updateIndicatorPosition);
-		const currentTabs = tabsRef.current;
-		currentTabs.forEach((tab) => {
+		const resizeObserver = new ResizeObserver(() => updateIndicatorPositionRef.current());
+		tabsRef.current.forEach((tab) => {
 			if (tab) resizeObserver.observe(tab);
 		});
 		return () => {
-			currentTabs.forEach((tab) => {
-				if (tab) resizeObserver.unobserve(tab);
-			});
 			resizeObserver.disconnect();
 		};
-	}, [selectedIndex, updateIndicatorPosition]);
+	}, [tabCount]);
 	React$1.useEffect(() => {
-		window.addEventListener("resize", updateIndicatorPosition);
+		const handleResize = () => updateIndicatorPositionRef.current();
+		window.addEventListener("resize", handleResize);
 		return () => {
-			window.removeEventListener("resize", updateIndicatorPosition);
+			window.removeEventListener("resize", handleResize);
 		};
-	}, [updateIndicatorPosition]);
-	React$1.useEffect(() => {
+	}, []);
+	React$1.useLayoutEffect(() => {
 		updateIndicatorPosition();
 	}, [selectedIndex, updateIndicatorPosition]);
 	return /* @__PURE__ */ jsxs(StyledTriggerList, {
@@ -89,9 +92,12 @@ var SegmentedControlItemList = (props) => {
 					setHasInteracted(true);
 					if (child.props.onClick) child.props.onClick(e);
 				},
-				ref: (el) => {
+				ref: composeRefs(child.props.ref, (el) => {
 					tabsRef.current[index] = el;
-				}
+					return () => {
+						tabsRef.current[index] = null;
+					};
+				})
 			});
 		})]
 	});

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'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\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) => {\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) =>\n      (\n        child as React.ReactElement<\n          React.ComponentProps<typeof SegmentedControlItem>\n        >\n      )?.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 (\n          !React.isValidElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >(child)\n        ) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(child, {\n          onClick: (e) => {\n            setHasInteracted(true)\n            if (child.props.onClick) child.props.onClick(e)\n          },\n          ref: (el: HTMLElement | null) => {\n            tabsRef.current[index] = el\n          }\n        })\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,SAAS,CAAC,gBAAgB;EAC1B,OAAO,CAAC,cAAc;CACxB,EACF;AACF,CAAC;AAED,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;CAAY;CAC3C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;EAAgB;EAClD,OAAO,CAAC,iBAAiB;CAC3B,EACF;AACF,CAAC;AAED,IAAa,4BACX,UACG;CACH,MAAM,EAAE,OAAO,cAAc,UAAU,QAAM,WAC3C,uBACF;CAEA,MAAM,UAAU,QAAM,OAA+B,CAAC,CAAC;CAEvD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC,WAC1D,UAEG,OAGC,MAAM,UAAU,KACvB;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;CACT,CAAC;CACD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;EACnC,IAAI,CAAC,YAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,sBAAsB;EAC3D,mBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,UAAU;GACtC,QAAQ,KAAK,MAAM,MAAM;GACzB,OAAO,KAAK,MAAM,KAAK;EACzB,CAAC;CACH,GAAG,CAAC,aAAa,CAAC;CAElB,QAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,eAAe,uBAAuB;EACjE,MAAM,cAAc,QAAQ;EAC5B,YAAY,SAAS,QAAQ;GAC3B,IAAI,KAAK,eAAe,QAAQ,GAAG;EACrC,CAAC;EAED,aAAa;GACX,YAAY,SAAS,QAAQ;IAC3B,IAAI,KAAK,eAAe,UAAU,GAAG;GACvC,CAAC;GACD,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,QAAM,gBAAgB;EACpB,OAAO,iBAAiB,UAAU,uBAAuB;EACzD,aAAa;GACX,OAAO,oBAAoB,UAAU,uBAAuB;EAC9D;CACF,GAAG,CAAC,uBAAuB,CAAC;CAE5B,QAAM,gBAAgB;EACpB,wBAAwB;CAC1B,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,OACE,qBAAC,mBAAD;EAA0B;EAAqB;EAAc,GAAI;YAAjE,CACE,oBAAC,oBAAD;GAAoB,YAAY;GAAe,OAAO;EAAkB,CAAA,GACvE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;GACpD,IACE,CAAC,QAAM,eAEL,KAAK,GAEP,MAAM,IAAI,MACR,iEACF;GAGF,OAAO,QAAM,aAAa,OAAO;IAC/B,UAAU,MAAM;KACd,iBAAiB,IAAI;KACrB,IAAI,MAAM,MAAM,SAAS,MAAM,MAAM,QAAQ,CAAC;IAChD;IACA,MAAM,OAA2B;KAC/B,QAAQ,QAAQ,SAAS;IAC3B;GACF,CAAC;EACH,CAAC,CACgB;;AAEvB"}
+{"version":3,"file":"SegmentedControlItemList.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import { composeRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\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) => {\n  const { theme, defaultValue, value } = React.use(SegmentedControlContext)\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) =>\n      (\n        child as React.ReactElement<\n          React.ComponentProps<typeof SegmentedControlItem>\n        >\n      )?.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  // Latest-ref so the ResizeObserver and window listener subscribe once per\n  // tab-count change instead of being torn down on every selection change\n  // (updateIndicatorPosition's identity tracks selectedIndex).\n  const updateIndicatorPositionRef = React.useRef(updateIndicatorPosition)\n  React.useLayoutEffect(() => {\n    updateIndicatorPositionRef.current = updateIndicatorPosition\n  })\n\n  const tabCount = React.Children.count(props.children)\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(() =>\n      updateIndicatorPositionRef.current()\n    )\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [tabCount])\n\n  React.useEffect(() => {\n    const handleResize = () => updateIndicatorPositionRef.current()\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  }, [])\n\n  // Layout effect: the indicator must be measured and placed before paint,\n  // or it appears at its old position for a frame and visibly jumps.\n  React.useLayoutEffect(() => {\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 (\n          !React.isValidElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >(child)\n        ) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(child, {\n          onClick: (e) => {\n            setHasInteracted(true)\n            if (child.props.onClick) child.props.onClick(e)\n          },\n          // Composed so a consumer-supplied ref on the item survives the\n          // clone; the cleanup empties the slot when the item detaches.\n          ref: composeRefs(\n            (child.props as { ref?: React.Ref<HTMLElement> }).ref,\n            (el: HTMLElement | null) => {\n              tabsRef.current[index] = el\n              return () => {\n                tabsRef.current[index] = null\n              }\n            }\n          )\n        })\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"mappings":";;;;;;;AAQA,IAAM,oBAAoB,OAAO,KAAK,aAAa;CACjD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,SAAS,CAAC,gBAAgB;EAC1B,OAAO,CAAC,cAAc;CACxB,EACF;AACF,CAAC;AAED,IAAM,qBAAqB,OAAO,OAAO;CACvC,MAAM;EAAC;EAAY;EAAY;CAAY;CAC3C,UAAU,EACR,YAAY;EACV,MAAM;GAAC;GAAgB;GAAW;EAAgB;EAClD,OAAO,CAAC,iBAAiB;CAC3B,EACF;AACF,CAAC;AAED,IAAa,4BACX,UACG;CACH,MAAM,EAAE,OAAO,cAAc,UAAU,QAAM,IAAI,uBAAuB;CAExE,MAAM,UAAU,QAAM,OAA+B,CAAC,CAAC;CAEvD,MAAM,gBAAgB,QAAM,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC,WAC1D,UAEG,OAGC,MAAM,UAAU,KACvB;CAEA,MAAM,CAAC,iBAAiB,sBAAsB,QAAM,SAAS;EAC3D,MAAM;EACN,QAAQ;EACR,OAAO;CACT,CAAC;CACD,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,KAAK;CAE9D,MAAM,0BAA0B,QAAM,kBAAkB;EACtD,MAAM,aAAa,QAAQ,QAAQ;EACnC,IAAI,CAAC,YAAY;EAEjB,MAAM,EAAE,OAAO,WAAW,WAAW,sBAAsB;EAC3D,mBAAmB;GACjB,MAAM,KAAK,MAAM,WAAW,UAAU;GACtC,QAAQ,KAAK,MAAM,MAAM;GACzB,OAAO,KAAK,MAAM,KAAK;EACzB,CAAC;CACH,GAAG,CAAC,aAAa,CAAC;CAKlB,MAAM,6BAA6B,QAAM,OAAO,uBAAuB;CACvE,QAAM,sBAAsB;EAC1B,2BAA2B,UAAU;CACvC,CAAC;CAED,MAAM,WAAW,QAAM,SAAS,MAAM,MAAM,QAAQ;CAEpD,QAAM,gBAAgB;EACpB,MAAM,iBAAiB,IAAI,qBACzB,2BAA2B,QAAQ,CACrC;EAEA,QAD4B,QAChB,SAAS,QAAQ;GAC3B,IAAI,KAAK,eAAe,QAAQ,GAAG;EACrC,CAAC;EAED,aAAa;GACX,eAAe,WAAW;EAC5B;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,QAAM,gBAAgB;EACpB,MAAM,qBAAqB,2BAA2B,QAAQ;EAC9D,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa;GACX,OAAO,oBAAoB,UAAU,YAAY;EACnD;CACF,GAAG,CAAC,CAAC;CAIL,QAAM,sBAAsB;EAC1B,wBAAwB;CAC1B,GAAG,CAAC,eAAe,uBAAuB,CAAC;CAE3C,OACE,qBAAC,mBAAD;EAA0B;EAAqB;EAAc,GAAI;YAAjE,CACE,oBAAC,oBAAD;GAAoB,YAAY;GAAe,OAAO;EAAkB,CAAA,GACvE,QAAM,SAAS,IAAI,MAAM,WAAW,OAAO,UAAU;GACpD,IACE,CAAC,QAAM,eAEL,KAAK,GAEP,MAAM,IAAI,MACR,iEACF;GAGF,OAAO,QAAM,aAAa,OAAO;IAC/B,UAAU,MAAM;KACd,iBAAiB,IAAI;KACrB,IAAI,MAAM,MAAM,SAAS,MAAM,MAAM,QAAQ,CAAC;IAChD;IAGA,KAAK,YACF,MAAM,MAA2C,MACjD,OAA2B;KAC1B,QAAQ,QAAQ,SAAS;KACzB,aAAa;MACX,QAAQ,QAAQ,SAAS;KAC3B;IACF,CACF;GACF,CAAC;EACH,CAAC,CACgB;;AAEvB"}

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

@@ -20,24 +20,20 @@ var SegmentedControlRoot = ({ size, theme = "primary", defaultValue, children, v
 		if (!isControlled) setInternalValue(newValue);
 		onValueChange?.(newValue);
 	}, [isControlled, onValueChange]);
-	React$1.useEffect(() => {
-		if (!isControlled && defaultValue) setInternalValue(defaultValue);
-	}, [defaultValue, isControlled]);
-	const contextValue = React$1.useMemo(() => ({
-		size,
-		theme,
-		defaultValue,
-		onValueChange: handleValueChange,
-		value: currentValue
-	}), [
-		size,
-		theme,
-		defaultValue,
-		handleValueChange,
-		currentValue
-	]);
-	return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, {
-		value: contextValue,
+	return /* @__PURE__ */ jsx(SegmentedControlContext, {
+		value: React$1.useMemo(() => ({
+			size,
+			theme,
+			defaultValue,
+			onValueChange: handleValueChange,
+			value: currentValue
+		}), [
+			size,
+			theme,
+			defaultValue,
+			handleValueChange,
+			currentValue
+		]),
 		children: /* @__PURE__ */ jsx(StyledSegmentedControlRoot, {
 			size,
 			value: currentValue,

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'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\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  { enableResponsiveVariants: 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  value,\n  onValueChange,\n  ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n  const isControlled = value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? value : internalValue\n  // Fire the consumer's `onValueChange` in BOTH modes; only own internal state\n  // when uncontrolled. (Previously `isControlled ? onValueChange :\n  // setInternalValue`, which silently dropped the consumer callback in\n  // uncontrolled mode once `onValueChange` stopped leaking through `...rest`.)\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange]\n  )\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const contextValue = 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={contextValue}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAK5C,MAAM,oBAAoB,QAAM,aAC7B,aAAqB;EACpB,IAAI,CAAC,cAAc,iBAAiB,QAAQ;EAC5C,gBAAgB,QAAQ;CAC1B,GACA,CAAC,cAAc,aAAa,CAC9B;CAEA,QAAM,gBAAgB;EACpB,IAAI,CAAC,gBAAgB,cACnB,iBAAiB,YAAY;CAEjC,GAAG,CAAC,cAAc,YAAY,CAAC;CAE/B,MAAM,eAAe,QAAM,eAClB;EACL;EACA;EACA;EACA,eAAe;EACf,OAAO;CACT,IACA;EAAC;EAAM;EAAO;EAAc;EAAmB;CAAY,CAC7D;CAEA,OACE,oBAAC,wBAAwB,UAAzB;EAAkC,OAAO;YACvC,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACI,CAAA;AAEtC"}
+{"version":3,"file":"SegmentedControlRoot.js","names":[],"sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Tabs } from '../tabs/Tabs'\nimport { SegmentedControlContext } from './SegmentedControl.context'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\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  { enableResponsiveVariants: 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  value,\n  onValueChange,\n  ...rest\n}: React.PropsWithChildren<SegmentedControlRootProps>) => {\n  const isControlled = value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? value : internalValue\n  // Fire the consumer's `onValueChange` in BOTH modes; only own internal state\n  // when uncontrolled. (Previously `isControlled ? onValueChange :\n  // setInternalValue`, which silently dropped the consumer callback in\n  // uncontrolled mode once `onValueChange` stopped leaking through `...rest`.)\n  const handleValueChange = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) setInternalValue(newValue)\n      onValueChange?.(newValue)\n    },\n    [isControlled, onValueChange]\n  )\n\n  const contextValue = 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 value={contextValue}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...rest}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAM,6BAA6B,OACjC,MACA;CACE,MAAM,CAAC,qBAAqB;CAC5B,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,YAAY;EACjB,IAAI,CAAC;EACL,IAAI,CAAC;CACP,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAQA,IAAa,wBAAwB,EACnC,MACA,QAAQ,WACR,cACA,UACA,OACA,eACA,GAAG,WACqD;CACxD,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,QAAM,SAAS,YAAY;CAErE,MAAM,eAAe,eAAe,QAAQ;CAK5C,MAAM,oBAAoB,QAAM,aAC7B,aAAqB;EACpB,IAAI,CAAC,cAAc,iBAAiB,QAAQ;EAC5C,gBAAgB,QAAQ;CAC1B,GACA,CAAC,cAAc,aAAa,CAC9B;CAaA,OACE,oBAAC,yBAAD;EAAyB,OAZN,QAAM,eAClB;GACL;GACA;GACA;GACA,eAAe;GACf,OAAO;EACT,IACA;GAAC;GAAM;GAAO;GAAc;GAAmB;EAAY,CAI3B;YAC9B,oBAAC,4BAAD;GACQ;GACN,OAAO;GACP,eAAe;GACf,GAAI;GAEH;EACyB,CAAA;CACL,CAAA;AAE7B"}

package/dist/components/select-menu/SelectMenu.context.js

@@ -4,7 +4,7 @@ var SelectMenuContext = React$1.createContext({
 	size: "md",
 	theme: "grey"
 });
-var useSelectMenuContext = () => React$1.useContext(SelectMenuContext);
+var useSelectMenuContext = () => React$1.use(SelectMenuContext);
 //#endregion
 export { SelectMenuContext, useSelectMenuContext };
 

package/dist/components/select-menu/SelectMenu.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.context.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  theme: 'white' | 'grey'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  theme: 'grey'\n})\n\nexport const useSelectMenuContext = () => React.useContext(SelectMenuContext)\n"],"mappings":";;AAQA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;AACT,CAAC;AAED,IAAa,6BAA6B,QAAM,WAAW,iBAAiB"}
+{"version":3,"file":"SelectMenu.context.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  theme: 'white' | 'grey'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  theme: 'grey'\n})\n\nexport const useSelectMenuContext = () => React.use(SelectMenuContext)\n"],"mappings":";;AAQA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;AACT,CAAC;AAED,IAAa,6BAA6B,QAAM,IAAI,iBAAiB"}

package/dist/components/select-menu/SelectMenu.js

@@ -4,21 +4,27 @@ import { SelectMenuItem } from "./SelectMenuItem.js";
 import { SelectMenuLabel } from "./SelectMenuLabel.js";
 import { SelectMenuSeparator } from "./SelectMenuSeparator.js";
 import { SelectMenuTrigger } from "./SelectMenuTrigger.js";
-import "react";
+import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import * as RadixSelect from "@radix-ui/react-select";
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => /* @__PURE__ */ jsx(SelectMenuContext.Provider, {
-	value: {
-		size,
-		theme,
-		state
-	},
-	children: /* @__PURE__ */ jsx(RadixSelect.Root, {
-		...rest,
-		children
-	})
-});
+var SelectMenuRoot = ({ size = "md", theme = "grey", state, children, ...rest }) => {
+	return /* @__PURE__ */ jsx(SelectMenuContext, {
+		value: React$1.useMemo(() => ({
+			size,
+			theme,
+			state
+		}), [
+			size,
+			theme,
+			state
+		]),
+		children: /* @__PURE__ */ jsx(RadixSelect.Root, {
+			...rest,
+			children
+		})
+	});
+};
 var SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {
 	Trigger: SelectMenuTrigger,
 	Content: SelectMenuContent,

package/dist/components/select-menu/SelectMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...rest\n}: SelectMenuProps) => (\n  <SelectMenuContext.Provider value={{ size, theme, state }}>\n    <RadixSelect.Root {...rest}>{children}</RadixSelect.Root>\n  </SelectMenuContext.Provider>\n)\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,WAEH,oBAAC,kBAAkB,UAAnB;CAA4B,OAAO;EAAE;EAAM;EAAO;CAAM;WACtD,oBAAC,YAAY,MAAb;EAAkB,GAAI;EAAO;CAA2B,CAAA;AAC9B,CAAA;AAG9B,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;AACb,CAAC"}
+{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as RadixSelect from '@radix-ui/react-select'\nimport * as React from 'react'\n\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = React.ComponentProps<typeof RadixSelect.Root> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  children,\n  ...rest\n}: SelectMenuProps) => {\n  const value = React.useMemo(\n    () => ({ size, theme, state }),\n    [size, theme, state]\n  )\n  return (\n    <SelectMenuContext value={value}>\n      <RadixSelect.Root {...rest}>{children}</RadixSelect.Root>\n    </SelectMenuContext>\n  )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: RadixSelect.Group,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;AAgBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAO;EAAM,IAC5B;GAAC;GAAM;GAAO;EAAK,CAGO;YACxB,oBAAC,YAAY,MAAb;GAAkB,GAAI;GAAO;EAA2B,CAAA;CACvC,CAAA;AAEvB;AAEA,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,YAAY;CACnB,OAAO;CACP,WAAW;AACb,CAAC"}

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

@@ -1,7 +1,7 @@
 import * as React$1 from "react";
 //#region src/components/side-bar/SideBar.context.tsx
 var SideBarContext = React$1.createContext({ isExpanded: void 0 });
-var useSidebarState = () => React$1.useContext(SideBarContext);
+var useSidebarState = () => React$1.use(SideBarContext);
 //#endregion
 export { SideBarContext, useSidebarState };
 

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

@@ -1 +1 @@
-{"version":3,"file":"SideBar.context.js","names":[],"sources":["../../../src/components/side-bar/SideBar.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n  isExpanded?: boolean\n}>({\n  isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.useContext(SideBarContext)\n"],"mappings":";;AAEA,IAAa,iBAAiB,QAAM,cAEjC,EACD,YAAY,KAAA,EACd,CAAC;AAED,IAAa,wBAAwB,QAAM,WAAW,cAAc"}
+{"version":3,"file":"SideBar.context.js","names":[],"sources":["../../../src/components/side-bar/SideBar.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n  isExpanded?: boolean\n}>({\n  isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.use(SideBarContext)\n"],"mappings":";;AAEA,IAAa,iBAAiB,QAAM,cAEjC,EACD,YAAY,KAAA,EACd,CAAC;AAED,IAAa,wBAAwB,QAAM,IAAI,cAAc"}

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

@@ -84,8 +84,8 @@ var SideBarComponent = ({ theme, className, children, type = "expandable", offse
 		...touchProps,
 		ref
 	} : {};
-	return /* @__PURE__ */ jsx(SideBarContext.Provider, {
-		value: { isExpanded },
+	return /* @__PURE__ */ jsx(SideBarContext, {
+		value: React$1.useMemo(() => ({ isExpanded }), [isExpanded]),
 		children: /* @__PURE__ */ jsx(Theme, {
 			theme: theme || light,
 			children: /* @__PURE__ */ jsx(Root, {

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

@@ -1 +1 @@
-{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\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\nconst SideBarComponent = ({\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={cn(\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\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;AAcA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAEP,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO,EAAE,WAAW;YAC3C,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;IAAO;IAChC;IACN,WAAW,GACT,kCACA,kBACA,SACF;cAEA,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;GACL,CAAA;EACD,CAAA;CACgB,CAAA;AAE7B;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}
+{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\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\nconst SideBarComponent = ({\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  const sideBarContextValue = React.useMemo(\n    () => ({ isExpanded }),\n    [isExpanded]\n  )\n\n  return (\n    <SideBarContext value={sideBarContextValue}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={cn(\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>\n  )\n}\n\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;AAcA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAOP,OACE,oBAAC,gBAAD;EAAgB,OANU,QAAM,eACzB,EAAE,WAAW,IACpB,CAAC,UAAU,CAIY;YACrB,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;IAAO;IAChC;IACN,WAAW,GACT,kCACA,kBACA,SACF;cAEA,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;GACL,CAAA;EACD,CAAA;CACO,CAAA;AAEpB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}

package/dist/components/slider-field/SliderField.js

@@ -5,16 +5,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/slider-field/SliderField.tsx
 var SliderField = ({ className, hideLabel, label, name, defaultValue, value, validation, outputLabel, min = 0, max = 100, steps = [], ...rest }) => {
-	const { control } = useFormContext();
+	const { control, setValue } = useFormContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
 		name,
 		control,
 		rules: validation,
 		defaultValue
 	});
+	const serializedValue = JSON.stringify(value);
 	React$1.useEffect(() => {
-		if (value?.length) onChange(value);
-	}, [JSON.stringify(value)]);
+		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
+	}, [
+		serializedValue,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		fieldId: name,

package/dist/components/slider-field/SliderField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { Slider, type SliderProps } from '../slider/Slider'\nimport type { SliderStepsType } from '../slider/SliderSteps'\nimport type { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...rest\n}: SliderFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (value?.length) onChange(value)\n  }, [JSON.stringify(value)])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...rest}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,CAAC,GACT,GAAG,WACmB;CACtB,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CAED,QAAM,gBAAgB;EAEpB,IAAI,OAAO,QAAQ,SAAS,KAAK;CACnC,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;CAE1B,OACE,oBAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;YAEX,qBAAC,QAAD;GACO;GACL,MAAM;GACN,eAAe;GACf,OAAO;GACF;GACA;GACL,GAAI;aAPN,CASE,oBAAC,OAAO,OAAR;IAAmB;IAAU;IAAY;GAAQ,CAAA,GAEjD,oBAAC,OAAO,OAAR;IAAc,OAAO;IAAyB;GAAc,CAAA,CACtD;;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}
+{"version":3,"file":"SliderField.js","names":[],"sources":["../../../src/components/slider-field/SliderField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { Slider, type SliderProps } from '../slider/Slider'\nimport type { SliderStepsType } from '../slider/SliderSteps'\nimport type { SliderValueType } from '../slider/SliderValue'\n\ntype SliderFieldProps = SliderProps &\n  SliderStepsType &\n  SliderValueType &\n  FieldElementWrapperProps\n\nexport const SliderField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  defaultValue,\n  value,\n  validation,\n  outputLabel,\n  min = 0,\n  max = 100,\n  steps = [],\n  ...rest\n}: SliderFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n\n  // Serialized so an inline `value` array with a fresh identity per render\n  // doesn't re-fire the sync effect.\n  const serializedValue = JSON.stringify(value)\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input. An empty\n    // array is a valid value (clearing) and must sync too.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [serializedValue, name, setValue])\n\n  return (\n    <FieldWrapper\n      className={className}\n      fieldId={name}\n      label={label}\n      hideLabel={hideLabel}\n    >\n      <Slider\n        ref={ref}\n        name={innerName}\n        onValueChange={onChange}\n        value={innerValue}\n        min={min}\n        max={max}\n        {...rest}\n      >\n        <Slider.Steps min={min} max={max} steps={steps} />\n\n        <Slider.Value value={innerValue} outputLabel={outputLabel} />\n      </Slider>\n    </FieldWrapper>\n  )\n}\n\nSliderField.displayName = 'SliderField'\n"],"mappings":";;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,cACA,OACA,YACA,aACA,MAAM,GACN,MAAM,KACN,QAAQ,CAAC,GACT,GAAG,WACmB;CACtB,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CAID,MAAM,kBAAkB,KAAK,UAAU,KAAK;CAC5C,QAAM,gBAAgB;EAIpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAEhD,GAAG;EAAC;EAAiB;EAAM;CAAQ,CAAC;CAEpC,OACE,oBAAC,cAAD;EACa;EACX,SAAS;EACF;EACI;YAEX,qBAAC,QAAD;GACO;GACL,MAAM;GACN,eAAe;GACf,OAAO;GACF;GACA;GACL,GAAI;aAPN,CASE,oBAAC,OAAO,OAAR;IAAmB;IAAU;IAAY;GAAQ,CAAA,GAEjD,oBAAC,OAAO,OAAR;IAAc,OAAO;IAAyB;GAAc,CAAA,CACtD;;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/dist/components/sortable/SortableRoot.js

@@ -5,9 +5,11 @@ import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, us
 //#region src/components/sortable/SortableRoot.tsx
 var SortableRoot = ({ sortableIds, onSortChange, children }) => {
 	const [order, setOrder] = React$1.useState(sortableIds);
-	React$1.useEffect(() => {
-		setOrder(sortableIds);
-	}, [sortableIds]);
+	const [prevIds, setPrevIds] = React$1.useState(sortableIds);
+	if (prevIds !== sortableIds) {
+		setPrevIds(sortableIds);
+		if (prevIds.length !== sortableIds.length || sortableIds.some((id, index) => id !== prevIds[index])) setOrder(sortableIds);
+	}
 	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
 	const handleDragEnd = (event) => {
 		const { active, over } = event;

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

@@ -1 +1 @@
-{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype SortableRootProps = {\n  sortableIds: (string | number)[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<SortableRootProps>) => {\n  const [order, setOrder] = React.useState<(string | number)[]>(sortableIds)\n  React.useEffect(() => {\n    setOrder(sortableIds)\n  }, [sortableIds])\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACgD;CAChD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA8B,WAAW;CACzE,QAAM,gBAAgB;EACpB,SAAS,WAAW;CACtB,GAAG,CAAC,WAAW,CAAC;CAEhB,MAAM,UAAU,WACd,UAAU,aAAa,GACvB,UAAU,gBAAgB,EACxB,kBAAkB,4BACpB,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;EACzB,IAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,IAC/C,UAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,EAAE;GACxC,MAAM,WAAW,MAAM,QAAQ,KAAK,EAAE;GACtC,MAAM,WAAW,UAAU,OAAO,UAAU,QAAQ;GACpD,aAAa;IAAE,OAAO;IAAU;IAAU;GAAS,CAAC;GACpD,OAAO;EACT,CAAC;CAEL;CAEA,OACE,oBAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;YAEX,oBAAC,iBAAD;GAAiB,OAAO;GAAQ;EAA0B,CAAA;CAChD,CAAA;AAEhB;AAEA,aAAa,cAAc"}
+{"version":3,"file":"SortableRoot.js","names":[],"sources":["../../../src/components/sortable/SortableRoot.tsx"],"sourcesContent":["import type { DragEndEvent, UniqueIdentifier } from '@dnd-kit/core'\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors\n} from '@dnd-kit/core'\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates\n} from '@dnd-kit/sortable'\nimport * as React from 'react'\n\ntype SortableRootProps = {\n  sortableIds: (string | number)[]\n  onSortChange: (onSortChangeData: {\n    order: UniqueIdentifier[]\n    oldIndex: number\n    newIndex: number\n  }) => void\n}\n\nexport const SortableRoot = ({\n  sortableIds,\n  onSortChange,\n  children\n}: React.PropsWithChildren<SortableRootProps>) => {\n  const [order, setOrder] = React.useState<(string | number)[]>(sortableIds)\n  // Reconcile the external ids during render (React's \"adjusting state when\n  // props change\" pattern — no stale frame), comparing by content rather than\n  // identity so a parent passing an inline array doesn't reset the order and\n  // discard in-flight drag state on every render.\n  const [prevIds, setPrevIds] = React.useState(sortableIds)\n  if (prevIds !== sortableIds) {\n    setPrevIds(sortableIds)\n    const contentChanged =\n      prevIds.length !== sortableIds.length ||\n      sortableIds.some((id, index) => id !== prevIds[index])\n    if (contentChanged) setOrder(sortableIds)\n  }\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates\n    })\n  )\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event\n    if (active.id && over?.id && active.id !== over?.id) {\n      setOrder((order) => {\n        const oldIndex = order.indexOf(active.id)\n        const newIndex = order.indexOf(over.id)\n        const newOrder = arrayMove(order, oldIndex, newIndex)\n        onSortChange({ order: newOrder, oldIndex, newIndex })\n        return newOrder\n      })\n    }\n  }\n\n  return (\n    <DndContext\n      sensors={sensors}\n      collisionDetection={closestCenter}\n      onDragEnd={handleDragEnd}\n    >\n      <SortableContext items={order}>{children}</SortableContext>\n    </DndContext>\n  )\n}\n\nSortableRoot.displayName = 'SortableRoot'\n"],"mappings":";;;;;AAyBA,IAAa,gBAAgB,EAC3B,aACA,cACA,eACgD;CAChD,MAAM,CAAC,OAAO,YAAY,QAAM,SAA8B,WAAW;CAKzE,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,WAAW;CACxD,IAAI,YAAY,aAAa;EAC3B,WAAW,WAAW;EAItB,IAFE,QAAQ,WAAW,YAAY,UAC/B,YAAY,MAAM,IAAI,UAAU,OAAO,QAAQ,MAAM,GACnC,SAAS,WAAW;CAC1C;CAEA,MAAM,UAAU,WACd,UAAU,aAAa,GACvB,UAAU,gBAAgB,EACxB,kBAAkB,4BACpB,CAAC,CACH;CAEA,MAAM,iBAAiB,UAAwB;EAC7C,MAAM,EAAE,QAAQ,SAAS;EACzB,IAAI,OAAO,MAAM,MAAM,MAAM,OAAO,OAAO,MAAM,IAC/C,UAAU,UAAU;GAClB,MAAM,WAAW,MAAM,QAAQ,OAAO,EAAE;GACxC,MAAM,WAAW,MAAM,QAAQ,KAAK,EAAE;GACtC,MAAM,WAAW,UAAU,OAAO,UAAU,QAAQ;GACpD,aAAa;IAAE,OAAO;IAAU;IAAU;GAAS,CAAC;GACpD,OAAO;EACT,CAAC;CAEL;CAEA,OACE,oBAAC,YAAD;EACW;EACT,oBAAoB;EACpB,WAAW;YAEX,oBAAC,iBAAD;GAAiB,OAAO;GAAQ;EAA0B,CAAA;CAChD,CAAA;AAEhB;AAEA,aAAa,cAAc"}