@nationaldesignstudio/react 0.6.0 → 0.7.0

package/dist/input/index.d.ts

@@ -0,0 +1,404 @@
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { B as ButtonProps } from '../button-B2g5fH9b.js';
+import '@base-ui-components/react/button';
+import '../theme-CzBPUlh_.js';
+
+/**
+ * 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: 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[], 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, 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[], 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>>;
+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>>;
+
+declare const inputGroupVariants: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, string[], 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, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+}, undefined, string[], 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: tailwind_variants.TVReturnType<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, string[], 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, tailwind_variants.TVReturnType<{
+    align: {
+        "inline-start": string[];
+        "inline-end": string[];
+        "block-start": string[];
+        "block-end": string[];
+    };
+}, undefined, string[], 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>>;
+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): react_jsx_runtime.JSX.Element;
+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): react_jsx_runtime.JSX.Element;
+declare const inputGroupButtonVariants: tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, string[], 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, tailwind_variants.TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        "icon-xs": string;
+        "icon-sm": string;
+    };
+}, undefined, string[], 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>>;
+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): react_jsx_runtime.JSX.Element;
+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): react_jsx_runtime.JSX.Element;
+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): react_jsx_runtime.JSX.Element;
+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): react_jsx_runtime.JSX.Element;
+
+export { Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, type InputProps, inputGroupAddonVariants, inputGroupVariants, inputVariants };