@lazar-ui/kit 0.5.2 → 0.6.0

package/dist/typography.d.ts

@@ -1,6 +1,6 @@
 import { default as default_2 } from 'react';
 
-declare enum ETypographyColor {
+declare enum EHeadingColor {
     PRIMARY = "primary",
     SECONDARY = "secondary",
     TERTIARY = "tertiary",
@@ -8,69 +8,119 @@ declare enum ETypographyColor {
     BRAND = "brand"
 }
 
-declare enum ETypographySize {
+declare enum EHeadingSize {
     XS = "xs",
     SM = "sm",
     MD = "md",
-    LG = "lg",
-    XL = "xl",
-    XXL = "xxl"
+    LG = "lg"
 }
 
-declare enum ETypographyVariant {
-    HEADLINE = "headline",
-    BODY = "body",
-    LABEL = "label"
+declare enum ETextColor {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    DISABLED = "disabled",
+    BRAND = "brand"
 }
 
-export declare interface ITypographyProps extends default_2.PropsWithChildren {
-    /** HTML tag to render. Defaults: `h2` for headline, `p` for body, `span` for label. */
-    as?: TTypographyTag;
-    /** Color token variant. */
-    color?: TTypographyColor;
-    /** Ref to the root element. */
-    ref?: default_2.Ref<HTMLElement>;
-    /** Typography variant (stylistic group): `headline`, `body`, `label`. */
-    variant?: TTypographyVariant;
-    /** Typography size. */
-    size?: TTypographySize;
-    /** Truncate text with ellipsis (single-line). */
-    truncate?: boolean;
+declare enum ETextSize {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
 }
 
-declare type TTypographyColor = `${ETypographyColor}`;
-
-declare type TTypographySize = `${ETypographySize}`;
-
-declare type TTypographyTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
-
-declare type TTypographyVariant = `${ETypographyVariant}`;
+declare enum ETextWeight {
+    NORMAL = "normal",
+    MEDIUM = "medium",
+    SEMIBOLD = "semibold",
+    BOLD = "bold"
+}
 
 /**
- * Typography component. Renders text with preset combinations of font-size, font-weight, line-height, and letter-spacing.
+ * Heading component. Renders a semantic HTML heading (`h1`–`h6`) with preset
+ * font-size, font-weight, line-height, and optional letter-spacing.
  *
- * Supports three stylistic groups (`headline`, `body`, `label`) with various sizes.
- * Each combination maps to predefined CSS tokens for consistent typography across the UI.
+ * Each size maps to a predefined set of CSS tokens for consistent typography across the UI.
  *
  * @example
  * ```tsx
- * <Typography variant="headline" size="xl">Headline XL</Typography>
+ * <Heading as="h1" size="lg">Page title</Heading>
  * ```
  *
  * @example
  * ```tsx
- * <Typography variant="body" size="md" color="secondary">
- *   Body secondary text
- * </Typography>
+ * <Heading size="xs" color="secondary">Subtitle</Heading>
  * ```
+ */
+export declare const Heading: default_2.FC<IHeadingProps>;
+
+export declare interface IHeadingProps extends default_2.PropsWithChildren {
+    /** HTML tag to render. Default: `h2`. */
+    as?: THeadingTag;
+    /** Heading size. Default: `sm`. */
+    size?: THeadingSize;
+    /** Text color token. */
+    color?: THeadingColor;
+    /** Truncate text with ellipsis (single-line). */
+    truncate?: boolean;
+    /** Ref to the root heading element. */
+    ref?: default_2.Ref<HTMLHeadingElement>;
+}
+
+export declare interface ITextProps extends default_2.PropsWithChildren {
+    /** HTML-тег для рендера корневого элемента. По умолчанию `p`. */
+    as?: TTextTag;
+    /** Размер текста. По умолчанию `sm`. */
+    size?: TTextSize;
+    /** Насыщенность шрифта. По умолчанию `normal`. */
+    weight?: TTextWeight;
+    /** Цвет текста из дизайн-системы. Если не передан — используется наследованный цвет. */
+    color?: TTextColor;
+    /** Обрезать текст с многоточием (одна строка, `text-overflow: ellipsis`). */
+    truncate?: boolean;
+    /** Подчёркивание: `true` для обычного underline, `'dotted'` для пунктирного подчёркивания. */
+    underline?: boolean | 'dotted';
+    /** Зачёркивание текста (`text-decoration: line-through`). */
+    strikethrough?: boolean;
+    /** Ref на корневой элемент. */
+    ref?: default_2.Ref<HTMLElement>;
+}
+
+/**
+ * Text — компонент для отображения основного текста.
+ *
+ * Поддерживает размеры от 12px (xs) до 16px (lg), различные насыщенности шрифта
+ * и цвета из дизайн-системы. Подходит для параграфов, лейблов, аннотаций.
+ *
+ * В отличие от Heading, Text не имеет встроенного жирного начертания —
+ * вес управляется отдельным пропом `weight`.
  *
  * @example
  * ```tsx
- * <Typography variant="label" size="sm" as="span">
- *   Small label
- * </Typography>
+ * <Text size="lg" weight="medium">Основной текст</Text>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Text size="xs" color="secondary" as="span">Аннотация</Text>
  * ```
  */
-export declare const Typography: default_2.FC<ITypographyProps>;
+declare const Text_2: default_2.ForwardRefExoticComponent<Omit<ITextProps, "ref"> & default_2.RefAttributes<HTMLElement>>;
+export { Text_2 as Text }
+
+declare type THeadingColor = `${EHeadingColor}`;
+
+declare type THeadingSize = `${EHeadingSize}`;
+
+declare type THeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+declare type TTextColor = `${ETextColor}`;
+
+declare type TTextSize = `${ETextSize}`;
+
+declare type TTextTag = 'p' | 'span' | 'div';
+
+declare type TTextWeight = `${ETextWeight}`;
 
 export { }

package/dist/typography.js

@@ -1,40 +1,6 @@
-import d from "react";
-import h from "clsx";
-import { g as o } from "./getVariantClassName-DoCNtwBw.mjs";
-import './typography.css';const y = "Typography", z = "_root_wamht_5", w = "_truncate_wamht_9", p = "_variantHeadline_wamht_15", v = "_sizeLg_wamht_15", b = "_sizeXl_wamht_21", g = "_sizeXxl_wamht_27", X = "_variantBody_wamht_34", L = "_sizeXs_wamht_34", S = "_sizeSm_wamht_40", u = "_sizeMd_wamht_46", B = "_variantLabel_wamht_59", M = "_colorPrimary_wamht_78", f = "_colorSecondary_wamht_82", x = "_colorTertiary_wamht_86", N = "_colorDisabled_wamht_90", T = "_colorBrand_wamht_94", a = {
-  root: z,
-  truncate: w,
-  variantHeadline: p,
-  sizeLg: v,
-  sizeXl: b,
-  sizeXxl: g,
-  variantBody: X,
-  sizeXs: L,
-  sizeSm: S,
-  sizeMd: u,
-  variantLabel: B,
-  colorPrimary: M,
-  colorSecondary: f,
-  colorTertiary: x,
-  colorDisabled: N,
-  colorBrand: T
-}, D = (s) => {
-  const { as: e, children: n, color: t, ref: c, size: i = "sm", truncate: _ = !1, variant: r = "body" } = s, l = e || {
-    body: "p",
-    headline: "h2",
-    label: "span"
-  }[r] || "p", m = h(
-    a.root,
-    o("variant", r, a),
-    o("size", i, a),
-    t && o("color", t, a),
-    {
-      [a.truncate]: _
-    }
-  );
-  return d.createElement(l, { className: m, ref: c }, n);
-};
-D.displayName = y;
+import { H as r } from "./Heading-CL47Fqe7.mjs";
+import { T as t } from "./Text-DiOqZt8E.mjs";
 export {
-  D as Typography
+  r as Heading,
+  t as Text
 };

package/dist/useTabsContext-DdF09jQq.mjs

@@ -0,0 +1,11 @@
+import { createContext as e, useContext as o } from "react";
+const n = e(null), r = () => {
+  const t = o(n);
+  if (!t)
+    throw new Error("useTabsContext should be used inside Tabs component");
+  return t;
+};
+export {
+  n as C,
+  r as u
+};

package/dist/utils.d.ts

@@ -1,58 +1,5 @@
-import { default as default_2 } from 'react';
+export declare const getPageRange: (current: number, total: number) => TPageItem[];
 
-/**
- * Фильтрует массив дочерних React-элементов, оставляя только допустимые компоненты
- * @param children - Дочерние элементы React компонента
- * @param acceptableComponents - Массив или объект с допустимыми подкомпонентами
- * @returns Массив отфильтрованных дочерних элементов
- */
-export declare const filterValidChildren: (children: default_2.ReactNode, acceptableComponents: string | string[]) => default_2.ReactNode[];
-
-/**
- * Utility function to get component slots.
- * @param children React children (array of ReactNodes).
- * @param slots Array of slot names.
- * @returns
- */
-export declare const getComponentSlots: <T extends string>(children: default_2.ReactNode, slots: readonly T[]) => IDefaultSlotNode & { [key in T]: default_2.ReactElement; };
-
-/**
- * Utility to get the display name of a react element.
- * @param element react element to get the display name.
- * @returns
- */
-export declare const getReactElementDisplayName: (element: default_2.ReactElement) => string;
-
-/**
- * Utility function to get type-safety variant class name selector from CSS module stylesheet.
- * @param prefix prefix for class name (name of variant).
- * @param variant value of variant.
- * @param styles styles of CSS module stylesheet.
- *
- * @example
- * // Check `styles` for existing variant and return value of `styles.sizeMd`.
- * getVariantClassName('size', 'md', styles);
- */
-export declare const getVariantClassName: <P extends string, T extends string>(prefix: P, variant: T, styles: TStyles<`${P}${Capitalize<T>}`>) => string;
-
-declare interface IDefaultSlotNode {
-    children: default_2.ReactNode[];
-    [key: string]: default_2.ReactNode;
-}
-
-/**
- * TypeGuard for checking if a React node is valid.
- * @param name - name of the component
- * @param node - React node.
- * @param logWarning - if true, warning will be logged, otherwise it will be ignored.
- * @returns
- */
-export declare const isValidReactNode: <TProps extends object>(name: string | string[], node: default_2.ReactNode, logWarning?: boolean) => node is default_2.ReactElement<TProps>;
-
-/**
- * Record of CSS modules styles for all variants.
- * Must contain styles for all variants.
- */
-declare type TStyles<TProperty extends string = string> = Record<TProperty, string> & Record<string, string>;
+export declare type TPageItem = number | 'ellipsis';
 
 export { }

package/dist/utils.js

@@ -1,18 +1,17 @@
-import a from "react";
-import { i } from "./isValidReactNode-CmYwTWCE.mjs";
-import { g as f } from "./isValidReactNode-CmYwTWCE.mjs";
-import { g } from "./getComponentSlots-DwAYUFNk.mjs";
-import { g as C } from "./getVariantClassName-DoCNtwBw.mjs";
-const l = (r, o) => {
-  const e = [];
-  return a.Children.forEach(r, (t) => {
-    i(o, t) && e.push(t);
-  }), e;
+const s = (i, n) => Array.from({ length: n - i + 1 }, (c, l) => i + l), u = (i, n) => {
+  if (n <= 7)
+    return s(1, n);
+  const t = Math.max(i - 1, 1), e = Math.min(i + 1, n), o = t > 2, r = e < n - 1;
+  if (!o && r) {
+    const g = Math.min(e + 1, n);
+    return [...s(1, g), "ellipsis", n];
+  }
+  if (o && !r) {
+    const g = Math.max(t - 1, 1);
+    return [1, "ellipsis", ...s(g, n)];
+  }
+  return [1, "ellipsis", ...s(t, e), "ellipsis", n];
 };
 export {
-  l as filterValidChildren,
-  g as getComponentSlots,
-  f as getReactElementDisplayName,
-  C as getVariantClassName,
-  i as isValidReactNode
+  u as getPageRange
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lazar-ui/kit",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "license": "MIT",
   "description": "A component library for building admin panels, dashboards, and internal tools.",
   "homepage": "https://lazar-ui.github.io/docs",

package/dist/Button-jq8mFP6t.mjs

@@ -1,52 +0,0 @@
-import { jsxs as z, jsx as s } from "react/jsx-runtime";
-import v from "clsx";
-import { I as y } from "./Icon-DUCBChX2.mjs";
-import { g as o } from "./getVariantClassName-DoCNtwBw.mjs";
-import './Button.css';const g = "Button", h = "_root_1lm86_21", x = "_modeFilled_1lm86_32", S = "_variantPrimary_1lm86_32", b = "_pressed_1lm86_36", N = "_variantSecondary_1lm86_42", W = "_variantDanger_1lm86_52", C = "_disabled_1lm86_62", D = "_modeOutlined_1lm86_69", L = "_modeText_1lm86_94", M = "_fullWidth_1lm86_118", P = "_sizeSm_1lm86_121", B = "_sizeMd_1lm86_128", F = "_sizeLg_1lm86_135", I = "_icon_1lm86_143", e = {
-  root: h,
-  modeFilled: x,
-  variantPrimary: S,
-  pressed: b,
-  variantSecondary: N,
-  variantDanger: W,
-  disabled: C,
-  modeOutlined: D,
-  modeText: L,
-  fullWidth: M,
-  sizeSm: P,
-  sizeMd: B,
-  sizeLg: F,
-  icon: I
-}, O = (a) => {
-  const {
-    children: t,
-    disabled: i = !1,
-    fullWidth: l = !1,
-    icon: n,
-    mode: r = "filled",
-    onClick: d,
-    size: m = "md",
-    variant: _ = "primary",
-    pressed: c,
-    as: p = "button",
-    ...f
-  } = a, u = v(
-    e.root,
-    o("size", m, e),
-    o("variant", _, e),
-    o("mode", r, e),
-    {
-      [e.fullWidth]: l,
-      [e.pressed]: c,
-      [e.disabled]: i
-    }
-  );
-  return /* @__PURE__ */ z(p, { className: u, disabled: i, onClick: d, ...f, children: [
-    n && /* @__PURE__ */ s("span", { className: e.icon, children: /* @__PURE__ */ s(y, { name: n, size: 16 }) }),
-    t && /* @__PURE__ */ s("span", { children: t })
-  ] });
-};
-O.displayName = g;
-export {
-  O as B
-};

package/dist/checkbox.css

@@ -1 +0,0 @@
-:root{--checkbox-bg: var(--lui-color-background-primary);--checkbox-border: var(--lui-color-border-primary);--checkbox-checked-bg: var(--lui-color-background-brand);--checkbox-checked-border: var(--lui-color-background-brand);--checkbox-check-color: var(--lui-color-text-on-brand);--checkbox-disabled-bg: var(--lui-color-background-disabled);--checkbox-disabled-border: var(--lui-color-border-disabled);--checkbox-disabled-check: var(--lui-color-text-disabled);--checkbox-invalid-border: var(--lui-color-border-focus-error);--checkbox-radius: var(--lui-radius-1);--checkbox-gap-sm: var(--lui-space-1);--checkbox-gap-md: var(--lui-space-2)}._root_tw8jr_16{align-items:center;cursor:pointer;display:flex;position:relative;-webkit-user-select:none;user-select:none;width:100%}._root_tw8jr_16._disabled_tw8jr_24{cursor:not-allowed}._root_tw8jr_16._disabled_tw8jr_24 ._checkbox_tw8jr_27:before{background-color:var(--checkbox-disabled-bg);border-color:var(--checkbox-disabled-border)}._root_tw8jr_16._disabled_tw8jr_24 ._input_tw8jr_31:checked+._checkbox_tw8jr_27:after,._root_tw8jr_16._disabled_tw8jr_24._indeterminate_tw8jr_31 ._checkbox_tw8jr_27:after{background-color:var(--checkbox-disabled-check)}._root_tw8jr_16._invalid_tw8jr_34 ._checkbox_tw8jr_27:before{border-color:var(--checkbox-invalid-border)}._root_tw8jr_16._sizeSm_tw8jr_37{gap:var(--checkbox-gap-sm)}._root_tw8jr_16._sizeSm_tw8jr_37 ._checkbox_tw8jr_27{flex-basis:20px;height:20px;width:20px}._root_tw8jr_16._sizeSm_tw8jr_37 ._checkbox_tw8jr_27:after{height:12px;width:12px}._root_tw8jr_16._sizeSm_tw8jr_37 ._label_tw8jr_49{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-medium);line-height:var(--line-height-sm)}._root_tw8jr_16._sizeMd_tw8jr_54{gap:var(--checkbox-gap-md)}._root_tw8jr_16._sizeMd_tw8jr_54 ._checkbox_tw8jr_27{flex-basis:24px;height:24px;width:24px}._root_tw8jr_16._sizeMd_tw8jr_54 ._checkbox_tw8jr_27:after{height:14px;width:14px}._root_tw8jr_16._sizeMd_tw8jr_54 ._label_tw8jr_49{font-size:var(--lui-font-size-md);font-weight:var(--lui-font-weight-medium);line-height:var(--line-height-md)}._root_tw8jr_16._sizeLg_tw8jr_71{gap:var(--checkbox-gap-md)}._root_tw8jr_16._sizeLg_tw8jr_71 ._checkbox_tw8jr_27{flex-basis:28px;height:28px;width:28px}._root_tw8jr_16._sizeLg_tw8jr_71 ._checkbox_tw8jr_27:after{height:16px;width:16px}._root_tw8jr_16._sizeLg_tw8jr_71 ._label_tw8jr_49{font-size:var(--lui-font-size-lg);font-weight:var(--lui-font-weight-medium);line-height:var(--line-height-lg)}._checkbox_tw8jr_27{flex-grow:0;flex-shrink:0;padding:2px;position:relative}._checkbox_tw8jr_27:after{background-color:var(--checkbox-bg);content:"";height:14px;inset:0;margin:auto;position:absolute;width:14px}._checkbox_tw8jr_27:before{background-color:var(--checkbox-bg);border:1px solid var(--checkbox-border);border-radius:var(--checkbox-radius);content:"";inset:2px;position:absolute}._input_tw8jr_31:checked+._checkbox_tw8jr_27:before,._indeterminate_tw8jr_31 ._checkbox_tw8jr_27:before{background-color:var(--checkbox-checked-bg);border-color:var(--checkbox-checked-border)}._input_tw8jr_31:checked+._checkbox_tw8jr_27:after{clip-path:path(evenodd,"M10.9593 2.79299C11.3498 2.40252 11.9828 2.40263 12.3734 2.79299C12.7639 3.18352 12.7639 3.81653 12.3734 4.20706L5.95735 10.624C5.56693 11.0145 4.93383 11.0142 4.54328 10.624L1.62629 7.70706L1.55793 7.63089C1.23758 7.23811 1.26018 6.65911 1.62629 6.29299C1.99241 5.92688 2.57141 5.90429 2.96418 6.22464L3.04035 6.29299L5.24934 8.50198L10.9593 2.79299Z")}._indeterminate_tw8jr_31 ._checkbox_tw8jr_27:after{clip-path:path(evenodd,"M11.0836 6L11.1852 6.00488C11.6896 6.05592 12.0836 6.4821 12.0836 7C12.0836 7.5179 11.6896 7.94408 11.1852 7.99512L11.0836 8H2.91666C2.36437 8 1.91666 7.55228 1.91666 7C1.91666 6.44772 2.36437 6 2.91666 6H11.0836Z")}._input_tw8jr_31{left:0;position:absolute;visibility:hidden}._label_tw8jr_49{color:var(--lui-color-text-secondary);display:block}

package/dist/isValidReactNode-CmYwTWCE.mjs

@@ -1,18 +0,0 @@
-import { isValidElement as y } from "react";
-const c = (t) => t.type ? typeof t.type == "string" ? t.type : "displayName" in t.type ? t.type.displayName : t.type.name : "", r = (t, e) => t === e, n = (t, e, o = !0) => {
-  const s = Array.isArray(t);
-  let i = !1;
-  if (y(e)) {
-    const a = c(e);
-    s ? i = t.some((p) => r(p, a)) : i = r(t, a);
-  }
-  if (!i && o) {
-    let a = t;
-    s && (a = t.join(", ")), console.warn("Invalid React node. Node should be an instance of %s", a);
-  }
-  return i;
-};
-export {
-  c as g,
-  n as i
-};

package/dist/typography.css

@@ -1 +0,0 @@
-:root{--typography-headline-lg-size: 18px}._root_wamht_5{font-family:var(--lui-font-family-body);margin:0}._root_wamht_5._truncate_wamht_9{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._variantHeadline_wamht_15._sizeLg_wamht_15{font-size:var(--typography-headline-lg-size);font-weight:var(--lui-font-weight-semibold);letter-spacing:normal;line-height:var(--line-height-lg)}._variantHeadline_wamht_15._sizeXl_wamht_21{font-size:var(--lui-font-size-xl);font-weight:var(--lui-font-weight-semibold);letter-spacing:-.01em;line-height:var(--line-height-xl)}._variantHeadline_wamht_15._sizeXxl_wamht_27{font-size:var(--lui-font-size-2xl);font-weight:var(--lui-font-weight-bold);letter-spacing:-.02em;line-height:var(--line-height-2xl)}._variantBody_wamht_34._sizeXs_wamht_34{font-size:var(--lui-font-size-xs);font-weight:var(--lui-font-weight-normal);letter-spacing:normal;line-height:var(--line-height-xs)}._variantBody_wamht_34._sizeSm_wamht_40{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-normal);letter-spacing:normal;line-height:var(--line-height-sm)}._variantBody_wamht_34._sizeMd_wamht_46{font-size:var(--lui-font-size-md);font-weight:var(--lui-font-weight-normal);letter-spacing:normal;line-height:var(--line-height-md)}._variantBody_wamht_34._sizeLg_wamht_15{font-size:var(--lui-font-size-lg);font-weight:var(--lui-font-weight-normal);letter-spacing:normal;line-height:var(--line-height-lg)}._variantLabel_wamht_59._sizeXs_wamht_34{font-size:var(--lui-font-size-xs);font-weight:var(--lui-font-weight-medium);letter-spacing:.02em;line-height:var(--line-height-xs)}._variantLabel_wamht_59._sizeSm_wamht_40{font-size:var(--lui-font-size-sm);font-weight:var(--lui-font-weight-medium);letter-spacing:normal;line-height:var(--line-height-sm)}._variantLabel_wamht_59._sizeMd_wamht_46{font-size:var(--lui-font-size-md);font-weight:var(--lui-font-weight-medium);letter-spacing:normal;line-height:var(--line-height-md)}._colorPrimary_wamht_78{color:var(--lui-color-text-primary)}._colorSecondary_wamht_82{color:var(--lui-color-text-secondary)}._colorTertiary_wamht_86{color:var(--lui-color-text-tertiary)}._colorDisabled_wamht_90{color:var(--lui-color-text-disabled)}._colorBrand_wamht_94{color:var(--lui-color-text-link)}