@nationaldesignstudio/react 0.1.0 → 0.3.0

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

@@ -0,0 +1,131 @@
+import { Select as BaseSelect } from '@base-ui-components/react/select';
+import { VariantProps } from 'tailwind-variants';
+import * as React from "react";
+/**
+ * Select trigger variants based on Figma BaseKit / Interface / Dropdown
+ *
+ * States:
+ * - Default: White background, subtle border
+ * - Hover: Light gray background
+ * - Focus/Open: Accent border with focus ring
+ * - Selected: Has a value selected (darker text)
+ * - Disabled: Reduced opacity, not interactive
+ */
+declare const selectTriggerVariants: 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: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly 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: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly 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: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly 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: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly 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: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly 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: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly 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: {
+        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
+        readonly false: "";
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Select popup/menu variants
+ */
+declare const selectPopupVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * Select option/item variants based on Figma Menu Items
+ *
+ * States:
+ * - Default: White background
+ * - Hover/Highlighted: Light indigo tint background
+ * - Selected: Stronger indigo tint with blue text and checkmark
+ * - Disabled: Reduced opacity
+ */
+declare const selectOptionVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface SelectProps extends BaseSelect.Root.Props {
+    children: React.ReactNode;
+}
+declare const SelectRoot: ({ children, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export interface SelectTriggerProps extends Omit<React.ComponentProps<typeof BaseSelect.Trigger>, "className">, VariantProps<typeof selectTriggerVariants> {
+    className?: string;
+    placeholder?: string;
+}
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface SelectPopupProps extends Omit<React.ComponentProps<typeof BaseSelect.Popup>, "className"> {
+    className?: string;
+}
+declare const SelectPopup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectOptionProps extends Omit<React.ComponentProps<typeof BaseSelect.Item>, "className"> {
+    className?: string;
+}
+declare const SelectOption: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectGroupProps extends Omit<React.ComponentProps<typeof BaseSelect.Group>, "className"> {
+    className?: string;
+}
+declare const SelectGroup: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SelectGroupLabelProps extends Omit<React.ComponentProps<typeof BaseSelect.GroupLabel>, "className"> {
+    className?: string;
+}
+declare const SelectGroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Select: (({ children, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element) & {
+    Trigger: React.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<SelectPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Option: React.ForwardRefExoticComponent<Omit<SelectOptionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Group: React.ForwardRefExoticComponent<Omit<SelectGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    GroupLabel: React.ForwardRefExoticComponent<Omit<SelectGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { SelectRoot, SelectTrigger, SelectPopup, SelectOption, SelectGroup, SelectGroupLabel, selectTriggerVariants, selectPopupVariants, selectOptionVariants, };

package/dist/components/organisms/card/card.d.ts

@@ -191,14 +191,14 @@ export interface CardContentProps extends React.HTMLAttributes<HTMLDivElement>,
  * ```
  */
 declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
-declare const cardEyebrowVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-caption-large text-text-muted", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-caption-large text-text-muted", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+declare const cardEyebrowVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-overline text-text-muted uppercase tracking-wider", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-overline text-text-muted uppercase tracking-wider", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface CardEyebrowProps extends React.HTMLAttributes<HTMLParagraphElement> {
 }
 /**
  * Optional eyebrow text above the card title.
  */
 declare const CardEyebrow: React.ForwardRefExoticComponent<CardEyebrowProps & React.RefAttributes<HTMLParagraphElement>>;
-declare const cardTitleVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-subheading-small text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-subheading-small text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+declare const cardTitleVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "typography-h5 text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "typography-h5 text-text-primary", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 export interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     /**
      * The heading level to render (h1-h6). Defaults to h3.

package/dist/components/sections/banner/banner.d.ts

@@ -14,37 +14,37 @@ import * as React from "react";
  * Must be placed inside a `grid-container`. Uses `col-full` to span all columns.
  */
 declare const bannerVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }>, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -84,9 +84,9 @@ export interface BannerProps extends React.HTMLAttributes<HTMLElement>, VariantP
  *   />
  * </div>
  *
- * // Dark variant
+ * // Dark colorScheme
  * <Banner
- *   variant="dark"
+ *   colorScheme="dark"
  *   heading="Still Have Questions?"
  *   description="Contact us at support@example.com"
  *   action={<Button variant="secondary">Email Us</Button>}

package/dist/components/sections/faq-section/faq-section.d.ts

@@ -35,7 +35,7 @@ export interface FaqSectionProps extends Omit<React.HTMLAttributes<HTMLElement>,
  * </FaqSection>
  *
  * // With custom title
- * <FaqSection title="Common Questions" variant="light">
+ * <FaqSection title="Common Questions" colorScheme="light">
  *   ...
  * </FaqSection>
  * ```

package/dist/components/sections/hero/hero.d.ts

@@ -2,19 +2,7 @@ import { VariantProps } from 'tailwind-variants';
 import { ComponentTheme } from '../../../lib/theme';
 import * as React from "react";
 export { Background as HeroBackground, BackgroundGradient as HeroGradient, type BackgroundGradientProps as HeroGradientProps, BackgroundImage as HeroBackgroundImage, type BackgroundImageProps as HeroBackgroundImageProps, BackgroundOverlay as HeroOverlay, type BackgroundOverlayProps as HeroOverlayProps, BackgroundStream as HeroBackgroundStream, type BackgroundStreamProps as HeroBackgroundStreamProps, BackgroundVideo as HeroBackgroundVideo, type BackgroundVideoProps as HeroBackgroundVideoProps, } from '../../atoms/background';
-/**
- * Hero variants based on Figma BaseKit / Heros
- *
- * Slots:
- * - root: The outer container
- * - top: Full-width slot at top for banners/nav (no padding)
- * - content: Padded content area with alignment
- *
- * Variants:
- * - A1: Content aligned at bottom (default)
- * - A2: Content aligned at top
- * - A3: Content centered
- */
+declare const DEFAULT_TITLE_TYPOGRAPHY = "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192 font-medium";
 declare const heroVariants: import('tailwind-variants').TVReturnType<{
     variant: {
         A1: {
@@ -30,10 +18,26 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     top: string;
     content: string[];
+    title: string;
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
         A1: {
@@ -49,6 +53,21 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     variant: {
         A1: {
@@ -64,6 +83,21 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }>, {
     variant: {
         A1: {
@@ -79,10 +113,26 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     top: string;
     content: string[];
+    title: string;
 }, import('tailwind-variants').TVReturnType<{
     variant: {
         A1: {
@@ -98,10 +148,26 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     root: string;
     top: string;
     content: string[];
+    title: string;
 }, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
     variant: {
         A1: {
@@ -117,6 +183,21 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }, {
     variant: {
         A1: {
@@ -132,6 +213,21 @@ declare const heroVariants: import('tailwind-variants').TVReturnType<{
             content: string[];
         };
     };
+    colorScheme: {
+        dark: {
+            root: string;
+            title: string;
+        };
+        light: {
+            root: string;
+            title: string;
+        };
+    };
+    hasBackground: {
+        true: {
+            root: string;
+        };
+    };
 }>, unknown, unknown, undefined>>;
 declare const heroHeaderVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "relative z-10 w-full", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "relative z-10 w-full", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
 declare const heroContentVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
@@ -161,6 +257,12 @@ export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, "titl
      * Default: "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192"
      */
     titleClassName?: string;
+    /**
+     * Color scheme for text content.
+     * - dark: Dark text for use on light backgrounds (default)
+     * - light: Light text for use on dark backgrounds
+     */
+    colorScheme?: "dark" | "light";
     /**
      * Content for the top slot (full-width, no padding).
      * Use for USGovBanner, Navigation, etc.
@@ -191,11 +293,6 @@ export interface HeroProps extends Omit<React.HTMLAttributes<HTMLElement>, "titl
      */
     theme?: ComponentTheme;
 }
-/**
- * Default responsive typography for hero title using primitive tokens
- * Mobile: 64px, Tablet: 128px, Desktop: 192px
- */
-declare const DEFAULT_TITLE_TYPOGRAPHY = "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192 font-medium";
 /**
  * Hero component for page headers with large display typography.
  *

package/dist/components/sections/prose/prose.d.ts

@@ -29,9 +29,9 @@ export interface ProseSectionProps extends React.HTMLAttributes<HTMLElement> {
  * A section within Prose content, containing a heading and body text.
  *
  * Responsive typography:
- * - h2: Uses typography-headline-medium (42px mobile → 56px tablet → 72px desktop)
- * - h3: Uses typography-headline-small (32px mobile → 42px tablet → 56px desktop)
- * - Body: Uses typography-body-medium (16px mobile/tablet → 18px desktop)
+ * - h2: Uses typography-h3
+ * - h3: Uses typography-h4
+ * - Body: Uses typography-body-medium
  */
 declare const ProseSection: React.ForwardRefExoticComponent<ProseSectionProps & React.RefAttributes<HTMLElement>>;
 export { Prose, ProseSection };

package/dist/components/sections/river/river.d.ts

@@ -86,7 +86,7 @@ export interface RiverProps extends React.HTMLAttributes<HTMLElement>, VariantPr
  *     headline="Feature Headline"
  *     body="Description of the feature..."
  *     primaryAction={<Button>Primary</Button>}
- *     secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+ *     secondaryAction={<Button variant="outline">Secondary</Button>}
  *     media={<img src="..." alt="Feature" />}
  *   />
  * </div>

package/dist/components/sections/tout/tout.d.ts

@@ -5,7 +5,7 @@ import * as React from "react";
  * Tout variants for background and content styling
  */
 declare const toutVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -14,7 +14,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -23,7 +23,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -32,7 +32,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }>, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -41,7 +41,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -50,7 +50,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -59,7 +59,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
         center: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         light: string;
         dark: string;
     };
@@ -74,7 +74,7 @@ declare const toutVariants: import('tailwind-variants').TVReturnType<{
  * A full-bleed section with a background image and overlaid content.
  * Content can be positioned on the left side or centered.
  *
- * Variants:
+ * Color schemes:
  * - light: Light text styling (default)
  * - dark: Dark text styling
  *
@@ -137,7 +137,7 @@ export interface ToutProps extends React.HTMLAttributes<HTMLElement>, VariantPro
  *   headline="Feature Headline"
  *   body="Description of the feature..."
  *   primaryAction={<Button>Primary</Button>}
- *   secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+ *   secondaryAction={<Button variant="outline" colorScheme="light">Secondary</Button>}
  *   backgroundMedia={
  *     <img
  *       src="/background.jpg"

package/dist/components/sections/two-column-section/two-column-section.d.ts

@@ -10,80 +10,66 @@ import * as React from "react";
  * Uses the 24-column grid system.
  */
 declare const twoColumnSectionVariants: import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }>, {
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }, {
-    variant: {
+    colorScheme: {
         dark: string;
         light: string;
     };
     layout: {
-        /** Default 24-column grid with asymmetric split (title: 9, content: 15) */
         asymmetric: string;
-        /** Equal 2-column layout at md+ breakpoints */
         equal: string;
     };
 }>, unknown, unknown, undefined>>;

package/dist/index.d.ts

@@ -4,10 +4,14 @@ export type { BackgroundGradientProps, BackgroundImageProps, BackgroundOverlayPr
 export { Background, BackgroundGradient, BackgroundImage, BackgroundOverlay, BackgroundStream, BackgroundVideo, backgroundGradientVariants, backgroundImageVariants, backgroundOverlayVariants, backgroundStreamVariants, backgroundVariants, backgroundVideoVariants, } from './components/atoms/background';
 export type { ButtonProps, IconButtonProps } from './components/atoms/button';
 export { Button, buttonVariants, IconButton, iconButtonVariants, } from './components/atoms/button';
+export type { InputGroupAddonProps, InputGroupButtonProps, InputGroupInputProps, InputGroupProps, InputGroupTextareaProps, InputGroupTextProps, InputProps, } from './components/atoms/input';
+export { Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupVariants, inputVariants, } from './components/atoms/input';
 export type { NdstudioFooterProps } from './components/atoms/ndstudio-footer';
 export { NdstudioFooter } from './components/atoms/ndstudio-footer';
 export type { PagerControlProps } from './components/atoms/pager-control';
 export { PagerControl, pagerControlVariants, } from './components/atoms/pager-control';
+export type { SelectGroupLabelProps, SelectGroupProps, SelectOptionProps, SelectPopupProps, SelectProps, SelectTriggerProps, } from './components/atoms/select';
+export { Select, SelectGroup, SelectGroupLabel, SelectOption, SelectPopup, SelectRoot, SelectTrigger, selectOptionVariants, selectPopupVariants, selectTriggerVariants, } from './components/atoms/select';
 export type { DevToolbarProps, GridOverlayProps } from './components/dev-tools';
 export { DevToolbar, GridOverlay } from './components/dev-tools';
 export type { CardActionsProps, CardBodyProps, CardContentProps, CardDescriptionProps, CardEyebrowProps, CardImageProps, CardProps, CardTitleProps, } from './components/organisms/card';