@houssemdi2000/design-system 1.4.9 → 1.5.1

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

@@ -12,5 +12,6 @@ export interface AccordionProps {
     allowMultiple?: boolean;
     iconColor?: string;
     borderColor?: string;
+    isDarkMode?: boolean;
 }
 export declare const Accordion: React.FC<AccordionProps>;

package/dist/components/ActionsBar/ActionBar.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./ActionBar.css";
+export interface ActionBarProps {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    isDarkMode?: boolean;
+}
+declare const ActionBar: React.FC<ActionBarProps>;
+export default ActionBar;

package/dist/components/ActionsBar/ActionBar.stories.d.ts

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

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./Alert.css";
+export type AlertType = "success" | "error" | "warning" | "info";
+export interface AlertProps {
+    type?: AlertType;
+    title?: string;
+    message: string | React.ReactNode;
+    icon?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+    actions?: React.ReactNode;
+    isDarkMode?: boolean;
+    style?: React.CSSProperties;
+}
+export declare const Alert: React.FC<AlertProps>;

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

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Alert").AlertProps>;
+};
+export default _default;
+export declare const Success: () => import("react/jsx-runtime").JSX.Element;
+export declare const Error: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithAction: () => import("react/jsx-runtime").JSX.Element;
+export declare const DarkMode: () => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Column/Column.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import "./Column.css";
 export interface ColumnProps {
     children?: React.ReactNode;
-    className?: "small" | "medium" | "large";
+    className?: "small" | "medium" | "large" | "1/2";
     style?: React.CSSProperties;
 }
 export declare const Column: React.FC<ColumnProps>;

package/dist/components/CustomText/CustomText.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "./CustomText.css";
+export interface CustomTextProps {
+    value: string;
+    masked?: boolean;
+    copyable?: boolean;
+    maskChar?: string;
+    revealLabel?: string;
+    copyLabel?: string;
+    onCopy?: () => void;
+    isDarkMode?: boolean;
+    width?: number | string;
+    border?: boolean;
+    copyIcon?: React.ReactNode;
+    successCopyIcon?: React.ReactNode;
+    successCopyAction?: () => void;
+    canSee?: boolean;
+    seeIcon?: React.ReactNode;
+    maskIcon?: React.ReactNode;
+}
+export declare const CustomText: React.FC<CustomTextProps>;

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

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./CustomText").CustomTextProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const DarkMode: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoMask: () => import("react/jsx-runtime").JSX.Element;
+export declare const CanSee: () => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/EditableField/EditableField.d.ts

@@ -15,5 +15,4 @@ export interface EditableFieldProps {
     focusShadow?: string;
     style?: React.CSSProperties;
 }
-declare const EditableField: React.FC<EditableFieldProps>;
-export default EditableField;
+export declare const EditableField: React.FC<EditableFieldProps>;

package/dist/components/Grid/Grid.d.ts

@@ -2,7 +2,7 @@ export interface GridColumn {
     children?: React.ReactNode;
     span?: number;
     style?: React.CSSProperties;
-    className?: "small" | "medium" | "large";
+    className?: "small" | "medium" | "large" | "1/2";
 }
 export interface GridProps {
     items: GridColumn[];

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

@@ -4,3 +4,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const HalfWidth: () => import("react/jsx-runtime").JSX.Element;
+export declare const Example: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./Header.css";
+export interface HeaderProps {
+    left?: React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
+    className?: string;
+    sticky?: boolean;
+    isDarkMode?: boolean;
+}
+export declare const Header: React.FC<HeaderProps>;

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

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

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

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

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./IconButton.css";
+export type IconButtonShape = "circle" | "square";
+export type IconButtonVariant = "default" | "ghost" | "danger" | "light";
+export type IconButtonSize = "small" | "medium" | "large";
+export interface IconButtonProps {
+    icon: React.ReactNode;
+    onClick?: () => void;
+    shape?: IconButtonShape;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    border?: boolean;
+    disabled?: boolean;
+    title?: string;
+    className?: string;
+}
+export declare const IconButton: React.FC<IconButtonProps>;

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

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

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

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

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

@@ -10,6 +10,10 @@ export interface InputProps {
     error?: string;
     fullWidth?: boolean;
     isDarkMode?: boolean;
+    required?: boolean;
+    description?: string;
+    showValidationIcon?: boolean;
+    isValid?: boolean;
     borderColor?: string;
     focusBorder?: string;
     focusShadow?: string;

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

@@ -8,5 +8,6 @@ export interface ModalProps {
     width?: string;
     footer?: React.ReactNode;
     isDarkMode?: boolean;
+    closeIcon?: React.ReactNode;
 }
 export declare const Modal: React.FC<ModalProps>;

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

@@ -1,25 +1,12 @@
 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";
+    left?: React.ReactNode;
+    center?: React.ReactNode;
+    right?: React.ReactNode;
     sticky?: boolean;
     isDarkMode?: boolean;
     height?: number;
+    className?: string;
 }
 export declare const Navbar: React.FC<NavbarProps>;

package/dist/components/SimpleTable/SimpleTable.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./SimpleTable.css";
+export interface SimpleTableProps {
+    items: React.ReactNode[];
+    size?: "small" | "medium" | "large";
+    isDarkMode?: boolean;
+    borderColor?: string;
+}
+export declare const SimpleTable: ({ items, size, isDarkMode, borderColor, }: SimpleTableProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    component: ({ items, size, isDarkMode, borderColor, }: import("./SimpleTable").SimpleTableProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./Stepper.css";
+export type StepStatus = "completed" | "active" | "disabled" | "error";
+export interface Step {
+    key: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    status?: StepStatus;
+}
+export interface StepperProps {
+    steps: Step[];
+    activeStep: number;
+    onStepClick?: (index: number) => void;
+    isDarkMode?: boolean;
+}
+export declare const Stepper: React.FC<StepperProps>;

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

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

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

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

package/dist/components/Tabs/Tab.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import './Tabs.css';
+export interface TabProps {
+    id: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    badge?: string;
+    disabled?: boolean;
+}
+export declare const Tab: React.FC<TabProps>;

package/dist/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface TabPanelProps {
+    when: string;
+    children: React.ReactNode;
+}
+export declare const TabPanel: React.FC<TabPanelProps>;

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./Tabs.css";
+interface TabsContextType {
+    activeTab: string;
+    setActiveTab: (id: string) => void;
+    isDarkMode?: boolean;
+}
+export declare const TabsContext: React.Context<TabsContextType | null>;
+export interface TabsProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    children: React.ReactNode;
+    isDarkMode?: boolean;
+}
+export declare const Tabs: React.FC<TabsProps>;
+export {};

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

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

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

@@ -0,0 +1,3 @@
+export * from './Tabs';
+export * from './Tab';
+export * from './TabPanel';

package/dist/components/TimeLine/SmartTimeLine.d.ts

@@ -10,6 +10,7 @@ export interface TimelineItem {
     status?: TimelineStatus;
     icon?: React.ReactNode;
     content?: React.ReactNode;
+    hoverText?: string;
 }
 export interface SmartTimelineProps {
     items: TimelineItem[];
@@ -20,3 +21,10 @@ export interface SmartTimelineProps {
     onItemClick?: (item: TimelineItem) => void;
 }
 export declare const SmartTimeline: React.FC<SmartTimelineProps>;
+interface TimeLineContainerProps {
+    children: React.ReactNode;
+    hover?: string;
+    isDarkMode?: boolean;
+}
+export declare const TimeLineContainer: React.FC<TimeLineContainerProps>;
+export {};

package/dist/components/TimeLine/SmartTimeLine.stories.d.ts

@@ -4,3 +4,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const Example: () => import("react/jsx-runtime").JSX.Element;
+export declare const Horizontal: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "./Tooltip.css";
+export interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    position?: "top" | "right" | "bottom" | "left";
+    isDarkMode?: boolean;
+    maxWidth?: number;
+    delay?: number;
+}
+export declare const Tooltip: React.FC<TooltipProps>;

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

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

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

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

package/dist/components/index.d.ts

@@ -27,13 +27,18 @@ export * from './Sidebar';
 export * from './Footer';
 export * from './Layout';
 export * from './DragDrop';
-export * from './SecureText';
+export * from './CustomText';
 export * from './Loading';
 export * from './Avatar';
 export * from './ProfileMenu';
 export * from './Colors';
 export * from './QuicklyLogin';
 export * from './Form';
-export * from './CardSheet';
 export * from './Accordion';
 export * from './EditableField';
+export * from './Alert';
+export * from './Tooltip';
+export * from './Header';
+export * from './SimpleTable';
+export * from './Stepper';
+export * from './Tabs';