@kolking/react-ui 1.8.19 → 1.9.0

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-D8d9O6Re.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/Fields/Select.d.ts

@@ -3,5 +3,5 @@ import { BaseInputProps } from './Input';
 export type SelectProps = BaseInputProps<React.SelectHTMLAttributes<HTMLSelectElement>>;
 export declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & {
     size?: "xs" | "sm" | "md" | "lg" | "xl";
-    error?: string;
+    error?: string | boolean;
 } & React.RefAttributes<HTMLSelectElement>>;

package/dist/components/Fields/Select.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 import l from "classnames";
 import c from "react";
 import { cssProps as m } from "../../utils/helpers.js";
-import { V as d, s as f } from "../../ValidationTooltip-D8d9O6Re.js";
+import { V as d, s as f } from "../../ValidationTooltip-N4SQpl9r.js";
 const y = c.forwardRef(
   ({ size: o, error: t, className: s, style: a, ...r }, i) => /* @__PURE__ */ e(d, { content: t, children: /* @__PURE__ */ e(
     "select",

package/dist/components/Fields/Switch.d.ts

@@ -6,7 +6,7 @@ export type SwitchProps = BaseInputProps & {
 };
 export declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     size?: "xs" | "sm" | "md" | "lg" | "xl";
-    error?: string;
+    error?: string | boolean;
 } & {
     label?: React.ReactNode;
     checkedColor?: string;

package/dist/components/Fields/Switch.js

@@ -2,7 +2,7 @@ import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import m from "react";
 import h from "classnames";
 import { cssProps as u } from "../../utils/helpers.js";
-import { V as f } from "../../ValidationTooltip-D8d9O6Re.js";
+import { V as f } from "../../ValidationTooltip-N4SQpl9r.js";
 const _ = "styles_label_p-D4Y", w = "styles_input_VteBP", s = {
   switch: "styles_switch_UNvH8",
   label: _,

package/dist/components/Fields/Textarea.d.ts

@@ -6,7 +6,7 @@ export type TextareaProps = BaseInputProps<TextareaAutosizeProps> & {
 };
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaAutosizeProps, "size"> & {
     size?: "xs" | "sm" | "md" | "lg" | "xl";
-    error?: string;
+    error?: string | boolean;
 } & {
     autosize?: boolean;
 } & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Fields/Textarea.js

@@ -3,7 +3,7 @@ import c from "classnames";
 import d from "react";
 import f from "react-textarea-autosize";
 import { cssProps as l } from "../../utils/helpers.js";
-import { V as x, s as u } from "../../ValidationTooltip-D8d9O6Re.js";
+import { V as x, s as u } from "../../ValidationTooltip-N4SQpl9r.js";
 const _ = d.forwardRef(
   ({ autosize: t = !0, size: e, error: o, className: s, style: m, ...a }, i) => {
     const n = t ? f : "textarea", p = t ? { minRows: 2, ...a } : a;

package/dist/components/Fields/ValidationTooltip.d.ts

@@ -1,2 +1,2 @@
 import { TooltipProps } from '../Tooltip';
-export declare const ValidationTooltip: ({ className, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ValidationTooltip: ({ content, className, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fields/ValidationTooltip.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "classnames";
 import "../Tooltip/Tooltip.js";
-import { V as m } from "../../ValidationTooltip-D8d9O6Re.js";
+import { V as m } from "../../ValidationTooltip-N4SQpl9r.js";
 export {
   m as ValidationTooltip
 };

package/dist/components/Fields/index.js

@@ -1,13 +1,13 @@
 import { Checkbox as e } from "./Checkbox.js";
 import { Field as p, FieldDescription as x, FieldLabel as i } from "./Field.js";
-import { I as f } from "../../Input-D46mAsdt.js";
+import { I as f } from "../../Input-BG84zXZH.js";
 import { Numeric as l } from "./Numeric.js";
 import { Radio as d } from "./Radio.js";
 import { Range as s } from "./Range.js";
 import { Select as b } from "./Select.js";
 import { Switch as u } from "./Switch.js";
 import { Textarea as R } from "./Textarea.js";
-import { V as T } from "../../ValidationTooltip-D8d9O6Re.js";
+import { V as T } from "../../ValidationTooltip-N4SQpl9r.js";
 export {
   e as Checkbox,
   p as Field,

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,48 @@
+import { jsx as d } 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: s,
+  loop: o = !1,
+  cols: e = "auto",
+  itemSize: n,
+  objectFit: m,
+  marginStart: l,
+  marginEnd: u,
+  className: a,
+  style: c,
+  children: i,
+  ...f
+}) => {
+  const t = C(null), [p, g] = v(e === "auto" ? 1 : e);
+  return w(() => {
+    const r = new ResizeObserver((y) => {
+      const b = window.getComputedStyle(y[0].target).gridTemplateColumns;
+      g(b.split(" ").length);
+    });
+    return t.current && (e === "auto" ? r.observe(t.current) : r.unobserve(t.current)), () => {
+      r.disconnect();
+    };
+  }, [e]), /* @__PURE__ */ d(
+    x,
+    {
+      ...f,
+      ref: t,
+      loop: o,
+      cols: p,
+      "data-gallery": !0,
+      className: j(S.gallery, a),
+      style: {
+        ...c,
+        ...R({ gap: s, marginStart: l, marginEnd: u, itemSize: n, imageObjectFit: m })
+      },
+      children: i
+    }
+  );
+};
+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
+};