@persona/design-system 0.1.5-pre.4

package/dist/SegmentedControl-CvznPXgC.cjs

@@ -0,0 +1,124 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_mixins_text = require("./mixins/text.cjs");
+const require_useFormField = require("./useFormField-DN3gpEEV.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let react_aria_components = require("react-aria-components");
+//#region components/SegmentedControl/SegmentedControl.tsx
+const SegmentedControlSizeContext = (0, react.createContext)("md");
+const StyledSegmentedControl = (0, styled_components.default)(react_aria_components.ToggleButtonGroup)`
+  display: inline-flex;
+  background-color: ${({ theme }) => theme.color.border.input};
+  border-radius: ${_persona_design_tokens.BorderRadius.Md};
+  padding: 1px;
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  height: ${({ $size = "md" }) => $size === "sm" ? "20px" : "24px"};
+`;
+/**
+* A segmented control component that allows users to select between multiple options.
+* Built with React Aria for accessibility and keyboard navigation.
+*/
+const SegmentedControl = (0, react.forwardRef)(function SegmentedControl({ id, selectedKey, defaultSelectedKey, onSelectionChange, disabled, fullWidth = false, size = "md", className, "aria-label": ariaLabel, children, ...props }, ref) {
+	const field = require_useFormField.useFormField({
+		inputId: id,
+		disabled
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SegmentedControlSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSegmentedControl, {
+			ref,
+			className,
+			selectionMode: "single",
+			selectedKeys: selectedKey ? [selectedKey] : void 0,
+			defaultSelectedKeys: defaultSelectedKey ? [defaultSelectedKey] : void 0,
+			onSelectionChange: (keys) => {
+				const key = Array.from(keys)[0];
+				if (key && onSelectionChange) onSelectionChange(key);
+			},
+			isDisabled: field.disabled,
+			"aria-label": ariaLabel,
+			"aria-labelledby": field.labelId,
+			"aria-describedby": field.helperTextId,
+			"aria-errormessage": field.hasError ? field.helperTextId : void 0,
+			"aria-invalid": field.hasError,
+			$fullWidth: fullWidth,
+			$size: size,
+			...props,
+			id: field.inputId,
+			children
+		})
+	});
+});
+const StyledSegment = (0, styled_components.default)(react_aria_components.ToggleButton)`
+  ${require_mixins_text.paragraphMixins.sm};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: none;
+  border-radius: 3px;
+  color: ${({ theme }) => theme.color.text.secondary};
+  cursor: pointer;
+  flex: 1;
+  line-height: 1;
+
+  & * {
+    cursor: inherit;
+  }
+  padding: 0 ${({ $size = "md" }) => $size === "sm" ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]};
+  position: relative;
+  transition: all 0.15s ease-in-out;
+  white-space: nowrap;
+
+  /* Hover state */
+  &[data-hovered] {
+    background-color: ${({ theme }) => theme.color.variants.basic.hover};
+  }
+
+  /* Selected state */
+  &[data-selected] {
+    background-color: ${({ theme }) => theme.color.primary.white};
+    color: ${({ theme }) => theme.color.text.primary};
+  }
+
+  /* Disabled state */
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Remove focus outline unless we're using a keyboard */
+  &[data-focused]:not([data-focus-visible]) {
+    outline: none;
+  }
+`;
+/**
+* A segment item component for use within SegmentedControl.
+*/
+const SegmentedControlItem = (0, react.forwardRef)(function SegmentedControlItem({ disabled, children, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledSegment, {
+		ref,
+		isDisabled: disabled,
+		$size: (0, react.useContext)(SegmentedControlSizeContext),
+		...props,
+		children
+	});
+});
+//#endregion
+Object.defineProperty(exports, "SegmentedControl", {
+	enumerable: true,
+	get: function() {
+		return SegmentedControl;
+	}
+});
+Object.defineProperty(exports, "SegmentedControlItem", {
+	enumerable: true,
+	get: function() {
+		return SegmentedControlItem;
+	}
+});
+
+//# sourceMappingURL=SegmentedControl-CvznPXgC.cjs.map

package/dist/SegmentedControl-CvznPXgC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl-CvznPXgC.cjs","names":["ToggleButtonGroup","BorderRadius","useFormField","ToggleButton","paragraphMixins","Spacing"],"sources":["../components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { BorderRadius, Spacing } from '@persona/design-tokens';\nimport { createContext, forwardRef, type Key, type ReactNode, useContext } from 'react';\nimport { ToggleButton, ToggleButtonGroup, type ToggleButtonProps } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SegmentedControlSizeContext = createContext<'sm' | 'md'>('md');\n\nexport interface SegmentedControlProps {\n  id?: string;\n  className?: string;\n\n  /**\n   * Current selected key (controlled)\n   */\n  selectedKey?: Key;\n\n  /**\n   * Default selected key (uncontrolled)\n   */\n  defaultSelectedKey?: Key;\n\n  /**\n   * Callback when selection changes\n   */\n  onSelectionChange?: (key: Key) => void;\n\n  /**\n   * Whether the entire component is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the component should take full width\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Size of the segmented control\n   */\n  size?: 'sm' | 'md';\n\n  /**\n   * Accessible label for the group\n   */\n  'aria-label'?: string;\n\n  /**\n   * Segment components\n   */\n  children: ReactNode;\n}\n\ninterface StyledSegmentedControlProps {\n  id?: string;\n  $fullWidth?: boolean;\n  $size?: 'sm' | 'md';\n}\n\nconst StyledSegmentedControl = styled(ToggleButtonGroup)<StyledSegmentedControlProps>`\n  display: inline-flex;\n  background-color: ${({ theme }) => theme.color.border.input};\n  border-radius: ${BorderRadius.Md};\n  padding: 1px;\n  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};\n  height: ${({ $size = 'md' }) => ($size === 'sm' ? '20px' : '24px')};\n`;\n\n/**\n * A segmented control component that allows users to select between multiple options.\n * Built with React Aria for accessibility and keyboard navigation.\n */\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      id,\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange,\n      disabled,\n      fullWidth = false,\n      size = 'md',\n      className,\n      'aria-label': ariaLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFormField({ inputId: id, disabled });\n\n    return (\n      <SegmentedControlSizeContext.Provider value={size}>\n        <StyledSegmentedControl\n          ref={ref}\n          className={className}\n          selectionMode='single'\n          selectedKeys={selectedKey ? [selectedKey] : undefined}\n          defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : undefined}\n          onSelectionChange={(keys) => {\n            const key = Array.from(keys)[0];\n            if (key && onSelectionChange) {\n              onSelectionChange(key);\n            }\n          }}\n          isDisabled={field.disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={field.labelId}\n          aria-describedby={field.helperTextId}\n          aria-errormessage={field.hasError ? field.helperTextId : undefined}\n          aria-invalid={field.hasError}\n          $fullWidth={fullWidth}\n          $size={size}\n          {...props}\n          id={field.inputId}\n        >\n          {children}\n        </StyledSegmentedControl>\n      </SegmentedControlSizeContext.Provider>\n    );\n  },\n);\n\nconst StyledSegment = styled(ToggleButton)<{ $size?: 'sm' | 'md' }>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 3px;\n  color: ${({ theme }) => theme.color.text.secondary};\n  cursor: pointer;\n  flex: 1;\n  line-height: 1;\n\n  & * {\n    cursor: inherit;\n  }\n  padding: 0 ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[1] : Spacing[2])};\n  position: relative;\n  transition: all 0.15s ease-in-out;\n  white-space: nowrap;\n\n  /* Hover state */\n  &[data-hovered] {\n    background-color: ${({ theme }) => theme.color.variants.basic.hover};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => theme.color.primary.white};\n    color: ${({ theme }) => theme.color.text.primary};\n  }\n\n  /* Disabled state */\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Remove focus outline unless we're using a keyboard */\n  &[data-focused]:not([data-focus-visible]) {\n    outline: none;\n  }\n`;\n\nexport interface SegmentedControlItemProps extends Omit<\n  ToggleButtonProps,\n  'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'\n> {\n  /**\n   * Whether this control item is disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * A segment item component for use within SegmentedControl.\n */\nconst SegmentedControlItem = forwardRef<HTMLButtonElement, SegmentedControlItemProps>(\n  function SegmentedControlItem({ disabled, children, ...props }, ref) {\n    const size = useContext(SegmentedControlSizeContext);\n    return (\n      <StyledSegment ref={ref} isDisabled={disabled} $size={size} {...props}>\n        {children}\n      </StyledSegment>\n    );\n  },\n);\n\nexport default SegmentedControl;\nexport { SegmentedControlItem };\n"],"mappings":";;;;;;;;;;AAQA,MAAM,+BAAA,GAAA,MAAA,eAAyD,KAAK;AAqDpE,MAAM,yBAAyB,CAAA,GAAA,kBAAA,SAAOA,sBAAAA,kBAAkB;;uBAEjC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;mBAC3CC,uBAAAA,aAAa,GAAG;;YAEvB,EAAE,iBAAkB,aAAa,SAAS,OAAQ;aACjD,EAAE,QAAQ,WAAY,UAAU,OAAO,SAAS,OAAQ;;;;;;AAOrE,MAAa,oBAAA,GAAA,MAAA,YACX,SAAS,iBACP,EACE,IACA,aACA,oBACA,mBACA,UACA,YAAY,OACZ,OAAO,MACP,WACA,cAAc,WACd,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQC,qBAAAA,aAAa;EAAE,SAAS;EAAI;EAAU,CAAC;AAErD,QACE,iBAAA,GAAA,kBAAA,KAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,iBAAA,GAAA,kBAAA,KAAC,wBAAD;GACO;GACM;GACX,eAAc;GACd,cAAc,cAAc,CAAC,YAAY,GAAG,KAAA;GAC5C,qBAAqB,qBAAqB,CAAC,mBAAmB,GAAG,KAAA;GACjE,oBAAoB,SAAS;IAC3B,MAAM,MAAM,MAAM,KAAK,KAAK,CAAC;AAC7B,QAAI,OAAO,kBACT,mBAAkB,IAAI;;GAG1B,YAAY,MAAM;GAClB,cAAY;GACZ,mBAAiB,MAAM;GACvB,oBAAkB,MAAM;GACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;GACzD,gBAAc,MAAM;GACpB,YAAY;GACZ,OAAO;GACP,GAAI;GACJ,IAAI,MAAM;GAET;GACsB,CAAA;EACY,CAAA;EAG5C;AAED,MAAM,gBAAgB,CAAA,GAAA,kBAAA,SAAOC,sBAAAA,aAAa;IACtCC,oBAAAA,gBAAgB,GAAG;;;;;;;YAOX,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;;;;;;gBAQrC,EAAE,QAAQ,WAAY,UAAU,OAAOC,uBAAAA,QAAQ,KAAKA,uBAAAA,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,MAAM;;;;;yBAK/C,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;cACnD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;;;;;;;;AA4BrD,MAAM,wBAAA,GAAA,MAAA,YACJ,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAG,SAAS,KAAK;AAEnE,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;EAAoB;EAAK,YAAY;EAAU,QAAA,GAAA,MAAA,YAFzB,4BAEoC;EAAE,GAAI;EAC7D;EACa,CAAA;EAGrB"}

package/dist/SegmentedControl-DRtXdbLe.d.cts

@@ -0,0 +1,59 @@
+import * as _$react from "react";
+import { Key, ReactNode } from "react";
+import { ToggleButtonProps } from "react-aria-components";
+
+//#region components/SegmentedControl/SegmentedControl.d.ts
+interface SegmentedControlProps {
+  id?: string;
+  className?: string;
+  /**
+   * Current selected key (controlled)
+   */
+  selectedKey?: Key;
+  /**
+   * Default selected key (uncontrolled)
+   */
+  defaultSelectedKey?: Key;
+  /**
+   * Callback when selection changes
+   */
+  onSelectionChange?: (key: Key) => void;
+  /**
+   * Whether the entire component is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether the component should take full width
+   */
+  fullWidth?: boolean;
+  /**
+   * Size of the segmented control
+   */
+  size?: 'sm' | 'md';
+  /**
+   * Accessible label for the group
+   */
+  'aria-label'?: string;
+  /**
+   * Segment components
+   */
+  children: ReactNode;
+}
+/**
+ * A segmented control component that allows users to select between multiple options.
+ * Built with React Aria for accessibility and keyboard navigation.
+ */
+declare const SegmentedControl: _$react.ForwardRefExoticComponent<SegmentedControlProps & _$react.RefAttributes<HTMLDivElement>>;
+interface SegmentedControlItemProps extends Omit<ToggleButtonProps, 'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'> {
+  /**
+   * Whether this control item is disabled
+   */
+  disabled?: boolean;
+}
+/**
+ * A segment item component for use within SegmentedControl.
+ */
+declare const SegmentedControlItem: _$react.ForwardRefExoticComponent<SegmentedControlItemProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SegmentedControlProps as i, SegmentedControlItem as n, SegmentedControlItemProps as r, SegmentedControl as t };
+//# sourceMappingURL=SegmentedControl-DRtXdbLe.d.cts.map

package/dist/SegmentedControl-Dk5S4Dhz.d.mts

@@ -0,0 +1,59 @@
+import * as _$react from "react";
+import { Key, ReactNode } from "react";
+import { ToggleButtonProps } from "react-aria-components";
+
+//#region components/SegmentedControl/SegmentedControl.d.ts
+interface SegmentedControlProps {
+  id?: string;
+  className?: string;
+  /**
+   * Current selected key (controlled)
+   */
+  selectedKey?: Key;
+  /**
+   * Default selected key (uncontrolled)
+   */
+  defaultSelectedKey?: Key;
+  /**
+   * Callback when selection changes
+   */
+  onSelectionChange?: (key: Key) => void;
+  /**
+   * Whether the entire component is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Whether the component should take full width
+   */
+  fullWidth?: boolean;
+  /**
+   * Size of the segmented control
+   */
+  size?: 'sm' | 'md';
+  /**
+   * Accessible label for the group
+   */
+  'aria-label'?: string;
+  /**
+   * Segment components
+   */
+  children: ReactNode;
+}
+/**
+ * A segmented control component that allows users to select between multiple options.
+ * Built with React Aria for accessibility and keyboard navigation.
+ */
+declare const SegmentedControl: _$react.ForwardRefExoticComponent<SegmentedControlProps & _$react.RefAttributes<HTMLDivElement>>;
+interface SegmentedControlItemProps extends Omit<ToggleButtonProps, 'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'> {
+  /**
+   * Whether this control item is disabled
+   */
+  disabled?: boolean;
+}
+/**
+ * A segment item component for use within SegmentedControl.
+ */
+declare const SegmentedControlItem: _$react.ForwardRefExoticComponent<SegmentedControlItemProps & _$react.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { SegmentedControlProps as i, SegmentedControlItem as n, SegmentedControlItemProps as r, SegmentedControl as t };
+//# sourceMappingURL=SegmentedControl-Dk5S4Dhz.d.mts.map

package/dist/SegmentedControl-DnwNjYre.mjs

@@ -0,0 +1,111 @@
+import { paragraphMixins } from "./mixins/text.mjs";
+import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
+import { BorderRadius, Spacing } from "@persona/design-tokens";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { ToggleButton, ToggleButtonGroup } from "react-aria-components";
+//#region components/SegmentedControl/SegmentedControl.tsx
+const SegmentedControlSizeContext = createContext("md");
+const StyledSegmentedControl = styled(ToggleButtonGroup)`
+  display: inline-flex;
+  background-color: ${({ theme }) => theme.color.border.input};
+  border-radius: ${BorderRadius.Md};
+  padding: 1px;
+  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
+  height: ${({ $size = "md" }) => $size === "sm" ? "20px" : "24px"};
+`;
+/**
+* A segmented control component that allows users to select between multiple options.
+* Built with React Aria for accessibility and keyboard navigation.
+*/
+const SegmentedControl = forwardRef(function SegmentedControl({ id, selectedKey, defaultSelectedKey, onSelectionChange, disabled, fullWidth = false, size = "md", className, "aria-label": ariaLabel, children, ...props }, ref) {
+	const field = useFormField({
+		inputId: id,
+		disabled
+	});
+	return /* @__PURE__ */ jsx(SegmentedControlSizeContext.Provider, {
+		value: size,
+		children: /* @__PURE__ */ jsx(StyledSegmentedControl, {
+			ref,
+			className,
+			selectionMode: "single",
+			selectedKeys: selectedKey ? [selectedKey] : void 0,
+			defaultSelectedKeys: defaultSelectedKey ? [defaultSelectedKey] : void 0,
+			onSelectionChange: (keys) => {
+				const key = Array.from(keys)[0];
+				if (key && onSelectionChange) onSelectionChange(key);
+			},
+			isDisabled: field.disabled,
+			"aria-label": ariaLabel,
+			"aria-labelledby": field.labelId,
+			"aria-describedby": field.helperTextId,
+			"aria-errormessage": field.hasError ? field.helperTextId : void 0,
+			"aria-invalid": field.hasError,
+			$fullWidth: fullWidth,
+			$size: size,
+			...props,
+			id: field.inputId,
+			children
+		})
+	});
+});
+const StyledSegment = styled(ToggleButton)`
+  ${paragraphMixins.sm};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: none;
+  border-radius: 3px;
+  color: ${({ theme }) => theme.color.text.secondary};
+  cursor: pointer;
+  flex: 1;
+  line-height: 1;
+
+  & * {
+    cursor: inherit;
+  }
+  padding: 0 ${({ $size = "md" }) => $size === "sm" ? Spacing[1] : Spacing[2]};
+  position: relative;
+  transition: all 0.15s ease-in-out;
+  white-space: nowrap;
+
+  /* Hover state */
+  &[data-hovered] {
+    background-color: ${({ theme }) => theme.color.variants.basic.hover};
+  }
+
+  /* Selected state */
+  &[data-selected] {
+    background-color: ${({ theme }) => theme.color.primary.white};
+    color: ${({ theme }) => theme.color.text.primary};
+  }
+
+  /* Disabled state */
+  &[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Remove focus outline unless we're using a keyboard */
+  &[data-focused]:not([data-focus-visible]) {
+    outline: none;
+  }
+`;
+/**
+* A segment item component for use within SegmentedControl.
+*/
+const SegmentedControlItem = forwardRef(function SegmentedControlItem({ disabled, children, ...props }, ref) {
+	return /* @__PURE__ */ jsx(StyledSegment, {
+		ref,
+		isDisabled: disabled,
+		$size: useContext(SegmentedControlSizeContext),
+		...props,
+		children
+	});
+});
+//#endregion
+export { SegmentedControlItem as n, SegmentedControl as t };
+
+//# sourceMappingURL=SegmentedControl-DnwNjYre.mjs.map

package/dist/SegmentedControl-DnwNjYre.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl-DnwNjYre.mjs","names":[],"sources":["../components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { BorderRadius, Spacing } from '@persona/design-tokens';\nimport { createContext, forwardRef, type Key, type ReactNode, useContext } from 'react';\nimport { ToggleButton, ToggleButtonGroup, type ToggleButtonProps } from 'react-aria-components';\nimport styled from 'styled-components';\n\nimport useFormField from 'design-system/components/FormControl/useFormField';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\nconst SegmentedControlSizeContext = createContext<'sm' | 'md'>('md');\n\nexport interface SegmentedControlProps {\n  id?: string;\n  className?: string;\n\n  /**\n   * Current selected key (controlled)\n   */\n  selectedKey?: Key;\n\n  /**\n   * Default selected key (uncontrolled)\n   */\n  defaultSelectedKey?: Key;\n\n  /**\n   * Callback when selection changes\n   */\n  onSelectionChange?: (key: Key) => void;\n\n  /**\n   * Whether the entire component is disabled\n   */\n  disabled?: boolean;\n\n  /**\n   * Whether the component should take full width\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Size of the segmented control\n   */\n  size?: 'sm' | 'md';\n\n  /**\n   * Accessible label for the group\n   */\n  'aria-label'?: string;\n\n  /**\n   * Segment components\n   */\n  children: ReactNode;\n}\n\ninterface StyledSegmentedControlProps {\n  id?: string;\n  $fullWidth?: boolean;\n  $size?: 'sm' | 'md';\n}\n\nconst StyledSegmentedControl = styled(ToggleButtonGroup)<StyledSegmentedControlProps>`\n  display: inline-flex;\n  background-color: ${({ theme }) => theme.color.border.input};\n  border-radius: ${BorderRadius.Md};\n  padding: 1px;\n  width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};\n  height: ${({ $size = 'md' }) => ($size === 'sm' ? '20px' : '24px')};\n`;\n\n/**\n * A segmented control component that allows users to select between multiple options.\n * Built with React Aria for accessibility and keyboard navigation.\n */\nexport const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(\n  function SegmentedControl(\n    {\n      id,\n      selectedKey,\n      defaultSelectedKey,\n      onSelectionChange,\n      disabled,\n      fullWidth = false,\n      size = 'md',\n      className,\n      'aria-label': ariaLabel,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFormField({ inputId: id, disabled });\n\n    return (\n      <SegmentedControlSizeContext.Provider value={size}>\n        <StyledSegmentedControl\n          ref={ref}\n          className={className}\n          selectionMode='single'\n          selectedKeys={selectedKey ? [selectedKey] : undefined}\n          defaultSelectedKeys={defaultSelectedKey ? [defaultSelectedKey] : undefined}\n          onSelectionChange={(keys) => {\n            const key = Array.from(keys)[0];\n            if (key && onSelectionChange) {\n              onSelectionChange(key);\n            }\n          }}\n          isDisabled={field.disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={field.labelId}\n          aria-describedby={field.helperTextId}\n          aria-errormessage={field.hasError ? field.helperTextId : undefined}\n          aria-invalid={field.hasError}\n          $fullWidth={fullWidth}\n          $size={size}\n          {...props}\n          id={field.inputId}\n        >\n          {children}\n        </StyledSegmentedControl>\n      </SegmentedControlSizeContext.Provider>\n    );\n  },\n);\n\nconst StyledSegment = styled(ToggleButton)<{ $size?: 'sm' | 'md' }>`\n  ${paragraphMixins.sm};\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 3px;\n  color: ${({ theme }) => theme.color.text.secondary};\n  cursor: pointer;\n  flex: 1;\n  line-height: 1;\n\n  & * {\n    cursor: inherit;\n  }\n  padding: 0 ${({ $size = 'md' }) => ($size === 'sm' ? Spacing[1] : Spacing[2])};\n  position: relative;\n  transition: all 0.15s ease-in-out;\n  white-space: nowrap;\n\n  /* Hover state */\n  &[data-hovered] {\n    background-color: ${({ theme }) => theme.color.variants.basic.hover};\n  }\n\n  /* Selected state */\n  &[data-selected] {\n    background-color: ${({ theme }) => theme.color.primary.white};\n    color: ${({ theme }) => theme.color.text.primary};\n  }\n\n  /* Disabled state */\n  &[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  /* Remove focus outline unless we're using a keyboard */\n  &[data-focused]:not([data-focus-visible]) {\n    outline: none;\n  }\n`;\n\nexport interface SegmentedControlItemProps extends Omit<\n  ToggleButtonProps,\n  'isDisabled' | 'style' | 'isSelected' | 'defaultSelected'\n> {\n  /**\n   * Whether this control item is disabled\n   */\n  disabled?: boolean;\n}\n\n/**\n * A segment item component for use within SegmentedControl.\n */\nconst SegmentedControlItem = forwardRef<HTMLButtonElement, SegmentedControlItemProps>(\n  function SegmentedControlItem({ disabled, children, ...props }, ref) {\n    const size = useContext(SegmentedControlSizeContext);\n    return (\n      <StyledSegment ref={ref} isDisabled={disabled} $size={size} {...props}>\n        {children}\n      </StyledSegment>\n    );\n  },\n);\n\nexport default SegmentedControl;\nexport { SegmentedControlItem };\n"],"mappings":";;;;;;;;AAQA,MAAM,8BAA8B,cAA2B,KAAK;AAqDpE,MAAM,yBAAyB,OAAO,kBAAkB;;uBAEjC,EAAE,YAAY,MAAM,MAAM,OAAO,MAAM;mBAC3C,aAAa,GAAG;;YAEvB,EAAE,iBAAkB,aAAa,SAAS,OAAQ;aACjD,EAAE,QAAQ,WAAY,UAAU,OAAO,SAAS,OAAQ;;;;;;AAOrE,MAAa,mBAAmB,WAC9B,SAAS,iBACP,EACE,IACA,aACA,oBACA,mBACA,UACA,YAAY,OACZ,OAAO,MACP,WACA,cAAc,WACd,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,aAAa;EAAE,SAAS;EAAI;EAAU,CAAC;AAErD,QACE,oBAAC,4BAA4B,UAA7B;EAAsC,OAAO;YAC3C,oBAAC,wBAAD;GACO;GACM;GACX,eAAc;GACd,cAAc,cAAc,CAAC,YAAY,GAAG,KAAA;GAC5C,qBAAqB,qBAAqB,CAAC,mBAAmB,GAAG,KAAA;GACjE,oBAAoB,SAAS;IAC3B,MAAM,MAAM,MAAM,KAAK,KAAK,CAAC;AAC7B,QAAI,OAAO,kBACT,mBAAkB,IAAI;;GAG1B,YAAY,MAAM;GAClB,cAAY;GACZ,mBAAiB,MAAM;GACvB,oBAAkB,MAAM;GACxB,qBAAmB,MAAM,WAAW,MAAM,eAAe,KAAA;GACzD,gBAAc,MAAM;GACpB,YAAY;GACZ,OAAO;GACP,GAAI;GACJ,IAAI,MAAM;GAET;GACsB,CAAA;EACY,CAAA;EAG5C;AAED,MAAM,gBAAgB,OAAO,aAAa;IACtC,gBAAgB,GAAG;;;;;;;YAOX,EAAE,YAAY,MAAM,MAAM,KAAK,UAAU;;;;;;;;gBAQrC,EAAE,QAAQ,WAAY,UAAU,OAAO,QAAQ,KAAK,QAAQ,GAAI;;;;;;;yBAOvD,EAAE,YAAY,MAAM,MAAM,SAAS,MAAM,MAAM;;;;;yBAK/C,EAAE,YAAY,MAAM,MAAM,QAAQ,MAAM;cACnD,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;;;;;;;;;;;;;;;;;AA4BrD,MAAM,uBAAuB,WAC3B,SAAS,qBAAqB,EAAE,UAAU,UAAU,GAAG,SAAS,KAAK;AAEnE,QACE,oBAAC,eAAD;EAAoB;EAAK,YAAY;EAAU,OAFpC,WAAW,4BAEoC;EAAE,GAAI;EAC7D;EACa,CAAA;EAGrB"}

package/dist/SegmentedControl.d.cts

@@ -0,0 +1,2 @@
+import { i as SegmentedControlProps, n as SegmentedControlItem, r as SegmentedControlItemProps, t as SegmentedControl } from "./SegmentedControl-DRtXdbLe.cjs";
+export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlItemProps, SegmentedControlProps };

package/dist/SegmentedControl.d.mts

@@ -0,0 +1,2 @@
+import { i as SegmentedControlProps, n as SegmentedControlItem, r as SegmentedControlItemProps, t as SegmentedControl } from "./SegmentedControl-Dk5S4Dhz.mjs";
+export { SegmentedControl, SegmentedControl as default, SegmentedControlItem, SegmentedControlItemProps, SegmentedControlProps };

package/dist/Select-BdPdgtfU.d.cts

@@ -0,0 +1,77 @@
+import { n as InputSizes, t as InputMixinProps } from "./input-Bm_anD8X.cjs";
+import { t as Property } from "./index-BM1DqNZf.cjs";
+import { l as MenuItemProps } from "./Menu-DPrNMatb.cjs";
+import * as _$react from "react";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+//#region components/Select/Select.d.ts
+interface SelectProps extends InputMixinProps, Omit<SelectPrimitive.SelectProps, 'value'> {
+  'aria-label'?: string;
+  placeholder?: string;
+  /**
+   * id will be applied to trigger
+   */
+  id?: string;
+  /**
+   * Class name will be applied to trigger
+   */
+  className?: string;
+  /**
+   * Max height of options menu
+   */
+  maxHeight?: number;
+  /**
+   * Min width of the select
+   */
+  minWidth?: number;
+  /**
+   * Width of the selected value container
+   */
+  valueContainerWidth?: 'auto' | '100%';
+  /**
+   * Render dropdown menu in a portal.
+   */
+  portal?: boolean;
+  /**
+   * Props to apply to Radix Select.Trigger within
+   */
+  triggerProps?: SelectPrimitive.SelectTriggerProps;
+  /**
+   * Props to apply to Radix Select.Content within
+   */
+  contentProps?: SelectPrimitive.SelectContentProps;
+  /**
+   * Callback meant for use with `react-hook-form`'s `useForm` (or Persona's `useFormSecurely`)
+   */
+  onChange?: (event: {
+    target: {
+      value: string;
+    };
+  }) => void;
+  size?: InputSizes;
+  value?: string | null;
+  width?: string;
+  header?: ReactNode;
+  footer?: ReactNode;
+  /**
+   * z-index of content. Please use sparingly.
+   */
+  zIndex?: Property.ZIndex;
+}
+interface SelectHeaderProps {
+  title?: ReactNode;
+  menuItems?: ReactNode;
+  menuTriggerLabel?: string;
+}
+declare const SelectHeader: ({
+  title,
+  menuItems,
+  menuTriggerLabel
+}: SelectHeaderProps) => _$react_jsx_runtime0.JSX.Element;
+declare const Select: _$react.ForwardRefExoticComponent<SelectProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare const Option: _$react.ForwardRefExoticComponent<SelectPrimitive.SelectItemProps & MenuItemProps<"div"> & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { SelectProps as i, Select as n, SelectHeader as r, Option as t };
+//# sourceMappingURL=Select-BdPdgtfU.d.cts.map