@nationaldesignstudio/react 0.2.0 → 0.3.0

package/src/components/atoms/button/icon-button.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
+import { useRender } from "@base-ui-components/react/use-render";
 import { tv, type VariantProps } from "tailwind-variants";
 
 /**
- * IconButton component based on Figma BaseKit / Interface / Icon Button
+ * IconButton component based on Figma Button component (icon-only variant)
  *
  * **IMPORTANT: Accessibility Requirement**
  * Icon-only buttons MUST have an accessible label. Provide one of:
@@ -21,254 +20,112 @@ import { tv, type VariantProps } from "tailwind-variants";
  * </IconButton>
  * ```
  *
- * Variants:
- * - solid: Filled button
- * - outline: Outlined button
- * - ghost: No background/border, just icon
- * - subtle: Subtle outlined button
- *
- * Color Schemes:
- * - dark: Dark colors for use on light backgrounds (default)
- * - light: Light colors for use on dark backgrounds
+ * Variants (matches Figma):
+ * - primary: Filled brand button (indigo background)
+ * - primary-outline: Outlined brand button (indigo border/text)
+ * - secondary: Filled neutral button (white background, for dark backgrounds)
+ * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)
+ * - ghost: Transparent button with subtle hover (for light backgrounds)
+ * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)
  *
  * Sizes:
- * - sm: Small (32x32)
- * - default: Medium (40x40)
- * - lg: Large (48x48)
+ * - sm: Small (28x28)
+ * - md: Medium (40x40) - default
+ * - lg: Large (56x56)
  *
  * Rounded:
- * - default: Standard border radius
- * - sm: Smaller border radius
+ * - default: Standard border radius (matches size)
  * - full: Fully circular
  */
 const iconButtonVariants = tv({
 	base: "inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 	variants: {
 		variant: {
-			solid: "",
-			outline: "border",
-			ghost: "",
-			subtle: "border",
-		},
-		colorScheme: {
-			dark: "",
-			light: "",
+			// Primary - filled brand button
+			primary:
+				"bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover hover:text-button-primary-text-hover border-transparent focus-visible:ring-button-primary-bg",
+			// Primary Outline - outlined brand button
+			"primary-outline":
+				"bg-button-primary-outline-bg text-button-primary-outline-text border border-button-primary-outline-border hover:bg-button-primary-outline-bg-hover hover:text-button-primary-outline-text-hover hover:border-button-primary-outline-border-hover focus-visible:ring-button-primary-outline-border",
+			// Secondary - filled neutral button (for dark backgrounds)
+			secondary:
+				"bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover hover:text-button-secondary-text-hover border-transparent focus-visible:ring-button-secondary-bg focus-visible:ring-offset-gray-1000",
+			// Secondary Outline - outlined neutral button (for dark backgrounds)
+			"secondary-outline":
+				"bg-button-secondary-outline-bg text-button-secondary-outline-text border border-button-secondary-outline-border hover:bg-button-secondary-outline-bg-hover hover:text-button-secondary-outline-text-hover hover:border-button-secondary-outline-border-hover focus-visible:ring-button-secondary-outline-border focus-visible:ring-offset-gray-1000",
+			// Ghost - transparent button (for light backgrounds)
+			ghost:
+				"bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover hover:text-button-ghost-text-hover border-transparent focus-visible:ring-gray-1000",
+			// Ghost Inverse - transparent button (for dark backgrounds)
+			"ghost-inverse":
+				"bg-button-ghost-inverse-bg text-button-ghost-inverse-text hover:bg-button-ghost-inverse-bg-hover hover:text-button-ghost-inverse-text-hover border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
 		},
 		size: {
-			sm: "size-32",
-			default: "size-40",
-			lg: "size-48",
+			sm: "size-28 rounded-4",
+			md: "size-40 rounded-6",
+			lg: "size-56 rounded-10",
 		},
 		rounded: {
-			default: "rounded-radius-12",
-			sm: "rounded-radius-10",
+			default: "",
 			full: "rounded-full",
 		},
 	},
-	compoundVariants: [
-		// Solid + Dark (for light backgrounds)
-		{
-			variant: "solid",
-			colorScheme: "dark",
-			class:
-				"bg-gray-1200 text-gray-100 hover:bg-gray-1100 active:bg-gray-1000 focus-visible:ring-gray-1000",
-		},
-		// Solid + Light (for dark backgrounds)
-		{
-			variant: "solid",
-			colorScheme: "light",
-			class:
-				"bg-gray-50 text-gray-1000 hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Outline + Dark (for light backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "dark",
-			class:
-				"border-alpha-black-30 text-gray-1000 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Outline + Light (for dark backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "light",
-			class:
-				"border-gray-50 text-gray-50 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Ghost + Dark (for light backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "dark",
-			class:
-				"text-gray-700 hover:text-gray-900 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Ghost + Light (for dark backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "light",
-			class:
-				"text-gray-300 hover:text-gray-100 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Subtle + Dark (for light backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "dark",
-			class:
-				"border-alpha-black-20 text-alpha-black-60 hover:border-alpha-black-30 hover:text-alpha-black-80 active:bg-alpha-black-5 focus-visible:ring-gray-1000",
-		},
-		// Subtle + Light (for dark backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "light",
-			class:
-				"border-alpha-white-20 text-alpha-white-60 hover:border-alpha-white-30 hover:text-alpha-white-80 active:bg-alpha-white-5 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-	],
 	defaultVariants: {
-		variant: "solid",
-		colorScheme: "dark",
-		size: "default",
+		variant: "primary",
+		size: "md",
 		rounded: "default",
 	},
 });
 
-export interface IconButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof iconButtonVariants> {
-	/**
-	 * Custom render prop for element composition.
-	 * Accepts a React element or render function.
-	 * @example
-	 * ```tsx
-	 * // Render as a link
-	 * <IconButton render={<a href="/contact" />} aria-label="Contact">
-	 *   <LinkIcon />
-	 * </IconButton>
-	 *
-	 * // Render with custom element
-	 * <IconButton render={(props) => <Link {...props} to="/home" />} aria-label="Home">
-	 *   <HomeIcon />
-	 * </IconButton>
-	 * ```
-	 */
-	render?:
-		| React.ReactElement
-		| ((
-				props: React.ButtonHTMLAttributes<HTMLButtonElement>,
-		  ) => React.ReactElement);
-	/**
-	 * @deprecated Use `render` prop instead for element composition.
-	 * @example
-	 * ```tsx
-	 * // Old (deprecated)
-	 * <IconButton asChild><a href="/link">...</a></IconButton>
-	 *
-	 * // New (recommended)
-	 * <IconButton render={<a href="/link" />}>...</IconButton>
-	 * ```
-	 */
-	asChild?: boolean;
+interface IconButtonState extends Record<string, unknown> {
+	variant:
+		| "primary"
+		| "primary-outline"
+		| "secondary"
+		| "secondary-outline"
+		| "ghost"
+		| "ghost-inverse";
+	size: "sm" | "md" | "lg";
+	rounded: "default" | "full";
 }
 
-const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-	(
-		{
-			className,
-			variant,
-			colorScheme,
-			size,
-			rounded,
-			render,
-			asChild,
-			...props
-		},
-		ref,
-	) => {
-		// Development warnings
-		React.useEffect(() => {
-			if (import.meta.env?.DEV) {
-				// Warn about missing accessible label
-				const hasAccessibleLabel =
-					props["aria-label"] || props["aria-labelledby"] || props.title;
-				if (!hasAccessibleLabel) {
-					console.warn(
-						"IconButton: Missing accessible label. Icon-only buttons must have an aria-label, aria-labelledby, or title attribute for screen reader users.",
-					);
-				}
-				// Warn about deprecated asChild prop
-				if (asChild !== undefined) {
-					console.warn(
-						'IconButton: The "asChild" prop is deprecated. Use the "render" prop instead for element composition.\n' +
-							'Example: <IconButton render={<a href="/link" />}>...</IconButton>',
-					);
-				}
-			}
-		}, [props["aria-label"], props["aria-labelledby"], props.title, asChild]);
-
-		// Resolve actual values for data attributes
-		const resolvedVariant = variant ?? "solid";
-		const resolvedColorScheme = colorScheme ?? "dark";
-		const resolvedSize = size ?? "default";
-		const resolvedRounded = rounded ?? "default";
-
-		const buttonClassName = iconButtonVariants({
-			variant,
-			colorScheme,
-			size,
-			rounded,
-			class: className,
-		});
+export interface IconButtonProps
+	extends useRender.ComponentProps<"button", IconButtonState>,
+		VariantProps<typeof iconButtonVariants> {}
 
-		const dataAttributes = {
-			"data-variant": resolvedVariant,
-			"data-color-scheme": resolvedColorScheme,
-			"data-size": resolvedSize,
-			"data-rounded": resolvedRounded,
-		};
+function IconButton(props: IconButtonProps) {
+	const {
+		className,
+		variant = "primary",
+		size = "md",
+		rounded = "default",
+		render,
+		...otherProps
+	} = props;
 
-		// Handle render prop (element or function)
-		if (render) {
-			if (typeof render === "function") {
-				return render({
-					ref,
-					className: buttonClassName,
-					...dataAttributes,
-					...props,
-				} as React.ButtonHTMLAttributes<HTMLButtonElement>);
-			}
-			// Clone the render element with merged props
-			return React.cloneElement(render, {
-				ref,
-				className: buttonClassName,
-				...dataAttributes,
-				...props,
-				...(render.props as Record<string, unknown>),
-			});
-		}
+	const state: IconButtonState = {
+		variant,
+		size,
+		rounded,
+	};
 
-		// Handle deprecated asChild prop
-		if (asChild) {
-			return (
-				<Slot
-					ref={ref}
-					className={buttonClassName}
-					{...dataAttributes}
-					{...props}
-				/>
-			);
-		}
+	const buttonClassName = iconButtonVariants({
+		variant,
+		size,
+		rounded,
+		class: className,
+	});
 
-		// Default: render as button
-		return (
-			<button
-				ref={ref}
-				type="button"
-				className={buttonClassName}
-				{...dataAttributes}
-				{...props}
-			/>
-		);
-	},
-);
-IconButton.displayName = "IconButton";
+	return useRender<IconButtonState, HTMLButtonElement>({
+		render,
+		state,
+		props: {
+			type: "button",
+			className: buttonClassName,
+			...otherProps,
+		},
+		defaultTagName: "button",
+	});
+}
 
 export { IconButton, iconButtonVariants };

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

@@ -0,0 +1,17 @@
+export { Input, type InputProps, inputVariants } from "./input";
+export {
+	InputGroup,
+	InputGroupAddon,
+	type InputGroupAddonProps,
+	InputGroupButton,
+	type InputGroupButtonProps,
+	InputGroupInput,
+	type InputGroupInputProps,
+	type InputGroupProps,
+	InputGroupText,
+	InputGroupTextarea,
+	type InputGroupTextareaProps,
+	type InputGroupTextProps,
+	inputGroupAddonVariants,
+	inputGroupVariants,
+} from "./input-group";