@uxuissk/design-system 0.1.0

package/dist/types/index.d.ts

@@ -0,0 +1,413 @@
+import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+
+export declare function Alert({ variant, title, children, dismissible, onDismiss, action, icon, className }: AlertProps): JSX.Element | null;
+
+declare interface AlertProps {
+    variant?: AlertVariant;
+    title?: string;
+    children: default_2.ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    action?: default_2.ReactNode;
+    icon?: default_2.ReactNode;
+    className?: string;
+}
+
+export declare type AlertVariant = "info" | "success" | "warning" | "error";
+
+export declare function Badge({ children, variant, size, icon, dot, removable, onRemove, className, }: BadgeProps): JSX.Element;
+
+declare interface BadgeProps {
+    children: default_2.ReactNode;
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    icon?: default_2.ReactNode;
+    dot?: boolean;
+    removable?: boolean;
+    onRemove?: () => void;
+    className?: string;
+}
+
+export declare type BadgeSize = "sm" | "md" | "lg";
+
+export declare type BadgeVariant = "default" | "secondary" | "outline" | "destructive" | "success" | "warning";
+
+export declare function ButtonGroup({ children, className, }: {
+    children: default_2.ReactNode;
+    className?: string;
+}): JSX.Element;
+
+export declare type ButtonSize = "sm" | "md" | "lg" | "xl";
+
+export declare type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
+
+export declare function CheckboxGroup({ label, children, direction, className }: CheckboxGroupProps): JSX.Element;
+
+declare interface CheckboxGroupProps {
+    label?: string;
+    children: default_2.ReactNode;
+    direction?: "horizontal" | "vertical";
+    className?: string;
+}
+
+declare interface CheckboxProps {
+    checked?: boolean;
+    indeterminate?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    description?: string;
+    size?: CheckboxSize;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+    id?: string;
+}
+
+export declare type CheckboxSize = "sm" | "md" | "lg";
+
+export declare function ConfirmDialog({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, variant, }: ConfirmDialogProps): JSX.Element;
+
+declare interface ConfirmDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: "default" | "destructive";
+}
+
+export declare function DatePicker({ value, rangeValue, onChange, onRangeChange, mode, label, placeholder, helperText, errorMessage, successMessage, size, variant, state, disabled, required, clearable, showTime, minDate, maxDate, disabledDates, showToday, footer, fullWidth, }: DatePickerProps): JSX.Element;
+
+export declare type DatePickerMode = "single" | "range";
+
+export declare interface DatePickerProps {
+    /** Selected date (single mode) */
+    value?: Date | null;
+    /** Selected range (range mode) */
+    rangeValue?: {
+        start: Date | null;
+        end: Date | null;
+    };
+    /** Callback on date change (single) */
+    onChange?: (date: Date | null) => void;
+    /** Callback on range change */
+    onRangeChange?: (range: {
+        start: Date | null;
+        end: Date | null;
+    }) => void;
+    /** Single or range mode */
+    mode?: DatePickerMode;
+    /** Label text */
+    label?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Visual size */
+    size?: DatePickerSize;
+    /** Visual variant */
+    variant?: DatePickerVariant;
+    /** Validation state */
+    state?: DatePickerState;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Required field */
+    required?: boolean;
+    /** Allow clearing the value */
+    clearable?: boolean;
+    /** Show time picker */
+    showTime?: boolean;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Disabled specific dates */
+    disabledDates?: Date[];
+    /** Date format for display */
+    format?: string;
+    /** Show today button */
+    showToday?: boolean;
+    /** Custom footer element */
+    footer?: default_2.ReactNode;
+    /** Full width */
+    fullWidth?: boolean;
+}
+
+export declare type DatePickerSize = "sm" | "md" | "lg";
+
+export declare type DatePickerState = "default" | "error" | "success";
+
+export declare type DatePickerVariant = "default" | "outlined" | "filled" | "ghost";
+
+export declare const DSButton: default_2.ForwardRefExoticComponent<DSButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface DSButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    loadingText?: string;
+    leftIcon?: default_2.ReactNode;
+    rightIcon?: default_2.ReactNode;
+    fullWidth?: boolean;
+    active?: boolean;
+}
+
+export declare function DSCheckbox({ checked: controlledChecked, indeterminate, defaultChecked, onChange, label, description, size, disabled, error, className, id: propId, }: CheckboxProps): JSX.Element;
+
+export declare const DSInput: default_2.ForwardRefExoticComponent<DSInputProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface DSInputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    inputSize?: InputSize;
+    variant?: InputVariant;
+    state?: InputState;
+    leftIcon?: default_2.ReactNode;
+    rightIcon?: default_2.ReactNode;
+    prefix?: string;
+    suffix?: string;
+    clearable?: boolean;
+    showPasswordToggle?: boolean;
+    loading?: boolean;
+    fullWidth?: boolean;
+    required?: boolean;
+    onClear?: () => void;
+}
+
+export declare function DSRadio({ value, label, description, disabled: localDisabled, size: localSize, className }: RadioProps): JSX.Element;
+
+export declare function DSTable<T extends Record<string, any>>({ columns, data, size, striped, hoverable, bordered, selectable, selectedRows: controlledSelected, onSelectionChange, loading, emptyMessage, stickyHeader, className, }: TableProps<T>): JSX.Element;
+
+export declare const DSTextarea: default_2.ForwardRefExoticComponent<DSTextareaProps & default_2.RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface DSTextareaProps extends Omit<default_2.TextareaHTMLAttributes<HTMLTextAreaElement>, ""> {
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    inputSize?: InputSize;
+    variant?: InputVariant;
+    state?: InputState;
+    showCharCount?: boolean;
+    maxLength?: number;
+    required?: boolean;
+}
+
+export declare const IconButton: default_2.ForwardRefExoticComponent<IconButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface IconButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    icon: default_2.ReactNode;
+    "aria-label": string;
+}
+
+export declare type InputSize = "sm" | "md" | "lg";
+
+export declare type InputState = "default" | "error" | "success" | "warning";
+
+export declare type InputVariant = "default" | "outlined" | "filled" | "ghost";
+
+export declare function Modal({ open, onClose, title, description, size, children, footer, closeOnOverlay, showCloseButton, className, }: ModalProps): JSX.Element | null;
+
+declare interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    size?: ModalSize;
+    children: default_2.ReactNode;
+    footer?: default_2.ReactNode;
+    closeOnOverlay?: boolean;
+    showCloseButton?: boolean;
+    className?: string;
+}
+
+export declare type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
+
+export declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, showPageSize, pageSizeOptions, pageSize, onPageSizeChange, totalItems, size, variant, disabled, showPageInfo, showItemsInfo, prevLabel, nextLabel, }: PaginationProps): JSX.Element;
+
+export declare interface PaginationProps {
+    /** Current active page (1-indexed) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Number of sibling pages to show on each side of current */
+    siblingCount?: number;
+    /** Show first/last page jump buttons */
+    showFirstLast?: boolean;
+    /** Show previous/next buttons */
+    showPrevNext?: boolean;
+    /** Show page size selector */
+    showPageSize?: boolean;
+    /** Available page sizes */
+    pageSizeOptions?: number[];
+    /** Current page size */
+    pageSize?: number;
+    /** Callback when page size changes */
+    onPageSizeChange?: (size: number) => void;
+    /** Total number of items (for info display) */
+    totalItems?: number;
+    /** Visual size */
+    size?: PaginationSize;
+    /** Visual variant */
+    variant?: PaginationVariant;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Show "Page X of Y" text */
+    showPageInfo?: boolean;
+    /** Show total items info */
+    showItemsInfo?: boolean;
+    /** Custom previous label */
+    prevLabel?: default_2.ReactNode;
+    /** Custom next label */
+    nextLabel?: default_2.ReactNode;
+}
+
+export declare type PaginationSize = "sm" | "md" | "lg";
+
+export declare type PaginationVariant = "default" | "outlined" | "filled" | "minimal";
+
+export declare function RadioGroup({ name, value: controlled, defaultValue, onChange, label, size, disabled, direction, children, error, className, }: RadioGroupProps): JSX.Element;
+
+declare interface RadioGroupProps {
+    name: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    label?: string;
+    size?: RadioSize;
+    disabled?: boolean;
+    direction?: "horizontal" | "vertical";
+    children: default_2.ReactNode;
+    error?: string;
+    className?: string;
+}
+
+declare interface RadioProps {
+    value: string;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    size?: RadioSize;
+    className?: string;
+}
+
+export declare type RadioSize = "sm" | "md" | "lg";
+
+export declare function SearchField({ value: controlled, onChange, onSearch, placeholder, size, variant, loading, suggestions, onSuggestionSelect, clearable, disabled, autoFocus, debounce, className, }: SearchFieldProps): JSX.Element;
+
+declare interface SearchFieldProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    placeholder?: string;
+    size?: SearchSize;
+    variant?: SearchVariant;
+    loading?: boolean;
+    suggestions?: SearchSuggestion[];
+    onSuggestionSelect?: (suggestion: SearchSuggestion) => void;
+    clearable?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    debounce?: number;
+    className?: string;
+}
+
+export declare type SearchSize = "sm" | "md" | "lg";
+
+declare interface SearchSuggestion {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: default_2.ReactNode;
+}
+
+export declare type SearchVariant = "default" | "outlined" | "filled";
+
+export declare interface TabItem {
+    id: string;
+    label: string;
+    icon?: default_2.ReactNode;
+    badge?: number | string;
+    disabled?: boolean;
+    content?: default_2.ReactNode;
+}
+
+export declare interface TableColumn<T = any> {
+    key: string;
+    header: string;
+    sortable?: boolean;
+    width?: string;
+    align?: "left" | "center" | "right";
+    render?: (value: any, row: T, index: number) => default_2.ReactNode;
+}
+
+declare interface TableProps<T = any> {
+    columns: TableColumn<T>[];
+    data: T[];
+    size?: TableSize;
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    selectable?: boolean;
+    selectedRows?: Set<number>;
+    onSelectionChange?: (selected: Set<number>) => void;
+    loading?: boolean;
+    emptyMessage?: string;
+    stickyHeader?: boolean;
+    className?: string;
+}
+
+export declare type TableSize = "sm" | "md" | "lg";
+
+export declare function Tabs({ tabs, variant, size, defaultTab, activeTab: controlled, onChange, fullWidth, className }: TabsProps): JSX.Element;
+
+export declare type TabSize = "sm" | "md" | "lg";
+
+declare interface TabsProps {
+    tabs: TabItem[];
+    variant?: TabVariant;
+    size?: TabSize;
+    defaultTab?: string;
+    activeTab?: string;
+    onChange?: (id: string) => void;
+    fullWidth?: boolean;
+    className?: string;
+}
+
+export declare type TabVariant = "default" | "bordered" | "pills" | "underline";
+
+export declare const toast: {
+    show: (opts: Omit<ToastData, "id">) => void;
+    info: (message: string, title?: string) => void;
+    success: (message: string, title?: string) => void;
+    warning: (message: string, title?: string) => void;
+    error: (message: string, title?: string) => void;
+    dismiss: (id: string) => void;
+};
+
+export declare function ToastContainer(): JSX.Element | null;
+
+declare interface ToastData {
+    id: string;
+    variant: AlertVariant;
+    title?: string;
+    message: string;
+    duration?: number;
+}
+
+export { }

package/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "@uxuissk/design-system",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/sellsuki-ds.umd.cjs",
+  "module": "./dist/sellsuki-ds.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/sellsuki-ds.js",
+      "require": "./dist/sellsuki-ds.umd.cjs"
+    },
+    "./styles": "./dist/sellsuki-ds.css",
+    "./styles.css": "./dist/sellsuki-ds.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:lib": "vite build --config vite.lib.config.ts",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "dependencies": {
+    "lucide-react": "0.487.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@mui/icons-material": "7.3.5",
+    "@mui/material": "7.3.5",
+    "@popperjs/core": "2.11.8",
+    "@radix-ui/react-accordion": "1.2.3",
+    "@radix-ui/react-alert-dialog": "1.1.6",
+    "@radix-ui/react-aspect-ratio": "1.1.2",
+    "@radix-ui/react-avatar": "1.1.3",
+    "@radix-ui/react-checkbox": "1.1.4",
+    "@radix-ui/react-collapsible": "1.1.3",
+    "@radix-ui/react-context-menu": "2.2.6",
+    "@radix-ui/react-dialog": "1.1.6",
+    "@radix-ui/react-dropdown-menu": "2.1.6",
+    "@radix-ui/react-hover-card": "1.1.6",
+    "@radix-ui/react-label": "2.1.2",
+    "@radix-ui/react-menubar": "1.1.6",
+    "@radix-ui/react-navigation-menu": "1.2.5",
+    "@radix-ui/react-popover": "1.1.6",
+    "@radix-ui/react-progress": "1.1.2",
+    "@radix-ui/react-radio-group": "1.2.3",
+    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-select": "2.1.6",
+    "@radix-ui/react-separator": "1.1.2",
+    "@radix-ui/react-slider": "1.2.3",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-tabs": "1.1.3",
+    "@radix-ui/react-toggle": "1.1.2",
+    "@radix-ui/react-toggle-group": "1.1.2",
+    "@radix-ui/react-tooltip": "1.1.8",
+    "@storybook/addon-a11y": "^8.4.0",
+    "@storybook/addon-essentials": "^8.4.0",
+    "@storybook/addon-interactions": "^8.4.0",
+    "@storybook/blocks": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-vite": "^8.4.0",
+    "@tailwindcss/vite": "4.1.12",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "4.7.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "date-fns": "3.6.0",
+    "embla-carousel-react": "8.6.0",
+    "input-otp": "1.4.2",
+    "motion": "12.23.24",
+    "next-themes": "0.4.6",
+    "react-day-picker": "8.10.1",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-hook-form": "7.55.0",
+    "react-popper": "2.3.0",
+    "react-resizable-panels": "2.1.7",
+    "react-responsive-masonry": "2.7.1",
+    "react-router": "7.13.0",
+    "react-slick": "0.31.0",
+    "recharts": "2.15.2",
+    "sonner": "2.0.3",
+    "storybook": "^8.4.0",
+    "tailwind-merge": "3.2.0",
+    "tailwindcss": "4.1.12",
+    "tw-animate-css": "1.3.8",
+    "typescript": "^5.5.0",
+    "vaul": "1.1.2",
+    "vite": "6.3.5",
+    "vite-plugin-dts": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "6.3.5"
+    }
+  }
+}