@nqlib/nqui 0.3.2 → 0.4.0

package/dist/sortable-wG_cXiUk.js

@@ -0,0 +1,366 @@
+import { jsx as g } from "react/jsx-runtime";
+import { useSensors as X, useSensor as O, MouseSensor as Z, TouchSensor as tt, KeyboardSensor as et, closestCorners as ot, closestCenter as L, DndContext as rt, DragOverlay as nt, defaultDropAnimationSideEffects as at } from "@dnd-kit/core";
+import { restrictToParentElement as k, restrictToHorizontalAxis as st, restrictToVerticalAxis as it } from "@dnd-kit/modifiers";
+import { sortableKeyboardCoordinates as ct, horizontalListSortingStrategy as lt, verticalListSortingStrategy as dt, arrayMove as ut, SortableContext as ft, useSortable as mt } from "@dnd-kit/sortable";
+import { CSS as gt } from "@dnd-kit/utilities";
+import { Slot as H } from "@radix-ui/react-slot";
+import * as r from "react";
+import * as bt from "react-dom";
+import { c as _ } from "./utils-B6yFEsav.js";
+function j(o, t) {
+  if (typeof o == "function")
+    return o(t);
+  o != null && typeof o == "object" && (o.current = t);
+}
+function pt(...o) {
+  return (t) => {
+    let i = !1;
+    const c = o.map((a) => {
+      const n = j(a, t);
+      return !i && typeof n == "function" && (i = !0), n;
+    });
+    if (i)
+      return () => {
+        for (let a = 0; a < c.length; a++) {
+          const n = c[a];
+          typeof n == "function" ? n() : j(o[a], null);
+        }
+      };
+  };
+}
+function G(...o) {
+  return r.useCallback(pt(...o), o);
+}
+const vt = {
+  vertical: {
+    modifiers: [it, k],
+    strategy: dt,
+    collisionDetection: L
+  },
+  horizontal: {
+    modifiers: [st, k],
+    strategy: lt,
+    collisionDetection: L
+  },
+  mixed: {
+    modifiers: [k],
+    strategy: void 0,
+    collisionDetection: ot
+  }
+}, St = "Sortable", K = "SortableContent", V = "SortableItem", z = "SortableItemHandle", q = "SortableOverlay", U = r.createContext(null);
+function R(o) {
+  const t = r.useContext(U);
+  if (!t)
+    throw new Error(`\`${o}\` must be used within \`${St}\``);
+  return t;
+}
+function wt(o) {
+  const {
+    value: t,
+    onValueChange: i,
+    collisionDetection: c,
+    modifiers: a,
+    strategy: n,
+    onMove: m,
+    orientation: s = "vertical",
+    flatCursor: u = !1,
+    getItemValue: p,
+    accessibility: E,
+    onDragStart: v,
+    onDragEnd: x,
+    onDragCancel: y,
+    ...I
+  } = o, P = r.useId(), [h, C] = r.useState(null), w = X(
+    O(Z),
+    O(tt),
+    O(et, {
+      coordinateGetter: ct
+    })
+  ), f = r.useMemo(
+    () => vt[s],
+    [s]
+  ), b = r.useCallback(
+    (e) => {
+      if (typeof e == "object" && !p)
+        throw new Error("getItemValue is required when using array of objects");
+      return p ? p(e) : e;
+    },
+    [p]
+  ), M = r.useMemo(() => t.map((e) => b(e)), [t, b]), A = r.useCallback(
+    (e) => {
+      v?.(e), !e.activatorEvent.defaultPrevented && C(e.active.id);
+    },
+    [v]
+  ), T = r.useCallback(
+    (e) => {
+      if (x?.(e), e.activatorEvent.defaultPrevented) return;
+      const { active: l, over: d } = e;
+      if (d && l.id !== d?.id) {
+        const S = t.findIndex(
+          ($) => b($) === l.id
+        ), D = t.findIndex(
+          ($) => b($) === d.id
+        );
+        m ? m({ ...e, activeIndex: S, overIndex: D }) : i?.(ut(t, S, D));
+      }
+      C(null);
+    },
+    [t, i, m, b, x]
+  ), N = r.useCallback(
+    (e) => {
+      y?.(e), !e.activatorEvent.defaultPrevented && C(null);
+    },
+    [y]
+  ), F = r.useMemo(
+    () => ({
+      onDragStart({ active: e }) {
+        return `Grabbed sortable item "${e.id.toString()}". Current position is ${e.data.current?.sortable.index + 1} of ${t.length}. Use arrow keys to move, space to drop.`;
+      },
+      onDragOver({ active: e, over: l }) {
+        if (l) {
+          const d = l.data.current?.sortable.index ?? 0, S = e.data.current?.sortable.index ?? 0, D = d > S ? "down" : "up";
+          return `Sortable item "${e.id.toString()}" moved ${D} to position ${d + 1} of ${t.length}.`;
+        }
+        return "Sortable item is no longer over a droppable area. Press escape to cancel.";
+      },
+      onDragEnd({ active: e, over: l }) {
+        const d = e.id.toString();
+        if (l) {
+          const S = l.data.current?.sortable.index ?? 0;
+          return `Sortable item "${d}" dropped at position ${S + 1} of ${t.length}.`;
+        }
+        return `Sortable item "${d}" dropped. No changes were made.`;
+      },
+      onDragCancel({ active: e }) {
+        const l = e.data.current?.sortable.index ?? 0;
+        return `Sorting cancelled. Sortable item "${e.id.toString()}" returned to position ${l + 1} of ${t.length}.`;
+      },
+      onDragMove({ active: e, over: l }) {
+        if (l) {
+          const d = l.data.current?.sortable.index ?? 0, S = e.data.current?.sortable.index ?? 0, D = d > S ? "down" : "up";
+          return `Sortable item "${e.id.toString()}" is moving ${D} to position ${d + 1} of ${t.length}.`;
+        }
+        return "Sortable item is no longer over a droppable area. Press escape to cancel.";
+      }
+    }),
+    [t]
+  ), J = r.useMemo(
+    () => ({
+      draggable: `
+        To pick up a sortable item, press space or enter.
+        While dragging, use the ${s === "vertical" ? "up and down" : s === "horizontal" ? "left and right" : "arrow"} keys to move the item.
+        Press space or enter again to drop the item in its new position, or press escape to cancel.
+      `
+    }),
+    [s]
+  ), Q = r.useMemo(
+    () => ({
+      id: P,
+      items: M,
+      modifiers: a ?? f.modifiers,
+      strategy: n ?? f.strategy,
+      activeId: h,
+      setActiveId: C,
+      getItemValue: b,
+      flatCursor: u
+    }),
+    [
+      P,
+      M,
+      a,
+      n,
+      f.modifiers,
+      f.strategy,
+      h,
+      b,
+      u
+    ]
+  );
+  return /* @__PURE__ */ g(
+    U.Provider,
+    {
+      value: Q,
+      children: /* @__PURE__ */ g(
+        rt,
+        {
+          collisionDetection: c ?? f.collisionDetection,
+          modifiers: a ?? f.modifiers,
+          sensors: w,
+          ...I,
+          id: P,
+          onDragStart: A,
+          onDragEnd: T,
+          onDragCancel: N,
+          accessibility: {
+            announcements: F,
+            screenReaderInstructions: J,
+            ...E
+          }
+        }
+      )
+    }
+  );
+}
+const W = r.createContext(!1);
+function Mt(o) {
+  const {
+    strategy: t,
+    asChild: i,
+    withoutSlot: c,
+    children: a,
+    ref: n,
+    ...m
+  } = o, s = R(K), u = i ? H : "div";
+  return /* @__PURE__ */ g(W.Provider, { value: !0, children: /* @__PURE__ */ g(
+    ft,
+    {
+      items: s.items,
+      strategy: t ?? s.strategy,
+      children: c ? a : /* @__PURE__ */ g(
+        u,
+        {
+          "data-slot": "sortable-content",
+          ...m,
+          ref: n,
+          children: a
+        }
+      )
+    }
+  ) });
+}
+const Y = r.createContext(null);
+function Ct(o) {
+  const t = r.useContext(Y);
+  if (!t)
+    throw new Error(`\`${o}\` must be used within \`${V}\``);
+  return t;
+}
+function Nt(o) {
+  const {
+    value: t,
+    style: i,
+    asHandle: c,
+    asChild: a,
+    disabled: n,
+    className: m,
+    ref: s,
+    ...u
+  } = o, p = r.useContext(W), E = r.useContext(B);
+  if (!p && !E)
+    throw new Error(
+      `\`${V}\` must be used within \`${K}\` or \`${q}\``
+    );
+  if (t === "")
+    throw new Error(`\`${V}\` value cannot be an empty string`);
+  const v = R(V), x = r.useId(), {
+    attributes: y,
+    listeners: I,
+    setNodeRef: P,
+    setActivatorNodeRef: h,
+    transform: C,
+    transition: w,
+    isDragging: f
+  } = mt({ id: t, disabled: n }), b = G(s, (N) => {
+    n || (P(N), c && h(N));
+  }), M = r.useMemo(() => ({
+    transform: gt.Translate.toString(C),
+    transition: w,
+    ...i
+  }), [C, w, i]), A = r.useMemo(
+    () => ({
+      id: x,
+      attributes: y,
+      listeners: I,
+      setActivatorNodeRef: h,
+      isDragging: f,
+      disabled: n
+    }),
+    [x, y, I, h, f, n]
+  ), T = a ? H : "div";
+  return /* @__PURE__ */ g(Y.Provider, { value: A, children: /* @__PURE__ */ g(
+    T,
+    {
+      id: x,
+      "data-disabled": n,
+      "data-dragging": f ? "" : void 0,
+      "data-slot": "sortable-item",
+      ...u,
+      ...c && !n ? y : {},
+      ...c && !n ? I : {},
+      ref: b,
+      style: M,
+      className: _(
+        "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+        {
+          "touch-none select-none": c,
+          "cursor-default": v.flatCursor,
+          "data-dragging:cursor-grabbing": !v.flatCursor,
+          "cursor-grab": !f && c && !v.flatCursor,
+          "opacity-50": f,
+          "pointer-events-none opacity-50": n
+        },
+        m
+      )
+    }
+  ) });
+}
+function Vt(o) {
+  const { asChild: t, disabled: i, className: c, ref: a, ...n } = o, m = R(z), s = Ct(z), u = i ?? s.disabled, p = G(a, (v) => {
+    u && s.setActivatorNodeRef(v);
+  });
+  return /* @__PURE__ */ g(
+    t ? H : "button",
+    {
+      type: "button",
+      "aria-controls": s.id,
+      "data-disabled": u,
+      "data-dragging": s.isDragging ? "" : void 0,
+      "data-slot": "sortable-item-handle",
+      ...n,
+      ...u ? {} : s.attributes,
+      ...u ? {} : s.listeners,
+      ref: p,
+      className: _(
+        "select-none disabled:pointer-events-none disabled:opacity-50",
+        m.flatCursor ? "cursor-default" : "cursor-grab data-dragging:cursor-grabbing",
+        c
+      ),
+      disabled: u
+    }
+  );
+}
+const B = r.createContext(!1), xt = {
+  sideEffects: at({
+    styles: {
+      active: {
+        opacity: "0.4"
+      }
+    }
+  })
+};
+function Rt(o) {
+  const { container: t, children: i, ...c } = o, a = R(q), [n, m] = r.useState(!1);
+  r.useLayoutEffect(() => m(!0), []);
+  const s = t ?? (n ? globalThis.document?.body : null);
+  return s ? bt.createPortal(
+    /* @__PURE__ */ g(
+      nt,
+      {
+        dropAnimation: xt,
+        modifiers: a.modifiers,
+        className: _(!a.flatCursor && "cursor-grabbing"),
+        ...c,
+        children: /* @__PURE__ */ g(B.Provider, { value: !0, children: a.activeId ? typeof i == "function" ? i({ value: a.activeId }) : i : null })
+      }
+    ),
+    s
+  ) : null;
+}
+export {
+  wt as S,
+  Mt as a,
+  Nt as b,
+  Vt as c,
+  Rt as d,
+  G as u
+};

package/dist/sortable.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./sortable-Cj3cdxGc.cjs");exports.Sortable=e.SortableRoot;exports.SortableContent=e.SortableContent;exports.SortableItem=e.SortableItem;exports.SortableItemHandle=e.SortableItemHandle;exports.SortableOverlay=e.SortableOverlay;

package/dist/sortable.es.js

@@ -0,0 +1,8 @@
+import { S as t, a as o, b as r, c as l, d as b } from "./sortable-wG_cXiUk.js";
+export {
+  t as Sortable,
+  o as SortableContent,
+  r as SortableItem,
+  l as SortableItemHandle,
+  b as SortableOverlay
+};

package/dist/styles.css

@@ -179,14 +179,6 @@
     @apply border-border outline-ring/50;
     }
 
-  /* Viewport lock - all scroll managed by individual containers, not body */
-  html,
-  body,
-  #root {
-    height: 100%;
-    overflow: hidden;
-  }
-
   body {
     @apply font-sans bg-background text-foreground;
     }
@@ -525,13 +517,24 @@
   }
 
   /* Button enhanced styling classes - replaces arbitrary property values */
+  /* Buttons/badges: always apply. Toggles: only when [data-state=on]. */
   .nqui-button-gradient {
+    background-origin: border-box;
+    background-clip: border-box;
+  }
+  .nqui-button-gradient:not([data-state=off]) {
     background-image: var(--button-gradient);
   }
+  .nqui-button-gradient[data-state=off] {
+    background-image: none;
+  }
 
-  .nqui-button-shadow {
+  .nqui-button-shadow:not([data-state=off]) {
     box-shadow: var(--button-shadow);
   }
+  .nqui-button-shadow[data-state=off] {
+    box-shadow: none;
+  }
 
   /* Sliding indicator styles for enhanced tabs */
   .sliding-indicator {
@@ -943,19 +946,20 @@
     --info-foreground: oklch(0.98 0 0);
 
     /* Additional variables from index.css */
-    /* System UI colors for dark mode (unique to index.css) */
+    /* System UI colors for dark mode (unique to index.css)
+       Softened foreground (oklch 0.92 ≈ #e6e6e6) for reduced eye strain vs near-pure white */
     --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
+    --foreground: oklch(0.92 0 0);
     --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
+    --card-foreground: oklch(0.92 0 0);
     --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
+    --popover-foreground: oklch(0.92 0 0);
     --secondary: oklch(0.274 0.006 286.033);
-    --secondary-foreground: oklch(0.985 0 0);
+    --secondary-foreground: oklch(0.92 0 0);
     --muted: oklch(0.269 0 0);
     --muted-foreground: oklch(0.708 0 0);
     --accent: oklch(0.371 0 0);
-    --accent-foreground: oklch(0.985 0 0);
+    --accent-foreground: oklch(0.92 0 0);
     --border: oklch(1 0 0 / 10%);
     --input: oklch(1 0 0 / 15%);
 
@@ -968,11 +972,11 @@
 
     /* Sidebar for dark mode */
     --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.92 0 0);
     --sidebar-primary: var(--primary);
     --sidebar-primary-foreground: var(--primary-foreground);
     --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-accent-foreground: oklch(0.92 0 0);
     --sidebar-border: oklch(1 0 0 / 10%);
     --sidebar-ring: oklch(0.556 0 0);
 }

package/dist/utils-B6yFEsav.js

@@ -0,0 +1,8 @@
+import { clsx as o } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+function m(...r) {
+  return t(o(r));
+}
+export {
+  m as c
+};

package/dist/utils-IjLH3w2e.cjs

@@ -0,0 +1 @@
+"use strict";const r=require("clsx"),c=require("tailwind-merge");function n(...e){return c.twMerge(r.clsx(e))}exports.cn=n;