@discourser/design-system 0.4.0 → 0.6.0

package/dist/index.js

@@ -2,22 +2,22 @@ import { ark as ark$1 } from '@ark-ui/react/factory';
 import { createContext, mergeProps } from '@ark-ui/react/utils';
 import { forwardRef, useMemo, createContext as createContext$1, useContext } from 'react';
 import { styled, createStyleContext, Stack } from '@discourser/design-system/styled-system/jsx';
-import { group, absoluteCenter, spinner, button, card, dialog, switchComponent, accordion, drawer, tabs, input, inputAddon, inputGroup, textarea, checkbox, radioGroup, select, slider, avatar, badge, progress, skeleton, toast, popover, tooltip, heading } from '@discourser/design-system/styled-system/recipes';
+import { group, absoluteCenter, spinner, button, input, inputAddon, inputGroup, textarea, heading, badge, toast, card, dialog, switchComponent, accordion, drawer, tabs, checkbox, radioGroup, select, slider, avatar, progress, skeleton, popover, tooltip } from '@discourser/design-system/styled-system/recipes';
 import { ark } from '@ark-ui/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Field } from '@ark-ui/react/field';
+import { Portal } from '@ark-ui/react/portal';
+import { Toast, Toaster as Toaster$1, useToastContext, createToaster } from '@ark-ui/react/toast';
 import { Dialog, DialogContext } from '@ark-ui/react/dialog';
 import { Switch, SwitchContext } from '@ark-ui/react/switch';
 import { Accordion, AccordionContext } from '@ark-ui/react/accordion';
 import { Tabs, TabsContext } from '@ark-ui/react/tabs';
-import { Field } from '@ark-ui/react/field';
 import { Checkbox, useCheckboxContext, CheckboxGroupProvider } from '@ark-ui/react/checkbox';
 import { RadioGroup, RadioGroupContext } from '@ark-ui/react/radio-group';
 import { Select, useSelectItemContext, SelectItemContext, SelectContext } from '@ark-ui/react/select';
 import { Slider, SliderContext, useSliderContext } from '@ark-ui/react/slider';
 import { Avatar, AvatarContext } from '@ark-ui/react/avatar';
 import { Progress } from '@ark-ui/react/progress';
-import { Portal } from '@ark-ui/react/portal';
-import { Toast, Toaster as Toaster$1, useToastContext, createToaster } from '@ark-ui/react/toast';
 import { Popover, PopoverContext } from '@ark-ui/react/popover';
 import { Tooltip as Tooltip$1, TooltipContext } from '@ark-ui/react/tooltip';
 import { clsx } from 'clsx';
@@ -28,13 +28,6 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// src/components/Button.tsx
-var Button_exports = {};
-__export(Button_exports, {
-  Button: () => Button,
-  ButtonGroup: () => ButtonGroup
-});
-
 // src/components/Group.tsx
 var Group_exports = {};
 __export(Group_exports, {
@@ -48,12 +41,6 @@ __export(AbsoluteCenter_exports, {
   AbsoluteCenter: () => AbsoluteCenter
 });
 var AbsoluteCenter = styled(ark$1.div, absoluteCenter);
-
-// src/components/Spinner.tsx
-var Spinner_exports = {};
-__export(Spinner_exports, {
-  Spinner: () => Spinner
-});
 var Spinner = styled(ark$1.span, spinner);
 var Span = styled("span");
 var Loader = forwardRef(function Loader2(props, ref) {
@@ -113,32 +100,132 @@ var [ButtonPropsProvider, useButtonPropsContext] = createContext({
   providerName: "<PropsProvider />",
   strict: false
 });
+var IconButton = forwardRef(
+  function IconButton2(props, ref) {
+    return /* @__PURE__ */ jsx(Button, { px: "0", py: "0", ref, ...props });
+  }
+);
+var Input = styled(Field.Input, input);
+var InputAddon = styled(ark$1.div, inputAddon);
+var { withProvider, withContext } = createStyleContext(inputGroup);
+var Root = withProvider(ark$1.div, "root");
+var Element = withContext(ark$1.div, "element");
+var InputGroupRoot = forwardRef(
+  function InputGroup(props, ref) {
+    const { startElement, endElement, children, ...rest } = props;
+    return /* @__PURE__ */ jsxs(Root, { ref, ...rest, children: [
+      startElement && /* @__PURE__ */ jsx(Element, { insetInlineStart: "0", top: "0", children: startElement }),
+      children,
+      endElement && /* @__PURE__ */ jsx(Element, { insetInlineEnd: "0", top: "0", children: endElement })
+    ] });
+  }
+);
+var InputGroup2 = Object.assign(InputGroupRoot, {
+  Root,
+  Element
+});
+var Textarea = styled(Field.Textarea, textarea);
+var Heading = styled("h2", heading);
+var Badge = styled(ark$1.div, badge);
+
+// src/components/CloseButton.tsx
+var CloseButton_exports = {};
+__export(CloseButton_exports, {
+  CloseButton: () => CloseButton
+});
+var XIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+] });
+var CloseButton = forwardRef(
+  function CloseButton2(props, ref) {
+    return /* @__PURE__ */ jsx(IconButton, { variant: "plain", colorPalette: "gray", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ jsx(XIcon, {}) });
+  }
+);
+
+// src/components/Icon.tsx
+var Icon_exports = {};
+__export(Icon_exports, {
+  Icon: () => Icon
+});
+var Icon = styled(ark$1.svg);
+var CheckCircleIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+  /* @__PURE__ */ jsx("path", { d: "m9 11 3 3L22 4" })
+] });
+var CircleAlertIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+] });
+var CircleXIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "m15 9-6 6" }),
+  /* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
+] });
+var { withProvider: withProvider2, withContext: withContext2 } = createStyleContext(toast);
+var Root2 = withProvider2(Toast.Root, "root");
+var Title = withContext2(Toast.Title, "title");
+var Description = withContext2(Toast.Description, "description");
+var ActionTrigger = withContext2(Toast.ActionTrigger, "actionTrigger");
+var CloseTrigger = withContext2(Toast.CloseTrigger, "closeTrigger");
+var StyledToaster = styled(Toaster$1);
+var iconMap = {
+  warning: CircleAlertIcon,
+  success: CheckCircleIcon,
+  error: CircleXIcon
+};
+var Indicator = forwardRef(function ToastIndicator(props, ref) {
+  const toast2 = useToastContext();
+  const StatusIcon = iconMap[toast2.type];
+  if (!StatusIcon) return null;
+  return /* @__PURE__ */ jsx(Icon, { ref, "data-type": toast2.type, ...props, children: /* @__PURE__ */ jsx(StatusIcon, {}) });
+});
+var toaster = createToaster({
+  placement: "bottom-end",
+  pauseOnPageIdle: true,
+  overlap: true,
+  max: 5
+});
+var Toaster = () => {
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => /* @__PURE__ */ jsxs(Root2, { children: [
+    toast2.type === "loading" ? /* @__PURE__ */ jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsx(Indicator, {}),
+    /* @__PURE__ */ jsxs(Stack, { gap: "3", alignItems: "start", children: [
+      /* @__PURE__ */ jsxs(Stack, { gap: "1", children: [
+        toast2.title && /* @__PURE__ */ jsx(Title, { children: toast2.title }),
+        toast2.description && /* @__PURE__ */ jsx(Description, { children: toast2.description })
+      ] }),
+      toast2.action && /* @__PURE__ */ jsx(ActionTrigger, { children: toast2.action.label })
+    ] }),
+    toast2.closable && /* @__PURE__ */ jsx(CloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm" }) })
+  ] }) }) });
+};
 
 // src/components/Card.tsx
 var Card_exports = {};
 __export(Card_exports, {
   Body: () => Body,
   Card: () => Card,
-  Description: () => Description,
+  Description: () => Description2,
   Footer: () => Footer,
   Header: () => Header,
-  Root: () => Root,
-  Title: () => Title
+  Root: () => Root3,
+  Title: () => Title2
 });
-var { withProvider, withContext } = createStyleContext(card);
-var Root = withProvider(ark$1.div, "root");
-var Header = withContext(ark$1.div, "header");
-var Body = withContext(ark$1.div, "body");
-var Footer = withContext(ark$1.div, "footer");
-var Title = withContext(ark$1.h3, "title");
-var Description = withContext(ark$1.div, "description");
+var { withProvider: withProvider3, withContext: withContext3 } = createStyleContext(card);
+var Root3 = withProvider3(ark$1.div, "root");
+var Header = withContext3(ark$1.div, "header");
+var Body = withContext3(ark$1.div, "body");
+var Footer = withContext3(ark$1.div, "footer");
+var Title2 = withContext3(ark$1.h3, "title");
+var Description2 = withContext3(ark$1.div, "description");
 var Card = {
-  Root,
+  Root: Root3,
   Header,
   Body,
   Footer,
-  Title,
-  Description
+  Title: Title2,
+  Description: Description2
 };
 
 // src/components/Dialog.tsx
@@ -146,42 +233,31 @@ var Dialog_exports = {};
 __export(Dialog_exports, {
   Backdrop: () => Backdrop,
   Body: () => Body2,
-  CloseTrigger: () => CloseTrigger,
+  CloseTrigger: () => CloseTrigger2,
   Content: () => Content,
   Context: () => DialogContext,
-  Description: () => Description2,
+  Description: () => Description3,
   Footer: () => Footer2,
   Header: () => Header2,
   Positioner: () => Positioner,
-  Root: () => Root2,
-  Title: () => Title2,
+  Root: () => Root4,
+  Title: () => Title3,
   Trigger: () => Trigger
 });
-var { withRootProvider, withContext: withContext2 } = createStyleContext(dialog);
-var Root2 = withRootProvider(Dialog.Root, {
+var { withRootProvider, withContext: withContext4 } = createStyleContext(dialog);
+var Root4 = withRootProvider(Dialog.Root, {
   defaultProps: { unmountOnExit: true, lazyMount: true }
 });
-var Backdrop = withContext2(Dialog.Backdrop, "backdrop");
-var CloseTrigger = withContext2(Dialog.CloseTrigger, "closeTrigger");
-var Content = withContext2(Dialog.Content, "content");
-var Description2 = withContext2(Dialog.Description, "description");
-var Positioner = withContext2(Dialog.Positioner, "positioner");
-var Title2 = withContext2(Dialog.Title, "title");
-var Trigger = withContext2(Dialog.Trigger, "trigger");
-var Body2 = withContext2(ark$1.div, "body");
-var Header2 = withContext2(ark$1.div, "header");
-var Footer2 = withContext2(ark$1.div, "footer");
-
-// src/components/IconButton.tsx
-var IconButton_exports = {};
-__export(IconButton_exports, {
-  IconButton: () => IconButton
-});
-var IconButton = forwardRef(
-  function IconButton2(props, ref) {
-    return /* @__PURE__ */ jsx(Button, { px: "0", py: "0", ref, ...props });
-  }
-);
+var Backdrop = withContext4(Dialog.Backdrop, "backdrop");
+var CloseTrigger2 = withContext4(Dialog.CloseTrigger, "closeTrigger");
+var Content = withContext4(Dialog.Content, "content");
+var Description3 = withContext4(Dialog.Description, "description");
+var Positioner = withContext4(Dialog.Positioner, "positioner");
+var Title3 = withContext4(Dialog.Title, "title");
+var Trigger = withContext4(Dialog.Trigger, "trigger");
+var Body2 = withContext4(ark$1.div, "body");
+var Header2 = withContext4(ark$1.div, "header");
+var Footer2 = withContext4(ark$1.div, "footer");
 
 // src/components/Switch.tsx
 var Switch_exports = {};
@@ -190,15 +266,15 @@ __export(Switch_exports, {
   Control: () => Control,
   HiddenInput: () => HiddenInput,
   Label: () => Label,
-  Root: () => Root3,
+  Root: () => Root5,
   Thumb: () => Thumb
 });
-var { withProvider: withProvider2, withContext: withContext3 } = createStyleContext(switchComponent);
-var Root3 = withProvider2(Switch.Root, "root");
-var Label = withContext3(Switch.Label, "label");
-var Thumb = withContext3(Switch.Thumb, "thumb");
+var { withProvider: withProvider4, withContext: withContext5 } = createStyleContext(switchComponent);
+var Root5 = withProvider4(Switch.Root, "root");
+var Label = withContext5(Switch.Label, "label");
+var Thumb = withContext5(Switch.Thumb, "thumb");
 var HiddenInput = Switch.HiddenInput;
-var Control = withContext3(Switch.Control, "control", {
+var Control = withContext5(Switch.Control, "control", {
   defaultProps: { children: /* @__PURE__ */ jsx(Thumb, {}) }
 });
 
@@ -211,94 +287,74 @@ __export(Accordion_exports, {
   ItemContent: () => ItemContent,
   ItemIndicator: () => ItemIndicator,
   ItemTrigger: () => ItemTrigger,
-  Root: () => Root4,
+  Root: () => Root6,
   RootProvider: () => RootProvider
 });
 var ChevronDownIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
-var { withProvider: withProvider3, withContext: withContext4 } = createStyleContext(accordion);
-var Root4 = withProvider3(Accordion.Root, "root");
-var RootProvider = withProvider3(Accordion.RootProvider, "root");
-var Item = withContext4(Accordion.Item, "item");
-var ItemContent = withContext4(Accordion.ItemContent, "itemContent");
-var ItemIndicator = withContext4(Accordion.ItemIndicator, "itemIndicator", {
+var { withProvider: withProvider5, withContext: withContext6 } = createStyleContext(accordion);
+var Root6 = withProvider5(Accordion.Root, "root");
+var RootProvider = withProvider5(Accordion.RootProvider, "root");
+var Item = withContext6(Accordion.Item, "item");
+var ItemContent = withContext6(Accordion.ItemContent, "itemContent");
+var ItemIndicator = withContext6(Accordion.ItemIndicator, "itemIndicator", {
   defaultProps: { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }
 });
-var ItemTrigger = withContext4(Accordion.ItemTrigger, "itemTrigger");
-var ItemBody = withContext4(ark$1.div, "itemBody");
+var ItemTrigger = withContext6(Accordion.ItemTrigger, "itemTrigger");
+var ItemBody = withContext6(ark$1.div, "itemBody");
 
 // src/components/Drawer.tsx
 var Drawer_exports = {};
 __export(Drawer_exports, {
   Backdrop: () => Backdrop2,
   Body: () => Body3,
-  CloseTrigger: () => CloseTrigger2,
+  CloseTrigger: () => CloseTrigger3,
   Content: () => Content2,
   Context: () => DialogContext,
-  Description: () => Description3,
+  Description: () => Description4,
   Footer: () => Footer3,
   Header: () => Header3,
   Positioner: () => Positioner2,
-  Root: () => Root5,
+  Root: () => Root7,
   RootProvider: () => RootProvider2,
-  Title: () => Title3,
+  Title: () => Title4,
   Trigger: () => Trigger2
 });
-var { withRootProvider: withRootProvider2, withContext: withContext5 } = createStyleContext(drawer);
-var Root5 = withRootProvider2(Dialog.Root, {
+var { withRootProvider: withRootProvider2, withContext: withContext7 } = createStyleContext(drawer);
+var Root7 = withRootProvider2(Dialog.Root, {
   defaultProps: { unmountOnExit: true, lazyMount: true }
 });
 var RootProvider2 = withRootProvider2(Dialog.Root, {
   defaultProps: { unmountOnExit: true, lazyMount: true }
 });
-var Backdrop2 = withContext5(Dialog.Backdrop, "backdrop");
-var Positioner2 = withContext5(Dialog.Positioner, "positioner");
-var CloseTrigger2 = withContext5(Dialog.CloseTrigger, "closeTrigger");
-var Content2 = withContext5(Dialog.Content, "content");
-var Description3 = withContext5(Dialog.Description, "description");
-var Title3 = withContext5(Dialog.Title, "title");
-var Trigger2 = withContext5(Dialog.Trigger, "trigger");
-var Body3 = withContext5(ark$1.div, "body");
-var Header3 = withContext5(ark$1.div, "header");
-var Footer3 = withContext5(ark$1.div, "footer");
+var Backdrop2 = withContext7(Dialog.Backdrop, "backdrop");
+var Positioner2 = withContext7(Dialog.Positioner, "positioner");
+var CloseTrigger3 = withContext7(Dialog.CloseTrigger, "closeTrigger");
+var Content2 = withContext7(Dialog.Content, "content");
+var Description4 = withContext7(Dialog.Description, "description");
+var Title4 = withContext7(Dialog.Title, "title");
+var Trigger2 = withContext7(Dialog.Trigger, "trigger");
+var Body3 = withContext7(ark$1.div, "body");
+var Header3 = withContext7(ark$1.div, "header");
+var Footer3 = withContext7(ark$1.div, "footer");
 
 // src/components/Tabs.tsx
 var Tabs_exports = {};
 __export(Tabs_exports, {
   Content: () => Content3,
   Context: () => TabsContext,
-  Indicator: () => Indicator,
+  Indicator: () => Indicator2,
   List: () => List,
-  Root: () => Root6,
+  Root: () => Root8,
   RootProvider: () => RootProvider3,
   Trigger: () => Trigger3
 });
-var { withProvider: withProvider4, withContext: withContext6 } = createStyleContext(tabs);
-var Root6 = withProvider4(Tabs.Root, "root");
-var RootProvider3 = withProvider4(Tabs.RootProvider, "root");
-var List = withContext6(Tabs.List, "list");
-var Trigger3 = withContext6(Tabs.Trigger, "trigger");
-var Content3 = withContext6(Tabs.Content, "content");
-var Indicator = withContext6(Tabs.Indicator, "indicator");
-var Input = styled(Field.Input, input);
-var InputAddon = styled(ark$1.div, inputAddon);
-var { withProvider: withProvider5, withContext: withContext7 } = createStyleContext(inputGroup);
-var Root7 = withProvider5(ark$1.div, "root");
-var Element = withContext7(ark$1.div, "element");
-var InputGroupRoot = forwardRef(
-  function InputGroup(props, ref) {
-    const { startElement, endElement, children, ...rest } = props;
-    return /* @__PURE__ */ jsxs(Root7, { ref, ...rest, children: [
-      startElement && /* @__PURE__ */ jsx(Element, { insetInlineStart: "0", top: "0", children: startElement }),
-      children,
-      endElement && /* @__PURE__ */ jsx(Element, { insetInlineEnd: "0", top: "0", children: endElement })
-    ] });
-  }
-);
-var InputGroup2 = Object.assign(InputGroupRoot, {
-  Root: Root7,
-  Element
-});
-var Textarea = styled(Field.Textarea, textarea);
+var { withProvider: withProvider6, withContext: withContext8 } = createStyleContext(tabs);
+var Root8 = withProvider6(Tabs.Root, "root");
+var RootProvider3 = withProvider6(Tabs.RootProvider, "root");
+var List = withContext8(Tabs.List, "list");
+var Trigger3 = withContext8(Tabs.Trigger, "trigger");
+var Content3 = withContext8(Tabs.Content, "content");
+var Indicator2 = withContext8(Tabs.Indicator, "indicator");
 
 // src/components/Checkbox.tsx
 var Checkbox_exports = {};
@@ -307,20 +363,20 @@ __export(Checkbox_exports, {
   Group: () => Group2,
   GroupProvider: () => CheckboxGroupProvider,
   HiddenInput: () => HiddenInput2,
-  Indicator: () => Indicator2,
+  Indicator: () => Indicator3,
   Label: () => Label2,
-  Root: () => Root8,
+  Root: () => Root9,
   RootProvider: () => RootProvider4
 });
-var { withProvider: withProvider6, withContext: withContext8 } = createStyleContext(checkbox);
-var Root8 = withProvider6(Checkbox.Root, "root");
-var RootProvider4 = withProvider6(Checkbox.RootProvider, "root");
-var Control2 = withContext8(Checkbox.Control, "control");
-var Group2 = withProvider6(Checkbox.Group, "group");
-var Label2 = withContext8(Checkbox.Label, "label");
+var { withProvider: withProvider7, withContext: withContext9 } = createStyleContext(checkbox);
+var Root9 = withProvider7(Checkbox.Root, "root");
+var RootProvider4 = withProvider7(Checkbox.RootProvider, "root");
+var Control2 = withContext9(Checkbox.Control, "control");
+var Group2 = withProvider7(Checkbox.Group, "group");
+var Label2 = withContext9(Checkbox.Label, "label");
 var HiddenInput2 = Checkbox.HiddenInput;
-var Indicator2 = forwardRef(
-  function Indicator3(props, ref) {
+var Indicator3 = forwardRef(
+  function Indicator4(props, ref) {
     const { indeterminate, checked } = useCheckboxContext();
     return /* @__PURE__ */ jsx(Checkbox.Indicator, { indeterminate, asChild: true, children: /* @__PURE__ */ jsxs(
       styled.svg,
@@ -346,23 +402,23 @@ var Indicator2 = forwardRef(
 var RadioGroup_exports = {};
 __export(RadioGroup_exports, {
   Context: () => RadioGroupContext,
-  Indicator: () => Indicator4,
+  Indicator: () => Indicator5,
   Item: () => Item2,
   ItemControl: () => ItemControl,
   ItemHiddenInput: () => ItemHiddenInput,
   ItemText: () => ItemText,
   Label: () => Label3,
-  Root: () => Root9,
+  Root: () => Root10,
   RootProvider: () => RootProvider5
 });
-var { withProvider: withProvider7, withContext: withContext9 } = createStyleContext(radioGroup);
-var Root9 = withProvider7(RadioGroup.Root, "root");
-var RootProvider5 = withProvider7(RadioGroup.RootProvider, "root");
-var Indicator4 = withContext9(RadioGroup.Indicator, "indicator");
-var Item2 = withContext9(RadioGroup.Item, "item");
-var ItemControl = withContext9(RadioGroup.ItemControl, "itemControl");
-var ItemText = withContext9(RadioGroup.ItemText, "itemText");
-var Label3 = withContext9(RadioGroup.Label, "label");
+var { withProvider: withProvider8, withContext: withContext10 } = createStyleContext(radioGroup);
+var Root10 = withProvider8(RadioGroup.Root, "root");
+var RootProvider5 = withProvider8(RadioGroup.RootProvider, "root");
+var Indicator5 = withContext10(RadioGroup.Indicator, "indicator");
+var Item2 = withContext10(RadioGroup.Item, "item");
+var ItemControl = withContext10(RadioGroup.ItemControl, "itemControl");
+var ItemText = withContext10(RadioGroup.ItemText, "itemText");
+var Label3 = withContext10(RadioGroup.Label, "label");
 var ItemHiddenInput = RadioGroup.ItemHiddenInput;
 
 // src/components/Select.tsx
@@ -373,7 +429,7 @@ __export(Select_exports, {
   Context: () => SelectContext,
   Control: () => Control3,
   HiddenSelect: () => HiddenSelect,
-  Indicator: () => Indicator5,
+  Indicator: () => Indicator6,
   IndicatorGroup: () => IndicatorGroup,
   Item: () => Item3,
   ItemContext: () => SelectItemContext,
@@ -384,35 +440,35 @@ __export(Select_exports, {
   Label: () => Label4,
   List: () => List2,
   Positioner: () => Positioner3,
-  Root: () => Root10,
+  Root: () => Root11,
   Trigger: () => Trigger4,
   ValueText: () => ValueText
 });
-var { withProvider: withProvider8, withContext: withContext10 } = createStyleContext(select);
+var { withProvider: withProvider9, withContext: withContext11 } = createStyleContext(select);
 var CheckIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) });
 var ChevronsUpDownIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
   /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
   /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
 ] });
-var Root10 = withProvider8(Select.Root, "root");
-var ClearTrigger = withContext10(Select.ClearTrigger, "clearTrigger");
-var Content4 = withContext10(Select.Content, "content");
-var Control3 = withContext10(Select.Control, "control");
-var IndicatorGroup = withContext10(ark$1.div, "indicatorGroup");
-var Item3 = withContext10(Select.Item, "item");
-var ItemGroup = withContext10(Select.ItemGroup, "itemGroup");
-var ItemGroupLabel = withContext10(Select.ItemGroupLabel, "itemGroupLabel");
-var ItemText2 = withContext10(Select.ItemText, "itemText");
-var Label4 = withContext10(Select.Label, "label");
-var List2 = withContext10(Select.List, "list");
-var Positioner3 = withContext10(Select.Positioner, "positioner");
-var Trigger4 = withContext10(Select.Trigger, "trigger");
-var ValueText = withContext10(Select.ValueText, "valueText");
-var Indicator5 = withContext10(Select.Indicator, "indicator", {
+var Root11 = withProvider9(Select.Root, "root");
+var ClearTrigger = withContext11(Select.ClearTrigger, "clearTrigger");
+var Content4 = withContext11(Select.Content, "content");
+var Control3 = withContext11(Select.Control, "control");
+var IndicatorGroup = withContext11(ark$1.div, "indicatorGroup");
+var Item3 = withContext11(Select.Item, "item");
+var ItemGroup = withContext11(Select.ItemGroup, "itemGroup");
+var ItemGroupLabel = withContext11(Select.ItemGroupLabel, "itemGroupLabel");
+var ItemText2 = withContext11(Select.ItemText, "itemText");
+var Label4 = withContext11(Select.Label, "label");
+var List2 = withContext11(Select.List, "list");
+var Positioner3 = withContext11(Select.Positioner, "positioner");
+var Trigger4 = withContext11(Select.Trigger, "trigger");
+var ValueText = withContext11(Select.ValueText, "valueText");
+var Indicator6 = withContext11(Select.Indicator, "indicator", {
   defaultProps: { children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}) }
 });
 var HiddenSelect = Select.HiddenSelect;
-var StyledItemIndicator = withContext10(Select.ItemIndicator, "itemIndicator");
+var StyledItemIndicator = withContext11(Select.ItemIndicator, "itemIndicator");
 var ItemIndicator2 = forwardRef(
   function ItemIndicator3(props, ref) {
     const item = useSelectItemContext();
@@ -433,14 +489,14 @@ __export(Slider_exports, {
   MarkerIndicator: () => MarkerIndicator,
   Marks: () => Marks,
   Range: () => Range,
-  Root: () => Root11,
+  Root: () => Root12,
   Thumb: () => Thumb2,
   Thumbs: () => Thumbs,
   Track: () => Track,
   ValueText: () => ValueText2
 });
 var StyleContextInternal = createContext$1(null);
-var Root11 = forwardRef(
+var Root12 = forwardRef(
   function SliderRoot(props, ref) {
     const { orientation, size, variant, colorPalette, className, ...arkProps } = props;
     const styles = slider({ orientation, size, variant });
@@ -543,23 +599,23 @@ __export(Avatar_exports, {
   Context: () => AvatarContext,
   Fallback: () => Fallback,
   Image: () => Image,
-  Root: () => Root12,
+  Root: () => Root13,
   RootProvider: () => RootProvider6
 });
 var UserIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
   /* @__PURE__ */ jsx("circle", { cx: "12", cy: "7", r: "4" })
 ] });
-var { withProvider: withProvider9, withContext: withContext11 } = createStyleContext(avatar);
-var Root12 = withProvider9(Avatar.Root, "root");
-var RootProvider6 = withProvider9(Avatar.RootProvider, "root");
-var Image = withContext11(Avatar.Image, "image", {
+var { withProvider: withProvider10, withContext: withContext12 } = createStyleContext(avatar);
+var Root13 = withProvider10(Avatar.Root, "root");
+var RootProvider6 = withProvider10(Avatar.RootProvider, "root");
+var Image = withContext12(Avatar.Image, "image", {
   defaultProps: {
     draggable: "false",
     referrerPolicy: "no-referrer"
   }
 });
-var StyledFallback = withContext11(Avatar.Fallback, "fallback");
+var StyledFallback = withContext12(Avatar.Fallback, "fallback");
 var Fallback = forwardRef(function Fallback2(props, ref) {
   const { name, children, asChild, ...rest } = props;
   const fallbackContent = children || asChild ? children : name ? getInitials(name) : /* @__PURE__ */ jsx(UserIcon, {});
@@ -572,13 +628,6 @@ var getInitials = (name) => {
   return firstName && lastName ? `${firstName[0]}${lastName[0]}` : firstName[0];
 };
 
-// src/components/Badge.tsx
-var Badge_exports = {};
-__export(Badge_exports, {
-  Badge: () => Badge
-});
-var Badge = styled(ark$1.div, badge);
-
 // src/components/Progress.tsx
 var Progress_exports = {};
 __export(Progress_exports, {
@@ -587,23 +636,23 @@ __export(Progress_exports, {
   CircleTrack: () => CircleTrack,
   Label: () => Label6,
   Range: () => Range2,
-  Root: () => Root13,
+  Root: () => Root14,
   RootProvider: () => RootProvider7,
   Track: () => Track2,
   ValueText: () => ValueText3,
   View: () => View
 });
-var { withProvider: withProvider10, withContext: withContext12 } = createStyleContext(progress);
-var Root13 = withProvider10(Progress.Root, "root");
-var RootProvider7 = withProvider10(Progress.RootProvider, "root");
-var Circle = withContext12(Progress.Circle, "circle");
-var CircleRange = withContext12(Progress.CircleRange, "circleRange");
-var CircleTrack = withContext12(Progress.CircleTrack, "circleTrack");
-var Label6 = withContext12(Progress.Label, "label");
-var Range2 = withContext12(Progress.Range, "range");
-var Track2 = withContext12(Progress.Track, "track");
-var ValueText3 = withContext12(Progress.ValueText, "valueText");
-var View = withContext12(Progress.View, "view");
+var { withProvider: withProvider11, withContext: withContext13 } = createStyleContext(progress);
+var Root14 = withProvider11(Progress.Root, "root");
+var RootProvider7 = withProvider11(Progress.RootProvider, "root");
+var Circle = withContext13(Progress.Circle, "circle");
+var CircleRange = withContext13(Progress.CircleRange, "circleRange");
+var CircleTrack = withContext13(Progress.CircleTrack, "circleTrack");
+var Label6 = withContext13(Progress.Label, "label");
+var Range2 = withContext13(Progress.Range, "range");
+var Track2 = withContext13(Progress.Track, "track");
+var ValueText3 = withContext13(Progress.ValueText, "valueText");
+var View = withContext13(Progress.View, "view");
 
 // src/components/Skeleton.tsx
 var Skeleton_exports = {};
@@ -629,79 +678,6 @@ var SkeletonText = forwardRef(
   }
 );
 
-// src/components/CloseButton.tsx
-var CloseButton_exports = {};
-__export(CloseButton_exports, {
-  CloseButton: () => CloseButton
-});
-var XIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-] });
-var CloseButton = forwardRef(
-  function CloseButton2(props, ref) {
-    return /* @__PURE__ */ jsx(IconButton, { variant: "plain", colorPalette: "gray", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ jsx(XIcon, {}) });
-  }
-);
-
-// src/components/Icon.tsx
-var Icon_exports = {};
-__export(Icon_exports, {
-  Icon: () => Icon
-});
-var Icon = styled(ark$1.svg);
-var CheckCircleIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
-  /* @__PURE__ */ jsx("path", { d: "m9 11 3 3L22 4" })
-] });
-var CircleAlertIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
-  /* @__PURE__ */ jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
-] });
-var CircleXIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-  /* @__PURE__ */ jsx("path", { d: "m15 9-6 6" }),
-  /* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
-] });
-var { withProvider: withProvider11, withContext: withContext13 } = createStyleContext(toast);
-var Root14 = withProvider11(Toast.Root, "root");
-var Title4 = withContext13(Toast.Title, "title");
-var Description4 = withContext13(Toast.Description, "description");
-var ActionTrigger = withContext13(Toast.ActionTrigger, "actionTrigger");
-var CloseTrigger3 = withContext13(Toast.CloseTrigger, "closeTrigger");
-var StyledToaster = styled(Toaster$1);
-var iconMap = {
-  warning: CircleAlertIcon,
-  success: CheckCircleIcon,
-  error: CircleXIcon
-};
-var Indicator6 = forwardRef(function ToastIndicator(props, ref) {
-  const toast2 = useToastContext();
-  const StatusIcon = iconMap[toast2.type];
-  if (!StatusIcon) return null;
-  return /* @__PURE__ */ jsx(Icon, { ref, "data-type": toast2.type, ...props, children: /* @__PURE__ */ jsx(StatusIcon, {}) });
-});
-var toaster = createToaster({
-  placement: "bottom-end",
-  pauseOnPageIdle: true,
-  overlap: true,
-  max: 5
-});
-var Toaster = () => {
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => /* @__PURE__ */ jsxs(Root14, { children: [
-    toast2.type === "loading" ? /* @__PURE__ */ jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsx(Indicator6, {}),
-    /* @__PURE__ */ jsxs(Stack, { gap: "3", alignItems: "start", children: [
-      /* @__PURE__ */ jsxs(Stack, { gap: "1", children: [
-        toast2.title && /* @__PURE__ */ jsx(Title4, { children: toast2.title }),
-        toast2.description && /* @__PURE__ */ jsx(Description4, { children: toast2.description })
-      ] }),
-      toast2.action && /* @__PURE__ */ jsx(ActionTrigger, { children: toast2.action.label })
-    ] }),
-    toast2.closable && /* @__PURE__ */ jsx(CloseTrigger3, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { size: "sm" }) })
-  ] }) }) });
-};
-
 // src/components/Popover.tsx
 var Popover_exports = {};
 __export(Popover_exports, {
@@ -780,7 +756,11 @@ var Tooltip = forwardRef(function Tooltip2(props, ref) {
     ] }) }) })
   ] });
 });
-var Heading = styled("h2", heading);
+
+// src/components/index.ts
+var Button3 = Object.assign(Button, {
+  Group: ButtonGroup
+});
 
 // node_modules/.pnpm/@pandacss+dev@1.8.0_hono@4.11.3_jsdom@27.4.0_typescript@5.9.3/node_modules/@pandacss/dev/dist/index.mjs
 function defineRecipe(config) {
@@ -1862,6 +1842,6 @@ function cn(...inputs) {
   return clsx(inputs);
 }
 
-export { AbsoluteCenter_exports as AbsoluteCenter, Accordion_exports as Accordion, Avatar_exports as Avatar, Badge_exports as Badge, Button_exports as Button, Card_exports as Card, Checkbox_exports as Checkbox, CloseButton_exports as CloseButton, Dialog_exports as Dialog, Drawer_exports as Drawer, Group_exports as Group, Heading, Icon_exports as Icon, IconButton_exports as IconButton, Input, InputAddon, InputGroup2 as InputGroup, Popover_exports as Popover, Progress_exports as Progress, RadioGroup_exports as RadioGroup, Select_exports as Select, Skeleton_exports as Skeleton, Slider_exports as Slider, Spinner_exports as Spinner, Switch_exports as Switch, Tabs_exports as Tabs, Textarea, Toaster, Tooltip_exports as Tooltip, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };
+export { AbsoluteCenter_exports as AbsoluteCenter, Accordion_exports as Accordion, Avatar_exports as Avatar, Badge, Button3 as Button, Card_exports as Card, Checkbox_exports as Checkbox, CloseButton_exports as CloseButton, Dialog_exports as Dialog, Drawer_exports as Drawer, Group_exports as Group, Heading, Icon_exports as Icon, IconButton, Input, InputAddon, InputGroup2 as InputGroup, Popover_exports as Popover, Progress_exports as Progress, RadioGroup_exports as RadioGroup, Select_exports as Select, Skeleton_exports as Skeleton, Slider_exports as Slider, Spinner, Switch_exports as Switch, Tabs_exports as Tabs, Textarea, Toaster, Tooltip_exports as Tooltip, material3Language as activeLanguage, buttonRecipe, cardRecipe, cn, dialogRecipe, iconButtonRecipe, inputRecipe, switchRecipe, toaster, transformToPandaTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map