@arcadeai/design-system 3.36.2 → 3.37.0

package/dist/components/index.js

@@ -212,17 +212,17 @@ import { Message as yn, MessageAction as In, MessageActions as wn, MessageAvatar
 import { PromptInput as On, PromptInputAction as Rn, PromptInputActions as Vn, PromptInputTextarea as zn } from "./ui/molecules/prompt-input.js";
 import { R as Nn, T as Zn } from "../toolkit-card-CB1oiaei.js";
 import { StepsProgress as Un } from "./ui/molecules/steps-progress.js";
-import { SuggestionCard as Xn } from "./ui/molecules/suggestion-card.js";
-import { ToolAuthorization as jn, ToolAuthorizationArgs as Qn, ToolAuthorizationContent as Kn, ToolAuthorizationHeader as _n, ToolAuthorizationMessage as $n } from "./ui/molecules/tool-authorization.js";
-import { ToolCallAccordion as rf, ToolCallAccordionContent as ef, ToolCallAccordionItem as tf, ToolCallAccordionTrigger as af } from "./ui/molecules/tool-call-accordion.js";
-import { ToolCard as mf } from "./ui/molecules/tool-card.js";
-import { UserNav as nf } from "./ui/molecules/user-nav.js";
-import { ChatPageSkeleton as xf } from "./ui/pages/chat-page-skeleton.js";
-import { LoginPage as sf } from "./ui/pages/login-page.js";
-import { AuthTemplate as uf, AuthTemplateCard as Cf, AuthTemplateContent as cf, AuthTemplateDefaultBackground as Tf, AuthTemplateDescription as Sf, AuthTemplateFooter as hf, AuthTemplateGridOverlay as bf, AuthTemplateHeader as Af, AuthTemplateLegal as Mf, AuthTemplateLegalLink as Df, AuthTemplateLogo as kf, AuthTemplatePrompt as Bf, AuthTemplatePromptLink as Gf, AuthTemplateTitle as Pf, AuthTemplateVideoBackground as vf } from "./ui/templates/auth-template.js";
-import { ChatTemplate as yf, ChatTemplateBody as If, ChatTemplateFooter as wf, ChatTemplateHeader as Hf, ChatTemplateHeaderGroup as Ef, ChatTemplateOverview as Ff, ChatTemplateOverviewSubtitle as Of, ChatTemplateOverviewTitle as Rf, ChatTemplateSuggestions as Vf } from "./ui/templates/chat-template.js";
-import { ChatBodySkeleton as Wf, ChatContentSkeleton as Nf, ChatFooterSkeleton as Zf, ChatHeaderSkeleton as qf, ChatSidebarSkeleton as Uf } from "./ui/templates/chat-template-skeletons.js";
-import { ErrorTemplate as Xf, ErrorTemplateActions as Yf, ErrorTemplateContent as jf, ErrorTemplateDescription as Qf, ErrorTemplateIcon as Kf, ErrorTemplateLogo as _f, ErrorTemplateTitle as $f, ErrorTemplateUrl as ox } from "./ui/templates/error-template.js";
+import { SuggestionCard as Xn, SuggestionCardSkeleton as Yn } from "./ui/molecules/suggestion-card.js";
+import { ToolAuthorization as Qn, ToolAuthorizationArgs as Kn, ToolAuthorizationContent as _n, ToolAuthorizationHeader as $n, ToolAuthorizationMessage as of } from "./ui/molecules/tool-authorization.js";
+import { ToolCallAccordion as ef, ToolCallAccordionContent as tf, ToolCallAccordionItem as af, ToolCallAccordionTrigger as pf } from "./ui/molecules/tool-call-accordion.js";
+import { ToolCard as lf } from "./ui/molecules/tool-card.js";
+import { UserNav as ff } from "./ui/molecules/user-nav.js";
+import { ChatPageSkeleton as df } from "./ui/pages/chat-page-skeleton.js";
+import { LoginPage as gf } from "./ui/pages/login-page.js";
+import { AuthTemplate as Cf, AuthTemplateCard as cf, AuthTemplateContent as Tf, AuthTemplateDefaultBackground as Sf, AuthTemplateDescription as hf, AuthTemplateFooter as bf, AuthTemplateGridOverlay as Af, AuthTemplateHeader as Mf, AuthTemplateLegal as Df, AuthTemplateLegalLink as kf, AuthTemplateLogo as Bf, AuthTemplatePrompt as Gf, AuthTemplatePromptLink as Pf, AuthTemplateTitle as vf, AuthTemplateVideoBackground as Lf } from "./ui/templates/auth-template.js";
+import { ChatTemplate as If, ChatTemplateBody as wf, ChatTemplateFooter as Hf, ChatTemplateHeader as Ef, ChatTemplateHeaderGroup as Ff, ChatTemplateOverview as Of, ChatTemplateOverviewSubtitle as Rf, ChatTemplateOverviewTitle as Vf, ChatTemplateSuggestions as zf } from "./ui/templates/chat-template.js";
+import { ChatBodySkeleton as Nf, ChatContentSkeleton as Zf, ChatFooterSkeleton as qf, ChatHeaderSkeleton as Uf, ChatSidebarSkeleton as Jf } from "./ui/templates/chat-template-skeletons.js";
+import { ErrorTemplate as Yf, ErrorTemplateActions as jf, ErrorTemplateContent as Qf, ErrorTemplateDescription as Kf, ErrorTemplateIcon as _f, ErrorTemplateLogo as $f, ErrorTemplateTitle as ox, ErrorTemplateUrl as rx } from "./ui/templates/error-template.js";
 export {
   e as Accordion,
   t as AccordionContent,
@@ -254,21 +254,21 @@ export {
   Hr as Atlassian,
   Fr as Attio,
   Rr as Auth0,
-  uf as AuthTemplate,
-  Cf as AuthTemplateCard,
-  cf as AuthTemplateContent,
-  Tf as AuthTemplateDefaultBackground,
-  Sf as AuthTemplateDescription,
-  hf as AuthTemplateFooter,
-  bf as AuthTemplateGridOverlay,
-  Af as AuthTemplateHeader,
-  Mf as AuthTemplateLegal,
-  Df as AuthTemplateLegalLink,
-  kf as AuthTemplateLogo,
-  Bf as AuthTemplatePrompt,
-  Gf as AuthTemplatePromptLink,
-  Pf as AuthTemplateTitle,
-  vf as AuthTemplateVideoBackground,
+  Cf as AuthTemplate,
+  cf as AuthTemplateCard,
+  Tf as AuthTemplateContent,
+  Sf as AuthTemplateDefaultBackground,
+  hf as AuthTemplateDescription,
+  bf as AuthTemplateFooter,
+  Af as AuthTemplateGridOverlay,
+  Mf as AuthTemplateHeader,
+  Df as AuthTemplateLegal,
+  kf as AuthTemplateLegalLink,
+  Bf as AuthTemplateLogo,
+  Gf as AuthTemplatePrompt,
+  Pf as AuthTemplatePromptLink,
+  vf as AuthTemplateTitle,
+  Lf as AuthTemplateVideoBackground,
   k as Avatar,
   B as AvatarFallback,
   G as AvatarImage,
@@ -312,28 +312,28 @@ export {
   xo as ChartTooltip,
   so as ChartTooltipContent,
   un as ChatAssistantMessage,
-  Wf as ChatBodySkeleton,
+  Nf as ChatBodySkeleton,
   uo as ChatContainerContent,
   Co as ChatContainerRoot,
   co as ChatContainerScrollAnchor,
-  Nf as ChatContentSkeleton,
-  Zf as ChatFooterSkeleton,
-  qf as ChatHeaderSkeleton,
+  Zf as ChatContentSkeleton,
+  qf as ChatFooterSkeleton,
+  Uf as ChatHeaderSkeleton,
   sn as ChatHistoryItem,
   Cn as ChatMessageList,
   cn as ChatMessageListSkeleton,
-  xf as ChatPageSkeleton,
-  Uf as ChatSidebarSkeleton,
+  df as ChatPageSkeleton,
+  Jf as ChatSidebarSkeleton,
   Tn as ChatStreamingIndicator,
-  yf as ChatTemplate,
-  If as ChatTemplateBody,
-  wf as ChatTemplateFooter,
-  Hf as ChatTemplateHeader,
-  Ef as ChatTemplateHeaderGroup,
-  Ff as ChatTemplateOverview,
-  Of as ChatTemplateOverviewSubtitle,
-  Rf as ChatTemplateOverviewTitle,
-  Vf as ChatTemplateSuggestions,
+  If as ChatTemplate,
+  wf as ChatTemplateBody,
+  Hf as ChatTemplateFooter,
+  Ef as ChatTemplateHeader,
+  Ff as ChatTemplateHeaderGroup,
+  Of as ChatTemplateOverview,
+  Rf as ChatTemplateOverviewSubtitle,
+  Vf as ChatTemplateOverviewTitle,
+  zf as ChatTemplateSuggestions,
   Sn as ChatUserMessage,
   So as Checkbox,
   fe as Claude,
@@ -403,14 +403,14 @@ export {
   Qe as Ebay,
   Gn as EmptyState,
   vn as ErrorState,
-  Xf as ErrorTemplate,
-  Yf as ErrorTemplateActions,
-  jf as ErrorTemplateContent,
-  Qf as ErrorTemplateDescription,
-  Kf as ErrorTemplateIcon,
-  _f as ErrorTemplateLogo,
-  $f as ErrorTemplateTitle,
-  ox as ErrorTemplateUrl,
+  Yf as ErrorTemplate,
+  jf as ErrorTemplateActions,
+  Qf as ErrorTemplateContent,
+  Kf as ErrorTemplateDescription,
+  _f as ErrorTemplateIcon,
+  $f as ErrorTemplateLogo,
+  ox as ErrorTemplateTitle,
+  rx as ErrorTemplateUrl,
   _e as Evernote,
   ot as Exa,
   et as Factorial,
@@ -456,7 +456,7 @@ export {
   Ca as Linear,
   Ta as Linkedin,
   pi as Loader,
-  sf as LoginPage,
+  gf as LoginPage,
   ha as Luma,
   Aa as Mailchimp,
   ii as Markdown,
@@ -580,6 +580,7 @@ export {
   Un as StepsProgress,
   am as Stripe,
   Xn as SuggestionCard,
+  Yn as SuggestionCardSkeleton,
   Fl as Switch,
   Rl as Table,
   Vl as TableBody,
@@ -598,16 +599,16 @@ export {
   lm as Ticktick,
   fm as Tiktok,
   on as Toggle,
-  jn as ToolAuthorization,
-  Qn as ToolAuthorizationArgs,
-  Kn as ToolAuthorizationContent,
-  _n as ToolAuthorizationHeader,
-  $n as ToolAuthorizationMessage,
-  rf as ToolCallAccordion,
-  ef as ToolCallAccordionContent,
-  tf as ToolCallAccordionItem,
-  af as ToolCallAccordionTrigger,
-  mf as ToolCard,
+  Qn as ToolAuthorization,
+  Kn as ToolAuthorizationArgs,
+  _n as ToolAuthorizationContent,
+  $n as ToolAuthorizationHeader,
+  of as ToolAuthorizationMessage,
+  ef as ToolCallAccordion,
+  tf as ToolCallAccordionContent,
+  af as ToolCallAccordionItem,
+  pf as ToolCallAccordionTrigger,
+  lf as ToolCard,
   Zn as ToolkitCard,
   tn as Tooltip,
   an as TooltipContent,
@@ -616,7 +617,7 @@ export {
   dm as Trello,
   gm as Twilio,
   Cm as Twitch,
-  nf as UserNav,
+  ff as UserNav,
   Tm as Vercel,
   hm as VercelLogotype,
   nn as ViewToolsControl,

package/dist/components/ui/atoms/loader.d.ts

@@ -3,7 +3,7 @@ type LoaderProps = {
     className?: string;
     size?: LoaderSize;
     text?: string;
-    variant?: "circular" | "classic" | "pulse" | "pulse-dot" | "dots" | "typing" | "wave" | "bars" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots";
+    variant?: "circular" | "classic" | "pulse" | "pulse-dot" | "dots" | "typing" | "wave" | "bars" | "terminal" | "text-blink" | "text-shimmer" | "loading-dots" | "braille";
 };
 declare function Loader({ variant, size, text, className, }: LoaderProps): import("react/jsx-runtime").JSX.Element;
 export type { LoaderProps };

package/dist/components/ui/atoms/loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/atoms/loader.tsx"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EACJ,UAAU,GACV,SAAS,GACT,OAAO,GACP,WAAW,GACX,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,UAAU,GACV,YAAY,GACZ,cAAc,GACd,cAAc,CAAC;CACpB,CAAC;AA4XF,iBAAS,MAAM,CAAC,EACd,OAAoB,EACpB,IAAW,EACX,IAAI,EACJ,SAAS,GACV,EAAE,WAAW,2CA+Bb;AAED,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../../../../lib/components/ui/atoms/loader.tsx"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EACJ,UAAU,GACV,SAAS,GACT,OAAO,GACP,WAAW,GACX,MAAM,GACN,QAAQ,GACR,MAAM,GACN,MAAM,GACN,UAAU,GACV,YAAY,GACZ,cAAc,GACd,cAAc,GACd,SAAS,CAAC;CACf,CAAC;AA8ZF,iBAAS,MAAM,CAAC,EACd,OAAoB,EACpB,IAAW,EACX,IAAI,EACJ,SAAS,GACV,EAAE,WAAW,2CAiCb;AAED,YAAY,EAAE,WAAW,EAAE,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/ui/atoms/loader.js

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
 import { cn as a } from "../../../lib/utils.js";
 function m({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
   return /* @__PURE__ */ n(
@@ -10,7 +10,7 @@ function m({
       className: a(
         "animate-spin rounded-full border-2 border-primary border-t-transparent",
         { sm: "size-4", md: "size-5", lg: "size-6" }[e],
-        t
+        i
       ),
       children: /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading" })
     }
@@ -30,16 +30,16 @@ const c = {
   lg: "14px"
 };
 function g({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "size-4", md: "size-5", lg: "size-6" }, s = {
+  const t = { sm: "size-4", md: "size-5", lg: "size-6" }, s = {
     sm: { height: "6px", width: "1.5px" },
     md: { height: "8px", width: "2px" },
     lg: { height: "10px", width: "2.5px" }
   };
-  return /* @__PURE__ */ d("div", { className: a("relative", i[e], t), children: [
-    /* @__PURE__ */ n("div", { className: "absolute h-full w-full", children: Array.from({ length: 12 }, (l, r) => /* @__PURE__ */ n(
+  return /* @__PURE__ */ l("div", { className: a("relative", t[e], i), children: [
+    /* @__PURE__ */ n("div", { className: "absolute h-full w-full", children: Array.from({ length: 12 }, (d, r) => /* @__PURE__ */ n(
       "div",
       {
         className: "absolute animate-[spinner-fade_1.2s_linear_infinite] rounded-full bg-primary",
@@ -61,16 +61,16 @@ function g({
   ] });
 }
 function p({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  return /* @__PURE__ */ d("div", { className: a("relative", { sm: "size-4", md: "size-5", lg: "size-6" }[e], t), children: [
+  return /* @__PURE__ */ l("div", { className: a("relative", { sm: "size-4", md: "size-5", lg: "size-6" }[e], i), children: [
     /* @__PURE__ */ n("div", { className: "absolute inset-0 animate-[thin-pulse_1.5s_ease-in-out_infinite] rounded-full border-2 border-primary" }),
     /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading" })
   ] });
 }
 function x({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
   return /* @__PURE__ */ n(
@@ -79,32 +79,32 @@ function x({
       className: a(
         "animate-[pulse-dot_1.2s_ease-in-out_infinite] rounded-full bg-primary",
         { sm: "size-1", md: "size-2", lg: "size-3" }[e],
-        t
+        i
       ),
       children: /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading" })
     }
   );
 }
 function f({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "h-1.5 w-1.5", md: "h-2 w-2", lg: "h-2.5 w-2.5" };
-  return /* @__PURE__ */ d(
+  const t = { sm: "h-1.5 w-1.5", md: "h-2 w-2", lg: "h-2.5 w-2.5" };
+  return /* @__PURE__ */ l(
     "div",
     {
       className: a(
         "flex items-center space-x-1",
         { sm: "h-4", md: "h-5", lg: "h-6" }[e],
-        t
+        i
       ),
       children: [
-        Array.from({ length: 3 }, (l, r) => /* @__PURE__ */ n(
+        Array.from({ length: 3 }, (d, r) => /* @__PURE__ */ n(
           "div",
           {
             className: a(
               "animate-[bounce-dots_1.4s_ease-in-out_infinite] rounded-full bg-primary",
-              i[e]
+              t[e]
             ),
             style: { animationDelay: `${r * 160}ms` }
           },
@@ -116,25 +116,25 @@ function f({
   );
 }
 function _({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "h-1 w-1", md: "h-1.5 w-1.5", lg: "h-2 w-2" };
-  return /* @__PURE__ */ d(
+  const t = { sm: "h-1 w-1", md: "h-1.5 w-1.5", lg: "h-2 w-2" };
+  return /* @__PURE__ */ l(
     "div",
     {
       className: a(
         "flex items-center space-x-1",
         { sm: "h-4", md: "h-5", lg: "h-6" }[e],
-        t
+        i
       ),
       children: [
-        Array.from({ length: 3 }, (l, r) => /* @__PURE__ */ n(
+        Array.from({ length: 3 }, (d, r) => /* @__PURE__ */ n(
           "div",
           {
             className: a(
               "animate-[typing_1s_infinite] rounded-full bg-primary",
-              i[e]
+              t[e]
             ),
             style: { animationDelay: `${r * 250}ms` }
           },
@@ -146,21 +146,21 @@ function _({
   );
 }
 function y({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "w-0.5", md: "w-0.5", lg: "w-1" }, s = { sm: "h-4", md: "h-5", lg: "h-6" }, l = {
+  const t = { sm: "w-0.5", md: "w-0.5", lg: "w-1" }, s = { sm: "h-4", md: "h-5", lg: "h-6" }, d = {
     sm: ["6px", "9px", "12px", "9px", "6px"],
     md: ["8px", "12px", "16px", "12px", "8px"],
     lg: ["10px", "15px", "20px", "15px", "10px"]
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ l(
     "div",
     {
       className: a(
         "flex items-center gap-0.5",
         s[e],
-        t
+        i
       ),
       children: [
         Array.from({ length: 5 }, (r, o) => /* @__PURE__ */ n(
@@ -168,11 +168,11 @@ function y({
           {
             className: a(
               "animate-[wave_1s_ease-in-out_infinite] rounded-full bg-primary",
-              i[e]
+              t[e]
             ),
             style: {
               animationDelay: `${o * 100}ms`,
-              height: l[e][o]
+              height: d[e][o]
             }
           },
           o
@@ -183,21 +183,21 @@ function y({
   );
 }
 function b({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "w-1", md: "w-1.5", lg: "w-2" };
-  return /* @__PURE__ */ d("div", { className: a("flex", {
+  const t = { sm: "w-1", md: "w-1.5", lg: "w-2" };
+  return /* @__PURE__ */ l("div", { className: a("flex", {
     sm: "h-4 gap-1",
     md: "h-5 gap-1.5",
     lg: "h-6 gap-2"
-  }[e], t), children: [
-    Array.from({ length: 3 }, (l, r) => /* @__PURE__ */ n(
+  }[e], i), children: [
+    Array.from({ length: 3 }, (d, r) => /* @__PURE__ */ n(
       "div",
       {
         className: a(
           "h-full animate-[wave-bars_1.2s_ease-in-out_infinite] bg-primary",
-          i[e]
+          t[e]
         ),
         style: { animationDelay: `${r * 0.2}s` }
       },
@@ -207,17 +207,17 @@ function b({
   ] });
 }
 function v({
-  className: t,
+  className: i,
   size: e = "md"
 }) {
-  const i = { sm: "h-3 w-1.5", md: "h-4 w-2", lg: "h-5 w-2.5" }, s = { sm: "text-xs", md: "text-sm", lg: "text-base" };
-  return /* @__PURE__ */ d(
+  const t = { sm: "h-3 w-1.5", md: "h-4 w-2", lg: "h-5 w-2.5" }, s = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  return /* @__PURE__ */ l(
     "div",
     {
       className: a(
         "flex items-center space-x-1",
         { sm: "h-4", md: "h-5", lg: "h-6" }[e],
-        t
+        i
       ),
       children: [
         /* @__PURE__ */ n("span", { className: a("font-mono text-primary", s[e]), children: ">" }),
@@ -226,7 +226,7 @@ function v({
           {
             className: a(
               "animate-[blink_1s_step-end_infinite] bg-primary",
-              i[e]
+              t[e]
             )
           }
         ),
@@ -236,26 +236,26 @@ function v({
   );
 }
 function L({
-  text: t = "Thinking",
+  text: i = "Thinking",
   className: e,
-  size: i = "md"
+  size: t = "md"
 }) {
   return /* @__PURE__ */ n(
     "div",
     {
       className: a(
         "animate-[text-blink_2s_ease-in-out_infinite] font-medium",
-        { sm: "text-xs", md: "text-sm", lg: "text-base" }[i],
+        { sm: "text-xs", md: "text-sm", lg: "text-base" }[t],
         e
       ),
-      children: t
+      children: i
     }
   );
 }
 function N({
-  text: t = "Thinking",
+  text: i = "Thinking",
   className: e,
-  size: i = "md"
+  size: t = "md"
 }) {
   return /* @__PURE__ */ n(
     "div",
@@ -264,41 +264,69 @@ function N({
         "bg-[linear-gradient(to_right,var(--muted-foreground)_40%,var(--foreground)_60%,var(--muted-foreground)_80%)]",
         "bg-size-[200%_auto] bg-clip-text font-medium text-transparent",
         "animate-[shimmer_4s_infinite_linear]",
-        { sm: "text-xs", md: "text-sm", lg: "text-base" }[i],
+        { sm: "text-xs", md: "text-sm", lg: "text-base" }[t],
         e
       ),
-      children: t
+      children: i
     }
   );
 }
 function S({
-  className: t,
+  className: i,
   text: e = "Thinking",
-  size: i = "md"
+  size: t = "md"
 }) {
   const s = { sm: "text-xs", md: "text-sm", lg: "text-base" };
-  return /* @__PURE__ */ d("div", { className: a("inline-flex items-center", t), children: [
+  return /* @__PURE__ */ l("div", { className: a("inline-flex items-center", i), children: [
     /* @__PURE__ */ n(
       "span",
       {
-        className: a("font-medium text-muted-foreground", s[i]),
+        className: a("font-medium text-muted-foreground", s[t]),
         children: e
       }
     ),
-    /* @__PURE__ */ d("span", { className: "inline-flex", children: [
+    /* @__PURE__ */ l("span", { className: "inline-flex", children: [
       /* @__PURE__ */ n("span", { className: "animate-[loading-dots_1.4s_infinite_0.2s] text-muted-foreground", children: "." }),
       /* @__PURE__ */ n("span", { className: "animate-[loading-dots_1.4s_infinite_0.4s] text-muted-foreground", children: "." }),
       /* @__PURE__ */ n("span", { className: "animate-[loading-dots_1.4s_infinite_0.6s] text-muted-foreground", children: "." })
     ] })
   ] });
 }
-function C({
-  variant: t = "circular",
+function w({
+  className: i,
   size: e = "md",
-  text: i,
+  text: t
+}) {
+  const s = { sm: "text-sm", md: "text-base", lg: "text-lg" }, d = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+  return /* @__PURE__ */ l("div", { className: a("inline-flex items-center gap-1.5", i), children: [
+    /* @__PURE__ */ n(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: a(
+          "before:animate-[braille-spin_0.8s_steps(10,end)_infinite] before:content-['⠋']",
+          "font-mono text-primary leading-none",
+          s[e]
+        )
+      }
+    ),
+    t && /* @__PURE__ */ n(
+      "span",
+      {
+        className: a("text-muted-foreground leading-none", d[e]),
+        children: t
+      }
+    ),
+    !t && /* @__PURE__ */ n("span", { className: "sr-only", children: "Loading" })
+  ] });
+}
+function A({
+  variant: i = "circular",
+  size: e = "md",
+  text: t,
   className: s
 }) {
-  switch (t) {
+  switch (i) {
     case "circular":
       return /* @__PURE__ */ n(m, { className: s, size: e });
     case "classic":
@@ -318,15 +346,17 @@ function C({
     case "terminal":
       return /* @__PURE__ */ n(v, { className: s, size: e });
     case "text-blink":
-      return /* @__PURE__ */ n(L, { className: s, size: e, text: i });
+      return /* @__PURE__ */ n(L, { className: s, size: e, text: t });
     case "text-shimmer":
-      return /* @__PURE__ */ n(N, { className: s, size: e, text: i });
+      return /* @__PURE__ */ n(N, { className: s, size: e, text: t });
     case "loading-dots":
-      return /* @__PURE__ */ n(S, { className: s, size: e, text: i });
+      return /* @__PURE__ */ n(S, { className: s, size: e, text: t });
+    case "braille":
+      return /* @__PURE__ */ n(w, { className: s, size: e, text: t });
     default:
       return /* @__PURE__ */ n(m, { className: s, size: e });
   }
 }
 export {
-  C as Loader
+  A as Loader
 };