@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/components/atoms/input/input-group.tsx

@@ -0,0 +1,409 @@
+"use client";
+
+import type * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { formControlBase } from "@/lib/form-control";
+import { cn } from "@/lib/utils";
+import { Button, type ButtonProps } from "../button";
+
+// =============================================================================
+// InputGroup Variants
+// =============================================================================
+
+const inputGroupVariants = tv({
+	base: [
+		...formControlBase,
+		// InputGroup-specific: Container layout and styling
+		"group/input-group relative flex w-full items-center justify-start",
+		"shadow-xs",
+		// Override focus state to work with child focus detection
+		"focus-visible:border-ui-color-border focus-visible:ring-0",
+		// Override hover to work with InputGroup structure
+		"hover:bg-ui-control-background",
+		// Height and layout (overridden by size variants)
+		"min-w-0",
+		"has-[>textarea]:h-auto",
+		"has-[>[data-align=inline-start]]:[&>input]:pl-6",
+		"has-[>[data-align=inline-end]]:[&>input]:pr-6",
+		"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pt-spatial-ui-input-group-gap-block has-[>[data-align=block-start]]:[&>input]:pb-spatial-ui-input-group-padding-y-medium",
+		"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pb-spatial-ui-input-group-gap-block",
+		// Focus state detection on child input (overrides formControlBase focus)
+		"has-[[data-slot=input-group-control]:focus-visible]:border-ui-accent-base has-[[data-slot=input-group-control]:focus-visible]:ring-4 has-[[data-slot=input-group-control]:focus-visible]:ring-ui-color-focus",
+		// Error state detection on child elements
+		"has-[[data-slot][aria-invalid=true]]:border-ui-error-color has-[[data-slot][aria-invalid=true]]:ring-ui-error-color/20",
+		// Disabled state (overrides formControlBase disabled)
+		"data-[disabled=true]:bg-ui-control-background-disabled data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed",
+	],
+	variants: {
+		size: {
+			sm: "h-spatial-ui-input-group-height-small",
+			default: "h-spatial-ui-input-group-height-medium",
+			lg: "h-spatial-ui-input-group-height-large",
+		},
+	},
+	defaultVariants: {
+		size: "default",
+	},
+});
+
+// =============================================================================
+// InputGroupAddon Variants
+// =============================================================================
+
+const inputGroupAddonVariants = tv({
+	base: [
+		"flex items-center justify-center gap-6",
+		"typography-ui-text-sm text-text-muted",
+		"select-none cursor-text",
+		"[&>svg:not([class*='size-'])]:size-16",
+		"[&_button]:text-[unset] [&_button]:cursor-pointer",
+		"group-data-[disabled=true]/input-group:opacity-50",
+	],
+	variants: {
+		align: {
+			"inline-start": [
+				"order-first h-full",
+				"pl-spatial-ui-input-group-padding-x-medium",
+				"has-[>button]:ml-[-6px]",
+			],
+			"inline-end": [
+				"order-last h-full",
+				"pr-spatial-ui-input-group-padding-x-medium",
+				"has-[>button]:mr-[-6px]",
+			],
+			"block-start": [
+				"order-first h-auto w-full justify-start",
+				"px-spatial-ui-input-group-padding-x-medium pt-spatial-ui-input-group-padding-y-medium",
+				"[.border-b]:pb-spatial-ui-input-group-padding-y-medium",
+				// Use shared text style for block addons (12px, Regular weight per Figma)
+				"typography-ui-text-xs",
+			],
+			"block-end": [
+				"order-last h-auto w-full justify-start",
+				"px-spatial-ui-input-group-padding-x-medium pb-spatial-ui-input-group-padding-y-medium",
+				"[.border-t]:pt-spatial-ui-input-group-padding-y-medium",
+				// Use shared text style for block addons (12px, Regular weight per Figma)
+				"typography-ui-text-xs",
+			],
+		},
+	},
+	defaultVariants: {
+		align: "inline-start",
+	},
+});
+
+// =============================================================================
+// InputGroup Component
+// =============================================================================
+
+export interface InputGroupProps
+	extends React.FieldsetHTMLAttributes<HTMLFieldSetElement>,
+		VariantProps<typeof inputGroupVariants> {}
+
+/**
+ * InputGroup component for combining inputs with addons, buttons, and text.
+ *
+ * A container that groups an input with prefix/suffix addons, icons, or buttons.
+ * Supports inline (left/right) and block (top/bottom) addon positioning.
+ *
+ * Uses semantic UI tokens for theming support.
+ *
+ * @example
+ * ```tsx
+ * // With prefix icon
+ * <InputGroup>
+ *   <InputGroupAddon>
+ *     <SearchIcon />
+ *   </InputGroupAddon>
+ *   <InputGroupInput placeholder="Search..." />
+ * </InputGroup>
+ *
+ * // With suffix button
+ * <InputGroup>
+ *   <InputGroupInput placeholder="Enter email" />
+ *   <InputGroupAddon align="inline-end">
+ *     <InputGroupButton>Subscribe</InputGroupButton>
+ *   </InputGroupAddon>
+ * </InputGroup>
+ *
+ * // With text prefix
+ * <InputGroup>
+ *   <InputGroupAddon>
+ *     <InputGroupText>https://</InputGroupText>
+ *   </InputGroupAddon>
+ *   <InputGroupInput placeholder="example.com" />
+ * </InputGroup>
+ * ```
+ */
+function InputGroup({ className, size, disabled, ...props }: InputGroupProps) {
+	return (
+		<fieldset
+			data-slot="input-group"
+			data-disabled={disabled || undefined}
+			disabled={disabled}
+			className={cn(
+				"p-0 m-0 min-w-0",
+				inputGroupVariants({ size, class: className }),
+			)}
+			{...props}
+		/>
+	);
+}
+
+// =============================================================================
+// InputGroupAddon Component
+// =============================================================================
+
+export interface InputGroupAddonProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof inputGroupAddonVariants> {}
+
+/**
+ * InputGroupAddon component for positioning addons within an InputGroup.
+ *
+ * Can contain icons, text, or buttons. Clicking the addon focuses the input.
+ *
+ * @example
+ * ```tsx
+ * // Inline start (default - left side)
+ * <InputGroupAddon>
+ *   <SearchIcon />
+ * </InputGroupAddon>
+ *
+ * // Inline end (right side)
+ * <InputGroupAddon align="inline-end">
+ *   <InputGroupButton>Submit</InputGroupButton>
+ * </InputGroupAddon>
+ *
+ * // Block positions (top/bottom)
+ * <InputGroupAddon align="block-start">
+ *   <label>Email Address</label>
+ * </InputGroupAddon>
+ * ```
+ */
+function InputGroupAddon({
+	className,
+	align = "inline-start",
+	onClick,
+	onKeyDown,
+	...props
+}: InputGroupAddonProps) {
+	const focusInput = (element: HTMLElement) => {
+		element.parentElement?.querySelector("input")?.focus();
+	};
+
+	const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+		// Don't focus input if clicking a button inside the addon
+		if ((e.target as HTMLElement).closest("button")) {
+			onClick?.(e);
+			return;
+		}
+		// Focus the input when clicking the addon
+		focusInput(e.currentTarget);
+		onClick?.(e);
+	};
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+		// Focus input on Enter or Space (unless inside a button)
+		if (
+			(e.key === "Enter" || e.key === " ") &&
+			!(e.target as HTMLElement).closest("button")
+		) {
+			focusInput(e.currentTarget);
+		}
+		onKeyDown?.(e);
+	};
+
+	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: Click-to-focus is a convenience UX pattern; primary interaction is via the input itself
+		<div
+			data-slot="input-group-addon"
+			data-align={align}
+			className={cn(inputGroupAddonVariants({ align, class: className }))}
+			onClick={handleClick}
+			onKeyDown={handleKeyDown}
+			{...props}
+		/>
+	);
+}
+
+// =============================================================================
+// InputGroupButton Component
+// =============================================================================
+
+const inputGroupButtonVariants = tv({
+	base: [
+		"typography-ui-button-small shadow-none flex gap-6 items-center",
+		"focus-visible:ring-1 focus-visible:ring-offset-0 focus-visible:ring-ui-color-border",
+		"transition-opacity duration-150",
+	],
+	variants: {
+		size: {
+			xs: "!h-24 gap-4 px-8 rounded-surface-ui-small [&>svg:not([class*='size-'])]:size-16 has-[>svg]:px-6",
+			sm: "!h-28 px-10 gap-6 rounded-surface-ui-medium has-[>svg]:px-8",
+			"icon-xs":
+				"!size-24 rounded-surface-ui-small p-0 [&>svg:not([class*='size-'])]:size-16 has-[>svg]:p-0",
+			"icon-sm":
+				"!size-28 rounded-surface-ui-medium p-0 [&>svg:not([class*='size-'])]:size-16 has-[>svg]:p-0",
+		},
+	},
+	defaultVariants: {
+		size: "xs",
+	},
+});
+
+export interface InputGroupButtonProps
+	extends Omit<ButtonProps, "size">,
+		VariantProps<typeof inputGroupButtonVariants> {}
+
+/**
+ * InputGroupButton component for inline buttons within an InputGroup.
+ *
+ * A small button variant designed to fit inside input groups.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon align="inline-end">
+ *   <InputGroupButton>Submit</InputGroupButton>
+ * </InputGroupAddon>
+ *
+ * // Icon button
+ * <InputGroupAddon align="inline-end">
+ *   <InputGroupButton size="icon-xs">
+ *     <ClearIcon />
+ *   </InputGroupButton>
+ * </InputGroupAddon>
+ * ```
+ */
+function InputGroupButton({
+	className,
+	type = "button",
+	variant = "ghost",
+	size = "xs",
+	...props
+}: InputGroupButtonProps) {
+	return (
+		<Button
+			type={type}
+			data-size={size}
+			variant={variant}
+			className={cn(inputGroupButtonVariants({ size, class: className }))}
+			{...props}
+		/>
+	);
+}
+
+// =============================================================================
+// InputGroupText Component
+// =============================================================================
+
+export interface InputGroupTextProps
+	extends React.HTMLAttributes<HTMLSpanElement> {}
+
+/**
+ * InputGroupText component for static text within an InputGroup.
+ *
+ * Use for prefixes like "https://" or suffixes like ".com"
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon>
+ *   <InputGroupText>https://</InputGroupText>
+ * </InputGroupAddon>
+ * ```
+ */
+function InputGroupText({ className, ...props }: InputGroupTextProps) {
+	return (
+		<span
+			className={cn(
+				"flex items-center gap-6 typography-ui-text-sm text-text-muted",
+				"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-16",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+// =============================================================================
+// InputGroupInput Component
+// =============================================================================
+
+export interface InputGroupInputProps
+	extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+/**
+ * InputGroupInput component - the input element within an InputGroup.
+ *
+ * Styled to integrate seamlessly with the InputGroup container.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupInput placeholder="Enter text..." />
+ * </InputGroup>
+ * ```
+ */
+function InputGroupInput({ className, ...props }: InputGroupInputProps) {
+	return (
+		<input
+			data-slot="input-group-control"
+			className={cn(
+				"flex-1 min-w-0 h-full w-full",
+				"border-0 bg-transparent shadow-none outline-none",
+				"typography-ui-text-sm text-left placeholder:text-text-muted",
+				"px-spatial-ui-input-group-padding-x-medium",
+				"focus-visible:ring-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+// =============================================================================
+// InputGroupTextarea Component
+// =============================================================================
+
+export interface InputGroupTextareaProps
+	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+/**
+ * InputGroupTextarea component - a textarea element within an InputGroup.
+ *
+ * Styled to integrate seamlessly with the InputGroup container.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupTextarea placeholder="Enter long text..." rows={4} />
+ * </InputGroup>
+ * ```
+ */
+function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps) {
+	return (
+		<textarea
+			data-slot="input-group-control"
+			className={cn(
+				"flex-1 min-w-0 w-full resize-none",
+				"border-0 bg-transparent shadow-none outline-none",
+				"typography-ui-text-sm text-left placeholder:text-text-muted",
+				"px-spatial-ui-input-group-padding-x-medium py-spatial-ui-input-group-padding-y-medium",
+				"focus-visible:ring-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupText,
+	InputGroupInput,
+	InputGroupTextarea,
+	inputGroupVariants,
+	inputGroupAddonVariants,
+};

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

@@ -0,0 +1,228 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Input } from ".";
+
+const meta: Meta<typeof Input> = {
+	title: "Atoms/Input",
+	component: Input,
+} as Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Playground: Story = {
+	render: (args) => <Input {...args} />,
+};
+Playground.argTypes = {
+	size: {
+		control: {
+			type: "radio",
+		},
+		options: ["sm", "default", "lg"],
+	},
+	disabled: {
+		control: {
+			type: "boolean",
+		},
+	},
+	error: {
+		control: {
+			type: "boolean",
+		},
+	},
+	placeholder: {
+		control: {
+			type: "text",
+		},
+	},
+};
+Playground.args = {
+	size: "default",
+	disabled: false,
+	error: false,
+	placeholder: "Enter text...",
+};
+
+// =============================================================================
+// States
+// =============================================================================
+
+/**
+ * Default state - white background with subtle border
+ */
+export const Default = () => <Input placeholder="Enter text..." />;
+
+/**
+ * Filled state - shows how a filled input looks
+ */
+export const Filled = () => <Input defaultValue="Filled content" />;
+
+/**
+ * Error state - red border and text
+ */
+export const ErrorState = () => <Input error placeholder="Invalid input" />;
+
+/**
+ * Disabled state - grayed out and not interactive
+ */
+export const Disabled = () => <Input disabled placeholder="Disabled input" />;
+
+/**
+ * All states comparison
+ */
+export const AllStates = () => (
+	<div className="flex flex-col gap-16 max-w-[320px]">
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Default</p>
+			<Input placeholder="Enter text..." />
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Hover (hover the input)</p>
+			<Input placeholder="Hover me..." />
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Focus (click the input)</p>
+			<Input placeholder="Click to focus..." />
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Filled</p>
+			<Input defaultValue="Filled content" />
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Error</p>
+			<Input error placeholder="Invalid input" />
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Disabled</p>
+			<Input disabled placeholder="Disabled input" />
+		</div>
+	</div>
+);
+
+// =============================================================================
+// Sizes
+// =============================================================================
+
+/**
+ * Small size - compact input for tight layouts
+ */
+export const Small = () => <Input size="sm" placeholder="Small input" />;
+
+/**
+ * Default size - standard 48px height
+ */
+export const Medium = () => (
+	<Input size="default" placeholder="Default input" />
+);
+
+/**
+ * Large size - more prominent input
+ */
+export const Large = () => <Input size="lg" placeholder="Large input" />;
+
+/**
+ * All sizes comparison
+ */
+export const AllSizes = () => (
+	<div className="flex flex-col gap-16 max-w-[320px]">
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Small (36px)</p>
+			<Input size="sm" placeholder="Small input" />
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Default (48px)</p>
+			<Input size="default" placeholder="Default input" />
+		</div>
+		<div>
+			<p className="mb-8 text-12 text-text-muted">Large (56px)</p>
+			<Input size="lg" placeholder="Large input" />
+		</div>
+	</div>
+);
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Email input type
+ */
+export const EmailType = () => (
+	<Input type="email" placeholder="Enter your email" />
+);
+
+/**
+ * Password input type
+ */
+export const PasswordType = () => (
+	<Input type="password" placeholder="Enter your password" />
+);
+
+/**
+ * Number input type
+ */
+export const NumberType = () => (
+	<Input type="number" placeholder="Enter a number" />
+);
+
+/**
+ * Search input type
+ */
+export const SearchType = () => <Input type="search" placeholder="Search..." />;
+
+// =============================================================================
+// Examples
+// =============================================================================
+
+/**
+ * Form field example with label
+ */
+export const WithLabel = () => (
+	<div className="flex flex-col gap-8 max-w-[320px]">
+		<label
+			htmlFor="email-input"
+			className="text-14 font-medium text-text-primary"
+		>
+			Email Address
+		</label>
+		<Input id="email-input" type="email" placeholder="you@example.com" />
+	</div>
+);
+
+/**
+ * Form field with error message
+ */
+export const WithErrorMessage = () => (
+	<div className="flex flex-col gap-8 max-w-[320px]">
+		<label
+			htmlFor="email-error"
+			className="text-14 font-medium text-text-primary"
+		>
+			Email Address
+		</label>
+		<Input
+			id="email-error"
+			type="email"
+			error
+			placeholder="you@example.com"
+			defaultValue="invalid-email"
+		/>
+		<p className="text-12 text-ui-error-color">
+			Please enter a valid email address
+		</p>
+	</div>
+);
+
+/**
+ * Required field indicator
+ */
+export const RequiredField = () => (
+	<div className="flex flex-col gap-8 max-w-[320px]">
+		<label
+			htmlFor="required-input"
+			className="text-14 font-medium text-text-primary"
+		>
+			Full Name <span className="text-ui-error-color">*</span>
+		</label>
+		<Input id="required-input" required placeholder="John Doe" />
+	</div>
+);