@nationaldesignstudio/react 0.1.0 → 0.3.0

package/dist/components/atoms/button/icon-button.d.ts

@@ -1,7 +1,7 @@
+import { useRender } from '@base-ui-components/react/use-render';
 import { VariantProps } from 'tailwind-variants';
-import * as React from "react";
 /**
- * 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:
@@ -17,204 +17,156 @@ import * as React from "react";
  * </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
  */
 declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
-    };
-    colorScheme: {
-        dark: string;
-        light: string;
+        "ghost-inverse": string;
     };
     size: {
         sm: string;
-        default: string;
+        md: string;
         lg: string;
     };
     rounded: {
         default: string;
-        sm: string;
         full: string;
     };
 }, undefined, "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", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
-    };
-    colorScheme: {
-        dark: string;
-        light: string;
+        "ghost-inverse": string;
     };
     size: {
         sm: string;
-        default: string;
+        md: string;
         lg: string;
     };
     rounded: {
         default: string;
-        sm: string;
         full: string;
     };
 }, {
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
-    };
-    colorScheme: {
-        dark: string;
-        light: string;
+        "ghost-inverse": string;
     };
     size: {
         sm: string;
-        default: string;
+        md: string;
         lg: string;
     };
     rounded: {
         default: string;
-        sm: string;
         full: string;
     };
 }>, {
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
-    };
-    colorScheme: {
-        dark: string;
-        light: string;
+        "ghost-inverse": string;
     };
     size: {
         sm: string;
-        default: string;
+        md: string;
         lg: string;
     };
     rounded: {
         default: string;
-        sm: string;
         full: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
-    };
-    colorScheme: {
-        dark: string;
-        light: string;
+        "ghost-inverse": string;
     };
     size: {
         sm: string;
-        default: string;
+        md: string;
         lg: string;
     };
     rounded: {
         default: string;
-        sm: string;
         full: string;
     };
 }, undefined, "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", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
-    };
-    colorScheme: {
-        dark: string;
-        light: string;
+        "ghost-inverse": string;
     };
     size: {
         sm: string;
-        default: string;
+        md: string;
         lg: string;
     };
     rounded: {
         default: string;
-        sm: string;
         full: string;
     };
 }, {
     variant: {
-        solid: string;
-        outline: string;
+        primary: string;
+        "primary-outline": string;
+        secondary: string;
+        "secondary-outline": string;
         ghost: string;
-        subtle: string;
-    };
-    colorScheme: {
-        dark: string;
-        light: string;
+        "ghost-inverse": string;
     };
     size: {
         sm: string;
-        default: string;
+        md: string;
         lg: string;
     };
     rounded: {
         default: string;
-        sm: string;
         full: string;
     };
 }>, unknown, unknown, undefined>>;
-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";
+}
+export interface IconButtonProps extends useRender.ComponentProps<"button", IconButtonState>, VariantProps<typeof iconButtonVariants> {
 }
-declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare function IconButton(props: IconButtonProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
 export { IconButton, iconButtonVariants };

package/dist/components/atoms/input/input-group.d.ts

@@ -0,0 +1,278 @@
+import { VariantProps } from 'tailwind-variants';
+import { ButtonProps } from '../button';
+import type * as React from "react";
+declare const inputGroupVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare const inputGroupAddonVariants: import('tailwind-variants').TVReturnType<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, {
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}>, {
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, {
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}>, unknown, unknown, undefined>>;
+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>
+ * ```
+ */
+declare function InputGroup({ className, size, disabled, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
+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>
+ * ```
+ */
+declare function InputGroupAddon({ className, align, onClick, onKeyDown, ...props }: InputGroupAddonProps): import("react/jsx-runtime").JSX.Element;
+declare const inputGroupButtonVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}>, unknown, unknown, undefined>>;
+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>
+ * ```
+ */
+declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): import("react/jsx-runtime").JSX.Element;
+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>
+ * ```
+ */
+declare function InputGroupText({ className, ...props }: InputGroupTextProps): import("react/jsx-runtime").JSX.Element;
+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>
+ * ```
+ */
+declare function InputGroupInput({ className, ...props }: InputGroupInputProps): import("react/jsx-runtime").JSX.Element;
+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>
+ * ```
+ */
+declare function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): import("react/jsx-runtime").JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, inputGroupVariants, inputGroupAddonVariants, };

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

@@ -0,0 +1,121 @@
+import { VariantProps } from 'tailwind-variants';
+import * as React from "react";
+/**
+ * Input variants for styling based on Figma BaseKit / Interface / Input
+ *
+ * States (handled via CSS pseudo-classes and props):
+ * - Default: White background, subtle border
+ * - Hover: Light gray background (via :hover)
+ * - Focus: Accent border with focus ring (via :focus-visible)
+ * - Error: Error border color (via error prop)
+ * - Disabled: Disabled background (via :disabled)
+ *
+ * Sizes:
+ * - sm: Smaller height and padding
+ * - default: Standard 48px height
+ * - lg: Larger height and padding
+ */
+declare const inputVariants: 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";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, 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";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, {
+    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";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}>, {
+    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";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, 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";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, 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";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, {
+    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";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}>, unknown, unknown, undefined>>;
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    /**
+     * Whether the input is in an error state
+     */
+    error?: boolean;
+}
+/**
+ * Input component based on Figma BaseKit / Interface / Input
+ *
+ * A styled text input with support for various states:
+ * - Default, hover, focus, error, and disabled states
+ * - Three size variants: sm, default, lg
+ *
+ * Uses semantic UI tokens for theming support.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Input placeholder="Enter your email" />
+ *
+ * // With error state
+ * <Input error placeholder="Invalid input" />
+ *
+ * // Different sizes
+ * <Input size="sm" placeholder="Small" />
+ * <Input size="lg" placeholder="Large" />
+ *
+ * // Disabled
+ * <Input disabled placeholder="Disabled input" />
+ * ```
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input, inputVariants };