@drjoshcsimmons/scl 0.2.8 → 0.3.3

package/dist/index69.js

@@ -1,24 +1,120 @@
-import * as p from "react";
-import { Primitive as v } from "./index107.js";
-import { jsx as m } from "react/jsx-runtime";
-var d = "Separator", a = "horizontal", l = ["horizontal", "vertical"], i = p.forwardRef((r, n) => {
-  const { decorative: e, orientation: t = a, ...s } = r, o = f(t) ? t : a, c = e ? { role: "none" } : { "aria-orientation": o === "vertical" ? o : void 0, role: "separator" };
-  return /* @__PURE__ */ m(
+import * as o from "react";
+import { composeEventHandlers as T } from "./index81.js";
+import { createContextScope as S } from "./index78.js";
+import { useControllableState as D } from "./index82.js";
+import { useLayoutEffect as L } from "./index88.js";
+import { useComposedRefs as M } from "./index80.js";
+import { Primitive as v } from "./index83.js";
+import { Presence as k } from "./index93.js";
+import { useId as F } from "./index84.js";
+import { jsx as c } from "react/jsx-runtime";
+var u = "Collapsible", [B, W] = S(u), [G, g] = B(u), w = o.forwardRef(
+  (e, a) => {
+    const {
+      __scopeCollapsible: i,
+      open: r,
+      defaultOpen: t,
+      disabled: l,
+      onOpenChange: s,
+      ...m
+    } = e, [d, p] = D({
+      prop: r,
+      defaultProp: t ?? !1,
+      onChange: s,
+      caller: u
+    });
+    return /* @__PURE__ */ c(
+      G,
+      {
+        scope: i,
+        disabled: l,
+        contentId: F(),
+        open: d,
+        onOpenToggle: o.useCallback(() => p((C) => !C), [p]),
+        children: /* @__PURE__ */ c(
+          v.div,
+          {
+            "data-state": h(d),
+            "data-disabled": l ? "" : void 0,
+            ...m,
+            ref: a
+          }
+        )
+      }
+    );
+  }
+);
+w.displayName = u;
+var A = "CollapsibleTrigger", I = o.forwardRef(
+  (e, a) => {
+    const { __scopeCollapsible: i, ...r } = e, t = g(A, i);
+    return /* @__PURE__ */ c(
+      v.button,
+      {
+        type: "button",
+        "aria-controls": t.contentId,
+        "aria-expanded": t.open || !1,
+        "data-state": h(t.open),
+        "data-disabled": t.disabled ? "" : void 0,
+        disabled: t.disabled,
+        ...r,
+        ref: a,
+        onClick: T(e.onClick, t.onOpenToggle)
+      }
+    );
+  }
+);
+I.displayName = A;
+var R = "CollapsibleContent", O = o.forwardRef(
+  (e, a) => {
+    const { forceMount: i, ...r } = e, t = g(R, e.__scopeCollapsible);
+    return /* @__PURE__ */ c(k, { present: i || t.open, children: ({ present: l }) => /* @__PURE__ */ c($, { ...r, ref: a, present: l }) });
+  }
+);
+O.displayName = R;
+var $ = o.forwardRef((e, a) => {
+  const { __scopeCollapsible: i, present: r, children: t, ...l } = e, s = g(R, i), [m, d] = o.useState(r), p = o.useRef(null), C = M(a, p), y = o.useRef(0), x = y.current, N = o.useRef(0), P = N.current, b = s.open || m, _ = o.useRef(b), f = o.useRef(void 0);
+  return o.useEffect(() => {
+    const n = requestAnimationFrame(() => _.current = !1);
+    return () => cancelAnimationFrame(n);
+  }, []), L(() => {
+    const n = p.current;
+    if (n) {
+      f.current = f.current || {
+        transitionDuration: n.style.transitionDuration,
+        animationName: n.style.animationName
+      }, n.style.transitionDuration = "0s", n.style.animationName = "none";
+      const E = n.getBoundingClientRect();
+      y.current = E.height, N.current = E.width, _.current || (n.style.transitionDuration = f.current.transitionDuration, n.style.animationName = f.current.animationName), d(r);
+    }
+  }, [s.open, r]), /* @__PURE__ */ c(
     v.div,
     {
-      "data-orientation": o,
-      ...c,
-      ...s,
-      ref: n
+      "data-state": h(s.open),
+      "data-disabled": s.disabled ? "" : void 0,
+      id: s.contentId,
+      hidden: !b,
+      ...l,
+      ref: C,
+      style: {
+        "--radix-collapsible-content-height": x ? `${x}px` : void 0,
+        "--radix-collapsible-content-width": P ? `${P}px` : void 0,
+        ...e.style
+      },
+      children: b && t
     }
   );
 });
-i.displayName = d;
-function f(r) {
-  return l.includes(r);
+function h(e) {
+  return e ? "open" : "closed";
 }
-var T = i;
+var X = w, Y = I, Z = O;
 export {
-  T as Root,
-  i as Separator
+  w as Collapsible,
+  O as CollapsibleContent,
+  I as CollapsibleTrigger,
+  Z as Content,
+  X as Root,
+  Y as Trigger,
+  W as createCollapsibleScope
 };

package/dist/index7.js

@@ -1,42 +1,37 @@
-import { jsx as l } from "react/jsx-runtime";
-import { Root as s, Fallback as t, Image as d } from "./index60.js";
-import * as o from "react";
-import { cn as m } from "./index2.js";
-const f = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ l(
-  s,
+import { jsx as s } from "react/jsx-runtime";
+import { Root as e, Fallback as t, Image as c } from "./index38.js";
+import * as l from "react";
+import { cx as o } from "./index2.js";
+/* empty css        */
+const i = l.forwardRef(({ className: a, ...r }, m) => /* @__PURE__ */ s(
+  e,
   {
-    ref: e,
-    className: m(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border border-primary",
-      a
-    ),
+    ref: m,
+    className: o("scl-avatar", a),
     ...r
   }
 ));
-f.displayName = s.displayName;
-const i = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ l(
-  d,
+i.displayName = e.displayName;
+const p = l.forwardRef(({ className: a, ...r }, m) => /* @__PURE__ */ s(
+  c,
   {
-    ref: e,
-    className: m("aspect-square h-full w-full", a),
+    ref: m,
+    className: o("scl-avatar__image", a),
     ...r
   }
 ));
-i.displayName = d.displayName;
-const p = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ l(
+p.displayName = c.displayName;
+const f = l.forwardRef(({ className: a, ...r }, m) => /* @__PURE__ */ s(
   t,
   {
-    ref: e,
-    className: m(
-      "flex h-full w-full items-center justify-center rounded-full bg-background border border-primary text-primary",
-      a
-    ),
+    ref: m,
+    className: o("scl-avatar__fallback", a),
     ...r
   }
 ));
-p.displayName = t.displayName;
+f.displayName = t.displayName;
 export {
-  f as Avatar,
-  p as AvatarFallback,
-  i as AvatarImage
+  i as Avatar,
+  f as AvatarFallback,
+  p as AvatarImage
 };

package/dist/index71.js

@@ -1,84 +1,163 @@
-import * as m from "react";
-import { createContextScope as $ } from "./index110.js";
-import { Primitive as c } from "./index111.js";
+import * as v from "react";
+import { composeEventHandlers as g } from "./index81.js";
+import { createContextScope as x } from "./index78.js";
+import { createRovingFocusGroupScope as C, Root as E, Item as F } from "./index105.js";
+import { Presence as w } from "./index93.js";
+import { Primitive as b } from "./index83.js";
+import { useDirection as D } from "./index85.js";
+import { useControllableState as V } from "./index82.js";
+import { useId as G } from "./index84.js";
 import { jsx as l } from "react/jsx-runtime";
-var u = "Progress", d = 100, [h] = $(u), [R, _] = h(u), f = m.forwardRef(
-  (r, e) => {
+var p = "Tabs", [L] = x(p, [
+  C
+]), h = C(), [$, T] = L(p), I = v.forwardRef(
+  (e, r) => {
     const {
-      __scopeProgress: i,
-      value: o = null,
-      max: a,
-      getValueLabel: N = E,
-      ...b
-    } = r;
-    (a || a === 0) && !v(a) && console.error(M(`${a}`, "Progress"));
-    const t = v(a) ? a : d;
-    o !== null && !p(o, t) && console.error(V(`${o}`, "Progress"));
-    const n = p(o, t) ? o : null, I = s(n) ? N(n, t) : void 0;
-    return /* @__PURE__ */ l(R, { scope: i, value: n, max: t, children: /* @__PURE__ */ l(
-      c.div,
+      __scopeTabs: s,
+      value: t,
+      onValueChange: n,
+      defaultValue: c,
+      orientation: o = "horizontal",
+      dir: d,
+      activationMode: f = "automatic",
+      ...m
+    } = e, i = D(d), [a, u] = V({
+      prop: t,
+      onChange: n,
+      defaultProp: c ?? "",
+      caller: p
+    });
+    return /* @__PURE__ */ l(
+      $,
       {
-        "aria-valuemax": t,
-        "aria-valuemin": 0,
-        "aria-valuenow": s(n) ? n : void 0,
-        "aria-valuetext": I,
-        role: "progressbar",
-        "data-state": P(n, t),
-        "data-value": n ?? void 0,
-        "data-max": t,
-        ...b,
-        ref: e
+        scope: s,
+        baseId: G(),
+        value: a,
+        onValueChange: u,
+        orientation: o,
+        dir: i,
+        activationMode: f,
+        children: /* @__PURE__ */ l(
+          b.div,
+          {
+            dir: i,
+            "data-orientation": o,
+            ...m,
+            ref: r
+          }
+        )
       }
-    ) });
+    );
   }
 );
-f.displayName = u;
-var g = "ProgressIndicator", x = m.forwardRef(
-  (r, e) => {
-    const { __scopeProgress: i, ...o } = r, a = _(g, i);
+I.displayName = p;
+var R = "TabsList", _ = v.forwardRef(
+  (e, r) => {
+    const { __scopeTabs: s, loop: t = !0, ...n } = e, c = T(R, s), o = h(s);
     return /* @__PURE__ */ l(
-      c.div,
+      E,
       {
-        "data-state": P(a.value, a.max),
-        "data-value": a.value ?? void 0,
-        "data-max": a.max,
+        asChild: !0,
         ...o,
-        ref: e
+        orientation: c.orientation,
+        dir: c.dir,
+        loop: t,
+        children: /* @__PURE__ */ l(
+          b.div,
+          {
+            role: "tablist",
+            "aria-orientation": c.orientation,
+            ...n,
+            ref: r
+          }
+        )
       }
     );
   }
 );
-x.displayName = g;
-function E(r, e) {
-  return `${Math.round(r / e * 100)}%`;
-}
-function P(r, e) {
-  return r == null ? "indeterminate" : r === e ? "complete" : "loading";
-}
-function s(r) {
-  return typeof r == "number";
-}
-function v(r) {
-  return s(r) && !isNaN(r) && r > 0;
-}
-function p(r, e) {
-  return s(r) && !isNaN(r) && r <= e && r >= 0;
-}
-function M(r, e) {
-  return `Invalid prop \`max\` of value \`${r}\` supplied to \`${e}\`. Only numbers greater than 0 are valid max values. Defaulting to \`${d}\`.`;
+_.displayName = R;
+var y = "TabsTrigger", A = v.forwardRef(
+  (e, r) => {
+    const { __scopeTabs: s, value: t, disabled: n = !1, ...c } = e, o = T(y, s), d = h(s), f = P(o.baseId, t), m = S(o.baseId, t), i = t === o.value;
+    return /* @__PURE__ */ l(
+      F,
+      {
+        asChild: !0,
+        ...d,
+        focusable: !n,
+        active: i,
+        children: /* @__PURE__ */ l(
+          b.button,
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": i,
+            "aria-controls": m,
+            "data-state": i ? "active" : "inactive",
+            "data-disabled": n ? "" : void 0,
+            disabled: n,
+            id: f,
+            ...c,
+            ref: r,
+            onMouseDown: g(e.onMouseDown, (a) => {
+              !n && a.button === 0 && a.ctrlKey === !1 ? o.onValueChange(t) : a.preventDefault();
+            }),
+            onKeyDown: g(e.onKeyDown, (a) => {
+              [" ", "Enter"].includes(a.key) && o.onValueChange(t);
+            }),
+            onFocus: g(e.onFocus, () => {
+              const a = o.activationMode !== "manual";
+              !i && !n && a && o.onValueChange(t);
+            })
+          }
+        )
+      }
+    );
+  }
+);
+A.displayName = y;
+var M = "TabsContent", N = v.forwardRef(
+  (e, r) => {
+    const { __scopeTabs: s, value: t, forceMount: n, children: c, ...o } = e, d = T(M, s), f = P(d.baseId, t), m = S(d.baseId, t), i = t === d.value, a = v.useRef(i);
+    return v.useEffect(() => {
+      const u = requestAnimationFrame(() => a.current = !1);
+      return () => cancelAnimationFrame(u);
+    }, []), /* @__PURE__ */ l(w, { present: n || i, children: ({ present: u }) => /* @__PURE__ */ l(
+      b.div,
+      {
+        "data-state": i ? "active" : "inactive",
+        "data-orientation": d.orientation,
+        role: "tabpanel",
+        "aria-labelledby": f,
+        hidden: !u,
+        id: m,
+        tabIndex: 0,
+        ...o,
+        ref: r,
+        style: {
+          ...e.style,
+          animationDuration: a.current ? "0s" : void 0
+        },
+        children: u && c
+      }
+    ) });
+  }
+);
+N.displayName = M;
+function P(e, r) {
+  return `${e}-trigger-${r}`;
 }
-function V(r, e) {
-  return `Invalid prop \`value\` of value \`${r}\` supplied to \`${e}\`. The \`value\` prop must be:
-  - a positive number
-  - less than the value passed to \`max\` (or ${d} if no \`max\` prop is set)
-  - \`null\` or \`undefined\` if the progress is indeterminate.
-
-Defaulting to \`null\`.`;
+function S(e, r) {
+  return `${e}-content-${r}`;
 }
-var D = f, L = x;
+var Q = I, U = _, W = A, X = N;
 export {
-  L as Indicator,
-  f as Progress,
-  x as ProgressIndicator,
-  D as Root
+  X as Content,
+  U as List,
+  Q as Root,
+  I as Tabs,
+  N as TabsContent,
+  _ as TabsList,
+  A as TabsTrigger,
+  W as Trigger
 };