@servicetitan/anvil2 2.7.0 → 2.7.1

package/dist/{SegmentedControl-7fDLhgvh.js.map → SegmentedControl-BAi4pnFe.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl-7fDLhgvh.js","sources":["../src/components/SegmentedControl/internal/SegmentedControlContext.ts","../src/components/SegmentedControl/SegmentedControlSegment.tsx","../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nimport { SegmentedControlSegmentProps } from \"../SegmentedControlSegment\";\nimport { SegmentedControlProps } from \"../SegmentedControl\";\n\n/**\n * Context props for SegmentedControl internal state management\n */\nexport type SegmentedControlContextProps = {\n  /**\n   * Currently selected segment value\n   */\n  current?: SegmentedControlSegmentProps[\"value\"];\n  /**\n   * Function to set the current segment\n   */\n  setCurrent?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n  /**\n   * Change handler for the segmented control\n   */\n  onChange?: SegmentedControlProps[\"onChange\"];\n  /**\n   * Name attribute for radio inputs\n   */\n  name?: string;\n};\n\nexport const SegmentedControlContext =\n  createContext<SegmentedControlContextProps>({});\n","import {\n  useContext,\n  useRef,\n  forwardRef,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport { core } from \"@servicetitan/hammer-token\";\n\nimport { DataTrackingId } from \"../../types\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * State object returned by segment interactions\n */\nexport type SegmentState = {\n  /**\n   * Whether the segment is checked\n   */\n  checked: boolean;\n  /**\n   * The value of the segment\n   */\n  value?: SegmentedControlSegmentProps[\"value\"];\n};\n\n/**\n * Props for the SegmentedControlSegment component\n * @extends ComponentPropsWithoutRef<\"label\">\n */\nexport type SegmentedControlSegmentProps = ComponentPropsWithoutRef<\"label\"> & {\n  /**\n   * Optional icon to display in the segment\n   */\n  icon?: IconProps[\"svg\"];\n  /**\n   * Value of the segment\n   */\n  value: string;\n  /**\n   * The content to display in the segment\n   */\n  children?: React.ReactNode;\n} & DataTrackingId;\n\n/**\n * SegmentedControlSegment component for individual segments within a segmented control.\n *\n * Features:\n * - Individual segment with radio input\n * - Optional icon support\n * - Animated selection indicator\n * - Accessibility support with proper ARIA attributes\n * - Context integration with parent SegmentedControl\n * - Motion animations with reduced motion support\n * - Icon-only mode when no children provided\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n *   Option 1\n * </SegmentedControl.Segment>\n *\n * @example\n * <SegmentedControl.Segment value=\"icon-only\" icon={IconOnly} />\n */\nexport const SegmentedControlSegment = forwardRef<\n  HTMLLabelElement,\n  SegmentedControlSegmentProps\n>((props, ref) => {\n  const {\n    icon,\n    value,\n    children,\n    className,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const shouldReduceMotion = useReducedMotion();\n  const { current, setCurrent, name } = useContext(SegmentedControlContext);\n  const labelRef = useRef<HTMLSpanElement>(null);\n\n  const classNames = cx(styles.segment, className, {\n    [styles[\"icon-only\"]]: icon && !children,\n  });\n\n  const data = {\n    value: props.value,\n  };\n\n  const trackingId = useTrackingId({\n    name: \"SegmentedControlSegment\",\n    data,\n    hasOverride: !!props[\"data-tracking-id\"],\n  });\n\n  // For icon-only segments (no children), use aria-label if provided, otherwise fall back to value\n  const computedAriaLabel = !children ? ariaLabel || value : undefined;\n\n  return (\n    <>\n      <label\n        className={classNames}\n        ref={useMergeRefs([labelRef, ref])}\n        data-tracking-id={trackingId}\n        data-anv=\"segmented-control-segment\"\n        aria-label={computedAriaLabel}\n        {...rest}\n      >\n        <input\n          type=\"radio\"\n          name={name}\n          value={value}\n          onChange={() => setCurrent?.(value)}\n          checked={current === value}\n          aria-checked={current === value}\n        />\n        {icon ? <Icon svg={icon} aria-hidden /> : null}\n        {children}\n        {current === value && (\n          <motion.span\n            layoutId={name}\n            className={styles[\"select-indicator\"]}\n            transition={{\n              duration: shouldReduceMotion\n                ? 0\n                : +core.primitive.Duration.value.replace(\"ms\", \"\") / 1000,\n            }}\n          />\n        )}\n      </label>\n    </>\n  );\n});\n\nSegmentedControlSegment.displayName = \"SegmentedControlSegment\";\n","import { forwardRef, useId, ComponentPropsWithoutRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { motion } from \"motion/react\";\n\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\nimport {\n  SegmentedControlSegment,\n  SegmentedControlSegmentProps,\n} from \"./SegmentedControlSegment\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * Base props for SegmentedControl component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\">\n * @extends LayoutUtilProps\n */\ntype BaseSegmentedControlProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\"\n> &\n  LayoutUtilProps &\n  DataTrackingId & {\n    /**\n     * Callback when segment is changed\n     */\n    onChange?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n\n    /**\n     * Size of the segment\n     * @default \"medium\"\n     */\n    size?: Extract<Size, \"small\" | \"medium\">;\n\n    /**\n     * Whether to fill available width\n     * @default false\n     */\n    fill?: boolean;\n\n    /**\n     * Name attribute for radio inputs\n     * @remarks If empty, it will auto generate one using useId()\n     */\n    name?: string;\n\n    /**\n     * The segments to render within the segmented control\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * Props for controlled SegmentedControl\n */\ntype ControlledSegmentedControlProps = BaseSegmentedControlProps & {\n  /**\n   * Selected segment (controlled mode)\n   */\n  selected: SegmentedControlSegmentProps[\"value\"];\n  defaultSelected?: never;\n};\n\n/**\n * Props for uncontrolled SegmentedControl\n */\ntype UncontrolledSegmentedControlProps = BaseSegmentedControlProps & {\n  /**\n   * Initial selection (uncontrolled mode)\n   */\n  defaultSelected: SegmentedControlSegmentProps[\"value\"];\n  selected?: never;\n};\n\n/**\n * Props for the SegmentedControl component\n */\nexport type SegmentedControlProps =\n  | ControlledSegmentedControlProps\n  | UncontrolledSegmentedControlProps;\n\nconst SegmentedControlElement = forwardRef<\n  HTMLDivElement,\n  SegmentedControlProps\n>((props, ref) => {\n  const {\n    className,\n    onClick,\n    onChange,\n    children,\n    size = \"medium\",\n    defaultSelected,\n    selected,\n    name,\n    fill,\n    ...rest\n  } = props;\n\n  const [current, setCurrent] = useOptionallyControlledState({\n    controlledValue: selected,\n    defaultValue: defaultSelected,\n    onChange,\n  });\n\n  const segmentedControlRef = useRef<HTMLDivElement>(null);\n\n  const SegmentedControlClassNames = cx(\n    styles[\"segmented-control\"],\n    styles[size],\n    className,\n    {\n      [styles.fill]: fill,\n    },\n  );\n\n  const uid = useId();\n\n  const data = {\n    name: props.name,\n  };\n\n  const trackingId = useTrackingId({\n    name: \"SegmentedControl\",\n    data,\n    hasOverride: !!props[\"data-tracking-id\"],\n  });\n\n  return (\n    <motion.div\n      transition={{ duration: 0 }}\n      layout\n      role=\"radiogroup\"\n      className={SegmentedControlClassNames}\n      data-anv=\"segmented-control\"\n      data-tracking-id={trackingId}\n      ref={useMergeRefs([segmentedControlRef, ref])}\n      {...rest}\n    >\n      <SegmentedControlContext.Provider\n        value={{ current, setCurrent, name: name ?? uid }}\n      >\n        {children}\n      </SegmentedControlContext.Provider>\n    </motion.div>\n  );\n});\n\nSegmentedControlElement.displayName = \"SegmentedControl\";\n\n/**\n * SegmentedControl component for selecting one option from a group of related choices.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Multiple size variants (small, medium)\n * - Optional fill width mode\n * - Smooth animations with motion\n * - Accessibility support with proper radio group semantics\n * - Layout utility props for positioning and spacing\n * - Context-based state management\n * - Auto-generated or custom name attributes\n * - Segment support via SegmentedControl.Segment\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl\n *   selected={selectedValue}\n *   onChange={setSelectedValue}\n *   size=\"medium\"\n * >\n *   <SegmentedControl.Segment value=\"option1\">Option 1</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"option2\">Option 2</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"option3\">Option 3</SegmentedControl.Segment>\n * </SegmentedControl>\n *\n * @example\n * <SegmentedControl\n *   defaultSelected=\"small\"\n *   size=\"small\"\n *   fill\n * >\n *   <SegmentedControl.Segment value=\"small\" icon={SmallIcon}>Small</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"large\" icon={LargeIcon}>Large</SegmentedControl.Segment>\n * </SegmentedControl>\n */\nexport const SegmentedControl = Object.assign(SegmentedControlElement, {\n  /**\n   * SegmentedControlSegment component for individual segments within a segmented control.\n   *\n   * Features:\n   * - Individual segment with radio input\n   * - Optional icon support\n   * - Animated selection indicator\n   * - Accessibility support with proper ARIA attributes\n   * - Context integration with parent SegmentedControl\n   * - Motion animations with reduced motion support\n   *\n   * @example\n   * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n   *   Option 1\n   * </SegmentedControl.Segment>\n   */\n  Segment: SegmentedControlSegment,\n});\n\nexport default SegmentedControl;\n"],"names":["core.primitive.Duration"],"mappings":"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"}
+{"version":3,"file":"SegmentedControl-BAi4pnFe.js","sources":["../src/components/SegmentedControl/internal/SegmentedControlContext.ts","../src/components/SegmentedControl/SegmentedControlSegment.tsx","../src/components/SegmentedControl/SegmentedControl.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nimport { SegmentedControlSegmentProps } from \"../SegmentedControlSegment\";\nimport { SegmentedControlProps } from \"../SegmentedControl\";\n\n/**\n * Context props for SegmentedControl internal state management\n */\nexport type SegmentedControlContextProps = {\n  /**\n   * Currently selected segment value\n   */\n  current?: SegmentedControlSegmentProps[\"value\"];\n  /**\n   * Function to set the current segment\n   */\n  setCurrent?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n  /**\n   * Change handler for the segmented control\n   */\n  onChange?: SegmentedControlProps[\"onChange\"];\n  /**\n   * Name attribute for radio inputs\n   */\n  name?: string;\n};\n\nexport const SegmentedControlContext =\n  createContext<SegmentedControlContextProps>({});\n","import {\n  useContext,\n  useRef,\n  forwardRef,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport { core } from \"@servicetitan/hammer-token\";\n\nimport { DataTrackingId } from \"../../types\";\nimport { Icon, IconProps } from \"../Icon\";\nimport { motion, useReducedMotion } from \"motion/react\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * State object returned by segment interactions\n */\nexport type SegmentState = {\n  /**\n   * Whether the segment is checked\n   */\n  checked: boolean;\n  /**\n   * The value of the segment\n   */\n  value?: SegmentedControlSegmentProps[\"value\"];\n};\n\n/**\n * Props for the SegmentedControlSegment component\n * @extends ComponentPropsWithoutRef<\"label\">\n */\nexport type SegmentedControlSegmentProps = ComponentPropsWithoutRef<\"label\"> & {\n  /**\n   * Optional icon to display in the segment\n   */\n  icon?: IconProps[\"svg\"];\n  /**\n   * Value of the segment\n   */\n  value: string;\n  /**\n   * The content to display in the segment\n   */\n  children?: React.ReactNode;\n} & DataTrackingId;\n\n/**\n * SegmentedControlSegment component for individual segments within a segmented control.\n *\n * Features:\n * - Individual segment with radio input\n * - Optional icon support\n * - Animated selection indicator\n * - Accessibility support with proper ARIA attributes\n * - Context integration with parent SegmentedControl\n * - Motion animations with reduced motion support\n * - Icon-only mode when no children provided\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n *   Option 1\n * </SegmentedControl.Segment>\n *\n * @example\n * <SegmentedControl.Segment value=\"icon-only\" icon={IconOnly} />\n */\nexport const SegmentedControlSegment = forwardRef<\n  HTMLLabelElement,\n  SegmentedControlSegmentProps\n>((props, ref) => {\n  const {\n    icon,\n    value,\n    children,\n    className,\n    \"aria-label\": ariaLabel,\n    ...rest\n  } = props;\n  const shouldReduceMotion = useReducedMotion();\n  const { current, setCurrent, name } = useContext(SegmentedControlContext);\n  const labelRef = useRef<HTMLSpanElement>(null);\n\n  const classNames = cx(styles.segment, className, {\n    [styles[\"icon-only\"]]: icon && !children,\n  });\n\n  const data = {\n    value: props.value,\n  };\n\n  const trackingId = useTrackingId({\n    name: \"SegmentedControlSegment\",\n    data,\n    hasOverride: !!props[\"data-tracking-id\"],\n  });\n\n  // For icon-only segments (no children), use aria-label if provided, otherwise fall back to value\n  const computedAriaLabel = !children ? ariaLabel || value : undefined;\n\n  return (\n    <>\n      <label\n        className={classNames}\n        ref={useMergeRefs([labelRef, ref])}\n        data-tracking-id={trackingId}\n        data-anv=\"segmented-control-segment\"\n        aria-label={computedAriaLabel}\n        {...rest}\n      >\n        <input\n          type=\"radio\"\n          name={name}\n          value={value}\n          onChange={() => setCurrent?.(value)}\n          checked={current === value}\n          aria-checked={current === value}\n        />\n        {icon ? <Icon svg={icon} aria-hidden /> : null}\n        {children}\n        {current === value && (\n          <motion.span\n            layoutId={name}\n            className={styles[\"select-indicator\"]}\n            transition={{\n              duration: shouldReduceMotion\n                ? 0\n                : +core.primitive.Duration.value.replace(\"ms\", \"\") / 1000,\n            }}\n          />\n        )}\n      </label>\n    </>\n  );\n});\n\nSegmentedControlSegment.displayName = \"SegmentedControlSegment\";\n","import { forwardRef, useId, ComponentPropsWithoutRef, useRef } from \"react\";\nimport cx from \"classnames\";\nimport { motion } from \"motion/react\";\n\nimport { DataTrackingId, LayoutUtilProps, Size } from \"../../types\";\nimport { useMergeRefs, useTrackingId } from \"../../hooks\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\n\nimport { SegmentedControlContext } from \"./internal/SegmentedControlContext\";\nimport {\n  SegmentedControlSegment,\n  SegmentedControlSegmentProps,\n} from \"./SegmentedControlSegment\";\n\nimport styles from \"./SegmentedControl.module.scss\";\n\n/**\n * Base props for SegmentedControl component\n * @extends Omit<ComponentPropsWithoutRef<\"div\">, \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\">\n * @extends LayoutUtilProps\n */\ntype BaseSegmentedControlProps = Omit<\n  ComponentPropsWithoutRef<\"div\">,\n  \"onAnimationStart\" | \"onDragStart\" | \"onDragEnd\" | \"onDrag\" | \"onChange\"\n> &\n  LayoutUtilProps &\n  DataTrackingId & {\n    /**\n     * Callback when segment is changed\n     */\n    onChange?: (value: SegmentedControlSegmentProps[\"value\"]) => void;\n\n    /**\n     * Size of the segment\n     * @default \"medium\"\n     */\n    size?: Extract<Size, \"small\" | \"medium\">;\n\n    /**\n     * Whether to fill available width\n     * @default false\n     */\n    fill?: boolean;\n\n    /**\n     * Name attribute for radio inputs\n     * @remarks If empty, it will auto generate one using useId()\n     */\n    name?: string;\n\n    /**\n     * The segments to render within the segmented control\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * Props for controlled SegmentedControl\n */\ntype ControlledSegmentedControlProps = BaseSegmentedControlProps & {\n  /**\n   * Selected segment (controlled mode)\n   */\n  selected: SegmentedControlSegmentProps[\"value\"];\n  defaultSelected?: never;\n};\n\n/**\n * Props for uncontrolled SegmentedControl\n */\ntype UncontrolledSegmentedControlProps = BaseSegmentedControlProps & {\n  /**\n   * Initial selection (uncontrolled mode)\n   */\n  defaultSelected: SegmentedControlSegmentProps[\"value\"];\n  selected?: never;\n};\n\n/**\n * Props for the SegmentedControl component\n */\nexport type SegmentedControlProps =\n  | ControlledSegmentedControlProps\n  | UncontrolledSegmentedControlProps;\n\n/**\n * SegmentedControl component for selecting one option from a group of related choices.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Multiple size variants (small, medium)\n * - Optional fill width mode\n * - Smooth animations with motion\n * - Accessibility support with proper radio group semantics\n * - Layout utility props for positioning and spacing\n * - Context-based state management\n * - Auto-generated or custom name attributes\n * - Segment support via SegmentedControl.Segment\n * - Data tracking id support\n *\n * @example\n * <SegmentedControl\n *   selected={selectedValue}\n *   onChange={setSelectedValue}\n *   size=\"medium\"\n * >\n *   <SegmentedControl.Segment value=\"option1\">Option 1</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"option2\">Option 2</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"option3\">Option 3</SegmentedControl.Segment>\n * </SegmentedControl>\n *\n * @example\n * <SegmentedControl\n *   defaultSelected=\"small\"\n *   size=\"small\"\n *   fill\n * >\n *   <SegmentedControl.Segment value=\"small\" icon={SmallIcon}>Small</SegmentedControl.Segment>\n *   <SegmentedControl.Segment value=\"large\" icon={LargeIcon}>Large</SegmentedControl.Segment>\n * </SegmentedControl>\n */\nexport const SegmentedControl = Object.assign(\n  forwardRef<HTMLDivElement, SegmentedControlProps>(\n    function SegmentedControlInner(props, ref) {\n      const {\n        className,\n        onClick,\n        onChange,\n        children,\n        size = \"medium\",\n        defaultSelected,\n        selected,\n        name,\n        fill,\n        ...rest\n      } = props;\n\n      const [current, setCurrent] = useOptionallyControlledState({\n        controlledValue: selected,\n        defaultValue: defaultSelected,\n        onChange,\n      });\n\n      const segmentedControlRef = useRef<HTMLDivElement>(null);\n\n      const SegmentedControlClassNames = cx(\n        styles[\"segmented-control\"],\n        styles[size],\n        className,\n        {\n          [styles.fill]: fill,\n        },\n      );\n\n      const uid = useId();\n\n      const data = {\n        name: props.name,\n      };\n\n      const trackingId = useTrackingId({\n        name: \"SegmentedControl\",\n        data,\n        hasOverride: !!props[\"data-tracking-id\"],\n      });\n\n      return (\n        <motion.div\n          transition={{ duration: 0 }}\n          layout\n          role=\"radiogroup\"\n          className={SegmentedControlClassNames}\n          data-anv=\"segmented-control\"\n          data-tracking-id={trackingId}\n          ref={useMergeRefs([segmentedControlRef, ref])}\n          {...rest}\n        >\n          <SegmentedControlContext.Provider\n            value={{ current, setCurrent, name: name ?? uid }}\n          >\n            {children}\n          </SegmentedControlContext.Provider>\n        </motion.div>\n      );\n    },\n  ),\n  {\n    /**\n     * SegmentedControlSegment component for individual segments within a segmented control.\n     *\n     * Features:\n     * - Individual segment with radio input\n     * - Optional icon support\n     * - Animated selection indicator\n     * - Accessibility support with proper ARIA attributes\n     * - Context integration with parent SegmentedControl\n     * - Motion animations with reduced motion support\n     *\n     * @example\n     * <SegmentedControl.Segment value=\"option1\" icon={Icon1}>\n     *   Option 1\n     * </SegmentedControl.Segment>\n     */\n    Segment: SegmentedControlSegment,\n  },\n);\nSegmentedControl.displayName = \"SegmentedControl\";\n\nexport default SegmentedControl;\n"],"names":["core.primitive.Duration"],"mappings":"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"}

package/dist/SegmentedControl.js

@@ -1,2 +1,2 @@
-export { S as SegmentedControl, a as SegmentedControlSegment, S as default } from './SegmentedControl-7fDLhgvh.js';
+export { S as SegmentedControl, a as SegmentedControlSegment, S as default } from './SegmentedControl-BAi4pnFe.js';
 //# sourceMappingURL=SegmentedControl.js.map

package/dist/SelectCard-ZaAD0wR1.js

@@ -0,0 +1,325 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useContext, createContext, useState, useId, forwardRef, useLayoutEffect, useRef } from 'react';
+import { c as cx } from './index-De1g9FRV.js';
+import { a as CheckboxGroup, C as Checkbox } from './Checkbox-Drgai_lS.js';
+import { a as RadioGroup, R as Radio, S as SvgRadioButtonUnchecked, b as SvgRadioButtonChecked } from './Radio-Bw2LDl9G.js';
+import { C as Card } from './Card-wz71dEVA.js';
+import { I as Icon } from './Icon-DuIlne4x.js';
+import { a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './indeterminate_check_box-B4zobNlt.js';
+import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
+
+import './SelectCard.css';const SelectCardContext = createContext(null);
+const useSelectCardContext = () => useContext(SelectCardContext);
+
+const SelectCardProvider = ({
+  children,
+  onChange,
+  selectionMode,
+  showSelectIndicator
+}) => {
+  const [selection, setSelection] = useState(/* @__PURE__ */ new Set());
+  const radioName = useId();
+  const handleChange = (e, state, options) => {
+    if (!state || !state.id) {
+      if (!options?.internal) {
+        onChange?.(e, state);
+      }
+      return;
+    }
+    if (selectionMode === "single") {
+      if (state.checked) {
+        setSelection(/* @__PURE__ */ new Set([state.id]));
+      } else {
+        setSelection(/* @__PURE__ */ new Set());
+      }
+    } else {
+      if (state.checked) {
+        setSelection(selection.add(state.id));
+      } else {
+        selection.delete(state.id);
+        setSelection(selection);
+      }
+    }
+    if (!options?.internal) {
+      onChange?.(e, state);
+    }
+  };
+  const context = {
+    selectionMode,
+    onChange: handleChange,
+    radioName,
+    selection,
+    showSelectIndicator
+  };
+  return /* @__PURE__ */ jsx(SelectCardContext.Provider, { value: context, children });
+};
+
+const SelectCardGroup = forwardRef((props, _ref) => {
+  const {
+    ariaLabelledBy,
+    children,
+    legend,
+    onChange,
+    required = false,
+    selectionMode,
+    showSelectIndicator = false,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    SelectCardProvider,
+    {
+      onChange,
+      selectionMode,
+      showSelectIndicator,
+      children: [
+        selectionMode === "multiple" && /* @__PURE__ */ jsx(
+          CheckboxGroup,
+          {
+            "aria-labelledby": ariaLabelledBy,
+            legend,
+            required,
+            ...rest,
+            children
+          }
+        ),
+        selectionMode === "single" && /* @__PURE__ */ jsx(
+          RadioGroup,
+          {
+            "aria-labelledby": ariaLabelledBy,
+            legend,
+            required,
+            ...rest,
+            children
+          }
+        )
+      ]
+    }
+  );
+});
+SelectCardGroup.displayName = "SelectCardGroup";
+
+const styles = {
+	"select-card": "_select-card_1grbf_2",
+	"select-card-wrapper": "_select-card-wrapper_1grbf_20",
+	"select-card-label": "_select-card-label_1grbf_23",
+	"icon-wrapper": "_icon-wrapper_1grbf_26",
+	"icon-checked": "_icon-checked_1grbf_33",
+	"icon-unchecked": "_icon-unchecked_1grbf_34",
+	"select-card--selected": "_select-card--selected_1grbf_45",
+	"select-card--checked": "_select-card--checked_1grbf_61",
+	"select-card--errored": "_select-card--errored_1grbf_68",
+	"select-card--disabled": "_select-card--disabled_1grbf_76",
+	"select-card--remove-drop-shadow": "_select-card--remove-drop-shadow_1grbf_80"
+};
+
+const SelectCard = Object.assign(
+  forwardRef(
+    function SelectCardInner(props, ref) {
+      const {
+        checkboxProps,
+        children,
+        checked: checkedProp,
+        className,
+        defaultChecked: defaultCheckedProp,
+        disabled,
+        errored,
+        radioProps,
+        onChange,
+        removeDropShadow,
+        showSelectIndicator = false,
+        id,
+        ...rest
+      } = props;
+      const [checked, setChecked] = useOptionallyControlledState({
+        controlledValue: checkedProp,
+        defaultValue: defaultCheckedProp || false,
+        onChange
+      });
+      const context = useSelectCardContext();
+      const isControlled = checkedProp !== void 0;
+      const [_, setForceRenderCount] = useState(0);
+      useLayoutEffect(() => {
+        const initialChecked = checkedProp ?? defaultCheckedProp;
+        if (initialChecked) {
+          context?.onChange?.(
+            void 0,
+            {
+              id,
+              checked: initialChecked
+            },
+            { internal: true }
+          );
+          setForceRenderCount((prev) => prev + 1);
+        }
+      }, []);
+      const isFirstRender = useRef(true);
+      useLayoutEffect(() => {
+        if (isFirstRender.current) {
+          isFirstRender.current = false;
+          return;
+        }
+        if (isControlled && context) {
+          if (context.selectionMode === "single" && !checkedProp) {
+            return;
+          }
+          context.onChange?.(
+            void 0,
+            {
+              id,
+              checked: checkedProp
+            },
+            { internal: true }
+          );
+        }
+      }, [checkedProp]);
+      const handleChange = (event) => {
+        const newChecked = event ? event.target.checked : false;
+        setChecked(newChecked);
+        context?.onChange?.(event, {
+          id,
+          checked: newChecked
+        });
+      };
+      const isChecked = context ? context.selection.has(id) : checked;
+      const showIndicator = context?.showSelectIndicator || showSelectIndicator;
+      const contentClassName = cx(styles["select-card"], className, {
+        [styles["select-card--remove-drop-shadow"]]: removeDropShadow,
+        [styles["select-card--checked"]]: isChecked,
+        [styles["select-card--selected"]]: isChecked && !errored,
+        [styles["select-card--errored"]]: errored,
+        [styles["select-card--disabled"]]: disabled
+      });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        (!context || context?.selectionMode === "multiple") && /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            ...checkboxProps,
+            className: cx(
+              styles["select-card-wrapper"],
+              checkboxProps?.className
+            ),
+            labelWrapperClassName: styles["select-card-label"],
+            checked: isControlled ? checkedProp : void 0,
+            defaultChecked: isControlled ? void 0 : defaultCheckedProp,
+            onChange: handleChange,
+            disabled,
+            ref,
+            label: /* @__PURE__ */ jsx(
+              Card,
+              {
+                ...rest,
+                className: contentClassName,
+                flex: showIndicator ? "1" : void 0,
+                gap: showIndicator ? "2" : void 0,
+                alignItems: showIndicator ? "flex-start" : void 0,
+                children: showIndicator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("span", { className: styles["icon-wrapper"], "aria-hidden": true, children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        size: "large",
+                        svg: SvgCheckBox,
+                        className: styles["icon-checked"]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        size: "large",
+                        svg: SvgCheckBoxOutlineBlank,
+                        className: styles["icon-unchecked"]
+                      }
+                    )
+                  ] }),
+                  children
+                ] }) : children
+              }
+            ),
+            hideCheckbox: true
+          }
+        ),
+        context?.selectionMode === "single" && /* @__PURE__ */ jsx(
+          Radio,
+          {
+            ...radioProps,
+            className: cx(
+              styles["select-card-wrapper"],
+              radioProps?.className
+            ),
+            labelWrapperClassName: styles["select-card-label"],
+            checked: isControlled ? checkedProp : void 0,
+            defaultChecked: isControlled ? void 0 : defaultCheckedProp,
+            onChange: handleChange,
+            disabled,
+            ref,
+            name: context.radioName,
+            label: /* @__PURE__ */ jsx(
+              Card,
+              {
+                ...rest,
+                className: contentClassName,
+                flex: showIndicator ? "1" : void 0,
+                gap: showIndicator ? "2" : void 0,
+                alignItems: showIndicator ? "flex-start" : void 0,
+                children: showIndicator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("span", { className: styles["icon-wrapper"], "aria-hidden": true, children: [
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        size: "large",
+                        svg: SvgRadioButtonUnchecked,
+                        className: styles["icon-unchecked"]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        size: "large",
+                        svg: SvgRadioButtonChecked,
+                        className: styles["icon-checked"]
+                      }
+                    )
+                  ] }),
+                  children
+                ] }) : children
+              }
+            ),
+            hideRadio: true
+          }
+        )
+      ] });
+    }
+  ),
+  {
+    /**
+     * SelectCardGroup component for managing groups of selectable cards.
+     *
+     * Features:
+     * - Manages selection state for multiple SelectCard components
+     * - Supports both single and multiple selection modes
+     * - Provides proper accessibility with legends and ARIA labels
+     * - Handles required field validation
+     * - Automatic radio button grouping for single selection
+     * - Context provider for child SelectCard components
+     *
+     * @example
+     * <SelectCard.Group
+     *   legend="Choose your plan"
+     *   selectionMode="single"
+     *   onChange={(e, state) => console.log('Selection changed:', state)}
+     * >
+     *   <SelectCard id="basic" onChange={() => {}}>
+     *     <Text variant="headline" size="small">Basic Plan</Text>
+     *   </SelectCard>
+     *   <SelectCard id="premium" onChange={() => {}}>
+     *     <Text variant="headline" size="small">Premium Plan</Text>
+     *   </SelectCard>
+     * </SelectCard.Group>
+     */
+    Group: SelectCardGroup
+  }
+);
+SelectCard.displayName = "SelectCard";
+
+export { SelectCard as S };
+//# sourceMappingURL=SelectCard-ZaAD0wR1.js.map

package/dist/SelectCard-ZaAD0wR1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectCard-ZaAD0wR1.js","sources":["../src/components/SelectCard/internal/SelectCardContext.tsx","../src/components/SelectCard/internal/SelectCardProvider.tsx","../src/components/SelectCard/SelectCardGroup.tsx","../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import { ChangeEvent, createContext, useContext } from \"react\";\n\n/**\n * Interface for the select card state\n */\nexport interface ISelectCardState {\n  /**\n   * When `true`, adds the item to the selected state holder.\n   */\n  checked: boolean;\n\n  /**\n   * Gives an explicit id to each item in the set.\n   */\n  id?: string | number;\n}\n\n/**\n * Interface for the select card onChange options\n */\nexport interface ISelectCardOnChangeOptions {\n  /**\n   * When `true`, doesn't fire the user's `onChange`\n   */\n  internal?: boolean;\n}\n\n/**\n * Interface for the select card context\n */\nexport interface ISelectCardContext {\n  /**\n   * Callback function that is triggered when the selection state changes.\n   *\n   * @callback OnChangeCallback\n   * @param {ChangeEvent<HTMLInputElement>} [e] - The native HTML input change event.\n   * @param {ISelectCardState} [state] - The current state of the select card component after the change.\n   * @returns {void}\n   */\n  onChange?: (\n    e?: ChangeEvent<HTMLInputElement>,\n    state?: ISelectCardState,\n    options?: ISelectCardOnChangeOptions,\n  ) => void;\n\n  /**\n   * Sets how many cards the user can select, either 'single' (radio buttons) or 'multiple' (checkboxes)\n   */\n  selectionMode: \"single\" | \"multiple\";\n\n  /**\n   * Used internally to create a UUID for the HTML `name` property on radios.\n   */\n  radioName: string;\n\n  /**\n   * Creates a set of ids that are selected.\n   */\n  selection: Set<string | number>;\n\n  /**\n   * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n   * The indicator type (checkbox or radio) is automatically determined by the selection mode from SelectCard.Group context.\n   * @default false\n   */\n  showSelectIndicator?: boolean;\n}\n\nexport const SelectCardContext = createContext<ISelectCardContext | null>(null);\n\n/**\n * Custom hook for accessing the SelectCard context.\n * @returns The SelectCard context or null if not within a SelectCardProvider\n */\nexport const useSelectCardContext = () => useContext(SelectCardContext);\n","import { ChangeEvent, ReactNode, useId, useState } from \"react\";\nimport {\n  ISelectCardContext,\n  ISelectCardOnChangeOptions,\n  ISelectCardState,\n  SelectCardContext,\n} from \"./SelectCardContext\";\n\n/**\n * Props for the SelectCardProvider component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\ninterface ISelectCardProviderProps extends Omit<\n  ISelectCardContext,\n  \"radioName\" | \"selection\"\n> {\n  children: ReactNode;\n}\n\n/**\n * SelectCardProvider component for managing selection state across SelectCard components.\n *\n * Features:\n * - Provides context for SelectCard components to share selection state\n * - Manages selection mode (single vs multiple)\n * - Handles selection state updates and callbacks\n * - Generates unique radio button names for single selection mode\n * - Maintains a set of selected card IDs\n * - Integrates with SelectCardGroup for automatic context provision\n *\n * @example\n * <SelectCardProvider\n *   selectionMode=\"multiple\"\n *   onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n *   <SelectCard id=\"1\" onChange={() => {}}>Option 1</SelectCard>\n *   <SelectCard id=\"2\" onChange={() => {}}>Option 2</SelectCard>\n * </SelectCardProvider>\n */\nexport const SelectCardProvider = ({\n  children,\n  onChange,\n  selectionMode,\n  showSelectIndicator,\n}: ISelectCardProviderProps) => {\n  const [selection, setSelection] = useState<Set<string | number>>(new Set());\n\n  const radioName = useId();\n\n  const handleChange = (\n    e?: ChangeEvent<HTMLInputElement>,\n    state?: ISelectCardState,\n    options?: ISelectCardOnChangeOptions,\n  ) => {\n    if (!state || !state.id) {\n      if (!options?.internal) {\n        onChange?.(e, state);\n      }\n\n      return;\n    }\n\n    // Set internal selection\n    if (selectionMode === \"single\") {\n      if (state.checked) {\n        setSelection(new Set([state.id]));\n      } else {\n        setSelection(new Set());\n      }\n    } else {\n      if (state.checked) {\n        setSelection(selection.add(state.id));\n      } else {\n        selection.delete(state.id);\n        setSelection(selection);\n      }\n    }\n\n    if (!options?.internal) {\n      onChange?.(e, state);\n    }\n  };\n\n  const context = {\n    selectionMode,\n    onChange: handleChange,\n    radioName,\n    selection,\n    showSelectIndicator,\n  };\n\n  return (\n    <SelectCardContext.Provider value={context}>\n      {children}\n    </SelectCardContext.Provider>\n  );\n};\n","import { forwardRef, ReactNode } from \"react\";\nimport { CheckboxGroup, CheckboxGroupProps } from \"../Checkbox/CheckboxGroup\";\nimport { RadioGroup } from \"../Radio/RadioGroup\";\nimport { SelectCardProvider } from \"./internal/SelectCardProvider\";\nimport { ISelectCardContext } from \"./internal/SelectCardContext\";\n\n/**\n * Props for the SelectCardGroup component\n * @extends Omit<ISelectCardContext, \"radioName\" | \"selection\">\n */\nexport interface SelectCardGroupProps extends Omit<\n  ISelectCardContext,\n  \"radioName\" | \"selection\"\n> {\n  /**\n   * Associates the legend with content below.\n   */\n  ariaLabelledBy?: string;\n\n  children?: ReactNode;\n\n  /**\n   * Sets the legend on the group.\n   */\n  legend: CheckboxGroupProps[\"legend\"];\n\n  /**\n   * When `true`, sets \"required\" text in label.\n   * @accessibility This does not enforce error when nothing is selected.\n   * @default false\n   */\n  required?: boolean;\n\n  /**\n   * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n   * The indicator type (checkbox or radio) is automatically determined by the `selectionMode` setting.\n   * @default false\n   */\n  showSelectIndicator?: boolean;\n}\n\n/**\n * SelectCardGroup component for managing groups of selectable cards.\n *\n * Features:\n * - Manages selection state for multiple SelectCard components\n * - Supports both single and multiple selection modes\n * - Provides proper accessibility with legends and ARIA labels\n * - Handles required field validation\n * - Automatic radio button grouping for single selection\n * - Context provider for child SelectCard components\n * - Integrates with CheckboxGroup and RadioGroup for proper form semantics\n *\n * @example\n * <SelectCardGroup\n *   legend=\"Choose your plan\"\n *   selectionMode=\"single\"\n *   onChange={(e, state) => console.log('Selection changed:', state)}\n * >\n *   <SelectCard id=\"basic\" onChange={() => {}}>\n *     <Text variant=\"headline\" size=\"small\" el=\"h3\">Basic Plan</Text>\n *   </SelectCard>\n *   <SelectCard id=\"premium\" onChange={() => {}}>\n *     <Text variant=\"headline\" size=\"small\" el=\"h3\">Premium Plan</Text>\n *   </SelectCard>\n * </SelectCardGroup>\n */\nexport const SelectCardGroup = forwardRef<\n  HTMLInputElement,\n  SelectCardGroupProps\n>((props, _ref) => {\n  const {\n    ariaLabelledBy,\n    children,\n    legend,\n    onChange,\n    required = false,\n    selectionMode,\n    showSelectIndicator = false,\n    ...rest\n  } = props;\n\n  return (\n    <SelectCardProvider\n      onChange={onChange}\n      selectionMode={selectionMode}\n      showSelectIndicator={showSelectIndicator}\n    >\n      {selectionMode === \"multiple\" && (\n        <CheckboxGroup\n          aria-labelledby={ariaLabelledBy}\n          legend={legend}\n          required={required}\n          {...rest}\n        >\n          {children}\n        </CheckboxGroup>\n      )}\n      {selectionMode === \"single\" && (\n        <RadioGroup\n          aria-labelledby={ariaLabelledBy}\n          legend={legend}\n          required={required}\n          {...rest}\n        >\n          {children}\n        </RadioGroup>\n      )}\n    </SelectCardProvider>\n  );\n});\n\nSelectCardGroup.displayName = \"SelectCardGroup\";\n","import {\n  useLayoutEffect,\n  useState,\n  useRef,\n  forwardRef,\n  type ChangeEvent,\n} from \"react\";\nimport cx from \"classnames\";\n\nimport { SelectCardGroup } from \"./SelectCardGroup\";\nimport { Card, CardProps } from \"../Card\";\nimport { Radio, RadioProps } from \"../Radio/internal/Radio\";\nimport { Checkbox, CheckboxProps } from \"../Checkbox/internal/Checkbox\";\nimport { useOptionallyControlledState } from \"../../internal/hooks\";\nimport { useSelectCardContext } from \"./internal/SelectCardContext\";\nimport { Icon } from \"../Icon\";\n\nimport CheckboxOutline from \"@servicetitan/hammer-icon/mdi/round/check_box_outline_blank.svg\";\nimport CheckboxChecked from \"@servicetitan/hammer-icon/mdi/round/check_box.svg\";\nimport RadioOutline from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_unchecked.svg\";\nimport RadioChecked from \"@servicetitan/hammer-icon/mdi/two-tone/radio_button_checked.svg\";\n\nimport styles from \"./SelectCard.module.scss\";\n\n/**\n * Props for the SelectCard component\n * @extends Omit<CardProps, \"onChange\" | \"id\">\n */\nexport interface SelectCardProps extends Omit<CardProps, \"onChange\" | \"id\"> {\n  /**\n   * Passes props to the underlying `<Checkbox />` component.\n   */\n  checkboxProps?: Omit<CheckboxProps, \"label\">;\n\n  /**\n   * Controlled state. When provided, the component becomes controlled.\n   */\n  checked?: boolean;\n\n  /**\n   * Uncontrolled state.\n   */\n  defaultChecked?: boolean;\n\n  /**\n   * When `true`, disables the card.\n   */\n  disabled?: boolean;\n\n  /**\n   * When `true`, sets error styling on the card.\n   */\n  errored?: boolean;\n\n  /**\n   * A unique identifier for the card, used to track the selection state.\n   */\n  id: string | number;\n\n  /**\n   * Function called on selection state change.\n   */\n  onChange?: (value: boolean) => void;\n\n  /**\n   * Passes props to the underlying `<Radio />` component.\n   */\n  radioProps?: Omit<RadioProps, \"label\">;\n\n  /**\n   * Removes the drop shadow effect on the card.\n   */\n  removeDropShadow?: boolean;\n\n  /**\n   * When `true`, displays a checkbox or radio indicator in a separate column on the left side of the card.\n   * The indicator type (checkbox or radio) is automatically determined by the `selectionMode` prop on the\n   * `SelectCard.Group`, and defaults to checkbox if no `SelectCard.Group` is used.\n   * @default false\n   */\n  showSelectIndicator?: boolean;\n}\n\n/**\n * SelectCard component for creating interactive card-based selection interfaces.\n *\n * Features:\n * - Supports both single selection (radio) and multiple selection (checkbox) modes\n * - Automatic context detection for selection behavior\n * - Visual feedback for selected, disabled, and error states\n * - Accessible with proper ARIA roles and keyboard navigation\n * - Customizable styling through Card component props\n * - Hover and focus states with smooth transitions\n * - Integration with SelectCardGroup for grouped selection\n *\n * @example\n * <SelectCard\n *   id=\"option-1\"\n *   onChange={(checked) => console.log('Selected:', checked)}\n * >\n *   <Text variant=\"headline\" size=\"small\">Option 1</Text>\n *   <Text>Description of option 1</Text>\n * </SelectCard>\n */\nexport const SelectCard = Object.assign(\n  forwardRef<HTMLInputElement, SelectCardProps>(\n    function SelectCardInner(props, ref) {\n      const {\n        checkboxProps,\n        children,\n        checked: checkedProp,\n        className,\n        defaultChecked: defaultCheckedProp,\n        disabled,\n        errored,\n        radioProps,\n        onChange,\n        removeDropShadow,\n        showSelectIndicator = false,\n        id,\n        ...rest\n      } = props;\n\n      const [checked, setChecked] = useOptionallyControlledState<boolean>({\n        controlledValue: checkedProp,\n        defaultValue: defaultCheckedProp || false,\n        onChange,\n      });\n\n      const context = useSelectCardContext();\n      const isControlled = checkedProp !== undefined;\n\n      // we need to re-render after setting the initial selection state on context\n      const [_, setForceRenderCount] = useState(0);\n      useLayoutEffect(() => {\n        // Sync initial checked state to context (for both controlled and uncontrolled modes)\n        const initialChecked = checkedProp ?? defaultCheckedProp;\n        if (initialChecked) {\n          context?.onChange?.(\n            undefined,\n            {\n              id,\n              checked: initialChecked,\n            },\n            { internal: true },\n          );\n\n          setForceRenderCount((prev) => prev + 1);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, []);\n\n      // Sync controlled state changes to context (skip initial mount - handled by above effect)\n      const isFirstRender = useRef(true);\n      useLayoutEffect(() => {\n        if (isFirstRender.current) {\n          isFirstRender.current = false;\n          return;\n        }\n        if (isControlled && context) {\n          // In single selection mode, only sync when checked is true.\n          // Unchecking is implicit when another card becomes checked.\n          // Syncing checked=false would clear the entire selection.\n          if (context.selectionMode === \"single\" && !checkedProp) {\n            return;\n          }\n          context.onChange?.(\n            undefined,\n            {\n              id,\n              checked: checkedProp,\n            },\n            { internal: true },\n          );\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n      }, [checkedProp]);\n\n      const handleChange = (event?: ChangeEvent<HTMLInputElement>) => {\n        const newChecked = event ? event.target.checked : false;\n        setChecked(newChecked);\n        context?.onChange?.(event, {\n          id,\n          checked: newChecked,\n        });\n      };\n\n      // A selection in the group context supersedes the normal checked state of the card\n      const isChecked = context ? context.selection.has(id) : checked;\n      const showIndicator = context?.showSelectIndicator || showSelectIndicator;\n\n      const contentClassName = cx(styles[\"select-card\"], className, {\n        [styles[\"select-card--remove-drop-shadow\"]]: removeDropShadow,\n        [styles[\"select-card--checked\"]]: isChecked,\n        [styles[\"select-card--selected\"]]: isChecked && !errored,\n        [styles[\"select-card--errored\"]]: errored,\n        [styles[\"select-card--disabled\"]]: disabled,\n      });\n\n      return (\n        <>\n          {(!context || context?.selectionMode === \"multiple\") && (\n            <Checkbox\n              {...checkboxProps}\n              className={cx(\n                styles[\"select-card-wrapper\"],\n                checkboxProps?.className,\n              )}\n              labelWrapperClassName={styles[\"select-card-label\"]}\n              checked={isControlled ? checkedProp : undefined}\n              defaultChecked={isControlled ? undefined : defaultCheckedProp}\n              onChange={handleChange}\n              disabled={disabled}\n              ref={ref}\n              label={\n                <Card\n                  {...rest}\n                  className={contentClassName}\n                  flex={showIndicator ? \"1\" : undefined}\n                  gap={showIndicator ? \"2\" : undefined}\n                  alignItems={showIndicator ? \"flex-start\" : undefined}\n                >\n                  {showIndicator ? (\n                    <>\n                      <span className={styles[\"icon-wrapper\"]} aria-hidden>\n                        <Icon\n                          size=\"large\"\n                          svg={CheckboxChecked}\n                          className={styles[\"icon-checked\"]}\n                        />\n\n                        <Icon\n                          size=\"large\"\n                          svg={CheckboxOutline}\n                          className={styles[\"icon-unchecked\"]}\n                        />\n                      </span>\n                      {children}\n                    </>\n                  ) : (\n                    children\n                  )}\n                </Card>\n              }\n              hideCheckbox\n            />\n          )}\n          {context?.selectionMode === \"single\" && (\n            <Radio\n              {...radioProps}\n              className={cx(\n                styles[\"select-card-wrapper\"],\n                radioProps?.className,\n              )}\n              labelWrapperClassName={styles[\"select-card-label\"]}\n              checked={isControlled ? checkedProp : undefined}\n              defaultChecked={isControlled ? undefined : defaultCheckedProp}\n              onChange={handleChange}\n              disabled={disabled}\n              ref={ref}\n              name={context.radioName}\n              label={\n                <Card\n                  {...rest}\n                  className={contentClassName}\n                  flex={showIndicator ? \"1\" : undefined}\n                  gap={showIndicator ? \"2\" : undefined}\n                  alignItems={showIndicator ? \"flex-start\" : undefined}\n                >\n                  {showIndicator ? (\n                    <>\n                      <span className={styles[\"icon-wrapper\"]} aria-hidden>\n                        <Icon\n                          size=\"large\"\n                          svg={RadioOutline}\n                          className={styles[\"icon-unchecked\"]}\n                        />\n\n                        <Icon\n                          size=\"large\"\n                          svg={RadioChecked}\n                          className={styles[\"icon-checked\"]}\n                        />\n                      </span>\n                      {children}\n                    </>\n                  ) : (\n                    children\n                  )}\n                </Card>\n              }\n              hideRadio\n            />\n          )}\n        </>\n      );\n    },\n  ),\n  {\n    /**\n     * SelectCardGroup component for managing groups of selectable cards.\n     *\n     * Features:\n     * - Manages selection state for multiple SelectCard components\n     * - Supports both single and multiple selection modes\n     * - Provides proper accessibility with legends and ARIA labels\n     * - Handles required field validation\n     * - Automatic radio button grouping for single selection\n     * - Context provider for child SelectCard components\n     *\n     * @example\n     * <SelectCard.Group\n     *   legend=\"Choose your plan\"\n     *   selectionMode=\"single\"\n     *   onChange={(e, state) => console.log('Selection changed:', state)}\n     * >\n     *   <SelectCard id=\"basic\" onChange={() => {}}>\n     *     <Text variant=\"headline\" size=\"small\">Basic Plan</Text>\n     *   </SelectCard>\n     *   <SelectCard id=\"premium\" onChange={() => {}}>\n     *     <Text variant=\"headline\" size=\"small\">Premium Plan</Text>\n     *   </SelectCard>\n     * </SelectCard.Group>\n     */\n    Group: SelectCardGroup,\n  },\n);\nSelectCard.displayName = \"SelectCard\";\n"],"names":["CheckboxChecked","CheckboxOutline","RadioOutline","RadioChecked"],"mappings":"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"}

package/dist/SelectCard.js

@@ -1,2 +1,2 @@
-export { S as SelectCard, S as default } from './SelectCard-cu4MBuh8.js';
+export { S as SelectCard, S as default } from './SelectCard-ZaAD0wR1.js';
 //# sourceMappingURL=SelectCard.js.map

package/dist/SelectField.js

@@ -1,2 +1,2 @@
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-CJ2Ie_v1.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-DA54WXOk.js';
 //# sourceMappingURL=SelectField.js.map

package/dist/{SelectFieldLabel-Dr8HeW3N.js → SelectFieldLabel-EJCXA02B.js}

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { F as FieldLabel } from './FieldLabel-DbMosKtd.js';
+import { F as FieldLabel } from './FieldLabel-CQ5QGTVq.js';
 import { S as SrOnly } from './SrOnly-eUpYGpAT.js';
 
 const SelectFieldLabel = ({
@@ -28,4 +28,4 @@ const SelectFieldLabel = ({
 };
 
 export { SelectFieldLabel as S };
-//# sourceMappingURL=SelectFieldLabel-Dr8HeW3N.js.map
+//# sourceMappingURL=SelectFieldLabel-EJCXA02B.js.map

package/dist/{SelectFieldLabel-Dr8HeW3N.js.map → SelectFieldLabel-EJCXA02B.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SelectFieldLabel-Dr8HeW3N.js","sources":["../src/beta/components/SelectField/internal/SelectFieldLabel.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { FieldLabel } from \"../../../../components/FieldLabel\";\nimport { SrOnly } from \"../../../../components/SrOnly\";\n\ntype GetLabelProps = (options?: object) => { id: string; htmlFor: string };\n\n/**\n * Props for the SelectFieldLabel component\n * @property {string} label - The text content to display as the label\n * @property {GetLabelProps} getLabelProps - Downshift getter function that returns accessibility props for the label\n * @property {boolean} [required] - Whether the field is required. Shows a red asterisk (*) when true.\n * @property {ReactNode} [moreInfo] - Additional information to display in a tooltip\n * @property {boolean} [moreInfoOpen] - Controls the open state of the more info tooltip\n * @property {boolean} [hideLabel] - Visually hides the label while keeping it accessible to screen readers\n * @property {ReactNode} [labelNode] - Custom ReactNode to render as the label, overriding the default label text\n */\nexport type SelectFieldLabelProps = {\n  label: string;\n  getLabelProps: GetLabelProps;\n  hideLabel?: boolean;\n  labelNode?: ReactNode;\n  moreInfo?: ReactNode;\n  moreInfoOpen?: boolean;\n  required?: boolean;\n};\n\n/**\n * Internal label component for the SelectField that renders an accessible label element.\n *\n * Features:\n * - Renders a FieldLabel with proper accessibility attributes from Downshift\n * - Automatically associates the label with the combobox input\n * - Supports screen readers with proper labeling\n * - Optional required field indicator with red asterisk\n * - Help tooltip with info icon for additional context\n * - Can visually hide the label while maintaining accessibility\n * - Supports custom label content via labelNode\n *\n * @example\n * <SelectFieldLabel\n *   label=\"Select an option\"\n *   getLabelProps={getLabelProps}\n *   required\n *   moreInfo=\"Choose from available options\"\n * />\n */\nexport const SelectFieldLabel = ({\n  label,\n  getLabelProps,\n  hideLabel = false,\n  labelNode,\n  moreInfo,\n  moreInfoOpen,\n  required,\n}: SelectFieldLabelProps) => {\n  const labelContent = (\n    <FieldLabel\n      {...getLabelProps()}\n      required={required}\n      moreInfo={moreInfo}\n      moreInfoOpen={moreInfoOpen}\n    >\n      {labelNode ?? label}\n    </FieldLabel>\n  );\n\n  if (hideLabel) {\n    return <SrOnly>{labelContent}</SrOnly>;\n  }\n\n  return labelContent;\n};\n"],"names":[],"mappings":";;;;AA8CO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,KAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAA6B;AAC3B,EAAA,MAAM,YAAA,mBACJ,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,aAAA,EAAc;AAAA,MAClB,QAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MAEC,QAAA,EAAA,SAAA,IAAa;AAAA;AAAA,GAChB;AAGF,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBAAO,GAAA,CAAC,UAAQ,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,EAC/B;AAEA,EAAA,OAAO,YAAA;AACT;;;;"}
+{"version":3,"file":"SelectFieldLabel-EJCXA02B.js","sources":["../src/beta/components/SelectField/internal/SelectFieldLabel.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport { FieldLabel } from \"../../../../components/FieldLabel\";\nimport { SrOnly } from \"../../../../components/SrOnly\";\n\ntype GetLabelProps = (options?: object) => { id: string; htmlFor: string };\n\n/**\n * Props for the SelectFieldLabel component\n * @property {string} label - The text content to display as the label\n * @property {GetLabelProps} getLabelProps - Downshift getter function that returns accessibility props for the label\n * @property {boolean} [required] - Whether the field is required. Shows a red asterisk (*) when true.\n * @property {ReactNode} [moreInfo] - Additional information to display in a tooltip\n * @property {boolean} [moreInfoOpen] - Controls the open state of the more info tooltip\n * @property {boolean} [hideLabel] - Visually hides the label while keeping it accessible to screen readers\n * @property {ReactNode} [labelNode] - Custom ReactNode to render as the label, overriding the default label text\n */\nexport type SelectFieldLabelProps = {\n  label: string;\n  getLabelProps: GetLabelProps;\n  hideLabel?: boolean;\n  labelNode?: ReactNode;\n  moreInfo?: ReactNode;\n  moreInfoOpen?: boolean;\n  required?: boolean;\n};\n\n/**\n * Internal label component for the SelectField that renders an accessible label element.\n *\n * Features:\n * - Renders a FieldLabel with proper accessibility attributes from Downshift\n * - Automatically associates the label with the combobox input\n * - Supports screen readers with proper labeling\n * - Optional required field indicator with red asterisk\n * - Help tooltip with info icon for additional context\n * - Can visually hide the label while maintaining accessibility\n * - Supports custom label content via labelNode\n *\n * @example\n * <SelectFieldLabel\n *   label=\"Select an option\"\n *   getLabelProps={getLabelProps}\n *   required\n *   moreInfo=\"Choose from available options\"\n * />\n */\nexport const SelectFieldLabel = ({\n  label,\n  getLabelProps,\n  hideLabel = false,\n  labelNode,\n  moreInfo,\n  moreInfoOpen,\n  required,\n}: SelectFieldLabelProps) => {\n  const labelContent = (\n    <FieldLabel\n      {...getLabelProps()}\n      required={required}\n      moreInfo={moreInfo}\n      moreInfoOpen={moreInfoOpen}\n    >\n      {labelNode ?? label}\n    </FieldLabel>\n  );\n\n  if (hideLabel) {\n    return <SrOnly>{labelContent}</SrOnly>;\n  }\n\n  return labelContent;\n};\n"],"names":[],"mappings":";;;;AA8CO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,KAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,SAAA;AAAA,EACA,QAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAA6B;AAC3B,EAAA,MAAM,YAAA,mBACJ,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACE,GAAG,aAAA,EAAc;AAAA,MAClB,QAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MAEC,QAAA,EAAA,SAAA,IAAa;AAAA;AAAA,GAChB;AAGF,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBAAO,GAAA,CAAC,UAAQ,QAAA,EAAA,YAAA,EAAa,CAAA;AAAA,EAC/B;AAEA,EAAA,OAAO,YAAA;AACT;;;;"}

package/dist/{SelectFieldSync-CJ2Ie_v1.js → SelectFieldSync-DA54WXOk.js}

@@ -1,15 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useMemo, useRef, useCallback, useEffect, forwardRef, useId } from 'react';
 import { w as warnDeprecatedErrorUsage } from './utils-CM48ODEJ.js';
-import { S as SelectOptions } from './SelectOptions-Bf4xsFek.js';
+import { S as SelectOptions } from './SelectOptions-D-DzWmKE.js';
 import { s as styles } from './SelectTriggerBase.module-B0NFRlQP.js';
 import { c as cx } from './index-De1g9FRV.js';
 import { B as Button } from './Button-CVsGhVJz.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
-import { S as SelectFieldLabel } from './SelectFieldLabel-Dr8HeW3N.js';
+import { S as SelectFieldLabel } from './SelectFieldLabel-EJCXA02B.js';
 import { u as useDownshiftEnvironment, a as useCombobox, b as useSelect } from './downshift.esm-xtSnQp44.js';
-import { b as useProcessedOptions, c as buildSelectItems, h as toSelectItem, d as useDebouncedCallback, e as OptionsDialog, f as OptionsPopover, a as useSelectOrchestration, g as defaultSyncFilter, t as toSyncFilterFn, s as sortByGroup } from './syncFilterUtils-vt8ldsES.js';
+import { b as useProcessedOptions, c as buildSelectItems, h as toSelectItem, d as useDebouncedCallback, e as OptionsDialog, f as OptionsPopover, a as useSelectOrchestration, g as defaultSyncFilter, t as toSyncFilterFn, s as sortByGroup } from './syncFilterUtils-B03Pc941.js';
 import { F as FieldMessage } from './FieldMessage-COHqUdj5.js';
 import { u as useMergeRefs } from './useMergeRefs-Dfmtq9cI.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
@@ -1156,4 +1156,4 @@ const SelectFieldSync = (props) => {
 };
 
 export { SelectField as S, SelectFieldSync as a };
-//# sourceMappingURL=SelectFieldSync-CJ2Ie_v1.js.map
+//# sourceMappingURL=SelectFieldSync-DA54WXOk.js.map