@nationaldesignstudio/react 0.2.0 → 0.3.0

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

@@ -0,0 +1,320 @@
+"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
+		"bg-ui-control-background border border-solid border-ui-color-border-active rounded-radius-6",
+		// 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
+		"text-16 font-medium leading-14 text-ui-menu-item-text",
+		// Background - default
+		"bg-ui-menu-item-bg",
+		// Border radius
+		"rounded-radius-6",
+		// 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 extends BaseSelect.Root.Props {
+	children: React.ReactNode;
+}
+
+const SelectRoot = ({ children, ...props }: SelectProps) => {
+	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 text-12 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/dev-tools/dev-toolbar/dev-toolbar.stories.tsx

@@ -20,9 +20,7 @@ type Story = StoryObj<typeof meta>;
 const DemoContent = () => (
 	<div className="min-h-screen bg-gray-100 py-spacing-64">
 		<div className="w-full max-w-[90rem] mx-auto px-[var(--spatial-grid-small-margin)] md:px-[var(--spatial-grid-medium-margin)] lg:px-[var(--spatial-grid-large-margin)]">
-			<h1 className="typography-headline-large mb-spacing-16">
-				Dev Toolbar Demo
-			</h1>
+			<h1 className="typography-h2 mb-spacing-16">Dev Toolbar Demo</h1>
 			<p className="typography-body-medium text-gray-600 mb-spacing-8">
 				Click the bar at the bottom to expand, then toggle the Grid overlay.
 			</p>
@@ -43,9 +41,7 @@ const DemoContent = () => (
 						key={id}
 						className="col-span-4 md:col-span-4 lg:col-span-8 bg-white p-spacing-16 rounded-radius-12 shadow"
 					>
-						<h3 className="typography-headline-small mb-spacing-8">
-							Card {id}
-						</h3>
+						<h3 className="typography-h4 mb-spacing-8">Card {id}</h3>
 						<p className="typography-body-small text-gray-500">
 							Sample content to visualize how the grid overlay aligns with your
 							layout.