@drjoshcsimmons/scl 0.3.1 → 0.4.1

package/dist/index19.js

@@ -1,141 +1,40 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { Root as S, Group as k, Value as v, Portal as C, Content as n, Viewport as R, Item as i, ItemIndicator as g, ItemText as I, Label as p, ScrollDownButton as d, ScrollUpButton as m, Separator as N, Trigger as h, Icon as x } from "./index55.js";
-import * as o from "react";
-import { cx as c } from "./index2.js";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { Root as e, Viewport as _, Corner as d, ScrollAreaScrollbar as i, ScrollAreaThumb as f } from "./index45.js";
+import * as t from "react";
+import { cx as m } from "./index2.js";
 /* empty css        */
-const G = S, P = k, z = v, f = ({ className: l }) => /* @__PURE__ */ e(
-  "svg",
+const n = t.forwardRef(({ className: a, children: l, ...o }, c) => /* @__PURE__ */ p(
+  e,
   {
-    className: l,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "square",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" })
-  }
-), B = ({ className: l }) => /* @__PURE__ */ e(
-  "svg",
-  {
-    className: l,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "square",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ e("polyline", { points: "18 15 12 9 6 15" })
-  }
-), b = ({ className: l }) => /* @__PURE__ */ e(
-  "svg",
-  {
-    className: l,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "3",
-    strokeLinecap: "square",
-    "aria-hidden": "true",
-    children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" })
-  }
-), L = o.forwardRef(({ className: l, children: t, ...s }, r) => /* @__PURE__ */ a(
-  h,
-  {
-    ref: r,
-    className: c("scl-select-trigger", l),
-    ...s,
-    children: [
-      t,
-      /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ e(f, { className: "scl-select-icon" }) })
-    ]
-  }
-));
-L.displayName = h.displayName;
-const u = o.forwardRef(({ className: l, ...t }, s) => /* @__PURE__ */ e(
-  m,
-  {
-    ref: s,
-    className: c("scl-select-scroll-button", l),
-    ...t,
-    children: /* @__PURE__ */ e(B, { className: "scl-select-icon" })
-  }
-));
-u.displayName = m.displayName;
-const y = o.forwardRef(({ className: l, ...t }, s) => /* @__PURE__ */ e(
-  d,
-  {
-    ref: s,
-    className: c("scl-select-scroll-button", l),
-    ...t,
-    children: /* @__PURE__ */ e(f, { className: "scl-select-icon" })
-  }
-));
-y.displayName = d.displayName;
-const _ = o.forwardRef(({ className: l, children: t, position: s = "popper", ...r }, w) => /* @__PURE__ */ e(C, { children: /* @__PURE__ */ a(
-  n,
-  {
-    ref: w,
-    className: c("scl-select-content", l),
-    position: s,
-    ...r,
+    ref: c,
+    className: m("scl-scroll-area", a),
+    ...o,
     children: [
-      /* @__PURE__ */ e(u, {}),
-      /* @__PURE__ */ e(
-        R,
-        {
-          className: c(
-            "scl-select-viewport",
-            s === "popper" && "scl-select-viewport--popper"
-          ),
-          children: t
-        }
-      ),
-      /* @__PURE__ */ e(y, {})
+      /* @__PURE__ */ r(_, { className: "scl-scroll-area__viewport", children: l }),
+      /* @__PURE__ */ r(s, { orientation: "vertical" }),
+      /* @__PURE__ */ r(s, { orientation: "horizontal" }),
+      /* @__PURE__ */ r(d, {})
     ]
   }
-) }));
-_.displayName = n.displayName;
-const q = o.forwardRef(({ className: l, ...t }, s) => /* @__PURE__ */ e(
-  p,
-  {
-    ref: s,
-    className: c("scl-select-label", l),
-    ...t
-  }
 ));
-q.displayName = p.displayName;
-const D = o.forwardRef(({ className: l, children: t, ...s }, r) => /* @__PURE__ */ a(
+n.displayName = e.displayName;
+const s = t.forwardRef(({ className: a, orientation: l = "vertical", ...o }, c) => /* @__PURE__ */ r(
   i,
   {
-    ref: r,
-    className: c("scl-select-item", l),
-    ...s,
-    children: [
-      /* @__PURE__ */ e("span", { className: "scl-select-item__indicator", children: /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(b, { className: "scl-select-item__check" }) }) }),
-      /* @__PURE__ */ e(I, { children: t })
-    ]
-  }
-));
-D.displayName = i.displayName;
-const T = o.forwardRef(({ className: l, ...t }, s) => /* @__PURE__ */ e(
-  N,
-  {
-    ref: s,
-    className: c("scl-select-separator", l),
-    ...t
+    ref: c,
+    orientation: l,
+    className: m(
+      "scl-scroll-area__scrollbar",
+      l === "vertical" && "scl-scroll-area__scrollbar--vertical",
+      l === "horizontal" && "scl-scroll-area__scrollbar--horizontal",
+      a
+    ),
+    ...o,
+    children: /* @__PURE__ */ r(f, { className: "scl-scroll-area__thumb" })
   }
 ));
-T.displayName = N.displayName;
+s.displayName = i.displayName;
 export {
-  G as Select,
-  _ as SelectContent,
-  P as SelectGroup,
-  D as SelectItem,
-  q as SelectLabel,
-  y as SelectScrollDownButton,
-  u as SelectScrollUpButton,
-  T as SelectSeparator,
-  L as SelectTrigger,
-  z as SelectValue
+  n as ScrollArea,
+  s as ScrollBar
 };

package/dist/index20.js

@@ -1,23 +1,141 @@
-import { jsx as p } from "react/jsx-runtime";
-import { Root as o } from "./index59.js";
-import * as e from "react";
-import { cx as l } from "./index2.js";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { Root as S, Group as k, Value as v, Portal as C, Content as n, Viewport as R, Item as i, ItemIndicator as g, ItemText as I, Label as p, ScrollDownButton as d, ScrollUpButton as m, Separator as N, Trigger as h, Icon as x } from "./index47.js";
+import * as o from "react";
+import { cx as c } from "./index2.js";
 /* empty css        */
-const i = e.forwardRef(({ className: a, orientation: r = "horizontal", decorative: t = !0, ...s }, m) => /* @__PURE__ */ p(
-  o,
-  {
-    ref: m,
-    decorative: t,
-    orientation: r,
-    className: l(
-      "scl-separator",
-      r === "horizontal" ? "scl-separator--horizontal" : "scl-separator--vertical",
-      a
-    ),
-    ...s
+const G = S, P = k, z = v, f = ({ className: l }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: l,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "square",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" })
+  }
+), B = ({ className: l }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: l,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "square",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e("polyline", { points: "18 15 12 9 6 15" })
+  }
+), b = ({ className: l }) => /* @__PURE__ */ e(
+  "svg",
+  {
+    className: l,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "3",
+    strokeLinecap: "square",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ e("polyline", { points: "20 6 9 17 4 12" })
+  }
+), L = o.forwardRef(({ className: l, children: t, ...s }, r) => /* @__PURE__ */ a(
+  h,
+  {
+    ref: r,
+    className: c("scl-select-trigger", l),
+    ...s,
+    children: [
+      t,
+      /* @__PURE__ */ e(x, { asChild: !0, children: /* @__PURE__ */ e(f, { className: "scl-select-icon" }) })
+    ]
+  }
+));
+L.displayName = h.displayName;
+const u = o.forwardRef(({ className: l, ...t }, s) => /* @__PURE__ */ e(
+  m,
+  {
+    ref: s,
+    className: c("scl-select-scroll-button", l),
+    ...t,
+    children: /* @__PURE__ */ e(B, { className: "scl-select-icon" })
+  }
+));
+u.displayName = m.displayName;
+const y = o.forwardRef(({ className: l, ...t }, s) => /* @__PURE__ */ e(
+  d,
+  {
+    ref: s,
+    className: c("scl-select-scroll-button", l),
+    ...t,
+    children: /* @__PURE__ */ e(f, { className: "scl-select-icon" })
+  }
+));
+y.displayName = d.displayName;
+const _ = o.forwardRef(({ className: l, children: t, position: s = "popper", ...r }, w) => /* @__PURE__ */ e(C, { children: /* @__PURE__ */ a(
+  n,
+  {
+    ref: w,
+    className: c("scl-select-content", l),
+    position: s,
+    ...r,
+    children: [
+      /* @__PURE__ */ e(u, {}),
+      /* @__PURE__ */ e(
+        R,
+        {
+          className: c(
+            "scl-select-viewport",
+            s === "popper" && "scl-select-viewport--popper"
+          ),
+          children: t
+        }
+      ),
+      /* @__PURE__ */ e(y, {})
+    ]
+  }
+) }));
+_.displayName = n.displayName;
+const q = o.forwardRef(({ className: l, ...t }, s) => /* @__PURE__ */ e(
+  p,
+  {
+    ref: s,
+    className: c("scl-select-label", l),
+    ...t
+  }
+));
+q.displayName = p.displayName;
+const D = o.forwardRef(({ className: l, children: t, ...s }, r) => /* @__PURE__ */ a(
+  i,
+  {
+    ref: r,
+    className: c("scl-select-item", l),
+    ...s,
+    children: [
+      /* @__PURE__ */ e("span", { className: "scl-select-item__indicator", children: /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(b, { className: "scl-select-item__check" }) }) }),
+      /* @__PURE__ */ e(I, { children: t })
+    ]
+  }
+));
+D.displayName = i.displayName;
+const T = o.forwardRef(({ className: l, ...t }, s) => /* @__PURE__ */ e(
+  N,
+  {
+    ref: s,
+    className: c("scl-select-separator", l),
+    ...t
   }
 ));
-i.displayName = o.displayName;
+T.displayName = N.displayName;
 export {
-  i as Separator
+  G as Select,
+  _ as SelectContent,
+  P as SelectGroup,
+  D as SelectItem,
+  q as SelectLabel,
+  y as SelectScrollDownButton,
+  u as SelectScrollUpButton,
+  T as SelectSeparator,
+  L as SelectTrigger,
+  z as SelectValue
 };

package/dist/index21.js

@@ -1,15 +1,23 @@
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
+import { Root as o } from "./index42.js";
+import * as e from "react";
 import { cx as l } from "./index2.js";
 /* empty css        */
-function m({ className: e, blink: o = !0, ...t }) {
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      className: l("scl-skeleton", o && "scl-skeleton--blink", e),
-      ...t
-    }
-  );
-}
+const i = e.forwardRef(({ className: a, orientation: r = "horizontal", decorative: t = !0, ...s }, m) => /* @__PURE__ */ p(
+  o,
+  {
+    ref: m,
+    decorative: t,
+    orientation: r,
+    className: l(
+      "scl-separator",
+      r === "horizontal" ? "scl-separator--horizontal" : "scl-separator--vertical",
+      a
+    ),
+    ...s
+  }
+));
+i.displayName = o.displayName;
 export {
-  m as Skeleton
+  i as Separator
 };

package/dist/index22.js

@@ -1,26 +1,17 @@
-import { jsxs as h, jsx as m } from "react/jsx-runtime";
-import { Root as o, Track as e, Range as _, Thumb as a } from "./index65.js";
-import * as N from "react";
-import { cx as d } from "./index2.js";
+import { jsx as s } from "react/jsx-runtime";
+import { cx as i } from "./index2.js";
 /* empty css        */
-const g = N.forwardRef(({ className: c, defaultValue: r, value: s, ...i }, t) => {
-  const n = (s == null ? void 0 : s.length) ?? (r == null ? void 0 : r.length) ?? 1;
-  return /* @__PURE__ */ h(
-    o,
+function u({ className: t, blink: e = !0, role: r = "status", ...o }) {
+  return /* @__PURE__ */ s(
+    "div",
     {
-      ref: t,
-      defaultValue: r,
-      value: s,
-      className: d("scl-slider", c),
-      ...i,
-      children: [
-        /* @__PURE__ */ m(e, { className: "scl-slider__track", children: /* @__PURE__ */ m(_, { className: "scl-slider__range" }) }),
-        Array.from({ length: n }).map((l, p) => /* @__PURE__ */ m(a, { className: "scl-slider__thumb" }, p))
-      ]
+      className: i("scl-skeleton", e && "scl-skeleton--blink", t),
+      role: r,
+      "aria-busy": "true",
+      ...o
     }
   );
-});
-g.displayName = o.displayName;
+}
 export {
-  g as Slider
+  u as Skeleton
 };

package/dist/index23.js

@@ -1,18 +1,26 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Root as o, Thumb as a } from "./index73.js";
-import * as c from "react";
-import { cx as i } from "./index2.js";
+import { jsxs as h, jsx as m } from "react/jsx-runtime";
+import { Root as o, Track as e, Range as _, Thumb as a } from "./index53.js";
+import * as N from "react";
+import { cx as d } from "./index2.js";
 /* empty css        */
-const e = c.forwardRef(({ className: r, ...s }, t) => /* @__PURE__ */ m(
-  o,
-  {
-    className: i("scl-switch", r),
-    ...s,
-    ref: t,
-    children: /* @__PURE__ */ m(a, { className: "scl-switch__thumb" })
-  }
-));
-e.displayName = o.displayName;
+const g = N.forwardRef(({ className: c, defaultValue: r, value: s, ...i }, t) => {
+  const n = (s == null ? void 0 : s.length) ?? (r == null ? void 0 : r.length) ?? 1;
+  return /* @__PURE__ */ h(
+    o,
+    {
+      ref: t,
+      defaultValue: r,
+      value: s,
+      className: d("scl-slider", c),
+      ...i,
+      children: [
+        /* @__PURE__ */ m(e, { className: "scl-slider__track", children: /* @__PURE__ */ m(_, { className: "scl-slider__range" }) }),
+        Array.from({ length: n }).map((l, p) => /* @__PURE__ */ m(a, { className: "scl-slider__thumb" }, p))
+      ]
+    }
+  );
+});
+g.displayName = o.displayName;
 export {
-  e as Switch
+  g as Slider
 };

package/dist/index24.js

@@ -1,34 +1,18 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as o from "react";
-import { cx as t } from "./index2.js";
+import { jsx as m } from "react/jsx-runtime";
+import { Root as o, Thumb as a } from "./index50.js";
+import * as c from "react";
+import { cx as i } from "./index2.js";
 /* empty css        */
-const r = o.forwardRef(
-  ({ className: a, ...e }, l) => /* @__PURE__ */ s("div", { className: "scl-table-wrapper", children: /* @__PURE__ */ s("table", { ref: l, className: t("scl-table", a), ...e }) })
-);
-r.displayName = "Table";
-const c = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("thead", { ref: l, className: t("scl-table__header", a), ...e }));
-c.displayName = "TableHeader";
-const d = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("tbody", { ref: l, className: t("scl-table__body", a), ...e }));
-d.displayName = "TableBody";
-const b = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("tfoot", { ref: l, className: t("scl-table__footer", a), ...e }));
-b.displayName = "TableFooter";
-const m = o.forwardRef(
-  ({ className: a, ...e }, l) => /* @__PURE__ */ s("tr", { ref: l, className: t("scl-table__row", a), ...e })
-);
-m.displayName = "TableRow";
-const f = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("th", { ref: l, className: t("scl-table__head", a), ...e }));
-f.displayName = "TableHead";
-const p = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("td", { ref: l, className: t("scl-table__cell", a), ...e }));
-p.displayName = "TableCell";
-const i = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("caption", { ref: l, className: t("scl-table__caption", a), ...e }));
-i.displayName = "TableCaption";
+const e = c.forwardRef(({ className: r, ...s }, t) => /* @__PURE__ */ m(
+  o,
+  {
+    className: i("scl-switch", r),
+    ...s,
+    ref: t,
+    children: /* @__PURE__ */ m(a, { className: "scl-switch__thumb" })
+  }
+));
+e.displayName = o.displayName;
 export {
-  r as Table,
-  d as TableBody,
-  i as TableCaption,
-  p as TableCell,
-  b as TableFooter,
-  f as TableHead,
-  c as TableHeader,
-  m as TableRow
+  e as Switch
 };

package/dist/index25.js

@@ -1,38 +1,34 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Root as l, Content as m, List as i, Trigger as c } from "./index43.js";
-import * as r from "react";
-import { cx as e } from "./index2.js";
+import { jsx as s } from "react/jsx-runtime";
+import * as o from "react";
+import { cx as t } from "./index2.js";
 /* empty css        */
-const y = l, p = r.forwardRef(({ className: s, ...a }, t) => /* @__PURE__ */ o(
-  i,
-  {
-    ref: t,
-    className: e("scl-tabs-list", s),
-    ...a
-  }
-));
-p.displayName = i.displayName;
-const f = r.forwardRef(({ className: s, ...a }, t) => /* @__PURE__ */ o(
-  c,
-  {
-    ref: t,
-    className: e("scl-tabs-trigger", s),
-    ...a
-  }
-));
-f.displayName = c.displayName;
-const n = r.forwardRef(({ className: s, ...a }, t) => /* @__PURE__ */ o(
-  m,
-  {
-    ref: t,
-    className: e("scl-tabs-content", s),
-    ...a
-  }
-));
-n.displayName = m.displayName;
+const r = o.forwardRef(
+  ({ className: a, ...e }, l) => /* @__PURE__ */ s("div", { className: "scl-table-wrapper", children: /* @__PURE__ */ s("table", { ref: l, className: t("scl-table", a), ...e }) })
+);
+r.displayName = "Table";
+const c = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("thead", { ref: l, className: t("scl-table__header", a), ...e }));
+c.displayName = "TableHeader";
+const d = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("tbody", { ref: l, className: t("scl-table__body", a), ...e }));
+d.displayName = "TableBody";
+const b = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("tfoot", { ref: l, className: t("scl-table__footer", a), ...e }));
+b.displayName = "TableFooter";
+const m = o.forwardRef(
+  ({ className: a, ...e }, l) => /* @__PURE__ */ s("tr", { ref: l, className: t("scl-table__row", a), ...e })
+);
+m.displayName = "TableRow";
+const f = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("th", { ref: l, className: t("scl-table__head", a), ...e }));
+f.displayName = "TableHead";
+const p = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("td", { ref: l, className: t("scl-table__cell", a), ...e }));
+p.displayName = "TableCell";
+const i = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ s("caption", { ref: l, className: t("scl-table__caption", a), ...e }));
+i.displayName = "TableCaption";
 export {
-  y as Tabs,
-  n as TabsContent,
-  p as TabsList,
-  f as TabsTrigger
+  r as Table,
+  d as TableBody,
+  i as TableCaption,
+  p as TableCell,
+  b as TableFooter,
+  f as TableHead,
+  c as TableHeader,
+  m as TableRow
 };

package/dist/index26.js

@@ -1,18 +1,38 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as o from "react";
-import { cx as m } from "./index2.js";
+import { jsx as o } from "react/jsx-runtime";
+import { Root as l, Content as m, List as i, Trigger as c } from "./index64.js";
+import * as r from "react";
+import { cx as e } from "./index2.js";
 /* empty css        */
-const s = o.forwardRef(
-  ({ className: r, ...a }, e) => /* @__PURE__ */ t(
-    "textarea",
-    {
-      className: m("scl-textarea", r),
-      ref: e,
-      ...a
-    }
-  )
-);
-s.displayName = "Textarea";
+const y = l, p = r.forwardRef(({ className: s, ...a }, t) => /* @__PURE__ */ o(
+  i,
+  {
+    ref: t,
+    className: e("scl-tabs-list", s),
+    ...a
+  }
+));
+p.displayName = i.displayName;
+const f = r.forwardRef(({ className: s, ...a }, t) => /* @__PURE__ */ o(
+  c,
+  {
+    ref: t,
+    className: e("scl-tabs-trigger", s),
+    ...a
+  }
+));
+f.displayName = c.displayName;
+const n = r.forwardRef(({ className: s, ...a }, t) => /* @__PURE__ */ o(
+  m,
+  {
+    ref: t,
+    className: e("scl-tabs-content", s),
+    ...a
+  }
+));
+n.displayName = m.displayName;
 export {
-  s as Textarea
+  y as Tabs,
+  n as TabsContent,
+  p as TabsList,
+  f as TabsTrigger
 };

package/dist/index27.js

@@ -1,17 +1,19 @@
-import { jsx as e } from "react/jsx-runtime";
-import { Root as o } from "./index52.js";
-import * as l from "react";
+import { jsx as o } from "react/jsx-runtime";
+import * as m from "react";
 import { cx as s } from "./index2.js";
 /* empty css        */
-const p = l.forwardRef(({ className: m, size: r = "default", ...t }, a) => /* @__PURE__ */ e(
-  o,
-  {
-    ref: a,
-    className: s("scl-toggle", `scl-toggle--${r}`, m),
-    ...t
-  }
-));
-p.displayName = o.displayName;
+const x = m.forwardRef(
+  ({ className: r, error: a, "aria-invalid": e, ...t }, i) => /* @__PURE__ */ o(
+    "textarea",
+    {
+      className: s("scl-textarea", a && "scl-textarea--error", r),
+      ref: i,
+      "aria-invalid": e ?? a,
+      ...t
+    }
+  )
+);
+x.displayName = "Textarea";
 export {
-  p as Toggle
+  x as Textarea
 };