@discourser/design-system 0.1.6 → 0.2.1

package/dist/index.js

@@ -0,0 +1,1845 @@
+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, checkbox, radioGroup, select, slider, textarea, avatar, badge, progress, skeleton, toast, popover, tooltip } from '@discourser/design-system/styled-system/recipes';
+import { ark } from '@ark-ui/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 { 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 { Field } from '@ark-ui/react/field';
+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';
+
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in 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, {
+  Group: () => Group
+});
+var Group = styled(ark.div, group);
+
+// src/components/AbsoluteCenter.tsx
+var AbsoluteCenter_exports = {};
+__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) {
+  const {
+    spinner: spinner2 = /* @__PURE__ */ jsx(Spinner, { size: "inherit", borderWidth: "0.125em", color: "inherit" }),
+    spinnerPlacement = "start",
+    children,
+    text,
+    visible = true,
+    ...rest
+  } = props;
+  if (!visible) return children;
+  if (text) {
+    return /* @__PURE__ */ jsxs(Span, { ref, display: "contents", ...rest, children: [
+      spinnerPlacement === "start" && spinner2,
+      text,
+      spinnerPlacement === "end" && spinner2
+    ] });
+  }
+  if (spinner2) {
+    return /* @__PURE__ */ jsxs(Span, { ref, display: "contents", ...rest, children: [
+      /* @__PURE__ */ jsx(AbsoluteCenter, { display: "inline-flex", children: spinner2 }),
+      /* @__PURE__ */ jsx(Span, { visibility: "hidden", display: "contents", children })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Span, { ref, display: "contents", ...rest, children });
+});
+var BaseButton = styled(ark$1.button, button);
+var Button = forwardRef(function Button2(props, ref) {
+  const propsContext = useButtonPropsContext();
+  const buttonProps = useMemo(
+    () => mergeProps(propsContext, props),
+    [propsContext, props]
+  );
+  const { loading, loadingText, children, spinner: spinner2, spinnerPlacement, ...rest } = buttonProps;
+  return /* @__PURE__ */ jsx(
+    BaseButton,
+    {
+      type: "button",
+      ref,
+      ...rest,
+      "data-loading": loading ? "" : void 0,
+      disabled: loading || rest.disabled,
+      children: !props.asChild && loading ? /* @__PURE__ */ jsx(Loader, { spinner: spinner2, text: loadingText, spinnerPlacement, children }) : children
+    }
+  );
+});
+var ButtonGroup = forwardRef(
+  function ButtonGroup2(props, ref) {
+    const [variantProps, otherProps] = useMemo(() => button.splitVariantProps(props), [props]);
+    return /* @__PURE__ */ jsx(ButtonPropsProvider, { value: variantProps, children: /* @__PURE__ */ jsx(Group, { ref, ...otherProps }) });
+  }
+);
+var [ButtonPropsProvider, useButtonPropsContext] = createContext({
+  name: "ButtonPropsContext",
+  hookName: "useButtonPropsContext",
+  providerName: "<PropsProvider />",
+  strict: false
+});
+
+// src/components/Card.tsx
+var Card_exports = {};
+__export(Card_exports, {
+  Body: () => Body,
+  Card: () => Card,
+  Description: () => Description,
+  Footer: () => Footer,
+  Header: () => Header,
+  Root: () => Root,
+  Title: () => Title
+});
+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 Card = {
+  Root,
+  Header,
+  Body,
+  Footer,
+  Title,
+  Description
+};
+
+// src/components/Dialog.tsx
+var Dialog_exports = {};
+__export(Dialog_exports, {
+  Backdrop: () => Backdrop,
+  Body: () => Body2,
+  CloseTrigger: () => CloseTrigger,
+  Content: () => Content,
+  Context: () => DialogContext,
+  Description: () => Description2,
+  Footer: () => Footer2,
+  Header: () => Header2,
+  Positioner: () => Positioner,
+  Root: () => Root2,
+  Title: () => Title2,
+  Trigger: () => Trigger
+});
+var { withRootProvider, withContext: withContext2 } = createStyleContext(dialog);
+var Root2 = 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 });
+  }
+);
+
+// src/components/Switch.tsx
+var Switch_exports = {};
+__export(Switch_exports, {
+  Context: () => SwitchContext,
+  Control: () => Control,
+  HiddenInput: () => HiddenInput,
+  Label: () => Label,
+  Root: () => Root3,
+  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 HiddenInput = Switch.HiddenInput;
+var Control = withContext3(Switch.Control, "control", {
+  defaultProps: { children: /* @__PURE__ */ jsx(Thumb, {}) }
+});
+
+// src/components/Accordion.tsx
+var Accordion_exports = {};
+__export(Accordion_exports, {
+  Context: () => AccordionContext,
+  Item: () => Item,
+  ItemBody: () => ItemBody,
+  ItemContent: () => ItemContent,
+  ItemIndicator: () => ItemIndicator,
+  ItemTrigger: () => ItemTrigger,
+  Root: () => Root4,
+  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", {
+  defaultProps: { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }
+});
+var ItemTrigger = withContext4(Accordion.ItemTrigger, "itemTrigger");
+var ItemBody = withContext4(ark$1.div, "itemBody");
+
+// src/components/Drawer.tsx
+var Drawer_exports = {};
+__export(Drawer_exports, {
+  Backdrop: () => Backdrop2,
+  Body: () => Body3,
+  CloseTrigger: () => CloseTrigger2,
+  Content: () => Content2,
+  Context: () => DialogContext,
+  Description: () => Description3,
+  Footer: () => Footer3,
+  Header: () => Header3,
+  Positioner: () => Positioner2,
+  Root: () => Root5,
+  RootProvider: () => RootProvider2,
+  Title: () => Title3,
+  Trigger: () => Trigger2
+});
+var { withRootProvider: withRootProvider2, withContext: withContext5 } = createStyleContext(drawer);
+var Root5 = 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");
+
+// src/components/Tabs.tsx
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  Content: () => Content3,
+  Context: () => TabsContext,
+  Indicator: () => Indicator,
+  List: () => List,
+  Root: () => Root6,
+  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");
+
+// src/components/Checkbox.tsx
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  Control: () => Control2,
+  Group: () => Group2,
+  GroupProvider: () => CheckboxGroupProvider,
+  HiddenInput: () => HiddenInput2,
+  Indicator: () => Indicator2,
+  Label: () => Label2,
+  Root: () => Root7,
+  RootProvider: () => RootProvider4
+});
+var { withProvider: withProvider5, withContext: withContext7 } = createStyleContext(checkbox);
+var Root7 = withProvider5(Checkbox.Root, "root");
+var RootProvider4 = withProvider5(Checkbox.RootProvider, "root");
+var Control2 = withContext7(Checkbox.Control, "control");
+var Group2 = withProvider5(Checkbox.Group, "group");
+var Label2 = withContext7(Checkbox.Label, "label");
+var HiddenInput2 = Checkbox.HiddenInput;
+var Indicator2 = forwardRef(
+  function Indicator3(props, ref) {
+    const { indeterminate, checked } = useCheckboxContext();
+    return /* @__PURE__ */ jsx(Checkbox.Indicator, { indeterminate, asChild: true, children: /* @__PURE__ */ jsxs(
+      styled.svg,
+      {
+        ref,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3px",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("title", { children: "Checkmark" }),
+          indeterminate ? /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) : checked ? /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) : null
+        ]
+      }
+    ) });
+  }
+);
+
+// src/components/RadioGroup.tsx
+var RadioGroup_exports = {};
+__export(RadioGroup_exports, {
+  Context: () => RadioGroupContext,
+  Indicator: () => Indicator4,
+  Item: () => Item2,
+  ItemControl: () => ItemControl,
+  ItemHiddenInput: () => ItemHiddenInput,
+  ItemText: () => ItemText,
+  Label: () => Label3,
+  Root: () => Root8,
+  RootProvider: () => RootProvider5
+});
+var { withProvider: withProvider6, withContext: withContext8 } = createStyleContext(radioGroup);
+var Root8 = withProvider6(RadioGroup.Root, "root");
+var RootProvider5 = withProvider6(RadioGroup.RootProvider, "root");
+var Indicator4 = withContext8(RadioGroup.Indicator, "indicator");
+var Item2 = withContext8(RadioGroup.Item, "item");
+var ItemControl = withContext8(RadioGroup.ItemControl, "itemControl");
+var ItemText = withContext8(RadioGroup.ItemText, "itemText");
+var Label3 = withContext8(RadioGroup.Label, "label");
+var ItemHiddenInput = RadioGroup.ItemHiddenInput;
+
+// src/components/Select.tsx
+var Select_exports = {};
+__export(Select_exports, {
+  ClearTrigger: () => ClearTrigger,
+  Content: () => Content4,
+  Context: () => SelectContext,
+  Control: () => Control3,
+  HiddenSelect: () => HiddenSelect,
+  Indicator: () => Indicator5,
+  IndicatorGroup: () => IndicatorGroup,
+  Item: () => Item3,
+  ItemContext: () => SelectItemContext,
+  ItemGroup: () => ItemGroup,
+  ItemGroupLabel: () => ItemGroupLabel,
+  ItemIndicator: () => ItemIndicator2,
+  ItemText: () => ItemText2,
+  Label: () => Label4,
+  List: () => List2,
+  Positioner: () => Positioner3,
+  Root: () => Root9,
+  Trigger: () => Trigger4,
+  ValueText: () => ValueText
+});
+var { withProvider: withProvider7, withContext: withContext9 } = 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 Root9 = withProvider7(Select.Root, "root");
+var ClearTrigger = withContext9(Select.ClearTrigger, "clearTrigger");
+var Content4 = withContext9(Select.Content, "content");
+var Control3 = withContext9(Select.Control, "control");
+var IndicatorGroup = withContext9(ark$1.div, "indicatorGroup");
+var Item3 = withContext9(Select.Item, "item");
+var ItemGroup = withContext9(Select.ItemGroup, "itemGroup");
+var ItemGroupLabel = withContext9(Select.ItemGroupLabel, "itemGroupLabel");
+var ItemText2 = withContext9(Select.ItemText, "itemText");
+var Label4 = withContext9(Select.Label, "label");
+var List2 = withContext9(Select.List, "list");
+var Positioner3 = withContext9(Select.Positioner, "positioner");
+var Trigger4 = withContext9(Select.Trigger, "trigger");
+var ValueText = withContext9(Select.ValueText, "valueText");
+var Indicator5 = withContext9(Select.Indicator, "indicator", {
+  defaultProps: { children: /* @__PURE__ */ jsx(ChevronsUpDownIcon, {}) }
+});
+var HiddenSelect = Select.HiddenSelect;
+var StyledItemIndicator = withContext9(Select.ItemIndicator, "itemIndicator");
+var ItemIndicator2 = forwardRef(
+  function ItemIndicator3(props, ref) {
+    const item = useSelectItemContext();
+    return item.selected ? /* @__PURE__ */ jsx(StyledItemIndicator, { ref, ...props, children: /* @__PURE__ */ jsx(CheckIcon, {}) }) : /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", focusable: "false" });
+  }
+);
+
+// src/components/Slider.tsx
+var Slider_exports = {};
+__export(Slider_exports, {
+  Context: () => SliderContext,
+  Control: () => Control4,
+  DraggingIndicator: () => DraggingIndicator,
+  HiddenInput: () => HiddenInput3,
+  Label: () => Label5,
+  Marker: () => Marker,
+  MarkerGroup: () => MarkerGroup,
+  MarkerIndicator: () => MarkerIndicator,
+  Marks: () => Marks,
+  Range: () => Range,
+  Root: () => Root10,
+  Thumb: () => Thumb2,
+  Thumbs: () => Thumbs,
+  Track: () => Track,
+  ValueText: () => ValueText2
+});
+var StyleContextInternal = createContext$1(null);
+var Root10 = forwardRef(
+  function SliderRoot(props, ref) {
+    const { orientation, size, variant, colorPalette, className, ...arkProps } = props;
+    const styles = slider({ orientation, size, variant });
+    const colorPaletteClass = colorPalette ? `color-palette_${colorPalette}` : "";
+    const combinedClassName = [styles.root, colorPaletteClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(StyleContextInternal.Provider, { value: styles, children: /* @__PURE__ */ jsx(
+      Slider.Root,
+      {
+        ref,
+        orientation,
+        className: combinedClassName,
+        ...arkProps
+      }
+    ) });
+  }
+);
+var createStyledComponent = (Component, slot, displayName) => {
+  const StyledComponent = forwardRef((props, ref) => {
+    const styles = useContext(StyleContextInternal);
+    const slotClass = styles?.[slot];
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsx(Component, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+  });
+  StyledComponent.displayName = displayName;
+  return StyledComponent;
+};
+var Control4 = createStyledComponent(Slider.Control, "control", "Control");
+var Track = createStyledComponent(Slider.Track, "track", "Track");
+var Range = createStyledComponent(Slider.Range, "range", "Range");
+var Thumb2 = forwardRef((props, ref) => {
+  const styles = useContext(StyleContextInternal);
+  const slotClass = styles?.thumb;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(Slider.Thumb, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+Thumb2.displayName = "Thumb";
+var Label5 = forwardRef((props, ref) => {
+  const styles = useContext(StyleContextInternal);
+  const slotClass = styles?.label;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(Slider.Label, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+Label5.displayName = "Label";
+var ValueText2 = forwardRef((props, ref) => {
+  const styles = useContext(StyleContextInternal);
+  const slotClass = styles?.valueText;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(Slider.ValueText, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+ValueText2.displayName = "ValueText";
+var Marker = forwardRef((props, ref) => {
+  const styles = useContext(StyleContextInternal);
+  const slotClass = styles?.marker;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(Slider.Marker, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+Marker.displayName = "Marker";
+var MarkerGroup = forwardRef((props, ref) => {
+  const styles = useContext(StyleContextInternal);
+  const slotClass = styles?.markerGroup;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(Slider.MarkerGroup, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+MarkerGroup.displayName = "MarkerGroup";
+var MarkerIndicator = forwardRef((props, ref) => {
+  const styles = useContext(StyleContextInternal);
+  const slotClass = styles?.markerIndicator;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(ark$1.div, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+MarkerIndicator.displayName = "MarkerIndicator";
+var DraggingIndicator = forwardRef((props, ref) => {
+  const styles = useContext(StyleContextInternal);
+  const slotClass = styles?.draggingIndicator;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsx(Slider.DraggingIndicator, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+DraggingIndicator.displayName = "DraggingIndicator";
+var HiddenInput3 = Slider.HiddenInput;
+var Marks = forwardRef(function Marks2(props, ref) {
+  const { marks, ...rest } = props;
+  if (!marks?.length) return null;
+  return /* @__PURE__ */ jsx(MarkerGroup, { ref, ...rest, children: marks.map((mark, index) => {
+    const value = typeof mark === "number" ? mark : mark.value;
+    const label = typeof mark === "number" ? void 0 : mark.label;
+    return /* @__PURE__ */ jsxs(Marker, { value, children: [
+      /* @__PURE__ */ jsx(MarkerIndicator, {}),
+      label != null && /* @__PURE__ */ jsx("span", { children: label })
+    ] }, index);
+  }) });
+});
+var Thumbs = (props) => {
+  const slider2 = useSliderContext();
+  return slider2.value.map((_, index) => /* @__PURE__ */ jsx(Thumb2, { index, ...props, children: /* @__PURE__ */ jsx(HiddenInput3, {}) }, index));
+};
+
+// src/components/Textarea.tsx
+var Textarea_exports = {};
+__export(Textarea_exports, {
+  Textarea: () => Textarea
+});
+var Textarea = styled(Field.Textarea, textarea);
+
+// src/components/Avatar.tsx
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  Context: () => AvatarContext,
+  Fallback: () => Fallback,
+  Image: () => Image,
+  Root: () => Root11,
+  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: withProvider8, withContext: withContext10 } = createStyleContext(avatar);
+var Root11 = withProvider8(Avatar.Root, "root");
+var RootProvider6 = withProvider8(Avatar.RootProvider, "root");
+var Image = withContext10(Avatar.Image, "image", {
+  defaultProps: {
+    draggable: "false",
+    referrerPolicy: "no-referrer"
+  }
+});
+var StyledFallback = withContext10(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, {});
+  return /* @__PURE__ */ jsx(StyledFallback, { ref, ...rest, children: fallbackContent });
+});
+var getInitials = (name) => {
+  const names = name.trim().split(" ");
+  const firstName = names[0] || "";
+  const lastName = names.length > 1 ? names[names.length - 1] : "";
+  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, {
+  Circle: () => Circle,
+  CircleRange: () => CircleRange,
+  CircleTrack: () => CircleTrack,
+  Label: () => Label6,
+  Range: () => Range2,
+  Root: () => Root12,
+  RootProvider: () => RootProvider7,
+  Track: () => Track2,
+  ValueText: () => ValueText3,
+  View: () => View
+});
+var { withProvider: withProvider9, withContext: withContext11 } = createStyleContext(progress);
+var Root12 = withProvider9(Progress.Root, "root");
+var RootProvider7 = withProvider9(Progress.RootProvider, "root");
+var Circle = withContext11(Progress.Circle, "circle");
+var CircleRange = withContext11(Progress.CircleRange, "circleRange");
+var CircleTrack = withContext11(Progress.CircleTrack, "circleTrack");
+var Label6 = withContext11(Progress.Label, "label");
+var Range2 = withContext11(Progress.Range, "range");
+var Track2 = withContext11(Progress.Track, "track");
+var ValueText3 = withContext11(Progress.ValueText, "valueText");
+var View = withContext11(Progress.View, "view");
+
+// src/components/Skeleton.tsx
+var Skeleton_exports = {};
+__export(Skeleton_exports, {
+  Skeleton: () => Skeleton,
+  SkeletonCircle: () => SkeletonCircle,
+  SkeletonText: () => SkeletonText
+});
+var Skeleton = styled(ark$1.div, skeleton);
+var SkeletonCircle = styled(ark$1.div, skeleton, { defaultProps: { circle: true } });
+var SkeletonText = forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, gap, rootProps, ...skeletonProps } = props;
+    return /* @__PURE__ */ jsx(Stack, { ref, gap, width: "full", ...rootProps, children: [...Array(noOfLines).keys()].map((index) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        height: "4",
+        _last: { maxW: noOfLines === 1 ? "100%" : "80%" },
+        ...skeletonProps
+      },
+      index
+    )) });
+  }
+);
+
+// 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: withProvider10, withContext: withContext12 } = createStyleContext(toast);
+var Root13 = withProvider10(Toast.Root, "root");
+var Title4 = withContext12(Toast.Title, "title");
+var Description4 = withContext12(Toast.Description, "description");
+var ActionTrigger = withContext12(Toast.ActionTrigger, "actionTrigger");
+var CloseTrigger3 = withContext12(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(Root13, { 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, {
+  Anchor: () => Anchor,
+  Arrow: () => Arrow,
+  ArrowTip: () => ArrowTip,
+  Body: () => Body4,
+  CloseTrigger: () => CloseTrigger4,
+  Content: () => Content5,
+  Context: () => PopoverContext,
+  Description: () => Description5,
+  Footer: () => Footer4,
+  Header: () => Header4,
+  Indicator: () => Indicator7,
+  Positioner: () => Positioner4,
+  Root: () => Root14,
+  RootProvider: () => RootProvider8,
+  Title: () => Title5,
+  Trigger: () => Trigger5
+});
+var { withRootProvider: withRootProvider3, withContext: withContext13 } = createStyleContext(popover);
+var Root14 = withRootProvider3(Popover.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true }
+});
+var RootProvider8 = withRootProvider3(Popover.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true }
+});
+var Anchor = withContext13(Popover.Anchor, "anchor");
+var ArrowTip = withContext13(Popover.ArrowTip, "arrowTip");
+var Arrow = withContext13(Popover.Arrow, "arrow", {
+  defaultProps: { children: /* @__PURE__ */ jsx(ArrowTip, {}) }
+});
+var CloseTrigger4 = withContext13(Popover.CloseTrigger, "closeTrigger");
+var Content5 = withContext13(Popover.Content, "content");
+var Description5 = withContext13(Popover.Description, "description");
+var Indicator7 = withContext13(Popover.Indicator, "indicator");
+var Positioner4 = withContext13(Popover.Positioner, "positioner");
+var Title5 = withContext13(Popover.Title, "title");
+var Trigger5 = withContext13(Popover.Trigger, "trigger");
+var Body4 = withContext13(ark$1.div, "body");
+var Header4 = withContext13(ark$1.div, "header");
+var Footer4 = withContext13(ark$1.div, "footer");
+
+// src/components/Tooltip.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  Context: () => TooltipContext,
+  Tooltip: () => Tooltip
+});
+var { withRootProvider: withRootProvider4, withContext: withContext14 } = createStyleContext(tooltip);
+var Root15 = withRootProvider4(Tooltip$1.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true }
+});
+var Arrow2 = withContext14(Tooltip$1.Arrow, "arrow");
+var ArrowTip2 = withContext14(Tooltip$1.ArrowTip, "arrowTip");
+var Content6 = withContext14(Tooltip$1.Content, "content");
+var Positioner5 = withContext14(Tooltip$1.Positioner, "positioner");
+var Trigger6 = withContext14(Tooltip$1.Trigger, "trigger");
+var Tooltip = forwardRef(function Tooltip2(props, ref) {
+  const {
+    showArrow,
+    children,
+    disabled,
+    portalled = true,
+    content,
+    contentProps,
+    portalRef,
+    ...rootProps
+  } = props;
+  if (disabled) return children;
+  return /* @__PURE__ */ jsxs(Root15, { ...rootProps, children: [
+    /* @__PURE__ */ jsx(Trigger6, { asChild: true, children }),
+    /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Positioner5, { children: /* @__PURE__ */ jsxs(Content6, { ref, ...contentProps, children: [
+      showArrow && /* @__PURE__ */ jsx(Arrow2, { children: /* @__PURE__ */ jsx(ArrowTip2, {}) }),
+      content
+    ] }) }) })
+  ] });
+});
+
+// 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) {
+  return config;
+}
+function defineSlotRecipe(config) {
+  return config;
+}
+
+// src/recipes/button.recipe.ts
+var buttonRecipe = defineRecipe({
+  className: "button",
+  description: "Material Design 3 button component",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "sm",
+    fontFamily: "body",
+    fontWeight: "500",
+    borderRadius: "full",
+    cursor: "pointer",
+    transition: "all",
+    transitionDuration: "fast",
+    transitionTimingFunction: "standard",
+    outline: "none",
+    border: "none",
+    textDecoration: "none",
+    _disabled: {
+      opacity: 0.38,
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    },
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "primary",
+      outlineOffset: "2px"
+    }
+  },
+  variants: {
+    variant: {
+      filled: {
+        bg: "primary",
+        color: "onPrimary",
+        _hover: {
+          opacity: 0.92,
+          shadow: "level1"
+        },
+        _active: {
+          opacity: 0.88
+        }
+      },
+      outlined: {
+        bg: "transparent",
+        color: "primary",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "outline",
+        _hover: {
+          bg: "primary",
+          bgOpacity: 0.08
+        },
+        _active: {
+          bg: "primary",
+          bgOpacity: 0.12
+        }
+      },
+      text: {
+        bg: "transparent",
+        color: "primary",
+        _hover: {
+          bg: "primary",
+          bgOpacity: 0.08
+        },
+        _active: {
+          bg: "primary",
+          bgOpacity: 0.12
+        }
+      },
+      elevated: {
+        bg: "surfaceContainerLow",
+        color: "primary",
+        shadow: "level1",
+        _hover: {
+          shadow: "level2",
+          bg: "surfaceContainerLow"
+        },
+        _active: {
+          shadow: "level1"
+        }
+      },
+      tonal: {
+        bg: "secondaryContainer",
+        color: "onSecondaryContainer",
+        _hover: {
+          shadow: "level1"
+        },
+        _active: {
+          shadow: "none"
+        }
+      }
+    },
+    size: {
+      sm: {
+        height: "32px",
+        px: "md",
+        fontSize: "labelMedium",
+        lineHeight: "labelMedium"
+      },
+      md: {
+        height: "40px",
+        px: "lg",
+        fontSize: "labelLarge",
+        lineHeight: "labelLarge"
+      },
+      lg: {
+        height: "48px",
+        px: "xl",
+        fontSize: "labelLarge",
+        lineHeight: "labelLarge"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "filled",
+    size: "md"
+  }
+});
+
+// src/recipes/card.recipe.ts
+var cardRecipe = defineRecipe({
+  className: "card",
+  description: "Material Design 3 card component",
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: "medium",
+    overflow: "hidden",
+    transition: "all",
+    transitionDuration: "fast",
+    transitionTimingFunction: "standard"
+  },
+  variants: {
+    variant: {
+      elevated: {
+        bg: "surfaceContainerLow",
+        shadow: "level1",
+        _hover: {
+          shadow: "level2"
+        }
+      },
+      filled: {
+        bg: "surfaceContainerHighest"
+      },
+      outlined: {
+        bg: "surface",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "outlineVariant"
+      }
+    },
+    interactive: {
+      true: {
+        cursor: "pointer",
+        _hover: {
+          opacity: 0.96
+        },
+        _active: {
+          opacity: 0.92
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "elevated",
+    interactive: false
+  }
+});
+
+// src/recipes/icon-button.recipe.ts
+var iconButtonRecipe = defineRecipe({
+  className: "icon-button",
+  description: "Material Design 3 icon button component",
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "full",
+    cursor: "pointer",
+    transition: "all",
+    transitionDuration: "fast",
+    transitionTimingFunction: "standard",
+    outline: "none",
+    border: "none",
+    p: "0",
+    _disabled: {
+      opacity: 0.38,
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    },
+    _focusVisible: {
+      outline: "2px solid",
+      outlineColor: "primary",
+      outlineOffset: "2px"
+    }
+  },
+  variants: {
+    variant: {
+      standard: {
+        bg: "transparent",
+        color: "onSurfaceVariant",
+        _hover: {
+          bg: "onSurfaceVariant",
+          bgOpacity: 0.08
+        }
+      },
+      filled: {
+        bg: "primary",
+        color: "onPrimary",
+        _hover: {
+          opacity: 0.92
+        }
+      },
+      tonal: {
+        bg: "secondaryContainer",
+        color: "onSecondaryContainer",
+        _hover: {
+          opacity: 0.92
+        }
+      },
+      outlined: {
+        bg: "transparent",
+        color: "onSurfaceVariant",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "outline",
+        _hover: {
+          bg: "onSurfaceVariant",
+          bgOpacity: 0.08
+        }
+      }
+    },
+    size: {
+      sm: {
+        width: "32px",
+        height: "32px",
+        "& svg": {
+          width: "18px",
+          height: "18px"
+        }
+      },
+      md: {
+        width: "40px",
+        height: "40px",
+        "& svg": {
+          width: "24px",
+          height: "24px"
+        }
+      },
+      lg: {
+        width: "48px",
+        height: "48px",
+        "& svg": {
+          width: "24px",
+          height: "24px"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "standard",
+    size: "md"
+  }
+});
+
+// src/recipes/input.recipe.ts
+var inputRecipe = defineRecipe({
+  className: "input",
+  description: "Material Design 3 text field component",
+  base: {
+    width: "100%",
+    fontFamily: "body",
+    fontSize: "bodyLarge",
+    lineHeight: "bodyLarge",
+    color: "onSurface",
+    bg: "transparent",
+    borderRadius: "extraSmall",
+    px: "md",
+    transition: "all",
+    transitionDuration: "fast",
+    outline: "none",
+    _placeholder: {
+      color: "onSurfaceVariant",
+      opacity: 0.6
+    },
+    _focus: {
+      outline: "none"
+    },
+    _disabled: {
+      opacity: 0.38,
+      cursor: "not-allowed"
+    }
+  },
+  variants: {
+    variant: {
+      filled: {
+        bg: "surfaceContainerHighest",
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        borderBottomColor: "onSurfaceVariant",
+        borderTopLeftRadius: "extraSmall",
+        borderTopRightRadius: "extraSmall",
+        borderBottomLeftRadius: "0",
+        borderBottomRightRadius: "0",
+        _hover: {
+          bg: "surfaceContainerHigh"
+        },
+        _focus: {
+          borderBottomWidth: "2px",
+          borderBottomColor: "primary"
+        }
+      },
+      outlined: {
+        bg: "transparent",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "outline",
+        _hover: {
+          borderColor: "onSurface"
+        },
+        _focus: {
+          borderWidth: "2px",
+          borderColor: "primary"
+        }
+      }
+    },
+    size: {
+      sm: {
+        height: "40px",
+        fontSize: "bodySmall",
+        lineHeight: "bodySmall"
+      },
+      md: {
+        height: "56px",
+        fontSize: "bodyLarge",
+        lineHeight: "bodyLarge"
+      }
+    },
+    state: {
+      error: {
+        borderColor: "error",
+        _focus: {
+          borderColor: "error"
+        }
+      },
+      disabled: {
+        opacity: 0.38,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "outlined",
+    size: "md"
+  }
+});
+
+// src/recipes/dialog.recipe.ts
+var dialogRecipe = defineSlotRecipe({
+  className: "dialog",
+  description: "Material Design 3 dialog component",
+  slots: ["backdrop", "positioner", "content", "title", "description", "closeTrigger"],
+  base: {
+    backdrop: {
+      position: "fixed",
+      inset: "0",
+      bg: "scrim",
+      opacity: 0.4,
+      zIndex: "modal",
+      animation: "fadeIn",
+      _open: {
+        animation: "fadeIn"
+      },
+      _closed: {
+        animation: "fadeOut"
+      }
+    },
+    positioner: {
+      position: "fixed",
+      inset: "0",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      zIndex: "modal",
+      p: "lg"
+    },
+    content: {
+      position: "relative",
+      bg: "surfaceContainerHigh",
+      color: "onSurface",
+      borderRadius: "extraLarge",
+      boxShadow: "level3",
+      display: "flex",
+      flexDirection: "column",
+      maxWidth: "90vw",
+      maxHeight: "90vh",
+      overflow: "hidden",
+      animation: "scaleIn",
+      _open: {
+        animation: "scaleIn"
+      },
+      _closed: {
+        animation: "scaleOut"
+      }
+    },
+    title: {
+      fontFamily: "headline",
+      fontSize: "headlineSmall",
+      fontWeight: "regular",
+      color: "onSurface",
+      px: "xl",
+      pt: "xl",
+      pb: "md"
+    },
+    description: {
+      fontFamily: "body",
+      fontSize: "bodyMedium",
+      color: "onSurfaceVariant",
+      px: "xl",
+      pb: "xl",
+      flex: "1",
+      overflow: "auto"
+    },
+    closeTrigger: {
+      position: "absolute",
+      top: "md",
+      right: "md",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "40px",
+      height: "40px",
+      borderRadius: "full",
+      cursor: "pointer",
+      color: "onSurfaceVariant",
+      bg: "transparent",
+      border: "none",
+      transition: "all",
+      transitionDuration: "fast",
+      _hover: {
+        bg: "surfaceContainerHighest"
+      },
+      _focus: {
+        outline: "none",
+        bg: "surfaceContainerHighest"
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        content: {
+          width: "280px",
+          minHeight: "140px"
+        }
+      },
+      md: {
+        content: {
+          width: "560px",
+          minHeight: "200px"
+        }
+      },
+      lg: {
+        content: {
+          width: "800px",
+          minHeight: "300px"
+        }
+      },
+      fullscreen: {
+        content: {
+          width: "100vw",
+          height: "100vh",
+          maxWidth: "100vw",
+          maxHeight: "100vh",
+          borderRadius: "none"
+        },
+        positioner: {
+          p: "0"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/recipes/switch.recipe.ts
+var switchRecipe = defineSlotRecipe({
+  className: "switchControl",
+  description: "Material Design 3 switch component",
+  slots: ["root", "control", "thumb", "label"],
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "sm",
+      cursor: "pointer",
+      userSelect: "none",
+      _disabled: {
+        cursor: "not-allowed",
+        opacity: 0.38
+      }
+    },
+    control: {
+      position: "relative",
+      display: "inline-flex",
+      alignItems: "center",
+      width: "52px",
+      height: "32px",
+      borderRadius: "full",
+      bg: "surfaceContainerHighest",
+      border: "2px solid",
+      borderColor: "outline",
+      transition: "all",
+      transitionDuration: "fast",
+      flexShrink: 0,
+      _checked: {
+        bg: "primary",
+        borderColor: "primary"
+      },
+      _disabled: {
+        bg: "surfaceVariant",
+        borderColor: "onSurface",
+        opacity: 0.12
+      }
+    },
+    thumb: {
+      position: "absolute",
+      left: "4px",
+      width: "16px",
+      height: "16px",
+      borderRadius: "full",
+      bg: "outline",
+      transition: "all",
+      transitionDuration: "fast",
+      _checked: {
+        left: "28px",
+        width: "24px",
+        height: "24px",
+        bg: "onPrimary"
+      },
+      _disabled: {
+        bg: "onSurface",
+        opacity: 0.38
+      }
+    },
+    label: {
+      fontFamily: "body",
+      fontSize: "bodyMedium",
+      color: "onSurface",
+      userSelect: "none",
+      _disabled: {
+        opacity: 0.38
+      }
+    }
+  },
+  variants: {
+    size: {
+      sm: {
+        control: {
+          width: "44px",
+          height: "24px"
+        },
+        thumb: {
+          width: "12px",
+          height: "12px",
+          left: "4px",
+          _checked: {
+            left: "24px",
+            width: "16px",
+            height: "16px"
+          }
+        },
+        label: {
+          fontSize: "bodySmall"
+        }
+      },
+      md: {
+        control: {
+          width: "52px",
+          height: "32px"
+        },
+        thumb: {
+          width: "16px",
+          height: "16px",
+          left: "4px",
+          _checked: {
+            left: "28px",
+            width: "24px",
+            height: "24px"
+          }
+        },
+        label: {
+          fontSize: "bodyMedium"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// src/languages/material3.language.ts
+var material3Language = {
+  name: "material3",
+  version: "1.0.0",
+  colors: {
+    // From Material Theme Builder export
+    primary: {
+      0: "#000000",
+      10: "#102000",
+      20: "#1F3700",
+      30: "#2F4F00",
+      40: "#3F6900",
+      50: "#518500",
+      60: "#64A104",
+      70: "#7DBD2A",
+      80: "#97D945",
+      90: "#B2F65F",
+      95: "#D2FF9B",
+      99: "#F9FFE9",
+      100: "#FFFFFF"
+    },
+    secondary: {
+      0: "#000000",
+      10: "#121F04",
+      20: "#263515",
+      30: "#3C4C2A",
+      40: "#54643F",
+      50: "#6C7D56",
+      60: "#85976E",
+      70: "#A0B187",
+      80: "#BBCDA1",
+      90: "#D7E9BB",
+      95: "#E5F7C9",
+      99: "#F9FFE9",
+      100: "#FFFFFF"
+    },
+    tertiary: {
+      0: "#000000",
+      10: "#00201E",
+      20: "#003735",
+      30: "#00504C",
+      40: "#046A66",
+      50: "#30837F",
+      60: "#4D9D98",
+      70: "#69B8B3",
+      80: "#85D4CF",
+      90: "#A1F1EB",
+      95: "#B0FFF9",
+      99: "#F2FFFD",
+      100: "#FFFFFF"
+    },
+    neutral: {
+      0: "#000000",
+      10: "#1B1C18",
+      20: "#30312C",
+      30: "#464742",
+      40: "#5E5F59",
+      50: "#777771",
+      60: "#91918B",
+      70: "#ABACA5",
+      80: "#C7C7C0",
+      90: "#E3E3DB",
+      95: "#F2F1E9",
+      99: "#FDFCF5",
+      100: "#FFFFFF"
+    },
+    neutralVariant: {
+      0: "#000000",
+      10: "#191D14",
+      20: "#2E3228",
+      30: "#44483D",
+      40: "#5C6054",
+      50: "#75796C",
+      60: "#8F9285",
+      70: "#A9AD9F",
+      80: "#C5C8BA",
+      90: "#E1E4D5",
+      95: "#EFF2E3",
+      99: "#FBFEEE",
+      100: "#FFFFFF"
+    },
+    error: {
+      0: "#000000",
+      10: "#410E0B",
+      20: "#601410",
+      30: "#8C1D18",
+      40: "#B3261E",
+      50: "#DC362E",
+      60: "#E46962",
+      70: "#EC928E",
+      80: "#F2B8B5",
+      90: "#F9DEDC",
+      95: "#FCEEEE",
+      99: "#FFFBF9",
+      100: "#FFFFFF"
+    }
+  },
+  semantic: {
+    // Light theme from Material Theme Builder
+    primary: "#4C662B",
+    onPrimary: "#FFFFFF",
+    primaryContainer: "#CDEDA3",
+    onPrimaryContainer: "#354E16",
+    secondary: "#586249",
+    onSecondary: "#FFFFFF",
+    secondaryContainer: "#DCE7C8",
+    onSecondaryContainer: "#404A33",
+    tertiary: "#386663",
+    onTertiary: "#FFFFFF",
+    tertiaryContainer: "#BCECE7",
+    onTertiaryContainer: "#1F4E4B",
+    error: "#BA1A1A",
+    onError: "#FFFFFF",
+    errorContainer: "#FFDAD6",
+    onErrorContainer: "#93000A",
+    surface: "#F9FAEF",
+    onSurface: "#1A1C16",
+    surfaceVariant: "#E1E4D5",
+    onSurfaceVariant: "#44483D",
+    surfaceContainerLowest: "#FFFFFF",
+    surfaceContainerLow: "#F3F4E9",
+    surfaceContainer: "#EEEFE3",
+    surfaceContainerHigh: "#E8E9DE",
+    surfaceContainerHighest: "#E2E3D8",
+    outline: "#75796C",
+    outlineVariant: "#C5C8BA",
+    inverseSurface: "#2F312A",
+    inverseOnSurface: "#F1F2E6",
+    inversePrimary: "#B1D18A",
+    background: "#F9FAEF",
+    onBackground: "#1A1C16",
+    scrim: "#000000",
+    shadow: "#000000"
+  },
+  // Dark theme semantic colors (for reference/dark mode implementation)
+  semanticDark: {
+    primary: "#B1D18A",
+    onPrimary: "#1F3701",
+    primaryContainer: "#354E16",
+    onPrimaryContainer: "#CDEDA3",
+    secondary: "#BFCBAD",
+    onSecondary: "#2A331E",
+    secondaryContainer: "#404A33",
+    onSecondaryContainer: "#DCE7C8",
+    tertiary: "#A0D0CB",
+    onTertiary: "#003735",
+    tertiaryContainer: "#1F4E4B",
+    onTertiaryContainer: "#BCECE7",
+    error: "#FFB4AB",
+    onError: "#690005",
+    errorContainer: "#93000A",
+    onErrorContainer: "#FFDAD6",
+    surface: "#12140E",
+    onSurface: "#E2E3D8",
+    surfaceVariant: "#44483D",
+    onSurfaceVariant: "#C5C8BA",
+    surfaceContainerLowest: "#0C0F09",
+    surfaceContainerLow: "#1A1C16",
+    surfaceContainer: "#1E201A",
+    surfaceContainerHigh: "#282B24",
+    surfaceContainerHighest: "#33362E",
+    outline: "#8F9285",
+    outlineVariant: "#44483D",
+    inverseSurface: "#E2E3D8",
+    inverseOnSurface: "#2F312A",
+    inversePrimary: "#4C662B",
+    background: "#12140E",
+    onBackground: "#E2E3D8",
+    scrim: "#000000",
+    shadow: "#000000"
+  },
+  typography: {
+    fonts: {
+      display: '"Fraunces", Georgia, serif',
+      body: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      mono: '"JetBrains Mono", "Fira Code", Consolas, monospace'
+    },
+    scale: {
+      displayLarge: {
+        fontSize: "57px",
+        lineHeight: "64px",
+        fontWeight: "400",
+        letterSpacing: "-0.25px",
+        fontFamily: "display"
+      },
+      displayMedium: {
+        fontSize: "45px",
+        lineHeight: "52px",
+        fontWeight: "400",
+        letterSpacing: "0px",
+        fontFamily: "display"
+      },
+      displaySmall: {
+        fontSize: "36px",
+        lineHeight: "44px",
+        fontWeight: "400",
+        letterSpacing: "0px",
+        fontFamily: "display"
+      },
+      headlineLarge: {
+        fontSize: "32px",
+        lineHeight: "40px",
+        fontWeight: "400",
+        letterSpacing: "0px",
+        fontFamily: "display"
+      },
+      headlineMedium: {
+        fontSize: "28px",
+        lineHeight: "36px",
+        fontWeight: "400",
+        letterSpacing: "0px",
+        fontFamily: "display"
+      },
+      headlineSmall: {
+        fontSize: "24px",
+        lineHeight: "32px",
+        fontWeight: "400",
+        letterSpacing: "0px",
+        fontFamily: "display"
+      },
+      titleLarge: {
+        fontSize: "22px",
+        lineHeight: "28px",
+        fontWeight: "500",
+        letterSpacing: "0px",
+        fontFamily: "body"
+      },
+      titleMedium: {
+        fontSize: "16px",
+        lineHeight: "24px",
+        fontWeight: "500",
+        letterSpacing: "0.15px",
+        fontFamily: "body"
+      },
+      titleSmall: {
+        fontSize: "14px",
+        lineHeight: "20px",
+        fontWeight: "500",
+        letterSpacing: "0.1px",
+        fontFamily: "body"
+      },
+      bodyLarge: {
+        fontSize: "16px",
+        lineHeight: "24px",
+        fontWeight: "400",
+        letterSpacing: "0.5px",
+        fontFamily: "body"
+      },
+      bodyMedium: {
+        fontSize: "14px",
+        lineHeight: "20px",
+        fontWeight: "400",
+        letterSpacing: "0.25px",
+        fontFamily: "body"
+      },
+      bodySmall: {
+        fontSize: "12px",
+        lineHeight: "16px",
+        fontWeight: "400",
+        letterSpacing: "0.4px",
+        fontFamily: "body"
+      },
+      labelLarge: {
+        fontSize: "14px",
+        lineHeight: "20px",
+        fontWeight: "500",
+        letterSpacing: "0.1px",
+        fontFamily: "body"
+      },
+      labelMedium: {
+        fontSize: "12px",
+        lineHeight: "16px",
+        fontWeight: "500",
+        letterSpacing: "0.5px",
+        fontFamily: "body"
+      },
+      labelSmall: {
+        fontSize: "11px",
+        lineHeight: "16px",
+        fontWeight: "500",
+        letterSpacing: "0.5px",
+        fontFamily: "body"
+      }
+    }
+  },
+  spacing: {
+    none: "0px",
+    xxs: "2px",
+    xs: "4px",
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+    xl: "32px",
+    xxl: "48px",
+    xxxl: "64px"
+  },
+  shape: {
+    radii: {
+      none: "0px",
+      extraSmall: "4px",
+      small: "8px",
+      medium: "12px",
+      large: "16px",
+      extraLarge: "28px",
+      full: "9999px"
+    },
+    style: "rounded"
+  },
+  elevation: {
+    levels: {
+      level0: "none",
+      level1: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)",
+      level2: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)",
+      level3: "0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3)",
+      level4: "0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3)",
+      level5: "0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3)"
+    },
+    style: "shadow"
+  },
+  motion: {
+    durations: {
+      instant: "0ms",
+      fast: "100ms",
+      normal: "200ms",
+      slow: "300ms",
+      slower: "500ms"
+    },
+    easings: {
+      standard: "cubic-bezier(0.2, 0, 0, 1)",
+      standardDecelerate: "cubic-bezier(0, 0, 0, 1)",
+      standardAccelerate: "cubic-bezier(0.3, 0, 1, 1)",
+      emphasized: "cubic-bezier(0.2, 0, 0, 1)",
+      emphasizedDecelerate: "cubic-bezier(0.05, 0.7, 0.1, 1)",
+      emphasizedAccelerate: "cubic-bezier(0.3, 0, 0.8, 0.15)"
+    },
+    style: "expressive"
+  }
+};
+
+// src/languages/transform.ts
+function transformToPandaTheme(language) {
+  return {
+    tokens: transformTokens(language),
+    semanticTokens: transformSemanticTokens(language),
+    textStyles: transformTextStyles(language)
+  };
+}
+function transformTokens(language) {
+  return {
+    colors: transformColorPalettes(language.colors),
+    fonts: {
+      display: { value: language.typography.fonts.display },
+      body: { value: language.typography.fonts.body },
+      mono: { value: language.typography.fonts.mono }
+    },
+    fontSizes: extractFontSizes(language.typography.scale),
+    lineHeights: extractLineHeights(language.typography.scale),
+    fontWeights: extractFontWeights(language.typography.scale),
+    letterSpacings: extractLetterSpacings(language.typography.scale),
+    spacing: objectToTokens(language.spacing),
+    radii: objectToTokens(language.shape.radii),
+    shadows: objectToTokens(language.elevation.levels),
+    durations: objectToTokens(language.motion.durations),
+    easings: objectToTokens(language.motion.easings)
+  };
+}
+function transformSemanticTokens(language) {
+  const light = language.semantic;
+  const dark = language.semanticDark || light;
+  return {
+    colors: Object.fromEntries(
+      Object.entries(light).map(([key, lightValue]) => [
+        key,
+        {
+          value: {
+            base: lightValue,
+            _dark: dark[key] || lightValue
+          }
+        }
+      ])
+    )
+  };
+}
+function transformTextStyles(language) {
+  const scale = language.typography.scale;
+  return Object.fromEntries(
+    Object.entries(scale).map(([name, style]) => [
+      name,
+      {
+        value: {
+          fontFamily: style.fontFamily || "body",
+          fontSize: style.fontSize,
+          lineHeight: style.lineHeight,
+          fontWeight: style.fontWeight,
+          letterSpacing: style.letterSpacing
+        }
+      }
+    ])
+  );
+}
+function transformColorPalettes(palettes) {
+  return Object.fromEntries(
+    Object.entries(palettes).map(([name, palette]) => [
+      name,
+      Object.fromEntries(
+        Object.entries(palette).map(([tone, value]) => [
+          tone,
+          { value }
+        ])
+      )
+    ])
+  );
+}
+function objectToTokens(obj) {
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => [key, { value }])
+  );
+}
+function extractFontSizes(scale) {
+  return Object.fromEntries(
+    Object.entries(scale).map(([name, style]) => [
+      name,
+      { value: style.fontSize }
+    ])
+  );
+}
+function extractLineHeights(scale) {
+  return Object.fromEntries(
+    Object.entries(scale).map(([name, style]) => [
+      name,
+      { value: style.lineHeight }
+    ])
+  );
+}
+function extractFontWeights(scale) {
+  const weights = /* @__PURE__ */ new Map();
+  Object.values(scale).forEach((style) => {
+    weights.set(style.fontWeight, style.fontWeight);
+  });
+  return Object.fromEntries(
+    Array.from(weights.entries()).map(([key, value]) => [
+      key,
+      { value }
+    ])
+  );
+}
+function extractLetterSpacings(scale) {
+  return Object.fromEntries(
+    Object.entries(scale).map(([name, style]) => [
+      name,
+      { value: style.letterSpacing }
+    ])
+  );
+}
+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, Icon_exports as Icon, IconButton_exports as IconButton, 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_exports as 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