@houssemdi2000/design-system 1.0.0 → 1.1.0

package/dist/__tests__/Button.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/Bloc/Bloc.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "./Bloc.css";
+export type BlocLayout = "default" | "center" | "row" | "row-between" | "column" | "sidebar" | "navbar";
+export interface BlocProps {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    layout?: BlocLayout;
+}
+export declare const Bloc: React.FC<BlocProps>;

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

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Bloc").BlocProps>;
+};
+export default _default;
+export declare const Default: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomColors: () => import("react/jsx-runtime").JSX.Element;
+export declare const Navbar: () => import("react/jsx-runtime").JSX.Element;
+export declare const Sidebar: () => import("react/jsx-runtime").JSX.Element;
+export declare const Center: () => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -3,8 +3,13 @@ import React from "react";
 export interface ButtonProps {
     label: string;
     onClick?: () => void;
-    variant?: "primary" | "secondary" | "danger";
+    variant?: "primary" | "secondary" | "danger" | "dark" | "light";
     size?: "small" | "medium" | "large";
     disabled?: boolean;
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "right";
+    backgroundColor?: string;
+    color?: string;
+    isLoading?: boolean;
 }
 export declare const Button: React.FC<ButtonProps>;

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

@@ -0,0 +1,16 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Button").ButtonProps>;
+};
+export default _default;
+export declare const Primary: () => import("react/jsx-runtime").JSX.Element;
+export declare const Secondary: () => import("react/jsx-runtime").JSX.Element;
+export declare const Large: () => import("react/jsx-runtime").JSX.Element;
+export declare const Disabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const Dark: () => import("react/jsx-runtime").JSX.Element;
+export declare const Light: () => import("react/jsx-runtime").JSX.Element;
+export declare const Click: () => import("react/jsx-runtime").JSX.Element;
+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;

package/dist/components/Card/Card.d.ts

@@ -1,6 +1,12 @@
 import React from "react";
+import "./Card.css";
 export interface CardProps {
-    title: string;
-    content: string;
+    title?: string;
+    children: React.ReactNode;
+    backgroundColor?: string;
+    color?: string;
+    variant?: "elevated" | "outlined" | "flat";
+    padding?: "sm" | "md" | "lg";
+    footer?: React.ReactNode;
 }
 export declare const Card: React.FC<CardProps>;

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

@@ -0,0 +1,11 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Card").CardProps>;
+};
+export default _default;
+export declare const DefaultCard: () => import("react/jsx-runtime").JSX.Element;
+export declare const CardWithTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const GreenCard: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomContent: () => import("react/jsx-runtime").JSX.Element;
+export declare const LargePaddingCard: () => import("react/jsx-runtime").JSX.Element;
+export declare const DarkCard: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Center/Center.d.ts

@@ -0,0 +1,7 @@
+import "./Center.css";
+export interface CenterProps {
+    children: React.ReactNode;
+    backgroundColor?: string;
+    color?: string;
+}
+export declare const Center: React.FC<CenterProps>;

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

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

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "./Checkbox.css";
+export interface CheckboxProps {
+    label?: string;
+    checked: boolean;
+    onChange: (value: boolean) => void;
+    disabled?: boolean;
+    error?: boolean;
+    boxColor?: string;
+    checkColor?: string;
+    checkedBackground?: string;
+    focusShadow?: string;
+    style?: React.CSSProperties;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;

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

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

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

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

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

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

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

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

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./Container.css";
+export interface ContainerProps {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    fluid?: boolean;
+}
+export declare const Container: React.FC<ContainerProps>;

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

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

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

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

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface DividerProps {
+    color?: string;
+    thickness?: number;
+    orientation?: "horizontal" | "vertical";
+    margin?: number;
+}
+export declare const Divider: React.FC<DividerProps>;

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

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

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

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

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

@@ -0,0 +1,10 @@
+export interface GridColumn {
+    children?: React.ReactNode;
+    span?: number;
+    style?: React.CSSProperties;
+    className?: "small" | "medium" | "large";
+}
+export interface GridProps {
+    items: GridColumn[];
+}
+export declare const Grid: React.FC<GridProps>;

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

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

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

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

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "./Radio.css";
+export interface RadioProps {
+    label?: string;
+    name: string;
+    value: string;
+    selectedValue: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+    error?: boolean;
+    borderColor?: string;
+    dotColor?: string;
+    checkedBorderColor?: string;
+    checkedBackground?: string;
+    focusShadow?: string;
+    style?: React.CSSProperties;
+}
+export declare const Radio: React.FC<RadioProps>;

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

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

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

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

package/dist/components/Row/Row.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./Row.css";
+export interface RowProps {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Row: React.FC<RowProps>;

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

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

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import "./Select.css";
+export interface SelectOption {
+    value: string | number;
+    label: string;
+    bgColor?: string;
+    textColor?: string;
+}
+export interface SelectProps {
+    label?: string;
+    value: string | number;
+    onChange: (value: string | number) => void;
+    options: SelectOption[];
+    disabled?: boolean;
+    error?: boolean;
+    borderColor?: string;
+    focusBorder?: string;
+    focusShadow?: string;
+    errorColor?: string;
+    style?: React.CSSProperties;
+}
+export declare const Select: React.FC<SelectProps>;

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

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

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

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

package/dist/components/Spacer/Spacer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface SpacerProps {
+    size?: number;
+    direction?: "vertical" | "horizontal";
+}
+export declare const Spacer: React.FC<SpacerProps>;

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

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

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

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

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "./TextField.css";
+export interface TextFieldProps {
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    error?: string;
+    disabled?: boolean;
+    type?: string;
+    fullWidth?: boolean;
+    icon?: React.ReactNode;
+}
+export declare const TextField: React.FC<TextFieldProps>;

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

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./TextField").TextFieldProps>;
+};
+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 Disabled: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithIcon: () => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Toast/ToastContext.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import "./Toast.css";
+export type ToastVariant = "success" | "error" | "warning" | "info";
+export interface Toast {
+    id: string;
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+}
+interface ToastContextType {
+    addToast: (msg: string, variant?: ToastVariant, duration?: number) => void;
+}
+export declare const useToast: () => ToastContextType;
+export declare const ToastProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export {};

package/dist/components/index.d.ts

@@ -1 +1,14 @@
 export * from './Button';
+export * from './Center';
+export * from './Card';
+export * from './Bloc';
+export * from './Container';
+export * from './Row';
+export * from './Column';
+export * from './Grid';
+export * from './Spacer';
+export * from './Divider';
+export * from './Checkbox';
+export * from './TextField';
+export * from './Radio';
+export * from './Select';

package/dist/index.esm.js

@@ -1,10 +1,10 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
-  if (typeof document === 'undefined') { return; }
+  if (!css || typeof document === 'undefined') { return; }
 
   var head = document.head || document.getElementsByTagName('head')[0];
   var style = document.createElement('style');
@@ -27,12 +27,142 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".btn{border:none;border-radius:4px;cursor:pointer;font-size:16px;font-weight:500;padding:10px 20px;transition:all .3s ease}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3}.btn-secondary{background-color:#6c757d;color:#fff}.btn-danger{background-color:#dc3545;color:#fff}.btn-small{font-size:14px;padding:5px 10px}.btn-medium{font-size:16px;padding:10px 20px}.btn-large{font-size:18px;padding:15px 30px}.btn:disabled{cursor:not-allowed;opacity:.5}";
+var css_248z$a = ".btn{align-items:center;border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-size:16px;font-weight:500;justify-content:center;padding:10px 20px;transition:all .3s ease}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3}.btn-secondary{background-color:#6c757d;color:#fff}.btn-danger{background-color:#dc3545;color:#fff}.btn-dark{background-color:#141617;color:#fff}.btn-light{background-color:#f8f9fa;color:#000}.btn-small{font-size:14px;padding:5px 10px}.btn-medium{font-size:16px;padding:10px 20px}.btn-large{font-size:18px;padding:15px 30px}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-left-icon{margin-right:8px}.btn-left-icon,.btn-right-icon{align-items:center;display:inline-flex}.btn-right-icon{margin-left:8px}.btn-spinner{animation:spin .7s linear infinite;border:3px solid hsla(0,0%,100%,.4);border-radius:50%;border-top-color:#fff;display:inline-block;height:12px;margin-left:5px;width:12px}@keyframes spin{to{transform:rotate(1turn)}}.btn-loading{cursor:not-allowed;position:relative}.btn-loading span,.btn-loading svg{opacity:0}.btn-loading>:not(.btn-spinner){visibility:hidden}";
+styleInject(css_248z$a);
+
+const Button = ({ label, onClick, variant = "primary", size = "medium", disabled = false, icon, iconPosition = "left", backgroundColor, color, isLoading = false, }) => {
+    return (jsx(Fragment, { children: jsxs("button", { className: `btn btn-${variant} btn-${size}`, onClick: onClick, disabled: disabled || isLoading, style: { backgroundColor, color }, children: [icon && iconPosition === "left" && jsx("span", { className: "btn-left-icon", children: icon }), label, icon && iconPosition === "right" && jsx("span", { className: "btn-right-icon", children: icon }), isLoading && jsx("span", { className: "btn-spinner" })] }) }));
+};
+
+var css_248z$9 = ".center{align-items:center;display:flex;justify-content:center}";
+styleInject(css_248z$9);
+
+const Center = ({ children, backgroundColor = 'white', color = 'black' }) => {
+    return jsx("div", { className: "center", style: { backgroundColor, color }, children: children });
+};
+
+var css_248z$8 = ".card{background:#fff;border-radius:12px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.card-elevated{box-shadow:0 2px 4px rgba(0,0,0,.08),0 8px 16px rgba(0,0,0,.06)}.card-elevated:hover{box-shadow:0 4px 8px rgba(0,0,0,.1),0 12px 24px rgba(0,0,0,.08);transform:translateY(-2px)}.card-outlined{border:1px solid #e5e7eb}.card-flat{background:transparent;border:none}.card-padding-sm{padding:8px}.card-padding-md{padding:16px}.card-padding-lg{padding:24px}.card-header{font-size:1.25rem;font-weight:600;margin-bottom:4px}.card-body{font-size:.95rem;line-height:1.5}.card-footer{border-top:1px solid #ececec;color:#555;font-size:.9rem;margin-top:8px;padding-top:8px}";
+styleInject(css_248z$8);
+
+const Card = ({ title, children, footer, backgroundColor, color, variant = "elevated", padding = "md", }) => {
+    return (jsxs("div", { className: `card card-${variant} card-padding-${padding}`, style: { backgroundColor, color }, children: [title && jsx("div", { className: "card-header", children: title }), jsx("div", { className: "card-body", children: children }), footer && jsx("div", { className: "card-footer", children: footer })] }));
+};
+
+var css_248z$7 = ".bloc{box-sizing:border-box;max-width:100%;padding:16px;width:100%}@media (max-width:600px){.bloc{border-radius:6px;padding:12px}}@media (max-width:900px){.bloc{padding:14px}}";
+styleInject(css_248z$7);
+
+const Bloc = ({ children, className = "", style = {}, layout = "default", }) => {
+    const layoutStyles = (() => {
+        switch (layout) {
+            case "center":
+                return { display: "flex", justifyContent: "center", alignItems: "center" };
+            case "row":
+                return { display: "flex", flexDirection: "row", alignItems: "center" };
+            case "row-between":
+                return { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center" };
+            case "column":
+                return { display: "flex", flexDirection: "column", alignItems: "flex-start" };
+            case "sidebar":
+                return { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "12px" };
+            case "navbar":
+                return { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: "12px 20px" };
+            default:
+                return {};
+        }
+    })();
+    return (jsx("div", { className: `bloc ${className}`, style: Object.assign(Object.assign({}, layoutStyles), style), children: children }));
+};
+
+var css_248z$6 = ".container{margin:0 auto;padding:0 16px;width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1200px}}.container-fluid{max-width:100%}";
+styleInject(css_248z$6);
+
+const Container = ({ children, className = "", style = {}, fluid = false }) => {
+    return (jsx("div", { className: `container ${fluid ? "container-fluid" : ""} ${className}`, style: style, children: children }));
+};
+
+var css_248z$5 = ".row{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:16px}@media (max-width:768px){.row{flex-direction:column}}";
+styleInject(css_248z$5);
+
+const Row = ({ children, className = "", style = {} }) => {
+    return jsx("div", { className: `row ${className}`, style: Object.assign({}, style), children: children });
+};
+
+var css_248z$4 = ".col,.column{box-sizing:border-box;flex:1 1 0;min-width:0;padding:8px}.col.small{max-width:20%}.col.medium{max-width:50%}.col.large{max-width:100%}.col>*,.column>*{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.col img,.column img{display:block;height:auto;max-width:100%}@media (max-width:768px){.col,.col.large,.col.medium,.col.small,.column{flex:none;max-width:100%;width:100%}}";
+styleInject(css_248z$4);
+
+const Column = ({ children, className = "", style = {} }) => {
+    return (jsx("div", { className: `col ${className}`, style: Object.assign({}, style), children: children }));
+};
+
+const Grid = ({ items }) => {
+    return (jsx(Row, { children: items.map((item, index) => (jsx(Column, { className: item.className, style: Object.assign({}, item.style), children: item.children }, index))) }));
+};
+
+const Spacer = ({ size = 16, direction = "vertical" }) => {
+    const style = direction === "vertical"
+        ? { height: size }
+        : { width: size, display: "inline-block" };
+    return jsx("div", { style: style });
+};
+
+const Divider = ({ color = "#e0e0e0", thickness = 1, orientation = "horizontal", margin = 8, }) => {
+    const styles = orientation === "horizontal"
+        ? {
+            width: "100%",
+            height: thickness,
+            backgroundColor: color,
+            margin: `${margin}px 0`,
+        }
+        : {
+            width: thickness,
+            height: "100%",
+            backgroundColor: color,
+            margin: `0 ${margin}px`,
+        };
+    return jsx("div", { style: styles });
+};
+
+var css_248z$3 = ".checkbox-container{align-items:center;cursor:pointer;display:flex;font-family:sans-serif;gap:8px;user-select:none}.checkbox-container.disabled{cursor:not-allowed;opacity:.5}.checkbox-container input{appearance:none;-webkit-appearance:none;height:0;position:absolute;width:0}.checkbox-box{border:2px solid var(--cb-box-color,#777);border-radius:4px;display:inline-block;height:18px;position:relative;transition:.2s ease;width:18px}.checkbox-container input:checked+.checkbox-box{background-color:var(--cb-checked-bg,#007bff);border-color:var(--cb-checked-bg,#007bff)}.checkbox-container input:checked+.checkbox-box:after{border-width:medium;border-bottom:2px solid var(--cb-check-color,#fff);border-left:0 solid var(--cb-check-color,#fff);border-right:2px solid var(--cb-check-color,#fff);border-top:0 solid var(--cb-check-color,#fff);content:\"\";height:10px;left:5px;position:absolute;top:1px;transform:rotate(45deg);width:5px}.checkbox-container input:focus+.checkbox-box{box-shadow:0 0 4px var(--cb-focus-shadow,rgba(0,123,255,.4))}.checkbox-box.error{border-color:#d93025!important}.checkbox-label{font-size:14px}";
+styleInject(css_248z$3);
+
+const Checkbox = ({ label, checked, onChange, disabled = false, error = false, boxColor = "#777", checkColor = "#fff", checkedBackground = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", style, }) => {
+    return (jsxs("label", { className: `checkbox-container ${disabled ? "disabled" : ""}`, style: {
+            ["--cb-box-color"]: boxColor,
+            ["--cb-check-color"]: checkColor,
+            ["--cb-checked-bg"]: checkedBackground,
+            ["--cb-focus-shadow"]: focusShadow,
+        }, children: [jsx("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked) }), jsx("span", { className: `checkbox-box ${error ? "error" : ""}` }), label && jsx("span", { className: "checkbox-label", children: label })] }));
+};
+
+var css_248z$2 = ".textfield{display:flex;flex-direction:column;font-family:sans-serif;gap:6px}.fullWidth{width:100%}.textfield-label{color:#333;font-size:14px;font-weight:600}.textfield-input{border:1px solid #ccc;border-radius:6px;font-size:14px;padding:10px 12px;transition:.2s ease}.textfield-input:focus{border-color:#4c00ff;box-shadow:0 0 2px #007bff;outline:none}.textfield-input.error{background-color:#fff5f5;border-color:#d93025}.textfield-error{background-color:#f44343;color:#ece6e6;font-size:12px;padding:8px}.textfield-icon{position:absolute;right:45px;top:45px;width:2px}";
+styleInject(css_248z$2);
+
+const TextField = ({ label, value = "", placeholder, onChange, error, disabled = false, type = "text", fullWidth = true, icon, }) => {
+    return (jsxs("div", { className: `textfield ${fullWidth ? "fullWidth" : ""}`, children: [label && jsx("label", { className: "textfield-label", children: label }), jsx("input", { type: type, className: `textfield-input ${error ? "error" : ""}`, value: value, placeholder: placeholder, disabled: disabled, onChange: (e) => onChange && onChange(e.target.value) }), icon && jsx("div", { className: "textfield-icon", children: icon }), error && jsx("p", { className: "textfield-error", children: error })] }));
+};
+
+var css_248z$1 = ".radio-container{align-items:center;cursor:pointer;display:flex;font-family:sans-serif;gap:8px}.radio-container input{display:none}.radio-circle{align-items:center;border:2px solid var(--rd-border-color,#777);border-radius:50%;display:flex;height:18px;justify-content:center;position:relative;transition:.2s ease;width:18px}.radio-circle:after{background-color:var(--rd-dot-color,#fff);border-radius:50%;content:\"\";height:10px;opacity:0;transform:scale(.4);transition:.2s ease;width:10px}.radio-container input:checked+.radio-circle{background-color:var(--rd-checked-bg,#007bff);border-color:var(--rd-checked-border,#007bff)}.radio-container input:checked+.radio-circle:after{opacity:1;transform:scale(1)}.radio-circle.error{border-color:#d93025!important}.radio-label{font-size:14px}.disabled{cursor:not-allowed;opacity:.6}";
+styleInject(css_248z$1);
+
+const Radio = ({ label, name, value, selectedValue, onChange, disabled = false, error = false, borderColor = "#777", dotColor = "#fff", checkedBorderColor = "#007bff", checkedBackground = error ? "#d93025" : "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", style, }) => {
+    const checked = selectedValue === value;
+    return (jsxs("label", { className: `radio-container ${disabled ? "disabled" : ""}`, style: Object.assign(Object.assign({}, style), { ["--rd-border-color"]: borderColor, ["--rd-dot-color"]: dotColor, ["--rd-checked-border"]: checkedBorderColor, ["--rd-checked-bg"]: checkedBackground, ["--rd-focus-shadow"]: focusShadow }), children: [jsx("input", { type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: () => onChange(value) }), jsx("span", { className: `radio-circle ${error ? "error" : ""}` }), label && jsx("span", { className: "radio-label", children: label })] }));
+};
+
+var css_248z = ".select-wrapper{display:flex;flex-direction:column;font-family:sans-serif;gap:4px}.select-label{font-size:14px;font-weight:500}.select-container{position:relative;width:100%}.select-container select{background:#fff;border:1px solid var(--sel-border,#ccc);border-radius:6px;cursor:pointer;font-size:15px;padding:10px 12px;transition:all .2s ease;width:100%}.select-container select:focus{border-color:var(--sel-focus-border,#007bff);box-shadow:0 0 0 2px var(--sel-focus-shadow,rgba(0,123,255,.4));outline:none}.select-container.disabled select{background:#f2f2f2;cursor:not-allowed;opacity:.6}.select-container.error select{border-color:var(--sel-error,red)}.select-container.error select:focus{border-color:var(--sel-error,red);box-shadow:0 0 0 2px rgba(230,57,70,.35)}";
 styleInject(css_248z);
 
-const Button = ({ label, onClick, variant = "primary", size = "medium", disabled = false, }) => {
-    return (jsx(Fragment, { children: jsx("button", { className: `btn btn-${variant} btn-${size}`, onClick: onClick, disabled: disabled, children: label }) }));
+const Select = ({ label, value, onChange, options, disabled = false, error = false, borderColor = "#ccc", focusBorder = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", errorColor = "#e63946", style, }) => {
+    return (jsxs("div", { className: "select-wrapper", style: style, children: [label && jsx("label", { className: "select-label", children: label }), jsx("div", { className: `select-container ${disabled ? "disabled" : ""} ${error ? "error" : ""}`, children: jsx("select", { value: value, disabled: disabled, onChange: (e) => onChange(e.target.value), style: {
+                        ["--sel-border"]: borderColor,
+                        ["--sel-focus-border"]: focusBorder,
+                        ["--sel-focus-shadow"]: focusShadow,
+                        ["--sel-error"]: errorColor,
+                    }, children: options.map((opt) => (jsx("option", { value: opt.value, style: {
+                            backgroundColor: opt.bgColor,
+                            color: opt.textColor,
+                        }, children: opt.label }, opt.value))) }) })] }));
 };
 
-export { Button };
+export { Bloc, Button, Card, Center, Checkbox, Column, Container, Divider, Grid, Radio, Row, Select, Spacer, TextField };
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import \"./Button.css\";\r\nimport React from \"react\";\r\n\r\n\r\nexport interface ButtonProps {\r\n  label: string;\r\n  onClick?: () => void;\r\n  variant?: \"primary\" | \"secondary\" | \"danger\";\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  label,\r\n  onClick,\r\n  variant = \"primary\",\r\n  size = \"medium\",\r\n  disabled = false,\r\n}) => {\r\n  return (\r\n    <>\r\n      <button\r\n        className={`btn btn-${variant} btn-${size}`}\r\n        onClick={onClick}\r\n        disabled={disabled}\r\n      >\r\n        {label}\r\n      </button>\r\n    </>\r\n  );\r\n};\r\n"],"names":["_jsx"],"mappings":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;MCba,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,GACjB,KAAI;IACH,QACEA,0BACEA,GAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,CAAA,QAAA,EAAW,OAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,EAC3C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,YAEjB,KAAK,EAAA,CACC,EAAA,CACR;AAEP;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Center/Center.tsx","../src/components/Card/Card.tsx","../src/components/Bloc/Bloc.tsx","../src/components/Container/Container.tsx","../src/components/Row/Row.tsx","../src/components/Column/Column.tsx","../src/components/Grid/Grid.tsx","../src/components/Spacer/Spacer.tsx","../src/components/Divider/Divider.tsx","../src/components/Checkbox/Checkbox.tsx","../src/components/TextField/TextField.tsx","../src/components/Radio/Radio.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import \"./Button.css\";\r\nimport React from \"react\";\r\n\r\n\r\nexport interface ButtonProps {\r\n  label: string;\r\n  onClick?: () => void;\r\n  variant?: \"primary\" | \"secondary\" | \"danger\" | \"dark\" | \"light\";\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n  disabled?: boolean;\r\n  icon?: React.ReactNode;\r\n  iconPosition?: \"left\" | \"right\";\r\n  backgroundColor?: string;\r\n  color?: string;\r\n  isLoading?: boolean;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  label,\r\n  onClick,\r\n  variant = \"primary\",\r\n  size = \"medium\",\r\n  disabled = false,\r\n  icon,\r\n  iconPosition = \"left\",\r\n  backgroundColor,\r\n  color,\r\n  isLoading = false,\r\n}) => {\r\n  return (\r\n    <>\r\n      <button\r\n        className={`btn btn-${variant} btn-${size}`}\r\n        onClick={onClick}\r\n        disabled={disabled || isLoading}\r\n        style={{ backgroundColor, color }}\r\n      >\r\n        {icon && iconPosition === \"left\" && <span className=\"btn-left-icon\">{icon}</span>}\r\n        {label}\r\n        {icon && iconPosition === \"right\" && <span className=\"btn-right-icon\">{icon}</span>}\r\n        {isLoading && <span className=\"btn-spinner\"></span>}\r\n      </button>\r\n    </>\r\n  );\r\n};\r\n","import \"./Center.css\"\r\n\r\nexport interface CenterProps {\r\n  children: React.ReactNode;\r\n  backgroundColor?: string;\r\n  color?: string;\r\n}\r\n\r\nexport const Center: React.FC<CenterProps> = ({ children, backgroundColor = 'white', color = 'black' }) => {\r\n  return <div className=\"center\" style={{ backgroundColor, color}}>{children}</div>;\r\n};\r\n","import React from \"react\";\r\nimport \"./Card.css\";\r\n\r\nexport interface CardProps {\r\n  title?: string;\r\n  children: React.ReactNode;\r\n  backgroundColor?: string;\r\n  color?: string;\r\n  variant?: \"elevated\" | \"outlined\" | \"flat\";\r\n  padding?: \"sm\" | \"md\" | \"lg\";\r\n  footer?: React.ReactNode;\r\n}\r\n\r\nexport const Card: React.FC<CardProps> = ({\r\n  title,\r\n  children,\r\n  footer,\r\n  backgroundColor,\r\n  color,\r\n  variant = \"elevated\",\r\n  padding = \"md\",\r\n}) => {\r\n  return (\r\n    <div\r\n      className={`card card-${variant} card-padding-${padding}`}\r\n      style={{ backgroundColor, color }}\r\n    >\r\n      {title && <div className=\"card-header\">{title}</div>}\r\n      <div className=\"card-body\">{children}</div>\r\n      {footer && <div className=\"card-footer\">{footer}</div>}\r\n    </div>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Bloc.css\";\r\n\r\nexport type BlocLayout =\r\n  | \"default\"\r\n  | \"center\"\r\n  | \"row\"\r\n  | \"row-between\"\r\n  | \"column\"\r\n  | \"sidebar\"\r\n  | \"navbar\";\r\n\r\nexport interface BlocProps {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n  layout?: BlocLayout;\r\n}\r\n\r\nexport const Bloc: React.FC<BlocProps> = ({\r\n  children,\r\n  className = \"\",\r\n  style = {},\r\n  layout = \"default\",\r\n}) => {\r\n  const layoutStyles: React.CSSProperties = (() => {\r\n    switch (layout) {\r\n      case \"center\":\r\n        return { display: \"flex\", justifyContent: \"center\", alignItems: \"center\" };\r\n      case \"row\":\r\n        return { display: \"flex\", flexDirection: \"row\", alignItems: \"center\" };\r\n      case \"row-between\":\r\n        return { display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\", alignItems: \"center\" };\r\n      case \"column\":\r\n        return { display: \"flex\", flexDirection: \"column\", alignItems: \"flex-start\" };\r\n      case \"sidebar\":\r\n        return { display: \"flex\", flexDirection: \"column\", alignItems: \"flex-start\", gap: \"12px\" };\r\n      case \"navbar\":\r\n        return { display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\", alignItems: \"center\", padding: \"12px 20px\" };\r\n      default:\r\n        return {};\r\n    }\r\n  })();\r\n\r\n  return (\r\n    <div className={`bloc ${className}`} style={{ ...layoutStyles, ...style }}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Container.css\";\r\n\r\nexport interface ContainerProps {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n  fluid?: boolean;\r\n}\r\n\r\nexport const Container: React.FC<ContainerProps> = ({ children, className = \"\", style = {}, fluid = false }) => {\r\n  return (\r\n    <div className={`container ${fluid ? \"container-fluid\" : \"\"} ${className}`} style={style}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Row.css\";\r\n\r\nexport interface RowProps {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Row: React.FC<RowProps> = ({\r\n  children,\r\n  className = \"\",\r\n  style = {}\r\n}) => {\r\n  return <div className={`row ${className}`} style={{...style}}>{children}</div>;\r\n};\r\n","import React from \"react\";\r\nimport \"./Column.css\";\r\n\r\nexport interface ColumnProps {\r\n  children?: React.ReactNode;\r\n  className?: \"small\" | \"medium\" | \"large\";\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Column: React.FC<ColumnProps> = ({ children, className = \"\", style = {}}) => {\r\n  return (\r\n    <div className={`col ${className}`} style={{...style}}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n","import { Column } from \"../Column\";\r\nimport { Row } from \"../Row\";\r\n\r\nexport interface GridColumn {\r\n  children?: React.ReactNode;\r\n  span?: number;\r\n  style?: React.CSSProperties;\r\n  className?: \"small\" | \"medium\" | \"large\";\r\n}\r\n\r\nexport interface GridProps {\r\n  items: GridColumn[];\r\n}\r\n\r\nexport const Grid: React.FC<GridProps> = ({ items }) => {\r\n\r\n  return (\r\n      <Row>\r\n        {items.map((item: GridColumn, index: number) => (\r\n          <Column\r\n            key={index}\r\n            className={item.className}\r\n            style={{ ...item.style }}\r\n          >\r\n            {item.children}\r\n          </Column>\r\n        ))}\r\n      </Row>\r\n  );\r\n};\r\n","import React from \"react\";\r\n\r\nexport interface SpacerProps {\r\n  size?: number;\r\n  direction?: \"vertical\" | \"horizontal\";\r\n}\r\n\r\nexport const Spacer: React.FC<SpacerProps> = ({\r\n  size = 16,\r\n  direction = \"vertical\"\r\n}) => {\r\n  const style: React.CSSProperties =\r\n    direction === \"vertical\"\r\n      ? { height: size }\r\n      : { width: size, display: \"inline-block\" };\r\n\r\n  return <div style={style} />;\r\n};\r\n","import React from \"react\";\r\n\r\nexport interface DividerProps {\r\n  color?: string;\r\n  thickness?: number;\r\n  orientation?: \"horizontal\" | \"vertical\";\r\n  margin?: number;\r\n}\r\n\r\nexport const Divider: React.FC<DividerProps> = ({\r\n  color = \"#e0e0e0\",\r\n  thickness = 1,\r\n  orientation = \"horizontal\",\r\n  margin = 8,\r\n}) => {\r\n  const styles: React.CSSProperties =\r\n    orientation === \"horizontal\"\r\n      ? {\r\n          width: \"100%\",\r\n          height: thickness,\r\n          backgroundColor: color,\r\n          margin: `${margin}px 0`,\r\n        }\r\n      : {\r\n          width: thickness,\r\n          height: \"100%\",\r\n          backgroundColor: color,\r\n          margin: `0 ${margin}px`,\r\n        };\r\n\r\n  return <div style={styles} />;\r\n};\r\n","import React from \"react\";\r\nimport \"./Checkbox.css\";\r\n\r\nexport interface CheckboxProps {\r\n  label?: string;\r\n  checked: boolean;\r\n  onChange: (value: boolean) => void;\r\n  disabled?: boolean;\r\n  error?: boolean;\r\n\r\n  // Custom colors\r\n  boxColor?: string;\r\n  checkColor?: string;\r\n  checkedBackground?: string;\r\n  focusShadow?: string;\r\n\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Checkbox: React.FC<CheckboxProps> = ({\r\n  label,\r\n  checked,\r\n  onChange,\r\n  disabled = false,\r\n  error = false,\r\n\r\n  boxColor = \"#777\",\r\n  checkColor = \"#fff\",\r\n  checkedBackground = \"#007bff\",\r\n  focusShadow = \"rgba(0, 123, 255, 0.4)\",\r\n\r\n  style,\r\n}) => {\r\n  return (\r\n    <label\r\n      className={`checkbox-container ${disabled ? \"disabled\" : \"\"}`}\r\n      style={{\r\n        [\"--cb-box-color\" as any]: boxColor,\r\n        [\"--cb-check-color\" as any]: checkColor,\r\n        [\"--cb-checked-bg\" as any]: checkedBackground,\r\n        [\"--cb-focus-shadow\" as any]: focusShadow,\r\n      }}\r\n    >\r\n      <input\r\n        type=\"checkbox\"\r\n        checked={checked}\r\n        disabled={disabled}\r\n        onChange={(e) => onChange(e.target.checked)}\r\n      />\r\n\r\n      <span className={`checkbox-box ${error ? \"error\" : \"\"}`} />\r\n\r\n      {label && <span className=\"checkbox-label\">{label}</span>}\r\n    </label>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./TextField.css\";\r\n\r\nexport interface TextFieldProps {\r\n  label?: string;\r\n  value?: string;\r\n  placeholder?: string;\r\n  onChange?: (value: string) => void;\r\n  error?: string;\r\n  disabled?: boolean;\r\n  type?: string;\r\n  fullWidth?: boolean;\r\n  icon?: React.ReactNode;\r\n}\r\n\r\nexport const TextField: React.FC<TextFieldProps> = ({\r\n  label,\r\n  value = \"\",\r\n  placeholder,\r\n  onChange,\r\n  error,\r\n  disabled = false,\r\n  type = \"text\",\r\n  fullWidth = true,\r\n  icon,\r\n}) => {\r\n  return (\r\n    <div className={`textfield ${fullWidth ? \"fullWidth\" : \"\"}`}>\r\n      {label && <label className=\"textfield-label\">{label}</label>}\r\n\r\n      <input\r\n        type={type}\r\n        className={`textfield-input ${error ? \"error\" : \"\"}`}\r\n        value={value}\r\n        placeholder={placeholder}\r\n        disabled={disabled}\r\n        onChange={(e) => onChange && onChange(e.target.value)}\r\n      />\r\n      {icon && <div className=\"textfield-icon\">{icon}</div>}\r\n\r\n      {error && <p className=\"textfield-error\">{error}</p>}\r\n    </div>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Radio.css\";\r\n\r\nexport interface RadioProps {\r\n  label?: string;\r\n  name: string;             // obligatoire pour grouper les radios\r\n  value: string;\r\n  selectedValue: string;\r\n  onChange: (value: string) => void;\r\n\r\n  disabled?: boolean;\r\n  error?: boolean;\r\n\r\n  // Thème custom\r\n  borderColor?: string;\r\n  dotColor?: string;\r\n  checkedBorderColor?: string;\r\n  checkedBackground?: string;\r\n  focusShadow?: string;\r\n\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Radio: React.FC<RadioProps> = ({\r\n  label,\r\n  name,\r\n  value,\r\n  selectedValue,\r\n  onChange,\r\n  disabled = false,\r\n  error = false,\r\n\r\n  borderColor = \"#777\",\r\n  dotColor = \"#fff\",\r\n  checkedBorderColor = \"#007bff\",\r\n  checkedBackground = error ? \"#d93025\" : \"#007bff\",\r\n  focusShadow = \"rgba(0, 123, 255, 0.4)\",\r\n\r\n  style,\r\n}) => {\r\n  const checked = selectedValue === value;\r\n\r\n  return (\r\n    <label\r\n      className={`radio-container ${disabled ? \"disabled\" : \"\"}`}\r\n      style={{\r\n        ...style,\r\n        [\"--rd-border-color\" as any]: borderColor,\r\n        [\"--rd-dot-color\" as any]: dotColor,\r\n        [\"--rd-checked-border\" as any]: checkedBorderColor,\r\n        [\"--rd-checked-bg\" as any]: checkedBackground,\r\n        [\"--rd-focus-shadow\" as any]: focusShadow,\r\n      }}\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        name={name}\r\n        value={value}\r\n        disabled={disabled}\r\n        checked={checked}\r\n        onChange={() => onChange(value)}\r\n      />\r\n\r\n      <span className={`radio-circle ${error ? \"error\" : \"\"}`} />\r\n\r\n      {label && <span className=\"radio-label\">{label}</span>}\r\n    </label>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Select.css\";\r\n\r\nexport interface SelectOption {\r\n  value: string | number;\r\n  label: string;\r\n\r\n  bgColor?: string;\r\n  textColor?: string;\r\n}\r\n\r\nexport interface SelectProps {\r\n  label?: string;\r\n  value: string | number;\r\n  onChange: (value: string | number) => void;\r\n  options: SelectOption[];\r\n  disabled?: boolean;\r\n  error?: boolean;\r\n\r\n  // Custom colors\r\n  borderColor?: string;\r\n  focusBorder?: string;\r\n  focusShadow?: string;\r\n  errorColor?: string;\r\n\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Select: React.FC<SelectProps> = ({\r\n  label,\r\n  value,\r\n  onChange,\r\n  options,\r\n  disabled = false,\r\n  error = false,\r\n\r\n  borderColor = \"#ccc\",\r\n  focusBorder = \"#007bff\",\r\n  focusShadow = \"rgba(0, 123, 255, 0.4)\",\r\n  errorColor = \"#e63946\",\r\n\r\n  style,\r\n}) => {\r\n  return (\r\n    <div className=\"select-wrapper\" style={style}>\r\n      {label && <label className=\"select-label\">{label}</label>}\r\n\r\n      <div\r\n        className={`select-container ${disabled ? \"disabled\" : \"\"} ${\r\n          error ? \"error\" : \"\"\r\n        }`}\r\n      >\r\n        <select\r\n          value={value}\r\n          disabled={disabled}\r\n          onChange={(e) => onChange(e.target.value)}\r\n          style={{\r\n            [\"--sel-border\" as any]: borderColor,\r\n            [\"--sel-focus-border\" as any]: focusBorder,\r\n            [\"--sel-focus-shadow\" as any]: focusShadow,\r\n            [\"--sel-error\" as any]: errorColor,\r\n          }}\r\n        >\r\n          {options.map((opt) => (\r\n            <option\r\n              key={opt.value}\r\n              value={opt.value}\r\n              style={{\r\n                backgroundColor: opt.bgColor,\r\n                color: opt.textColor,\r\n              }}\r\n            >\r\n              {opt.label}\r\n            </option>\r\n          ))}\r\n        </select>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":";;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;ACRO,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,eAAe,EACf,KAAK,EACL,SAAS,GAAG,KAAK,GAClB,KAAI;AACH,IAAA,QACEA,GAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EACEC,IAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,CAAA,QAAA,EAAW,OAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,EAC3C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CAEhC,IAAI,IAAI,YAAY,KAAK,MAAM,IAAIF,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,IAAI,EAAA,CAAQ,EAChF,KAAK,EACL,IAAI,IAAI,YAAY,KAAK,OAAO,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAE,IAAI,EAAA,CAAQ,EAClF,SAAS,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,aAAa,EAAA,CAAQ,CAAA,EAAA,CAC5C,EAAA,CACR;AAEP;;;;;ACpCO,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAI;AACxG,IAAA,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAC,EAAA,QAAA,EAAG,QAAQ,GAAO;AACnF;;;;;ACGO,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,eAAe,EACf,KAAK,EACL,OAAO,GAAG,UAAU,EACpB,OAAO,GAAG,IAAI,GACf,KAAI;IACH,QACEE,cACE,SAAS,EAAE,aAAa,OAAO,CAAA,cAAA,EAAiB,OAAO,CAAA,CAAE,EACzD,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CAEhC,KAAK,IAAIF,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,KAAK,GAAO,EACpDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAO,EAC1C,MAAM,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,YAAE,MAAM,EAAA,CAAO,CAAA,EAAA,CAClD;AAEV;;;;;MCba,IAAI,GAAwB,CAAC,EACxC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,MAAM,GAAG,SAAS,GACnB,KAAI;AACH,IAAA,MAAM,YAAY,GAAwB,CAAC,MAAK;QAC9C,QAAQ,MAAM;AACZ,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE;AAC5E,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE;AACxE,YAAA,KAAK,aAAa;AAChB,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE;AACzG,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE;AAC/E,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,EAAE;AAC5F,YAAA,KAAK,QAAQ;gBACX,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE;AAC/H,YAAA;AACE,gBAAA,OAAO,EAAE;;IAEf,CAAC,GAAG;AAEJ,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,KAAA,EAAQ,SAAS,CAAA,CAAE,EAAE,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,YAAY,CAAA,EAAK,KAAK,aACpE,QAAQ,EAAA,CACL;AAEV;;;;;MCvCa,SAAS,GAA6B,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,KAAK,EAAE,KAAI;IAC7G,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,UAAA,EAAa,KAAK,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EACrF,QAAQ,EAAA,CACL;AAEV;;;;;ACPO,MAAM,GAAG,GAAuB,CAAC,EACtC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACX,KAAI;AACH,IAAA,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,IAAA,EAAO,SAAS,CAAA,CAAE,EAAE,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAA,EAAA,QAAA,EAAI,QAAQ,GAAO;AAChF;;;;;ACNO,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAC,KAAI;AACvF,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,SAAS,CAAA,CAAE,EAAE,KAAK,oBAAM,KAAK,CAAA,EAAA,QAAA,EACjD,QAAQ,EAAA,CACL;AAEV;;MCDa,IAAI,GAAwB,CAAC,EAAE,KAAK,EAAE,KAAI;AAErD,IAAA,QACIA,GAAA,CAAC,GAAG,cACD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAgB,EAAE,KAAa,MACzCA,GAAA,CAAC,MAAM,EAAA,EAEL,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,IAAI,CAAC,KAAK,CAAA,EAAA,QAAA,EAErB,IAAI,CAAC,QAAQ,IAJT,KAAK,CAKH,CACV,CAAC,EAAA,CACE;AAEZ;;ACtBO,MAAM,MAAM,GAA0B,CAAC,EAC5C,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,UAAU,EACvB,KAAI;AACH,IAAA,MAAM,KAAK,GACT,SAAS,KAAK;AACZ,UAAE,EAAE,MAAM,EAAE,IAAI;UACd,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE;AAE9C,IAAA,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,GAAI;AAC9B;;MCRa,OAAO,GAA2B,CAAC,EAC9C,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,CAAC,EACb,WAAW,GAAG,YAAY,EAC1B,MAAM,GAAG,CAAC,GACX,KAAI;AACH,IAAA,MAAM,MAAM,GACV,WAAW,KAAK;AACd,UAAE;AACE,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,CAAA,EAAG,MAAM,CAAA,IAAA,CAAM;AACxB;AACH,UAAE;AACE,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,CAAA,EAAA,EAAK,MAAM,CAAA,EAAA,CAAI;SACxB;AAEP,IAAA,OAAOA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,MAAM,GAAI;AAC/B;;;;;ACZO,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EAEb,QAAQ,GAAG,MAAM,EACjB,UAAU,GAAG,MAAM,EACnB,iBAAiB,GAAG,SAAS,EAC7B,WAAW,GAAG,wBAAwB,EAEtC,KAAK,GACN,KAAI;AACH,IAAA,QACEE,IAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,CAAA,mBAAA,EAAsB,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAC7D,KAAK,EAAE;YACL,CAAC,gBAAuB,GAAG,QAAQ;YACnC,CAAC,kBAAyB,GAAG,UAAU;YACvC,CAAC,iBAAwB,GAAG,iBAAiB;YAC7C,CAAC,mBAA0B,GAAG,WAAW;SAC1C,EAAA,QAAA,EAAA,CAEDF,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAC3C,EAEFA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,aAAA,EAAgB,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,CAAI,EAE1D,KAAK,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,CAAA,EAAA,CACnD;AAEZ;;;;;ACxCO,MAAM,SAAS,GAA6B,CAAC,EAClD,KAAK,EACL,KAAK,GAAG,EAAE,EACV,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,IAAI,EAChB,IAAI,GACL,KAAI;IACH,QACEE,cAAK,SAAS,EAAE,aAAa,SAAS,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EAAA,CACxD,KAAK,IAAIF,GAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAS,EAE5DA,eACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAA,gBAAA,EAAmB,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EACpD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAA,CACrD,EACD,IAAI,IAAIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAE,IAAI,EAAA,CAAO,EAEpD,KAAK,IAAIA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,iBAAiB,YAAE,KAAK,EAAA,CAAK,CAAA,EAAA,CAChD;AAEV;;;;;ACpBO,MAAM,KAAK,GAAyB,CAAC,EAC1C,KAAK,EACL,IAAI,EACJ,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EAEb,WAAW,GAAG,MAAM,EACpB,QAAQ,GAAG,MAAM,EACjB,kBAAkB,GAAG,SAAS,EAC9B,iBAAiB,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,EACjD,WAAW,GAAG,wBAAwB,EAEtC,KAAK,GACN,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,aAAa,KAAK,KAAK;IAEvC,QACEE,IAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,CAAA,gBAAA,EAAmB,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAC1D,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACA,KAAK,KACR,CAAC,mBAA0B,GAAG,WAAW,EACzC,CAAC,gBAAuB,GAAG,QAAQ,EACnC,CAAC,qBAA4B,GAAG,kBAAkB,EAClD,CAAC,iBAAwB,GAAG,iBAAiB,EAC7C,CAAC,mBAA0B,GAAG,WAAW,EAAA,CAAA,EAAA,QAAA,EAAA,CAG3CF,GAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC,EAAA,CAC/B,EAEFA,cAAM,SAAS,EAAE,CAAA,aAAA,EAAgB,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,GAAI,EAE1D,KAAK,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,CAAA,EAAA,CAChD;AAEZ;;;;;ACxCO,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EAEb,WAAW,GAAG,MAAM,EACpB,WAAW,GAAG,SAAS,EACvB,WAAW,GAAG,wBAAwB,EACtC,UAAU,GAAG,SAAS,EAEtB,KAAK,GACN,KAAI;AACH,IAAA,QACEE,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CACzC,KAAK,IAAIF,GAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,cAAc,EAAA,QAAA,EAAE,KAAK,EAAA,CAAS,EAEzDA,GAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,CAAA,iBAAA,EAAoB,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAA,EACvD,KAAK,GAAG,OAAO,GAAG,EACpB,CAAA,CAAE,EAAA,QAAA,EAEFA,GAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,KAAK,EAAE;wBACL,CAAC,cAAqB,GAAG,WAAW;wBACpC,CAAC,oBAA2B,GAAG,WAAW;wBAC1C,CAAC,oBAA2B,GAAG,WAAW;wBAC1C,CAAC,aAAoB,GAAG,UAAU;AACnC,qBAAA,EAAA,QAAA,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,MACfA,GAAA,CAAA,QAAA,EAAA,EAEE,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,KAAK,EAAE;4BACL,eAAe,EAAE,GAAG,CAAC,OAAO;4BAC5B,KAAK,EAAE,GAAG,CAAC,SAAS;AACrB,yBAAA,EAAA,QAAA,EAEA,GAAG,CAAC,KAAK,EAAA,EAPL,GAAG,CAAC,KAAK,CAQP,CACV,CAAC,EAAA,CACK,EAAA,CACL,CAAA,EAAA,CACF;AAEV;;;;","x_google_ignoreList":[0]}

package/dist/index.js

@@ -6,7 +6,7 @@ function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
-  if (typeof document === 'undefined') { return; }
+  if (!css || typeof document === 'undefined') { return; }
 
   var head = document.head || document.getElementsByTagName('head')[0];
   var style = document.createElement('style');
@@ -29,12 +29,155 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".btn{border:none;border-radius:4px;cursor:pointer;font-size:16px;font-weight:500;padding:10px 20px;transition:all .3s ease}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3}.btn-secondary{background-color:#6c757d;color:#fff}.btn-danger{background-color:#dc3545;color:#fff}.btn-small{font-size:14px;padding:5px 10px}.btn-medium{font-size:16px;padding:10px 20px}.btn-large{font-size:18px;padding:15px 30px}.btn:disabled{cursor:not-allowed;opacity:.5}";
+var css_248z$a = ".btn{align-items:center;border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-size:16px;font-weight:500;justify-content:center;padding:10px 20px;transition:all .3s ease}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3}.btn-secondary{background-color:#6c757d;color:#fff}.btn-danger{background-color:#dc3545;color:#fff}.btn-dark{background-color:#141617;color:#fff}.btn-light{background-color:#f8f9fa;color:#000}.btn-small{font-size:14px;padding:5px 10px}.btn-medium{font-size:16px;padding:10px 20px}.btn-large{font-size:18px;padding:15px 30px}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-left-icon{margin-right:8px}.btn-left-icon,.btn-right-icon{align-items:center;display:inline-flex}.btn-right-icon{margin-left:8px}.btn-spinner{animation:spin .7s linear infinite;border:3px solid hsla(0,0%,100%,.4);border-radius:50%;border-top-color:#fff;display:inline-block;height:12px;margin-left:5px;width:12px}@keyframes spin{to{transform:rotate(1turn)}}.btn-loading{cursor:not-allowed;position:relative}.btn-loading span,.btn-loading svg{opacity:0}.btn-loading>:not(.btn-spinner){visibility:hidden}";
+styleInject(css_248z$a);
+
+const Button = ({ label, onClick, variant = "primary", size = "medium", disabled = false, icon, iconPosition = "left", backgroundColor, color, isLoading = false, }) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { className: `btn btn-${variant} btn-${size}`, onClick: onClick, disabled: disabled || isLoading, style: { backgroundColor, color }, children: [icon && iconPosition === "left" && jsxRuntime.jsx("span", { className: "btn-left-icon", children: icon }), label, icon && iconPosition === "right" && jsxRuntime.jsx("span", { className: "btn-right-icon", children: icon }), isLoading && jsxRuntime.jsx("span", { className: "btn-spinner" })] }) }));
+};
+
+var css_248z$9 = ".center{align-items:center;display:flex;justify-content:center}";
+styleInject(css_248z$9);
+
+const Center = ({ children, backgroundColor = 'white', color = 'black' }) => {
+    return jsxRuntime.jsx("div", { className: "center", style: { backgroundColor, color }, children: children });
+};
+
+var css_248z$8 = ".card{background:#fff;border-radius:12px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s ease,transform .2s ease}.card-elevated{box-shadow:0 2px 4px rgba(0,0,0,.08),0 8px 16px rgba(0,0,0,.06)}.card-elevated:hover{box-shadow:0 4px 8px rgba(0,0,0,.1),0 12px 24px rgba(0,0,0,.08);transform:translateY(-2px)}.card-outlined{border:1px solid #e5e7eb}.card-flat{background:transparent;border:none}.card-padding-sm{padding:8px}.card-padding-md{padding:16px}.card-padding-lg{padding:24px}.card-header{font-size:1.25rem;font-weight:600;margin-bottom:4px}.card-body{font-size:.95rem;line-height:1.5}.card-footer{border-top:1px solid #ececec;color:#555;font-size:.9rem;margin-top:8px;padding-top:8px}";
+styleInject(css_248z$8);
+
+const Card = ({ title, children, footer, backgroundColor, color, variant = "elevated", padding = "md", }) => {
+    return (jsxRuntime.jsxs("div", { className: `card card-${variant} card-padding-${padding}`, style: { backgroundColor, color }, children: [title && jsxRuntime.jsx("div", { className: "card-header", children: title }), jsxRuntime.jsx("div", { className: "card-body", children: children }), footer && jsxRuntime.jsx("div", { className: "card-footer", children: footer })] }));
+};
+
+var css_248z$7 = ".bloc{box-sizing:border-box;max-width:100%;padding:16px;width:100%}@media (max-width:600px){.bloc{border-radius:6px;padding:12px}}@media (max-width:900px){.bloc{padding:14px}}";
+styleInject(css_248z$7);
+
+const Bloc = ({ children, className = "", style = {}, layout = "default", }) => {
+    const layoutStyles = (() => {
+        switch (layout) {
+            case "center":
+                return { display: "flex", justifyContent: "center", alignItems: "center" };
+            case "row":
+                return { display: "flex", flexDirection: "row", alignItems: "center" };
+            case "row-between":
+                return { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center" };
+            case "column":
+                return { display: "flex", flexDirection: "column", alignItems: "flex-start" };
+            case "sidebar":
+                return { display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "12px" };
+            case "navbar":
+                return { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", padding: "12px 20px" };
+            default:
+                return {};
+        }
+    })();
+    return (jsxRuntime.jsx("div", { className: `bloc ${className}`, style: Object.assign(Object.assign({}, layoutStyles), style), children: children }));
+};
+
+var css_248z$6 = ".container{margin:0 auto;padding:0 16px;width:100%}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1200px}}.container-fluid{max-width:100%}";
+styleInject(css_248z$6);
+
+const Container = ({ children, className = "", style = {}, fluid = false }) => {
+    return (jsxRuntime.jsx("div", { className: `container ${fluid ? "container-fluid" : ""} ${className}`, style: style, children: children }));
+};
+
+var css_248z$5 = ".row{align-items:stretch;box-sizing:border-box;display:flex;flex-direction:row;gap:16px}@media (max-width:768px){.row{flex-direction:column}}";
+styleInject(css_248z$5);
+
+const Row = ({ children, className = "", style = {} }) => {
+    return jsxRuntime.jsx("div", { className: `row ${className}`, style: Object.assign({}, style), children: children });
+};
+
+var css_248z$4 = ".col,.column{box-sizing:border-box;flex:1 1 0;min-width:0;padding:8px}.col.small{max-width:20%}.col.medium{max-width:50%}.col.large{max-width:100%}.col>*,.column>*{box-sizing:border-box;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.col img,.column img{display:block;height:auto;max-width:100%}@media (max-width:768px){.col,.col.large,.col.medium,.col.small,.column{flex:none;max-width:100%;width:100%}}";
+styleInject(css_248z$4);
+
+const Column = ({ children, className = "", style = {} }) => {
+    return (jsxRuntime.jsx("div", { className: `col ${className}`, style: Object.assign({}, style), children: children }));
+};
+
+const Grid = ({ items }) => {
+    return (jsxRuntime.jsx(Row, { children: items.map((item, index) => (jsxRuntime.jsx(Column, { className: item.className, style: Object.assign({}, item.style), children: item.children }, index))) }));
+};
+
+const Spacer = ({ size = 16, direction = "vertical" }) => {
+    const style = direction === "vertical"
+        ? { height: size }
+        : { width: size, display: "inline-block" };
+    return jsxRuntime.jsx("div", { style: style });
+};
+
+const Divider = ({ color = "#e0e0e0", thickness = 1, orientation = "horizontal", margin = 8, }) => {
+    const styles = orientation === "horizontal"
+        ? {
+            width: "100%",
+            height: thickness,
+            backgroundColor: color,
+            margin: `${margin}px 0`,
+        }
+        : {
+            width: thickness,
+            height: "100%",
+            backgroundColor: color,
+            margin: `0 ${margin}px`,
+        };
+    return jsxRuntime.jsx("div", { style: styles });
+};
+
+var css_248z$3 = ".checkbox-container{align-items:center;cursor:pointer;display:flex;font-family:sans-serif;gap:8px;user-select:none}.checkbox-container.disabled{cursor:not-allowed;opacity:.5}.checkbox-container input{appearance:none;-webkit-appearance:none;height:0;position:absolute;width:0}.checkbox-box{border:2px solid var(--cb-box-color,#777);border-radius:4px;display:inline-block;height:18px;position:relative;transition:.2s ease;width:18px}.checkbox-container input:checked+.checkbox-box{background-color:var(--cb-checked-bg,#007bff);border-color:var(--cb-checked-bg,#007bff)}.checkbox-container input:checked+.checkbox-box:after{border-width:medium;border-bottom:2px solid var(--cb-check-color,#fff);border-left:0 solid var(--cb-check-color,#fff);border-right:2px solid var(--cb-check-color,#fff);border-top:0 solid var(--cb-check-color,#fff);content:\"\";height:10px;left:5px;position:absolute;top:1px;transform:rotate(45deg);width:5px}.checkbox-container input:focus+.checkbox-box{box-shadow:0 0 4px var(--cb-focus-shadow,rgba(0,123,255,.4))}.checkbox-box.error{border-color:#d93025!important}.checkbox-label{font-size:14px}";
+styleInject(css_248z$3);
+
+const Checkbox = ({ label, checked, onChange, disabled = false, error = false, boxColor = "#777", checkColor = "#fff", checkedBackground = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", style, }) => {
+    return (jsxRuntime.jsxs("label", { className: `checkbox-container ${disabled ? "disabled" : ""}`, style: {
+            ["--cb-box-color"]: boxColor,
+            ["--cb-check-color"]: checkColor,
+            ["--cb-checked-bg"]: checkedBackground,
+            ["--cb-focus-shadow"]: focusShadow,
+        }, children: [jsxRuntime.jsx("input", { type: "checkbox", checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked) }), jsxRuntime.jsx("span", { className: `checkbox-box ${error ? "error" : ""}` }), label && jsxRuntime.jsx("span", { className: "checkbox-label", children: label })] }));
+};
+
+var css_248z$2 = ".textfield{display:flex;flex-direction:column;font-family:sans-serif;gap:6px}.fullWidth{width:100%}.textfield-label{color:#333;font-size:14px;font-weight:600}.textfield-input{border:1px solid #ccc;border-radius:6px;font-size:14px;padding:10px 12px;transition:.2s ease}.textfield-input:focus{border-color:#4c00ff;box-shadow:0 0 2px #007bff;outline:none}.textfield-input.error{background-color:#fff5f5;border-color:#d93025}.textfield-error{background-color:#f44343;color:#ece6e6;font-size:12px;padding:8px}.textfield-icon{position:absolute;right:45px;top:45px;width:2px}";
+styleInject(css_248z$2);
+
+const TextField = ({ label, value = "", placeholder, onChange, error, disabled = false, type = "text", fullWidth = true, icon, }) => {
+    return (jsxRuntime.jsxs("div", { className: `textfield ${fullWidth ? "fullWidth" : ""}`, children: [label && jsxRuntime.jsx("label", { className: "textfield-label", children: label }), jsxRuntime.jsx("input", { type: type, className: `textfield-input ${error ? "error" : ""}`, value: value, placeholder: placeholder, disabled: disabled, onChange: (e) => onChange && onChange(e.target.value) }), icon && jsxRuntime.jsx("div", { className: "textfield-icon", children: icon }), error && jsxRuntime.jsx("p", { className: "textfield-error", children: error })] }));
+};
+
+var css_248z$1 = ".radio-container{align-items:center;cursor:pointer;display:flex;font-family:sans-serif;gap:8px}.radio-container input{display:none}.radio-circle{align-items:center;border:2px solid var(--rd-border-color,#777);border-radius:50%;display:flex;height:18px;justify-content:center;position:relative;transition:.2s ease;width:18px}.radio-circle:after{background-color:var(--rd-dot-color,#fff);border-radius:50%;content:\"\";height:10px;opacity:0;transform:scale(.4);transition:.2s ease;width:10px}.radio-container input:checked+.radio-circle{background-color:var(--rd-checked-bg,#007bff);border-color:var(--rd-checked-border,#007bff)}.radio-container input:checked+.radio-circle:after{opacity:1;transform:scale(1)}.radio-circle.error{border-color:#d93025!important}.radio-label{font-size:14px}.disabled{cursor:not-allowed;opacity:.6}";
+styleInject(css_248z$1);
+
+const Radio = ({ label, name, value, selectedValue, onChange, disabled = false, error = false, borderColor = "#777", dotColor = "#fff", checkedBorderColor = "#007bff", checkedBackground = error ? "#d93025" : "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", style, }) => {
+    const checked = selectedValue === value;
+    return (jsxRuntime.jsxs("label", { className: `radio-container ${disabled ? "disabled" : ""}`, style: Object.assign(Object.assign({}, style), { ["--rd-border-color"]: borderColor, ["--rd-dot-color"]: dotColor, ["--rd-checked-border"]: checkedBorderColor, ["--rd-checked-bg"]: checkedBackground, ["--rd-focus-shadow"]: focusShadow }), children: [jsxRuntime.jsx("input", { type: "radio", name: name, value: value, disabled: disabled, checked: checked, onChange: () => onChange(value) }), jsxRuntime.jsx("span", { className: `radio-circle ${error ? "error" : ""}` }), label && jsxRuntime.jsx("span", { className: "radio-label", children: label })] }));
+};
+
+var css_248z = ".select-wrapper{display:flex;flex-direction:column;font-family:sans-serif;gap:4px}.select-label{font-size:14px;font-weight:500}.select-container{position:relative;width:100%}.select-container select{background:#fff;border:1px solid var(--sel-border,#ccc);border-radius:6px;cursor:pointer;font-size:15px;padding:10px 12px;transition:all .2s ease;width:100%}.select-container select:focus{border-color:var(--sel-focus-border,#007bff);box-shadow:0 0 0 2px var(--sel-focus-shadow,rgba(0,123,255,.4));outline:none}.select-container.disabled select{background:#f2f2f2;cursor:not-allowed;opacity:.6}.select-container.error select{border-color:var(--sel-error,red)}.select-container.error select:focus{border-color:var(--sel-error,red);box-shadow:0 0 0 2px rgba(230,57,70,.35)}";
 styleInject(css_248z);
 
-const Button = ({ label, onClick, variant = "primary", size = "medium", disabled = false, }) => {
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("button", { className: `btn btn-${variant} btn-${size}`, onClick: onClick, disabled: disabled, children: label }) }));
+const Select = ({ label, value, onChange, options, disabled = false, error = false, borderColor = "#ccc", focusBorder = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", errorColor = "#e63946", style, }) => {
+    return (jsxRuntime.jsxs("div", { className: "select-wrapper", style: style, children: [label && jsxRuntime.jsx("label", { className: "select-label", children: label }), jsxRuntime.jsx("div", { className: `select-container ${disabled ? "disabled" : ""} ${error ? "error" : ""}`, children: jsxRuntime.jsx("select", { value: value, disabled: disabled, onChange: (e) => onChange(e.target.value), style: {
+                        ["--sel-border"]: borderColor,
+                        ["--sel-focus-border"]: focusBorder,
+                        ["--sel-focus-shadow"]: focusShadow,
+                        ["--sel-error"]: errorColor,
+                    }, children: options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, style: {
+                            backgroundColor: opt.bgColor,
+                            color: opt.textColor,
+                        }, children: opt.label }, opt.value))) }) })] }));
 };
 
+exports.Bloc = Bloc;
 exports.Button = Button;
+exports.Card = Card;
+exports.Center = Center;
+exports.Checkbox = Checkbox;
+exports.Column = Column;
+exports.Container = Container;
+exports.Divider = Divider;
+exports.Grid = Grid;
+exports.Radio = Radio;
+exports.Row = Row;
+exports.Select = Select;
+exports.Spacer = Spacer;
+exports.TextField = TextField;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import \"./Button.css\";\r\nimport React from \"react\";\r\n\r\n\r\nexport interface ButtonProps {\r\n  label: string;\r\n  onClick?: () => void;\r\n  variant?: \"primary\" | \"secondary\" | \"danger\";\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  label,\r\n  onClick,\r\n  variant = \"primary\",\r\n  size = \"medium\",\r\n  disabled = false,\r\n}) => {\r\n  return (\r\n    <>\r\n      <button\r\n        className={`btn btn-${variant} btn-${size}`}\r\n        onClick={onClick}\r\n        disabled={disabled}\r\n      >\r\n        {label}\r\n      </button>\r\n    </>\r\n  );\r\n};\r\n"],"names":["_jsx"],"mappings":";;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAY,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;MCba,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,GACjB,KAAI;IACH,QACEA,gDACEA,cAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,CAAA,QAAA,EAAW,OAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,EAC3C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,YAEjB,KAAK,EAAA,CACC,EAAA,CACR;AAEP;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Center/Center.tsx","../src/components/Card/Card.tsx","../src/components/Bloc/Bloc.tsx","../src/components/Container/Container.tsx","../src/components/Row/Row.tsx","../src/components/Column/Column.tsx","../src/components/Grid/Grid.tsx","../src/components/Spacer/Spacer.tsx","../src/components/Divider/Divider.tsx","../src/components/Checkbox/Checkbox.tsx","../src/components/TextField/TextField.tsx","../src/components/Radio/Radio.tsx","../src/components/Select/Select.tsx"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n","import \"./Button.css\";\r\nimport React from \"react\";\r\n\r\n\r\nexport interface ButtonProps {\r\n  label: string;\r\n  onClick?: () => void;\r\n  variant?: \"primary\" | \"secondary\" | \"danger\" | \"dark\" | \"light\";\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n  disabled?: boolean;\r\n  icon?: React.ReactNode;\r\n  iconPosition?: \"left\" | \"right\";\r\n  backgroundColor?: string;\r\n  color?: string;\r\n  isLoading?: boolean;\r\n}\r\n\r\nexport const Button: React.FC<ButtonProps> = ({\r\n  label,\r\n  onClick,\r\n  variant = \"primary\",\r\n  size = \"medium\",\r\n  disabled = false,\r\n  icon,\r\n  iconPosition = \"left\",\r\n  backgroundColor,\r\n  color,\r\n  isLoading = false,\r\n}) => {\r\n  return (\r\n    <>\r\n      <button\r\n        className={`btn btn-${variant} btn-${size}`}\r\n        onClick={onClick}\r\n        disabled={disabled || isLoading}\r\n        style={{ backgroundColor, color }}\r\n      >\r\n        {icon && iconPosition === \"left\" && <span className=\"btn-left-icon\">{icon}</span>}\r\n        {label}\r\n        {icon && iconPosition === \"right\" && <span className=\"btn-right-icon\">{icon}</span>}\r\n        {isLoading && <span className=\"btn-spinner\"></span>}\r\n      </button>\r\n    </>\r\n  );\r\n};\r\n","import \"./Center.css\"\r\n\r\nexport interface CenterProps {\r\n  children: React.ReactNode;\r\n  backgroundColor?: string;\r\n  color?: string;\r\n}\r\n\r\nexport const Center: React.FC<CenterProps> = ({ children, backgroundColor = 'white', color = 'black' }) => {\r\n  return <div className=\"center\" style={{ backgroundColor, color}}>{children}</div>;\r\n};\r\n","import React from \"react\";\r\nimport \"./Card.css\";\r\n\r\nexport interface CardProps {\r\n  title?: string;\r\n  children: React.ReactNode;\r\n  backgroundColor?: string;\r\n  color?: string;\r\n  variant?: \"elevated\" | \"outlined\" | \"flat\";\r\n  padding?: \"sm\" | \"md\" | \"lg\";\r\n  footer?: React.ReactNode;\r\n}\r\n\r\nexport const Card: React.FC<CardProps> = ({\r\n  title,\r\n  children,\r\n  footer,\r\n  backgroundColor,\r\n  color,\r\n  variant = \"elevated\",\r\n  padding = \"md\",\r\n}) => {\r\n  return (\r\n    <div\r\n      className={`card card-${variant} card-padding-${padding}`}\r\n      style={{ backgroundColor, color }}\r\n    >\r\n      {title && <div className=\"card-header\">{title}</div>}\r\n      <div className=\"card-body\">{children}</div>\r\n      {footer && <div className=\"card-footer\">{footer}</div>}\r\n    </div>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Bloc.css\";\r\n\r\nexport type BlocLayout =\r\n  | \"default\"\r\n  | \"center\"\r\n  | \"row\"\r\n  | \"row-between\"\r\n  | \"column\"\r\n  | \"sidebar\"\r\n  | \"navbar\";\r\n\r\nexport interface BlocProps {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n  layout?: BlocLayout;\r\n}\r\n\r\nexport const Bloc: React.FC<BlocProps> = ({\r\n  children,\r\n  className = \"\",\r\n  style = {},\r\n  layout = \"default\",\r\n}) => {\r\n  const layoutStyles: React.CSSProperties = (() => {\r\n    switch (layout) {\r\n      case \"center\":\r\n        return { display: \"flex\", justifyContent: \"center\", alignItems: \"center\" };\r\n      case \"row\":\r\n        return { display: \"flex\", flexDirection: \"row\", alignItems: \"center\" };\r\n      case \"row-between\":\r\n        return { display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\", alignItems: \"center\" };\r\n      case \"column\":\r\n        return { display: \"flex\", flexDirection: \"column\", alignItems: \"flex-start\" };\r\n      case \"sidebar\":\r\n        return { display: \"flex\", flexDirection: \"column\", alignItems: \"flex-start\", gap: \"12px\" };\r\n      case \"navbar\":\r\n        return { display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\", alignItems: \"center\", padding: \"12px 20px\" };\r\n      default:\r\n        return {};\r\n    }\r\n  })();\r\n\r\n  return (\r\n    <div className={`bloc ${className}`} style={{ ...layoutStyles, ...style }}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Container.css\";\r\n\r\nexport interface ContainerProps {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n  fluid?: boolean;\r\n}\r\n\r\nexport const Container: React.FC<ContainerProps> = ({ children, className = \"\", style = {}, fluid = false }) => {\r\n  return (\r\n    <div className={`container ${fluid ? \"container-fluid\" : \"\"} ${className}`} style={style}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Row.css\";\r\n\r\nexport interface RowProps {\r\n  children?: React.ReactNode;\r\n  className?: string;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Row: React.FC<RowProps> = ({\r\n  children,\r\n  className = \"\",\r\n  style = {}\r\n}) => {\r\n  return <div className={`row ${className}`} style={{...style}}>{children}</div>;\r\n};\r\n","import React from \"react\";\r\nimport \"./Column.css\";\r\n\r\nexport interface ColumnProps {\r\n  children?: React.ReactNode;\r\n  className?: \"small\" | \"medium\" | \"large\";\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Column: React.FC<ColumnProps> = ({ children, className = \"\", style = {}}) => {\r\n  return (\r\n    <div className={`col ${className}`} style={{...style}}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n","import { Column } from \"../Column\";\r\nimport { Row } from \"../Row\";\r\n\r\nexport interface GridColumn {\r\n  children?: React.ReactNode;\r\n  span?: number;\r\n  style?: React.CSSProperties;\r\n  className?: \"small\" | \"medium\" | \"large\";\r\n}\r\n\r\nexport interface GridProps {\r\n  items: GridColumn[];\r\n}\r\n\r\nexport const Grid: React.FC<GridProps> = ({ items }) => {\r\n\r\n  return (\r\n      <Row>\r\n        {items.map((item: GridColumn, index: number) => (\r\n          <Column\r\n            key={index}\r\n            className={item.className}\r\n            style={{ ...item.style }}\r\n          >\r\n            {item.children}\r\n          </Column>\r\n        ))}\r\n      </Row>\r\n  );\r\n};\r\n","import React from \"react\";\r\n\r\nexport interface SpacerProps {\r\n  size?: number;\r\n  direction?: \"vertical\" | \"horizontal\";\r\n}\r\n\r\nexport const Spacer: React.FC<SpacerProps> = ({\r\n  size = 16,\r\n  direction = \"vertical\"\r\n}) => {\r\n  const style: React.CSSProperties =\r\n    direction === \"vertical\"\r\n      ? { height: size }\r\n      : { width: size, display: \"inline-block\" };\r\n\r\n  return <div style={style} />;\r\n};\r\n","import React from \"react\";\r\n\r\nexport interface DividerProps {\r\n  color?: string;\r\n  thickness?: number;\r\n  orientation?: \"horizontal\" | \"vertical\";\r\n  margin?: number;\r\n}\r\n\r\nexport const Divider: React.FC<DividerProps> = ({\r\n  color = \"#e0e0e0\",\r\n  thickness = 1,\r\n  orientation = \"horizontal\",\r\n  margin = 8,\r\n}) => {\r\n  const styles: React.CSSProperties =\r\n    orientation === \"horizontal\"\r\n      ? {\r\n          width: \"100%\",\r\n          height: thickness,\r\n          backgroundColor: color,\r\n          margin: `${margin}px 0`,\r\n        }\r\n      : {\r\n          width: thickness,\r\n          height: \"100%\",\r\n          backgroundColor: color,\r\n          margin: `0 ${margin}px`,\r\n        };\r\n\r\n  return <div style={styles} />;\r\n};\r\n","import React from \"react\";\r\nimport \"./Checkbox.css\";\r\n\r\nexport interface CheckboxProps {\r\n  label?: string;\r\n  checked: boolean;\r\n  onChange: (value: boolean) => void;\r\n  disabled?: boolean;\r\n  error?: boolean;\r\n\r\n  // Custom colors\r\n  boxColor?: string;\r\n  checkColor?: string;\r\n  checkedBackground?: string;\r\n  focusShadow?: string;\r\n\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Checkbox: React.FC<CheckboxProps> = ({\r\n  label,\r\n  checked,\r\n  onChange,\r\n  disabled = false,\r\n  error = false,\r\n\r\n  boxColor = \"#777\",\r\n  checkColor = \"#fff\",\r\n  checkedBackground = \"#007bff\",\r\n  focusShadow = \"rgba(0, 123, 255, 0.4)\",\r\n\r\n  style,\r\n}) => {\r\n  return (\r\n    <label\r\n      className={`checkbox-container ${disabled ? \"disabled\" : \"\"}`}\r\n      style={{\r\n        [\"--cb-box-color\" as any]: boxColor,\r\n        [\"--cb-check-color\" as any]: checkColor,\r\n        [\"--cb-checked-bg\" as any]: checkedBackground,\r\n        [\"--cb-focus-shadow\" as any]: focusShadow,\r\n      }}\r\n    >\r\n      <input\r\n        type=\"checkbox\"\r\n        checked={checked}\r\n        disabled={disabled}\r\n        onChange={(e) => onChange(e.target.checked)}\r\n      />\r\n\r\n      <span className={`checkbox-box ${error ? \"error\" : \"\"}`} />\r\n\r\n      {label && <span className=\"checkbox-label\">{label}</span>}\r\n    </label>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./TextField.css\";\r\n\r\nexport interface TextFieldProps {\r\n  label?: string;\r\n  value?: string;\r\n  placeholder?: string;\r\n  onChange?: (value: string) => void;\r\n  error?: string;\r\n  disabled?: boolean;\r\n  type?: string;\r\n  fullWidth?: boolean;\r\n  icon?: React.ReactNode;\r\n}\r\n\r\nexport const TextField: React.FC<TextFieldProps> = ({\r\n  label,\r\n  value = \"\",\r\n  placeholder,\r\n  onChange,\r\n  error,\r\n  disabled = false,\r\n  type = \"text\",\r\n  fullWidth = true,\r\n  icon,\r\n}) => {\r\n  return (\r\n    <div className={`textfield ${fullWidth ? \"fullWidth\" : \"\"}`}>\r\n      {label && <label className=\"textfield-label\">{label}</label>}\r\n\r\n      <input\r\n        type={type}\r\n        className={`textfield-input ${error ? \"error\" : \"\"}`}\r\n        value={value}\r\n        placeholder={placeholder}\r\n        disabled={disabled}\r\n        onChange={(e) => onChange && onChange(e.target.value)}\r\n      />\r\n      {icon && <div className=\"textfield-icon\">{icon}</div>}\r\n\r\n      {error && <p className=\"textfield-error\">{error}</p>}\r\n    </div>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Radio.css\";\r\n\r\nexport interface RadioProps {\r\n  label?: string;\r\n  name: string;             // obligatoire pour grouper les radios\r\n  value: string;\r\n  selectedValue: string;\r\n  onChange: (value: string) => void;\r\n\r\n  disabled?: boolean;\r\n  error?: boolean;\r\n\r\n  // Thème custom\r\n  borderColor?: string;\r\n  dotColor?: string;\r\n  checkedBorderColor?: string;\r\n  checkedBackground?: string;\r\n  focusShadow?: string;\r\n\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Radio: React.FC<RadioProps> = ({\r\n  label,\r\n  name,\r\n  value,\r\n  selectedValue,\r\n  onChange,\r\n  disabled = false,\r\n  error = false,\r\n\r\n  borderColor = \"#777\",\r\n  dotColor = \"#fff\",\r\n  checkedBorderColor = \"#007bff\",\r\n  checkedBackground = error ? \"#d93025\" : \"#007bff\",\r\n  focusShadow = \"rgba(0, 123, 255, 0.4)\",\r\n\r\n  style,\r\n}) => {\r\n  const checked = selectedValue === value;\r\n\r\n  return (\r\n    <label\r\n      className={`radio-container ${disabled ? \"disabled\" : \"\"}`}\r\n      style={{\r\n        ...style,\r\n        [\"--rd-border-color\" as any]: borderColor,\r\n        [\"--rd-dot-color\" as any]: dotColor,\r\n        [\"--rd-checked-border\" as any]: checkedBorderColor,\r\n        [\"--rd-checked-bg\" as any]: checkedBackground,\r\n        [\"--rd-focus-shadow\" as any]: focusShadow,\r\n      }}\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        name={name}\r\n        value={value}\r\n        disabled={disabled}\r\n        checked={checked}\r\n        onChange={() => onChange(value)}\r\n      />\r\n\r\n      <span className={`radio-circle ${error ? \"error\" : \"\"}`} />\r\n\r\n      {label && <span className=\"radio-label\">{label}</span>}\r\n    </label>\r\n  );\r\n};\r\n","import React from \"react\";\r\nimport \"./Select.css\";\r\n\r\nexport interface SelectOption {\r\n  value: string | number;\r\n  label: string;\r\n\r\n  bgColor?: string;\r\n  textColor?: string;\r\n}\r\n\r\nexport interface SelectProps {\r\n  label?: string;\r\n  value: string | number;\r\n  onChange: (value: string | number) => void;\r\n  options: SelectOption[];\r\n  disabled?: boolean;\r\n  error?: boolean;\r\n\r\n  // Custom colors\r\n  borderColor?: string;\r\n  focusBorder?: string;\r\n  focusShadow?: string;\r\n  errorColor?: string;\r\n\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nexport const Select: React.FC<SelectProps> = ({\r\n  label,\r\n  value,\r\n  onChange,\r\n  options,\r\n  disabled = false,\r\n  error = false,\r\n\r\n  borderColor = \"#ccc\",\r\n  focusBorder = \"#007bff\",\r\n  focusShadow = \"rgba(0, 123, 255, 0.4)\",\r\n  errorColor = \"#e63946\",\r\n\r\n  style,\r\n}) => {\r\n  return (\r\n    <div className=\"select-wrapper\" style={style}>\r\n      {label && <label className=\"select-label\">{label}</label>}\r\n\r\n      <div\r\n        className={`select-container ${disabled ? \"disabled\" : \"\"} ${\r\n          error ? \"error\" : \"\"\r\n        }`}\r\n      >\r\n        <select\r\n          value={value}\r\n          disabled={disabled}\r\n          onChange={(e) => onChange(e.target.value)}\r\n          style={{\r\n            [\"--sel-border\" as any]: borderColor,\r\n            [\"--sel-focus-border\" as any]: focusBorder,\r\n            [\"--sel-focus-shadow\" as any]: focusShadow,\r\n            [\"--sel-error\" as any]: errorColor,\r\n          }}\r\n        >\r\n          {options.map((opt) => (\r\n            <option\r\n              key={opt.value}\r\n              value={opt.value}\r\n              style={{\r\n                backgroundColor: opt.bgColor,\r\n                color: opt.textColor,\r\n              }}\r\n            >\r\n              {opt.label}\r\n            </option>\r\n          ))}\r\n        </select>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":";;;;AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;ACRO,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,OAAO,EACP,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,YAAY,GAAG,MAAM,EACrB,eAAe,EACf,KAAK,EACL,SAAS,GAAG,KAAK,GAClB,KAAI;AACH,IAAA,QACEA,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EACEC,eAAA,CAAA,QAAA,EAAA,EACE,SAAS,EAAE,CAAA,QAAA,EAAW,OAAO,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,EAC3C,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CAEhC,IAAI,IAAI,YAAY,KAAK,MAAM,IAAIF,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,IAAI,EAAA,CAAQ,EAChF,KAAK,EACL,IAAI,IAAI,YAAY,KAAK,OAAO,IAAIA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAE,IAAI,EAAA,CAAQ,EAClF,SAAS,IAAIA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,aAAa,EAAA,CAAQ,CAAA,EAAA,CAC5C,EAAA,CACR;AAEP;;;;;ACpCO,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,eAAe,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EAAE,KAAI;AACxG,IAAA,OAAOA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,QAAQ,EAAC,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAC,EAAA,QAAA,EAAG,QAAQ,GAAO;AACnF;;;;;ACGO,MAAM,IAAI,GAAwB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,eAAe,EACf,KAAK,EACL,OAAO,GAAG,UAAU,EACpB,OAAO,GAAG,IAAI,GACf,KAAI;IACH,QACEE,yBACE,SAAS,EAAE,aAAa,OAAO,CAAA,cAAA,EAAiB,OAAO,CAAA,CAAE,EACzD,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,EAAA,QAAA,EAAA,CAEhC,KAAK,IAAIF,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,KAAK,GAAO,EACpDA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,WAAW,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAO,EAC1C,MAAM,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,aAAa,YAAE,MAAM,EAAA,CAAO,CAAA,EAAA,CAClD;AAEV;;;;;MCba,IAAI,GAAwB,CAAC,EACxC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACV,MAAM,GAAG,SAAS,GACnB,KAAI;AACH,IAAA,MAAM,YAAY,GAAwB,CAAC,MAAK;QAC9C,QAAQ,MAAM;AACZ,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE;AAC5E,YAAA,KAAK,KAAK;AACR,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE;AACxE,YAAA,KAAK,aAAa;AAChB,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE;AACzG,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE;AAC/E,YAAA,KAAK,SAAS;AACZ,gBAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,EAAE;AAC5F,YAAA,KAAK,QAAQ;gBACX,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE;AAC/H,YAAA;AACE,gBAAA,OAAO,EAAE;;IAEf,CAAC,GAAG;AAEJ,IAAA,QACEA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,KAAA,EAAQ,SAAS,CAAA,CAAE,EAAE,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,YAAY,CAAA,EAAK,KAAK,aACpE,QAAQ,EAAA,CACL;AAEV;;;;;MCvCa,SAAS,GAA6B,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,KAAK,EAAE,KAAI;IAC7G,QACEA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,UAAA,EAAa,KAAK,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE,EAAE,KAAK,EAAE,KAAK,EAAA,QAAA,EACrF,QAAQ,EAAA,CACL;AAEV;;;;;ACPO,MAAM,GAAG,GAAuB,CAAC,EACtC,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,EAAE,EACX,KAAI;AACH,IAAA,OAAOA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,IAAA,EAAO,SAAS,CAAA,CAAE,EAAE,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAM,KAAK,CAAA,EAAA,QAAA,EAAI,QAAQ,GAAO;AAChF;;;;;ACNO,MAAM,MAAM,GAA0B,CAAC,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAC,KAAI;AACvF,IAAA,QACEA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,OAAO,SAAS,CAAA,CAAE,EAAE,KAAK,oBAAM,KAAK,CAAA,EAAA,QAAA,EACjD,QAAQ,EAAA,CACL;AAEV;;MCDa,IAAI,GAAwB,CAAC,EAAE,KAAK,EAAE,KAAI;AAErD,IAAA,QACIA,cAAA,CAAC,GAAG,cACD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAgB,EAAE,KAAa,MACzCA,cAAA,CAAC,MAAM,EAAA,EAEL,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,IAAI,CAAC,KAAK,CAAA,EAAA,QAAA,EAErB,IAAI,CAAC,QAAQ,IAJT,KAAK,CAKH,CACV,CAAC,EAAA,CACE;AAEZ;;ACtBO,MAAM,MAAM,GAA0B,CAAC,EAC5C,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,UAAU,EACvB,KAAI;AACH,IAAA,MAAM,KAAK,GACT,SAAS,KAAK;AACZ,UAAE,EAAE,MAAM,EAAE,IAAI;UACd,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE;AAE9C,IAAA,OAAOA,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,KAAK,GAAI;AAC9B;;MCRa,OAAO,GAA2B,CAAC,EAC9C,KAAK,GAAG,SAAS,EACjB,SAAS,GAAG,CAAC,EACb,WAAW,GAAG,YAAY,EAC1B,MAAM,GAAG,CAAC,GACX,KAAI;AACH,IAAA,MAAM,MAAM,GACV,WAAW,KAAK;AACd,UAAE;AACE,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,CAAA,EAAG,MAAM,CAAA,IAAA,CAAM;AACxB;AACH,UAAE;AACE,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,eAAe,EAAE,KAAK;YACtB,MAAM,EAAE,CAAA,EAAA,EAAK,MAAM,CAAA,EAAA,CAAI;SACxB;AAEP,IAAA,OAAOA,cAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,MAAM,GAAI;AAC/B;;;;;ACZO,MAAM,QAAQ,GAA4B,CAAC,EAChD,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EAEb,QAAQ,GAAG,MAAM,EACjB,UAAU,GAAG,MAAM,EACnB,iBAAiB,GAAG,SAAS,EAC7B,WAAW,GAAG,wBAAwB,EAEtC,KAAK,GACN,KAAI;AACH,IAAA,QACEE,eAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,CAAA,mBAAA,EAAsB,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAC7D,KAAK,EAAE;YACL,CAAC,gBAAuB,GAAG,QAAQ;YACnC,CAAC,kBAAyB,GAAG,UAAU;YACvC,CAAC,iBAAwB,GAAG,iBAAiB;YAC7C,CAAC,mBAA0B,GAAG,WAAW;SAC1C,EAAA,QAAA,EAAA,CAEDF,cAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAC3C,EAEFA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,aAAA,EAAgB,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,CAAI,EAE1D,KAAK,IAAIA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,CAAA,EAAA,CACnD;AAEZ;;;;;ACxCO,MAAM,SAAS,GAA6B,CAAC,EAClD,KAAK,EACL,KAAK,GAAG,EAAE,EACV,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,MAAM,EACb,SAAS,GAAG,IAAI,EAChB,IAAI,GACL,KAAI;IACH,QACEE,yBAAK,SAAS,EAAE,aAAa,SAAS,GAAG,WAAW,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EAAA,CACxD,KAAK,IAAIF,cAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,iBAAiB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAS,EAE5DA,0BACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,CAAA,gBAAA,EAAmB,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EACpD,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAA,CACrD,EACD,IAAI,IAAIA,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAA,QAAA,EAAE,IAAI,EAAA,CAAO,EAEpD,KAAK,IAAIA,cAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,iBAAiB,YAAE,KAAK,EAAA,CAAK,CAAA,EAAA,CAChD;AAEV;;;;;ACpBO,MAAM,KAAK,GAAyB,CAAC,EAC1C,KAAK,EACL,IAAI,EACJ,KAAK,EACL,aAAa,EACb,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EAEb,WAAW,GAAG,MAAM,EACpB,QAAQ,GAAG,MAAM,EACjB,kBAAkB,GAAG,SAAS,EAC9B,iBAAiB,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,EACjD,WAAW,GAAG,wBAAwB,EAEtC,KAAK,GACN,KAAI;AACH,IAAA,MAAM,OAAO,GAAG,aAAa,KAAK,KAAK;IAEvC,QACEE,eAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,CAAA,gBAAA,EAAmB,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAE,EAC1D,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACA,KAAK,KACR,CAAC,mBAA0B,GAAG,WAAW,EACzC,CAAC,gBAAuB,GAAG,QAAQ,EACnC,CAAC,qBAA4B,GAAG,kBAAkB,EAClD,CAAC,iBAAwB,GAAG,iBAAiB,EAC7C,CAAC,mBAA0B,GAAG,WAAW,EAAA,CAAA,EAAA,QAAA,EAAA,CAG3CF,cAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,MAAM,QAAQ,CAAC,KAAK,CAAC,EAAA,CAC/B,EAEFA,yBAAM,SAAS,EAAE,CAAA,aAAA,EAAgB,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,GAAI,EAE1D,KAAK,IAAIA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,aAAa,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,CAAA,EAAA,CAChD;AAEZ;;;;;ACxCO,MAAM,MAAM,GAA0B,CAAC,EAC5C,KAAK,EACL,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EAEb,WAAW,GAAG,MAAM,EACpB,WAAW,GAAG,SAAS,EACvB,WAAW,GAAG,wBAAwB,EACtC,UAAU,GAAG,SAAS,EAEtB,KAAK,GACN,KAAI;AACH,IAAA,QACEE,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,gBAAgB,EAAC,KAAK,EAAE,KAAK,EAAA,QAAA,EAAA,CACzC,KAAK,IAAIF,cAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAC,cAAc,EAAA,QAAA,EAAE,KAAK,EAAA,CAAS,EAEzDA,cAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,CAAA,iBAAA,EAAoB,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAA,CAAA,EACvD,KAAK,GAAG,OAAO,GAAG,EACpB,CAAA,CAAE,EAAA,QAAA,EAEFA,cAAA,CAAA,QAAA,EAAA,EACE,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,KAAK,EAAE;wBACL,CAAC,cAAqB,GAAG,WAAW;wBACpC,CAAC,oBAA2B,GAAG,WAAW;wBAC1C,CAAC,oBAA2B,GAAG,WAAW;wBAC1C,CAAC,aAAoB,GAAG,UAAU;AACnC,qBAAA,EAAA,QAAA,EAEA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,MACfA,cAAA,CAAA,QAAA,EAAA,EAEE,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,KAAK,EAAE;4BACL,eAAe,EAAE,GAAG,CAAC,OAAO;4BAC5B,KAAK,EAAE,GAAG,CAAC,SAAS;AACrB,yBAAA,EAAA,QAAA,EAEA,GAAG,CAAC,KAAK,EAAA,EAPL,GAAG,CAAC,KAAK,CAQP,CACV,CAAC,EAAA,CACK,EAAA,CACL,CAAA,EAAA,CACF;AAEV;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/stories/Button.d.ts

@@ -0,0 +1,15 @@
+import './button.css';
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: Meta<({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: Meta<({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './page.css';
+export declare const Page: React.FC;

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,6 @@
+import type { StoryObj } from '@storybook/react-webpack5';
+declare const meta: Meta<import("react").FC<{}>>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@houssemdi2000/design-system",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Mon système de design React",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -10,7 +10,11 @@
   ],
   "scripts": {
     "build": "rollup -c",
-    "prepublishOnly": "npm run build"
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "prepublishOnly": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -28,11 +32,26 @@
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "^10.1.4",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/react-webpack5": "^10.1.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "@vitest/mocker": "^4.0.15",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jsdom": "^27.0.1",
     "rollup": "^4.53.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^10.1.4",
+    "ts-jest": "^29.4.6",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3"
   }