@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/select/index.d.ts

@@ -0,0 +1,188 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import { Select as Select$1 } from '@base-ui-components/react/select';
+import * as React from 'react';
+
+/**
+ * Select trigger variants based on Figma BaseKit / Interface / Dropdown
+ *
+ * States:
+ * - Default: White background, subtle border
+ * - Hover: Light gray background
+ * - Focus/Open: Accent border with focus ring
+ * - Selected: Has a value selected (darker text)
+ * - Disabled: Reduced opacity, not interactive
+ * - Invalid: Error border and styling
+ */
+declare const selectTriggerVariants: tailwind_variants.TVReturnType<{
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}>, {
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
+        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
+        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
+    };
+    error: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Select popup/menu variants
+ *
+ * Uses overlay tokens for consistent floating panel styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - surface.overlay.radius - Rounded corners
+ */
+declare const selectPopupVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Select option/item variants based on Figma Menu Items
+ *
+ * States:
+ * - Default: White background
+ * - Hover/Highlighted: Light indigo tint background
+ * - Selected: Stronger indigo tint with blue text and checkmark
+ * - Disabled: Reduced opacity
+ */
+declare const selectOptionVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Select separator variants
+ */
+declare const selectSeparatorVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Select scroll arrow variants (shared by up and down)
+ */
+declare const selectScrollArrowVariants: tailwind_variants.TVReturnType<{} | {} | {}, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, {} | {}, undefined, tailwind_variants.TVReturnType<unknown, undefined, string[], tailwind_variants_dist_config_js.TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+interface SelectProps<Value = string> extends Select$1.Root.Props<Value> {
+    children: React.ReactNode;
+}
+declare const SelectRoot: <Value = string>({ children, ...props }: SelectProps<Value>) => react_jsx_runtime.JSX.Element;
+interface SelectTriggerProps extends Omit<React.ComponentProps<typeof Select$1.Trigger>, "className">, VariantProps<typeof selectTriggerVariants> {
+    className?: string;
+    placeholder?: string;
+    /**
+     * Accessible label for the select trigger.
+     * Required for accessibility when no visible label is present.
+     */
+    "aria-label"?: string;
+}
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+interface SelectValueProps extends Omit<React.ComponentProps<typeof Select$1.Value>, "className"> {
+    className?: string;
+    placeholder?: string;
+}
+declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+interface SelectPopupProps extends Omit<React.ComponentProps<typeof Select$1.Popup>, "className"> {
+    className?: string;
+    /**
+     * Whether the selected item should align with the trigger.
+     * When true (default), the popup positions so the selected item appears over the trigger.
+     * When false, the popup aligns to the trigger edge.
+     */
+    alignItemWithTrigger?: boolean;
+}
+declare const SelectPopup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectOptionProps extends Omit<React.ComponentProps<typeof Select$1.Item>, "className"> {
+    className?: string;
+}
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectGroupProps extends Omit<React.ComponentProps<typeof Select$1.Group>, "className"> {
+    className?: string;
+}
+declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectGroupLabelProps extends Omit<React.ComponentProps<typeof Select$1.GroupLabel>, "className"> {
+    className?: string;
+}
+declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectSeparatorProps extends Omit<React.ComponentProps<typeof Select$1.Separator>, "className"> {
+    className?: string;
+}
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectScrollUpArrowProps extends Omit<React.ComponentProps<typeof Select$1.ScrollUpArrow>, "className"> {
+    className?: string;
+}
+declare const SelectScrollUpArrow: React.ForwardRefExoticComponent<Omit<SelectScrollUpArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SelectScrollDownArrowProps extends Omit<React.ComponentProps<typeof Select$1.ScrollDownArrow>, "className"> {
+    className?: string;
+}
+declare const SelectScrollDownArrow: React.ForwardRefExoticComponent<Omit<SelectScrollDownArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Select: (<Value = string>({ children, ...props }: SelectProps<Value>) => react_jsx_runtime.JSX.Element) & {
+    Trigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Value: React.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Option: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    GroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Label: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<SelectSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    ScrollUpArrow: React.ForwardRefExoticComponent<Omit<SelectScrollUpArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    ScrollDownArrow: React.ForwardRefExoticComponent<Omit<SelectScrollDownArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+
+export { Select, SelectContent, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, SelectLabel, SelectOption, type SelectOptionProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectRoot, SelectScrollDownArrow, type SelectScrollDownArrowProps, SelectScrollUpArrow, type SelectScrollUpArrowProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, selectOptionVariants, selectPopupVariants, selectScrollArrowVariants, selectSeparatorVariants, selectTriggerVariants };

package/dist/select/index.js

@@ -0,0 +1,295 @@
+"use client";
+import { Select as Select$1 } from '@base-ui-components/react/select';
+import { ChevronDown, Check, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+import { tv, cnBase } from 'tailwind-variants';
+import { clsx } from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/atoms/select/select.tsx
+var formControlBase = [
+  // Layout
+  "flex w-full items-center",
+  // Typography
+  "text-16 font-medium leading-14",
+  // Border and radius - uses surface ui radius for theming support
+  "border border-solid border-ui-color-border rounded-surface-ui-medium",
+  // Background
+  "bg-ui-control-background",
+  // Transitions
+  "transition-[background-color,border-color,box-shadow] duration-150",
+  // Focus state
+  "outline-none focus-visible:border-border-focus focus-visible:ring-4 focus-visible:ring-ui-color-focus",
+  // Hover state (when not focused or disabled)
+  "hover:bg-ui-control-background-hover hover:focus-visible:bg-ui-control-background",
+  // Disabled state
+  "disabled:bg-ui-control-background-disabled disabled:cursor-not-allowed disabled:opacity-50"
+];
+var formControlSizes = {
+  sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14",
+  default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium",
+  lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18"
+};
+var formControlError = {
+  true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color",
+  false: ""
+};
+tv({
+  base: formControlBase,
+  variants: {
+    size: formControlSizes,
+    error: formControlError
+  },
+  defaultVariants: {
+    size: "default",
+    error: false
+  }
+});
+function cn(...inputs) {
+  return cnBase(clsx(inputs));
+}
+var selectTriggerVariants = tv({
+  base: [
+    ...formControlBase,
+    // Select-specific styles
+    "justify-between cursor-pointer",
+    // Override disabled to use data attribute (Base UI pattern)
+    "data-[disabled]:bg-ui-control-background-disabled data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+    // Open state styling
+    "data-[popup-open]:border-ui-accent-base data-[popup-open]:ring-4 data-[popup-open]:ring-ui-color-focus data-[popup-open]:bg-ui-control-background",
+    // Invalid state (aria-invalid)
+    "aria-[invalid=true]:border-ui-error-color aria-[invalid=true]:ring-ui-error-color/20"
+  ],
+  variants: {
+    size: formControlSizes,
+    error: formControlError
+  },
+  defaultVariants: {
+    size: "default",
+    error: false
+  }
+});
+var selectPopupVariants = tv({
+  base: [
+    // Layout - match trigger width using CSS custom property from Base UI
+    "flex flex-col gap-2 p-8",
+    "w-[var(--anchor-width)]",
+    // Background - uses overlay token
+    "bg-overlay-background",
+    // Border - uses overlay token for subtle border
+    "border border-overlay-border",
+    // Border radius - uses overlay token for consistency with other overlays
+    "rounded-surface-overlay",
+    // Shadow for elevation
+    "shadow-lg",
+    // Animation
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity] duration-150",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+    "data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    // Ensure it's above other content
+    "z-50",
+    // Scrollable support
+    "overflow-y-auto max-h-[var(--available-height,300px)]"
+  ]
+});
+var selectOptionVariants = tv({
+  base: [
+    // Layout
+    "flex items-center justify-between px-12 py-8 h-36",
+    // Typography - use semantic tokens
+    "typography-body-md-md font-medium text-ui-menu-item-text",
+    // Background - default
+    "bg-ui-menu-item-bg",
+    // Border radius - uses surface ui radius for theming support
+    "rounded-surface-ui-medium",
+    // Cursor
+    "cursor-pointer outline-none",
+    // Transitions
+    "transition-colors duration-150",
+    // Hover/highlighted state - use semantic token
+    "data-[highlighted]:bg-ui-menu-item-bg-hover",
+    // Selected state - use semantic tokens
+    "data-[selected]:bg-ui-menu-item-bg-selected data-[selected]:text-ui-menu-item-text-selected",
+    // Disabled state
+    "data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed"
+  ]
+});
+var selectSeparatorVariants = tv({
+  base: ["h-px my-6 -mx-8", "bg-overlay-border"]
+});
+var selectScrollArrowVariants = tv({
+  base: [
+    "flex items-center justify-center",
+    "py-4",
+    "text-text-muted",
+    "cursor-default",
+    // Sticky positioning for scroll indicators
+    "data-[direction=up]:sticky data-[direction=up]:top-0",
+    "data-[direction=down]:sticky data-[direction=down]:bottom-0",
+    "bg-overlay-background"
+  ]
+});
+var SelectRoot = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(Select$1.Root, { ...props, children });
+};
+var SelectTrigger = React.forwardRef(
+  ({
+    className,
+    size,
+    error,
+    placeholder = "Select option...",
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Select$1.Trigger,
+      {
+        ref,
+        "aria-label": ariaLabel ?? placeholder,
+        "aria-invalid": error || void 0,
+        className: cn(selectTriggerVariants({ size, error }), className),
+        "data-size": size ?? "default",
+        "data-error": error ?? false,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Select$1.Value, { children: (value) => value ? value : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder }) }),
+          /* @__PURE__ */ jsx(Select$1.Icon, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-16 text-gray-500 shrink-0" }) })
+        ]
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectValue = React.forwardRef(
+  ({ className, placeholder = "Select option...", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select$1.Value, { ref, className, ...props, children: (value) => value ? value : /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder }) });
+  }
+);
+SelectValue.displayName = "SelectValue";
+var SelectPopup = React.forwardRef(
+  ({ className, children, alignItemWithTrigger = true, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+      Select$1.Positioner,
+      {
+        side: "bottom",
+        sideOffset: 4,
+        align: "start",
+        alignItemWithTrigger,
+        children: /* @__PURE__ */ jsx(
+          Select$1.Popup,
+          {
+            ref,
+            className: cn(selectPopupVariants(), className),
+            ...props,
+            children
+          }
+        )
+      }
+    ) });
+  }
+);
+SelectPopup.displayName = "SelectPopup";
+var SelectContent = SelectPopup;
+var SelectOption = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Select$1.Item,
+      {
+        ref,
+        className: cn(selectOptionVariants(), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Select$1.ItemText, { children }),
+          /* @__PURE__ */ jsx(Select$1.ItemIndicator, { "aria-hidden": "true", children: /* @__PURE__ */ jsx(Check, { className: "size-14 shrink-0" }) })
+        ]
+      }
+    );
+  }
+);
+SelectOption.displayName = "SelectOption";
+var SelectItem = SelectOption;
+var SelectGroup = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select$1.Group, { ref, className, ...props, children });
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+var SelectGroupLabel = React.forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.GroupLabel,
+    {
+      ref,
+      className: cn(
+        "px-12 py-6 typography-body-sm-sm font-medium text-text-muted uppercase tracking-wide",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
+SelectGroupLabel.displayName = "SelectGroupLabel";
+var SelectLabel = SelectGroupLabel;
+var SelectSeparator = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Select$1.Separator,
+      {
+        ref,
+        className: cn(selectSeparatorVariants(), className),
+        ...props
+      }
+    );
+  }
+);
+SelectSeparator.displayName = "SelectSeparator";
+var SelectScrollUpArrow = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollUpArrow,
+    {
+      ref,
+      "data-direction": "up",
+      "aria-label": "Scroll up",
+      className: cn(selectScrollArrowVariants(), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-12", "aria-hidden": "true" })
+    }
+  );
+});
+SelectScrollUpArrow.displayName = "SelectScrollUpArrow";
+var SelectScrollDownArrow = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Select$1.ScrollDownArrow,
+    {
+      ref,
+      "data-direction": "down",
+      "aria-label": "Scroll down",
+      className: cn(selectScrollArrowVariants(), className),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-12", "aria-hidden": "true" })
+    }
+  );
+});
+SelectScrollDownArrow.displayName = "SelectScrollDownArrow";
+var Select = Object.assign(SelectRoot, {
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Popup: SelectPopup,
+  Content: SelectContent,
+  Option: SelectOption,
+  Item: SelectItem,
+  Group: SelectGroup,
+  GroupLabel: SelectGroupLabel,
+  Label: SelectLabel,
+  Separator: SelectSeparator,
+  ScrollUpArrow: SelectScrollUpArrow,
+  ScrollDownArrow: SelectScrollDownArrow
+});
+
+export { Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectOption, SelectPopup, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, selectOptionVariants, selectPopupVariants, selectScrollArrowVariants, selectSeparatorVariants, selectTriggerVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/form-control.ts","../../src/lib/utils.ts","../../src/components/atoms/select/select.tsx"],"names":["twMerge","tv","BaseSelect"],"mappings":"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","file":"index.js","sourcesContent":["import { tv } from \"tailwind-variants\";\n\n/**\n * Shared form control styles for Input, Select, and similar components.\n *\n * These base styles ensure consistent appearance across all form controls:\n * - Consistent height and padding\n * - Unified focus ring and border treatment\n * - Shared hover/disabled states\n *\n * Based on Figma BaseKit / Interface / Input & Dropdown designs.\n */\n\n/**\n * Base styles shared by all form controls (input, select, etc.)\n */\nexport const formControlBase = [\n\t// Layout\n\t\"flex w-full items-center\",\n\t// Typography\n\t\"text-16 font-medium leading-14\",\n\t// Border and radius - uses surface ui radius for theming support\n\t\"border border-solid border-ui-color-border rounded-surface-ui-medium\",\n\t// Background\n\t\"bg-ui-control-background\",\n\t// Transitions\n\t\"transition-[background-color,border-color,box-shadow] duration-150\",\n\t// Focus state\n\t\"outline-none focus-visible:border-border-focus focus-visible:ring-4 focus-visible:ring-ui-color-focus\",\n\t// Hover state (when not focused or disabled)\n\t\"hover:bg-ui-control-background-hover hover:focus-visible:bg-ui-control-background\",\n\t// Disabled state\n\t\"disabled:bg-ui-control-background-disabled disabled:cursor-not-allowed disabled:opacity-50\",\n];\n\n/**\n * Size variants shared by form controls\n * Uses spatial tokens for consistent sizing across form controls\n */\nexport const formControlSizes = {\n\tsm: \"h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14\",\n\tdefault:\n\t\t\"h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium\",\n\tlg: \"h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18\",\n} as const;\n\n/**\n * Error state styles shared by form controls\n */\nexport const formControlError = {\n\ttrue: \"border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color\",\n\tfalse: \"\",\n} as const;\n\n/**\n * Form control variants using tailwind-variants\n * Can be composed with other variants for specific components\n */\nexport const formControlVariants = tv({\n\tbase: formControlBase,\n\tvariants: {\n\t\tsize: formControlSizes,\n\t\terror: formControlError,\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t\terror: false,\n\t},\n});\n\nexport type FormControlSize = keyof typeof formControlSizes;\n","import { type ClassValue, clsx } from \"clsx\";\nimport { cnBase as twMerge } from \"tailwind-variants\";\n\nexport { twMerge };\n\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui-components/react/select\";\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport {\n\tformControlBase,\n\tformControlError,\n\tformControlSizes,\n} from \"@/lib/form-control\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Select trigger variants based on Figma BaseKit / Interface / Dropdown\n *\n * States:\n * - Default: White background, subtle border\n * - Hover: Light gray background\n * - Focus/Open: Accent border with focus ring\n * - Selected: Has a value selected (darker text)\n * - Disabled: Reduced opacity, not interactive\n * - Invalid: Error border and styling\n */\nconst selectTriggerVariants = tv({\n\tbase: [\n\t\t...formControlBase,\n\t\t// Select-specific styles\n\t\t\"justify-between cursor-pointer\",\n\t\t// Override disabled to use data attribute (Base UI pattern)\n\t\t\"data-[disabled]:bg-ui-control-background-disabled data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n\t\t// Open state styling\n\t\t\"data-[popup-open]:border-ui-accent-base data-[popup-open]:ring-4 data-[popup-open]:ring-ui-color-focus data-[popup-open]:bg-ui-control-background\",\n\t\t// Invalid state (aria-invalid)\n\t\t\"aria-[invalid=true]:border-ui-error-color aria-[invalid=true]:ring-ui-error-color/20\",\n\t],\n\tvariants: {\n\t\tsize: formControlSizes,\n\t\terror: formControlError,\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t\terror: false,\n\t},\n});\n\n/**\n * Select popup/menu variants\n *\n * Uses overlay tokens for consistent floating panel styling:\n * - color.overlay.background - Light background\n * - color.overlay.border - Subtle border\n * - surface.overlay.radius - Rounded corners\n */\nconst selectPopupVariants = tv({\n\tbase: [\n\t\t// Layout - match trigger width using CSS custom property from Base UI\n\t\t\"flex flex-col gap-2 p-8\",\n\t\t\"w-[var(--anchor-width)]\",\n\t\t// Background - uses overlay token\n\t\t\"bg-overlay-background\",\n\t\t// Border - uses overlay token for subtle border\n\t\t\"border border-overlay-border\",\n\t\t// Border radius - uses overlay token for consistency with other overlays\n\t\t\"rounded-surface-overlay\",\n\t\t// Shadow for elevation\n\t\t\"shadow-lg\",\n\t\t// Animation\n\t\t\"origin-[var(--transform-origin)]\",\n\t\t\"transition-[transform,scale,opacity] duration-150\",\n\t\t\"data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n\t\t\"data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n\t\t// Ensure it's above other content\n\t\t\"z-50\",\n\t\t// Scrollable support\n\t\t\"overflow-y-auto max-h-[var(--available-height,300px)]\",\n\t],\n});\n\n/**\n * Select option/item variants based on Figma Menu Items\n *\n * States:\n * - Default: White background\n * - Hover/Highlighted: Light indigo tint background\n * - Selected: Stronger indigo tint with blue text and checkmark\n * - Disabled: Reduced opacity\n */\nconst selectOptionVariants = tv({\n\tbase: [\n\t\t// Layout\n\t\t\"flex items-center justify-between px-12 py-8 h-36\",\n\t\t// Typography - use semantic tokens\n\t\t\"typography-body-md-md font-medium text-ui-menu-item-text\",\n\t\t// Background - default\n\t\t\"bg-ui-menu-item-bg\",\n\t\t// Border radius - uses surface ui radius for theming support\n\t\t\"rounded-surface-ui-medium\",\n\t\t// Cursor\n\t\t\"cursor-pointer outline-none\",\n\t\t// Transitions\n\t\t\"transition-colors duration-150\",\n\t\t// Hover/highlighted state - use semantic token\n\t\t\"data-[highlighted]:bg-ui-menu-item-bg-hover\",\n\t\t// Selected state - use semantic tokens\n\t\t\"data-[selected]:bg-ui-menu-item-bg-selected data-[selected]:text-ui-menu-item-text-selected\",\n\t\t// Disabled state\n\t\t\"data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed\",\n\t],\n});\n\n/**\n * Select separator variants\n */\nconst selectSeparatorVariants = tv({\n\tbase: [\"h-px my-6 -mx-8\", \"bg-overlay-border\"],\n});\n\n/**\n * Select scroll arrow variants (shared by up and down)\n */\nconst selectScrollArrowVariants = tv({\n\tbase: [\n\t\t\"flex items-center justify-center\",\n\t\t\"py-4\",\n\t\t\"text-text-muted\",\n\t\t\"cursor-default\",\n\t\t// Sticky positioning for scroll indicators\n\t\t\"data-[direction=up]:sticky data-[direction=up]:top-0\",\n\t\t\"data-[direction=down]:sticky data-[direction=down]:bottom-0\",\n\t\t\"bg-overlay-background\",\n\t],\n});\n\n// ============================================================================\n// Select Root\n// ============================================================================\n\nexport interface SelectProps<Value = string>\n\textends BaseSelect.Root.Props<Value> {\n\tchildren: React.ReactNode;\n}\n\nconst SelectRoot = <Value = string>({\n\tchildren,\n\t...props\n}: SelectProps<Value>) => {\n\treturn <BaseSelect.Root {...props}>{children}</BaseSelect.Root>;\n};\n\n// ============================================================================\n// Select Trigger\n// ============================================================================\n\nexport interface SelectTriggerProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Trigger>, \"className\">,\n\t\tVariantProps<typeof selectTriggerVariants> {\n\tclassName?: string;\n\tplaceholder?: string;\n\t/**\n\t * Accessible label for the select trigger.\n\t * Required for accessibility when no visible label is present.\n\t */\n\t\"aria-label\"?: string;\n}\n\nconst SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tsize,\n\t\t\terror,\n\t\t\tplaceholder = \"Select option...\",\n\t\t\t\"aria-label\": ariaLabel,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<BaseSelect.Trigger\n\t\t\t\tref={ref}\n\t\t\t\taria-label={ariaLabel ?? placeholder}\n\t\t\t\taria-invalid={error || undefined}\n\t\t\t\tclassName={cn(selectTriggerVariants({ size, error }), className)}\n\t\t\t\tdata-size={size ?? \"default\"}\n\t\t\t\tdata-error={error ?? false}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<BaseSelect.Value>\n\t\t\t\t\t{(value) =>\n\t\t\t\t\t\tvalue ? (\n\t\t\t\t\t\t\tvalue\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span className=\"text-text-muted\">{placeholder}</span>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t</BaseSelect.Value>\n\t\t\t\t<BaseSelect.Icon aria-hidden=\"true\">\n\t\t\t\t\t<ChevronDown className=\"size-16 text-gray-500 shrink-0\" />\n\t\t\t\t</BaseSelect.Icon>\n\t\t\t</BaseSelect.Trigger>\n\t\t);\n\t},\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\n// ============================================================================\n// Select Value (for custom trigger compositions)\n// ============================================================================\n\nexport interface SelectValueProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Value>, \"className\"> {\n\tclassName?: string;\n\tplaceholder?: string;\n}\n\nconst SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(\n\t({ className, placeholder = \"Select option...\", ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseSelect.Value ref={ref} className={className} {...props}>\n\t\t\t\t{(value) =>\n\t\t\t\t\tvalue ? value : <span className=\"text-text-muted\">{placeholder}</span>\n\t\t\t\t}\n\t\t\t</BaseSelect.Value>\n\t\t);\n\t},\n);\nSelectValue.displayName = \"SelectValue\";\n\n// ============================================================================\n// Select Portal & Popup (Content)\n// ============================================================================\n\nexport interface SelectPopupProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Popup>, \"className\"> {\n\tclassName?: string;\n\t/**\n\t * Whether the selected item should align with the trigger.\n\t * When true (default), the popup positions so the selected item appears over the trigger.\n\t * When false, the popup aligns to the trigger edge.\n\t */\n\talignItemWithTrigger?: boolean;\n}\n\nconst SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(\n\t({ className, children, alignItemWithTrigger = true, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseSelect.Portal>\n\t\t\t\t<BaseSelect.Positioner\n\t\t\t\t\tside=\"bottom\"\n\t\t\t\t\tsideOffset={4}\n\t\t\t\t\talign=\"start\"\n\t\t\t\t\talignItemWithTrigger={alignItemWithTrigger}\n\t\t\t\t>\n\t\t\t\t\t<BaseSelect.Popup\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tclassName={cn(selectPopupVariants(), className)}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</BaseSelect.Popup>\n\t\t\t\t</BaseSelect.Positioner>\n\t\t\t</BaseSelect.Portal>\n\t\t);\n\t},\n);\nSelectPopup.displayName = \"SelectPopup\";\n\n// Alias for shadcn compatibility\nconst SelectContent = SelectPopup;\n\n// ============================================================================\n// Select Option (wraps Base UI's Select.Item)\n// ============================================================================\n\nexport interface SelectOptionProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Item>, \"className\"> {\n\tclassName?: string;\n}\n\nconst SelectOption = React.forwardRef<HTMLDivElement, SelectOptionProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseSelect.Item\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(selectOptionVariants(), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n\t\t\t\t<BaseSelect.ItemIndicator aria-hidden=\"true\">\n\t\t\t\t\t<Check className=\"size-14 shrink-0\" />\n\t\t\t\t</BaseSelect.ItemIndicator>\n\t\t\t</BaseSelect.Item>\n\t\t);\n\t},\n);\nSelectOption.displayName = \"SelectOption\";\n\n// Alias for shadcn compatibility\nconst SelectItem = SelectOption;\n\n// ============================================================================\n// Select Group\n// ============================================================================\n\nexport interface SelectGroupProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Group>, \"className\"> {\n\tclassName?: string;\n}\n\nconst SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseSelect.Group ref={ref} className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</BaseSelect.Group>\n\t\t);\n\t},\n);\nSelectGroup.displayName = \"SelectGroup\";\n\n// ============================================================================\n// Select Group Label\n// ============================================================================\n\nexport interface SelectGroupLabelProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BaseSelect.GroupLabel>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\nconst SelectGroupLabel = React.forwardRef<\n\tHTMLDivElement,\n\tSelectGroupLabelProps\n>(({ className, children, ...props }, ref) => {\n\treturn (\n\t\t<BaseSelect.GroupLabel\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"px-12 py-6 typography-body-sm-sm font-medium text-text-muted uppercase tracking-wide\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</BaseSelect.GroupLabel>\n\t);\n});\nSelectGroupLabel.displayName = \"SelectGroupLabel\";\n\n// Alias for shadcn compatibility\nconst SelectLabel = SelectGroupLabel;\n\n// ============================================================================\n// Select Separator\n// ============================================================================\n\nexport interface SelectSeparatorProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Separator>, \"className\"> {\n\tclassName?: string;\n}\n\nconst SelectSeparator = React.forwardRef<HTMLDivElement, SelectSeparatorProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseSelect.Separator\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(selectSeparatorVariants(), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nSelectSeparator.displayName = \"SelectSeparator\";\n\n// ============================================================================\n// Select Scroll Up Arrow\n// ============================================================================\n\nexport interface SelectScrollUpArrowProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BaseSelect.ScrollUpArrow>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\nconst SelectScrollUpArrow = React.forwardRef<\n\tHTMLDivElement,\n\tSelectScrollUpArrowProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<BaseSelect.ScrollUpArrow\n\t\t\tref={ref}\n\t\t\tdata-direction=\"up\"\n\t\t\taria-label=\"Scroll up\"\n\t\t\tclassName={cn(selectScrollArrowVariants(), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ChevronUp className=\"size-12\" aria-hidden=\"true\" />\n\t\t</BaseSelect.ScrollUpArrow>\n\t);\n});\nSelectScrollUpArrow.displayName = \"SelectScrollUpArrow\";\n\n// ============================================================================\n// Select Scroll Down Arrow\n// ============================================================================\n\nexport interface SelectScrollDownArrowProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BaseSelect.ScrollDownArrow>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\nconst SelectScrollDownArrow = React.forwardRef<\n\tHTMLDivElement,\n\tSelectScrollDownArrowProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<BaseSelect.ScrollDownArrow\n\t\t\tref={ref}\n\t\t\tdata-direction=\"down\"\n\t\t\taria-label=\"Scroll down\"\n\t\t\tclassName={cn(selectScrollArrowVariants(), className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ChevronDown className=\"size-12\" aria-hidden=\"true\" />\n\t\t</BaseSelect.ScrollDownArrow>\n\t);\n});\nSelectScrollDownArrow.displayName = \"SelectScrollDownArrow\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Select = Object.assign(SelectRoot, {\n\tTrigger: SelectTrigger,\n\tValue: SelectValue,\n\tPopup: SelectPopup,\n\tContent: SelectContent,\n\tOption: SelectOption,\n\tItem: SelectItem,\n\tGroup: SelectGroup,\n\tGroupLabel: SelectGroupLabel,\n\tLabel: SelectLabel,\n\tSeparator: SelectSeparator,\n\tScrollUpArrow: SelectScrollUpArrow,\n\tScrollDownArrow: SelectScrollDownArrow,\n});\n\n// Also export individual components for flexibility\nexport {\n\tSelectRoot,\n\tSelectTrigger,\n\tSelectValue,\n\tSelectPopup,\n\tSelectContent,\n\tSelectOption,\n\tSelectItem,\n\tSelectGroup,\n\tSelectGroupLabel,\n\tSelectLabel,\n\tSelectSeparator,\n\tSelectScrollUpArrow,\n\tSelectScrollDownArrow,\n\tselectTriggerVariants,\n\tselectPopupVariants,\n\tselectOptionVariants,\n\tselectSeparatorVariants,\n\tselectScrollArrowVariants,\n};\n"]}