@kolking/react-ui 1.8.20 → 1.9.1

package/dist/components/Fields/Range.js

@@ -1,54 +1,54 @@
-import { jsxs as _, jsx as a } from "react/jsx-runtime";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
 import N from "classnames";
 import R, { useRef as x, useState as T, useEffect as j, useCallback as P } from "react";
 import { cssProps as V, wrapNode as A } from "../../utils/helpers.js";
-import { V as E } from "../../ValidationTooltip-N4SQpl9r.js";
-const J = "styles_range_j9iED", D = "styles_range_thumb_6aftN", F = "styles_range_wrapper_LTcAf", H = "styles_range_track_HdlJx", L = "styles_ticks_YaeJb", n = {
-  range: J,
-  range_thumb: D,
-  range_wrapper: F,
-  range_track: H,
-  ticks: L
+import { V as C } from "../../ValidationTooltip-N4SQpl9r.js";
+const E = "styles_range_j9iED", J = "styles_range_thumb_6aftN", D = "styles_range_wrapper_LTcAf", F = "styles_range_track_HdlJx", H = "styles_ticks_YaeJb", s = {
+  range: E,
+  range_thumb: J,
+  range_wrapper: D,
+  range_track: F,
+  ticks: H
 };
-function f(r, t, e, s) {
-  r == null || r.style.setProperty("--progress", `${(s - t) / (e - t)}`);
+function _(a, r, t, n) {
+  a?.style.setProperty("--progress", `${(n - r) / (t - r)}`);
 }
-const M = ({ ticks: r }) => {
-  const t = typeof r == "number" ? [...Array(r)] : r;
-  return t.length < 2 ? null : /* @__PURE__ */ a("ul", { "data-range-ticks": !0, className: n.ticks, children: t.map((e, s) => /* @__PURE__ */ a("li", { children: e !== void 0 && /* @__PURE__ */ a("small", { children: e }) }, s)) });
-}, B = R.forwardRef(
-  ({ size: r, height: t, error: e, ticks: s, className: m, style: y, children: u, onChange: c, ...i }, h) => {
-    const { min: l = 0, max: o = 100, defaultValue: v = 50, value: p = v } = i, d = x(null), [k, b] = T(null);
+const L = ({ ticks: a }) => {
+  const r = typeof a == "number" ? [...Array(a)] : a;
+  return r.length < 2 ? null : /* @__PURE__ */ e("ul", { "data-range-ticks": !0, className: s.ticks, children: r.map((t, n) => /* @__PURE__ */ e("li", { children: t !== void 0 && /* @__PURE__ */ e("small", { children: t }) }, n)) });
+}, z = R.forwardRef(
+  ({ size: a, height: r, error: t, ticks: n, className: f, style: h, children: d, onChange: u, ...c }, y) => {
+    const { min: l = 0, max: o = 100, defaultValue: v = 50, value: g = v } = c, i = x(null), [k, b] = T(null);
     j(() => {
-      f(d.current, l, o, p);
-    }, [l, o, p]);
+      _(i.current, l, o, g);
+    }, [l, o, g]);
     const w = P(
-      (g) => {
-        f(d.current, l, o, parseFloat(g.currentTarget.value)), c == null || c(g);
+      (m) => {
+        _(i.current, l, o, parseFloat(m.currentTarget.value)), u?.(m);
       },
-      [l, o, c]
+      [l, o, u]
     );
-    return /* @__PURE__ */ _(
+    return /* @__PURE__ */ p(
       "div",
       {
-        ref: d,
+        ref: i,
         "data-range": !0,
-        "data-disabled": i.disabled,
-        "data-invalid": e ? !0 : void 0,
-        className: N(n.range, m),
-        style: { ...y, ...V({ size: r, height: t }) },
+        "data-disabled": c.disabled,
+        "data-invalid": t ? !0 : void 0,
+        className: N(s.range, f),
+        style: { ...h, ...V({ size: a, height: r }) },
         children: [
-          /* @__PURE__ */ _("div", { "data-range-wrapper": !0, className: n.range_wrapper, children: [
-            /* @__PURE__ */ a("div", { "data-range-track": !0, className: n.range_track }),
-            /* @__PURE__ */ a("div", { ref: b, "data-range-thumb": !0, className: n.range_thumb, children: u !== void 0 && A(u, "small") }),
-            /* @__PURE__ */ a(E, { content: e, placement: "top", anchor: k, children: /* @__PURE__ */ a("input", { ...i, ref: h, type: "range", onChange: w }) })
+          /* @__PURE__ */ p("div", { "data-range-wrapper": !0, className: s.range_wrapper, children: [
+            /* @__PURE__ */ e("div", { "data-range-track": !0, className: s.range_track }),
+            /* @__PURE__ */ e("div", { ref: b, "data-range-thumb": !0, className: s.range_thumb, children: d !== void 0 && A(d, "small") }),
+            /* @__PURE__ */ e(C, { content: t, placement: "top", anchor: k, children: /* @__PURE__ */ e("input", { ...c, ref: y, type: "range", onChange: w }) })
           ] }),
-          s !== void 0 && /* @__PURE__ */ a(M, { ticks: s })
+          n !== void 0 && /* @__PURE__ */ e(L, { ticks: n })
         ]
       }
     );
   }
 );
 export {
-  B as Range
+  z as Range
 };

package/dist/components/Flex/Flex.d.ts

@@ -19,4 +19,4 @@ export declare const Flex: <T extends React.ElementType = "div">(props: {
     wrap?: React.CSSProperties["flexWrap"];
     marginStart?: React.CSSProperties["marginBlockStart"];
     marginEnd?: React.CSSProperties["marginBlockEnd"];
-} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "direction" | "as" | "align" | "wrap" | "justify" | "marginStart" | "marginEnd" | "gap"> & React.RefAttributes<unknown>) => React.ReactElement | null;
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "as" | "align" | "wrap" | "justify" | "marginStart" | "marginEnd" | "direction" | "gap"> & React.RefAttributes<unknown>) => React.ReactElement | null;

package/dist/components/Gallery/Gallery.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { CompositeProps } from '@floating-ui/react';
+export type GalleryProps = React.HTMLAttributes<HTMLDivElement> & Omit<CompositeProps, 'cols'> & {
+    cols?: number | 'auto';
+    gap?: React.CSSProperties['gap'];
+    itemSize?: React.CSSProperties['width'];
+    objectFit?: React.CSSProperties['objectFit'];
+    marginStart?: React.CSSProperties['marginBlockStart'];
+    marginEnd?: React.CSSProperties['marginBlockEnd'];
+};
+export declare const Gallery: ({ gap, loop, cols, itemSize, objectFit: imageObjectFit, marginStart, marginEnd, className, style, children, ...props }: GalleryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Gallery/Gallery.js

@@ -0,0 +1,49 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useRef as C, useState as v, useEffect as w } from "react";
+import j from "classnames";
+import { Composite as x } from "@floating-ui/react";
+import { cssProps as R } from "../../utils/helpers.js";
+import { s as S } from "../../styles.module-D0C-vMZX.js";
+const O = ({
+  gap: o,
+  loop: l = !1,
+  cols: e = "auto",
+  itemSize: n,
+  objectFit: m,
+  marginStart: u,
+  marginEnd: a,
+  className: c,
+  style: i,
+  children: f,
+  ...p
+}) => {
+  const t = C(null), [s, g] = v(e === "auto" ? 1 : e);
+  return w(() => {
+    const r = new ResizeObserver((y) => {
+      const d = window.getComputedStyle(y[0].target).gridTemplateColumns;
+      g(d.split(" ").length);
+    });
+    return t.current && (e === "auto" ? r.observe(t.current) : r.unobserve(t.current)), () => {
+      r.disconnect();
+    };
+  }, [e]), /* @__PURE__ */ b(
+    x,
+    {
+      ...p,
+      ref: t,
+      loop: l,
+      cols: s,
+      "data-gallery": !0,
+      "data-gallery-cols": s,
+      className: j(S.gallery, c),
+      style: {
+        ...i,
+        ...R({ gap: o, marginStart: u, marginEnd: a, itemSize: n, imageObjectFit: m })
+      },
+      children: f
+    }
+  );
+};
+export {
+  O as Gallery
+};

package/dist/components/Gallery/GalleryItem.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { CompositeItemProps } from '@floating-ui/react';
+type BaseProps = React.HTMLAttributes<HTMLDivElement> & CompositeItemProps;
+export type GalleryItemProps = (BaseProps & {
+    index?: undefined;
+    onSelect?: undefined;
+}) | (Omit<BaseProps, 'onSelect'> & {
+    index: number;
+    onSelect?: (index: number) => void;
+});
+export declare const GalleryItem: ({ index, children, className, onClick, onSelect, onKeyDown, ...props }: GalleryItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Gallery/GalleryItem.js

@@ -0,0 +1,41 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useCallback as s } from "react";
+import { CompositeItem as y } from "@floating-ui/react";
+import n from "classnames";
+import { s as u } from "../../styles.module-D0C-vMZX.js";
+const I = ({
+  index: o,
+  children: l,
+  className: e,
+  onClick: t,
+  onSelect: m,
+  onKeyDown: a,
+  ...p
+}) => {
+  const c = s(
+    (r) => {
+      m?.(o), t?.(r);
+    },
+    [o, t, m]
+  ), f = s(
+    (r) => {
+      (r.code === "Enter" || r.code === "Space") && m?.(o), a?.(r);
+    },
+    [o, a, m]
+  );
+  return /* @__PURE__ */ i(
+    y,
+    {
+      ...p,
+      role: "button",
+      "data-gallery-image": o,
+      className: n(u.item, e),
+      onClick: c,
+      onKeyDown: f,
+      children: l
+    }
+  );
+};
+export {
+  I as GalleryItem
+};

package/dist/components/Gallery/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Gallery';
+export * from './GalleryItem';

package/dist/components/Gallery/index.js

@@ -0,0 +1,6 @@
+import { Gallery as l } from "./Gallery.js";
+import { GalleryItem as m } from "./GalleryItem.js";
+export {
+  l as Gallery,
+  m as GalleryItem
+};