@sth87/shadcn-design-system 0.1.8 → 0.2.0

package/dist/esm/components/Interactive/CursorFollow.js

@@ -1,38 +1,7 @@
-import { jsx as p, jsxs as L, Fragment as z } from "react/jsx-runtime";
+import { jsx as m, jsxs as L, Fragment as z } from "react/jsx-runtime";
 import * as t from "react";
 import { useMotionValue as k, AnimatePresence as M, motion as H, useSpring as F } from "motion/react";
-import "@radix-ui/react-slot";
-import "../../packages/ui/src/components/button.js";
-import "../../packages/ui/src/components/button-group.js";
-import "../../packages/ui/src/components/input.js";
-import "../../packages/ui/src/components/textarea.js";
-import "@radix-ui/react-label";
 import { cn as A } from "../../packages/ui/src/lib/utils.js";
-import "../../packages/ui/src/components/select.js";
-import "../../packages/ui/src/components/combobox.js";
-import "@radix-ui/react-tooltip";
-import "lucide-react";
-import "react-day-picker";
-import "../../packages/ui/src/components/popover.js";
-import "@radix-ui/react-separator";
-import "../../packages/ui/src/components/switch.js";
-import "vaul";
-import "@radix-ui/react-scroll-area";
-import "../../packages/ui/src/components/tree-view.js";
-import "@radix-ui/react-alert-dialog";
-import "@radix-ui/react-avatar";
-import "../../packages/ui/src/components/badge.js";
-import "../../packages/ui/src/components/checkbox.js";
-import "@radix-ui/react-collapsible";
-import "cmdk";
-import "@radix-ui/react-dialog";
-import "@radix-ui/react-dropdown-menu";
-import "../../packages/ui/src/components/input-otp.js";
-import "../../packages/ui/src/components/radio-group.js";
-import "../../packages/ui/src/components/sidebar.js";
-import "@radix-ui/react-slider";
-import "../../packages/ui/src/components/tabs.js";
-import "../../packages/ui/src/components/toggle.js";
 const B = {
   slow: { stiffness: 100, damping: 20, bounce: 0 },
   normal: { stiffness: 500, damping: 50, bounce: 0 },
@@ -41,55 +10,55 @@ const B = {
 }, N = t.createContext(
   void 0
 ), X = () => {
-  const f = t.useContext(N);
-  if (!f)
+  const v = t.useContext(N);
+  if (!v)
     throw new Error("useCursor must be used within a CursorProvider");
-  return f;
+  return v;
 }, I = {
   default: null,
   // Use system cursor
-  pointer: /* @__PURE__ */ p("div", { className: "ds:h-5 ds:w-5 ds:rounded-full ds:bg-white/30 ds:border-2 ds:border-white" })
+  pointer: /* @__PURE__ */ m("div", { className: "ds:h-5 ds:w-5 ds:rounded-full ds:bg-white/30 ds:border-2 ds:border-white" })
 };
-function be({
-  ref: f,
+function q({
+  ref: v,
   children: e,
-  cursorType: s = "default",
-  followText: v,
+  cursorType: n = "default",
+  followText: h,
   showFollow: b,
   followAlign: x = "bottom-right",
-  followSideOffset: n = 15,
+  followSideOffset: o = 15,
   followTransition: y = "normal",
   ...E
 }) {
-  const [g, m] = t.useState({ x: 0, y: 0 }), [i, C] = t.useState(!1), r = t.useRef(null), h = t.useRef(null);
-  t.useImperativeHandle(f, () => r.current), t.useEffect(() => {
+  const [g, d] = t.useState({ x: 0, y: 0 }), [c, C] = t.useState(!1), r = t.useRef(null), p = t.useRef(null);
+  t.useImperativeHandle(v, () => r.current), t.useEffect(() => {
     if (!r.current) return;
-    const u = r.current.parentElement;
-    if (!u) return;
-    getComputedStyle(u).position === "static" && (u.style.position = "relative");
-    const w = (d) => {
-      const l = u.getBoundingClientRect();
-      m({ x: d.clientX - l.left, y: d.clientY - l.top }), C(!0);
+    const i = r.current.parentElement;
+    if (!i) return;
+    getComputedStyle(i).position === "static" && (i.style.position = "relative");
+    const w = (f) => {
+      const l = i.getBoundingClientRect();
+      d({ x: f.clientX - l.left, y: f.clientY - l.top }), C(!0);
     }, S = () => C(!1);
-    return u.addEventListener("mousemove", w), u.addEventListener("mouseleave", S), () => {
-      u.removeEventListener("mousemove", w), u.removeEventListener("mouseleave", S);
+    return i.addEventListener("mousemove", w), i.addEventListener("mouseleave", S), () => {
+      i.removeEventListener("mousemove", w), i.removeEventListener("mouseleave", S);
     };
   }, []);
-  const c = s !== void 0, P = b ?? v !== void 0, o = B[y];
-  return /* @__PURE__ */ p(
+  const u = n !== void 0, P = b ?? h !== void 0, s = B[y];
+  return /* @__PURE__ */ m(
     N.Provider,
     {
-      value: { cursorPos: g, isActive: i, containerRef: r, cursorRef: h },
+      value: { cursorPos: g, isActive: c, containerRef: r, cursorRef: p },
       children: /* @__PURE__ */ L("div", { ref: r, "data-slot": "cursor-provider", ...E, children: [
         e,
-        c && /* @__PURE__ */ p(Y, { cursorType: s }),
-        P && /* @__PURE__ */ p(
+        u && /* @__PURE__ */ m(Y, { cursorType: n }),
+        P && /* @__PURE__ */ m(
           j,
           {
-            followText: v,
+            followText: h,
             align: x,
-            sideOffset: n,
-            transition: o
+            sideOffset: o,
+            transition: s
           }
         )
       ] })
@@ -97,33 +66,33 @@ function be({
   );
 }
 function Y({
-  ref: f,
+  ref: v,
   children: e,
-  cursorType: s = "default",
-  className: v,
+  cursorType: n = "default",
+  className: h,
   style: b,
   ...x
 }) {
-  const { cursorPos: n, isActive: y, containerRef: E, cursorRef: g } = X();
-  t.useImperativeHandle(f, () => g.current);
-  const m = k(0), i = k(0), r = e || (typeof s == "string" && s in I ? I[s] : s), h = r !== null;
+  const { cursorPos: o, isActive: y, containerRef: E, cursorRef: g } = X();
+  t.useImperativeHandle(v, () => g.current);
+  const d = k(0), c = k(0), r = e || (typeof n == "string" && n in I ? I[n] : n), p = r !== null;
   return t.useEffect(() => {
-    const c = E.current?.parentElement;
-    return c && y && h && (c.style.cursor = "none"), () => {
-      c && (c.style.cursor = "default");
+    const u = E.current?.parentElement;
+    return u && y && p && (u.style.cursor = "none"), () => {
+      u && (u.style.cursor = "default");
     };
-  }, [E, y, h]), t.useEffect(() => {
-    m.set(n.x), i.set(n.y);
-  }, [n, m, i]), r ? /* @__PURE__ */ p(M, { children: y && /* @__PURE__ */ p(
+  }, [E, y, p]), t.useEffect(() => {
+    d.set(o.x), c.set(o.y);
+  }, [o, d, c]), r ? /* @__PURE__ */ m(M, { children: y && /* @__PURE__ */ m(
     H.div,
     {
       ref: g,
       "data-slot": "cursor",
       className: A(
         "ds:transform-[translate(-50%,-50%)] ds:pointer-events-none ds:z-9999 ds:absolute",
-        v
+        h
       ),
-      style: { top: i, left: m, ...b },
+      style: { top: c, left: d, ...b },
       initial: { scale: 0, opacity: 0 },
       animate: { scale: 1, opacity: 1 },
       exit: { scale: 0, opacity: 0 },
@@ -133,26 +102,26 @@ function Y({
   ) }) : null;
 }
 function j({
-  ref: f,
+  ref: v,
   sideOffset: e = 15,
-  align: s = "bottom-right",
-  children: v,
+  align: n = "bottom-right",
+  children: h,
   className: b,
   style: x,
-  followText: n,
+  followText: o,
   transition: y,
   transitionPreset: E = "normal",
   ...g
 }) {
-  const { cursorPos: m, isActive: i, cursorRef: C } = X(), r = t.useRef(null);
+  const { cursorPos: d, isActive: c, cursorRef: C } = X(), r = t.useRef(null);
   t.useImperativeHandle(
-    f,
+    v,
     () => r.current
   );
-  const h = k(0), c = k(0), P = y || B[E], o = F(h, P), u = F(c, P), w = t.useCallback(() => {
-    const d = r.current?.getBoundingClientRect(), l = d?.width ?? 0, R = d?.height ?? 0;
+  const p = k(0), u = k(0), P = y || B[E], s = F(p, P), i = F(u, P), w = t.useCallback(() => {
+    const f = r.current?.getBoundingClientRect(), l = f?.width ?? 0, R = f?.height ?? 0;
     let a;
-    switch (s) {
+    switch (n) {
       case "center":
         a = { x: l / 2, y: R / 2 };
         break;
@@ -184,13 +153,13 @@ function j({
         a = { x: 0, y: 0 };
     }
     return a;
-  }, [s, e]);
+  }, [n, e]);
   t.useEffect(() => {
-    const d = w(), l = C.current?.getBoundingClientRect(), R = l?.width ?? 20, a = l?.height ?? 20;
-    h.set(m.x - d.x + R / 2), c.set(m.y - d.y + a / 2);
-  }, [w, m, C, h, c]);
-  const S = () => v || (n ? typeof n == "string" ? /* @__PURE__ */ p("div", { className: "ds:px-4 ds:py-2 ds:bg-white ds:rounded-md ds:shadow-lg ds:text-sm ds:font-medium", children: n }) : n : null);
-  return /* @__PURE__ */ p(M, { children: i && /* @__PURE__ */ p(
+    const f = w(), l = C.current?.getBoundingClientRect(), R = l?.width ?? 20, a = l?.height ?? 20;
+    p.set(d.x - f.x + R / 2), u.set(d.y - f.y + a / 2);
+  }, [w, d, C, p, u]);
+  const S = () => h || (o ? typeof o == "string" ? /* @__PURE__ */ m("div", { className: "ds:px-4 ds:py-2 ds:bg-white ds:rounded-md ds:shadow-lg ds:text-sm ds:font-medium", children: o }) : o : null);
+  return /* @__PURE__ */ m(M, { children: c && /* @__PURE__ */ m(
     H.div,
     {
       ref: r,
@@ -199,7 +168,7 @@ function j({
         "ds:transform-[translate(-50%,-50%)] ds:pointer-events-none ds:z-9998 ds:absolute",
         b
       ),
-      style: { top: u, left: o, ...x },
+      style: { top: i, left: s, ...x },
       initial: { scale: 0, opacity: 0 },
       animate: { scale: 1, opacity: 1 },
       exit: { scale: 0, opacity: 0 },
@@ -208,71 +177,71 @@ function j({
     }
   ) });
 }
-function xe(f = {}) {
+function D(v = {}) {
   const {
     cursorType: e = "default",
-    followText: s,
-    showFollow: v,
+    followText: n,
+    showFollow: h,
     align: b = "bottom-right",
     sideOffset: x = 15,
-    transitionPreset: n = "normal",
+    transitionPreset: o = "normal",
     className: y,
     style: E
-  } = f, [g, m] = t.useState({ x: 0, y: 0 }), [i, C] = t.useState(!1), r = t.useRef(null), h = t.useRef(null);
+  } = v, [g, d] = t.useState({ x: 0, y: 0 }), [c, C] = t.useState(!1), r = t.useRef(null), p = t.useRef(null);
   t.useEffect(() => {
     if (!r.current) return;
-    const o = r.current;
-    getComputedStyle(o).position === "static" && (o.style.position = "relative");
-    const u = (S) => {
-      const d = o.getBoundingClientRect();
-      m({ x: S.clientX - d.left, y: S.clientY - d.top }), C(!0);
+    const s = r.current;
+    getComputedStyle(s).position === "static" && (s.style.position = "relative");
+    const i = (S) => {
+      const f = s.getBoundingClientRect();
+      d({ x: S.clientX - f.left, y: S.clientY - f.top }), C(!0);
     }, w = () => C(!1);
-    return o.addEventListener("mousemove", u), o.addEventListener("mouseleave", w), () => {
-      o.removeEventListener("mousemove", u), o.removeEventListener("mouseleave", w);
+    return s.addEventListener("mousemove", i), s.addEventListener("mouseleave", w), () => {
+      s.removeEventListener("mousemove", i), s.removeEventListener("mouseleave", w);
     };
   }, []);
-  const c = e !== "default";
+  const u = e !== "default";
   t.useEffect(() => {
-    if (!r.current || !i || !c) return;
-    const o = r.current;
-    return o.style.cursor = "none", () => {
-      o.style.cursor = "default";
+    if (!r.current || !c || !u) return;
+    const s = r.current;
+    return s.style.cursor = "none", () => {
+      s.style.cursor = "default";
     };
-  }, [i, c]);
-  const P = t.useCallback(() => i ? /* @__PURE__ */ L(
+  }, [c, u]);
+  const P = t.useCallback(() => c ? /* @__PURE__ */ L(
     N.Provider,
     {
-      value: { cursorPos: g, isActive: i, containerRef: r, cursorRef: h },
+      value: { cursorPos: g, isActive: c, containerRef: r, cursorRef: p },
       children: [
-        /* @__PURE__ */ p(Y, { cursorType: e }),
-        (v ?? s !== void 0) && /* @__PURE__ */ p(
+        /* @__PURE__ */ m(Y, { cursorType: e }),
+        (h ?? n !== void 0) && /* @__PURE__ */ m(
           j,
           {
-            followText: s,
+            followText: n,
             align: b,
             sideOffset: x,
-            transitionPreset: n
+            transitionPreset: o
           }
         )
       ]
     }
   ) : null, [
-    i,
+    c,
     g,
     e,
-    s,
-    v,
+    n,
+    h,
     b,
     x,
-    n
+    o
   ]);
   return {
     ref: r,
     className: A("ds:relative", y),
     style: { ...E },
     "data-cursor-container": !0,
-    children: (o) => /* @__PURE__ */ L(z, { children: [
-      o,
+    children: (s) => /* @__PURE__ */ L(z, { children: [
+      s,
       P()
     ] })
   };
@@ -280,9 +249,8 @@ function xe(f = {}) {
 export {
   Y as Cursor,
   j as CursorFollow,
-  be as CursorProvider,
+  q as CursorProvider,
   B as TRANSITION_PRESETS,
   X as useCursor,
-  xe as useCursorFollow
+  D as useCursorFollow
 };
-//# sourceMappingURL=CursorFollow.js.map

package/dist/esm/components/Interactive/index.js

@@ -0,0 +1,9 @@
+import { Cursor as s, CursorFollow as u, CursorProvider as C, TRANSITION_PRESETS as e, useCursor as l, useCursorFollow as S } from "./CursorFollow.js";
+export {
+  s as Cursor,
+  u as CursorFollow,
+  C as CursorProvider,
+  e as TRANSITION_PRESETS,
+  l as useCursor,
+  S as useCursorFollow
+};

package/dist/esm/components/Label/index.js

@@ -0,0 +1,4 @@
+import { Label as r } from "../../packages/ui/src/components/label.js";
+export {
+  r as Label
+};