@nationaldesignstudio/react 0.0.17 → 0.1.0

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

@@ -6,16 +6,14 @@ import * as React from "react";
  * Button component based on Figma BaseKit / Interface / Buttons
  *
  * Variants:
- * - primary: Primary filled button using semantic color tokens
- * - primaryOutline: Outlined primary button (for light backgrounds)
- * - secondary: Secondary button using semantic color tokens
- * - charcoal: Dark filled button (for light backgrounds) - legacy
- * - charcoalOutline: Dark outlined button (for light backgrounds)
- * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
- * - ivory: Light filled button (for dark backgrounds)
- * - ivoryOutline: Light outlined button (for dark backgrounds)
- * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
- * - gray: Gray filled button (for dark backgrounds)
+ * - solid: Filled button
+ * - outline: Outlined button
+ * - ghost: No background/border, just text
+ * - subtle: Light background with subtle styling
+ *
+ * Color Schemes:
+ * - dark: Dark colors for use on light backgrounds (default)
+ * - light: Light colors for use on dark backgrounds
  *
  * Sizes:
  * - lg: Large buttons
@@ -26,23 +24,19 @@ import * as React from "react";
  *
  * Theme Support:
  * Pass a `theme` prop to override default colors via CSS custom properties.
- * Surface tokens (--radius-surface-button, --surface-button-stroke) control
- * border radius and stroke width across all variants.
  */
 declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     variant: {
-        primary: string;
-        primaryOutline: string;
-        secondary: string;
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
-        gray: string;
+        solid: string;
+        outline: string;
+        ghost: string;
+        subtle: string;
         themed: string;
     };
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
     size: {
         lg: string;
         default: string;
@@ -50,18 +44,16 @@ declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     };
 }, 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<{
     variant: {
-        primary: string;
-        primaryOutline: string;
-        secondary: string;
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
-        gray: string;
+        solid: string;
+        outline: string;
+        ghost: string;
+        subtle: string;
         themed: string;
     };
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
     size: {
         lg: string;
         default: string;
@@ -69,18 +61,16 @@ declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     };
 }, {
     variant: {
-        primary: string;
-        primaryOutline: string;
-        secondary: string;
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
-        gray: string;
+        solid: string;
+        outline: string;
+        ghost: string;
+        subtle: string;
         themed: string;
     };
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
     size: {
         lg: string;
         default: string;
@@ -88,18 +78,16 @@ declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     };
 }>, {
     variant: {
-        primary: string;
-        primaryOutline: string;
-        secondary: string;
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
-        gray: string;
+        solid: string;
+        outline: string;
+        ghost: string;
+        subtle: string;
         themed: string;
     };
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
     size: {
         lg: string;
         default: string;
@@ -107,18 +95,16 @@ declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     variant: {
-        primary: string;
-        primaryOutline: string;
-        secondary: string;
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
-        gray: string;
+        solid: string;
+        outline: string;
+        ghost: string;
+        subtle: string;
         themed: string;
     };
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
     size: {
         lg: string;
         default: string;
@@ -126,18 +112,16 @@ declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     };
 }, 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<{
     variant: {
-        primary: string;
-        primaryOutline: string;
-        secondary: string;
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
-        gray: string;
+        solid: string;
+        outline: string;
+        ghost: string;
+        subtle: string;
         themed: string;
     };
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
     size: {
         lg: string;
         default: string;
@@ -145,18 +129,16 @@ declare const buttonVariants: import('tailwind-variants').TVReturnType<{
     };
 }, {
     variant: {
-        primary: string;
-        primaryOutline: string;
-        secondary: string;
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
-        gray: string;
+        solid: string;
+        outline: string;
+        ghost: string;
+        subtle: string;
         themed: string;
     };
+    colorScheme: {
+        dark: string;
+        light: string;
+    };
     size: {
         lg: string;
         default: string;

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

@@ -15,143 +15,205 @@ import * as React from "react";
  * <IconButton aria-label="Close menu">
  *   <CloseIcon />
  * </IconButton>
- *
- * // Correct usage with aria-labelledby
- * <IconButton aria-labelledby="close-label">
- *   <CloseIcon />
- * </IconButton>
- * <span id="close-label" className="sr-only">Close menu</span>
  * ```
  *
  * Variants:
- * - charcoal: Dark filled button (for light backgrounds)
- * - charcoalOutline: Dark outlined button (for light backgrounds)
- * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
- * - ghost: No background/border, just icon (for light backgrounds)
- * - ghostDark: No background/border, just icon (for dark backgrounds)
- * - ivory: Light filled button (for dark backgrounds)
- * - ivoryOutline: Light outlined button (for dark backgrounds)
- * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
+ * - 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
  *
  * Sizes:
- * - lg: Large (46x46)
- * - default: Medium (36x36)
- * - sm: Small (29x29)
+ * - sm: Small (32x32)
+ * - default: Medium (40x40)
+ * - lg: Large (48x48)
+ *
+ * Rounded:
+ * - default: Standard border radius
+ * - sm: Smaller border radius
+ * - full: Fully circular
  */
 declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
+        sm: string;
+        default: 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: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
+        sm: string;
+        default: string;
         lg: string;
+    };
+    rounded: {
         default: string;
         sm: string;
+        full: string;
     };
 }, {
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
+        sm: string;
+        default: string;
         lg: string;
+    };
+    rounded: {
         default: string;
         sm: string;
+        full: string;
     };
 }>, {
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
+        sm: string;
+        default: string;
         lg: string;
+    };
+    rounded: {
         default: string;
         sm: string;
+        full: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
+        sm: string;
+        default: 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: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
+        sm: string;
+        default: string;
         lg: string;
+    };
+    rounded: {
         default: string;
         sm: string;
+        full: string;
     };
 }, {
     variant: {
-        charcoal: string;
-        charcoalOutline: string;
-        charcoalOutlineQuiet: string;
+        solid: string;
+        outline: string;
         ghost: string;
-        ghostDark: string;
-        ivory: string;
-        ivoryOutline: string;
-        ivoryOutlineQuiet: string;
+        subtle: string;
+    };
+    colorScheme: {
+        dark: string;
+        light: string;
     };
     size: {
+        sm: string;
+        default: 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;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;