@nationaldesignstudio/react 0.2.0 → 0.5.0

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

@@ -1,3 +1,4 @@
+import { useRender } from '@base-ui-components/react/use-render';
 import * as React from "react";
 declare const backgroundVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "absolute inset-0", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "absolute inset-0", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 /**
@@ -16,7 +17,7 @@ declare const backgroundVariants: import('tailwind-variants').TVReturnType<{} |
 export interface BackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const backgroundImageVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "absolute inset-0 size-full object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface BackgroundImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
+export interface BackgroundImageProps extends useRender.ComponentProps<"img">, Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "render"> {
     /**
      * URL for the background image
      */
@@ -25,28 +26,18 @@ export interface BackgroundImageProps extends Omit<React.ImgHTMLAttributes<HTMLI
      * Object position (default: "center")
      */
     position?: string;
-    /**
-     * Custom render prop for element composition.
-     * Accepts a React element or render function.
-     * @example
-     * ```tsx
-     * // Element pattern
-     * <BackgroundImage render={<img className="custom" />} src="/bg.jpg" />
-     *
-     * // Callback pattern
-     * <BackgroundImage render={(props) => <img {...props} />} src="/bg.jpg" />
-     * ```
-     */
-    render?: React.ReactElement | ((props: React.ImgHTMLAttributes<HTMLImageElement>) => React.ReactElement);
 }
 /**
  * Background image layer using an actual img element with object-cover.
  * Supports native lazy loading, srcset, and better accessibility.
  * Supports render prop for element composition.
  */
-declare const BackgroundImage: React.ForwardRefExoticComponent<BackgroundImageProps & React.RefAttributes<HTMLImageElement>>;
+declare function BackgroundImage(props: BackgroundImageProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare namespace BackgroundImage {
+    var displayName: string;
+}
 declare const backgroundVideoVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "absolute inset-0 size-full object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface BackgroundVideoProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children"> {
+export interface BackgroundVideoProps extends useRender.ComponentProps<"video">, Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children" | "render" | "src"> {
     /**
      * URL for the video source
      */
@@ -59,20 +50,15 @@ export interface BackgroundVideoProps extends Omit<React.VideoHTMLAttributes<HTM
      * Poster image URL shown before video loads
      */
     poster?: string;
-    /**
-     * Custom render prop for element composition.
-     * @example
-     * ```tsx
-     * <BackgroundVideo render={<video className="custom" />} src="/bg.mp4" />
-     * ```
-     */
-    render?: React.ReactElement | ((props: React.VideoHTMLAttributes<HTMLVideoElement>) => React.ReactElement);
 }
 /**
  * Background video layer using HTML5 video element.
  * Supports render prop for element composition.
  */
-declare const BackgroundVideo: React.ForwardRefExoticComponent<BackgroundVideoProps & React.RefAttributes<HTMLVideoElement>>;
+declare function BackgroundVideo(props: BackgroundVideoProps): import("react/jsx-runtime").JSX.Element;
+declare namespace BackgroundVideo {
+    var displayName: string;
+}
 declare const backgroundStreamVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "absolute inset-0 size-full border-0 scale-[1.5] object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "absolute inset-0 size-full border-0 scale-[1.5] object-cover", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface BackgroundStreamProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
     /**
@@ -149,8 +135,8 @@ export interface BackgroundGradientProps extends React.HTMLAttributes<HTMLDivEle
  */
 declare const BackgroundGradient: React.ForwardRefExoticComponent<BackgroundGradientProps & React.RefAttributes<HTMLDivElement>>;
 declare const BackgroundCompound: React.ForwardRefExoticComponent<BackgroundProps & React.RefAttributes<HTMLDivElement>> & {
-    Image: React.ForwardRefExoticComponent<BackgroundImageProps & React.RefAttributes<HTMLImageElement>>;
-    Video: React.ForwardRefExoticComponent<BackgroundVideoProps & React.RefAttributes<HTMLVideoElement>>;
+    Image: typeof BackgroundImage;
+    Video: typeof BackgroundVideo;
     Stream: React.ForwardRefExoticComponent<BackgroundStreamProps & React.RefAttributes<HTMLIFrameElement>>;
     Overlay: React.ForwardRefExoticComponent<BackgroundOverlayProps & React.RefAttributes<HTMLDivElement>>;
     Gradient: React.ForwardRefExoticComponent<BackgroundGradientProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -3,22 +3,21 @@ import { VariantProps } from 'tailwind-variants';
 import { ButtonTheme } from '../../../lib/theme';
 import * as React from "react";
 /**
- * Button component based on Figma BaseKit / Interface / Buttons
+ * Button component based on Figma Button component
  *
- * Variants:
- * - solid: Filled button
- * - outline: Outlined button
- * - ghost: No background/border, just text
- * - subtle: Light background with subtle styling
+ * Variants (matches Figma):
+ * - primary: Blue filled button for primary actions
+ * - default: Dark filled button for secondary prominence
+ * - secondary: Light gray filled button with subtle border
+ * - destructive: Red filled button for destructive actions
+ * - outline: Bordered button with transparent background
+ * - ghost: Transparent button with subtle hover
+ * - link: Text-only button with underline on hover
  *
- * Color Schemes:
- * - dark: Dark colors for use on light backgrounds (default)
- * - light: Light colors for use on dark backgrounds
- *
- * Sizes:
- * - lg: Large buttons
- * - default: Medium buttons
- * - sm: Small buttons
+ * Sizes (matches Figma):
+ * - sm: Small buttons (32px height)
+ * - default: Default buttons (36px height)
+ * - lg: Large buttons (40px height)
  *
  * For icon-only buttons, use the IconButton component instead.
  *
@@ -27,122 +26,115 @@ import * as React from "react";
  */
 declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     variant: {
-        solid: string;
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
         outline: string;
         ghost: string;
-        subtle: string;
+        link: string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-spacing-8 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 rounded-surface-button stroke-surface-button border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+}, undefined, "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        solid: string;
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
         outline: string;
         ghost: string;
-        subtle: string;
+        link: string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }, {
     variant: {
-        solid: string;
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
         outline: string;
         ghost: string;
-        subtle: string;
+        link: string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }>, {
     variant: {
-        solid: string;
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
         outline: string;
         ghost: string;
-        subtle: string;
+        link: string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     variant: {
-        solid: string;
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
         outline: string;
         ghost: string;
-        subtle: string;
+        link: string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
-}, undefined, "inline-flex items-center justify-center gap-spacing-8 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 rounded-surface-button stroke-surface-button border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+}, undefined, "inline-flex items-center justify-center gap-spatial-ui-button-gap-icon-text whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-50", import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
-        solid: string;
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
         outline: string;
         ghost: string;
-        subtle: string;
+        link: string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }, {
     variant: {
-        solid: string;
+        primary: string;
+        default: string;
+        secondary: string;
+        destructive: string;
         outline: string;
         ghost: string;
-        subtle: string;
+        link: string;
         themed: string;
     };
-    colorScheme: {
-        dark: string;
-        light: string;
-    };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
 }>, unknown, unknown, undefined>>;
 export type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;

package/dist/components/atoms/button/button.figma.d.ts

@@ -0,0 +1 @@
+export {};

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 };