@houssemdi2000/design-system 1.1.0 → 1.3.0

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "./Accordion.css";
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    openIds?: string[];
+    onToggle?: (id: string) => void;
+    allowMultiple?: boolean;
+    iconColor?: string;
+    borderColor?: string;
+}
+export declare const Accordion: React.FC<AccordionProps>;

package/dist/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Accordion").AccordionProps>;
+};
+export default _default;
+export declare const DemoAccordion: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from "./Accordion";

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "./Avatar.css";
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "rounded" | "square";
+export type AvatarStatus = "online" | "offline" | "away";
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    status?: AvatarStatus;
+    backgroundColor?: string;
+    color?: string;
+    onClick?: () => void;
+    isDarkMode?: boolean;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Avatar").AvatarProps>;
+};
+export default _default;
+export declare const DemoAvatar: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithImage: () => import("react/jsx-runtime").JSX.Element;
+export declare const Click: () => import("react/jsx-runtime").JSX.Element;
+export declare const Custom: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export * from './Avatar';

package/dist/components/Button/Button.d.ts

@@ -5,11 +5,17 @@ export interface ButtonProps {
     onClick?: () => void;
     variant?: "primary" | "secondary" | "danger" | "dark" | "light";
     size?: "small" | "medium" | "large";
+    style?: React.CSSProperties;
     disabled?: boolean;
     icon?: React.ReactNode;
     iconPosition?: "left" | "right";
     backgroundColor?: string;
     color?: string;
     isLoading?: boolean;
+    type?: "button" | "submit" | "reset";
+    mt?: number;
+    mb?: number;
+    mr?: number;
+    ml?: number;
 }
 export declare const Button: React.FC<ButtonProps>;

package/dist/components/Button/Button.stories.d.ts

@@ -14,3 +14,4 @@ export declare const WithIcon: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithIconRight: () => import("react/jsx-runtime").JSX.Element;
 export declare const CustomColors: () => import("react/jsx-runtime").JSX.Element;
 export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
+export declare const Margin: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Carousel/SmartCarousel.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./SmartCarousel.css";
+export interface CarouselImage {
+    src: string;
+    alt?: string;
+}
+export interface SmartCarouselProps {
+    images: CarouselImage[];
+    autoPlay?: boolean;
+    interval?: number;
+    showArrows?: boolean;
+    showDots?: boolean;
+    activeDotColor?: string;
+    isDarkMode?: boolean;
+    height?: number | string;
+}
+export declare const SmartCarousel: React.FC<SmartCarouselProps>;

package/dist/components/Carousel/SmartCarousel.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./SmartCarousel").SmartCarouselProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Carousel/index.d.ts

@@ -0,0 +1 @@
+export * from './SmartCarousel';

package/dist/components/Colors/Colors.d.ts

@@ -0,0 +1,182 @@
+export declare const Colors: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    secondary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    neutral: {
+        0: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    blue: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    yellow: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    orange: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    violet: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    pink: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    teal: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    facebook: string;
+    twitter: string;
+    instagram: string;
+    linkedin: string;
+    youtube: string;
+    github: string;
+    glass: {
+        light: string;
+        medium: string;
+        dark: string;
+    };
+    overlay: {
+        light: string;
+        medium: string;
+        heavy: string;
+    };
+    gradients: {
+        fire: string;
+        ocean: string;
+        sunset: string;
+        forest: string;
+        rainbow: string;
+    };
+    transparent: string;
+    white: string;
+    black: string;
+};
+export declare const tco: {
+    primary: string;
+    primaryDark: string;
+    success: string;
+    error: string;
+    warning: string;
+    info: string;
+    text: string;
+    textDark: string;
+    borderDark: string;
+    background: string;
+    backgroundDark: string;
+    backgroundDark2: string;
+    backgroundDark3: string;
+    border: string;
+};

package/dist/components/Colors/index.d.ts

@@ -0,0 +1 @@
+export * from "./Colors";

package/dist/components/DragDrop/DragDrop.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "./DragDrop.css";
+export interface DragDropItem<T> {
+    id: string;
+    data: T;
+}
+export interface DragDropProps<T> {
+    items: DragDropItem<T>[];
+    onChange: (items: DragDropItem<T>[]) => void;
+    renderItem: (item: T) => React.ReactNode;
+    direction?: "vertical" | "horizontal";
+    gap?: number;
+    draggable?: boolean;
+    isDarkMode?: boolean;
+}
+export declare function DragDrop<T>({ items, onChange, renderItem, direction, gap, draggable, isDarkMode, }: DragDropProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/DragDrop/DragDrop.stories.d.ts

@@ -0,0 +1,7 @@
+import { DragDrop } from "./DragDrop";
+declare const _default: {
+    title: string;
+    component: typeof DragDrop;
+};
+export default _default;
+export declare const DefaultDragDrop: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DragDrop/index.d.ts

@@ -0,0 +1 @@
+export * from './DragDrop';

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "./Footer.css";
+export interface FooterLink {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface FooterSection {
+    title?: string;
+    links?: FooterLink[];
+}
+export interface FooterProps {
+    left?: React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+    sections?: FooterSection[];
+    isDarkMode?: boolean;
+    height?: number;
+    fixed?: boolean;
+}
+export declare const Footer: React.FC<FooterProps>;

package/dist/components/Footer/Footer.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Footer").FooterProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Footer/index.d.ts

@@ -0,0 +1 @@
+export * from './Footer';

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import "./Form.css";
+import { ButtonProps } from "../Button";
+export interface FormField {
+    name: string;
+    type: "text" | "email" | "password" | "select" | "checkbox" | "radio";
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: RegExp;
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    color?: string;
+    style?: React.CSSProperties;
+}
+export interface FormBuilderProps {
+    fields: FormField[];
+    onSubmit: (values: Record<string, any>) => void;
+    header?: React.ReactNode;
+    btn?: ButtonProps;
+    layout?: "block" | "grid";
+    spacing?: number;
+    styles?: {
+        labelColor?: string;
+        errorColor?: string;
+        borderColor?: string;
+    };
+    isDarkMode?: boolean;
+}
+export declare const FormBuilder: React.FC<FormBuilderProps>;

package/dist/components/Form/Form.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Form").FormBuilderProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/index.d.ts

@@ -0,0 +1 @@
+export { FormBuilder, FormField, FormBuilderProps } from "./Form";

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

@@ -0,0 +1,18 @@
+import React from "react";
+import "./Input.css";
+export interface InputProps {
+    value: string;
+    onChange: (value: string) => void;
+    label?: string;
+    placeholder?: string;
+    type?: string;
+    disabled?: boolean;
+    error?: string;
+    fullWidth?: boolean;
+    isDarkMode?: boolean;
+    borderColor?: string;
+    focusBorder?: string;
+    focusShadow?: string;
+    style?: React.CSSProperties;
+}
+export declare const Input: React.FC<InputProps>;

package/dist/components/Input/Input.stories.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("./Input").InputProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithError: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomStyles: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export * from "./Input";

package/dist/components/Layout/Layout.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Layout.css";
+export interface LayoutProps {
+    header?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    withSidebar?: boolean;
+    withHeader?: boolean;
+    withFooter?: boolean;
+    sidebarWidth?: number;
+    isDarkMode?: boolean;
+}
+export declare const Layout: React.FC<LayoutProps>;

package/dist/components/Layout/Layout.stories.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("./Layout").LayoutProps>;
+};
+export default _default;
+export declare const DashboardPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Layout/index.d.ts

@@ -0,0 +1 @@
+export * from './Layout';

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./Loading.css";
+export type LoadingVariant = "spinner" | "dots" | "bar";
+export type LoadingSize = "xs" | "sm" | "md" | "lg";
+export interface LoadingProps {
+    variant?: LoadingVariant;
+    size?: LoadingSize;
+    text?: string;
+    fullscreen?: boolean;
+    overlay?: boolean;
+    color?: string;
+    isDarkMode?: boolean;
+}
+export declare const Loading: React.FC<LoadingProps>;

package/dist/components/Loading/Loading.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Loading").LoadingProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithText: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDots: () => import("react/jsx-runtime").JSX.Element;
+export declare const Fullscreen: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomDarkMode: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Loading/index.d.ts

@@ -0,0 +1 @@
+export * from './Loading';

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

@@ -0,0 +1,12 @@
+import React from "react";
+import "./Modal.css";
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    width?: string;
+    footer?: React.ReactNode;
+    isDarkMode?: boolean;
+}
+export declare const Modal: React.FC<ModalProps>;

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Modal").ModalProps>;
+};
+export default _default;
+export declare const DemoModal: () => import("react/jsx-runtime").JSX.Element;
+export declare const DarkModal: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export * from "./Modal";

package/dist/components/Navbar/Navbar.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import "./Navbar.css";
+export interface NavbarLink {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    active?: boolean;
+}
+export interface NavbarAction {
+    element?: React.ReactNode;
+    label?: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    variant?: "primary" | "secondary" | "ghost";
+}
+export interface NavbarProps {
+    logo?: React.ReactNode;
+    links?: NavbarLink[];
+    actions?: NavbarAction[];
+    position?: "left" | "center" | "right";
+    sticky?: boolean;
+    isDarkMode?: boolean;
+    height?: number;
+}
+export declare const Navbar: React.FC<NavbarProps>;

package/dist/components/Navbar/Navbar.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Navbar").NavbarProps>;
+};
+export default _default;
+export declare const AppNavbar: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Navbar/index.d.ts

@@ -0,0 +1 @@
+export * from './Navbar';

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "./Pagination.css";
+export interface PaginationProps {
+    page: number;
+    pageSize: number;
+    total: number;
+    color?: string;
+    position?: "left" | "center" | "right";
+    onPageChange: (page: number) => void;
+    isDarkMode?: boolean;
+}
+export declare const Pagination: React.FC<PaginationProps>;

package/dist/components/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("./Pagination").PaginationProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const DarkMode: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/components/ProfileMenu/ProfileMenu.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "./ProfileMenu.css";
+export interface ProfileUser {
+    name: string;
+    email?: string;
+    avatar?: string;
+}
+export interface ProfileAction {
+    label?: string;
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    danger?: boolean;
+    divider?: boolean;
+}
+export interface ProfileMenuProps {
+    user: ProfileUser;
+    actions: ProfileAction[];
+    isDarkMode?: boolean;
+}
+export declare const ProfileMenu: React.FC<ProfileMenuProps>;

package/dist/components/ProfileMenu/ProfileMenu.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./ProfileMenu").ProfileMenuProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProfileMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './ProfileMenu';

package/dist/components/QuicklyLogin/QuicklyLogin.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./QuicklyLogin.css";
+import { ButtonProps } from "../..";
+import { FormField } from "../Form";
+export interface QuicklyLoginProps {
+    fields: FormField[];
+    onSubmit: (values: Record<string, any>) => void;
+    image?: string;
+    imagePosition?: "left" | "right";
+    title?: string;
+    subtitle?: string;
+    footer?: React.ReactNode;
+    btn?: ButtonProps;
+    maxWidth?: number | string;
+    isDarkMode?: boolean;
+}
+export declare const QuicklyLogin: React.FC<QuicklyLoginProps>;

package/dist/components/QuicklyLogin/QuicklyLogin.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./QuicklyLogin").QuicklyLoginProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;