mada-design-system 0.0.10 → 0.0.11

package/index.es4.js

@@ -1,12 +1,12 @@
 import { jsx as a, jsxs as u, Fragment as z } from "react/jsx-runtime";
-import { useReactTable as F, flexRender as M } from "./index.es94.js";
-import { Skeleton as b } from "./index.es60.js";
-import { Table as H, TableHeader as _, TableRow as f, TableHead as A, TableBody as B, TableCell as R } from "./index.es63.js";
-import { clsx as E } from "./index.es95.js";
+import { useReactTable as F, flexRender as M } from "./index.es99.js";
+import { Skeleton as b } from "./index.es59.js";
+import { Table as H, TableHeader as _, TableRow as f, TableHead as A, TableBody as B, TableCell as R } from "./index.es62.js";
+import { clsx as E } from "./index.es92.js";
 import S, { useState as Q, useEffect as C } from "react";
-import { useMediaQuery as V } from "./index.es96.js";
+import { useMediaQuery as V } from "./index.es100.js";
 import { PaginationDescription as q, LinesPerPage as G, Pagination as J } from "./index.es12.js";
-import { getCoreRowModel as K, getPaginationRowModel as O } from "./index.es97.js";
+import { getCoreRowModel as K, getPaginationRowModel as O } from "./index.es101.js";
 function le({
   columns: m,
   data: g,

package/index.es40.js

@@ -1,6 +1,6 @@
 import { jsx as y } from "react/jsx-runtime";
-import { cva as m } from "./index.es98.js";
-import { clsx as l } from "./index.es95.js";
+import { cva as m } from "./index.es102.js";
+import { clsx as l } from "./index.es92.js";
 const u = m("flex", {
   variants: {
     direction: {

package/index.es41.js

@@ -1,22 +1,22 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
 import * as n from "@radix-ui/react-navigation-menu";
-import { cva as S } from "./index.es98.js";
+import { cva as S } from "./index.es102.js";
 import * as s from "react";
 import { Content as M } from "@radix-ui/react-dialog";
 import { Slot as R } from "@radix-ui/react-slot";
-import { cn as i } from "./index.es77.js";
-import { strings as f } from "./index.es89.js";
+import { cn as i } from "./index.es76.js";
+import { strings as f } from "./index.es88.js";
 import "./index.es2.js";
 import { Button as u } from "./index.es22.js";
 import { Input as z } from "./index.es35.js";
-import { Sheet as N, SheetTrigger as C, SheetClose as g, SheetContent as j, SheetHeader as T, SheetTitle as I } from "./index.es58.js";
-import y from "./index.es81.js";
-import H from "./index.es126.js";
-import b from "./index.es101.js";
-import _ from "./index.es127.js";
-import A from "./index.es110.js";
-import x from "./index.es120.js";
-import B from "./index.es128.js";
+import { Sheet as N, SheetTrigger as C, SheetClose as g, SheetContent as j, SheetHeader as T, SheetTitle as I } from "./index.es57.js";
+import y from "./index.es80.js";
+import H from "./index.es128.js";
+import b from "./index.es105.js";
+import _ from "./index.es129.js";
+import A from "./index.es113.js";
+import x from "./index.es122.js";
+import B from "./index.es130.js";
 const D = s.forwardRef(({ className: a, children: t, ...r }, o) => {
   const { dir: l } = y();
   return /* @__PURE__ */ d(n.Root, { dir: l, ref: o, className: i("relative z-10 hidden flex-1 items-center sm:flex  ", a), ...r, children: [

package/index.es42.js

@@ -1,7 +1,7 @@
 import { useLayoutEffect as s, useEffect as f } from "react";
-import { setLanguage as o } from "./index.es89.js";
+import { setLanguage as o } from "./index.es88.js";
 import "./index.es2.js";
-import u from "./index.es81.js";
+import u from "./index.es80.js";
 const w = ({ children: c, onLanguageChange: t, onDirChange: r }) => {
   const { lang: i, dir: e } = u();
   return s(() => {

package/index.es43.js

@@ -2,13 +2,13 @@ import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import C from "./index.es3.js";
 import { Button as N } from "./index.es22.js";
 import { useState as O, useRef as V, useCallback as l, useReducer as M } from "react";
-import { strings as o } from "./index.es89.js";
+import { strings as o } from "./index.es88.js";
 import { ShouldRender as S } from "./index.es14.js";
-import $ from "./index.es129.js";
-import G from "./index.es130.js";
-import B from "./index.es131.js";
-import Z from "./index.es101.js";
-import { cn as u } from "./index.es77.js";
+import $ from "./index.es131.js";
+import G from "./index.es132.js";
+import B from "./index.es133.js";
+import Z from "./index.es105.js";
+import { cn as u } from "./index.es76.js";
 const q = {
   "image/png": [".png"],
   "image/jpeg": [".jpg", ".jpeg"],
@@ -103,7 +103,7 @@ function W({
     "div",
     {
       className: u(
-        "group rounded-0 border border-dashed bg-background-neutral-100 p-space-05 text-center hover:border-border-success hover:bg-background-success-25",
+        "group rounded border border-dashed bg-background-neutral-100 p-space-05 text-center hover:border-border-success hover:bg-background-success-25",
         {
           "border-border-success bg-background-success-25": e,
           "pointer-events-none cursor-not-allowed border-border-disabled": t

package/index.es44.js

@@ -1,21 +1,21 @@
 import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import b, { useState as L } from "react";
-import { useMediaQuery as N } from "./index.es96.js";
-import { strings as m } from "./index.es89.js";
+import { useMediaQuery as N } from "./index.es100.js";
+import { strings as m } from "./index.es88.js";
 import "./index.es2.js";
 import { ShouldRender as h } from "./index.es14.js";
 import { Button as f } from "./index.es22.js";
-import z from "./index.es132.js";
+import z from "./index.es134.js";
 import { Collapsible as H, CollapsibleTrigger as O, CollapsibleContent as _ } from "./index.es26.js";
-import A from "./index.es133.js";
-import { RadioGroup as D, RadioGroupItem as E } from "./index.es53.js";
+import A from "./index.es135.js";
+import { RadioGroup as D, RadioGroupItem as E } from "./index.es52.js";
 import { MultiSelect as P } from "./index.es10.js";
 import { ComboboxControlNoForm as Q } from "./index.es7.js";
-import { Sheet as q, SheetTrigger as J, SheetContent as K, SheetHeader as U, SheetTitle as W, SheetBody as X, SheetFooter as Y, SheetClose as Z } from "./index.es58.js";
-import ee from "./index.es134.js";
+import { Sheet as q, SheetTrigger as J, SheetContent as K, SheetHeader as U, SheetTitle as W, SheetBody as X, SheetFooter as Y, SheetClose as Z } from "./index.es57.js";
+import ee from "./index.es136.js";
 import { Checkbox as re } from "./index.es25.js";
-import le from "./index.es81.js";
-import { cn as se } from "./index.es77.js";
+import le from "./index.es80.js";
+import { cn as se } from "./index.es76.js";
 const ie = (l) => l < 10 ? "0" + (l == null ? void 0 : l.toString()) : l == null ? void 0 : l.toString(), $ = b.createContext(null), oe = (l) => {
   const [s, d] = L(), a = N("(max-width: 767px)");
   return { value: s, upsert: ({ name: o, selectedValue: i }) => {

package/index.es45.js

@@ -1,19 +1,19 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import h from "./index.es135.js";
-import g from "./index.es136.js";
-import b from "./index.es137.js";
-import x from "./index.es138.js";
-import v from "./index.es139.js";
-import N from "./index.es140.js";
+import h from "./index.es137.js";
+import g from "./index.es138.js";
+import b from "./index.es139.js";
+import x from "./index.es140.js";
+import v from "./index.es141.js";
+import N from "./index.es142.js";
 import "./index.es2.js";
-import w from "./index.es78.js";
-import { strings as i } from "./index.es89.js";
-import y from "./index.es141.js";
-import k from "./index.es142.js";
-import F from "./index.es143.js";
-import z from "./index.es144.js";
+import w from "./index.es77.js";
+import { strings as i } from "./index.es88.js";
+import y from "./index.es143.js";
+import k from "./index.es144.js";
+import F from "./index.es145.js";
+import z from "./index.es146.js";
 import { Link as p } from "./index.es49.js";
-import { cn as u } from "./index.es77.js";
+import { cn as u } from "./index.es76.js";
 import { ShouldRender as f } from "./index.es14.js";
 import { Button as c } from "./index.es22.js";
 const K = ({ colors: t = "default", ...l }) => {

package/index.es46.js

@@ -1,7 +1,7 @@
 import { jsxs as c, Fragment as f, jsx as t } from "react/jsx-runtime";
 import * as l from "react";
-import E from "./index.es109.js";
-import z from "./index.es108.js";
+import E from "./index.es112.js";
+import z from "./index.es111.js";
 import { Button as m } from "./index.es22.js";
 function R({ children: u, scrollAmount: h = 200, margin: a = 0, className: v = "", buttonClassName: i = "" }) {
   const [p, b] = l.useState(!1), [S, w] = l.useState(!1), o = l.useRef(null), r = l.useCallback(() => {

package/index.es47.js

@@ -1,22 +1,22 @@
 import { jsx as e, jsxs as f } from "react/jsx-runtime";
-import { cva as v } from "./index.es98.js";
+import { cva as v } from "./index.es102.js";
 import { createContext as x, useState as y, useEffect as g, useContext as S } from "react";
-import { THEME as n } from "./index.es145.js";
+import { THEME as n } from "./index.es95.js";
 import "./index.es2.js";
-import { cn as m, formatterTime as h } from "./index.es77.js";
-import C from "./index.es146.js";
-import N from "./index.es147.js";
-import T from "./index.es141.js";
-import z from "./index.es142.js";
-import D from "./index.es143.js";
-import k from "./index.es144.js";
-import { useThemeStore as I } from "./index.es88.js";
-import H from "./index.es148.js";
-import A from "./index.es149.js";
-import w from "./index.es81.js";
-import G from "./index.es78.js";
+import { cn as m, formatterTime as h } from "./index.es76.js";
+import C from "./index.es147.js";
+import N from "./index.es148.js";
+import T from "./index.es143.js";
+import z from "./index.es144.js";
+import D from "./index.es145.js";
+import k from "./index.es146.js";
+import { useThemeStore as I } from "./index.es87.js";
+import H from "./index.es149.js";
+import A from "./index.es150.js";
+import w from "./index.es80.js";
+import G from "./index.es77.js";
 import { Button as l } from "./index.es22.js";
-import { strings as s } from "./index.es89.js";
+import { strings as s } from "./index.es88.js";
 const L = v("h-space-07 px-space-06 py-space-01 flex [&>svg]:size-[20px] items-center md:justify-between justify-center", {
   variants: {
     colors: {

package/index.es48.js

@@ -1,7 +1,7 @@
 import { jsx as o, jsxs as v, Fragment as P } from "react/jsx-runtime";
 import * as g from "react";
 import * as C from "recharts";
-import { cn as i } from "./index.es77.js";
+import { cn as i } from "./index.es76.js";
 const I = { light: "", dark: ".dark" }, j = g.createContext(null);
 function $() {
   const s = g.useContext(j);

package/index.es49.js

@@ -1,8 +1,8 @@
 import { jsx as u } from "react/jsx-runtime";
 import { Slot as f } from "@radix-ui/react-slot";
-import { cva as p } from "./index.es98.js";
+import { cva as p } from "./index.es102.js";
 import * as m from "react";
-import { cn as x } from "./index.es77.js";
+import { cn as x } from "./index.es76.js";
 const v = p(
   "inline-flex items-center gap-space-02 justify-center transition-colors focus:outline focus:outline-2 focus:outline-offset-1",
   {

package/index.es50.js

@@ -1,81 +1,25 @@
-import { jsx as h } from "react/jsx-runtime";
-import m from "./index.es150.js";
-import b from "./index.es151.js";
-import L from "./index.es81.js";
-const w = ({ seriesData: e, title: l, tooltipFormatter: r, chartOptions: d, width: o = 200, height: t = 200, enableTooltip: p, center: c }) => {
-  var a, i;
-  const { dir: g } = L(), f = g === "rtl", n = (s) => f ? [...s].reverse() : s, u = {
-    chart: {
-      type: "pie",
-      plotBorderWidth: null,
-      plotShadow: !1,
-      width: o,
-      height: t,
-      margin: [0, 0, 0, 0],
-      spacing: [0, 0, 0, 0],
-      spacingTop: 0,
-      spacingBottom: 0,
-      spacingRight: 0,
-      spacingLeft: 0,
-      backgroundColor: "transparent",
-      style: { margin: "0 auto" },
-      ...d
-    },
-    title: {
-      text: l,
-      floating: !0,
-      align: "center",
-      verticalAlign: "middle",
-      y: 60,
-      x: 50,
-      width: 100,
-      useHTML: !0,
-      style: {}
-    },
-    tooltip: {
-      enabled: p,
-      followPointer: !1,
-      formatter: r || null
-    },
-    plotOptions: {
-      pie: {
-        size: o > t ? o : t,
-        states: {
-          hover: {
-            enabled: !0,
-            halo: {
-              size: 0,
-              opacity: 0.25
-            }
-          }
-        },
-        allowPointSelect: !1,
-        cursor: "pointer",
-        dataLabels: { enabled: !1 },
-        showInLegend: !1,
-        startAngle: -90,
-        endAngle: 90,
-        center: c ?? ["50%", "147%"],
-        innerSize: "85%",
-        borderWidth: 0,
-        borderRadius: 0
-      }
-    },
-    series: [
-      {
-        ...e[0],
-        data: n(((a = e[0]) == null ? void 0 : a.data) || []),
-        colors: (i = e[0]) != null && i.colors ? n(e[0].colors) : void 0,
-        borderWidth: 0,
-        groupPadding: 0,
-        pointPadding: 0,
-        grouping: !1,
-        shadow: !1
-      }
-    ]
-  };
-  return /* @__PURE__ */ h(b, { highcharts: m, options: u });
-};
+import { jsx as t } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-popover";
+import * as s from "react";
+import { cn as n } from "./index.es76.js";
+const f = o.Root, c = o.Trigger, v = o.Arrow, g = o.Close, m = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+  o.Content,
+  {
+    ref: i,
+    align: a,
+    sideOffset: r,
+    className: n(
+      "z-50 rounded-2 border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      e
+    ),
+    ...d
+  }
+) }));
+m.displayName = o.Content.displayName;
 export {
-  w as PieChart
+  f as Popover,
+  v as PopoverArrow,
+  g as PopoverClose,
+  m as PopoverContent,
+  c as PopoverTrigger
 };

package/index.es51.js

@@ -1,25 +1,40 @@
-import { jsx as t } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-popover";
-import * as s from "react";
-import { cn as n } from "./index.es77.js";
-const f = o.Root, c = o.Trigger, v = o.Arrow, g = o.Close, m = s.forwardRef(({ className: e, align: a = "center", sideOffset: r = 4, ...d }, i) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
-  o.Content,
-  {
-    ref: i,
-    align: a,
-    sideOffset: r,
-    className: n(
-      "z-50 rounded-2 border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      e
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-progress";
+import * as n from "react";
+import { cn as s } from "./index.es76.js";
+const c = n.forwardRef(
+  ({ className: d, value: a, colors: o = "bg-primary", rounded: t, icon: i, ...l }, m) => /* @__PURE__ */ f("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ r(
+      e.Root,
+      {
+        ref: m,
+        "aria-label": "progress",
+        className: s("relative h-space-02 w-full overflow-hidden bg-background-secondary", t && "rounded-full", d),
+        ...l,
+        children: /* @__PURE__ */ r(
+          e.Indicator,
+          {
+            className: s("h-full w-full flex-1 transition-all", t && "rounded-full", o),
+            style: {
+              transform: (l == null ? void 0 : l.dir) === "rtl" ? `translateX(${100 - (a || 0)}%)` : `translateX(-${100 - (a || 0)}%)`
+            }
+          }
+        )
+      }
     ),
-    ...d
-  }
-) }));
-m.displayName = o.Content.displayName;
+    !!i && /* @__PURE__ */ r(
+      "div",
+      {
+        className: "absolute top-1/2 -translate-y-1/2 duration-200",
+        style: {
+          [(l == null ? void 0 : l.dir) === "rtl" ? "right" : "left"]: `calc(${a}% + -12px)`
+        },
+        children: i
+      }
+    )
+  ] })
+);
+c.displayName = e.Root.displayName;
 export {
-  f as Popover,
-  v as PopoverArrow,
-  g as PopoverClose,
-  m as PopoverContent,
-  c as PopoverTrigger
+  c as Progress
 };

package/index.es52.js

@@ -1,40 +1,41 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-progress";
-import * as n from "react";
-import { cn as s } from "./index.es77.js";
-const c = n.forwardRef(
-  ({ className: d, value: a, colors: o = "bg-primary", rounded: t, icon: i, ...l }, m) => /* @__PURE__ */ f("div", { className: "relative w-full", children: [
-    /* @__PURE__ */ r(
-      e.Root,
-      {
-        ref: m,
-        "aria-label": "progress",
-        className: s("relative h-space-02 w-full overflow-hidden bg-background-secondary", t && "rounded-full", d),
-        ...l,
-        children: /* @__PURE__ */ r(
-          e.Indicator,
-          {
-            className: s("h-full w-full flex-1 transition-all", t && "rounded-full", o),
-            style: {
-              transform: (l == null ? void 0 : l.dir) === "rtl" ? `translateX(${100 - (a || 0)}%)` : `translateX(-${100 - (a || 0)}%)`
-            }
-          }
-        )
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-radio-group";
+import * as t from "react";
+import { cva as p } from "./index.es102.js";
+import { cn as s } from "./index.es76.js";
+import m from "./index.es126.js";
+const h = p(
+  "flex aspect-square h-space-05 w-space-05 rounded-full enabled:active:data-[state=unchecked]:bg-control-pressed border border-control-border enabled:hover:bg-control-ripple-effect focus:ring-2 focus:ring-border-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-border-disabled disabled:data-[state=checked]:text-control-disabled",
+  {
+    variants: {
+      colors: {
+        primary: `data-[state=checked]:border-control-primary-checked data-[state=checked]:text-control-primary-checked
+                enabled:hover:data-[state=checked]:border-control-primary-hovered enabled:hover:data-[state=checked]:text-control-primary-hovered
+                enabled:active:data-[state=checked]:border-control-primary-pressed active:data-[state=checked]:text-control-primary-pressed
+                `,
+        neutral: `data-[state=checked]:border-control-neutral-checked data-[state=checked]:text-control-neutral-checked
+                enabled:hover:data-[state=checked]:border-control-neutral-hovered enabled:hover:data-[state=checked]:text-control-neutral-hovered
+                enabled:active:data-[state=checked]:border-control-neutral-pressed enabled:active:data-[state=checked]:text-control-neutral-pressed
+                `
       }
-    ),
-    !!i && /* @__PURE__ */ r(
-      "div",
-      {
-        className: "absolute top-1/2 -translate-y-1/2 duration-200",
-        style: {
-          [(l == null ? void 0 : l.dir) === "rtl" ? "right" : "left"]: `calc(${a}% + -12px)`
-        },
-        children: i
-      }
-    )
-  ] })
-);
-c.displayName = e.Root.displayName;
+    },
+    defaultVariants: {
+      colors: "primary"
+    }
+  }
+), l = t.createContext({
+  colors: "primary"
+}), u = t.forwardRef(({ className: a, colors: o, children: c, ...d }, n) => /* @__PURE__ */ e(r.Root, { className: s("grid gap-2", a), ...d, ref: n, children: /* @__PURE__ */ i(l.Provider, { value: { colors: o }, children: [
+  " ",
+  c
+] }) }));
+u.displayName = r.Root.displayName;
+const b = t.forwardRef(({ className: a, ...o }, c) => {
+  const d = t.useContext(l);
+  return /* @__PURE__ */ e("div", { className: "flex size-space-06 items-center justify-center", children: /* @__PURE__ */ e(r.Item, { ref: c, className: s(h({ colors: d.colors, className: a })), ...o, children: /* @__PURE__ */ e(r.Indicator, { className: "flex h-full w-full items-center justify-center rounded-full", children: /* @__PURE__ */ e(m, { className: "h-[15px] w-[15px]" }) }) }) });
+});
+b.displayName = r.Item.displayName;
 export {
-  c as Progress
+  u as RadioGroup,
+  b as RadioGroupItem
 };

package/index.es53.js

@@ -1,41 +1,30 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-radio-group";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-scroll-area";
 import * as t from "react";
-import { cva as p } from "./index.es98.js";
-import { cn as s } from "./index.es77.js";
-import m from "./index.es124.js";
-const h = p(
-  "flex aspect-square h-space-05 w-space-05 rounded-full enabled:active:data-[state=unchecked]:bg-control-pressed border border-control-border enabled:hover:bg-control-ripple-effect focus:ring-2 focus:ring-border-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:border-border-disabled disabled:data-[state=checked]:text-control-disabled",
+import { cn as s } from "./index.es76.js";
+const m = t.forwardRef(({ className: o, children: l, ...a }, c) => /* @__PURE__ */ i(r.Root, { ref: c, className: s("relative overflow-hidden", o), ...a, children: [
+  /* @__PURE__ */ e(r.Viewport, { className: "h-full w-full rounded-[inherit]", children: l }),
+  /* @__PURE__ */ e(d, {}),
+  /* @__PURE__ */ e(r.Corner, {})
+] }));
+m.displayName = r.Root.displayName;
+const d = t.forwardRef(({ className: o, orientation: l = "vertical", ...a }, c) => /* @__PURE__ */ e(
+  r.ScrollAreaScrollbar,
   {
-    variants: {
-      colors: {
-        primary: `data-[state=checked]:border-control-primary-checked data-[state=checked]:text-control-primary-checked
-                enabled:hover:data-[state=checked]:border-control-primary-hovered enabled:hover:data-[state=checked]:text-control-primary-hovered
-                enabled:active:data-[state=checked]:border-control-primary-pressed active:data-[state=checked]:text-control-primary-pressed
-                `,
-        neutral: `data-[state=checked]:border-control-neutral-checked data-[state=checked]:text-control-neutral-checked
-                enabled:hover:data-[state=checked]:border-control-neutral-hovered enabled:hover:data-[state=checked]:text-control-neutral-hovered
-                enabled:active:data-[state=checked]:border-control-neutral-pressed enabled:active:data-[state=checked]:text-control-neutral-pressed
-                `
-      }
-    },
-    defaultVariants: {
-      colors: "primary"
-    }
+    ref: c,
+    orientation: l,
+    className: s(
+      "flex touch-none select-none transition-colors",
+      l === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      o
+    ),
+    ...a,
+    children: /* @__PURE__ */ e(r.ScrollAreaThumb, { className: s("relative rounded-full bg-border", l === "vertical" && "flex-1") })
   }
-), l = t.createContext({
-  colors: "primary"
-}), u = t.forwardRef(({ className: a, colors: o, children: c, ...d }, n) => /* @__PURE__ */ e(r.Root, { className: s("grid gap-2", a), ...d, ref: n, children: /* @__PURE__ */ i(l.Provider, { value: { colors: o }, children: [
-  " ",
-  c
-] }) }));
-u.displayName = r.Root.displayName;
-const b = t.forwardRef(({ className: a, ...o }, c) => {
-  const d = t.useContext(l);
-  return /* @__PURE__ */ e("div", { className: "flex size-space-06 items-center justify-center", children: /* @__PURE__ */ e(r.Item, { ref: c, className: s(h({ colors: d.colors, className: a })), ...o, children: /* @__PURE__ */ e(r.Indicator, { className: "flex h-full w-full items-center justify-center rounded-full", children: /* @__PURE__ */ e(m, { className: "h-[15px] w-[15px]" }) }) }) });
-});
-b.displayName = r.Item.displayName;
+));
+d.displayName = r.ScrollAreaScrollbar.displayName;
 export {
-  u as RadioGroup,
-  b as RadioGroupItem
+  m as ScrollArea,
+  d as ScrollBar
 };