@shmidko61/lc-ui-kit 0.0.1

package/dist/button.js

@@ -0,0 +1,438 @@
+import { jsx as P, Fragment as rt } from "react/jsx-runtime";
+import { Box as q } from "./box.js";
+import { c as at } from "./responsive-style.config-DFuATrIM.js";
+import { cva as it } from "class-variance-authority";
+import { n as p } from "./responsive-style.utils-D10sC561.js";
+const lt = {
+  default: "bg-[var(--color-primary-accent)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#000)]",
+  secondary: "bg-[var(--color-background-subtle)] text-[var(--color-text-primary)] hover:bg-[color-mix(in_srgb,var(--color-background-subtle)_90%,#000)] active:bg-[color-mix(in_srgb,var(--color-background-subtle)_80%,#fff)]",
+  destructive: "bg-[var(--color-secondary-accent-2)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-2)_80%,#000)]",
+  success: "bg-[var(--color-secondary-accent-1)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-secondary-accent-1)_80%,#000)]",
+  dark: "bg-[var(--color-text-primary)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#fff)] active:bg-[color-mix(in_srgb,var(--color-text-primary)_80%,#000)]",
+  transparent: "bg-transparent text-[var(--color-text-primary)] hover:bg-transparent active:bg-transparent"
+}, st = {
+  sm: "text-[13px] font-medium leading-[120%] [&_svg]:size-4",
+  md: "text-[15px] font-medium leading-[140%] [&_svg]:size-5",
+  lg: "text-[18px] font-medium leading-[140%] [&_svg]:size-5"
+}, E = {
+  sm: "6px",
+  md: "8px",
+  lg: "12px"
+}, G = "box-border shrink-0 items-center overflow-hidden tracking-normal transition-colors duration-150 [font-family:var(--font-family)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", St = it(
+  [G, "[justify-content:var(--button-justify-content,center)]"].join(" "),
+  {
+    variants: {
+      variant: lt,
+      size: st,
+      fullWidth: {
+        true: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), J = {
+  sm: {
+    minWidth: 32,
+    p: { px: 12, py: 8 }
+  },
+  md: {
+    p: { px: 16, py: 10 }
+  },
+  lg: {
+    p: { px: 32, py: 16 }
+  }
+}, ct = {
+  base: "[justify-content:var(--button-justify-content)]",
+  md: "md:[justify-content:var(--md-button-justify-content)]",
+  lg: "lg:[justify-content:var(--lg-button-justify-content)]",
+  xl: "xl:[justify-content:var(--xl-button-justify-content)]"
+}, gt = {
+  default: {
+    activeBg: "color-mix(in srgb, var(--color-primary-accent) 80%, #000)",
+    bg: "--color-primary-accent",
+    color: "--color-background-default",
+    hoverBg: "color-mix(in srgb, var(--color-primary-accent) 80%, #fff)"
+  },
+  secondary: {
+    activeBg: "color-mix(in srgb, var(--color-background-subtle) 80%, #fff)",
+    bg: "--color-background-subtle",
+    color: "--color-text-primary",
+    hoverBg: "color-mix(in srgb, var(--color-background-subtle) 90%, #000)"
+  },
+  destructive: {
+    activeBg: "color-mix(in srgb, var(--color-secondary-accent-2) 80%, #000)",
+    bg: "--color-secondary-accent-2",
+    color: "--color-background-default",
+    hoverBg: "color-mix(in srgb, var(--color-secondary-accent-2) 80%, #fff)"
+  },
+  success: {
+    activeBg: "color-mix(in srgb, var(--color-secondary-accent-1) 80%, #000)",
+    bg: "--color-secondary-accent-1",
+    color: "--color-background-default",
+    hoverBg: "color-mix(in srgb, var(--color-secondary-accent-1) 80%, #fff)"
+  },
+  dark: {
+    activeBg: "color-mix(in srgb, var(--color-text-primary) 80%, #000)",
+    bg: "--color-text-primary",
+    color: "--color-background-default",
+    hoverBg: "color-mix(in srgb, var(--color-text-primary) 80%, #fff)"
+  },
+  transparent: {
+    activeBg: "transparent",
+    bg: "transparent",
+    color: "--color-text-primary",
+    hoverBg: "transparent"
+  }
+}, ut = {
+  sm: "[&_svg]:size-4",
+  md: "[&_svg]:size-5",
+  lg: "[&_svg]:size-5"
+}, bt = {
+  sm: {
+    fontSize: "13px",
+    fontWeight: 500,
+    lineHeight: "120%"
+  },
+  md: {
+    fontSize: "15px",
+    fontWeight: 500,
+    lineHeight: "140%"
+  },
+  lg: {
+    fontSize: "18px",
+    fontWeight: 500,
+    lineHeight: "140%"
+  }
+};
+function vt({
+  alignContent: o,
+  md: t,
+  lg: a,
+  xl: r
+}) {
+  const e = [], n = {};
+  return f(o, e, n, "base"), f(t?.alignContent, e, n, "md", "md-"), f(a?.alignContent, e, n, "lg", "lg-"), f(r?.alignContent, e, n, "xl", "xl-"), {
+    className: e.join(" "),
+    style: Object.keys(n).length ? n : void 0
+  };
+}
+function dt({ variant: o, md: t, lg: a, xl: r }, e = {}) {
+  const n = [], i = {};
+  return h(o, e, n, i), h(t?.variant, e.md, n, i, "md"), h(a?.variant, e.lg, n, i, "lg"), h(r?.variant, e.xl, n, i, "xl"), {
+    className: n.join(" "),
+    style: Object.keys(i).length ? i : void 0
+  };
+}
+function ft({
+  activeBg: o,
+  bg: t,
+  color: a,
+  hoverBg: r,
+  md: e,
+  lg: n,
+  xl: i
+}) {
+  const l = [], s = {};
+  return x({ activeBg: o, bg: t, color: a, hoverBg: r }, l, s), x(e, l, s, "md"), x(n, l, s, "lg"), x(i, l, s, "xl"), {
+    className: l.join(" "),
+    style: Object.keys(s).length ? s : void 0
+  };
+}
+function mt({
+  fontSize: o,
+  fontWeight: t,
+  lineHeight: a,
+  md: r,
+  lg: e,
+  xl: n
+}) {
+  const i = [], l = {};
+  return y({ fontSize: o, fontWeight: t, lineHeight: a }, i, l), y(r, i, l, "md"), y(e, i, l, "lg"), y(n, i, l, "xl"), {
+    className: i.join(" "),
+    style: Object.keys(l).length ? l : void 0
+  };
+}
+function ht({
+  size: o = "md",
+  md: t,
+  lg: a,
+  xl: r
+}) {
+  const e = [
+    ut[o],
+    B.fontSize,
+    B.fontWeight,
+    B.lineHeight
+  ], n = {};
+  return m(o, e, n), m(t?.size, e, n, "md"), m(a?.size, e, n, "lg"), m(r?.size, e, n, "xl"), {
+    className: e.join(" "),
+    style: n
+  };
+}
+function w(o) {
+  if (!o)
+    return;
+  const t = { ...o };
+  return (o.size || o.border) && (t.border = {
+    radius: o.size ? E[o.size] : void 0,
+    ...o.border
+  }), o.size && o.p === void 0 && (t.p = J[o.size].p), delete t.activeBg, delete t.alignContent, delete t.bg, delete t.color, delete t.fontSize, delete t.fontWeight, delete t.hoverBg, delete t.lineHeight, delete t.size, delete t.variant, t;
+}
+function f(o, t, a, r, e = "") {
+  if (!o)
+    return;
+  const n = `${e}button-justify-content`;
+  a[`--${n}`] = yt(o), t.push(ct[r]);
+}
+function m(o, t, a, r) {
+  if (!o)
+    return;
+  const { fontSize: e, fontWeight: n, lineHeight: i } = bt[o];
+  if (!r) {
+    a["--button-font-size"] = e, a["--button-font-weight"] = n, a["--button-line-height"] = i;
+    return;
+  }
+  a[`--${r}-button-font-size`] = e, a[`--${r}-button-font-weight`] = n, a[`--${r}-button-line-height`] = i, t.push(
+    xt[r][o],
+    z[r].fontSize,
+    z[r].fontWeight,
+    z[r].lineHeight
+  );
+}
+function h(o, t, a, r, e) {
+  if (!o)
+    return;
+  const n = e ? L[e] : K, i = e ? `${e}-` : "", l = gt[o];
+  t?.bg === void 0 && (r[`--${i}button-bg`] = c(l.bg), a.push(n.bg)), t?.color === void 0 && (r[`--${i}button-color`] = c(l.color), a.push(n.color)), t?.bg === void 0 && t?.hoverBg === void 0 && (r[`--${i}button-hover-bg`] = c(l.hoverBg), a.push(n.hoverBg)), t?.bg === void 0 && t?.hoverBg === void 0 && t?.activeBg === void 0 && (r[`--${i}button-active-bg`] = c(l.activeBg), a.push(n.activeBg));
+}
+function x(o, t, a, r) {
+  if (!o)
+    return;
+  const { activeBg: e, bg: n, color: i, hoverBg: l } = o, s = r ? L[r] : K, v = r ? `${r}-` : "";
+  n !== void 0 && (a[`--${v}button-bg`] = c(n), t.push(s.bg, s.hoverBg, s.activeBg)), l !== void 0 && (a[`--${v}button-hover-bg`] = c(l), t.push(s.hoverBg)), e !== void 0 && (a[`--${v}button-active-bg`] = c(e), t.push(s.activeBg)), i !== void 0 && (a[`--${v}button-color`] = c(i), t.push(s.color));
+}
+function y(o, t, a, r) {
+  if (!o)
+    return;
+  const { fontSize: e, fontWeight: n, lineHeight: i } = o, l = r ? z[r] : B, s = r ? `${r}-` : "";
+  e !== void 0 && (a[`--${s}button-font-size`] = p(e), t.push(l.fontSize)), n !== void 0 && (a[`--${s}button-font-weight`] = p(n), t.push(l.fontWeight)), i !== void 0 && (a[`--${s}button-line-height`] = p(i), t.push(l.lineHeight));
+}
+const K = {
+  activeBg: "active:bg-[var(--button-active-bg,var(--button-hover-bg,var(--button-bg)))]",
+  bg: "bg-[var(--button-bg)]",
+  color: "text-[var(--button-color)]",
+  hoverBg: "hover:bg-[var(--button-hover-bg,var(--button-bg))]"
+}, B = {
+  fontSize: "text-[length:var(--button-font-size)]",
+  fontWeight: "font-[var(--button-font-weight)]",
+  lineHeight: "leading-[var(--button-line-height)]"
+}, L = {
+  md: {
+    activeBg: "md:active:bg-[var(--md-button-active-bg,var(--md-button-hover-bg,var(--md-button-bg)))]",
+    bg: "md:bg-[var(--md-button-bg)]",
+    color: "md:text-[var(--md-button-color)]",
+    hoverBg: "md:hover:bg-[var(--md-button-hover-bg,var(--md-button-bg))]"
+  },
+  lg: {
+    activeBg: "lg:active:bg-[var(--lg-button-active-bg,var(--lg-button-hover-bg,var(--lg-button-bg)))]",
+    bg: "lg:bg-[var(--lg-button-bg)]",
+    color: "lg:text-[var(--lg-button-color)]",
+    hoverBg: "lg:hover:bg-[var(--lg-button-hover-bg,var(--lg-button-bg))]"
+  },
+  xl: {
+    activeBg: "xl:active:bg-[var(--xl-button-active-bg,var(--xl-button-hover-bg,var(--xl-button-bg)))]",
+    bg: "xl:bg-[var(--xl-button-bg)]",
+    color: "xl:text-[var(--xl-button-color)]",
+    hoverBg: "xl:hover:bg-[var(--xl-button-hover-bg,var(--xl-button-bg))]"
+  }
+}, z = {
+  md: {
+    fontSize: "md:text-[length:var(--md-button-font-size)]",
+    fontWeight: "md:font-[var(--md-button-font-weight)]",
+    lineHeight: "md:leading-[var(--md-button-line-height)]"
+  },
+  lg: {
+    fontSize: "lg:text-[length:var(--lg-button-font-size)]",
+    fontWeight: "lg:font-[var(--lg-button-font-weight)]",
+    lineHeight: "lg:leading-[var(--lg-button-line-height)]"
+  },
+  xl: {
+    fontSize: "xl:text-[length:var(--xl-button-font-size)]",
+    fontWeight: "xl:font-[var(--xl-button-font-weight)]",
+    lineHeight: "xl:leading-[var(--xl-button-line-height)]"
+  }
+}, xt = {
+  md: {
+    sm: "md:[&_svg]:size-4",
+    md: "md:[&_svg]:size-5",
+    lg: "md:[&_svg]:size-5"
+  },
+  lg: {
+    sm: "lg:[&_svg]:size-4",
+    md: "lg:[&_svg]:size-5",
+    lg: "lg:[&_svg]:size-5"
+  },
+  xl: {
+    sm: "xl:[&_svg]:size-4",
+    md: "xl:[&_svg]:size-5",
+    lg: "xl:[&_svg]:size-5"
+  }
+};
+function c(o) {
+  return String(p(o));
+}
+function yt(o) {
+  return {
+    center: "center",
+    end: "flex-end",
+    start: "flex-start"
+  }[o];
+}
+function jt({
+  alignContent: o,
+  children: t,
+  className: a,
+  disabled: r,
+  display: e,
+  border: n,
+  bg: i,
+  color: l,
+  cursor: s,
+  fullWidth: v,
+  href: _,
+  hoverBg: V,
+  activeBg: A,
+  fontSize: M,
+  fontWeight: Q,
+  isLoading: U = !1,
+  lineHeight: X,
+  minHeight: Y,
+  minWidth: Z,
+  md: g,
+  lg: u,
+  xl: b,
+  p: O,
+  position: tt,
+  size: ot,
+  style: T,
+  variant: nt,
+  width: et,
+  ...C
+}) {
+  const d = r || U, N = ot ?? "md", S = ht({
+    size: N,
+    md: g,
+    lg: u,
+    xl: b
+  }), j = vt({
+    alignContent: o,
+    md: g,
+    lg: u,
+    xl: b
+  }), $ = dt(
+    {
+      variant: nt ?? "default",
+      md: g,
+      lg: u,
+      xl: b
+    },
+    {
+      activeBg: A,
+      bg: i,
+      color: l,
+      hoverBg: V,
+      md: g,
+      lg: u,
+      xl: b
+    }
+  ), W = ft({
+    activeBg: A,
+    bg: i,
+    color: l,
+    hoverBg: V,
+    md: g,
+    lg: u,
+    xl: b
+  }), H = mt({
+    fontSize: M,
+    fontWeight: Q,
+    lineHeight: X,
+    md: g,
+    lg: u,
+    xl: b
+  }), I = {
+    ...C,
+    border: {
+      radius: E[N],
+      style: "none",
+      width: "0",
+      ...n
+    },
+    cursor: d ? "not-allowed" : s ?? "pointer",
+    display: e ?? "inline-flex",
+    minHeight: Y,
+    minWidth: Z,
+    md: w(g),
+    lg: w(u),
+    xl: w(b),
+    p: O ?? J[N].p,
+    position: tt ?? { type: "relative" },
+    width: et ?? (v ? "100%" : void 0)
+  }, R = at(
+    G,
+    S.className,
+    _ && "no-underline",
+    j.className,
+    $.className,
+    W.className,
+    H.className,
+    a
+  ), k = S.style || j.style || $.style || W.style || H.style || T ? {
+    ...S.style,
+    ...j.style,
+    ...$.style,
+    ...W.style,
+    ...H.style,
+    ...T
+  } : void 0, D = /* @__PURE__ */ P(rt, { children: t });
+  if (_) {
+    const F = C;
+    return /* @__PURE__ */ P(
+      q,
+      {
+        ...F,
+        ...I,
+        "aria-disabled": d || void 0,
+        as: "a",
+        className: R,
+        href: d ? void 0 : _,
+        style: k,
+        tabIndex: d ? -1 : F.tabIndex,
+        children: D
+      }
+    );
+  }
+  return /* @__PURE__ */ P(
+    q,
+    {
+      ...C,
+      ...I,
+      as: "button",
+      className: R,
+      disabled: d,
+      style: k,
+      children: D
+    }
+  );
+}
+export {
+  jt as Button,
+  E as buttonSizeBorderRadius,
+  J as buttonSizeBoxProps,
+  st as buttonSizeClassNames,
+  lt as buttonVariantClassNames,
+  St as buttonVariants
+};

package/dist/design-tokens/color.tokens.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Designer-approved color variables only.
+ * Do not add semantic aliases, derived state tokens, shadcn/Tailwind variables,
+ * or component-local variables here unless they are added to the source design tokens first.
+ */
+export declare const uiKitColorTokens: readonly ["--color-text-secondary", "--color-text-primary", "--color-primary-accent", "--color-background-subtle", "--color-background-default", "--color-background-inverted", "--color-background-muted", "--color-secondary-accent-1", "--color-secondary-accent-2", "--color-secondary-accent-3"];

package/dist/design-tokens/typography.tokens.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Typography variables supported by responsive style props.
+ *
+ * Values can come from design tokens or from runtime/SSR props, so the token
+ * type intentionally describes CSS variable names, not a fixed value scale.
+ */
+export declare const uiKitTypographyTokens: readonly ["--typo-fs-h1-sm", "--typo-fw-h1-sm", "--typo-lh-h1-sm", "--typo-fs-h1-md", "--typo-fw-h1-md", "--typo-lh-h1-md", "--typo-fs-h1-lg", "--typo-fw-h1-lg", "--typo-lh-h1-lg", "--typo-fs-h2-md", "--typo-fw-h2-md", "--typo-lh-h2-md", "--typo-fs-h2-lg", "--typo-fw-h2-lg", "--typo-lh-h2-lg", "--typo-fs-h3-lg", "--typo-fw-h3-lg", "--typo-lh-h3-lg", "--typo-fs-h3-md", "--typo-fw-h3-md", "--typo-lh-h3-md", "--typo-fs-h4-lg", "--typo-fw-h4-lg", "--typo-lh-h4-lg", "--typo-fs-h4-md", "--typo-fw-h4-md", "--typo-lh-h4-md", "--typo-fs-b1-lg", "--typo-fw-b1-lg", "--typo-lh-b1-lg", "--typo-fs-b1-md", "--typo-fw-b1-md", "--typo-lh-b1-md", "--typo-fs-b2-lg", "--typo-fw-b2-lg", "--typo-lh-b2-lg", "--typo-fs-b2-md", "--typo-fw-b2-md", "--typo-lh-b2-md", "--typo-fs-b3-lg", "--typo-fw-b3-lg", "--typo-lh-b3-lg", "--typo-fs-b3-md", "--typo-fw-b3-md", "--typo-lh-b3-md", "--typo-fs-caption-lg", "--typo-fw-caption-lg", "--typo-lh-caption-lg"];
+export type UiKitTypographyToken = (typeof uiKitTypographyTokens)[number];
+export type UiKitTypography = Partial<Record<UiKitTypographyToken, string | number>>;

package/dist/drop-down-CdIuWbLC.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("react");function i(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const r=i(c),s=e=>r.createElement("svg",{width:14,height:8,viewBox:"0 0 14 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},r.createElement("path",{d:"M0.75 0.75L6.75 6.75L12.75 0.75",stroke:"#152237",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"}));exports.SvgDropDown=s;

package/dist/drop-down-DH2_3qXq.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 14, height: 8, viewBox: "0 0 14 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M0.75 0.75L6.75 6.75L12.75 0.75", stroke: "#152237", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  o as S
+};

package/dist/eye-open-5zYaeyLp.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("react");function r(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(n,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return n.default=e,Object.freeze(n)}const t=r(i),a=e=>t.createElement("svg",{width:20,height:20,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},t.createElement("g",{clipPath:"url(#clip0_41_594)"},t.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10 6.25C7.92893 6.25 6.25 7.92893 6.25 10C6.25 12.0711 7.92893 13.75 10 13.75C12.0711 13.75 13.75 12.0711 13.75 10C13.75 7.92893 12.0711 6.25 10 6.25ZM7.5 10C7.5 8.61925 8.61926 7.5 10 7.5C11.3807 7.5 12.5 8.61925 12.5 10C12.5 11.3807 11.3807 12.5 10 12.5C8.61926 12.5 7.5 11.3807 7.5 10Z",fill:"#152237"}),t.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.99986 3.125C5.83467 3.125 2.24769 5.59694 0.615747 9.15292C0.36897 9.69067 0.36897 10.3093 0.615747 10.8471C2.24769 14.4031 5.83467 16.875 9.99986 16.875C14.165 16.875 17.752 14.4031 19.3839 10.8471C19.6308 10.3093 19.6308 9.69067 19.3839 9.15292C17.752 5.59694 14.165 3.125 9.99986 3.125ZM1.75182 9.67425C3.18809 6.54468 6.34232 4.375 9.99986 4.375C13.6574 4.375 16.8116 6.54468 18.2479 9.67425C18.3428 9.881 18.3428 10.119 18.2479 10.3257C16.8116 13.4553 13.6574 15.625 9.99986 15.625C6.34232 15.625 3.18809 13.4553 1.75182 10.3257C1.65695 10.119 1.65694 9.881 1.75182 9.67425Z",fill:"#152237"})),t.createElement("defs",null,t.createElement("clipPath",{id:"clip0_41_594"},t.createElement("rect",{width:20,height:20,fill:"white"}))));exports.SvgEyeOpen=a;

package/dist/eye-open-CoTSj5cT.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("g", { clipPath: "url(#clip0_41_594)" }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 6.25C7.92893 6.25 6.25 7.92893 6.25 10C6.25 12.0711 7.92893 13.75 10 13.75C12.0711 13.75 13.75 12.0711 13.75 10C13.75 7.92893 12.0711 6.25 10 6.25ZM7.5 10C7.5 8.61925 8.61926 7.5 10 7.5C11.3807 7.5 12.5 8.61925 12.5 10C12.5 11.3807 11.3807 12.5 10 12.5C8.61926 12.5 7.5 11.3807 7.5 10Z", fill: "#152237" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.99986 3.125C5.83467 3.125 2.24769 5.59694 0.615747 9.15292C0.36897 9.69067 0.36897 10.3093 0.615747 10.8471C2.24769 14.4031 5.83467 16.875 9.99986 16.875C14.165 16.875 17.752 14.4031 19.3839 10.8471C19.6308 10.3093 19.6308 9.69067 19.3839 9.15292C17.752 5.59694 14.165 3.125 9.99986 3.125ZM1.75182 9.67425C3.18809 6.54468 6.34232 4.375 9.99986 4.375C13.6574 4.375 16.8116 6.54468 18.2479 9.67425C18.3428 9.881 18.3428 10.119 18.2479 10.3257C16.8116 13.4553 13.6574 15.625 9.99986 15.625C6.34232 15.625 3.18809 13.4553 1.75182 10.3257C1.65695 10.119 1.65694 9.881 1.75182 9.67425Z", fill: "#152237" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("clipPath", { id: "clip0_41_594" }, /* @__PURE__ */ e.createElement("rect", { width: 20, height: 20, fill: "white" }))));
+export {
+  t as S
+};

package/dist/flex/flex.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'react';
+import { FlexProps } from './flex.types';
+export declare function Flex({ align, children, className, flexDirection, flexWrap, gap, grow, inline, justify, order, shrink, md, lg, xl, style, ...props }: FlexProps): JSX.Element;
+export type { FlexBreakpointProps, FlexProps, FlexResponsiveProps } from './flex.types';
+export type { UiKitAlign, UiKitFlexDirection, UiKitFlexParams, UiKitFlexWrap, UiKitGap, UiKitJustify, } from '../types';

package/dist/flex/flex.helpers.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+import { FlexResponsiveProps } from './flex.types';
+export type FlexTailwindClassNamePlan = {
+    /** Готовая строка Tailwind-классов для flex props. */
+    className: string;
+    /** CSS-переменные, которые читают Tailwind arbitrary utilities. */
+    style: CSSProperties | undefined;
+};
+export declare function buildFlexTailwindClassNamePlan(props: FlexResponsiveProps): FlexTailwindClassNamePlan;

package/dist/flex/flex.types.d.ts

@@ -0,0 +1,12 @@
+import { BoxAs, BoxBreakpointProps, BoxProps } from '../box/box.types';
+import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
+import { UiKitFlexParams } from '../types';
+export type FlexBreakpointProps = BoxBreakpointProps & UiKitFlexParams;
+export type FlexProps = Omit<BoxProps<BoxAs>, keyof BoxBreakpointProps | 'display' | 'md' | 'lg' | 'xl'> & FlexBreakpointProps & {
+    /** Рендерит контейнер как `inline-flex` вместо `flex`. */
+    inline?: boolean;
+    md?: FlexBreakpointProps;
+    lg?: FlexBreakpointProps;
+    xl?: FlexBreakpointProps;
+};
+export type FlexResponsiveProps = UiKitFlexParams & Partial<Record<ResponsiveStyleBreakpoint, FlexBreakpointProps>>;

package/dist/flex.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react/jsx-runtime"),w=require("./box.cjs"),P=require("./responsive-style.config-B2m9jVlX.cjs");function k(e){const t=[],n={},o={md:e.md,lg:e.lg,xl:e.xl};N(e,t,n);for(const i of P.responsiveBreakpoints){const r=o[i];r&&N(r,t,n,`${i}:`,`${i}-`)}return{className:t.join(" "),style:Object.keys(n).length>0?n:void 0}}function N({justify:e,align:t,gap:n,flexDirection:o,flexWrap:i,order:r,shrink:x,grow:p},d,m,b="",a=""){const c={justifyContent:e,alignItems:t,gap:n===void 0?void 0:h(n),flexDirection:o,flexWrap:i,order:r,flexShrink:x,flexGrow:p};for(const[l,s]of Object.entries(c)){if(s==null)continue;const f=`${a}${S(l)}`,g=C(l,f);g&&(m[`--${f}`]=String(s),d.push(`${b}${g}`))}}function C(e,t){const n=`var(--${t})`;return{alignItems:y("align-items",n),flexDirection:y("flex-direction",n),flexGrow:u("grow",n),flexShrink:u("shrink",n),flexWrap:y("flex-wrap",n),gap:u("gap",n),justifyContent:y("justify-content",n),order:u("order",n)}[e]}function u(e,t){return[e,"-[",t,"]"].join("")}function y(e,t){return["[",e,":",t,"]"].join("")}function S(e){return e.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function h(e){return typeof e=="number"?`${e}px`:e}function B({align:e,children:t,className:n,flexDirection:o,flexWrap:i,gap:r,grow:x,inline:p=!1,justify:d,order:m,shrink:b,md:a,lg:c,xl:l,style:s,...f}){const j=k({align:e,flexDirection:o,flexWrap:i,gap:r,grow:x,justify:d,order:m,shrink:b,md:a,lg:c,xl:l}),v=j.style||s?{...j.style,...s}:void 0;return $.jsx(w.Box,{className:P.cn(j.className,n),display:p?"inline-flex":"flex",md:a,lg:c,xl:l,style:v,...f,children:t})}exports.Flex=B;

package/dist/flex.js

@@ -0,0 +1,128 @@
+import { jsx as j } from "react/jsx-runtime";
+import { Box as w } from "./box.js";
+import { a as k, c as v } from "./responsive-style.config-DFuATrIM.js";
+function C(e) {
+  const t = [], n = {}, o = {
+    md: e.md,
+    lg: e.lg,
+    xl: e.xl
+  };
+  P(e, t, n);
+  for (const i of k) {
+    const r = o[i];
+    r && P(
+      r,
+      t,
+      n,
+      `${i}:`,
+      `${i}-`
+    );
+  }
+  return {
+    className: t.join(" "),
+    style: Object.keys(n).length > 0 ? n : void 0
+  };
+}
+function P({
+  justify: e,
+  align: t,
+  gap: n,
+  flexDirection: o,
+  flexWrap: i,
+  order: r,
+  shrink: p,
+  grow: x
+}, y, d, b = "", l = "") {
+  const c = {
+    justifyContent: e,
+    alignItems: t,
+    gap: n === void 0 ? void 0 : F(n),
+    flexDirection: o,
+    flexWrap: i,
+    order: r,
+    flexShrink: p,
+    flexGrow: x
+  };
+  for (const [a, s] of Object.entries(c)) {
+    if (s == null)
+      continue;
+    const f = `${l}${B(a)}`, g = h(a, f);
+    g && (d[`--${f}`] = String(s), y.push(`${b}${g}`));
+  }
+}
+function h(e, t) {
+  const n = `var(--${t})`;
+  return {
+    alignItems: m("align-items", n),
+    flexDirection: m("flex-direction", n),
+    flexGrow: u("grow", n),
+    flexShrink: u("shrink", n),
+    flexWrap: m("flex-wrap", n),
+    gap: u("gap", n),
+    justifyContent: m("justify-content", n),
+    order: u("order", n)
+  }[e];
+}
+function u(e, t) {
+  return [e, "-[", t, "]"].join("");
+}
+function m(e, t) {
+  return ["[", e, ":", t, "]"].join("");
+}
+function B(e) {
+  return e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
+}
+function F(e) {
+  return typeof e == "number" ? `${e}px` : e;
+}
+function G({
+  align: e,
+  children: t,
+  className: n,
+  flexDirection: o,
+  flexWrap: i,
+  gap: r,
+  grow: p,
+  inline: x = !1,
+  justify: y,
+  order: d,
+  shrink: b,
+  md: l,
+  lg: c,
+  xl: a,
+  style: s,
+  ...f
+}) {
+  const N = C({
+    align: e,
+    flexDirection: o,
+    flexWrap: i,
+    gap: r,
+    grow: p,
+    justify: y,
+    order: d,
+    shrink: b,
+    md: l,
+    lg: c,
+    xl: a
+  }), $ = N.style || s ? {
+    ...N.style,
+    ...s
+  } : void 0;
+  return /* @__PURE__ */ j(
+    w,
+    {
+      className: v(N.className, n),
+      display: x ? "inline-flex" : "flex",
+      md: l,
+      lg: c,
+      xl: a,
+      style: $,
+      ...f,
+      children: t
+    }
+  );
+}
+export {
+  G as Flex
+};

package/dist/grid/grid.d.ts

@@ -0,0 +1,25 @@
+import { JSX, ReactNode } from 'react';
+import { GridItemProps, GridProps } from './grid.types';
+/**
+ * Базовый Grid-компонент ui-kit.
+ *
+ * Grid является специализацией Box: все layout/background/as props передаются в
+ * Box, а сам Grid добавляет классы для `grid-template-columns` и `gap` через
+ * CSS-переменные. Это позволяет использовать один layout primitive и не дублировать
+ * размерные/background props между Box и Grid.
+ */
+declare function GridRoot({ children, className, cols, gap, md, lg, xl, style, ...boxProps }: GridProps): ReactNode;
+/**
+ * Ячейка Grid.
+ *
+ * Пока компонент не добавляет layout-логику поверх div, но формирует стабильный
+ * API `Grid.Item` для будущих grid-specific возможностей.
+ */
+export declare function GridItem({ children, className, ...props }: GridItemProps): JSX.Element;
+/**
+ * Compound component: `Grid` + `Grid.Item`.
+ */
+export declare const Grid: typeof GridRoot & {
+    Item: typeof GridItem;
+};
+export type { GridBreakpointProps, GridCols, GridGap, GridItemProps, GridProps, } from './grid.types';

package/dist/grid/grid.helpers.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties } from 'react';
+import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
+import { GridBreakpointProps } from './grid.types';
+export type GridTailwindClassNamePlan = {
+    /** Готовая строка Tailwind-классов для grid props. */
+    className: string;
+    /** CSS-переменные, которые читают Tailwind arbitrary utilities. */
+    style: CSSProperties | undefined;
+};
+/**
+ * Строит className + CSS variables для grid-specific props.
+ */
+export declare function buildGridTailwindClassNamePlan(props: GridBreakpointProps & Partial<Record<ResponsiveStyleBreakpoint, GridBreakpointProps>>): GridTailwindClassNamePlan;