@nationaldesignstudio/react 0.2.0 → 0.5.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 (36px)
+ * - default: Standard height (48px)
+ * - lg: Larger height and padding (56px)
+ */
+declare const inputVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}>, {
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    error: {
+        true: string;
+        false: "";
+    };
+}, {
+    size: {
+        readonly sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md";
+        readonly default: "h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md";
+        readonly lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg";
+    };
+    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/popover/popover.d.ts

@@ -0,0 +1,195 @@
+import { Popover as BasePopover } from '@base-ui-components/react/popover';
+import { VariantProps } from 'tailwind-variants';
+import * as React from "react";
+/**
+ * Popover popup variants
+ *
+ * Uses semantic overlay tokens for themeable styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - color.overlay.text - Primary text
+ * - surface.overlay.radius - Rounded corners
+ * - spatial.component.overlay.padding/gap - Consistent spacing
+ */
+declare const popoverPopupVariants: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, {
+    variant: {
+        default: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        default: string;
+    };
+}, {
+    variant: {
+        default: string;
+    };
+}>, unknown, unknown, undefined>>;
+/**
+ * Popover arrow variants - uses shared floating arrow variants
+ */
+declare const popoverArrowVariants: 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 PopoverRootProps extends BasePopover.Root.Props {
+    children: React.ReactNode;
+}
+/**
+ * Popover Root
+ *
+ * Groups all popover parts. Does not render an element.
+ */
+declare const PopoverRoot: ({ children, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element;
+export interface PopoverTriggerProps extends React.ComponentProps<typeof BasePopover.Trigger> {
+    className?: string;
+}
+/**
+ * Popover Trigger
+ *
+ * The element that triggers the popover on click.
+ * Renders as the child element with popover behavior attached.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface PopoverPortalProps extends BasePopover.Portal.Props {
+    children: React.ReactNode;
+}
+/**
+ * Popover Portal
+ *
+ * Renders the popover popup in a portal outside the DOM hierarchy.
+ */
+declare const PopoverPortal: ({ children, ...props }: PopoverPortalProps) => import("react/jsx-runtime").JSX.Element;
+export interface PopoverBackdropProps extends Omit<React.ComponentProps<typeof BasePopover.Backdrop>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Backdrop
+ *
+ * Optional backdrop element that can be used to close the popover on click.
+ */
+declare const PopoverBackdrop: React.ForwardRefExoticComponent<Omit<PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverPositionerProps extends Omit<React.ComponentProps<typeof BasePopover.Positioner>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Positioner
+ *
+ * Positions the popover popup relative to the trigger.
+ */
+declare const PopoverPositioner: React.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverPopupProps extends Omit<React.ComponentProps<typeof BasePopover.Popup>, "className">, VariantProps<typeof popoverPopupVariants> {
+    className?: string;
+}
+/**
+ * Popover Popup
+ *
+ * The popover content container with styled appearance.
+ */
+declare const PopoverPopup: React.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverArrowProps extends Omit<React.ComponentProps<typeof BasePopover.Arrow>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Arrow
+ *
+ * Visual pointer element for the popover.
+ * Uses shared FloatingArrowSvg with overlay color tokens for fill and border.
+ */
+declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverTitleProps extends Omit<React.ComponentProps<typeof BasePopover.Title>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Title
+ *
+ * Title element for the popover content.
+ */
+declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export interface PopoverDescriptionProps extends Omit<React.ComponentProps<typeof BasePopover.Description>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Description
+ *
+ * Description element for the popover content.
+ */
+declare const PopoverDescription: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export interface PopoverCloseProps extends Omit<React.ComponentProps<typeof BasePopover.Close>, "className"> {
+    className?: string;
+}
+/**
+ * Popover Close
+ *
+ * Close button for the popover.
+ */
+declare const PopoverClose: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface PopoverProps {
+    /** The content to show in the popover */
+    children: React.ReactNode;
+    /** The element that triggers the popover */
+    trigger: React.ReactNode;
+    /** Title for the popover (optional) */
+    title?: React.ReactNode;
+    /** Side of the trigger to show the popover */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Offset from the trigger */
+    sideOffset?: number;
+    /** Alignment along the side */
+    align?: "start" | "center" | "end";
+    /** Whether to show an arrow */
+    showArrow?: boolean;
+    /** Whether to show a close button */
+    showClose?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Default open state */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional className for the popup */
+    className?: string;
+}
+/**
+ * Popover
+ *
+ * A simple, pre-composed popover component for common use cases.
+ * For more complex needs, use the compound components directly.
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Click me</Button>}
+ *   title="Popover Title"
+ * >
+ *   <p>This is the popover content.</p>
+ * </Popover>
+ * ```
+ */
+declare const Popover: ({ children, trigger, title, side, sideOffset, align, showArrow, showClose, open, defaultOpen, onOpenChange, className, }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopoverParts: (({ children, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, ...props }: PopoverRootProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Portal: ({ children, ...props }: PopoverPortalProps) => import("react/jsx-runtime").JSX.Element;
+    Backdrop: React.ForwardRefExoticComponent<Omit<PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Positioner: React.ForwardRefExoticComponent<Omit<PopoverPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Popup: React.ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Arrow: React.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+    Description: React.ForwardRefExoticComponent<Omit<PopoverDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<Omit<PopoverCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+};
+export { Popover, PopoverRoot, PopoverTrigger, PopoverPortal, PopoverBackdrop, PopoverPositioner, PopoverPopup, PopoverArrow, PopoverTitle, PopoverDescription, PopoverClose, popoverPopupVariants, popoverArrowVariants, };