@akanjs/ui 0.0.149 → 0.0.151

package/cjs/DragAction.js

@@ -0,0 +1,111 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DragAction_exports = {};
+__export(DragAction_exports, {
+  DragAction: () => DragAction
+});
+module.exports = __toCommonJS(DragAction_exports);
+var import_client = require("@akanjs/client");
+var import_react = require("@use-gesture/react");
+var import_react2 = require("react");
+var import_react_spring = require("react-spring");
+const DragActionContext = (0, import_react2.createContext)({
+  bind: () => ({}),
+  x: new import_react_spring.SpringValue(0),
+  y: new import_react_spring.SpringValue(0),
+  leftOpacity: new import_react_spring.SpringValue(0),
+  leftWidth: new import_react_spring.SpringValue(0),
+  rightOpacity: new import_react_spring.SpringValue(0),
+  rightWidth: new import_react_spring.SpringValue(0)
+});
+const DragAction = ({ className, children, onClick, onLeft, onRight }) => {
+  const action = (0, import_react2.useRef)(null);
+  const [{ x, y, leftOpacity, leftWidth, rightOpacity, rightWidth }, api] = (0, import_react_spring.useSpring)(() => ({
+    x: 0,
+    y: 0,
+    leftOpacity: 0,
+    leftWidth: 0,
+    rightOpacity: 0,
+    rightWidth: 0
+  }));
+  const ref = (0, import_react2.useRef)(null);
+  const bind = (0, import_react.useGesture)(
+    {
+      onClick: () => {
+        if (!action.current)
+          onClick?.();
+        action.current = null;
+      },
+      onDrag: ({ down, movement: [mx], event }) => {
+        if (!ref.current)
+          return;
+        void api.start({
+          x: down ? mx : 0,
+          leftOpacity: mx > 0 && down ? mx / ref.current.clientWidth : 0,
+          leftWidth: mx > 0 && down ? Math.min(mx, ref.current.clientWidth) : 0,
+          rightOpacity: mx < 0 && down ? -mx / ref.current.clientWidth : 0,
+          rightWidth: mx < 0 && down ? Math.min(-mx, ref.current.clientWidth) : 0
+        });
+        action.current = mx > 0 ? "left" : mx < 0 ? "right" : null;
+      },
+      onDragEnd: ({ movement: [mx] }) => {
+        if (!ref.current)
+          return;
+        void api.start({ x: 0, leftOpacity: 0, leftWidth: 0, rightOpacity: 0, rightWidth: 0 });
+        if (mx > ref.current.clientWidth / 2 && onLeft)
+          onLeft();
+        if (mx < -ref.current.clientWidth / 2 && onRight)
+          onRight();
+      }
+    },
+    { drag: { axis: "x" } }
+  );
+  return /* @__PURE__ */ React.createElement(DragActionContext.Provider, { value: { bind, x, y, leftOpacity, leftWidth, rightOpacity, rightWidth, onClick } }, /* @__PURE__ */ React.createElement("div", { ref, className: (0, import_client.clsx)("relative overflow-x-hidden", className) }, children));
+};
+const Body = ({ children }) => {
+  const { bind, x, onClick } = (0, import_react2.useContext)(DragActionContext);
+  return /* @__PURE__ */ React.createElement(import_react_spring.animated.div, { className: "cursor-pointer", ...bind(), style: { x, touchAction: "pan-y" } }, children);
+};
+DragAction.Body = Body;
+const Left = ({ children }) => {
+  const { bind, leftOpacity, leftWidth } = (0, import_react2.useContext)(DragActionContext);
+  return /* @__PURE__ */ React.createElement(
+    import_react_spring.animated.div,
+    {
+      ...bind(),
+      style: { touchAction: "pan-y", opacity: leftOpacity, width: leftWidth },
+      className: "absolute inset-y-0 left-0 flex items-center justify-center"
+    },
+    children
+  );
+};
+DragAction.Left = Left;
+const Right = ({ children }) => {
+  const { bind, rightOpacity, rightWidth } = (0, import_react2.useContext)(DragActionContext);
+  return /* @__PURE__ */ React.createElement(
+    import_react_spring.animated.div,
+    {
+      ...bind(),
+      style: { opacity: rightOpacity, width: rightWidth },
+      className: "absolute inset-y-0 right-0 flex items-center justify-center"
+    },
+    children
+  );
+};
+DragAction.Right = Right;

package/cjs/DraggableList.js

@@ -0,0 +1,141 @@
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DraggableList_exports = {};
+__export(DraggableList_exports, {
+  DraggableList: () => DraggableList
+});
+module.exports = __toCommonJS(DraggableList_exports);
+var import_client = require("@akanjs/client");
+var import_web = require("@react-spring/web");
+var import_react = require("@use-gesture/react");
+var import_lodash = __toESM(require("lodash.clamp"));
+var import_lodash_move = __toESM(require("lodash-move"));
+var import_react2 = require("react");
+const dragListContext = (0, import_react2.createContext)({});
+const useDragList = () => (0, import_react2.useContext)(dragListContext);
+const DragList = ({ className, mode = "vertical", children, onChange }) => {
+  const refs = (0, import_react2.useRef)([]);
+  const order = (0, import_react2.useRef)(children.map((_, index) => index));
+  const clientLengths = (0, import_react2.useRef)(children.map((_, index) => 0));
+  const centerLengths = (0, import_react2.useRef)(children.map((_, index) => 0));
+  const accLengths = (0, import_react2.useRef)(children.map((_, index) => 0));
+  const [springs, api] = (0, import_web.useSprings)(
+    children.length,
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    fn(
+      order.current,
+      new Array(children.length).fill(0),
+      new Array(children.length).fill(0)
+    )
+  );
+  const bind = (0, import_react.useGesture)({
+    onDragStart: () => {
+      order.current = children.map((_, index) => index);
+      clientLengths.current = refs.current.map(
+        (ref) => mode === "vertical" ? ref?.clientHeight ?? 0 : ref?.clientWidth ?? 0
+      );
+      centerLengths.current = clientLengths.current.map(
+        (length, idx) => clientLengths.current.slice(0, idx).reduce((acc, cur) => acc + cur, 0) + length / 2
+      );
+      accLengths.current = clientLengths.current.map(
+        (length, idx) => clientLengths.current.slice(0, idx).reduce((acc, cur) => acc + cur, 0)
+      );
+    },
+    onDrag: ({ event, args: [originalIndex], active, movement: [x, y] }) => {
+      const originIdx = originalIndex;
+      const movement = mode === "vertical" ? y : x;
+      const dragLength = centerLengths.current[originIdx] + movement;
+      const centerIdx = accLengths.current.findIndex(
+        (length, idx) => dragLength < accLengths.current[idx + 1] || idx === centerLengths.current.length - 1
+      );
+      const curRow = (0, import_lodash.default)(centerIdx, 0, children.length - 1);
+      const newOrder = (0, import_lodash_move.default)(order.current, originIdx, curRow);
+      const newClientHeights = (0, import_lodash_move.default)([...clientLengths.current], originIdx, curRow);
+      void api.start(fn(newOrder, clientLengths.current, newClientHeights, active, originIdx, movement));
+      if (!active) {
+        const draggedValue = children[originIdx].props.value;
+        void api.start(fn(order.current, clientLengths.current, newClientHeights, active, originIdx, movement, true));
+        onChange(
+          children.map((_, index) => children[newOrder[index]].props.value),
+          draggedValue,
+          { originalIdx: originIdx, newIdx: curRow, idxChanged: originalIndex !== curRow }
+        );
+      }
+    }
+  });
+  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)(`flex gap-0`, { "flex-col": mode === "vertical" }, className) }, springs.map(({ zIndex, shadow, movement, scale }, i) => /* @__PURE__ */ React.createElement(
+    import_web.animated.div,
+    {
+      ref: (el) => {
+        refs.current[i] = el;
+      },
+      key: i,
+      style: {
+        zIndex,
+        boxShadow: shadow.to((s) => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px`),
+        scale,
+        ...mode === "vertical" ? { y: movement } : { x: movement }
+        // cursor: "grab",
+      }
+    },
+    /* @__PURE__ */ React.createElement(dragListContext.Provider, { value: { bind: () => bind(i) } }, children[i])
+  )));
+};
+DragList.Cursor = ({ className, children }) => {
+  const { bind } = useDragList();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: (0, import_client.clsx)("cursor-grab duration-200 hover:scale-[1.01] hover:opacity-70 hover:shadow-xl", className),
+      ...bind()
+    },
+    children
+  );
+};
+const Item = ({ value, children }) => {
+  return children;
+};
+DragList.Item = Item;
+const fn = (order, heights, newHeights, active = false, originalIndex = 0, movement = 0, finished = false) => (index) => {
+  return active && index === originalIndex ? {
+    movement,
+    scale: 1.01,
+    zIndex: 1,
+    // shadow: 15,
+    immediate: (key) => key === "zIndex",
+    config: (key) => key === "y" ? import_web.config.stiff : import_web.config.default
+  } : {
+    movement: index === originalIndex ? newHeights.slice(0, order.indexOf(index)).reduce((a, b) => a + b, 0) - heights.slice(0, index).reduce((a, b) => a + b, 0) : order.indexOf(index) === index ? 0 : order.indexOf(index) > index ? heights[originalIndex] : -heights[originalIndex],
+    scale: 1,
+    zIndex: 0,
+    shadow: 0,
+    immediate: finished
+  };
+};
+const DraggableList = DragList;

package/cjs/Dropdown.js

@@ -0,0 +1,64 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  Dropdown: () => Dropdown
+});
+module.exports = __toCommonJS(Dropdown_exports);
+var import_client = require("@akanjs/client");
+var import_react = require("react");
+const Dropdown = ({ value, content, className, buttonClassName, dropdownClassName }) => {
+  const [opened, setOpened] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      onClick: () => {
+        setOpened(true);
+      },
+      className: (0, import_client.clsx)("dropdown dropdown-end", className)
+    },
+    /* @__PURE__ */ React.createElement(
+      "label",
+      {
+        tabIndex: 0,
+        className: (0, import_client.clsx)("btn flex", buttonClassName),
+        onClick: () => {
+          setOpened(true);
+        }
+      },
+      value
+    ),
+    /* @__PURE__ */ React.createElement(
+      "ul",
+      {
+        tabIndex: 0,
+        onClick: () => {
+          if (opened)
+            setOpened(false);
+        },
+        className: (0, import_client.clsx)(
+          "md:scrollbar-thin md:scrollbar-thumb-rounded-md md:scrollbar-thumb-gray-300 md:scrollbar-track-transparent bg-base-100 z-[100] grid max-h-52 gap-2 overflow-auto rounded-md pr-3 whitespace-nowrap shadow-sm",
+          opened ? "dropdown-content size-fit p-1" : "size-0 overflow-hidden",
+          dropdownClassName
+        )
+      },
+      content
+    )
+  );
+};

package/cjs/Empty.js

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Empty_exports = {};
+__export(Empty_exports, {
+  Empty: () => Empty
+});
+module.exports = __toCommonJS(Empty_exports);
+var import_client = require("@akanjs/client");
+var import_next = require("@akanjs/next");
+var import_react = __toESM(require("react"));
+var import_ai = require("react-icons/ai");
+const Empty = ({ className = "", description, children, minHeight = 300 }) => {
+  const { l } = (0, import_next.usePage)();
+  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_client.clsx)(
+        `min-h-[${minHeight}px] text-base-content/30 flex flex-col items-center justify-center gap-3 pt-6 pb-3`,
+        className
+      )
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineMeh, { className: "scale-150 text-4xl" }),
+    /* @__PURE__ */ import_react.default.createElement("p", null, description ?? l("util.noData"))
+  ), children);
+};