@shmidko61/lc-ui-kit 0.0.5 → 0.1.0

package/dist/picture/picture.d.ts

@@ -8,5 +8,5 @@ import { PictureProps } from './picture.types';
  * внутреннего `img`, а остальные значения преобразуются в `source` с
  * min-width из общего responsive-конфига ui-kit.
  */
-export declare function Picture({ display, image, sources, ...props }: PictureProps): ReactNode;
-export type { PictureBreakpoint, PictureBreakpointSource, PictureBreakpointSources, PictureProps, } from './picture.types';
+export declare function Picture({ display, fill, image, objectFit, objectPosition, sources, md, lg, xl, ...props }: PictureProps): ReactNode;
+export type { PictureBreakpoint, PictureBreakpointProps, PictureBreakpointSource, PictureBreakpointSources, PictureImageLayoutProps, PictureObjectFit, PictureObjectPosition, PictureProps, } from './picture.types';

package/dist/picture/picture.helpers.d.ts

@@ -1,9 +1,27 @@
-import { SourceHTMLAttributes } from 'react';
-import { PictureBreakpoint, PictureBreakpointSource, PictureBreakpointSources } from './picture.types';
+import { CSSProperties, SourceHTMLAttributes } from 'react';
+import { BoxBreakpointProps } from '../box/box.types';
+import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
+import { PictureBreakpoint, PictureBreakpointProps, PictureBreakpointSource, PictureBreakpointSources, PictureImageLayoutProps } from './picture.types';
+/** Результат преобразования image-layout props в responsive Tailwind-классы. */
+export type PictureImageTailwindClassNamePlan = {
+    /** Классы, применяемые к внутреннему `img`. */
+    className: string;
+    /** CSS-переменные со значениями для base/md/lg/xl. */
+    style: CSSProperties;
+};
+type PictureImageStyleBuildProps = PictureImageLayoutProps & Partial<Record<ResponsiveStyleBreakpoint, PictureImageLayoutProps>>;
+/**
+ * Преобразует публичные responsive props изображения в классы и CSS-переменные.
+ * Базовая высота `auto` сохраняет прежнее поведение `Picture`.
+ */
+export declare function buildPictureImageTailwindClassNamePlan(props: PictureImageStyleBuildProps): PictureImageTailwindClassNamePlan;
+/** Удаляет image-layout props перед передачей breakpoint-настроек в `Box`. */
+export declare function getPictureBoxBreakpointProps({ fill: _fill, objectFit: _objectFit, objectPosition: _objectPosition, ...boxProps }: PictureBreakpointProps): BoxBreakpointProps;
 export type PictureResolvedBreakpointSource = {
     breakpoint: Exclude<PictureBreakpoint, 'sm'>;
     source: PictureBreakpointSource;
 };
-export declare function buildBreakpointSources(sources: PictureBreakpointSources): PictureResolvedBreakpointSource[];
+export declare function buildBreakpointSources(sources: PictureBreakpointSources): Array<PictureResolvedBreakpointSource>;
 export declare function getSourceSrcSet(source: PictureBreakpointSource): string;
 export declare function getSourceProps(source: PictureBreakpointSource): SourceHTMLAttributes<HTMLSourceElement>;
+export {};

package/dist/picture/picture.types.d.ts

@@ -1,5 +1,6 @@
-import { ImgHTMLAttributes, SourceHTMLAttributes } from 'react';
-import { BoxProps } from '../box/box.types';
+import { CSSProperties, ImgHTMLAttributes, SourceHTMLAttributes } from 'react';
+import { BoxBreakpointProps, BoxProps } from '../box/box.types';
+import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
 /**
  * Поддерживаемые проектные брейкпоинты для компонента `Picture`.
  *
@@ -31,13 +32,34 @@ export type PictureBreakpointSource = string | (Omit<SourceHTMLAttributes<HTMLSo
 export type PictureBreakpointSources = {
     sm: PictureBreakpointSource;
 } & Partial<Record<Exclude<PictureBreakpoint, 'sm'>, PictureBreakpointSource>>;
+/** Допустимое CSS-значение способа масштабирования внутреннего `img`. */
+export type PictureObjectFit = NonNullable<CSSProperties['objectFit']>;
+/** Допустимое CSS-положение внутреннего изображения относительно его области. */
+export type PictureObjectPosition = NonNullable<CSSProperties['objectPosition']>;
+/**
+ * Настройки отображения внутреннего `img`.
+ *
+ * `fill` растягивает изображение по высоте и ширине `picture`. Для заметного
+ * результата у внешнего `Picture` должна быть задана высота.
+ */
+export type PictureImageLayoutProps = {
+    /** Растянуть внутренний `img` на всю ширину и высоту `picture`. */
+    fill?: boolean;
+    /** Способ масштабирования изображения внутри доступной области. */
+    objectFit?: PictureObjectFit;
+    /** Положение изображения внутри доступной области. */
+    objectPosition?: PictureObjectPosition;
+};
+/** Свойства `Picture`, которые можно переопределить на одном breakpoint. */
+export type PictureBreakpointProps = BoxBreakpointProps & PictureImageLayoutProps;
+type PictureResponsiveProps = Partial<Record<ResponsiveStyleBreakpoint, PictureBreakpointProps>>;
 /**
  * Свойства компонента `Picture`.
  *
  * Компонент наследует свойства `Box`, кроме `as` и `children`: тег всегда
  * фиксирован как `picture`, а содержимое формируется из `sources` и `image`.
  */
-export type PictureProps = Omit<BoxProps<'picture'>, 'as' | 'children'> & {
+export type PictureProps = Omit<BoxProps<'picture'>, 'as' | 'children' | 'md' | 'lg' | 'xl' | keyof PictureImageLayoutProps> & PictureImageLayoutProps & PictureResponsiveProps & {
     /**
      * Атрибуты для внутреннего элемента `img`.
      *
@@ -54,3 +76,4 @@ export type PictureProps = Omit<BoxProps<'picture'>, 'as' | 'children'> & {
      */
     sources: PictureBreakpointSources;
 };
+export {};

package/dist/picture.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),f=require("./box.cjs"),p=require("./responsive-style.config-B2m9jVlX.cjs");function S(e){return[...p.responsiveBreakpoints].reverse().flatMap(t=>{const i=e[t];return i?[{breakpoint:t,source:i}]:[]})}function o(e){return typeof e=="string"?e:e.srcSet}function y(e){if(typeof e!="string")return e;const t=e.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase(),i={avif:"image/avif",jpeg:"image/jpeg",jpg:"image/jpeg",png:"image/png",webp:"image/webp"};return t&&i[t]?{type:i[t]}:{}}function d({display:e="block",image:t,sources:i,...c}){const{alt:a="",style:g,...u}=t??{},l=o(i.sm),m=S(i);return n.jsxs(f.Box,{...c,as:"picture",display:e,children:[m.map(({breakpoint:r,source:s})=>n.jsx("source",{...y(s),media:`(min-width: ${p.responsiveBreakpointMinWidth[r]})`,srcSet:o(s)},r)),n.jsx("img",{alt:a,src:l,style:{display:"block",height:"auto",width:"100%",...g},...u})]})}exports.Picture=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),B=require("./box.cjs"),g=require("./responsive-style.config-B2m9jVlX.cjs");function d({fill:e,objectFit:t,objectPosition:i},o,s,{classPrefix:c,isBase:n=!1,variablePrefix:r}){const a={height:e===void 0?n?"auto":void 0:e?"100%":"auto",objectFit:t,objectPosition:i},m={height:"height",objectFit:"object-fit",objectPosition:"object-position"};for(const[f,p]of Object.entries(a)){if(p===void 0)continue;const l=m[f],u=`${r}picture-image-${l}`;s[`--${u}`]=String(p),o.push(`${c}[${l}:var(--${u})]`)}}function k(e){const t=[],i={};d(e,t,i,{classPrefix:"",isBase:!0,variablePrefix:""});for(const o of g.responsiveBreakpoints){const s=e[o];s&&d(s,t,i,{classPrefix:`${o}:`,variablePrefix:`${o}-`})}return{className:t.join(" "),style:i}}function P({fill:e,objectFit:t,objectPosition:i,...o}){return o}function N(e){return[...g.responsiveBreakpoints].reverse().flatMap(t=>{const i=e[t];return i?[{breakpoint:t,source:i}]:[]})}function S(e){return typeof e=="string"?e:e.srcSet}function $(e){if(typeof e!="string")return e;const t=e.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase(),i={avif:"image/avif",jpeg:"image/jpeg",jpg:"image/jpeg",png:"image/png",webp:"image/webp"};return t&&i[t]?{type:i[t]}:{}}function w({display:e="block",fill:t,image:i,objectFit:o,objectPosition:s,sources:c,md:n,lg:r,xl:a,...m}){const{alt:f="",className:p,style:l,...u}=i??{},x=S(c.sm),h=N(c),j=k({fill:t,objectFit:o,objectPosition:s,md:n,lg:r,xl:a});return b.jsxs(B.Box,{...m,as:"picture",display:e,md:n?P(n):void 0,lg:r?P(r):void 0,xl:a?P(a):void 0,children:[h.map(({breakpoint:v,source:y})=>b.jsx("source",{...$(y),media:`(min-width: ${g.responsiveBreakpointMinWidth[v]})`,srcSet:S(y)},v)),b.jsx("img",{alt:f,className:g.cn(j.className,p),src:x,style:{display:"block",width:"100%",...j.style,...l},...u})]})}exports.Picture=w;

package/dist/picture.js

@@ -1,16 +1,60 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { Box as u } from "./box.js";
-import { a as S, r as y } from "./responsive-style.config-DFuATrIM.js";
-function d(e) {
-  return [...S].reverse().flatMap((t) => {
+import { jsxs as B, jsx as v } from "react/jsx-runtime";
+import { Box as N } from "./box.js";
+import { a as h, r as k, c as $ } from "./responsive-style.config-DFuATrIM.js";
+function y({ fill: e, objectFit: t, objectPosition: i }, o, s, { classPrefix: c, isBase: n = !1, variablePrefix: a }) {
+  const r = {
+    height: e === void 0 ? n ? "auto" : void 0 : e ? "100%" : "auto",
+    objectFit: t,
+    objectPosition: i
+  }, f = {
+    height: "height",
+    objectFit: "object-fit",
+    objectPosition: "object-position"
+  };
+  for (const [u, p] of Object.entries(r)) {
+    if (p === void 0)
+      continue;
+    const l = f[u], m = `${a}picture-image-${l}`;
+    s[`--${m}`] = String(p), o.push(`${c}[${l}:var(--${m})]`);
+  }
+}
+function w(e) {
+  const t = [], i = {};
+  y(e, t, i, {
+    classPrefix: "",
+    isBase: !0,
+    variablePrefix: ""
+  });
+  for (const o of h) {
+    const s = e[o];
+    s && y(s, t, i, {
+      classPrefix: `${o}:`,
+      variablePrefix: `${o}-`
+    });
+  }
+  return {
+    className: t.join(" "),
+    style: i
+  };
+}
+function g({
+  fill: e,
+  objectFit: t,
+  objectPosition: i,
+  ...o
+}) {
+  return o;
+}
+function C(e) {
+  return [...h].reverse().flatMap((t) => {
     const i = e[t];
     return i ? [{ breakpoint: t, source: i }] : [];
   });
 }
-function s(e) {
+function d(e) {
   return typeof e == "string" ? e : e.srcSet;
 }
-function h(e) {
+function F(e) {
   if (typeof e != "string")
     return e;
   const t = e.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase(), i = {
@@ -22,34 +66,64 @@ function h(e) {
   };
   return t && i[t] ? { type: i[t] } : {};
 }
-function k({ display: e = "block", image: t, sources: i, ...p }) {
-  const { alt: a = "", style: c, ...m } = t ?? {}, g = s(i.sm), l = d(i);
-  return /* @__PURE__ */ f(u, { ...p, as: "picture", display: e, children: [
-    l.map(({ breakpoint: r, source: n }) => /* @__PURE__ */ o(
-      "source",
-      {
-        ...h(n),
-        media: `(min-width: ${y[r]})`,
-        srcSet: s(n)
-      },
-      r
-    )),
-    /* @__PURE__ */ o(
-      "img",
-      {
-        alt: a,
-        src: g,
-        style: {
-          display: "block",
-          height: "auto",
-          width: "100%",
-          ...c
-        },
-        ...m
-      }
-    )
-  ] });
+function T({
+  display: e = "block",
+  fill: t,
+  image: i,
+  objectFit: o,
+  objectPosition: s,
+  sources: c,
+  md: n,
+  lg: a,
+  xl: r,
+  ...f
+}) {
+  const { alt: u = "", className: p, style: l, ...m } = i ?? {}, S = d(c.sm), x = C(c), b = w({
+    fill: t,
+    objectFit: o,
+    objectPosition: s,
+    md: n,
+    lg: a,
+    xl: r
+  });
+  return /* @__PURE__ */ B(
+    N,
+    {
+      ...f,
+      as: "picture",
+      display: e,
+      md: n ? g(n) : void 0,
+      lg: a ? g(a) : void 0,
+      xl: r ? g(r) : void 0,
+      children: [
+        x.map(({ breakpoint: P, source: j }) => /* @__PURE__ */ v(
+          "source",
+          {
+            ...F(j),
+            media: `(min-width: ${k[P]})`,
+            srcSet: d(j)
+          },
+          P
+        )),
+        /* @__PURE__ */ v(
+          "img",
+          {
+            alt: u,
+            className: $(b.className, p),
+            src: S,
+            style: {
+              display: "block",
+              width: "100%",
+              ...b.style,
+              ...l
+            },
+            ...m
+          }
+        )
+      ]
+    }
+  );
 }
 export {
-  k as Picture
+  T as Picture
 };