@neoptocom/neopto-ui 0.2.1

package/dist/index.d.cts

@@ -0,0 +1,290 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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';
+
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+type ModalProps = {
+    open: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    title?: string;
+    /** When true, closes when the overlay is clicked */
+    closeOnOverlay?: boolean;
+};
+declare function Modal({ open, onClose, title, closeOnOverlay, children }: ModalProps): React.ReactPortal | null;
+
+type TypoVariant = "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "button";
+type TypoWeight = "normal" | "medium" | "semibold" | "bold";
+type TypoProps<T extends React.ElementType = "span"> = {
+    /**
+     * Typography scale name (e.g., "title-md", "body-sm", "display-lg").
+     * Uses Tailwind utilities with design tokens for consistent theming.
+     */
+    variant: TypoVariant;
+    /** Optional font weight override */
+    bold?: TypoWeight;
+    /** Use muted foreground token */
+    muted?: boolean;
+    /** Render as a different element (e.g., "p", "h3") */
+    as?: T;
+    children: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "children">;
+declare function Typo<T extends React.ElementType = "span">({ variant, bold, muted, as, className, children, ...props }: TypoProps<T>): react_jsx_runtime.JSX.Element;
+
+type AvatarProps = {
+    /** Person's full name (used for initials and alt text) */
+    name: string;
+    /** Image URL */
+    src?: string;
+    /** Optional custom background color (CSS color). If omitted, token bg or a derived pastel is used. */
+    color?: string;
+    /** Accessible alt text; defaults to the person's name */
+    alt?: string;
+} & VariantProps<typeof avatarStyles> & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+declare const avatarStyles: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare function Avatar({ name, src, color, size, alt, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type AvatarGroupProps = {
+    children: React.ReactNode;
+    className?: string;
+    /** Maximum avatars to display before showing a +N counter */
+    max?: number;
+    /** Overlap offset in pixels (default 8px) */
+    overlapPx?: number;
+    /** Adds a separating ring around each avatar to improve contrast */
+    withRings?: boolean;
+};
+declare function AvatarGroup({ children, className, max, overlapPx, withRings }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+};
+declare function Skeleton({ className, rounded, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+type AutocompleteOption = {
+    label: string;
+    value: any;
+    image?: string;
+    group?: Array<{
+        name: string;
+        image?: string;
+    }>;
+};
+interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Label text displayed above the input */
+    title: string;
+    /** Array of options to display */
+    options: AutocompleteOption[] | string[];
+    /** Currently selected option */
+    selectedOption: AutocompleteOption | string | null;
+    /** Callback when an option is selected */
+    onSelect: (option: AutocompleteOption | string | null) => void;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Maximum height of the options dropdown */
+    maxHeight?: number;
+    /** Optional id base (for accessibility hooks) */
+    id?: string;
+}
+declare function Autocomplete({ className, title, options, selectedOption, onSelect, placeholder, disabled, maxHeight, id, ...props }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+
+type SearchOption = {
+    label: string;
+    value: any;
+    image?: string;
+    group?: Array<{
+        name: string;
+        image?: string;
+    }>;
+};
+interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Array of options to display */
+    options: SearchOption[] | string[];
+    /** Callback when search is performed (debounced) */
+    onSearch: (query: string) => void;
+    /** Currently selected option */
+    selectedOption: SearchOption | string | null;
+    /** Callback when an option is selected */
+    onSelect: (option: SearchOption | string | null) => void;
+    /** Search delay in milliseconds (default: 300ms) */
+    searchDelay?: number;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Maximum height of the options dropdown */
+    maxHeight?: number;
+    /** Optional id base (for accessibility hooks) */
+    id?: string;
+}
+declare function Search({ className, options, onSearch, selectedOption, onSelect, searchDelay, disabled, maxHeight, id, ...props }: SearchProps): react_jsx_runtime.JSX.Element;
+
+declare const buttonStyles: tailwind_variants.TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}>, {
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+type ButtonVariants = VariantProps<typeof buttonStyles>;
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
+    /** Icon component to display instead of text */
+    icon?: React.ReactNode;
+};
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
+    /** Icon component to display instead of text */
+    icon?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+type IconProps = {
+    /** Material Symbols name (e.g., "search", "close", "more_vert") */
+    name: string;
+    className?: string;
+    title?: string;
+    /** Visual size preset */
+    size?: "sm" | "md" | "lg";
+    /** Filled (1) vs outlined (0) glyph */
+    fill?: 0 | 1;
+};
+declare function Icon({ name, className, title, size, fill }: IconProps): react_jsx_runtime.JSX.Element;
+
+type IconOption = "home" | "search" | "person" | "settings" | "close" | "check" | "clear" | "menu" | "more_vert" | "favorite" | "favorite_border" | "star" | "star_outline" | "visibility" | "visibility_off" | "lock" | "lock_open" | "download" | "upload" | "share" | "refresh" | "calendar_today" | "schedule" | "notifications" | "notifications_off" | "error" | "error_outline" | "help" | "help_outline" | "arrow_back" | "arrow_forward" | "chevron_right" | "expand_more" | "play_arrow" | "pause" | "stop" | "skip_next" | "skip_previous" | "volume_up" | "volume_off" | "mic" | "mic_off" | "camera_alt" | "photo" | "image" | "map" | "place" | "location_on" | "phone" | "mail" | "chat" | "send" | "link" | "attachment" | "shopping_cart" | "payment";
+type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "warning" | "success" | "error" | "light" | "dark";
+    icon?: IconOption;
+    label?: string;
+};
+declare function Chip({ variant, icon, className, label, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+
+export { Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Chip, type ChipProps, Icon, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight };

package/dist/index.d.ts

@@ -0,0 +1,290 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+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';
+
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+type ModalProps = {
+    open: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    title?: string;
+    /** When true, closes when the overlay is clicked */
+    closeOnOverlay?: boolean;
+};
+declare function Modal({ open, onClose, title, closeOnOverlay, children }: ModalProps): React.ReactPortal | null;
+
+type TypoVariant = "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "title-lg" | "title-md" | "title-sm" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "button";
+type TypoWeight = "normal" | "medium" | "semibold" | "bold";
+type TypoProps<T extends React.ElementType = "span"> = {
+    /**
+     * Typography scale name (e.g., "title-md", "body-sm", "display-lg").
+     * Uses Tailwind utilities with design tokens for consistent theming.
+     */
+    variant: TypoVariant;
+    /** Optional font weight override */
+    bold?: TypoWeight;
+    /** Use muted foreground token */
+    muted?: boolean;
+    /** Render as a different element (e.g., "p", "h3") */
+    as?: T;
+    children: React.ReactNode;
+} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "children">;
+declare function Typo<T extends React.ElementType = "span">({ variant, bold, muted, as, className, children, ...props }: TypoProps<T>): react_jsx_runtime.JSX.Element;
+
+type AvatarProps = {
+    /** Person's full name (used for initials and alt text) */
+    name: string;
+    /** Image URL */
+    src?: string;
+    /** Optional custom background color (CSS color). If omitted, token bg or a derived pastel is used. */
+    color?: string;
+    /** Accessible alt text; defaults to the person's name */
+    alt?: string;
+} & VariantProps<typeof avatarStyles> & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+declare const avatarStyles: tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+    };
+}>, unknown, unknown, undefined>>;
+declare function Avatar({ name, src, color, size, alt, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type AvatarGroupProps = {
+    children: React.ReactNode;
+    className?: string;
+    /** Maximum avatars to display before showing a +N counter */
+    max?: number;
+    /** Overlap offset in pixels (default 8px) */
+    overlapPx?: number;
+    /** Adds a separating ring around each avatar to improve contrast */
+    withRings?: boolean;
+};
+declare function AvatarGroup({ children, className, max, overlapPx, withRings }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+};
+declare function Skeleton({ className, rounded, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+type AutocompleteOption = {
+    label: string;
+    value: any;
+    image?: string;
+    group?: Array<{
+        name: string;
+        image?: string;
+    }>;
+};
+interface AutocompleteProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Label text displayed above the input */
+    title: string;
+    /** Array of options to display */
+    options: AutocompleteOption[] | string[];
+    /** Currently selected option */
+    selectedOption: AutocompleteOption | string | null;
+    /** Callback when an option is selected */
+    onSelect: (option: AutocompleteOption | string | null) => void;
+    /** Placeholder text for the input */
+    placeholder?: string;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Maximum height of the options dropdown */
+    maxHeight?: number;
+    /** Optional id base (for accessibility hooks) */
+    id?: string;
+}
+declare function Autocomplete({ className, title, options, selectedOption, onSelect, placeholder, disabled, maxHeight, id, ...props }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+
+type SearchOption = {
+    label: string;
+    value: any;
+    image?: string;
+    group?: Array<{
+        name: string;
+        image?: string;
+    }>;
+};
+interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /** Array of options to display */
+    options: SearchOption[] | string[];
+    /** Callback when search is performed (debounced) */
+    onSearch: (query: string) => void;
+    /** Currently selected option */
+    selectedOption: SearchOption | string | null;
+    /** Callback when an option is selected */
+    onSelect: (option: SearchOption | string | null) => void;
+    /** Search delay in milliseconds (default: 300ms) */
+    searchDelay?: number;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Maximum height of the options dropdown */
+    maxHeight?: number;
+    /** Optional id base (for accessibility hooks) */
+    id?: string;
+}
+declare function Search({ className, options, onSearch, selectedOption, onSelect, searchDelay, disabled, maxHeight, id, ...props }: SearchProps): react_jsx_runtime.JSX.Element;
+
+declare const buttonStyles: tailwind_variants.TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}>, {
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}, {
+    variant: {
+        primary: string;
+        secondary: string;
+        ghost: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    fullWidth: {
+        true: string;
+    };
+}>, unknown, unknown, undefined>>;
+type ButtonVariants = VariantProps<typeof buttonStyles>;
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
+    /** Icon component to display instead of text */
+    icon?: React.ReactNode;
+};
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
+    /** Icon component to display instead of text */
+    icon?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+type IconProps = {
+    /** Material Symbols name (e.g., "search", "close", "more_vert") */
+    name: string;
+    className?: string;
+    title?: string;
+    /** Visual size preset */
+    size?: "sm" | "md" | "lg";
+    /** Filled (1) vs outlined (0) glyph */
+    fill?: 0 | 1;
+};
+declare function Icon({ name, className, title, size, fill }: IconProps): react_jsx_runtime.JSX.Element;
+
+type IconOption = "home" | "search" | "person" | "settings" | "close" | "check" | "clear" | "menu" | "more_vert" | "favorite" | "favorite_border" | "star" | "star_outline" | "visibility" | "visibility_off" | "lock" | "lock_open" | "download" | "upload" | "share" | "refresh" | "calendar_today" | "schedule" | "notifications" | "notifications_off" | "error" | "error_outline" | "help" | "help_outline" | "arrow_back" | "arrow_forward" | "chevron_right" | "expand_more" | "play_arrow" | "pause" | "stop" | "skip_next" | "skip_previous" | "volume_up" | "volume_off" | "mic" | "mic_off" | "camera_alt" | "photo" | "image" | "map" | "place" | "location_on" | "phone" | "mail" | "chat" | "send" | "link" | "attachment" | "shopping_cart" | "payment";
+type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: "warning" | "success" | "error" | "light" | "dark";
+    icon?: IconOption;
+    label?: string;
+};
+declare function Chip({ variant, icon, className, label, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+
+export { Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, Chip, type ChipProps, Icon, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight };