@sellgar/kit 0.0.52 → 0.0.54

package/package.json

@@ -1,8 +1,8 @@
 {
-  "type": "module",
   "name": "@sellgar/kit",
-  "version": "0.0.52",
-  "description": "Sellgar storybook",
+  "type": "module",
+  "version": "0.0.54",
+  "description": "Storybook",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./types/index.d.ts",
@@ -34,12 +34,14 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.6.13",
-    "@floating-ui/react": "0.27.4",
+    "@floating-ui/react": "0.27.5",
+    "@react-input/mask": "2.0.4",
     "@types/react-slider": "1.3.6",
     "classnames": "2.5.1",
+    "date-fns": "4.1.0",
+    "moment": "2.30.1",
     "overlayscrollbars": "2.11.1",
     "react-baron": "3.0.0",
-    "react-calendar": "5.1.0",
     "react-slider": "2.0.6"
   },
   "peerDependencies": {
@@ -56,9 +58,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "4.3.4",
-    "typescript": "5.7.3",
-    "vite": "6.2.0",
-    "vite-plugin-dts": "4.5.1",
+    "typescript": "5.8.2",
+    "vite": "6.2.1",
+    "vite-plugin-dts": "4.5.3",
     "vite-plugin-lib-inject-css": "2.2.1",
     "vite-plugin-webfont-dl": "3.10.4"
   },

package/types/components/helpers/dropdown/dropdown.d.ts

@@ -1,23 +1,19 @@
-import { ReferenceType } from '@floating-ui/react';
+import { ReferenceType, Placement } from '@floating-ui/react';
 import { default as React } from 'react';
 interface IOptions {
     initialOpen?: boolean;
     open?: boolean;
+    disabled?: boolean;
     setOpen?(open: boolean): void;
+    placement?: Placement;
 }
-declare const useDropdown: (options: IOptions) => {
+declare const useDropdown: ({ placement, ...options }: IOptions) => {
     open: boolean | undefined;
     setOpen: (open: boolean) => void;
     role: import('@floating-ui/react').ElementProps;
     dismiss: import('@floating-ui/react').ElementProps;
-    listRef: React.RefObject<(HTMLElement | null)[]>;
-    listContentRef: React.RefObject<(string | null)[]>;
-    activeIndex: number | null;
-    setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
-    selectedIndex: number | null;
-    setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>;
     floating: {
-        placement: import('@floating-ui/utils').Placement;
+        placement: Placement;
         strategy: import('@floating-ui/utils').Strategy;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         x: number;
@@ -37,7 +33,7 @@ declare const useDropdown: (options: IOptions) => {
         } & import('@floating-ui/react').ExtendedElements<ReferenceType>;
         context: {
             update: () => void;
-            placement: import('@floating-ui/utils').Placement;
+            placement: Placement;
             strategy: import('@floating-ui/utils').Strategy;
             x: number;
             y: number;
@@ -55,6 +51,7 @@ declare const useDropdown: (options: IOptions) => {
         };
     };
     interactions: import('@floating-ui/react').UseInteractionsReturn;
+    disabled: boolean | undefined;
 };
 type TDropdownContext = ReturnType<typeof useDropdown>;
 export declare const useDropdownContext: () => {
@@ -62,14 +59,8 @@ export declare const useDropdownContext: () => {
     setOpen: (open: boolean) => void;
     role: import('@floating-ui/react').ElementProps;
     dismiss: import('@floating-ui/react').ElementProps;
-    listRef: React.RefObject<(HTMLElement | null)[]>;
-    listContentRef: React.RefObject<(string | null)[]>;
-    activeIndex: number | null;
-    setActiveIndex: React.Dispatch<React.SetStateAction<number | null>>;
-    selectedIndex: number | null;
-    setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>;
     floating: {
-        placement: import('@floating-ui/utils').Placement;
+        placement: Placement;
         strategy: import('@floating-ui/utils').Strategy;
         middlewareData: import('@floating-ui/core').MiddlewareData;
         x: number;
@@ -89,7 +80,7 @@ export declare const useDropdownContext: () => {
         } & import('@floating-ui/react').ExtendedElements<ReferenceType>;
         context: {
             update: () => void;
-            placement: import('@floating-ui/utils').Placement;
+            placement: Placement;
             strategy: import('@floating-ui/utils').Strategy;
             x: number;
             y: number;
@@ -107,10 +98,12 @@ export declare const useDropdownContext: () => {
         };
     };
     interactions: import('@floating-ui/react').UseInteractionsReturn;
+    disabled: boolean | undefined;
 };
 interface IProps {
     initialOpen?: boolean;
     open?: boolean;
+    disabled?: boolean;
     setOpen?(open: boolean): void;
 }
 declare const DropdownWrapper: React.FC<React.PropsWithChildren<IProps>>;
@@ -118,21 +111,10 @@ interface IReferenceProps {
     reference(context: TDropdownContext): React.ReactNode;
 }
 declare const Reference: React.MemoExoticComponent<(props: IReferenceProps) => React.JSX.Element>;
-interface IOptionsProps {
-    empty: React.ReactNode;
-    options(context: TDropdownContext): React.ReactNode[];
-}
-declare const Options: React.MemoExoticComponent<(props: IOptionsProps) => React.JSX.Element | null>;
-interface IOptionProps {
-    index: number;
-    onClick?(event: React.MouseEvent<HTMLElement>): void;
-    option(context: TDropdownContext): React.ReactNode;
-}
-declare const Option: React.MemoExoticComponent<(props: IOptionProps) => React.JSX.Element>;
+declare const Target: React.FC<React.PropsWithChildren>;
 type TDropdown = typeof DropdownWrapper & {
     Reference: typeof Reference;
-    Options: typeof Options;
-    Option: typeof Option;
+    Target: typeof Target;
 };
 export declare const Dropdown: TDropdown;
 export {};

package/types/components/helpers/select-input/index.d.ts

@@ -0,0 +1 @@
+export { SelectInput } from './select-input.tsx';

package/types/components/helpers/select-input/select-input.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> {
+    ref?: React.RefCallback<HTMLInputElement>;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
+    badge?: string | number;
+    size?: 'xs' | 'md';
+    target?: 'destructive';
+    isFocused?: boolean;
+    isClearable?: boolean;
+    onClear?(): void;
+}
+export declare const SelectInput: React.FC<React.PropsWithChildren<IProps>>;

package/types/components/misc/base-option/base-option.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 interface IProps {
-    leadicon?: React.ReactNode;
+    leadIcon?: React.ReactNode;
     active?: boolean;
     label: string;
     badge?: string;

package/types/components/misc/menu-item/menu-item.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { TIconName } from '../../symbols';
 interface IProps {
-    leadicon?: TIconName;
+    leadIcon?: TIconName;
     caption: string;
     active?: boolean;
     badge?: React.ReactElement;

package/types/components/symbols/accordion/accordion.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { TIconName } from '../icon';
 interface IProps {
-    leadicon?: TIconName;
+    tabIndex?: number;
+    leadIcon?: React.ReactNode;
     header: string;
     size?: 'lg' | 'md';
     description?: string;

package/types/components/symbols/badge/badge.d.ts

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { TIconName } from '../icon';
 export interface IProps {
     color?: 'gray' | 'blue' | 'green' | 'red' | 'orange' | 'purple' | 'white' | 'surface' | 'white-destructive' | 'surface-destructive';
     state?: 'disabled';
@@ -7,8 +6,8 @@ export interface IProps {
     shape?: 'rounded' | 'pill';
     stroke?: boolean;
     disabled?: boolean;
-    leadicon?: TIconName;
-    tailicon?: TIconName;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
     label: string | number;
 }
 export declare const Badge: React.FC<IProps>;

package/types/components/symbols/breadcrumb/breadcrumb.d.ts

@@ -1,12 +1,11 @@
 import { default as React } from 'react';
-import { TIconName } from '../icon';
 interface IProps {
     size?: 'sm' | 'md';
     active?: boolean;
-    showdivider?: boolean;
+    showDivider?: boolean;
     divider?: '>' | '/';
-    leadicon?: TIconName;
-    tailicon?: TIconName;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
     label: string;
 }
 export declare const Breadcrumb: React.FC<IProps>;

package/types/components/symbols/button/button.d.ts

@@ -1,13 +1,12 @@
 import { default as React } from 'react';
-import { TIconName } from '../icon';
 interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     form?: 'icon-only';
     style?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
     size?: 'lg' | 'md' | 'sm' | 'xs';
     target?: 'destructive';
     shape?: 'rounded' | 'pill';
-    leadicon?: TIconName;
-    tailicon?: TIconName;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
     label?: string | number;
 }
 export declare const Button: React.FC<IProps>;

package/types/components/symbols/button-dropdown/button-dropdown.d.ts

@@ -1,13 +1,12 @@
 import { default as React } from 'react';
-import { TIconName } from '../icon';
 interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     form?: 'icon-only';
     style?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
     size?: 'lg' | 'md' | 'sm' | 'xs';
     target?: 'destructive';
     shape?: 'rounded' | 'pill';
-    leadicon?: TIconName;
-    tailicon?: TIconName;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
     label?: string | number;
 }
 export declare const ButtonDropdown: React.FC<IProps>;

package/types/components/symbols/button-icon/button-icon.d.ts

@@ -1,11 +1,10 @@
 import { default as React } from 'react';
-import { TIconName } from '../icon';
 interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     style: 'primary' | 'secondary' | 'tertiary' | 'ghost';
     size: 'lg' | 'md' | 'sm' | 'xs';
     target?: 'destructive';
     shape?: 'rounded' | 'pill';
-    icon: TIconName;
+    icon: React.ReactNode;
 }
 export declare const ButtonIcon: React.FC<IProps>;
 export {};

package/types/components/symbols/button-link/button-link.d.ts

@@ -1,13 +1,12 @@
 import { default as React } from 'react';
-import { TIconName } from '../icon';
 interface IProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
     form?: 'icon-only';
     style?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
     size?: 'md' | 'sm';
     target?: 'destructive';
     shape?: 'rounded' | 'pill';
-    leadicon?: TIconName;
-    tailicon?: TIconName;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
     label?: string | number;
 }
 export declare const ButtonLink: React.FC<IProps>;

package/types/components/symbols/calendar/calendar.d.ts

@@ -1,2 +1,9 @@
 import { default as React } from 'react';
-export declare const Calendar: () => React.JSX.Element;
+interface IProps {
+    defaultValue?: string;
+    value?: string;
+    format?: string;
+    onChange: (value: string | undefined) => void;
+}
+export declare const Calendar: React.FC<IProps>;
+export {};

package/types/components/symbols/calendar/controls/controls.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface IProps {
+    onApply: () => void;
+    onCancel: () => void;
+}
+export declare const Controls: React.FC<IProps>;
+export {};

package/types/components/symbols/calendar/controls/index.d.ts

@@ -0,0 +1 @@
+export { Controls } from './controls.tsx';

package/types/components/symbols/calendar/day/day.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface IProps {
+    isActive?: boolean;
+    isToday?: boolean;
+    isWeekday?: boolean;
+    onClick(): void;
+}
+export declare const Day: React.FC<React.PropsWithChildren<IProps>>;
+export {};

package/types/components/symbols/calendar/day/index.d.ts

@@ -0,0 +1 @@
+export { Day } from './day.tsx';

package/types/components/symbols/calendar/day-disabled/day-disabled.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+interface IProps {
+}
+export declare const DayDisabled: React.FC<React.PropsWithChildren<IProps>>;
+export {};

package/types/components/symbols/calendar/day-disabled/index.d.ts

@@ -0,0 +1 @@
+export { DayDisabled } from './day-disabled.tsx';

package/types/components/symbols/calendar/day-name/day-name.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface IProps {
+    isWeekday?: boolean;
+}
+export declare const DayName: React.FC<React.PropsWithChildren<IProps>>;
+export {};

package/types/components/symbols/calendar/day-name/index.d.ts

@@ -0,0 +1 @@
+export { DayName } from './day-name.tsx';

package/types/components/symbols/calendar/header/header.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface IProps {
+    year: number;
+    month: string;
+    onPrevMonthClick: () => void;
+    onNextMonthClick: () => void;
+}
+export declare const Header: React.FC<IProps>;
+export {};

package/types/components/symbols/calendar/header/index.d.ts

@@ -0,0 +1 @@
+export { Header } from './header.tsx';

package/types/components/symbols/calendar/inputs/controls/controls.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface IProps {
+    onApply: () => void;
+    onCancel: () => void;
+}
+export declare const Controls: React.FC<IProps>;
+export {};

package/types/components/symbols/calendar/inputs/controls/index.d.ts

@@ -0,0 +1 @@
+export { Controls } from './controls.tsx';

package/types/components/symbols/calendar/inputs/index.d.ts

@@ -0,0 +1 @@
+export { Inputs } from './inputs.tsx';

package/types/components/symbols/calendar/inputs/inputs.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface IProps {
+    value: string;
+    onChange(value: string): void;
+}
+export declare const Inputs: React.FC<IProps>;
+export {};

package/types/components/symbols/calendar/utils/factory-day.utils.d.ts

@@ -0,0 +1,7 @@
+export interface IDay {
+    type: 'prev-month' | 'next-month' | 'current-month' | 'day-week';
+    isToday: boolean;
+    isWeekday: boolean;
+    value: string;
+}
+export declare const factoryDay: (day: IDay) => IDay;

package/types/components/symbols/calendar/utils/get-days.utils.d.ts

@@ -0,0 +1,2 @@
+import { IDay } from './factory-day.utils.ts';
+export declare const getCalendarDays: (year: number, month: number) => IDay[];

package/types/components/symbols/calendar/week-day/index.d.ts

@@ -0,0 +1 @@
+export { WeekDay } from './week-day.tsx';

package/types/components/symbols/calendar/week-day/week-day.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface IProps {
+    isWeekday?: boolean;
+}
+export declare const WeekDay: React.FC<React.PropsWithChildren<IProps>>;
+export {};

package/types/components/symbols/caption-field/caption-field.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
-import { TIconName } from '../icon';
 export interface IProps {
-    leadicon?: TIconName;
+    leadIcon?: React.ReactNode;
     caption: string;
     state?: 'default' | 'success' | 'destructive';
 }

package/types/components/symbols/card/card.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface IProps {
+    type?: 'custom' | 'elevated' | 'flat';
+    image?: React.ReactNode;
+    alignment?: 'image-first' | 'content-first';
+}
+export declare const Card: React.FC<React.PropsWithChildren<IProps>>;
+export {};

package/types/components/symbols/card/index.d.ts

@@ -0,0 +1 @@
+export { Card } from './card.tsx';

package/types/components/symbols/chip/with-icon/with-icon.d.ts

@@ -6,7 +6,7 @@ export interface IProps {
     shape?: 'rounded' | 'pill';
     isActive?: boolean;
     disabled?: boolean;
-    leadicon?: TIconName;
+    leadIcon?: TIconName;
     label: string | number;
 }
 export declare const WithIcon: React.FC<IProps>;

package/types/components/symbols/datepicker/datepicker.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface IProps {
+    tailIcon?: React.ReactNode;
+    badge?: string | number;
+    size?: 'xs' | 'md';
+    target?: 'destructive';
+    value?: string;
+    defaultValue?: string;
+    tabIndex?: number;
+    placeholder?: string;
+    disabled?: boolean;
+    isClearable?: boolean;
+    format?: string;
+    displayFormat?: string;
+    templateValue?(value: string): React.ReactNode;
+    templateOption?(value: string): React.ReactNode;
+    onChange?: (value?: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+}
+export declare const Datepicker: React.FC<IProps>;

package/types/components/symbols/datepicker/index.d.ts

@@ -0,0 +1 @@
+export { Datepicker } from './datepicker.tsx';

package/types/components/symbols/datepicker/option/index.d.ts

@@ -0,0 +1 @@
+export { Option } from './option.tsx';

package/types/components/symbols/datepicker/option/option.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export interface IProps {
+    title: string;
+    disabled?: boolean;
+}
+export declare const Option: React.FC<IProps>;

package/types/components/symbols/datepicker/placeholder/index.d.ts

@@ -0,0 +1 @@
+export { Placeholder } from './placeholder.tsx';

package/types/components/symbols/datepicker/placeholder/placeholder.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface IProps {
+    title: string;
+}
+export declare const Placeholder: React.FC<IProps>;

package/types/components/symbols/index.d.ts

@@ -1,4 +1,5 @@
 export * from './icon';
+export * from './card';
 export * from './badge';
 export * from './button';
 export * from './button-icon';
@@ -11,8 +12,6 @@ export * from './input-select';
 export * from './textarea';
 export * from './label-field';
 export * from './caption-field';
-export * from './link';
-export * from './typography';
 export * from './accordion';
 export * from './avatar';
 export * from './chip';
@@ -25,3 +24,6 @@ export * from './breadcrumb';
 export * from './notification';
 export * from './modal';
 export * from './select';
+export * from './datepicker';
+export * from './typography';
+export * from './link-typography';

package/types/components/symbols/input/input.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 export interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> {
-    ref?: React.RefCallback<HTMLInputElement>;
-    leadicon?: React.ReactNode;
-    tailicon?: React.ReactNode;
+    ref?: React.RefObject<HTMLInputElement> | React.RefCallback<HTMLInputElement>;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
     badge?: string | number;
     size?: 'xs' | 'md';
     target?: 'destructive';

package/types/components/symbols/input-mask/index.d.ts

@@ -0,0 +1 @@
+export { InputMask } from './input-mask.tsx';

package/types/components/symbols/input-mask/input-mask.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { Replacement } from '@react-input/mask';
+import { IProps as IInputProps } from '../input/input.tsx';
+export interface IProps extends IInputProps {
+    mask: string;
+    replacement?: Replacement;
+}
+export declare const InputMask: React.FC<IProps>;

package/types/components/symbols/input-select/input-select.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 export interface IProps<T extends Record<string, any>, K extends keyof T> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className' | 'children'> {
-    leadicon?: React.ReactNode;
-    tailicon?: React.ReactNode;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
     badge?: string | number;
     size?: 'xs' | 'md';
     target?: 'destructive';

package/types/components/symbols/link-typography/index.d.ts

@@ -0,0 +1 @@
+export { LinkTypography } from './link-typography.tsx';

package/types/components/symbols/link-typography/link-typography.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const LinkTypography: React.FC<React.PropsWithChildren>;

package/types/components/symbols/select/input/input.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 export interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'> {
     ref?: React.RefCallback<HTMLInputElement>;
-    leadicon?: React.ReactNode;
-    tailicon?: React.ReactNode;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
     badge?: string | number;
     size?: 'xs' | 'md';
     target?: 'destructive';

package/types/components/symbols/select/select.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 export interface IProps<T extends Record<string, any>, K extends keyof T> {
-    leadicon?: React.ReactNode;
-    tailicon?: React.ReactNode;
+    leadIcon?: React.ReactNode;
+    tailIcon?: React.ReactNode;
     badge?: string | number;
     size?: 'xs' | 'md';
     target?: 'destructive';