@sonamu-kit/react-components 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonamu-kit/react-components",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "author": "CartaNova <dev@cartanova.ai>",
   "repository": {
@@ -88,9 +88,10 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "vaul": "^1.1.2",
-    "zod": "^4.1.12"
+    "zod": "^4.3.6"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-router": "1.143.11",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
@@ -98,6 +99,7 @@
   "devDependencies": {
     "@iconify/json": "^2.2.421",
     "@tailwindcss/vite": "^4.1.17",
+    "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-router": "1.143.11",
     "@types/inflection": "^2.0.0",
     "@types/react": "^19.2.7",

package/dist/components/ui/async-select.d.ts

@@ -1,36 +0,0 @@
-export interface AsyncSelectOption<T = unknown> {
-    value: T;
-    label: string;
-}
-export interface AsyncSelectProps<T = number> {
-    /** 선택 옵션 배열 */
-    options: AsyncSelectOption<T>[];
-    /** 현재 선택된 값 */
-    value?: T | null;
-    /** 값 변경 핸들러 */
-    onValueChange?: (value: T | undefined) => void;
-    /** 로딩 상태 */
-    isLoading?: boolean;
-    /** placeholder 텍스트 */
-    placeholder?: string;
-    /** 검색 입력 placeholder */
-    searchPlaceholder?: string;
-    /** 결과 없음 텍스트 */
-    emptyText?: string;
-    /** 로딩 중 텍스트 */
-    loadingText?: string;
-    /** clearable 옵션 */
-    clearable?: boolean;
-    /** 비활성화 */
-    disabled?: boolean;
-    /** 추가 className */
-    className?: string;
-    /** 검색어 변경 핸들러 (서버 검색용) */
-    onSearch?: (keyword: string) => void;
-    /** 검색 디바운스 시간 (ms) */
-    searchDebounce?: number;
-}
-export declare function AsyncSelect<T = number>({ options, value, onValueChange, isLoading, placeholder, searchPlaceholder, emptyText, loadingText, clearable, disabled, className, onSearch, searchDebounce, }: AsyncSelectProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace AsyncSelect {
-    var displayName: string;
-}

package/dist/components/ui/multi-select.d.ts

@@ -1,225 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import * as React from "react";
-/**
- * Animation types and configurations
- */
-export interface AnimationConfig {
-    /** Badge animation type */
-    badgeAnimation?: "bounce" | "pulse" | "wiggle" | "fade" | "slide" | "none";
-    /** Popover animation type */
-    popoverAnimation?: "scale" | "slide" | "fade" | "flip" | "none";
-    /** Option hover animation type */
-    optionHoverAnimation?: "highlight" | "scale" | "glow" | "none";
-    /** Animation duration in seconds */
-    duration?: number;
-    /** Animation delay in seconds */
-    delay?: number;
-}
-/**
- * Variants for the multi-select component to handle different styles.
- * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
- */
-declare const multiSelectVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "inverted" | null | undefined;
-    badgeAnimation?: "none" | "slide" | "bounce" | "pulse" | "wiggle" | "fade" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-/**
- * Option interface for MultiSelect component
- */
-interface MultiSelectOption {
-    /** The text to display for the option. */
-    label: string;
-    /** The unique value associated with the option. */
-    value: string;
-    /** Optional icon component to display alongside the option. */
-    icon?: React.ComponentType<{
-        className?: string;
-    }>;
-    /** Whether this option is disabled */
-    disabled?: boolean;
-    /** Custom styling for the option */
-    style?: {
-        /** Custom badge color */
-        badgeColor?: string;
-        /** Custom icon color */
-        iconColor?: string;
-        /** Gradient background for badge */
-        gradient?: string;
-    };
-}
-/**
- * Group interface for organizing options
- */
-interface MultiSelectGroup {
-    /** Group heading */
-    heading: string;
-    /** Options in this group */
-    options: MultiSelectOption[];
-}
-/**
- * Props for MultiSelect component
- */
-interface MultiSelectProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "animationConfig">, VariantProps<typeof multiSelectVariants> {
-    /**
-     * An array of option objects or groups to be displayed in the multi-select component.
-     */
-    options: MultiSelectOption[] | MultiSelectGroup[];
-    /**
-     * Callback function triggered when the selected values change.
-     * Receives an array of the new selected values.
-     */
-    onValueChange: (value: string[]) => void;
-    /**
-     * The current selected values.
-     */
-    value: string[];
-    /**
-     * Placeholder text to be displayed when no values are selected.
-     * Optional, defaults to "Select options".
-     */
-    placeholder?: string;
-    /**
-     * Animation duration in seconds for the visual effects (e.g., bouncing badges).
-     * Optional, defaults to 0 (no animation).
-     */
-    animation?: number;
-    /**
-     * Advanced animation configuration for different component parts.
-     * Optional, allows fine-tuning of various animation effects.
-     */
-    animationConfig?: AnimationConfig;
-    /**
-     * Maximum number of items to display. Extra selected items will be summarized.
-     * Optional, defaults to 3.
-     */
-    maxCount?: number;
-    /**
-     * The modality of the popover. When set to true, interaction with outside elements
-     * will be disabled and only popover content will be visible to screen readers.
-     * Optional, defaults to false.
-     */
-    modalPopover?: boolean;
-    /**
-     * If true, renders the multi-select component as a child of another component.
-     * Optional, defaults to false.
-     */
-    asChild?: boolean;
-    /**
-     * Additional class names to apply custom styles to the multi-select component.
-     * Optional, can be used to add custom styles.
-     */
-    className?: string;
-    /**
-     * If true, disables the select all functionality.
-     * Optional, defaults to false.
-     */
-    hideSelectAll?: boolean;
-    /**
-     * If true, shows search functionality in the popover.
-     * If false, hides the search input completely.
-     * Optional, defaults to true.
-     */
-    searchable?: boolean;
-    /**
-     * Custom empty state message when no options match search.
-     * Optional, defaults to "No results found."
-     */
-    emptyIndicator?: React.ReactNode;
-    /**
-     * If true, allows the component to grow and shrink with its content.
-     * If false, uses fixed width behavior.
-     * Optional, defaults to false.
-     */
-    autoSize?: boolean;
-    /**
-     * If true, shows badges in a single line with horizontal scroll.
-     * If false, badges wrap to multiple lines.
-     * Optional, defaults to false.
-     */
-    singleLine?: boolean;
-    /**
-     * Custom CSS class for the popover content.
-     * Optional, can be used to customize popover appearance.
-     */
-    popoverClassName?: string;
-    /**
-     * If true, disables the component completely.
-     * Optional, defaults to false.
-     */
-    disabled?: boolean;
-    /**
-     * Responsive configuration for different screen sizes.
-     * Allows customizing maxCount and other properties based on viewport.
-     * Can be boolean true for default responsive behavior or an object for custom configuration.
-     */
-    responsive?: boolean | {
-        /** Configuration for mobile devices (< 640px) */
-        mobile?: {
-            maxCount?: number;
-            hideIcons?: boolean;
-            compactMode?: boolean;
-        };
-        /** Configuration for tablet devices (640px - 1024px) */
-        tablet?: {
-            maxCount?: number;
-            hideIcons?: boolean;
-            compactMode?: boolean;
-        };
-        /** Configuration for desktop devices (> 1024px) */
-        desktop?: {
-            maxCount?: number;
-            hideIcons?: boolean;
-            compactMode?: boolean;
-        };
-    };
-    /**
-     * Minimum width for the component.
-     * Optional, defaults to auto-sizing based on content.
-     * When set, component will not shrink below this width.
-     */
-    minWidth?: string;
-    /**
-     * Maximum width for the component.
-     * Optional, defaults to 100% of container.
-     * Component will not exceed container boundaries.
-     */
-    maxWidth?: string;
-    /**
-     * If true, automatically removes duplicate options based on their value.
-     * Optional, defaults to false (shows warning in dev mode instead).
-     */
-    deduplicateOptions?: boolean;
-    /**
-     * If true, automatically closes the popover after selecting an option.
-     * Useful for single-selection-like behavior or mobile UX.
-     * Optional, defaults to false.
-     */
-    closeOnSelect?: boolean;
-}
-/**
- * Imperative methods exposed through ref
- */
-export interface MultiSelectRef {
-    /**
-     * Programmatically reset the component to its default value
-     */
-    reset: () => void;
-    /**
-     * Get current selected values
-     */
-    getSelectedValues: () => string[];
-    /**
-     * Set selected values programmatically
-     */
-    handleValueChange: (values: string[]) => void;
-    /**
-     * Clear all selected values
-     */
-    clear: () => void;
-    /**
-     * Focus the component
-     */
-    focus: () => void;
-}
-export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<MultiSelectRef>>;
-export type { MultiSelectOption, MultiSelectGroup, MultiSelectProps };

package/dist/components/ui/select.d.ts

@@ -1,20 +0,0 @@
-import { Override } from '../../lib/types';
-import * as SelectPrimitive from "@radix-ui/react-select";
-import * as React from "react";
-type SelectProps = Override<React.ComponentProps<typeof SelectPrimitive.Root>, {
-    name?: string;
-    onValueChange?: (value: string | undefined | null) => void;
-    onBlur?: React.FocusEventHandler<HTMLSelectElement>;
-    clearable?: boolean;
-}>;
-declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
-declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
-declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };