@nationaldesignstudio/react 0.0.19 → 0.1.0

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

@@ -53,8 +53,8 @@ export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement>, Va
  * Built on Base UI's Accordion primitive.
  *
  * Variants:
- * - dark: Dark theme styling (default)
- * - light: Light theme styling
+ * - light: Light theme styling (default)
+ * - dark: Dark theme styling
  *
  * @example
  * ```tsx

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

@@ -25,10 +25,24 @@ 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 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>>;
@@ -45,9 +59,18 @@ 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 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>>;

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

@@ -28,9 +28,9 @@ import * as React from "react";
  * - light: Light colors for use on dark backgrounds
  *
  * Sizes:
- * - lg: Large (48x48)
- * - default: Medium (40x40)
  * - sm: Small (32x32)
+ * - default: Medium (40x40)
+ * - lg: Large (48x48)
  *
  * Rounded:
  * - default: Standard border radius
@@ -49,9 +49,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -70,9 +70,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -91,9 +91,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -112,9 +112,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -133,9 +133,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -154,9 +154,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -175,9 +175,9 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
         light: string;
     };
     size: {
-        lg: string;
-        default: string;
         sm: string;
+        default: string;
+        lg: string;
     };
     rounded: {
         default: string;
@@ -186,6 +186,34 @@ declare const iconButtonVariants: import('tailwind-variants').TVReturnType<{
     };
 }>, 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>>;