@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/components/atoms/select/select.tsx

@@ -0,0 +1,324 @@
+"use client";
+
+import { Select as BaseSelect } from "@base-ui-components/react/select";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import {
+	formControlBase,
+	formControlError,
+	formControlSizes,
+} from "@/lib/form-control";
+import { cn } from "@/lib/utils";
+
+/**
+ * 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
+ */
+const 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",
+	],
+	variants: {
+		size: formControlSizes,
+		error: formControlError,
+	},
+	defaultVariants: {
+		size: "default",
+		error: false,
+	},
+});
+
+/**
+ * Select popup/menu variants
+ */
+const selectPopupVariants = tv({
+	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",
+	],
+});
+
+/**
+ * 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
+ */
+const 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",
+	],
+});
+
+/**
+ * Chevron icon for the select trigger
+ */
+const SelectChevronIcon = ({ className }: { className?: string }) => (
+	<svg
+		className={cn("size-16 text-gray-500 shrink-0", className)}
+		viewBox="0 0 16 16"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M4 6L8 10L12 6"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);
+
+/**
+ * Checkmark icon for selected options
+ */
+const CheckIcon = ({ className }: { className?: string }) => (
+	<svg
+		className={cn("size-14 shrink-0", className)}
+		viewBox="0 0 14 14"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
+			stroke="currentColor"
+			strokeWidth="1.5"
+			strokeLinecap="round"
+			strokeLinejoin="round"
+		/>
+	</svg>
+);
+
+// ============================================================================
+// Select Root
+// ============================================================================
+
+export interface SelectProps<Value = string>
+	extends BaseSelect.Root.Props<Value> {
+	children: React.ReactNode;
+}
+
+const SelectRoot = <Value = string>({
+	children,
+	...props
+}: SelectProps<Value>) => {
+	return <BaseSelect.Root {...props}>{children}</BaseSelect.Root>;
+};
+
+// ============================================================================
+// Select Trigger
+// ============================================================================
+
+export interface SelectTriggerProps
+	extends Omit<React.ComponentProps<typeof BaseSelect.Trigger>, "className">,
+		VariantProps<typeof selectTriggerVariants> {
+	className?: string;
+	placeholder?: string;
+}
+
+const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
+	(
+		{ className, size, error, placeholder = "Select option...", ...props },
+		ref,
+	) => {
+		return (
+			<BaseSelect.Trigger
+				ref={ref}
+				className={cn(selectTriggerVariants({ size, error }), className)}
+				{...props}
+			>
+				<BaseSelect.Value>
+					{(value) =>
+						value ? (
+							value
+						) : (
+							<span className="text-text-muted">{placeholder}</span>
+						)
+					}
+				</BaseSelect.Value>
+				<BaseSelect.Icon>
+					<SelectChevronIcon />
+				</BaseSelect.Icon>
+			</BaseSelect.Trigger>
+		);
+	},
+);
+SelectTrigger.displayName = "SelectTrigger";
+
+// ============================================================================
+// Select Portal & Popup
+// ============================================================================
+
+export interface SelectPopupProps
+	extends Omit<React.ComponentProps<typeof BaseSelect.Popup>, "className"> {
+	className?: string;
+}
+
+const SelectPopup = React.forwardRef<HTMLDivElement, SelectPopupProps>(
+	({ className, children, ...props }, ref) => {
+		return (
+			<BaseSelect.Portal>
+				<BaseSelect.Positioner side="bottom" sideOffset={4} align="start">
+					<BaseSelect.Popup
+						ref={ref}
+						className={cn(selectPopupVariants(), className)}
+						{...props}
+					>
+						{children}
+					</BaseSelect.Popup>
+				</BaseSelect.Positioner>
+			</BaseSelect.Portal>
+		);
+	},
+);
+SelectPopup.displayName = "SelectPopup";
+
+// ============================================================================
+// Select Option (wraps Base UI's Select.Item)
+// ============================================================================
+
+export interface SelectOptionProps
+	extends Omit<React.ComponentProps<typeof BaseSelect.Item>, "className"> {
+	className?: string;
+}
+
+const SelectOption = React.forwardRef<HTMLDivElement, SelectOptionProps>(
+	({ className, children, ...props }, ref) => {
+		return (
+			<BaseSelect.Item
+				ref={ref}
+				className={cn(selectOptionVariants(), className)}
+				{...props}
+			>
+				<BaseSelect.ItemText>{children}</BaseSelect.ItemText>
+				<BaseSelect.ItemIndicator>
+					<CheckIcon />
+				</BaseSelect.ItemIndicator>
+			</BaseSelect.Item>
+		);
+	},
+);
+SelectOption.displayName = "SelectOption";
+
+// ============================================================================
+// Select Group
+// ============================================================================
+
+export interface SelectGroupProps
+	extends Omit<React.ComponentProps<typeof BaseSelect.Group>, "className"> {
+	className?: string;
+}
+
+const SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(
+	({ className, children, ...props }, ref) => {
+		return (
+			<BaseSelect.Group ref={ref} className={className} {...props}>
+				{children}
+			</BaseSelect.Group>
+		);
+	},
+);
+SelectGroup.displayName = "SelectGroup";
+
+// ============================================================================
+// Select Group Label
+// ============================================================================
+
+export interface SelectGroupLabelProps
+	extends Omit<
+		React.ComponentProps<typeof BaseSelect.GroupLabel>,
+		"className"
+	> {
+	className?: string;
+}
+
+const SelectGroupLabel = React.forwardRef<
+	HTMLDivElement,
+	SelectGroupLabelProps
+>(({ className, children, ...props }, ref) => {
+	return (
+		<BaseSelect.GroupLabel
+			ref={ref}
+			className={cn(
+				"px-12 py-6 typography-body-sm-sm font-medium text-text-muted uppercase tracking-wide",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</BaseSelect.GroupLabel>
+	);
+});
+SelectGroupLabel.displayName = "SelectGroupLabel";
+
+// ============================================================================
+// Compound Component Export
+// ============================================================================
+
+export const Select = Object.assign(SelectRoot, {
+	Trigger: SelectTrigger,
+	Popup: SelectPopup,
+	Option: SelectOption,
+	Group: SelectGroup,
+	GroupLabel: SelectGroupLabel,
+});
+
+// Also export individual components for flexibility
+export {
+	SelectRoot,
+	SelectTrigger,
+	SelectPopup,
+	SelectOption,
+	SelectGroup,
+	SelectGroupLabel,
+	selectTriggerVariants,
+	selectPopupVariants,
+	selectOptionVariants,
+};

package/src/components/atoms/tooltip/index.ts

@@ -0,0 +1,24 @@
+export type {
+	TooltipArrowProps,
+	TooltipPopupProps,
+	TooltipPortalProps,
+	TooltipPositionerProps,
+	TooltipProps,
+	TooltipProviderProps,
+	TooltipRootProps,
+	TooltipTriggerProps,
+} from "./tooltip";
+
+export {
+	Tooltip,
+	TooltipArrow,
+	TooltipParts,
+	TooltipPopup,
+	TooltipPortal,
+	TooltipPositioner,
+	TooltipProvider,
+	TooltipRoot,
+	TooltipTrigger,
+	tooltipArrowVariants,
+	tooltipPopupVariants,
+} from "./tooltip";

package/src/components/atoms/tooltip/tooltip.stories.tsx

@@ -0,0 +1,348 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../button";
+import {
+	Tooltip,
+	TooltipArrow,
+	TooltipParts,
+	TooltipPopup,
+	TooltipPortal,
+	TooltipPositioner,
+	TooltipProvider,
+	TooltipTrigger,
+} from ".";
+
+const meta: Meta<typeof Tooltip> = {
+	title: "Atoms/Tooltip",
+	component: Tooltip,
+	argTypes: {
+		side: {
+			control: { type: "select" },
+			options: ["top", "bottom", "left", "right"],
+		},
+		align: {
+			control: { type: "select" },
+			options: ["start", "center", "end"],
+		},
+		sideOffset: {
+			control: { type: "number" },
+		},
+		delay: {
+			control: { type: "number" },
+		},
+		closeDelay: {
+			control: { type: "number" },
+		},
+		showArrow: {
+			control: { type: "boolean" },
+		},
+	},
+	args: {
+		side: "top",
+		align: "center",
+		sideOffset: 8,
+		showArrow: true,
+	},
+	decorators: [
+		(Story) => (
+			<div className="flex min-h-[200px] items-center justify-center p-48">
+				<Story />
+			</div>
+		),
+	],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+// =============================================================================
+// Playground
+// =============================================================================
+
+export const Playground: Story = {
+	render: (args) => (
+		<Tooltip {...args} content="This is a tooltip">
+			<Button>Hover me</Button>
+		</Tooltip>
+	),
+};
+
+// =============================================================================
+// Basic Examples
+// =============================================================================
+
+/**
+ * Basic tooltip with default settings.
+ */
+export const Default: Story = {
+	render: () => (
+		<Tooltip content="Save your changes">
+			<Button>Save</Button>
+		</Tooltip>
+	),
+};
+
+/**
+ * Tooltip without arrow.
+ */
+export const NoArrow: Story = {
+	render: () => (
+		<Tooltip content="No arrow here" showArrow={false}>
+			<Button>Hover me</Button>
+		</Tooltip>
+	),
+};
+
+/**
+ * Tooltip with longer content.
+ */
+export const LongContent: Story = {
+	render: () => (
+		<Tooltip content="This is a longer tooltip that provides more detailed information about the element.">
+			<Button>Hover for details</Button>
+		</Tooltip>
+	),
+};
+
+// =============================================================================
+// Positioning
+// =============================================================================
+
+/**
+ * Tooltip positioned on all four sides.
+ */
+export const AllPositions: Story = {
+	render: () => (
+		<div className="flex flex-col items-center gap-48">
+			<Tooltip content="Top tooltip" side="top">
+				<Button variant="outline">Top</Button>
+			</Tooltip>
+			<div className="flex items-center gap-48">
+				<Tooltip content="Left tooltip" side="left">
+					<Button variant="outline">Left</Button>
+				</Tooltip>
+				<Tooltip content="Right tooltip" side="right">
+					<Button variant="outline">Right</Button>
+				</Tooltip>
+			</div>
+			<Tooltip content="Bottom tooltip" side="bottom">
+				<Button variant="outline">Bottom</Button>
+			</Tooltip>
+		</div>
+	),
+};
+
+export const Top: Story = {
+	render: () => (
+		<Tooltip content="Top position" side="top">
+			<Button>Top</Button>
+		</Tooltip>
+	),
+};
+
+export const Bottom: Story = {
+	render: () => (
+		<Tooltip content="Bottom position" side="bottom">
+			<Button>Bottom</Button>
+		</Tooltip>
+	),
+};
+
+export const Left: Story = {
+	render: () => (
+		<Tooltip content="Left position" side="left">
+			<Button>Left</Button>
+		</Tooltip>
+	),
+};
+
+export const Right: Story = {
+	render: () => (
+		<Tooltip content="Right position" side="right">
+			<Button>Right</Button>
+		</Tooltip>
+	),
+};
+
+// =============================================================================
+// Alignment
+// =============================================================================
+
+/**
+ * Tooltip alignment options.
+ */
+export const Alignment: Story = {
+	render: () => (
+		<div className="flex flex-col gap-24">
+			<div className="flex items-center gap-24">
+				<Tooltip content="Aligned to start" side="bottom" align="start">
+					<Button variant="secondary" className="w-144">
+						Start
+					</Button>
+				</Tooltip>
+				<Tooltip content="Aligned to center" side="bottom" align="center">
+					<Button variant="secondary" className="w-144">
+						Center
+					</Button>
+				</Tooltip>
+				<Tooltip content="Aligned to end" side="bottom" align="end">
+					<Button variant="secondary" className="w-144">
+						End
+					</Button>
+				</Tooltip>
+			</div>
+		</div>
+	),
+};
+
+// =============================================================================
+// Delays
+// =============================================================================
+
+/**
+ * Tooltip with custom open delay.
+ */
+export const CustomDelay: Story = {
+	render: () => (
+		<Tooltip content="Appears after 1 second" delay={1000}>
+			<Button>1s delay</Button>
+		</Tooltip>
+	),
+};
+
+/**
+ * Tooltip with close delay.
+ */
+export const CloseDelay: Story = {
+	render: () => (
+		<Tooltip content="Stays visible for 500ms" closeDelay={500}>
+			<Button>Close delay</Button>
+		</Tooltip>
+	),
+};
+
+// =============================================================================
+// With Provider (Shared Delays)
+// =============================================================================
+
+/**
+ * Multiple tooltips with shared delay using TooltipProvider.
+ * After opening one tooltip, others open instantly.
+ */
+export const WithProvider: Story = {
+	render: () => (
+		<TooltipProvider delay={300} closeDelay={0}>
+			<div className="flex items-center gap-16">
+				<Tooltip content="First tooltip">
+					<Button variant="outline">First</Button>
+				</Tooltip>
+				<Tooltip content="Second tooltip">
+					<Button variant="outline">Second</Button>
+				</Tooltip>
+				<Tooltip content="Third tooltip">
+					<Button variant="outline">Third</Button>
+				</Tooltip>
+			</div>
+		</TooltipProvider>
+	),
+};
+
+// =============================================================================
+// Compound Component API
+// =============================================================================
+
+/**
+ * Using the compound component API for full control.
+ */
+export const CompoundAPI: Story = {
+	render: () => (
+		<TooltipParts>
+			<TooltipTrigger>
+				<Button variant="primary">Custom Tooltip</Button>
+			</TooltipTrigger>
+			<TooltipPortal>
+				<TooltipPositioner side="bottom" sideOffset={12}>
+					<TooltipPopup>
+						<TooltipArrow />
+						Built with compound components
+					</TooltipPopup>
+				</TooltipPositioner>
+			</TooltipPortal>
+		</TooltipParts>
+	),
+};
+
+// =============================================================================
+// On Different Elements
+// =============================================================================
+
+/**
+ * Tooltip on various trigger elements.
+ */
+export const OnDifferentElements: Story = {
+	render: () => (
+		<div className="flex items-center gap-24">
+			<Tooltip content="Button tooltip">
+				<Button>Button</Button>
+			</Tooltip>
+
+			<Tooltip content="Icon tooltip">
+				<button
+					type="button"
+					className="flex size-36 items-center justify-center rounded-surface-ui-small bg-bg-section text-text-primary hover:bg-bg-section-secondary"
+				>
+					<svg
+						className="size-20"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+					<span className="sr-only">Info</span>
+				</button>
+			</Tooltip>
+
+			<Tooltip content="Text tooltip">
+				<span className="cursor-help border-b border-dashed border-fg-muted text-text-secondary">
+					Hover this text
+				</span>
+			</Tooltip>
+		</div>
+	),
+};
+
+// =============================================================================
+// Controlled
+// =============================================================================
+
+/**
+ * Controlled tooltip with external state management.
+ */
+export const Controlled: Story = {
+	render: function ControlledStory() {
+		const [open, setOpen] = React.useState(false);
+
+		return (
+			<div className="flex flex-col items-center gap-16">
+				<Tooltip
+					content="Controlled tooltip"
+					open={open}
+					onOpenChange={setOpen}
+				>
+					<Button>Hover or click button below</Button>
+				</Tooltip>
+				<Button variant="outline" onClick={() => setOpen(!open)}>
+					{open ? "Close tooltip" : "Open tooltip"}
+				</Button>
+			</div>
+		);
+	},
+};
+
+import * as React from "react";