@kolking/react-ui 1.8.20 → 1.9.0

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
+};