@kenpan/zds-r8f3v1 0.1.0

package/dist/components/forms/MultiSelectInputDropdown.js

@@ -0,0 +1,436 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { HelpIcon } from "../HelpIcon.js";
+import { Icon } from "../Icon.js";
+import { Checkbox } from "./Checkbox.js";
+import Box from "../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Typography from "../../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+import FormControl from "../../packages/zenith-ui/node_modules/@mui/material/esm/FormControl/FormControl.js";
+import Select from "../../packages/zenith-ui/node_modules/@mui/material/esm/Select/Select.js";
+import MenuItem from "../../packages/zenith-ui/node_modules/@mui/material/esm/MenuItem/MenuItem.js";
+import OutlinedInput from "../../packages/zenith-ui/node_modules/@mui/material/esm/OutlinedInput/OutlinedInput.js";
+const tokens = {
+  // Background colors
+  surfaceContainerLowest: "#FFFFFF",
+  // Default/Filled/Placeholder/Focused/Open
+  surfaceContainerLow: "#FCFCFD",
+  // Read-only
+  onSurfaceOpacity4: "rgba(54, 65, 82, 0.04)",
+  // #3641520A - Disabled
+  // Border colors
+  outlineVariant: "#D4DCE7",
+  // Default border
+  outline: "#8C96A2",
+  // Hover border
+  primary: "#1570EF",
+  // Focused border
+  error: "#D92D20",
+  // Destructive border
+  // Text colors
+  onSurface: "#364152",
+  // Primary text
+  onSurfaceVariant: "#697586",
+  // Secondary text / placeholder
+  onSurfaceOpacity38: "rgba(54, 65, 82, 0.38)"
+  // Disabled text
+};
+const getOnSurfaceOpacity8 = (theme) => {
+  return theme.palette.dsTokens?.stateLayers?.["state-layers-onsurface-opacity-8"] ?? theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity8 ?? "rgba(54, 65, 82, 0.08)";
+};
+function MultiSelectInputDropdown({
+  label,
+  hintText,
+  placeholder = "Select options",
+  required = false,
+  size = "md",
+  shape = "square",
+  menuItems,
+  value = [],
+  onChange,
+  destructive = false,
+  disabled = false,
+  readOnly = false,
+  width = "100%",
+  labelTooltipLabel,
+  labelTooltipDescription,
+  labelTooltipPlacement = "top-center",
+  sx,
+  className,
+  renderValue: customRenderValue
+}) {
+  const isXs = size === "xs";
+  const isSm = size === "sm";
+  const isMd = size === "md";
+  const inputHeight = isXs ? 36 : void 0;
+  const inputPaddingY = isMd ? 10 : 8;
+  const inputPaddingX = isMd ? 14 : 12;
+  const inputTypography = "text-md-regular";
+  const labelVariant = "text-sm-medium";
+  const hintVariant = "text-sm-regular";
+  const handleChange = (event) => {
+    const selectedIds2 = event.target.value;
+    const selectedItems = menuItems.filter((item) => selectedIds2.includes(String(item.id)));
+    onChange?.(selectedItems);
+  };
+  const selectedIds = value.map((item) => String(item.id));
+  const selectRef = React.useRef(null);
+  const handleMenuClose = () => {
+    setTimeout(() => {
+      if (selectRef.current) {
+        const focusedElement = selectRef.current.querySelector('[role="combobox"]');
+        if (focusedElement) {
+          focusedElement.blur();
+        }
+      }
+      if (document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+      }
+    }, 0);
+  };
+  const mapTooltipPlacement = (placement) => {
+    if (!placement) return void 0;
+    if (placement === "top") return "top-no-arrow";
+    if (placement === "bottom") return "bottom-center";
+    return placement;
+  };
+  const renderValue = customRenderValue || ((selected) => {
+    if (selected.length === 0) {
+      return /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: inputTypography,
+          sx: { color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurfaceVariant },
+          children: placeholder
+        }
+      );
+    }
+    if (selected.length === 1) {
+      const item = menuItems.find((item2) => String(item2.id) === selected[0]);
+      return /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: inputTypography,
+          sx: { color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurface },
+          children: item?.label ?? ""
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: inputTypography,
+        sx: { color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurface },
+        children: `${selected.length} selected`
+      }
+    );
+  });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: [
+        {
+          width,
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.75
+          // 6px gap between elements (label, input, hint) - from design specs
+        },
+        ...Array.isArray(sx) ? sx : sx ? [sx] : []
+      ],
+      className,
+      children: [
+        label && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0.5
+              // 4px gap between label and help icon
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Typography, { variant: labelVariant, sx: { color: "text.primary" }, children: [
+                label,
+                required && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { color: "error.main", ml: 0.5 }, children: "*" })
+              ] }),
+              labelTooltipLabel && /* @__PURE__ */ jsx(
+                HelpIcon,
+                {
+                  title: labelTooltipLabel,
+                  supportingText: typeof labelTooltipDescription === "string" ? labelTooltipDescription : void 0,
+                  tooltipPlacement: mapTooltipPlacement(labelTooltipPlacement)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FormControl,
+          {
+            fullWidth: true,
+            error: destructive,
+            disabled,
+            sx: () => ({
+              "& .MuiOutlinedInput-root": {
+                // xs has fixed height 36px, others are hug content
+                ...inputHeight && { height: inputHeight },
+                minHeight: isXs ? 36 : isSm ? 40 : 44,
+                borderRadius: shape === "rounded" ? "999px" : 2,
+                // 8px for square
+                // Background colors based on state
+                backgroundColor: disabled ? tokens.onSurfaceOpacity4 : readOnly ? tokens.surfaceContainerLow : tokens.surfaceContainerLowest,
+                // Default/Filled/Placeholder/Focused: color/surfaceContainerLowest
+                cursor: readOnly ? "default" : "pointer",
+                "& fieldset": {
+                  borderColor: destructive ? tokens.error : tokens.outlineVariant,
+                  // color/outlineVariant for default border
+                  borderWidth: 1
+                },
+                "&:hover fieldset": {
+                  borderColor: destructive ? tokens.error : disabled || readOnly ? tokens.outlineVariant : tokens.outline
+                  // color/outline for hover
+                },
+                "&.Mui-focused fieldset": {
+                  borderColor: destructive ? tokens.error : tokens.primary,
+                  // Use box-shadow inset to add extra 1px border effect without layout shift
+                  boxShadow: `inset 0 0 0 1px ${destructive ? tokens.error : tokens.primary}`
+                },
+                "& .MuiSelect-select": {
+                  // Padding: same on all sides, icon margin handles right spacing
+                  padding: `${inputPaddingY}px ${inputPaddingX}px`,
+                  // Right padding needs extra space for the dropdown icon (20px icon + gap)
+                  paddingRight: `${inputPaddingX + 28}px !important`,
+                  typography: inputTypography,
+                  cursor: readOnly ? "default" : "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "8px"
+                  // Content gap from design: 8px
+                },
+                // Position the icon correctly with proper right margin
+                "& .MuiSelect-icon": {
+                  right: isMd ? 14 : 12
+                  // Same as left padding
+                }
+              }
+            }),
+            children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                ref: selectRef,
+                multiple: true,
+                value: selectedIds,
+                onChange: handleChange,
+                onClose: handleMenuClose,
+                input: /* @__PURE__ */ jsx(OutlinedInput, {}),
+                renderValue,
+                disabled: disabled || readOnly,
+                displayEmpty: true,
+                IconComponent: () => /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    sx: {
+                      display: "flex",
+                      alignItems: "center",
+                      // Right margin matches left padding (md: 14px, sm/xs: 12px)
+                      right: isMd ? 14 : 12,
+                      position: "absolute",
+                      top: 0,
+                      bottom: 0,
+                      // Allow clicks to pass through to the Select underneath
+                      pointerEvents: "none"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: "ChevronDown",
+                        size: 20,
+                        sx: {
+                          color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurfaceVariant
+                        }
+                      }
+                    )
+                  }
+                ),
+                MenuProps: {
+                  // Anchor origin - menu appears below the input
+                  anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "left"
+                  },
+                  transformOrigin: {
+                    vertical: "top",
+                    horizontal: "left"
+                  },
+                  // Smooth open/close transitions
+                  transitionDuration: {
+                    enter: 200,
+                    exit: 150
+                  },
+                  // Keep menu open on item click for multi-select
+                  autoFocus: false,
+                  PaperProps: {
+                    sx: (theme) => ({
+                      marginTop: "4px",
+                      // Small gap between input and menu
+                      borderRadius: 2,
+                      // 8px radius from design
+                      border: "1px solid",
+                      borderColor: tokens.outlineVariant,
+                      backgroundColor: tokens.surfaceContainerLowest,
+                      boxShadow: theme.shadows[8],
+                      // Subtle shadow
+                      maxHeight: 300,
+                      // Menu items container has 4px padding top/bottom, 0 horizontal
+                      "& .MuiList-root": {
+                        paddingTop: "4px",
+                        paddingBottom: "4px",
+                        paddingLeft: 0,
+                        paddingRight: 0
+                      }
+                    })
+                  }
+                },
+                children: menuItems.map((item) => {
+                  const isSelected = selectedIds.includes(String(item.id));
+                  const handleItemClick = (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const newSelectedIds = isSelected ? selectedIds.filter((id) => id !== String(item.id)) : [...selectedIds, String(item.id)];
+                    const newSelectedItems = menuItems.filter(
+                      (menuItem) => newSelectedIds.includes(String(menuItem.id))
+                    );
+                    onChange?.(newSelectedItems);
+                  };
+                  return /* @__PURE__ */ jsx(
+                    MenuItem,
+                    {
+                      value: String(item.id),
+                      onClick: handleItemClick,
+                      sx: (theme) => ({
+                        padding: 0,
+                        minHeight: "auto",
+                        "&:hover": {
+                          backgroundColor: "transparent",
+                          "& > div": {
+                            backgroundColor: getOnSurfaceOpacity8(theme)
+                          }
+                        },
+                        "&.Mui-selected": {
+                          backgroundColor: "transparent",
+                          "&:hover": {
+                            backgroundColor: "transparent",
+                            "& > div": {
+                              backgroundColor: getOnSurfaceOpacity8(theme)
+                            }
+                          }
+                        }
+                      }),
+                      children: /* @__PURE__ */ jsxs(
+                        Box,
+                        {
+                          sx: (theme) => ({
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            // 8px gap between checkbox and text
+                            width: "100%",
+                            // Menu item inner padding: 10px top/right/bottom, 8px left
+                            padding: "10px 10px 10px 8px",
+                            margin: "0 6px",
+                            // 6px horizontal margin for hover background
+                            borderRadius: "6px",
+                            // 6px radius for hover state
+                            cursor: "pointer",
+                            transition: theme.transitions.create("background-color", {
+                              duration: theme.transitions.duration.shorter
+                            })
+                          }),
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                sx: {
+                                  display: "inline-flex",
+                                  alignItems: "center",
+                                  flexShrink: 0,
+                                  pointerEvents: "none"
+                                  // Let parent handle clicks
+                                },
+                                children: /* @__PURE__ */ jsx(
+                                  Checkbox,
+                                  {
+                                    checked: isSelected,
+                                    disabled,
+                                    size: "sm",
+                                    sx: {
+                                      padding: 0
+                                    }
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              Box,
+                              {
+                                sx: {
+                                  display: "flex",
+                                  flexDirection: "column",
+                                  gap: 0.5,
+                                  // 4px gap between text and supporting text
+                                  flex: 1,
+                                  minWidth: 0
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    Typography,
+                                    {
+                                      variant: inputTypography,
+                                      sx: {
+                                        color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurface
+                                      },
+                                      children: item.label
+                                    }
+                                  ),
+                                  item.supportingText && /* @__PURE__ */ jsx(
+                                    Typography,
+                                    {
+                                      variant: "text-sm-regular",
+                                      sx: {
+                                        color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurfaceVariant
+                                      },
+                                      children: item.supportingText
+                                    }
+                                  )
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    },
+                    String(item.id)
+                  );
+                })
+              }
+            )
+          }
+        ),
+        hintText && /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: hintVariant,
+            sx: {
+              color: destructive ? tokens.error : tokens.onSurfaceVariant
+            },
+            children: hintText
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  MultiSelectInputDropdown
+};
+//# sourceMappingURL=MultiSelectInputDropdown.js.map

package/dist/components/forms/MultiSelectInputDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectInputDropdown.js","sources":["../../../src/components/forms/MultiSelectInputDropdown.tsx"],"sourcesContent":["// src/components/zenith/forms/MultiSelectInputDropdown.tsx - MultiSelectInputDropdown\nimport * as React from 'react'\nimport Select from '@mui/material/Select'\nimport MuiMenuItem from '@mui/material/MenuItem'\nimport FormControl from '@mui/material/FormControl'\nimport OutlinedInput from '@mui/material/OutlinedInput'\nimport Box from '@mui/material/Box'\nimport Typography from '@mui/material/Typography'\nimport type { SxProps, Theme } from '@mui/material/styles'\nimport { HelpIcon, type HelpIconTooltipPlacement } from '../HelpIcon'\nimport { Icon } from '../Icon'\nimport { Checkbox } from './Checkbox'\nimport type { InputSearchOption } from './InputSearch'\n\nexport type MultiSelectInputDropdownSize = 'xs' | 'sm' | 'md'\nexport type MultiSelectInputDropdownShape = 'square' | 'rounded'\n\n/**\n * Design token colors - from Figma specs\n */\nconst tokens = {\n  // Background colors\n  surfaceContainerLowest: '#FFFFFF', // Default/Filled/Placeholder/Focused/Open\n  surfaceContainerLow: '#FCFCFD', // Read-only\n  onSurfaceOpacity4: 'rgba(54, 65, 82, 0.04)', // #3641520A - Disabled\n  \n  // Border colors\n  outlineVariant: '#D4DCE7', // Default border\n  outline: '#8C96A2', // Hover border\n  primary: '#1570EF', // Focused border\n  error: '#D92D20', // Destructive border\n  \n  // Text colors\n  onSurface: '#364152', // Primary text\n  onSurfaceVariant: '#697586', // Secondary text / placeholder\n  onSurfaceOpacity38: 'rgba(54, 65, 82, 0.38)', // Disabled text\n}\n\n/**\n * Helper to get onSurfaceOpacity8 token with fallbacks\n */\nconst getOnSurfaceOpacity8 = (theme: Theme): string => {\n  return (\n    theme.palette.dsTokens?.stateLayers?.['state-layers-onsurface-opacity-8'] ??\n    theme.palette.buttonTokens?.stateLayers?.onSurfaceOpacity8 ??\n    'rgba(54, 65, 82, 0.08)'\n  )\n}\n\nexport interface MultiSelectInputDropdownProps<T extends InputSearchOption = InputSearchOption> {\n  /**\n   * Label text shown above the input.\n   */\n  label?: string\n  /**\n   * Hint text shown below the input.\n   */\n  hintText?: string\n  /**\n   * Placeholder text for the input.\n   */\n  placeholder?: string\n  /**\n   * Whether the input is required.\n   */\n  required?: boolean\n  /**\n   * Size variant.\n   * @default 'md'\n   */\n  size?: MultiSelectInputDropdownSize\n  /**\n   * Shape variant.\n   * @default 'square'\n   */\n  shape?: MultiSelectInputDropdownShape\n  /**\n   * Menu items/options for the dropdown.\n   */\n  menuItems: T[]\n  /**\n   * Current selected value(s).\n   */\n  value?: T[]\n  /**\n   * Callback when value changes.\n   */\n  onChange?: (value: T[]) => void\n  /**\n   * Whether the input is in a destructive/error state.\n   */\n  destructive?: boolean\n  /**\n   * Whether the input is disabled.\n   */\n  disabled?: boolean\n  /**\n   * Whether the input is read-only.\n   */\n  readOnly?: boolean\n  /**\n   * Width of the component.\n   */\n  width?: string | number\n  /**\n   * Help icon tooltip label.\n   */\n  labelTooltipLabel?: string\n  /**\n   * Help icon tooltip description.\n   */\n  labelTooltipDescription?: React.ReactNode\n  /**\n   * Help icon tooltip placement.\n   */\n  labelTooltipPlacement?: 'top' | 'top-center' | 'top-left' | 'top-right' | 'bottom' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'left' | 'right'\n  /**\n   * Additional CSS styles.\n   */\n  sx?: SxProps<Theme>\n  /**\n   * Additional class name.\n   */\n  className?: string\n  /**\n   * Custom function to render the selected value in the input.\n   */\n  renderValue?: (selected: string[]) => React.ReactNode\n}\n\n/**\n * A multi-select dropdown input component with checkboxes in menu items.\n * Based on MUI Select component with multiple selection support.\n */\nexport function MultiSelectInputDropdown<T extends InputSearchOption = InputSearchOption>({\n  label,\n  hintText,\n  placeholder = 'Select options',\n  required = false,\n  size = 'md',\n  shape = 'square',\n  menuItems,\n  value = [],\n  onChange,\n  destructive = false,\n  disabled = false,\n  readOnly = false,\n  width = '100%',\n  labelTooltipLabel,\n  labelTooltipDescription,\n  labelTooltipPlacement = 'top-center',\n  sx,\n  className,\n  renderValue: customRenderValue,\n}: MultiSelectInputDropdownProps<T>) {\n  const isXs = size === 'xs'\n  const isSm = size === 'sm'\n  const isMd = size === 'md'\n\n  // Size-based input dimensions from design specs\n  const inputHeight = isXs ? 36 : undefined // only xs has fixed height\n  const inputPaddingY = isMd ? 10 : 8\n  const inputPaddingX = isMd ? 14 : 12\n  const inputTypography = 'text-md-regular'\n  const labelVariant = 'text-sm-medium'\n  const hintVariant = 'text-sm-regular'\n\n  const handleChange = (event: any) => {\n    const selectedIds = event.target.value as string[]\n    const selectedItems = menuItems.filter((item) => selectedIds.includes(String(item.id)))\n    onChange?.(selectedItems)\n  }\n\n  const selectedIds = value.map((item) => String(item.id))\n\n  // Ref to control Select blur on menu close\n  const selectRef = React.useRef<HTMLDivElement>(null)\n\n  // Handle menu close - blur the select to return to default state\n  const handleMenuClose = () => {\n    // Use setTimeout to ensure blur happens after menu close animation\n    setTimeout(() => {\n      // Blur any focused element within the select\n      if (selectRef.current) {\n        const focusedElement = selectRef.current.querySelector('[role=\"combobox\"]') as HTMLElement\n        if (focusedElement) {\n          focusedElement.blur()\n        }\n      }\n      // Also try to blur the active element if it's within our component\n      if (document.activeElement instanceof HTMLElement) {\n        document.activeElement.blur()\n      }\n    }, 0)\n  }\n\n  // Map labelTooltipPlacement to HelpIconTooltipPlacement\n  const mapTooltipPlacement = (\n    placement: typeof labelTooltipPlacement\n  ): HelpIconTooltipPlacement | undefined => {\n    if (!placement) return undefined\n    // Map 'top' to 'top-no-arrow' and 'bottom' to 'bottom-center'\n    if (placement === 'top') return 'top-no-arrow'\n    if (placement === 'bottom') return 'bottom-center'\n    // Other placements are compatible\n    return placement as HelpIconTooltipPlacement\n  }\n\n  // Render value in input field\n  const renderValue = customRenderValue || ((selected: string[]) => {\n    if (selected.length === 0) {\n      return (\n        <Typography \n          variant={inputTypography} \n          sx={{ color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurfaceVariant }}\n        >\n          {placeholder}\n        </Typography>\n      )\n    }\n    if (selected.length === 1) {\n      const item = menuItems.find((item) => String(item.id) === selected[0])\n      return (\n        <Typography \n          variant={inputTypography}\n          sx={{ color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurface }}\n        >\n          {item?.label ?? ''}\n        </Typography>\n      )\n    }\n    return (\n      <Typography \n        variant={inputTypography}\n        sx={{ color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurface }}\n      >\n        {`${selected.length} selected`}\n      </Typography>\n    )\n  })\n\n  return (\n    <Box\n      sx={[\n        {\n          width,\n          display: 'flex',\n          flexDirection: 'column',\n          gap: 0.75, // 6px gap between elements (label, input, hint) - from design specs\n        },\n        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n      ]}\n      className={className}\n    >\n      {/* Label */}\n      {label && (\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 0.5, // 4px gap between label and help icon\n          }}\n        >\n          <Typography variant={labelVariant} sx={{ color: 'text.primary' }}>\n            {label}\n            {required && (\n              <Typography component=\"span\" sx={{ color: 'error.main', ml: 0.5 }}>\n                *\n              </Typography>\n            )}\n          </Typography>\n          {labelTooltipLabel && (\n            <HelpIcon\n              title={labelTooltipLabel}\n              supportingText={typeof labelTooltipDescription === 'string' ? labelTooltipDescription : undefined}\n              tooltipPlacement={mapTooltipPlacement(labelTooltipPlacement)}\n            />\n          )}\n        </Box>\n      )}\n\n      {/* Select Input */}\n      <FormControl\n        fullWidth\n        error={destructive}\n        disabled={disabled}\n        sx={() => ({\n          '& .MuiOutlinedInput-root': {\n            // xs has fixed height 36px, others are hug content\n            ...(inputHeight && { height: inputHeight }),\n            minHeight: isXs ? 36 : isSm ? 40 : 44,\n            borderRadius: shape === 'rounded' ? '999px' : 2, // 8px for square\n            // Background colors based on state\n            backgroundColor: disabled\n              ? tokens.onSurfaceOpacity4 // Disabled: state layers/onSurface/opacity-4\n              : readOnly\n              ? tokens.surfaceContainerLow // Read-only: color/surfaceContainerLow\n              : tokens.surfaceContainerLowest, // Default/Filled/Placeholder/Focused: color/surfaceContainerLowest\n            cursor: readOnly ? 'default' : 'pointer',\n            '& fieldset': {\n              borderColor: destructive\n                ? tokens.error\n                : tokens.outlineVariant, // color/outlineVariant for default border\n              borderWidth: 1,\n            },\n            '&:hover fieldset': {\n              borderColor: destructive\n                ? tokens.error\n                : disabled || readOnly\n                ? tokens.outlineVariant\n                : tokens.outline, // color/outline for hover\n            },\n            '&.Mui-focused fieldset': {\n              borderColor: destructive ? tokens.error : tokens.primary,\n              // Use box-shadow inset to add extra 1px border effect without layout shift\n              boxShadow: `inset 0 0 0 1px ${destructive ? tokens.error : tokens.primary}`,\n            },\n            '& .MuiSelect-select': {\n              // Padding: same on all sides, icon margin handles right spacing\n              padding: `${inputPaddingY}px ${inputPaddingX}px`,\n              // Right padding needs extra space for the dropdown icon (20px icon + gap)\n              paddingRight: `${inputPaddingX + 28}px !important`,\n              typography: inputTypography,\n              cursor: readOnly ? 'default' : 'pointer',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '8px', // Content gap from design: 8px\n            },\n            // Position the icon correctly with proper right margin\n            '& .MuiSelect-icon': {\n              right: isMd ? 14 : 12, // Same as left padding\n            },\n          },\n        })}\n      >\n        <Select\n          ref={selectRef}\n          multiple\n          value={selectedIds}\n          onChange={handleChange}\n          onClose={handleMenuClose}\n          input={<OutlinedInput />}\n          renderValue={renderValue}\n          disabled={disabled || readOnly}\n          displayEmpty\n          IconComponent={() => (\n            <Box\n              sx={{\n                display: 'flex',\n                alignItems: 'center',\n                // Right margin matches left padding (md: 14px, sm/xs: 12px)\n                right: isMd ? 14 : 12,\n                position: 'absolute',\n                top: 0,\n                bottom: 0,\n                // Allow clicks to pass through to the Select underneath\n                pointerEvents: 'none',\n              }}\n            >\n              <Icon\n                name=\"ChevronDown\"\n                size={20}\n                sx={{\n                  color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurfaceVariant,\n                }}\n              />\n            </Box>\n          )}\n          MenuProps={{\n            // Anchor origin - menu appears below the input\n            anchorOrigin: {\n              vertical: 'bottom',\n              horizontal: 'left',\n            },\n            transformOrigin: {\n              vertical: 'top',\n              horizontal: 'left',\n            },\n            // Smooth open/close transitions\n            transitionDuration: {\n              enter: 200,\n              exit: 150,\n            },\n            // Keep menu open on item click for multi-select\n            autoFocus: false,\n            PaperProps: {\n              sx: (theme) => ({\n                marginTop: '4px', // Small gap between input and menu\n                borderRadius: 2, // 8px radius from design\n                border: '1px solid',\n                borderColor: tokens.outlineVariant,\n                backgroundColor: tokens.surfaceContainerLowest,\n                boxShadow: theme.shadows[8], // Subtle shadow\n                maxHeight: 300,\n                // Menu items container has 4px padding top/bottom, 0 horizontal\n                '& .MuiList-root': {\n                  paddingTop: '4px',\n                  paddingBottom: '4px',\n                  paddingLeft: 0,\n                  paddingRight: 0,\n                },\n              }),\n            },\n          }}\n        >\n          {menuItems.map((item) => {\n            const isSelected = selectedIds.includes(String(item.id))\n            \n            // Handle item click - toggle selection\n            const handleItemClick = (e: React.MouseEvent) => {\n              e.preventDefault()\n              e.stopPropagation()\n              const newSelectedIds = isSelected\n                ? selectedIds.filter((id) => id !== String(item.id))\n                : [...selectedIds, String(item.id)]\n              const newSelectedItems = menuItems.filter((menuItem) =>\n                newSelectedIds.includes(String(menuItem.id))\n              )\n              onChange?.(newSelectedItems)\n            }\n            \n            return (\n              <MuiMenuItem \n                key={String(item.id)} \n                value={String(item.id)}\n                onClick={handleItemClick}\n                sx={(theme) => ({\n                  padding: 0,\n                  minHeight: 'auto',\n                  '&:hover': {\n                    backgroundColor: 'transparent',\n                    '& > div': {\n                      backgroundColor: getOnSurfaceOpacity8(theme),\n                    },\n                  },\n                  '&.Mui-selected': {\n                    backgroundColor: 'transparent',\n                    '&:hover': {\n                      backgroundColor: 'transparent',\n                      '& > div': {\n                        backgroundColor: getOnSurfaceOpacity8(theme),\n                      },\n                    },\n                  },\n                })}\n              >\n                <Box\n                  sx={(theme) => ({\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: '8px', // 8px gap between checkbox and text\n                    width: '100%',\n                    // Menu item inner padding: 10px top/right/bottom, 8px left\n                    padding: '10px 10px 10px 8px',\n                    margin: '0 6px', // 6px horizontal margin for hover background\n                    borderRadius: '6px', // 6px radius for hover state\n                    cursor: 'pointer',\n                    transition: theme.transitions.create('background-color', {\n                      duration: theme.transitions.duration.shorter,\n                    }),\n                  })}\n                >\n                  {/* Checkbox - visual only, click handled by parent */}\n                  <Box\n                    sx={{\n                      display: 'inline-flex',\n                      alignItems: 'center',\n                      flexShrink: 0,\n                      pointerEvents: 'none', // Let parent handle clicks\n                    }}\n                  >\n                    <Checkbox\n                      checked={isSelected}\n                      disabled={disabled}\n                      size=\"sm\"\n                      sx={{\n                        padding: 0,\n                      }}\n                    />\n                  </Box>\n\n                  {/* Content */}\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      flexDirection: 'column',\n                      gap: 0.5, // 4px gap between text and supporting text\n                      flex: 1,\n                      minWidth: 0,\n                    }}\n                  >\n                    <Typography\n                      variant={inputTypography}\n                      sx={{\n                        color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurface,\n                      }}\n                    >\n                      {item.label}\n                    </Typography>\n                    {item.supportingText && (\n                      <Typography\n                        variant=\"text-sm-regular\"\n                        sx={{\n                          color: disabled ? tokens.onSurfaceOpacity38 : tokens.onSurfaceVariant,\n                        }}\n                      >\n                        {item.supportingText}\n                      </Typography>\n                    )}\n                  </Box>\n                </Box>\n              </MuiMenuItem>\n            )\n          })}\n        </Select>\n      </FormControl>\n\n      {/* Hint Text */}\n      {hintText && (\n        <Typography\n          variant={hintVariant}\n          sx={{\n            color: destructive ? tokens.error : tokens.onSurfaceVariant,\n          }}\n        >\n          {hintText}\n        </Typography>\n      )}\n    </Box>\n  )\n}\n\nexport default MultiSelectInputDropdown\n\n"],"names":["selectedIds","item","MuiMenuItem"],"mappings":"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"}

package/dist/components/forms/Radio.d.ts

@@ -0,0 +1,114 @@
+import { Theme, SxProps } from '@mui/material/styles';
+import * as React from 'react';
+export type RadioSize = 'sm' | 'md';
+export type RadioState = 'default' | 'hover' | 'focused' | 'disabled' | 'read-only';
+export interface RadioProps {
+    /**
+     * Unique identifier for the radio button.
+     * Highly recommended for accessibility to associate the label with the input.
+     */
+    id?: string;
+    /**
+     * Whether the radio is checked
+     */
+    checked?: boolean;
+    /**
+     * Radio size
+     * @default 'md'
+     */
+    size?: RadioSize;
+    /**
+     * Radio state (Legacy prop, use disabled/readOnly/hover/focus instead)
+     * @default 'default'
+     */
+    state?: RadioState;
+    /**
+     * Label text (optional)
+     */
+    label?: React.ReactNode;
+    /**
+     * Description text (optional)
+     */
+    description?: React.ReactNode;
+    /**
+     * Count badge (optional)
+     */
+    count?: string | number;
+    /**
+     * Whether the radio is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the radio is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Input name attribute (required when used in a group)
+     */
+    name?: string;
+    /**
+     * Input value attribute (required)
+     */
+    value: string | number | boolean;
+    /**
+     * Custom sx styles
+     */
+    sx?: SxProps<Theme>;
+}
+export interface RadioGroupProps {
+    /**
+     * The value of the selected radio button
+     */
+    value?: string | number | boolean;
+    /**
+     * Default value (uncontrolled)
+     */
+    defaultValue?: string | number | boolean;
+    /**
+     * Change handler
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    /**
+     * Radio options
+     */
+    children?: React.ReactNode;
+    /**
+     * Group label (optional)
+     */
+    label?: React.ReactNode;
+    /**
+     * Radio size (applied to all radio buttons in the group)
+     */
+    size?: RadioSize;
+    /**
+     * Radio state (applied to all radio buttons in the group)
+     */
+    state?: RadioState;
+    /**
+     * Whether all radios in the group are disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether all radios in the group are read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Layout direction
+     */
+    row?: boolean;
+    /**
+     * Custom sx styles
+     */
+    sx?: SxProps<Theme>;
+}
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/components/forms/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Radio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAO1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AACnC,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,OAAO,GACP,SAAS,GACT,UAAU,GACV,WAAW,CAAA;AAEf,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAEhB;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEvB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE7B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEvB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAE/D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IAEhC;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IAEjC;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IAExC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAE9E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEvB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAA;IAEb;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CACpB;AAsGD,eAAO,MAAM,KAAK,sFA8LjB,CAAA;AAED,eAAO,MAAM,UAAU,6FA0FrB,CAAA"}