@particle-academy/react-fancy 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,393 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassValue } from 'clsx';
+
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+type Color = "zinc" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
+type Variant = "solid" | "outline" | "ghost" | "soft";
+type ActionColor = "blue" | "emerald" | "amber" | "red" | "violet" | "indigo" | "sky" | "rose" | "orange" | "zinc";
+
+interface ActionProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+    /** Shape variant */
+    variant?: "default" | "circle";
+    /** Standalone color (overrides state colors) */
+    color?: ActionColor;
+    size?: Size;
+    /** Behavioral states */
+    active?: boolean;
+    checked?: boolean;
+    warn?: boolean;
+    alert?: boolean;
+    /** Leading icon (ReactNode) */
+    icon?: ReactNode;
+    /** Trailing icon (convenience for right-side icon) */
+    iconTrailing?: ReactNode;
+    /** Icon placement direction */
+    iconPlace?: "left" | "right" | "top" | "bottom";
+    /** Pulsing alert icon */
+    alertIcon?: ReactNode;
+    /** Position alert icon on trailing side */
+    alertIconTrailing?: boolean;
+    /** Emoji slug (resolved via emoji-utils) */
+    emoji?: string;
+    /** Trailing emoji slug */
+    emojiTrailing?: string;
+    /** Avatar image URL */
+    avatar?: string;
+    /** Position avatar on trailing side */
+    avatarTrailing?: boolean;
+    /** Badge text */
+    badge?: string;
+    /** Position badge on trailing side */
+    badgeTrailing?: boolean;
+    /** Sort order of decorative elements: e=emoji, i=icon, a=avatar, b=badge */
+    sort?: string;
+    /** Show loading spinner */
+    loading?: boolean;
+    disabled?: boolean;
+    /** Render as anchor tag */
+    href?: string;
+}
+
+declare const Action: react.ForwardRefExoticComponent<ActionProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface FieldProps {
+    label?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    htmlFor?: string;
+    size?: Size;
+    children: ReactNode;
+    className?: string;
+}
+
+declare function Field({ label, description, error, required, htmlFor, size, children, className, }: FieldProps): react_jsx_runtime.JSX.Element;
+
+type InputOption<V = string> = string | {
+    value: V;
+    label: string;
+    disabled?: boolean;
+    description?: string;
+};
+type InputOptionGroup<V = string> = {
+    label: string;
+    options: InputOption<V>[];
+};
+interface InputBaseProps {
+    size?: Size;
+    dirty?: boolean;
+    error?: string;
+    label?: string;
+    description?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+    name?: string;
+}
+
+interface InputProps extends InputBaseProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    type?: "text" | "email" | "password" | "number" | "tel" | "url" | "search";
+    onValueChange?: (value: string) => void;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+}
+
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextareaProps extends InputBaseProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    autoResize?: boolean;
+    minRows?: number;
+    maxRows?: number;
+    onValueChange?: (value: string) => void;
+}
+
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+interface SelectProps extends InputBaseProps, Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    list: InputOption[] | InputOptionGroup[];
+    placeholder?: string;
+    onValueChange?: (value: string) => void;
+}
+
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface CheckboxProps extends Omit<InputBaseProps, "label"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+    label?: string;
+}
+
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface CheckboxGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
+    list: InputOption<V>[];
+    value?: V[];
+    defaultValue?: V[];
+    onValueChange?: (values: V[]) => void;
+    orientation?: "horizontal" | "vertical";
+}
+
+declare function CheckboxGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, }: CheckboxGroupProps<V>): react_jsx_runtime.JSX.Element;
+declare namespace CheckboxGroup {
+    var displayName: string;
+}
+
+interface RadioGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
+    list: InputOption<V>[];
+    value?: V;
+    defaultValue?: V;
+    onValueChange?: (value: V) => void;
+    orientation?: "horizontal" | "vertical";
+}
+
+declare function RadioGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, }: RadioGroupProps<V>): react_jsx_runtime.JSX.Element;
+declare namespace RadioGroup {
+    var displayName: string;
+}
+
+interface SwitchProps extends Omit<InputBaseProps, "label"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    color?: Color;
+    label?: string;
+}
+
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface SliderBaseProps extends InputBaseProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    showValue?: boolean;
+    marks?: {
+        value: number;
+        label?: string;
+    }[];
+}
+interface SliderSingleProps extends SliderBaseProps {
+    range?: false;
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+}
+interface SliderRangeProps extends SliderBaseProps {
+    range: true;
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (value: [number, number]) => void;
+}
+type SliderProps = SliderSingleProps | SliderRangeProps;
+
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+interface DatePickerBaseProps extends InputBaseProps {
+    min?: string;
+    max?: string;
+    includeTime?: boolean;
+}
+interface DatePickerSingleProps extends DatePickerBaseProps {
+    range?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+interface DatePickerRangeProps extends DatePickerBaseProps {
+    range: true;
+    value?: [string, string];
+    defaultValue?: [string, string];
+    onValueChange?: (value: [string, string]) => void;
+}
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+interface CarouselContextValue {
+    activeIndex: number;
+    totalSlides: number;
+    next: () => void;
+    prev: () => void;
+    goTo: (index: number) => void;
+    registerSlides: (count: number) => void;
+}
+interface CarouselProps {
+    children: ReactNode;
+    defaultIndex?: number;
+    className?: string;
+    autoPlay?: boolean;
+    interval?: number;
+}
+interface CarouselSlideProps {
+    children: ReactNode;
+    className?: string;
+}
+interface CarouselControlsProps {
+    className?: string;
+    prevLabel?: ReactNode;
+    nextLabel?: ReactNode;
+}
+interface CarouselStepsProps {
+    className?: string;
+}
+interface CarouselPanelsProps {
+    children: ReactNode;
+    className?: string;
+}
+
+declare function CarouselPanels({ children, className }: CarouselPanelsProps): react_jsx_runtime.JSX.Element;
+
+declare function CarouselSlide({ children, className }: CarouselSlideProps): react_jsx_runtime.JSX.Element;
+
+declare function CarouselControls({ className, prevLabel, nextLabel, }: CarouselControlsProps): react_jsx_runtime.JSX.Element;
+
+declare function CarouselSteps({ className }: CarouselStepsProps): react_jsx_runtime.JSX.Element;
+
+declare function CarouselRoot({ children, defaultIndex, className, }: CarouselProps): react_jsx_runtime.JSX.Element;
+declare const Carousel: typeof CarouselRoot & {
+    Panels: typeof CarouselPanels;
+    Slide: typeof CarouselSlide;
+    Controls: typeof CarouselControls;
+    Steps: typeof CarouselSteps;
+};
+
+declare function useCarousel(): CarouselContextValue;
+
+interface ColorPickerProps {
+    value?: Color;
+    defaultValue?: Color;
+    onChange?: (color: Color) => void;
+    colors?: Color[];
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+
+declare function ColorPicker({ value, defaultValue, onChange, colors, size, className, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface EmojiProps {
+    name?: string;
+    emoji?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+    className?: string;
+}
+
+declare function Emoji({ name, emoji, size, className }: EmojiProps): react_jsx_runtime.JSX.Element | null;
+
+interface EmojiSelectProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (emoji: string) => void;
+    placeholder?: string;
+    className?: string;
+}
+
+declare function EmojiSelect({ value, defaultValue, onChange, placeholder, className, }: EmojiSelectProps): react_jsx_runtime.JSX.Element;
+
+interface TableProps {
+    children: ReactNode;
+    className?: string;
+}
+interface TableHeadProps {
+    children: ReactNode;
+    className?: string;
+}
+interface TableBodyProps {
+    children: ReactNode;
+    className?: string;
+}
+interface TableRowProps {
+    children: ReactNode;
+    className?: string;
+    onClick?: () => void;
+}
+interface TableCellProps {
+    children: ReactNode;
+    className?: string;
+    header?: boolean;
+}
+interface TableColumnProps {
+    label: string;
+    sortKey?: string;
+    className?: string;
+}
+interface TablePaginationProps {
+    className?: string;
+    total: number;
+    pageSize?: number;
+}
+interface TableSearchProps {
+    className?: string;
+    placeholder?: string;
+}
+interface TableTrayProps {
+    children: ReactNode;
+    className?: string;
+}
+
+declare function TableHead({ children, className }: TableHeadProps): react_jsx_runtime.JSX.Element;
+
+declare function TableBody({ children, className }: TableBodyProps): react_jsx_runtime.JSX.Element;
+
+declare function TableRow({ children, className, onClick }: TableRowProps): react_jsx_runtime.JSX.Element;
+
+declare function TableCell({ children, className, header }: TableCellProps): react_jsx_runtime.JSX.Element;
+
+declare function TableColumn({ label, sortKey, className }: TableColumnProps): react_jsx_runtime.JSX.Element;
+
+declare function TablePagination({ className, total, pageSize, }: TablePaginationProps): react_jsx_runtime.JSX.Element | null;
+
+declare function TableSearch({ className, placeholder, }: TableSearchProps): react_jsx_runtime.JSX.Element;
+
+declare function TableTray({ children, className }: TableTrayProps): react_jsx_runtime.JSX.Element;
+
+declare function TableRoot({ children, className }: TableProps): react_jsx_runtime.JSX.Element;
+declare const Table: typeof TableRoot & {
+    Head: typeof TableHead;
+    Body: typeof TableBody;
+    Row: typeof TableRow;
+    Cell: typeof TableCell;
+    Column: typeof TableColumn;
+    Pagination: typeof TablePagination;
+    Search: typeof TableSearch;
+    Tray: typeof TableTray;
+};
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare function useControllableState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T | ((prev: T) => T)) => void];
+
+/**
+ * Simplified emoji data for the picker component.
+ * Each category contains just the emoji character strings.
+ */
+declare const EMOJI_DATA: Array<{
+    category: string;
+    icon: string;
+    label: string;
+    emojis: string[];
+}>;
+/**
+ * Flat list of all emojis with name and category, useful for search.
+ */
+declare const EMOJI_ENTRIES: Array<{
+    char: string;
+    name: string;
+    category: string;
+}>;
+
+/** Resolve an emoji name to its character. */
+declare function resolve(name: string): string | undefined;
+/** Search emojis by name substring. Returns matching emoji characters. */
+declare function search(query: string): string[];
+/** Find an emoji entry by its character. */
+declare function find(char: string): {
+    char: string;
+    name: string;
+    category: string;
+} | undefined;
+
+export { Action, type ActionColor, type ActionProps, Carousel, type CarouselContextValue, type CarouselControlsProps, type CarouselPanelsProps, type CarouselProps, type CarouselSlideProps, type CarouselStepsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type Color, ColorPicker, type ColorPickerProps, DatePicker, type DatePickerProps, EMOJI_DATA, EMOJI_ENTRIES, Emoji, type EmojiProps, EmojiSelect, type EmojiSelectProps, Field, type FieldProps, Input, type InputBaseProps, type InputOption, type InputOptionGroup, type InputProps, RadioGroup, type RadioGroupProps, Select, type SelectProps, type Size, Slider, type SliderProps, Switch, type SwitchProps, Table, type TableBodyProps, type TableCellProps, type TableColumnProps, type TableHeadProps, type TablePaginationProps, type TableProps, type TableRowProps, type TableSearchProps, type TableTrayProps, Textarea, type TextareaProps, type Variant, cn, find, resolve, search, useCarousel, useControllableState };