@solibo/solibo-ui 0.4.2 → 0.4.5

package/dist/components/nav/index.js

@@ -2,35 +2,35 @@ import { jsx as d } from "react/jsx-runtime";
 import { t as _ } from "../../classix-DG18itHa.js";
 import { useState as m } from "react";
 import { i as u } from "../../icons-DfmpRbxE.js";
-import '../../assets/index40.css';const v = "_nav_roa57_1", h = "_horizontal_roa57_7", b = "_tabs_roa57_17", w = "_pills_roa57_38", t = {
+import '../../assets/index40.css';const v = "_nav_joer2_1", h = "_horizontal_joer2_7", b = "_tabs_joer2_17", j = "_pills_joer2_38", t = {
   nav: v,
   horizontal: h,
   tabs: b,
-  pills: w
-}, z = {
+  pills: j
+}, w = {
   default: t.default,
   pills: t.pills,
   tabs: t.tabs
-}, N = ({
-  animation: r,
-  children: i,
-  className: e,
-  horizontal: o = !1,
-  variant: n = "default",
+}, C = ({
+  animation: e,
+  children: r,
+  className: i,
+  horizontal: a = !1,
+  variant: o = "default",
   ...l
 }) => {
   const [c, s] = m(!1), p = {
     "--icon-svg": u("chevron")
   };
-  return /* @__PURE__ */ d("nav", { className: _(e, o && t.horizontal, t.nav, z[n]), "data-animation": r, "data-open": c ? "true" : "false", "data-orientation": o ? "horizontal" : "vertical", onBlurCapture: (a) => {
-    if (n !== "pills" || window.innerWidth > 960) return;
-    const f = a.relatedTarget;
-    a.currentTarget.contains(f) || s(!1);
+  return /* @__PURE__ */ d("nav", { className: _(i, a && t.horizontal, t.nav, w[o]), "data-animation": e, "data-open": c ? "true" : "false", "data-orientation": a ? "horizontal" : "vertical", onBlurCapture: (n) => {
+    if (o !== "pills" || window.innerWidth > 960) return;
+    const f = n.relatedTarget;
+    n.currentTarget.contains(f) || s(!1);
   }, onClick: () => {
-    n !== "pills" || window.innerWidth > 960 || s((a) => !a);
-  }, style: p, ...l, "data-component": "nav", children: i });
+    o !== "pills" || window.innerWidth > 960 || s((n) => !n);
+  }, style: p, ...l, "data-component": "nav", children: r });
 };
 export {
-  N as Nav
+  C as Nav
 };
 //# sourceMappingURL=index.js.map

package/dist/components/toolbar/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index44.css');const a=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),s="_toolbar_104fz_1",n="_editor_104fz_33",o={toolbar:s,default:"_default_104fz_26",editor:n},i=({children:t,variant:e="default"})=>a.jsx("div",{className:l.t(o.toolbar,o[e]),onClick:r=>r.stopPropagation(),"data-component":"toolbar",children:t});exports.Toolbar=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index44.css');const a=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),s="_toolbar_kuorz_1",n="_editor_kuorz_33",o={toolbar:s,default:"_default_kuorz_26",editor:n},i=({children:t,variant:r="default"})=>a.jsx("div",{className:l.t(o.toolbar,o[r]),onClick:e=>e.stopPropagation(),"data-component":"toolbar",children:t});exports.Toolbar=i;
 //# sourceMappingURL=index.cjs.map

package/dist/components/toolbar/index.js

@@ -1,14 +1,14 @@
 import { jsx as l } from "react/jsx-runtime";
 import { t as e } from "../../classix-DG18itHa.js";
-import '../../assets/index44.css';const s = "_toolbar_104fz_1", n = "_editor_104fz_33", o = {
+import '../../assets/index44.css';const s = "_toolbar_kuorz_1", n = "_editor_kuorz_33", o = {
   toolbar: s,
-  default: "_default_104fz_26",
+  default: "_default_kuorz_26",
   editor: n
-}, f = ({
+}, i = ({
   children: t,
   variant: r = "default"
 }) => /* @__PURE__ */ l("div", { className: e(o.toolbar, o[r]), onClick: (a) => a.stopPropagation(), "data-component": "toolbar", children: t });
 export {
-  f as Toolbar
+  i as Toolbar
 };
 //# sourceMappingURL=index.js.map

package/dist/tokens.css

@@ -1,76 +1,211 @@
 /* generated by `pnpm tokens:build` 🥷 */
 
 :root {
-  --border: var(--border-width) solid var(--color-border);
-  --border-radius: calc(var(--unit) / 1.5);
-  --border-radius-large: calc(var(--unit) * 1.5);
-  --border-width: 1px;
-  --border-width-heavy: 2px;
-  --color-background-light: var(--color-neutral-light);
-  --color-black: rgb(23 23 23);
-  --color-border: var(--color-timberwolf);
-  --color-border-primary: rgb(42 42 42 / 12%);
-  --color-cod-gray: rgb(11 11 11);
-  --color-dark: rgb(180 180 180);
-  --color-draft: rgb(255 255 200 / 80%);
-  --color-electric-violet: rgb(90 35 245);
-  --color-fallback: var(--color-silver);
-  --color-green: rgb(0 146 20);
-  --color-green-dark: rgb(33 69 45);
-  --color-green-light: rgb(209 250 229);
-  --color-highlight: rgb(235 235 235);
-  --color-icon: var(--color-outer-space);
-  --color-mahogany: rgb(136 4 2);
-  --color-neutral: var(--color-timberwolf);
-  --color-neutral-light: var(--color-wild-sand);
-  --color-outer-space: rgb(82 82 82);
-  --color-placeholder-text: var(--color-silver);
-  --color-primary: var(--color-electric-violet);
-  --color-primary-dark: var(--color-purple-heart);
-  --color-purple-heart: rgb(64 25 174);
-  --color-purple-light: rgb(239 233 254);
-  --color-red: rgb(191 6 3);
-  --color-red-light: rgb(235 178 177);
-  --color-silver: rgb(194 194 194);
-  --color-surface-active: rgb(123 79 247 / 20%);
-  --color-text: var(--color-text-primary);
-  --color-text-primary: var(--color-cod-gray);
-  --color-text-secondary: var(--color-outer-space);
-  --color-timberwolf: rgb(223 223 223);
-  --color-translucent: rgba(255 255 255 / 60%);
-  --color-warning: var(--color-red);
-  --color-white: rgb(255 255 255);
-  --color-wild-sand: rgb(245 245 245);
-  --font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-  --font-size: var(--unit);
-  --font-size-h1: calc(var(--unit) * 2);
-  --font-size-h2: calc(var(--unit) * 1.25);
-  --font-size-h3: calc(var(--unit));
-  --font-size-small: calc(var(--unit) * 0.75);
-  --font-weight-bold: 700;
-  --font-weight-normal: 400;
-  --font-weight-semibold: 600;
-  --gradient: linear-gradient(180deg, rgb(255 255 255 / 100%), transparent 50%);
-  --icon-size: calc(var(--unit) * 1.5);
-  --negative-unit: calc(-1 * var(--unit));
-  --negative-unit-large: calc(var(--negative-unit) * 2);
-  --negative-unit-small: calc(var(--negative-unit) / 2);
-  --offset: calc(-2 * var(--unit));
-  --opacity-disabled: var(--opacity-minimal);
-  --opacity-minimal: 0.5;
-  --opacity-visited: var(--opacity-minimal);
-  --padding-box: 0.05px var(--unit);
-  --shadow: var(--shadow-color) var(--unit-micro) var(--unit-micro) var(--unit-tiny);
-  --shadow-big: var(--shadow-color) var(--unit-micro) var(--unit-micro) var(--unit-small);
-  --shadow-color: rgb(0 0 0 / 10%);
-  --transition-delay: 125ms;
-  --transition-duration: 250ms;
-  --transition-duration-long: calc(var(--transition-duration) * 2);
-  --transition-timing-function: ease-out;
-  --unit: 16px;
-  --unit-large: calc(var(--unit) * 2);
-  --unit-micro: calc(var(--unit) / 8);
-  --unit-small: calc(var(--unit) / 2);
-  --unit-tiny: calc(var(--unit) / 4);
-  --z-max: 2147483647;
+  --colors-green-100: #b0c8c2;
+  --colors-green-200: #8aaea5;
+  --colors-green-300: #54887c;
+  --colors-green-400: #337162;
+  --colors-green-50: #e6edeb;
+  --colors-green-500: #004e3b;
+  --colors-green-600: #004736;
+  --colors-green-700: #00372a;
+  --colors-green-800: #002b20;
+  --colors-green-900: #002119;
+  --colors-neutral-0: #fff;
+  --colors-neutral-100: #ebebeb;
+  --colors-neutral-200: #dfdfdf;
+  --colors-neutral-300: #999;
+  --colors-neutral-400: #7b7b7b;
+  --colors-neutral-50: #f5f5f5;
+  --colors-neutral-500: #525252;
+  --colors-neutral-600: #373737;
+  --colors-neutral-700: #2a2a2a;
+  --colors-neutral-800: #1c1c1c;
+  --colors-neutral-900: #0b0b0b;
+  --colors-orange-100: #fdd7b0;
+  --colors-orange-200: #fbc48a;
+  --colors-orange-300: #faa954;
+  --colors-orange-400: #f99933;
+  --colors-orange-50: #fef2e6;
+  --colors-orange-500: #f77f00;
+  --colors-orange-600: #e17400;
+  --colors-orange-700: #af5a00;
+  --colors-orange-800: #884600;
+  --colors-orange-900: #683500;
+  --colors-purple-100: #ccbbfc;
+  --colors-purple-200: #b39afa;
+  --colors-purple-300: #906cf8;
+  --colors-purple-400: #7b4ff7;
+  --colors-purple-50: #efe9fe;
+  --colors-purple-500: #5a23f5;
+  --colors-purple-600: #5220df;
+  --colors-purple-700: #4019ae;
+  --colors-purple-800: #321387;
+  --colors-purple-900: #260f67;
+  --colors-red-100: #ebb2b1;
+  --colors-red-200: #e28c8b;
+  --colors-red-300: #d45856;
+  --colors-red-400: #cc3835;
+  --colors-red-50: #f9e6e6;
+  --colors-red-500: #bf0603;
+  --colors-red-600: #ae0503;
+  --colors-red-700: #880402;
+  --colors-red-800: #690302;
+  --colors-red-900: #500301;
+  --colors-semantic-bg-disabled: var(--colors-neutral-50);
+  --colors-semantic-bg-overlay: var(--colors-neutral-100);
+  --colors-semantic-bg-page: var(--colors-neutral-50);
+  --colors-semantic-bg-surface: var(--colors-neutral-0);
+  --colors-semantic-border-default: var(--colors-neutral-200);
+  --colors-semantic-border-disabled: var(--colors-neutral-50);
+  --colors-semantic-border-focus: var(--colors-purple-500);
+  --colors-semantic-border-strong: var(--colors-neutral-300);
+  --colors-semantic-border-subtle: var(--colors-neutral-100);
+  --colors-semantic-content-disabled: var(--colors-neutral-300);
+  --colors-semantic-content-link: var(--colors-purple-600);
+  --colors-semantic-content-link-hover: var(--colors-purple-700);
+  --colors-semantic-content-link-visited: var(--colors-purple-400);
+  --colors-semantic-content-on-color: var(--colors-neutral-0);
+  --colors-semantic-content-primary: var(--colors-neutral-900);
+  --colors-semantic-content-secondary: var(--colors-neutral-500);
+  --colors-semantic-content-tertiary: var(--colors-neutral-400);
+  --colors-semantic-interactive-destructive-bg: var(--colors-red-600);
+  --colors-semantic-interactive-destructive-disabled: var(--colors-red-200);
+  --colors-semantic-interactive-destructive-hover: var(--colors-red-700);
+  --colors-semantic-interactive-disabled: var(--colors-neutral-200);
+  --colors-semantic-interactive-hover: var(--colors-purple-50);
+  --colors-semantic-interactive-hover-subtle: var(--colors-neutral-50);
+  --colors-semantic-interactive-pressed: var(--colors-purple-100);
+  --colors-semantic-interactive-selected: var(--colors-purple-100);
+  --colors-semantic-primary-on-primary: var(--colors-neutral-0);
+  --colors-semantic-primary-on-primary-subtle: var(--colors-purple-700);
+  --colors-semantic-primary-primary: var(--colors-purple-500);
+  --colors-semantic-primary-primary-active: var(--colors-purple-700);
+  --colors-semantic-primary-primary-hover: var(--colors-purple-600);
+  --colors-semantic-primary-primary-subtle: var(--colors-purple-50);
+  --colors-semantic-primary-primary-subtle-border: var(--colors-purple-200);
+  --colors-semantic-status-error-bg: var(--colors-red-50);
+  --colors-semantic-status-error-border: var(--colors-red-500);
+  --colors-semantic-status-error-content: var(--colors-red-700);
+  --colors-semantic-status-error-content-inverse: var(--colors-neutral-0);
+  --colors-semantic-status-success-bg: var(--colors-green-50);
+  --colors-semantic-status-success-border: var(--colors-green-200);
+  --colors-semantic-status-success-content: var(--colors-green-800);
+  --colors-semantic-status-success-content-inverse: var(--colors-neutral-0);
+  --colors-semantic-status-warning-bg: var(--colors-orange-50);
+  --colors-semantic-status-warning-border: var(--colors-orange-200);
+  --colors-semantic-status-warning-content: var(--colors-orange-800);
+  --colors-semantic-status-warning-content-inverse: var(--colors-neutral-0);
+  --font-base: 'Figtree';
+  --font-font-weight-bold: 700;
+  --font-font-weight-regular: 400;
+  --font-font-weight-semibold: 600;
+  --scale-0: 0px;
+  --scale-1: 1px;
+  --scale-12: 12px;
+  --scale-14: 14px;
+  --scale-16: 16px;
+  --scale-18: 18px;
+  --scale-2: 2px;
+  --scale-20: 20px;
+  --scale-24: 24px;
+  --scale-32: 32px;
+  --scale-4: 4px;
+  --scale-40: 40px;
+  --scale-48: 48px;
+  --scale-56: 56px;
+  --scale-64: 64px;
+  --scale-72: 72px;
+  --scale-8: 8px;
+  --scale-80: 80px;
+  --scale-88: 88px;
+  --scale-96: 96px;
+  --scale-negative-16: -16px;
+  --shape-border-radius-radius-2xl: var(--scale-24);
+  --shape-border-radius-radius-full: var(--scale-32);
+  --shape-border-radius-radius-lg: var(--scale-12);
+  --shape-border-radius-radius-md: var(--scale-8);
+  --shape-border-radius-radius-none: var(--scale-0);
+  --shape-border-radius-radius-sm: var(--scale-4);
+  --shape-border-radius-radius-xl: var(--scale-16);
+  --shape-spacing-2xl: var(--scale-48);
+  --shape-spacing-2xs: var(--scale-4);
+  --shape-spacing-3xl: var(--scale-64);
+  --shape-spacing-3xs: var(--scale-2);
+  --shape-spacing-lg: var(--scale-24);
+  --shape-spacing-md: var(--scale-16);
+  --shape-spacing-sm: var(--scale-12);
+  --shape-spacing-xl: var(--scale-32);
+  --shape-spacing-xs: var(--scale-8);
+  --typography-font-sizes-body-lg: var(--scale-18);
+  --typography-font-sizes-body-md: var(--scale-16);
+  --typography-font-sizes-body-sm: var(--scale-14);
+  --typography-font-sizes-caption: var(--scale-12);
+  --typography-font-sizes-display-lg: var(--scale-56);
+  --typography-font-sizes-display-sm: var(--scale-48);
+  --typography-font-sizes-h1: var(--scale-32);
+  --typography-font-sizes-h2: var(--scale-24);
+  --typography-font-sizes-h3: var(--scale-20);
+  --typography-font-sizes-h4: var(--scale-16);
+  --typography-font-sizes-label-lg: var(--scale-16);
+  --typography-font-sizes-label-sm: var(--scale-14);
+  --utils-tokens-font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  --utils-tokens-gradient: linear-gradient(180deg, rgb(255 255 255 / 100%), transparent 50%);
+  --utils-tokens-icon-size: var(--scale-16);
+  --utils-tokens-negative-unit: var(--scale-negative-16);
+  --utils-tokens-opacity-minimal: 0.5;
+  --utils-tokens-transition-delay: 125ms;
+  --utils-tokens-transition-duration: 250ms;
+  --utils-tokens-transition-timing-function: ease-out;
+  --utils-tokens-unit: var(--scale-16);
+  --utils-tokens-z-max: 2147483648;
+}
+
+[data-theme='dark'] {
+  --colors-semantic-bg-disabled: var(--colors-neutral-800);
+  --colors-semantic-bg-overlay: var(--colors-neutral-600);
+  --colors-semantic-bg-page: var(--colors-neutral-900);
+  --colors-semantic-bg-surface: var(--colors-neutral-800);
+  --colors-semantic-border-default: var(--colors-neutral-500);
+  --colors-semantic-border-disabled: var(--colors-neutral-700);
+  --colors-semantic-border-focus: var(--colors-purple-400);
+  --colors-semantic-border-subtle: var(--colors-neutral-600);
+  --colors-semantic-content-disabled: var(--colors-neutral-500);
+  --colors-semantic-content-link: var(--colors-purple-200);
+  --colors-semantic-content-link-hover: var(--colors-purple-300);
+  --colors-semantic-content-primary: var(--colors-neutral-50);
+  --colors-semantic-content-secondary: var(--colors-neutral-200);
+  --colors-semantic-content-tertiary: var(--colors-neutral-300);
+  --colors-semantic-interactive-disabled: var(--colors-neutral-500);
+  --colors-semantic-interactive-hover: var(--colors-purple-700);
+  --colors-semantic-interactive-hover-subtle: var(--colors-neutral-700);
+  --colors-semantic-interactive-pressed: var(--colors-purple-700);
+  --colors-semantic-interactive-selected: var(--colors-purple-600);
+  --colors-semantic-primary-on-primary-subtle: var(--colors-purple-200);
+  --colors-semantic-primary-primary: var(--colors-purple-300);
+  --colors-semantic-primary-primary-active: var(--colors-purple-200);
+  --colors-semantic-primary-primary-hover: var(--colors-purple-300);
+  --colors-semantic-primary-primary-subtle: var(--colors-purple-800);
+  --colors-semantic-primary-primary-subtle-border: var(--colors-purple-600);
+  --colors-semantic-status-error-bg: var(--colors-red-100);
+  --colors-semantic-status-error-border: var(--colors-red-300);
+  --colors-semantic-status-error-content: var(--colors-red-800);
+  --colors-semantic-status-success-bg: var(--colors-green-200);
+  --colors-semantic-status-success-border: var(--colors-green-400);
+  --colors-semantic-status-warning-bg: var(--colors-orange-200);
+  --colors-semantic-status-warning-border: var(--colors-orange-400);
+}
+
+@media (width <= 960px) {
+  :root {
+    --typography-font-sizes-body-lg: var(--scale-16);
+    --typography-font-sizes-display-lg: var(--scale-48);
+    --typography-font-sizes-display-sm: var(--scale-40);
+    --typography-font-sizes-h1: var(--scale-24);
+    --typography-font-sizes-h2: var(--scale-20);
+    --typography-font-sizes-h3: var(--scale-18);
+    --typography-font-sizes-h4: var(--scale-18);
+    --typography-font-sizes-label-lg: var(--scale-14);
+    --typography-font-sizes-label-sm: var(--scale-12);
+  }
 }