@nationaldesignstudio/react 0.3.0 → 0.5.0

package/dist/components/atoms/button/button.d.ts

@@ -6,17 +6,18 @@ import * as React from "react";
  * Button component based on Figma Button component
  *
  * Variants (matches Figma):
- * - primary: Filled brand button (indigo background)
- * - primary-outline: Outlined brand button (indigo border/text)
- * - secondary: Filled neutral button (white background, for dark backgrounds)
- * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)
- * - ghost: Transparent button with subtle hover (for light backgrounds)
- * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)
+ * - primary: Blue filled button for primary actions
+ * - default: Dark filled button for secondary prominence
+ * - secondary: Light gray filled button with subtle border
+ * - destructive: Red filled button for destructive actions
+ * - outline: Bordered button with transparent background
+ * - ghost: Transparent button with subtle hover
+ * - link: Text-only button with underline on hover
  *
- * Sizes:
- * - lg: Large buttons (56px height)
- * - md: Medium buttons (40px height) - default
- * - sm: Small buttons (28px height)
+ * Sizes (matches Figma):
+ * - sm: Small buttons (32px height)
+ * - default: Default buttons (36px height)
+ * - lg: Large buttons (40px height)
  *
  * For icon-only buttons, use the IconButton component instead.
  *
@@ -26,107 +27,114 @@ import * as React from "react";
 declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         primary: string;
-        "primary-outline": string;
+        default: string;
         secondary: string;
-        "secondary-outline": string;
+        destructive: string;
+        outline: string;
         ghost: string;
-        "ghost-inverse": string;
+        link: string;
         themed: string;
     };
     size: {
-        lg: string;
-        md: string;
         sm: string;
+        default: string;
+        lg: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-6 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+}, undefined, "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
         primary: string;
-        "primary-outline": string;
+        default: string;
         secondary: string;
-        "secondary-outline": string;
+        destructive: string;
+        outline: string;
         ghost: string;
-        "ghost-inverse": string;
+        link: string;
         themed: string;
     };
     size: {
-        lg: string;
-        md: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }, {
     variant: {
         primary: string;
-        "primary-outline": string;
+        default: string;
         secondary: string;
-        "secondary-outline": string;
+        destructive: string;
+        outline: string;
         ghost: string;
-        "ghost-inverse": string;
+        link: string;
         themed: string;
     };
     size: {
-        lg: string;
-        md: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }>, {
     variant: {
         primary: string;
-        "primary-outline": string;
+        default: string;
         secondary: string;
-        "secondary-outline": string;
+        destructive: string;
+        outline: string;
         ghost: string;
-        "ghost-inverse": string;
+        link: string;
         themed: string;
     };
     size: {
-        lg: string;
-        md: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     variant: {
         primary: string;
-        "primary-outline": string;
+        default: string;
         secondary: string;
-        "secondary-outline": string;
+        destructive: string;
+        outline: string;
         ghost: string;
-        "ghost-inverse": string;
+        link: string;
         themed: string;
     };
     size: {
-        lg: string;
-        md: string;
         sm: string;
+        default: string;
+        lg: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-6 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+}, undefined, "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
         primary: string;
-        "primary-outline": string;
+        default: string;
         secondary: string;
-        "secondary-outline": string;
+        destructive: string;
+        outline: string;
         ghost: string;
-        "ghost-inverse": string;
+        link: string;
         themed: string;
     };
     size: {
-        lg: string;
-        md: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }, {
     variant: {
         primary: string;
-        "primary-outline": string;
+        default: string;
         secondary: string;
-        "secondary-outline": string;
+        destructive: string;
+        outline: string;
         ghost: string;
-        "ghost-inverse": string;
+        link: string;
         themed: string;
     };
     size: {
-        lg: string;
-        md: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }>, unknown, unknown, undefined>>;
 export type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

package/dist/components/atoms/button/button.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/atoms/input/input.d.ts

@@ -11,15 +11,15 @@ import * as React from "react";
  * - Disabled: Disabled background (via :disabled)
  *
  * Sizes:
- * - sm: Smaller height and padding
- * - default: Standard 48px height
- * - lg: Larger height and padding
+ * - sm: Smaller height and padding (36px)
+ * - default: Standard height (48px)
+ * - lg: Larger height and padding (56px)
  */
 declare const inputVariants: import('tailwind-variants').TVReturnType<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -27,9 +27,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -37,9 +37,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, {
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -47,9 +47,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }>, {
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -57,9 +57,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -67,9 +67,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;
@@ -77,9 +77,9 @@ declare const inputVariants: import('tailwind-variants').TVReturnType<{
     };
 }, {
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
     };
     error: {
         true: string;

package/dist/components/atoms/popover/popover.d.ts

@@ -0,0 +1,195 @@
+import { Popover as BasePopover } from '@base-ui-components/react/popover';
+import { VariantProps } from 'tailwind-variants';
+import * as React from "react";
+/**
+ * Popover popup variants
+ *
+ * Uses semantic overlay tokens for themeable styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - color.overlay.text - Primary text
+ * - surface.overlay.radius - Rounded corners
+ * - spatial.component.overlay.padding/gap - Consistent spacing
+ */
+declare const popoverPopupVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Popover arrow variants - uses shared floating arrow variants
+ */
+declare const popoverArrowVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface PopoverRootProps extends BasePopover.Root.Props {
+    children: React.ReactNode;
+}
+/**
+ * Popover Root
+ *
+ * Groups all popover parts. Does not render an element.
+ */
+declare const PopoverRoot: ({ children, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element;
+export interface PopoverTriggerProps extends React.ComponentProps<typeof BasePopover.Trigger> {
+    className?: string;
+}
+/**
+ * Popover Trigger
+ *
+ * The element that triggers the popover on click.
+ * Renders as the child element with popover behavior attached.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface PopoverPortalProps extends BasePopover.Portal.Props {
+    children: React.ReactNode;
+}
+/**
+ * Popover Portal
+ *
+ * Renders the popover popup in a portal outside the DOM hierarchy.
+ */
+declare const PopoverPortal: ({ children, ...props }: PopoverPortalProps) => import("react/jsx-runtime").JSX.Element;
+export interface PopoverBackdropProps extends Omit<React.ComponentProps<typeof BasePopover.Backdrop>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Backdrop
+ *
+ * Optional backdrop element that can be used to close the popover on click.
+ */
+declare const PopoverBackdrop: React.ForwardRefExoticComponent<Omit<PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverPositionerProps extends Omit<React.ComponentProps<typeof BasePopover.Positioner>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Positioner
+ *
+ * Positions the popover popup relative to the trigger.
+ */
+declare const PopoverPositioner: React.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverPopupProps extends Omit<React.ComponentProps<typeof BasePopover.Popup>, "className">, VariantProps<typeof popoverPopupVariants> {
+    className?: string;
+}
+/**
+ * Popover Popup
+ *
+ * The popover content container with styled appearance.
+ */
+declare const PopoverPopup: React.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverArrowProps extends Omit<React.ComponentProps<typeof BasePopover.Arrow>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Arrow
+ *
+ * Visual pointer element for the popover.
+ * Uses shared FloatingArrowSvg with overlay color tokens for fill and border.
+ */
+declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverTitleProps extends Omit<React.ComponentProps<typeof BasePopover.Title>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Title
+ *
+ * Title element for the popover content.
+ */
+declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export interface PopoverDescriptionProps extends Omit<React.ComponentProps<typeof BasePopover.Description>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Description
+ *
+ * Description element for the popover content.
+ */
+declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export interface PopoverCloseProps extends Omit<React.ComponentProps<typeof BasePopover.Close>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Close
+ *
+ * Close button for the popover.
+ */
+declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface PopoverProps {
+    /** The content to show in the popover */
+    children: React.ReactNode;
+    /** The element that triggers the popover */
+    trigger: React.ReactNode;
+    /** Title for the popover (optional) */
+    title?: React.ReactNode;
+    /** Side of the trigger to show the popover */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Offset from the trigger */
+    sideOffset?: number;
+    /** Alignment along the side */
+    align?: "start" | "center" | "end";
+    /** Whether to show an arrow */
+    showArrow?: boolean;
+    /** Whether to show a close button */
+    showClose?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the popup */
+    className?: string;
+}
+/**
+ * Popover
+ *
+ * A simple, pre-composed popover component for common use cases.
+ * For more complex needs, use the compound components directly.
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Click me</Button>}
+ *   title="Popover Title"
+ * >
+ *   <p>This is the popover content.</p>
+ * </Popover>
+ * ```
+ */
+declare const Popover: ({ children, trigger, title, side, sideOffset, align, showArrow, showClose, open, defaultOpen, onOpenChange, className, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverParts: (({ children, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: PopoverPortalProps) => import("react/jsx-runtime").JSX.Element;
+    Backdrop: React.ForwardRefExoticComponent<Omit<PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Positioner: React.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Popover, PopoverRoot, PopoverTrigger, PopoverPortal, PopoverBackdrop, PopoverPositioner, PopoverPopup, PopoverArrow, PopoverTitle, PopoverDescription, PopoverClose, popoverPopupVariants, popoverArrowVariants, };

package/dist/components/atoms/select/select.d.ts

@@ -13,9 +13,9 @@ import * as React from "react";
  */
 declare const selectTriggerVariants: import('tailwind-variants').TVReturnType<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        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";
@@ -23,9 +23,9 @@ declare const selectTriggerVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        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";
@@ -33,9 +33,9 @@ declare const selectTriggerVariants: import('tailwind-variants').TVReturnType<{
     };
 }, {
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        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";
@@ -43,9 +43,9 @@ declare const selectTriggerVariants: import('tailwind-variants').TVReturnType<{
     };
 }>, {
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        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";
@@ -53,9 +53,9 @@ declare const selectTriggerVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        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";
@@ -63,9 +63,9 @@ declare const selectTriggerVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        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";
@@ -73,9 +73,9 @@ declare const selectTriggerVariants: import('tailwind-variants').TVReturnType<{
     };
 }, {
     size: {
-        readonly sm: "h-36 px-12 py-8 text-14";
-        readonly default: "h-48 px-16 py-10";
-        readonly lg: "h-56 px-20 py-12 text-18";
+        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";
@@ -96,10 +96,10 @@ declare const selectPopupVariants: import('tailwind-variants').TVReturnType<{} |
  * - Disabled: Reduced opacity
  */
 declare const selectOptionVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface SelectProps extends BaseSelect.Root.Props {
+export interface SelectProps<Value = string> extends BaseSelect.Root.Props<Value> {
     children: React.ReactNode;
 }
-declare const SelectRoot: ({ children, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectRoot: <Value = string>({ children, ...props }: SelectProps<Value>) => import("react/jsx-runtime").JSX.Element;
 export interface SelectTriggerProps extends Omit<React.ComponentProps<typeof BaseSelect.Trigger>, "className">, VariantProps<typeof selectTriggerVariants> {
     className?: string;
     placeholder?: string;
@@ -121,7 +121,7 @@ export interface SelectGroupLabelProps extends Omit<React.ComponentProps<typeof
     className?: string;
 }
 declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Select: (({ children, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const Select: (<Value = string>({ children, ...props }: SelectProps<Value>) => import("react/jsx-runtime").JSX.Element) & {
     Trigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Popup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     Option: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;