@nationaldesignstudio/react 0.3.0 → 0.5.1

package/dist/components/atoms/popover/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sources":["../../../../src/components/atoms/popover/popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as BasePopover } from \"@base-ui-components/react/popover\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport {\n\tFloatingArrowSvg,\n\tfloatingArrowVariants,\n} from \"../../shared/floating-arrow\";\n\n/**\n * Popover popup variants\n *\n * Uses semantic overlay tokens for themeable styling:\n * - color.overlay.background - Light background\n * - color.overlay.border - Subtle border\n * - color.overlay.text - Primary text\n * - surface.overlay.radius - Rounded corners\n * - spatial.component.overlay.padding/gap - Consistent spacing\n */\nconst popoverPopupVariants = tv({\n\tbase: [\n\t\t// Layout - uses component overlay tokens\n\t\t\"p-spatial-component-overlay-padding\",\n\t\t// Background - uses overlay background token\n\t\t\"bg-overlay-background\",\n\t\t// Border - uses overlay border token\n\t\t\"border border-overlay-border\",\n\t\t// Text - uses overlay text token\n\t\t\"text-overlay-text\",\n\t\t// Border radius - uses surface overlay token\n\t\t\"rounded-surface-overlay\",\n\t\t// Shadow for elevation\n\t\t\"shadow-lg\",\n\t\t// Allow arrow to extend outside popup bounds\n\t\t\"overflow-visible\",\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 (higher than backdrop z-40)\n\t\t\"z-50\",\n\t\t// Max width for reasonable content display\n\t\t\"max-w-[320px]\",\n\t],\n\tvariants: {\n\t\tvariant: {\n\t\t\tdefault: \"\",\n\t\t\t// Future variants can be added here\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tvariant: \"default\",\n\t},\n});\n\n/**\n * Popover arrow variants - uses shared floating arrow variants\n */\nconst popoverArrowVariants = floatingArrowVariants;\n\n// ============================================================================\n// Popover Root\n// ============================================================================\n\nexport interface PopoverRootProps extends BasePopover.Root.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Popover Root\n *\n * Groups all popover parts. Does not render an element.\n */\nconst PopoverRoot = ({ children, ...props }: PopoverRootProps) => {\n\treturn <BasePopover.Root {...props}>{children}</BasePopover.Root>;\n};\n\n// ============================================================================\n// Popover Trigger\n// ============================================================================\n\nexport interface PopoverTriggerProps\n\textends React.ComponentProps<typeof BasePopover.Trigger> {\n\tclassName?: string;\n}\n\n/**\n * Popover Trigger\n *\n * The element that triggers the popover on click.\n * Renders as the child element with popover behavior attached.\n * When children is a single React element, uses `render` prop to avoid wrapper element.\n */\nconst PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n\t({ className, children, ...props }, ref) => {\n\t\t// If children is a single React element, use render prop to avoid wrapper\n\t\tconst isSingleElement = React.isValidElement(children);\n\n\t\tif (isSingleElement) {\n\t\t\treturn (\n\t\t\t\t<BasePopover.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={className}\n\t\t\t\t\trender={children}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BasePopover.Trigger ref={ref} className={className} {...props}>\n\t\t\t\t{children}\n\t\t\t</BasePopover.Trigger>\n\t\t);\n\t},\n);\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n// ============================================================================\n// Popover Portal\n// ============================================================================\n\nexport interface PopoverPortalProps extends BasePopover.Portal.Props {\n\tchildren: React.ReactNode;\n}\n\n/**\n * Popover Portal\n *\n * Renders the popover popup in a portal outside the DOM hierarchy.\n */\nconst PopoverPortal = ({ children, ...props }: PopoverPortalProps) => {\n\treturn <BasePopover.Portal {...props}>{children}</BasePopover.Portal>;\n};\n\n// ============================================================================\n// Popover Backdrop\n// ============================================================================\n\nexport interface PopoverBackdropProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Backdrop>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Backdrop\n *\n * Optional backdrop element that can be used to close the popover on click.\n */\nconst PopoverBackdrop = React.forwardRef<HTMLDivElement, PopoverBackdropProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Backdrop\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"fixed inset-0 z-40\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverBackdrop.displayName = \"PopoverBackdrop\";\n\n// ============================================================================\n// Popover Positioner\n// ============================================================================\n\nexport interface PopoverPositionerProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BasePopover.Positioner>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\n/**\n * Popover Positioner\n *\n * Positions the popover popup relative to the trigger.\n */\nconst PopoverPositioner = React.forwardRef<\n\tHTMLDivElement,\n\tPopoverPositionerProps\n>(({ className, side = \"bottom\", sideOffset = 8, ...props }, ref) => {\n\treturn (\n\t\t<BasePopover.Positioner\n\t\t\tref={ref}\n\t\t\tside={side}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\"z-50\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nPopoverPositioner.displayName = \"PopoverPositioner\";\n\n// ============================================================================\n// Popover Popup\n// ============================================================================\n\nexport interface PopoverPopupProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Popup>, \"className\">,\n\t\tVariantProps<typeof popoverPopupVariants> {\n\tclassName?: string;\n}\n\n/**\n * Popover Popup\n *\n * The popover content container with styled appearance.\n */\nconst PopoverPopup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(\n\t({ className, variant, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Popup\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(popoverPopupVariants({ variant }), className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverPopup.displayName = \"PopoverPopup\";\n\n// ============================================================================\n// Popover Arrow\n// ============================================================================\n\nexport interface PopoverArrowProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Arrow>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Arrow\n *\n * Visual pointer element for the popover.\n * Uses shared FloatingArrowSvg with overlay color tokens for fill and border.\n */\nconst PopoverArrow = React.forwardRef<HTMLDivElement, PopoverArrowProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Arrow\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(popoverArrowVariants(), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<FloatingArrowSvg\n\t\t\t\t\tfillClassName=\"fill-overlay-background\"\n\t\t\t\t\tborderClassName=\"fill-overlay-border\"\n\t\t\t\t/>\n\t\t\t</BasePopover.Arrow>\n\t\t);\n\t},\n);\nPopoverArrow.displayName = \"PopoverArrow\";\n\n// ============================================================================\n// Popover Title\n// ============================================================================\n\nexport interface PopoverTitleProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Title>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Title\n *\n * Title element for the popover content.\n */\nconst PopoverTitle = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Title\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\"typography-body-md-md font-semibold\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverTitle.displayName = \"PopoverTitle\";\n\n// ============================================================================\n// Popover Description\n// ============================================================================\n\nexport interface PopoverDescriptionProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof BasePopover.Description>,\n\t\t\"className\"\n\t> {\n\tclassName?: string;\n}\n\n/**\n * Popover Description\n *\n * Description element for the popover content.\n */\nconst PopoverDescription = React.forwardRef<\n\tHTMLParagraphElement,\n\tPopoverDescriptionProps\n>(({ className, ...props }, ref) => {\n\treturn (\n\t\t<BasePopover.Description\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"typography-body-sm-md text-overlay-text-muted mt-8\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nPopoverDescription.displayName = \"PopoverDescription\";\n\n// ============================================================================\n// Popover Close\n// ============================================================================\n\nexport interface PopoverCloseProps\n\textends Omit<React.ComponentProps<typeof BasePopover.Close>, \"className\"> {\n\tclassName?: string;\n}\n\n/**\n * Popover Close\n *\n * Close button for the popover.\n */\nconst PopoverClose = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(\n\t({ className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BasePopover.Close\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"absolute right-8 top-8 rounded-surface-ui-small p-4\",\n\t\t\t\t\t\"text-overlay-text-muted hover:text-overlay-text\",\n\t\t\t\t\t\"hover:bg-bg-section focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nPopoverClose.displayName = \"PopoverClose\";\n\n// ============================================================================\n// Simple Popover Component\n// ============================================================================\n\nexport interface PopoverProps {\n\t/** The content to show in the popover */\n\tchildren: React.ReactNode;\n\t/** The element that triggers the popover */\n\ttrigger: React.ReactNode;\n\t/** Title for the popover (optional) */\n\ttitle?: React.ReactNode;\n\t/** Side of the trigger to show the popover */\n\tside?: \"top\" | \"bottom\" | \"left\" | \"right\";\n\t/** Offset from the trigger */\n\tsideOffset?: number;\n\t/** Alignment along the side */\n\talign?: \"start\" | \"center\" | \"end\";\n\t/** Whether to show an arrow */\n\tshowArrow?: boolean;\n\t/** Whether to show a close button */\n\tshowClose?: boolean;\n\t/** Controlled open state */\n\topen?: boolean;\n\t/** Default open state */\n\tdefaultOpen?: boolean;\n\t/** Callback when open state changes */\n\tonOpenChange?: (open: boolean) => void;\n\t/** Additional className for the popup */\n\tclassName?: string;\n}\n\n/**\n * Popover\n *\n * A simple, pre-composed popover component for common use cases.\n * For more complex needs, use the compound components directly.\n *\n * @example\n * ```tsx\n * <Popover\n *   trigger={<Button>Click me</Button>}\n *   title=\"Popover Title\"\n * >\n *   <p>This is the popover content.</p>\n * </Popover>\n * ```\n */\nconst Popover = ({\n\tchildren,\n\ttrigger,\n\ttitle,\n\tside = \"bottom\",\n\tsideOffset = 8,\n\talign = \"center\",\n\tshowArrow = true,\n\tshowClose = false,\n\topen,\n\tdefaultOpen,\n\tonOpenChange,\n\tclassName,\n}: PopoverProps) => {\n\treturn (\n\t\t<PopoverRoot\n\t\t\topen={open}\n\t\t\tdefaultOpen={defaultOpen}\n\t\t\tonOpenChange={onOpenChange}\n\t\t>\n\t\t\t<PopoverTrigger>{trigger}</PopoverTrigger>\n\t\t\t<PopoverPortal>\n\t\t\t\t<PopoverPositioner side={side} sideOffset={sideOffset} align={align}>\n\t\t\t\t\t<PopoverPopup className={className}>\n\t\t\t\t\t\t{showArrow && <PopoverArrow />}\n\t\t\t\t\t\t{showClose && (\n\t\t\t\t\t\t\t<PopoverClose>\n\t\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t\twidth=\"12\"\n\t\t\t\t\t\t\t\t\theight=\"12\"\n\t\t\t\t\t\t\t\t\tviewBox=\"0 0 12 12\"\n\t\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\t\td=\"M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5\"\n\t\t\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\n\t\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t\t\t</PopoverClose>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{title && <PopoverTitle>{title}</PopoverTitle>}\n\t\t\t\t\t\t{title ? (\n\t\t\t\t\t\t\t<PopoverDescription>{children}</PopoverDescription>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tchildren\n\t\t\t\t\t\t)}\n\t\t\t\t\t</PopoverPopup>\n\t\t\t\t</PopoverPositioner>\n\t\t\t</PopoverPortal>\n\t\t</PopoverRoot>\n\t);\n};\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const PopoverParts = Object.assign(PopoverRoot, {\n\tRoot: PopoverRoot,\n\tTrigger: PopoverTrigger,\n\tPortal: PopoverPortal,\n\tBackdrop: PopoverBackdrop,\n\tPositioner: PopoverPositioner,\n\tPopup: PopoverPopup,\n\tArrow: PopoverArrow,\n\tTitle: PopoverTitle,\n\tDescription: PopoverDescription,\n\tClose: PopoverClose,\n});\n\nexport {\n\tPopover,\n\tPopoverRoot,\n\tPopoverTrigger,\n\tPopoverPortal,\n\tPopoverBackdrop,\n\tPopoverPositioner,\n\tPopoverPopup,\n\tPopoverArrow,\n\tPopoverTitle,\n\tPopoverDescription,\n\tPopoverClose,\n\tpopoverPopupVariants,\n\tpopoverArrowVariants,\n};\n"],"names":["popoverPopupVariants","tv","popoverArrowVariants","floatingArrowVariants","PopoverRoot","children","props","BasePopover.Root","PopoverTrigger","React","className","ref","jsx","BasePopover.Trigger","PopoverPortal","BasePopover.Portal","PopoverBackdrop","BasePopover.Backdrop","cn","PopoverPositioner","side","sideOffset","BasePopover.Positioner","PopoverPopup","variant","BasePopover.Popup","PopoverArrow","BasePopover.Arrow","FloatingArrowSvg","PopoverTitle","BasePopover.Title","PopoverDescription","BasePopover.Description","PopoverClose","BasePopover.Close","Popover","trigger","title","align","showArrow","showClose","open","defaultOpen","onOpenChange","jsxs","PopoverParts"],"mappings":"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"}

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>>;

package/dist/components/atoms/select/select.js

@@ -0,0 +1,192 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import * as n from "react";
+import { tv as s, cnBase as i } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
+import { formControlError as S, formControlSizes as h, formControlBase as y } from "../../../lib/form-control.js";
+import { SelectGroup as w } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/group/SelectGroup.js";
+import { SelectGroupLabel as x } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/group-label/SelectGroupLabel.js";
+import { SelectItem as k } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/item/SelectItem.js";
+import { SelectItemText as L } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/item-text/SelectItemText.js";
+import { SelectItemIndicator as N } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/item-indicator/SelectItemIndicator.js";
+import { SelectPortal as v } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/portal/SelectPortal.js";
+import { SelectPositioner as G } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/positioner/SelectPositioner.js";
+import { SelectPopup as R } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/popup/SelectPopup.js";
+import { SelectRoot as P } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/root/SelectRoot.js";
+import { SelectTrigger as j } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/trigger/SelectTrigger.js";
+import { SelectValue as C } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/value/SelectValue.js";
+import { SelectIcon as I } from "../../../node_modules/.bun/@base-ui-components_react@1.0.0-rc.0_6526322f93af6249/node_modules/@base-ui-components/react/esm/select/icon/SelectIcon.js";
+const T = s({
+  base: [
+    ...y,
+    // 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"
+  ],
+  variants: {
+    size: h,
+    error: S
+  },
+  defaultVariants: {
+    size: "default",
+    error: !1
+  }
+}), z = s({
+  base: [
+    // Layout - match trigger width using CSS custom property from Base UI
+    "flex flex-col gap-2 p-10",
+    "w-[var(--anchor-width)]",
+    // Background and border - uses surface ui radius for theming support
+    "bg-ui-control-background border border-solid border-ui-color-border-active rounded-surface-ui-medium",
+    // Focus ring shadow (ui-focus-state from Figma)
+    "ring-4 ring-ui-color-focus",
+    // 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"
+  ]
+}), O = s({
+  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"
+  ]
+}), V = ({ className: t }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: i("size-16 text-gray-500 shrink-0", t),
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M4 6L8 10L12 6",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), $ = ({ className: t }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: i("size-14 shrink-0", t),
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), B = ({
+  children: t,
+  ...r
+}) => /* @__PURE__ */ e(P, { ...r, children: t }), d = n.forwardRef(
+  ({ className: t, size: r, error: o, placeholder: a = "Select option...", ...g }, b) => /* @__PURE__ */ l(
+    j,
+    {
+      ref: b,
+      className: i(T({ size: r, error: o }), t),
+      ...g,
+      children: [
+        /* @__PURE__ */ e(C, { children: (c) => c || /* @__PURE__ */ e("span", { className: "text-text-muted", children: a }) }),
+        /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(V, {}) })
+      ]
+    }
+  )
+);
+d.displayName = "SelectTrigger";
+const p = n.forwardRef(
+  ({ className: t, children: r, ...o }, a) => /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(G, { side: "bottom", sideOffset: 4, align: "start", children: /* @__PURE__ */ e(
+    R,
+    {
+      ref: a,
+      className: i(z(), t),
+      ...o,
+      children: r
+    }
+  ) }) })
+);
+p.displayName = "SelectPopup";
+const m = n.forwardRef(
+  ({ className: t, children: r, ...o }, a) => /* @__PURE__ */ l(
+    k,
+    {
+      ref: a,
+      className: i(O(), t),
+      ...o,
+      children: [
+        /* @__PURE__ */ e(L, { children: r }),
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e($, {}) })
+      ]
+    }
+  )
+);
+m.displayName = "SelectOption";
+const u = n.forwardRef(
+  ({ className: t, children: r, ...o }, a) => /* @__PURE__ */ e(w, { ref: a, className: t, ...o, children: r })
+);
+u.displayName = "SelectGroup";
+const f = n.forwardRef(({ className: t, children: r, ...o }, a) => /* @__PURE__ */ e(
+  x,
+  {
+    ref: a,
+    className: i(
+      "px-12 py-6 typography-body-sm-sm font-medium text-text-muted uppercase tracking-wide",
+      t
+    ),
+    ...o,
+    children: r
+  }
+));
+f.displayName = "SelectGroupLabel";
+const _ = Object.assign(B, {
+  Trigger: d,
+  Popup: p,
+  Option: m,
+  Group: u,
+  GroupLabel: f
+});
+export {
+  _ as Select,
+  u as SelectGroup,
+  f as SelectGroupLabel,
+  m as SelectOption,
+  p as SelectPopup,
+  B as SelectRoot,
+  d as SelectTrigger,
+  O as selectOptionVariants,
+  z as selectPopupVariants,
+  T as selectTriggerVariants
+};
+//# sourceMappingURL=select.js.map

package/dist/components/atoms/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sources":["../../../../src/components/atoms/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select as BaseSelect } from \"@base-ui-components/react/select\";\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 */\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],\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 */\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-10\",\n\t\t\"w-[var(--anchor-width)]\",\n\t\t// Background and border - uses surface ui radius for theming support\n\t\t\"bg-ui-control-background border border-solid border-ui-color-border-active rounded-surface-ui-medium\",\n\t\t// Focus ring shadow (ui-focus-state from Figma)\n\t\t\"ring-4 ring-ui-color-focus\",\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],\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 * Chevron icon for the select trigger\n */\nconst SelectChevronIcon = ({ className }: { className?: string }) => (\n\t<svg\n\t\tclassName={cn(\"size-16 text-gray-500 shrink-0\", className)}\n\t\tviewBox=\"0 0 16 16\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\taria-hidden=\"true\"\n\t>\n\t\t<path\n\t\t\td=\"M4 6L8 10L12 6\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\n);\n\n/**\n * Checkmark icon for selected options\n */\nconst CheckIcon = ({ className }: { className?: string }) => (\n\t<svg\n\t\tclassName={cn(\"size-14 shrink-0\", className)}\n\t\tviewBox=\"0 0 14 14\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\taria-hidden=\"true\"\n\t>\n\t\t<path\n\t\t\td=\"M11.6666 3.5L5.24992 9.91667L2.33325 7\"\n\t\t\tstroke=\"currentColor\"\n\t\t\tstrokeWidth=\"1.5\"\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t/>\n\t</svg>\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}\n\nconst SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n\t(\n\t\t{ className, size, error, placeholder = \"Select option...\", ...props },\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<BaseSelect.Trigger\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(selectTriggerVariants({ size, error }), className)}\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>\n\t\t\t\t\t<SelectChevronIcon />\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 Portal & Popup\n// ============================================================================\n\nexport interface SelectPopupProps\n\textends Omit<React.ComponentProps<typeof BaseSelect.Popup>, \"className\"> {\n\tclassName?: string;\n}\n\nconst SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseSelect.Portal>\n\t\t\t\t<BaseSelect.Positioner side=\"bottom\" sideOffset={4} align=\"start\">\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// ============================================================================\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>\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</BaseSelect.ItemIndicator>\n\t\t\t</BaseSelect.Item>\n\t\t);\n\t},\n);\nSelectOption.displayName = \"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// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nexport const Select = Object.assign(SelectRoot, {\n\tTrigger: SelectTrigger,\n\tPopup: SelectPopup,\n\tOption: SelectOption,\n\tGroup: SelectGroup,\n\tGroupLabel: SelectGroupLabel,\n});\n\n// Also export individual components for flexibility\nexport {\n\tSelectRoot,\n\tSelectTrigger,\n\tSelectPopup,\n\tSelectOption,\n\tSelectGroup,\n\tSelectGroupLabel,\n\tselectTriggerVariants,\n\tselectPopupVariants,\n\tselectOptionVariants,\n};\n"],"names":["selectTriggerVariants","tv","formControlBase","formControlSizes","formControlError","selectPopupVariants","selectOptionVariants","SelectChevronIcon","className","jsx","cn","CheckIcon","SelectRoot","children","props","BaseSelect.Root","SelectTrigger","React","size","error","placeholder","ref","jsxs","BaseSelect.Trigger","BaseSelect.Value","value","BaseSelect.Icon","SelectPopup","BaseSelect.Portal","BaseSelect.Positioner","BaseSelect.Popup","SelectOption","BaseSelect.Item","BaseSelect.ItemText","BaseSelect.ItemIndicator","SelectGroup","BaseSelect.Group","SelectGroupLabel","BaseSelect.GroupLabel","Select"],"mappings":"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"}

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

@@ -0,0 +1,161 @@
+import { Tooltip as BaseTooltip } from '@base-ui-components/react/tooltip';
+import { VariantProps } from 'tailwind-variants';
+import * as React from "react";
+/**
+ * Tooltip popup variants
+ *
+ * Uses semantic tokens for themeable styling:
+ * - color.tooltip.bg - Dark background
+ * - color.tooltip.text - Light text
+ * - surface.tooltip.radius - Small border radius
+ * - spatial.component.tooltip.padding-x/y - Consistent padding
+ */
+declare const tooltipPopupVariants: 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>>;
+/**
+ * Tooltip arrow variants - uses shared floating arrow variants
+ */
+declare const tooltipArrowVariants: 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 TooltipProviderProps extends BaseTooltip.Provider.Props {
+    children: React.ReactNode;
+}
+/**
+ * Tooltip Provider
+ *
+ * Manages shared delays across multiple tooltips.
+ * Wrap your app or a section with this to enable tooltip delay grouping.
+ */
+declare const TooltipProvider: ({ children, ...props }: TooltipProviderProps) => import("react/jsx-runtime").JSX.Element;
+export interface TooltipRootProps extends BaseTooltip.Root.Props {
+    children: React.ReactNode;
+}
+/**
+ * Tooltip Root
+ *
+ * Groups all tooltip parts. Does not render an element.
+ */
+declare const TooltipRoot: ({ children, ...props }: TooltipRootProps) => import("react/jsx-runtime").JSX.Element;
+export interface TooltipTriggerProps extends React.ComponentProps<typeof BaseTooltip.Trigger> {
+    className?: string;
+}
+/**
+ * Tooltip Trigger
+ *
+ * The element that triggers the tooltip on hover/focus.
+ * Renders as the child element with tooltip behavior attached.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface TooltipPortalProps extends BaseTooltip.Portal.Props {
+    children: React.ReactNode;
+}
+/**
+ * Tooltip Portal
+ *
+ * Renders the tooltip popup in a portal outside the DOM hierarchy.
+ */
+declare const TooltipPortal: ({ children, ...props }: TooltipPortalProps) => import("react/jsx-runtime").JSX.Element;
+export interface TooltipPositionerProps extends Omit<React.ComponentProps<typeof BaseTooltip.Positioner>, "className"> {
+    className?: string;
+}
+/**
+ * Tooltip Positioner
+ *
+ * Positions the tooltip popup relative to the trigger.
+ */
+declare const TooltipPositioner: React.ForwardRefExoticComponent<Omit<TooltipPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipPopupProps extends Omit<React.ComponentProps<typeof BaseTooltip.Popup>, "className">, VariantProps<typeof tooltipPopupVariants> {
+    className?: string;
+}
+/**
+ * Tooltip Popup
+ *
+ * The tooltip content container with styled appearance.
+ */
+declare const TooltipPopup: React.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipArrowProps extends Omit<React.ComponentProps<typeof BaseTooltip.Arrow>, "className"> {
+    className?: string;
+}
+/**
+ * Tooltip Arrow
+ *
+ * Visual pointer element for the tooltip.
+ * Uses shared FloatingArrowSvg with tooltip-bg color token.
+ */
+declare const TooltipArrow: React.ForwardRefExoticComponent<Omit<TooltipArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipProps {
+    /** The content to show in the tooltip */
+    content: React.ReactNode;
+    /** The element that triggers the tooltip */
+    children: React.ReactNode;
+    /** Side of the trigger to show the tooltip */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Offset from the trigger */
+    sideOffset?: number;
+    /** Alignment along the side */
+    align?: "start" | "center" | "end";
+    /** Delay before showing the tooltip (ms) */
+    delay?: number;
+    /** Delay before hiding the tooltip (ms) */
+    closeDelay?: number;
+    /** Whether to show an arrow */
+    showArrow?: 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;
+}
+/**
+ * Tooltip
+ *
+ * A simple, pre-composed tooltip component for common use cases.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="Save your changes">
+ *   <Button>Save</Button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: ({ content, children, side, sideOffset, align, delay, closeDelay, showArrow, open, defaultOpen, onOpenChange, className, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TooltipParts: (({ children, ...props }: TooltipRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Provider: ({ children, ...props }: TooltipProviderProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ children, ...props }: TooltipRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: TooltipPortalProps) => import("react/jsx-runtime").JSX.Element;
+    Positioner: React.ForwardRefExoticComponent<Omit<TooltipPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<TooltipArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { Tooltip, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipPositioner, TooltipPopup, TooltipArrow, tooltipPopupVariants, tooltipArrowVariants, };