shekel-fe-shared-lib 2.1.0 → 3.0.1

package/dist/types/components/Input/RadioCardGroup.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { Control } from 'react-hook-form';
+export interface RadioCardOption<V extends string | number = string> {
+    value: V;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RadioCardGroupProps<V extends string | number = string> {
+    options: RadioCardOption<V>[];
+    value?: V;
+    defaultValue?: V;
+    onChange?: (value: V, option: RadioCardOption<V>) => void;
+    label?: React.ReactNode;
+    labelClassName?: string;
+    labelStyle?: React.CSSProperties;
+    labelExtra?: React.ReactNode;
+    requiredMark?: React.ReactNode;
+    required?: boolean;
+    error?: string;
+    helperText?: string;
+    disabled?: boolean;
+    layout?: 'row' | 'column';
+    columns?: number;
+    gap?: number | string;
+    equalWidth?: boolean;
+    cardHeight?: number | string;
+    iconSize?: number;
+    titleSize?: number;
+    descriptionSize?: number;
+    radioSize?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    cardClassName?: string;
+    cardStyle?: React.CSSProperties;
+    accentColor?: string;
+    errorColor?: string;
+    borderColor?: string;
+    selectedBorderColor?: string;
+    selectedGlowColor?: string;
+    name?: string;
+    control?: Control<any>;
+    id?: string;
+}
+export declare function RadioCardGroup<V extends string | number = string>({ control, name, ...props }: RadioCardGroupProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Input/SelectInput.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+import { Control } from 'react-hook-form';
+export interface SelectInputOption {
+    value: string | number;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    [key: string]: any;
+}
+export type SelectInputValue = string | number | (string | number)[] | undefined;
+export interface SelectInputProps {
+    label?: React.ReactNode;
+    labelClassName?: string;
+    labelStyle?: React.CSSProperties;
+    labelExtra?: React.ReactNode;
+    requiredMark?: React.ReactNode;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    value?: SelectInputValue;
+    defaultValue?: SelectInputValue;
+    onChange?: (value: SelectInputValue, option?: SelectInputOption | SelectInputOption[]) => void;
+    options?: SelectInputOption[];
+    placeholder?: string;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    optionFilterProp?: 'label' | 'value';
+    filterOption?: boolean | ((input: string, option: SelectInputOption) => boolean);
+    onSearch?: (value: string) => void;
+    mode?: 'single' | 'multiple';
+    allowClear?: boolean;
+    height?: number | string;
+    borderRadius?: number | string;
+    className?: string;
+    style?: React.CSSProperties;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    onDropdownVisibleChange?: (open: boolean) => void;
+    control?: Control<any>;
+    name?: string;
+    id?: string;
+    notFoundContent?: React.ReactNode;
+    status?: 'error' | 'warning';
+    optionRender?: (option: SelectInputOption, info: {
+        selected: boolean;
+    }) => React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    prefixIcon?: React.ReactNode;
+    accentColor?: string;
+    errorColor?: string;
+    borderColor?: string;
+    filledBorderColor?: string;
+    selectedBgColor?: string;
+    selectedTextColor?: string;
+    optionHoverColor?: string;
+    tagBgColor?: string;
+    tagBorderColor?: string;
+}
+export declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/components/Input/Toggle.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { Control } from 'react-hook-form';
+export interface ToggleProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onChange?: (checked: boolean, event: React.SyntheticEvent) => void;
+    label?: React.ReactNode;
+    labelClassName?: string;
+    labelStyle?: React.CSSProperties;
+    labelPosition?: 'left' | 'right';
+    disabled?: boolean;
+    loading?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    trackWidth?: number;
+    trackHeight?: number;
+    knobSize?: number;
+    onColor?: string;
+    offColor?: string;
+    knobColor?: string;
+    loadingColor?: string;
+    checkedIcon?: React.ReactNode;
+    uncheckedIcon?: React.ReactNode;
+    name?: string;
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    control?: Control<any>;
+    autoFocus?: boolean;
+    tabIndex?: number;
+}
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/Input/_theme.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export declare const SHEKEL_DEFAULTS: {
+    accent: string;
+    error: string;
+    warning: string;
+    border: string;
+    filledBorder: string;
+    text: string;
+    placeholder: string;
+    addonBg: string;
+    disabledBg: string;
+    hoverBg: string;
+};
+export declare const hexWithAlpha: (hex: string, alpha: number) => string;
+export interface ErrorIconProps {
+    color?: string;
+    size?: number;
+    className?: string;
+}
+export declare const ErrorIcon: React.FC<ErrorIconProps>;

package/dist/types/components/Input/index.d.ts

@@ -3,8 +3,22 @@ export { PasswordInput } from './PasswordInput';
 export { OTPInput } from './OTPInput';
 export { PhoneInput } from './PhoneInput';
 export { CurrencyInput } from './CurrencyInput';
+export { SelectInput } from './SelectInput';
+export { DatePicker } from './DatePicker';
+export { DateRangePicker } from './DateRangePicker';
+export { AmountInput } from './AmountInput';
+export { FileUpload } from './FileUpload';
+export { RadioCardGroup } from './RadioCardGroup';
+export { Toggle } from './Toggle';
 export type { InputProps } from './Input';
 export type { PasswordInputProps } from './PasswordInput';
 export type { OTPInputProps } from './OTPInput';
 export type { PhoneInputProps } from './PhoneInput';
 export type { CurrencyInputProps } from './CurrencyInput';
+export type { SelectInputProps, SelectInputOption } from './SelectInput';
+export type { DatePickerProps, DateInput } from './DatePicker';
+export type { DateRangePickerProps, DateRangeInput, DateRangeValue } from './DateRangePicker';
+export type { AmountInputProps } from './AmountInput';
+export type { FileUploadProps, UploadedFile, FileUploadStatus } from './FileUpload';
+export type { RadioCardGroupProps, RadioCardOption } from './RadioCardGroup';
+export type { ToggleProps } from './Toggle';

package/dist/types/components/Modal.d.ts

@@ -1,23 +1,68 @@
-import { FC, ReactNode } from 'react';
-type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'responsive';
+import { default as React, ReactNode, CSSProperties } from 'react';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+export type ModalPlacement = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
+export type ModalMotion = 'auto' | 'fade' | 'scale' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
+export type ModalBackdrop = 'normal' | 'blur' | 'none';
 export interface ModalProps {
     open: boolean;
-    onClose: () => void;
-    title?: string;
-    children: ReactNode;
+    onClose?: () => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
     footer?: ReactNode;
-    width?: string | number;
+    okText?: ReactNode;
+    cancelText?: ReactNode;
+    onOk?: () => void | Promise<void>;
+    onCancel?: () => void;
+    confirmLoading?: boolean;
+    okDanger?: boolean;
+    okDisabled?: boolean;
+    hideCancel?: boolean;
     size?: ModalSize;
+    width?: number | string;
+    maxHeight?: number | string;
+    /** Position on screen. `center` is the classic dead-center dialog. Sets also drive the enter animation direction. */
+    placement?: ModalPlacement;
+    /** Alias for placement === 'center' when set. Kept for backwards compat; placement wins if both passed. */
+    centered?: boolean;
+    /** Margin from the nearest viewport edge (applies to non-center placements). */
+    edgeOffset?: number | string;
+    /** Override the entrance/exit motion. `auto` picks based on placement. */
+    motion?: ModalMotion;
+    /** Backdrop style: normal (dark tint), blur (dark + blur), or none. */
+    backdrop?: ModalBackdrop;
+    /** Custom close icon (replaces the default ×). */
+    closeIcon?: ReactNode;
+    /** Submit on Enter when focus is inside a non-textarea field. */
+    submitOnEnter?: boolean;
+    /** Bare mode: hides the chromed header/body/footer layout and gives you a blank panel to fill however you like. */
+    bare?: boolean;
+    /** Remove the default 16px body padding when content wants to draw edge-to-edge (e.g. a full-bleed image header). */
+    noPadding?: boolean;
     closable?: boolean;
     maskClosable?: boolean;
-    centered?: boolean;
-    className?: string;
+    closeOnEsc?: boolean;
+    destroyOnClose?: boolean;
+    lockScroll?: boolean;
     bgColor?: string;
-    headerBgColor?: string;
     overlayColor?: string;
-    bodyClassName?: string;
+    borderRadius?: number | string;
+    shadow?: string;
+    animationDuration?: number;
+    zIndex?: number;
+    className?: string;
+    style?: CSSProperties;
     headerClassName?: string;
-    maxHeight?: string | number;
+    headerStyle?: CSSProperties;
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    footerClassName?: string;
+    footerStyle?: CSSProperties;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
+    afterOpen?: () => void;
+    afterClose?: () => void;
+    getContainer?: () => HTMLElement;
 }
-export declare const Modal: FC<ModalProps>;
+export declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/dist/types/components/Steps.d.ts

@@ -1,7 +1,7 @@
 import { FC, ReactNode, CSSProperties } from 'react';
 export interface StepItem {
-    title: string;
-    description?: string;
+    title: ReactNode;
+    description?: ReactNode;
     status?: 'wait' | 'process' | 'finish' | 'error';
     icon?: ReactNode;
 }
@@ -9,15 +9,22 @@ export interface StepsProps {
     items: StepItem[];
     current?: number;
     direction?: 'horizontal' | 'vertical';
-    size?: 'sm' | 'md' | 'lg' | 'responsive';
-    variant?: 'default' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
     className?: string;
     style?: CSSProperties;
-    finishColor?: string;
-    processColor?: string;
-    waitColor?: string;
+    activeColor?: string;
+    inactiveColor?: string;
     errorColor?: string;
-    lineColor?: string;
+    textColor?: string;
+    activeTextColor?: string;
+    showConnector?: boolean;
+    connectorColor?: string;
+    gap?: number | string;
+    iconSize?: number;
+    checkSize?: number;
+    borderWidth?: number;
+    checkStrokeWidth?: number;
+    onStepClick?: (index: number) => void;
 }
 export declare const Steps: FC<StepsProps>;
 export default Steps;

package/dist/types/components/TabsComponent/TabsComponent.d.ts

@@ -1,8 +1,9 @@
 import { default as React } from 'react';
 export interface TabItem {
     key: string;
-    label: string;
+    label: React.ReactNode;
     children: React.ReactNode;
+    disabled?: boolean;
 }
 export interface TabsComponentProps {
     items: TabItem[];
@@ -10,5 +11,10 @@ export interface TabsComponentProps {
     activeKey?: string;
     onChange?: (activeKey: string) => void;
     className?: string;
+    tabBarClassName?: string;
+    contentClassName?: string;
+    accentColor?: string;
+    borderColor?: string;
+    animated?: boolean;
 }
 export declare const TabsComponent: React.FC<TabsComponentProps>;

package/dist/types/components/UserCard/UserCard.d.ts

@@ -5,5 +5,7 @@ export interface UserCardProps {
     role?: string;
     avatar?: string;
     className?: string;
+    avatarBgColor?: string;
+    avatarTextColor?: string;
 }
 export declare const UserCard: React.FC<UserCardProps>;

package/dist/types/components/UserPill/UserPill.d.ts

@@ -5,5 +5,8 @@ export interface UserPillProps {
     avatar?: string;
     className?: string;
     size?: 'small' | 'medium' | 'large';
+    bgColor?: string;
+    onClick?: () => void;
 }
 export declare const UserPill: React.FC<UserPillProps>;
+export default UserPill;

package/dist/types/components/UserProfileDropdown/UserProfileDropdown.d.ts

@@ -1,12 +1,23 @@
 import { default as React } from 'react';
-import { MenuProps } from 'antd';
+export interface UserProfileMenuItem {
+    key: string;
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    danger?: boolean;
+    disabled?: boolean;
+    divider?: boolean;
+    type?: 'divider';
+    onClick?: () => void;
+}
 export interface UserProfileDropdownProps {
     name: string;
     role?: string;
     avatarUrl?: string;
-    menuItems?: MenuProps['items'];
+    menuItems?: UserProfileMenuItem[];
     onMenuClick?: (key: string) => void;
     className?: string;
     width?: string | number;
+    bgColor?: string;
+    hoverBgColor?: string;
 }
 export declare const UserProfileDropdown: React.FC<UserProfileDropdownProps>;

package/dist/types/components/_Avatar.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface AvatarProps {
+    src?: string;
+    name?: string;
+    size?: number | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circle' | 'square';
+    bgColor?: string;
+    textColor?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/types/theme.d.ts

@@ -1,8 +1,27 @@
 import { default as React } from 'react';
-import { ThemeConfig } from 'antd';
-export declare const shekelTheme: ThemeConfig;
+export interface ShekelTheme {
+    accentColor: string;
+    errorColor: string;
+    warningColor: string;
+    borderColor: string;
+    filledBorderColor: string;
+    textColor: string;
+    mutedTextColor: string;
+    fontFamily: string;
+    borderRadius: number;
+}
+export declare const defaultTheme: ShekelTheme;
+/** Kept for backwards compatibility — prefer the `accentColor`/`errorColor` props on individual components. */
+export declare const shekelTheme: ShekelTheme;
+export declare const useShekelTheme: () => ShekelTheme;
 export type ShekelProviderProps = {
     children: React.ReactNode;
-    theme?: ThemeConfig;
+    /** Partial overrides merged into defaults. */
+    theme?: Partial<ShekelTheme>;
 };
-export declare const ShekelProvider: ({ children, theme }: ShekelProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Wraps your app to set the Shekel design tokens as CSS variables + context.
+ * You no longer need antd's ConfigProvider — every Shekel component reads its
+ * accent/error colors from its own props (which now fall back to these tokens).
+ */
+export declare const ShekelProvider: React.FC<ShekelProviderProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shekel-fe-shared-lib",
-  "version": "2.1.0",
+  "version": "3.0.1",
   "description": "Shared component library built with React and Tailwind CSS",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -21,6 +21,8 @@
   "scripts": {
     "dev": "vite demo",
     "build": "vite build",
+    "build:demo": "vite build --config demo/vite.config.ts",
+    "preview:demo": "vite preview --config demo/vite.config.ts --outDir ../demo-dist",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -49,19 +51,11 @@
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
-    "@ant-design/icons": "^5.0.0",
-    "antd": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.0.0"
   },
   "peerDependenciesMeta": {
-    "@ant-design/icons": {
-      "optional": true
-    },
-    "antd": {
-      "optional": true
-    },
     "react-hook-form": {
       "optional": true
     }