@shmidko61/lc-ui-kit 0.6.0 → 0.7.0

package/dist/grid.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),w=require("./box.cjs"),g=require("./responsive-style.config-B2m9jVlX.cjs");function j(t){const i=[],n={},l={md:t.md,lg:t.lg,xl:t.xl};a(t,i,n);for(const e of g.responsiveBreakpoints){const o=l[e];o&&a(o,i,n,`${e}:`,`${e}-`)}return{className:i.join(" "),style:Object.keys(n).length>0?n:void 0}}function a({cols:t,gap:i},n,l,e="",o=""){if(t!==void 0){const c=`${o}grid-template-columns`;l[`--${c}`]=`repeat(${t}, minmax(0, 1fr))`,n.push(`${e}${m("grid-cols",`var(--${c})`)}`)}if(i!==void 0){const c=`${o}grid-gap`;l[`--${c}`]=G(i),n.push(`${e}${m("gap",`var(--${c})`)}`)}}function m(t,i){return[t,"-[",i,"]"].join("")}function G(t){return typeof t=="number"?`${t}px`:t}function N({children:t,className:i,cols:n=1,gap:l=0,md:e,lg:o,xl:c,style:s,...h}){const r=j({cols:n,gap:l,md:e,lg:o,xl:c}),v=d(e),x=d(o),y=d(c),$=r.style||s?{...r.style,...s}:void 0;return u.jsx(w.Box,{...h,display:"grid",className:g.cn(r.className,i),md:v,lg:x,xl:y,style:$,children:t})}function f({children:t,className:i,...n}){return u.jsx("div",{className:i,...n,children:t})}const S=Object.assign(N,{Item:f});function d(t){if(t)return{aspectRatio:t.aspectRatio,background:t.background,backgroundColor:t.backgroundColor,boxShadow:t.boxShadow,color:t.color,height:t.height,maxHeight:t.maxHeight,maxWidth:t.maxWidth,minHeight:t.minHeight,minWidth:t.minWidth,opacity:t.opacity,overflow:t.overflow,overflowX:t.overflowX,overflowY:t.overflowY,pointerEvents:t.pointerEvents,transform:t.transform,transformOrigin:t.transformOrigin,width:t.width}}exports.Grid=S;exports.GridItem=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),w=require("./box.cjs"),g=require("./responsive-style.config-B2m9jVlX.cjs");function j(t){const i=[],n={},l={md:t.md,lg:t.lg,xl:t.xl};a(t,i,n);for(const e of g.responsiveBreakpoints){const o=l[e];o&&a(o,i,n,`${e}:`,`${e}-`)}return{className:i.join(" "),style:Object.keys(n).length>0?n:void 0}}function a({cols:t,gap:i},n,l,e="",o=""){if(t!==void 0){const c=`${o}grid-template-columns`;l[`--${c}`]=`repeat(${t}, minmax(0, 1fr))`,n.push(`${e}${m("grid-cols",`var(--${c})`)}`)}if(i!==void 0){const c=`${o}grid-gap`;l[`--${c}`]=G(i),n.push(`${e}${m("gap",`var(--${c})`)}`)}}function m(t,i){return[t,"-[",i,"]"].join("")}function G(t){return typeof t=="number"?`${t}px`:t}function N({children:t,className:i,cols:n=1,gap:l=0,md:e,lg:o,xl:c,style:s,...h}){const d=j({cols:n,gap:l,md:e,lg:o,xl:c}),v=r(e),x=r(o),y=r(c),$=d.style||s?{...d.style,...s}:void 0;return u.jsx(w.Box,{...h,display:"grid",className:g.cn(d.className,i),md:v,lg:x,xl:y,style:$,children:t})}function f({children:t,className:i,...n}){return u.jsx("div",{className:i,...n,children:t})}const S=Object.assign(N,{Item:f});function r(t){if(t)return{aspectRatio:t.aspectRatio,background:t.background,backgroundColor:t.backgroundColor,boxShadow:t.boxShadow,color:t.color,height:t.height,maxHeight:t.maxHeight,maxWidth:t.maxWidth,minHeight:t.minHeight,minWidth:t.minWidth,m:t.m,p:t.p,opacity:t.opacity,overflow:t.overflow,overflowX:t.overflowX,overflowY:t.overflowY,pointerEvents:t.pointerEvents,transform:t.transform,transformOrigin:t.transformOrigin,width:t.width}}exports.Grid=S;exports.GridItem=f;

package/dist/grid.js

@@ -2,15 +2,15 @@ import { jsx as f } from "react/jsx-runtime";
 import { Box as $ } from "./box.js";
 import { a as w, c as y } from "./responsive-style.config-DFuATrIM.js";
 function N(t) {
-  const i = [], n = {}, c = {
+  const i = [], n = {}, l = {
     md: t.md,
     lg: t.lg,
     xl: t.xl
   };
-  m(t, i, n);
+  r(t, i, n);
   for (const o of w) {
-    const e = c[o];
-    e && m(
+    const e = l[o];
+    e && r(
       e,
       i,
       n,
@@ -23,16 +23,16 @@ function N(t) {
     style: Object.keys(n).length > 0 ? n : void 0
   };
 }
-function m({ cols: t, gap: i }, n, c, o = "", e = "") {
+function r({ cols: t, gap: i }, n, l, o = "", e = "") {
   if (t !== void 0) {
-    const a = `${e}grid-template-columns`;
-    c[`--${a}`] = `repeat(${t}, minmax(0, 1fr))`, n.push(
-      `${o}${s("grid-cols", `var(--${a})`)}`
+    const c = `${e}grid-template-columns`;
+    l[`--${c}`] = `repeat(${t}, minmax(0, 1fr))`, n.push(
+      `${o}${s("grid-cols", `var(--${c})`)}`
     );
   }
   if (i !== void 0) {
-    const a = `${e}grid-gap`;
-    c[`--${a}`] = j(i), n.push(`${o}${s("gap", `var(--${a})`)}`);
+    const c = `${e}grid-gap`;
+    l[`--${c}`] = j(i), n.push(`${o}${s("gap", `var(--${c})`)}`);
   }
 }
 function s(t, i) {
@@ -45,23 +45,23 @@ function B({
   children: t,
   className: i,
   cols: n = 1,
-  gap: c = 0,
+  gap: l = 0,
   md: o,
   lg: e,
-  xl: a,
-  style: r,
+  xl: c,
+  style: d,
   ...g
 }) {
-  const l = N({ cols: n, gap: c, md: o, lg: e, xl: a }), u = d(o), h = d(e), v = d(a), x = l.style || r ? {
-    ...l.style,
-    ...r
+  const a = N({ cols: n, gap: l, md: o, lg: e, xl: c }), u = m(o), h = m(e), v = m(c), x = a.style || d ? {
+    ...a.style,
+    ...d
   } : void 0;
   return /* @__PURE__ */ f(
     $,
     {
       ...g,
       display: "grid",
-      className: y(l.className, i),
+      className: y(a.className, i),
       md: u,
       lg: h,
       xl: v,
@@ -76,7 +76,7 @@ function C({ children: t, className: i, ...n }) {
 const W = Object.assign(B, {
   Item: C
 });
-function d(t) {
+function m(t) {
   if (t)
     return {
       aspectRatio: t.aspectRatio,
@@ -89,6 +89,8 @@ function d(t) {
       maxWidth: t.maxWidth,
       minHeight: t.minHeight,
       minWidth: t.minWidth,
+      m: t.m,
+      p: t.p,
       opacity: t.opacity,
       overflow: t.overflow,
       overflowX: t.overflowX,

package/dist/types/spacing.types.d.ts

@@ -3,9 +3,11 @@ import { AtLeastOne } from './shared.types';
  * Значение внутреннего/внешнего отступа из рекомендованной шкалы.
  *
  * Пример: `16` сериализуется в `16px`. Тип также допускает любое число,
- * поэтому шкала является рекомендованной, а не строгой.
+ * поэтому шкала является рекомендованной, а не строгой. CSS-строки передаются
+ * без преобразования: `10px`, `1rem`, `14cqw`, `5%`, `calc(...)`, `var(...)`.
+ * Передавайте одну CSS-величину; для разных сторон используйте массив или объект.
  */
-export type UiKitIndentations = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 80 | 96 | number;
+export type UiKitIndentations = 0 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 56 | 64 | 80 | 96 | number | (string & {});
 /**
  * Значение внешнего отступа. `auto` полезен для центрирования через `mx`.
  */
@@ -118,6 +120,8 @@ export type UiKitAnyIndentationMargin = AtLeastOne<{
  * Пример: `<Box p={{ px: 24, py: 16 }} m={{ mx: 'auto' }} />`.
  */
 export type UiKitIndentationsProps = {
+    /** Число (px), CSS-величина, четыре стороны или объект осей/сторон. Доступен в md/lg/xl. */
     p?: UiKitIndentations | UiKitArrayIndentation | UiKitAxisIndentationPadding | UiKitAnyIndentationPadding | UiKitMixedXAxisIndentationPadding | UiKitMixedYAxisIndentationPadding;
+    /** Как padding, дополнительно поддерживает auto и отрицательные величины. */
     m?: UiKitMarginIndentation | UiKitMarginArrayIndentation | UiKitAxisIndentationMargin | UiKitAnyIndentationMargin | UiKitMixedXAxisIndentationMargin | UiKitMixedYAxisIndentationMargin;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shmidko61/lc-ui-kit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "files": [
     "dist"