zuii 1.1.0 → 1.2.1

package/dist/core/styles/tokens.css

@@ -0,0 +1,156 @@
+/**
+ * Auto-generated
+ */
+
+:root {
+  --primary: #296782;
+  --primary-rgb: 41, 103, 130;
+  --primary-dark: #1D4A5D;
+  --primary-dark-rgb: 29, 74, 93;
+  --primary-light: #73B6D3;
+  --primary-light-rgb: 115, 182, 211;
+  --primary-text-emphasis: var(--primary-dark);
+  --primary-bg-subtle: var(--primary-light);
+  --primary-border-subtle: color-mix(in srgb, var(--primary), var(--white) 60%);
+  --secondary: #49B4E8;
+  --secondary-rgb: 73, 180, 232;
+  --secondary-dark: #116188;
+  --secondary-dark-rgb: 17, 97, 136;
+  --secondary-light: #D2ECF9;
+  --secondary-light-rgb: 210, 236, 249;
+  --secondary-text-emphasis: var(--secondary-dark);
+  --secondary-bg-subtle: var(--secondary-light);
+  --secondary-border-subtle: color-mix(in srgb, var(--secondary), var(--white) 20%);
+  --accent: #49B4E8;
+  --accent-rgb: 73, 180, 232;
+  --accent-dark: #116188;
+  --accent-dark-rgb: 17, 97, 136;
+  --accent-light: #D2ECF9;
+  --accent-light-rgb: 210, 236, 249;
+  --accent-text-emphasis: var(--accent-dark);
+  --accent-bg-subtle: var(--accent-light);
+  --accent-border-subtle: color-mix(in srgb, var(--accent), var(--white) 20%);
+  --tertiary: #f5524d;
+  --tertiary-rgb: 245, 82, 77;
+  --tertiary-dark: color-mix(in srgb, var(--tertiary), var(--black) 70%);
+  --tertiary-light: color-mix(in srgb, var(--tertiary), var(--white) 80%);
+  --tertiary-text-emphasis: var(--tertiary-dark);
+  --tertiary-bg-subtle: var(--tertiary-light);
+  --tertiary-border-subtle: color-mix(in srgb, var(--tertiary), var(--white) 60%);
+  --success: #73D3B6;
+  --success-rgb: 115, 211, 182;
+  --success-dark: color-mix(in srgb, var(--success), var(--black) 20%);
+  --success-light: color-mix(in srgb, var(--success), var(--white) 50%);
+  --success-text-emphasis: var(--success-dark);
+  --success-bg-subtle: var(--success-light);
+  --success-border-subtle: color-mix(in srgb, var(--success), var(--white) 60%);
+  --danger: #EA5F5F;
+  --danger-rgb: 234, 95, 95;
+  --danger-dark: #AF1818;
+  --danger-dark-rgb: 175, 24, 24;
+  --danger-light: #F8D0A6;
+  --danger-light-rgb: 248, 208, 166;
+  --danger-text-emphasis: var(--danger-dark);
+  --danger-bg-subtle: var(--danger-light);
+  --danger-border-subtle: color-mix(in srgb, var(--danger), var(--white) 60%);
+  --warning: #F5D762;
+  --warning-rgb: 245, 215, 98;
+  --warning-dark: color-mix(in srgb, var(--warning), var(--black) 20%);
+  --warning-light: color-mix(in srgb, var(--warning), var(--white) 50%);
+  --warning-text-emphasis: var(--warning-dark);
+  --warning-bg-subtle: var(--warning-light);
+  --warning-border-subtle: color-mix(in srgb, var(--warning), var(--white) 60%);
+  --info: #73B6D3;
+  --info-rgb: 115, 182, 211;
+  --info-dark: color-mix(in srgb, var(--info), var(--black) 20%);
+  --info-light: color-mix(in srgb, var(--info), var(--white) 50%);
+  --info-text-emphasis: var(--info-dark);
+  --info-bg-subtle: var(--info-light);
+  --info-border-subtle: color-mix(in srgb, var(--info), var(--white) 60%);
+  --light: #FFFFFF;
+  --light-rgb: 255, 255, 255;
+  --light-dark: color-mix(in srgb, var(--light), var(--black) 70%);
+  --light-light: color-mix(in srgb, var(--light), var(--white) 80%);
+  --light-text-emphasis: var(--light-dark);
+  --light-bg-subtle: var(--light-light);
+  --light-border-subtle: color-mix(in srgb, var(--light), var(--white) 60%);
+  --dark: #000000;
+  --dark-rgb: 0, 0, 0;
+  --dark-dark: color-mix(in srgb, var(--dark), var(--black) 70%);
+  --dark-light: color-mix(in srgb, var(--dark), var(--white) 80%);
+  --dark-text-emphasis: var(--dark-dark);
+  --dark-bg-subtle: var(--dark-light);
+  --dark-border-subtle: color-mix(in srgb, var(--dark), var(--white) 60%);
+  --white: #ffffff;
+  --white-rgb: 255, 255, 255;
+  --black: #000000;
+  --black-rgb: 0, 0, 0;
+  --gray-100: #f8f9fa;
+  --gray-200: #e9ecef;
+  --gray-300: #dee2e6;
+  --gray-400: #ced4da;
+  --gray-500: #adb5bd;
+  --gray-600: #6c757d;
+  --gray-700: #495057;
+  --gray-800: #343a40;
+  --gray-900: #212529;
+  --gray: #6c757d;
+  --gray-dark: #343a40;
+  --font-primary: Mulish, sans-serif;
+  --font-monospace: var(--font-primary);
+  --font-sans-serif: var(--font-primary);
+  --border-radius-base: var(--size-1);
+  --border-radius-sm: var(--size-2);
+  --border-radius-lg: var(--size-4);
+  --border-radius-xl: var(--size-8);
+  --border-radius-xxl: var(--size-16);
+  --border-radius-2xl: var(--size-32);
+  --border-radius-pill: 999rem;
+  --box-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --box-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
+  --box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+  --box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  --box-shadow-outline: 0 0 0 3px var(--primary), 0 0 0 4px var(--primary);
+  --box-shadow-inset: inset 0 0 6px 0 rgba(0, 0, 0, 0.2);
+  --box-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
+  --size-0: 0;
+  --size-1: 0.25rem;
+  --size-2: 0.5rem;
+  --size-3: 0.75rem;
+  --size-4: 1rem;
+  --size-5: 1.25rem;
+  --size-6: 1.5rem;
+  --size-7: 1.75rem;
+  --size-8: 2rem;
+  --size-9: 2.25rem;
+  --size-10: 2.5rem;
+  --size-12: 3rem;
+  --size-14: 3.5rem;
+  --size-16: 4rem;
+  --size-20: 5rem;
+  --size-24: 6rem;
+  --size-28: 7rem;
+  --size-32: 8rem;
+  --size-36: 9rem;
+  --size-40: 10rem;
+  --size-44: 11rem;
+  --size-48: 12rem;
+  --size-52: 13rem;
+  --size-56: 14rem;
+  --size-60: 15rem;
+  --size-64: 16rem;
+  --size-72: 18rem;
+  --size-80: 20rem;
+  --size-96: 24rem;
+  --spacing-none: var(--size-0);
+  --spacing-xs: var(--size-1);
+  --spacing-sm: var(--size-2);
+  --spacing-md: var(--size-4);
+  --spacing-lg: var(--size-8);
+  --spacing-xl: var(--size-16);
+  --spacing-2xl: var(--size-32);
+  --spacing-3xl: var(--size-64);
+  --spacing-4xl: var(--size-80);
+}

package/dist/core/styles/tokens.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const BRANDS_PRIMARY = "#296782";
+export declare const BRANDS_SECONDARY = "#49B4E8";
+export declare const BRANDS_ACCENT = "#49B4E8";
+export declare const BRANDS_TERTIARY = "#f5524d";
+export declare const BRANDS_SUCCESS = "#73D3B6";
+export declare const BRANDS_DANGER = "#EA5F5F";
+export declare const BRANDS_WARNING = "#F5D762";
+export declare const BRANDS_INFO = "#73B6D3";
+export declare const BRANDS_LIGHT = "#FFFFFF";
+export declare const BRANDS_DARK = "#000000";
+export declare const COLOR_WHITE = "#ffffff";
+export declare const COLOR_BLACK = "#000000";
+export declare const COLOR_GRAY_100 = "#f8f9fa";
+export declare const COLOR_GRAY_200 = "#e9ecef";
+export declare const COLOR_GRAY_300 = "#dee2e6";
+export declare const COLOR_GRAY_400 = "#ced4da";
+export declare const COLOR_GRAY_500 = "#adb5bd";
+export declare const COLOR_GRAY_600 = "#6c757d";
+export declare const COLOR_GRAY_700 = "#495057";
+export declare const COLOR_GRAY_800 = "#343a40";
+export declare const COLOR_GRAY_900 = "#212529";
+export declare const COLOR_GRAY_ALIAS = "#6c757d";
+export declare const COLOR_GRAY_DARK_ALIAS = "#343a40";
+export declare const FONT_PRIMARY = "Mulish, sans-serif";
+export declare const FONT_MONOSPACE = "var(--font-primary)";
+export declare const FONT_SANS_SERIF = "var(--font-primary)";
+export declare const BORDER_RADIUS_BASE = "var(--size-1)";
+export declare const BORDER_RADIUS_SM = "var(--size-2)";
+export declare const BORDER_RADIUS_LG = "var(--size-4)";
+export declare const BORDER_RADIUS_XL = "var(--size-8)";
+export declare const BORDER_RADIUS_XXL = "var(--size-16)";
+export declare const BORDER_RADIUS_2XL = "var(--size-32)";
+export declare const BORDER_RADIUS_PILL = "999rem";
+export declare const BOX_SHADOW_XS = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+export declare const BOX_SHADOW_SM = "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)";
+export declare const BOX_SHADOW_MD = "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1)";
+export declare const BOX_SHADOW_LG = "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.2)";
+export declare const BOX_SHADOW_XL = "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.2)";
+export declare const BOX_SHADOW_2XL = "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+export declare const BOX_SHADOW_OUTLINE = "0 0 0 3px var(--primary), 0 0 0 4px var(--primary)";
+export declare const BOX_SHADOW_INSET = "inset 0 0 6px 0 rgba(0, 0, 0, 0.2)";
+export declare const BOX_SHADOW_NONE = "0 0 0 0 rgba(0, 0, 0, 0)";
+export declare const SIZE_0 = "0";
+export declare const SIZE_1 = "0.25rem";
+export declare const SIZE_2 = "0.5rem";
+export declare const SIZE_3 = "0.75rem";
+export declare const SIZE_4 = "1rem";
+export declare const SIZE_5 = "1.25rem";
+export declare const SIZE_6 = "1.5rem";
+export declare const SIZE_7 = "1.75rem";
+export declare const SIZE_8 = "2rem";
+export declare const SIZE_9 = "2.25rem";
+export declare const SIZE_10 = "2.5rem";
+export declare const SIZE_12 = "3rem";
+export declare const SIZE_14 = "3.5rem";
+export declare const SIZE_16 = "4rem";
+export declare const SIZE_20 = "5rem";
+export declare const SIZE_24 = "6rem";
+export declare const SIZE_28 = "7rem";
+export declare const SIZE_32 = "8rem";
+export declare const SIZE_36 = "9rem";
+export declare const SIZE_40 = "10rem";
+export declare const SIZE_44 = "11rem";
+export declare const SIZE_48 = "12rem";
+export declare const SIZE_52 = "13rem";
+export declare const SIZE_56 = "14rem";
+export declare const SIZE_60 = "15rem";
+export declare const SIZE_64 = "16rem";
+export declare const SIZE_72 = "18rem";
+export declare const SIZE_80 = "20rem";
+export declare const SIZE_96 = "24rem";
+export declare const SPACING_NONE = "var(--size-0)";
+export declare const SPACING_XS = "var(--size-1)";
+export declare const SPACING_SM = "var(--size-2)";
+export declare const SPACING_MD = "var(--size-4)";
+export declare const SPACING_LG = "var(--size-8)";
+export declare const SPACING_XL = "var(--size-16)";
+export declare const SPACING_2XL = "var(--size-32)";
+export declare const SPACING_3XL = "var(--size-64)";
+export declare const SPACING_4XL = "var(--size-80)";

package/dist/core/styles/tokens.ts

@@ -0,0 +1,89 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const BRANDS_PRIMARY = "#296782";
+export const BRANDS_SECONDARY = "#49B4E8";
+export const BRANDS_ACCENT = "#49B4E8";
+export const BRANDS_TERTIARY = "#f5524d";
+export const BRANDS_SUCCESS = "#73D3B6";
+export const BRANDS_DANGER = "#EA5F5F";
+export const BRANDS_WARNING = "#F5D762";
+export const BRANDS_INFO = "#73B6D3";
+export const BRANDS_LIGHT = "#FFFFFF";
+export const BRANDS_DARK = "#000000";
+export const COLOR_WHITE = "#ffffff";
+export const COLOR_BLACK = "#000000";
+export const COLOR_GRAY_100 = "#f8f9fa";
+export const COLOR_GRAY_200 = "#e9ecef";
+export const COLOR_GRAY_300 = "#dee2e6";
+export const COLOR_GRAY_400 = "#ced4da";
+export const COLOR_GRAY_500 = "#adb5bd";
+export const COLOR_GRAY_600 = "#6c757d";
+export const COLOR_GRAY_700 = "#495057";
+export const COLOR_GRAY_800 = "#343a40";
+export const COLOR_GRAY_900 = "#212529";
+export const COLOR_GRAY_ALIAS = "#6c757d";
+export const COLOR_GRAY_DARK_ALIAS = "#343a40";
+export const FONT_PRIMARY = "Mulish, sans-serif";
+export const FONT_MONOSPACE = "var(--font-primary)";
+export const FONT_SANS_SERIF = "var(--font-primary)";
+export const BORDER_RADIUS_BASE = "var(--size-1)";
+export const BORDER_RADIUS_SM = "var(--size-2)";
+export const BORDER_RADIUS_LG = "var(--size-4)";
+export const BORDER_RADIUS_XL = "var(--size-8)";
+export const BORDER_RADIUS_XXL = "var(--size-16)";
+export const BORDER_RADIUS_2XL = "var(--size-32)";
+export const BORDER_RADIUS_PILL = "999rem";
+export const BOX_SHADOW_XS = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+export const BOX_SHADOW_SM =
+  "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)";
+export const BOX_SHADOW_MD =
+  "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1)";
+export const BOX_SHADOW_LG =
+  "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.2)";
+export const BOX_SHADOW_XL =
+  "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.2)";
+export const BOX_SHADOW_2XL = "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+export const BOX_SHADOW_OUTLINE =
+  "0 0 0 3px var(--primary), 0 0 0 4px var(--primary)";
+export const BOX_SHADOW_INSET = "inset 0 0 6px 0 rgba(0, 0, 0, 0.2)";
+export const BOX_SHADOW_NONE = "0 0 0 0 rgba(0, 0, 0, 0)";
+export const SIZE_0 = "0";
+export const SIZE_1 = "0.25rem";
+export const SIZE_2 = "0.5rem";
+export const SIZE_3 = "0.75rem";
+export const SIZE_4 = "1rem";
+export const SIZE_5 = "1.25rem";
+export const SIZE_6 = "1.5rem";
+export const SIZE_7 = "1.75rem";
+export const SIZE_8 = "2rem";
+export const SIZE_9 = "2.25rem";
+export const SIZE_10 = "2.5rem";
+export const SIZE_12 = "3rem";
+export const SIZE_14 = "3.5rem";
+export const SIZE_16 = "4rem";
+export const SIZE_20 = "5rem";
+export const SIZE_24 = "6rem";
+export const SIZE_28 = "7rem";
+export const SIZE_32 = "8rem";
+export const SIZE_36 = "9rem";
+export const SIZE_40 = "10rem";
+export const SIZE_44 = "11rem";
+export const SIZE_48 = "12rem";
+export const SIZE_52 = "13rem";
+export const SIZE_56 = "14rem";
+export const SIZE_60 = "15rem";
+export const SIZE_64 = "16rem";
+export const SIZE_72 = "18rem";
+export const SIZE_80 = "20rem";
+export const SIZE_96 = "24rem";
+export const SPACING_NONE = "var(--size-0)";
+export const SPACING_XS = "var(--size-1)";
+export const SPACING_SM = "var(--size-2)";
+export const SPACING_MD = "var(--size-4)";
+export const SPACING_LG = "var(--size-8)";
+export const SPACING_XL = "var(--size-16)";
+export const SPACING_2XL = "var(--size-32)";
+export const SPACING_3XL = "var(--size-64)";
+export const SPACING_4XL = "var(--size-80)";

package/dist/index.d.ts

@@ -1 +1,2 @@
 export * from './components/Button/react';
+export * from './components/Icon/react';

package/dist/index.js

@@ -1,5 +1,7 @@
 import './core/styles/main.css';/* empty css                      */
-import { ZButton as m } from "./components/Button/react/index.js";
+import { Button as m } from "./components/Button/react/index.js";
+import { Icon as e } from "./components/Icon/react/index.js";
 export {
-  m as ZButton
+  m as Button,
+  e as Icon
 };

package/dist/node_modules/.pnpm/@restart_ui@1.9.4_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@restart/ui/esm/Button.js

@@ -0,0 +1,78 @@
+import * as a from "react";
+import { jsx as b } from "react/jsx-runtime";
+const y = ["as", "disabled"];
+function P(n, t) {
+  if (n == null) return {};
+  var o = {};
+  for (var i in n) if ({}.hasOwnProperty.call(n, i)) {
+    if (t.indexOf(i) >= 0) continue;
+    o[i] = n[i];
+  }
+  return o;
+}
+function x(n) {
+  return !n || n.trim() === "#";
+}
+function j({
+  tagName: n,
+  disabled: t,
+  href: o,
+  target: i,
+  rel: e,
+  role: r,
+  onClick: s,
+  tabIndex: c = 0,
+  type: d
+}) {
+  n || (o != null || i != null || e != null ? n = "a" : n = "button");
+  const f = {
+    tagName: n
+  };
+  if (n === "button")
+    return [{
+      type: d || "button",
+      disabled: t
+    }, f];
+  const l = (u) => {
+    if ((t || n === "a" && x(o)) && u.preventDefault(), t) {
+      u.stopPropagation();
+      return;
+    }
+    s?.(u);
+  }, p = (u) => {
+    u.key === " " && (u.preventDefault(), l(u));
+  };
+  return n === "a" && (o || (o = "#"), t && (o = void 0)), [{
+    role: r ?? "button",
+    // explicitly undefined so that it overrides the props disabled in a spread
+    // e.g. <Tag {...props} {...hookProps} />
+    disabled: void 0,
+    tabIndex: t ? void 0 : c,
+    href: o,
+    target: n === "a" ? i : void 0,
+    "aria-disabled": t || void 0,
+    rel: n === "a" ? e : void 0,
+    onClick: l,
+    onKeyDown: p
+  }, f];
+}
+const w = /* @__PURE__ */ a.forwardRef((n, t) => {
+  let {
+    as: o,
+    disabled: i
+  } = n, e = P(n, y);
+  const [r, {
+    tagName: s
+  }] = j(Object.assign({
+    tagName: o,
+    disabled: i
+  }, e));
+  return /* @__PURE__ */ b(s, Object.assign({}, e, r, {
+    ref: t
+  }));
+});
+w.displayName = "Button";
+export {
+  x as isTrivialHref,
+  j as useButtonProps
+};

package/dist/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.js

@@ -0,0 +1,37 @@
+import { __module as s } from "../../../../../_virtual/index2.js";
+var u;
+function c() {
+  return u ? s.exports : (u = 1, (function(i) {
+    (function() {
+      var f = {}.hasOwnProperty;
+      function n() {
+        for (var r = "", t = 0; t < arguments.length; t++) {
+          var e = arguments[t];
+          e && (r = o(r, a(e)));
+        }
+        return r;
+      }
+      function a(r) {
+        if (typeof r == "string" || typeof r == "number")
+          return r;
+        if (typeof r != "object")
+          return "";
+        if (Array.isArray(r))
+          return n.apply(null, r);
+        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+          return r.toString();
+        var t = "";
+        for (var e in r)
+          f.call(r, e) && r[e] && (t = o(t, e));
+        return t;
+      }
+      function o(r, t) {
+        return t ? r ? r + " " + t : r + t : r;
+      }
+      i.exports ? (n.default = n, i.exports = n) : window.classNames = n;
+    })();
+  })(s), s.exports);
+}
+export {
+  c as __require
+};

package/dist/node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/Button.js

@@ -0,0 +1,34 @@
+import u from "../../../../../../_virtual/index.js";
+import * as l from "react";
+import { useButtonProps as N } from "../../../../@restart_ui@1.9.4_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@restart/ui/esm/Button.js";
+import { useBootstrapPrefix as x } from "./ThemeProvider.js";
+import { jsx as B } from "react/jsx-runtime";
+const $ = /* @__PURE__ */ l.forwardRef(({
+  as: m,
+  bsPrefix: s,
+  variant: e = "primary",
+  size: a,
+  active: f = !1,
+  disabled: t = !1,
+  className: n,
+  ...o
+}, p) => {
+  const r = x(s, "btn"), [c, {
+    tagName: i
+  }] = N({
+    tagName: m,
+    disabled: t,
+    ...o
+  });
+  return /* @__PURE__ */ B(i, {
+    ...c,
+    ...o,
+    ref: p,
+    disabled: t,
+    className: u(n, r, f && "active", e && `${r}-${e}`, a && `${r}-${a}`, o.href && t && "disabled")
+  });
+});
+$.displayName = "Button";
+export {
+  $ as default
+};

package/dist/node_modules/.pnpm/react-bootstrap@2.10.10_@types_react@19.2.10_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/react-bootstrap/esm/ThemeProvider.js

@@ -0,0 +1,23 @@
+import * as s from "react";
+import { useContext as n } from "react";
+import "react/jsx-runtime";
+const m = ["xxl", "xl", "lg", "md", "sm", "xs"], x = "xs", o = /* @__PURE__ */ s.createContext({
+  prefixes: {},
+  breakpoints: m,
+  minBreakpoint: x
+}), {
+  Consumer: c,
+  Provider: a
+} = o;
+function T(t, e) {
+  const {
+    prefixes: r
+  } = n(o);
+  return t || r[e] || e;
+}
+export {
+  m as DEFAULT_BREAKPOINTS,
+  x as DEFAULT_MIN_BREAKPOINT,
+  c as ThemeConsumer,
+  T as useBootstrapPrefix
+};

package/package.json

@@ -1,26 +1,34 @@
 {
 	"name": "zuii",
-	"version": "1.1.0",
+	"version": "1.2.1",
 	"description": "Bibliothèque de composants UI légère, intuitive et modulaire pour les interfaces web modernes.",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"files": [
-		"dist"
+		"dist",
+		"style-dictionary"
 	],
+	"bin": {
+		"zuii-tokens": "./style-dictionary/build.js"
+	},
 	"scripts": {
 		"dev": "vite",
+		"prebuild": "pnpm run tokens:build",
 		"build": "vite build",
+		"postbuild": "mkdir -p dist/core/styles && cp src/core/styles/_tokens.scss src/core/styles/tokens.css src/core/styles/tokens.ts dist/core/styles/",
 		"preview": "vite preview",
-		"prepublishOnly": "npm run build"
+		"prepublishOnly": "pnpm run build",
+		"tokens:build": "node style-dictionary/build.js --output src/core/styles"
 	},
 	"keywords": [],
 	"author": "Vincent Moreau",
 	"license": "MIT",
 	"peerDependencies": {
 		"react": ">=16.8.0",
-		"react-dom": ">=16.8.0"
+		"react-dom": ">=16.8.0",
+		"react-bootstrap": ">=2.10.10"
 	},
 	"devDependencies": {
 		"@semantic-release/changelog": "^6.0.3",
@@ -32,12 +40,17 @@
 		"@types/react-dom": "^19.2.3",
 		"@vitejs/plugin-react": "^5.1.2",
 		"react": "^19.2.4",
+		"react-bootstrap": "^2.10.10",
 		"react-dom": "^19.2.4",
 		"sass": "^1.97.3",
 		"semantic-release": "^25.0.2",
 		"typescript": "^5.9.3",
 		"vite": "^7.3.1",
 		"vite-plugin-dts": "^4.5.4",
-		"vite-plugin-lib-inject-css": "^2.2.2"
+		"vite-plugin-lib-inject-css": "^2.2.2",
+		"bootstrap": "^5.3.8",
+		"lucide-static": "^0.563.0",
+		"style-dictionary": "^4.2.0",
+		"colord": "^2.9.3"
 	}
 }

package/style-dictionary/README.md

@@ -0,0 +1,95 @@
+# Style Dictionary - Zuii
+
+Ce dossier contient la configuration Style Dictionary pour générer les tokens de design de Zuii.
+
+## Utilisation dans votre projet
+
+Après avoir installé `zuii` dans votre projet, vous pouvez générer les tokens de design en utilisant la commande `zuii-tokens`.
+
+### Commande de base
+
+```bash
+npx zuii-tokens
+```
+
+Par défaut, cette commande :
+- Cherche les tokens dans le dossier `tokens/` de votre projet
+- Génère les fichiers dans le répertoire courant de votre projet
+
+### Options
+
+#### Spécifier le chemin de sortie
+
+Vous pouvez spécifier où générer les fichiers avec l'option `--output` ou `-o` :
+
+```bash
+npx zuii-tokens --output src/styles
+```
+
+Cela générera les fichiers dans `src/styles/` :
+- `src/styles/_tokens.scss` - Variables SCSS avec maps
+- `src/styles/tokens.css` - Variables CSS custom properties
+- `src/styles/tokens.ts` - Constantes TypeScript
+
+#### Spécifier le chemin des tokens source
+
+Vous pouvez spécifier un ou plusieurs chemins vers vos fichiers de tokens :
+
+```bash
+npx zuii-tokens design-tokens
+```
+
+### Exemple d'utilisation
+
+Dans votre `package.json`, vous pouvez ajouter un script :
+
+```json
+{
+  "scripts": {
+    "tokens": "zuii-tokens --output src/styles"
+  }
+}
+```
+
+## Développement local (dans le package zuii)
+
+Si vous travaillez sur le package zuii lui-même, la génération est automatisée lors du build :
+
+```bash
+pnpm run build
+```
+
+Ce processus effectue les étapes suivantes :
+1.  **Génération (src)** : Les tokens sont générés dans `src/core/styles/` pour être utilisés par la compilation Sass (ces fichiers sont ignorés par Git).
+2.  **Copie (dist)** : Après le build Vite, les tokens sont copiés dans `dist/core/styles/` pour être distribués aux utilisateurs.
+
+Pour générer les tokens manuellement pendant le développement (sans faire un build complet) :
+
+```bash
+pnpm run tokens:build
+```
+
+Cela générera les fichiers dans `src/core/styles/`.
+
+## Structure des tokens
+
+Les tokens doivent être organisés en fichiers JSON dans le format Style Dictionary :
+
+```json
+{
+  "color": {
+    "primary": { "value": "#296782" }
+  }
+}
+```
+
+## Fichiers générés
+
+### `_tokens.scss`
+Variables SCSS organisées en maps pour une utilisation facile dans vos styles SCSS.
+
+### `tokens.css`
+Variables CSS custom properties (CSS variables) pour une utilisation directe dans vos styles CSS.
+
+### `tokens.ts`
+Constantes TypeScript pour une utilisation dans votre code JavaScript/TypeScript.