@nationaldesignstudio/react 0.2.0 → 0.3.0

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

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/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

@@ -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/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';