@discourser/design-system 0.1.7 → 0.2.1

package/dist/index.cjs

@@ -1,168 +1,776 @@
 'use strict';
 
-var react = require('react');
+var factory = require('@ark-ui/react/factory');
+var utils = require('@ark-ui/react/utils');
+var react$1 = require('react');
+var jsx = require('@discourser/design-system/styled-system/jsx');
 var recipes = require('@discourser/design-system/styled-system/recipes');
-var clsx = require('clsx');
+var react = require('@ark-ui/react');
 var jsxRuntime = require('react/jsx-runtime');
-var field = require('@ark-ui/react/field');
 var dialog = require('@ark-ui/react/dialog');
-var portal = require('@ark-ui/react/portal');
 var _switch = require('@ark-ui/react/switch');
+var accordion = require('@ark-ui/react/accordion');
+var tabs = require('@ark-ui/react/tabs');
+var checkbox = require('@ark-ui/react/checkbox');
+var radioGroup = require('@ark-ui/react/radio-group');
+var select = require('@ark-ui/react/select');
+var slider = require('@ark-ui/react/slider');
+var field = require('@ark-ui/react/field');
+var avatar = require('@ark-ui/react/avatar');
+var progress = require('@ark-ui/react/progress');
+var portal = require('@ark-ui/react/portal');
+var toast = require('@ark-ui/react/toast');
+var popover = require('@ark-ui/react/popover');
+var tooltip = require('@ark-ui/react/tooltip');
+var clsx = require('clsx');
 
-function cn(...inputs) {
-  return clsx.clsx(inputs);
-}
-var Button = react.forwardRef(
-  ({ children, variant, size, leftIcon, rightIcon, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
+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 = jsx.styled(react.ark.div, recipes.group);
+
+// src/components/AbsoluteCenter.tsx
+var AbsoluteCenter_exports = {};
+__export(AbsoluteCenter_exports, {
+  AbsoluteCenter: () => AbsoluteCenter
+});
+var AbsoluteCenter = jsx.styled(factory.ark.div, recipes.absoluteCenter);
+
+// src/components/Spinner.tsx
+var Spinner_exports = {};
+__export(Spinner_exports, {
+  Spinner: () => Spinner
+});
+var Spinner = jsx.styled(factory.ark.span, recipes.spinner);
+var Span = jsx.styled("span");
+var Loader = react$1.forwardRef(function Loader2(props, ref) {
+  const {
+    spinner: spinner2 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Span, { ref, display: "contents", ...rest, children: [
+      spinnerPlacement === "start" && spinner2,
+      text,
+      spinnerPlacement === "end" && spinner2
+    ] });
+  }
+  if (spinner2) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(Span, { ref, display: "contents", ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AbsoluteCenter, { display: "inline-flex", children: spinner2 }),
+      /* @__PURE__ */ jsxRuntime.jsx(Span, { visibility: "hidden", display: "contents", children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Span, { ref, display: "contents", ...rest, children });
+});
+var BaseButton = jsx.styled(factory.ark.button, recipes.button);
+var Button = react$1.forwardRef(function Button2(props, ref) {
+  const propsContext = useButtonPropsContext();
+  const buttonProps = react$1.useMemo(
+    () => utils.mergeProps(propsContext, props),
+    [propsContext, props]
+  );
+  const { loading, loadingText, children, spinner: spinner2, spinnerPlacement, ...rest } = buttonProps;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BaseButton,
+    {
+      type: "button",
+      ref,
+      ...rest,
+      "data-loading": loading ? "" : void 0,
+      disabled: loading || rest.disabled,
+      children: !props.asChild && loading ? /* @__PURE__ */ jsxRuntime.jsx(Loader, { spinner: spinner2, text: loadingText, spinnerPlacement, children }) : children
+    }
+  );
+});
+var ButtonGroup = react$1.forwardRef(
+  function ButtonGroup2(props, ref) {
+    const [variantProps, otherProps] = react$1.useMemo(() => recipes.button.splitVariantProps(props), [props]);
+    return /* @__PURE__ */ jsxRuntime.jsx(ButtonPropsProvider, { value: variantProps, children: /* @__PURE__ */ jsxRuntime.jsx(Group, { ref, ...otherProps }) });
+  }
+);
+var [ButtonPropsProvider, useButtonPropsContext] = utils.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 } = jsx.createStyleContext(recipes.card);
+var Root = withProvider(factory.ark.div, "root");
+var Header = withContext(factory.ark.div, "header");
+var Body = withContext(factory.ark.div, "body");
+var Footer = withContext(factory.ark.div, "footer");
+var Title = withContext(factory.ark.h3, "title");
+var Description = withContext(factory.ark.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: () => dialog.DialogContext,
+  Description: () => Description2,
+  Footer: () => Footer2,
+  Header: () => Header2,
+  Positioner: () => Positioner,
+  Root: () => Root2,
+  Title: () => Title2,
+  Trigger: () => Trigger
+});
+var { withRootProvider, withContext: withContext2 } = jsx.createStyleContext(recipes.dialog);
+var Root2 = withRootProvider(dialog.Dialog.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true }
+});
+var Backdrop = withContext2(dialog.Dialog.Backdrop, "backdrop");
+var CloseTrigger = withContext2(dialog.Dialog.CloseTrigger, "closeTrigger");
+var Content = withContext2(dialog.Dialog.Content, "content");
+var Description2 = withContext2(dialog.Dialog.Description, "description");
+var Positioner = withContext2(dialog.Dialog.Positioner, "positioner");
+var Title2 = withContext2(dialog.Dialog.Title, "title");
+var Trigger = withContext2(dialog.Dialog.Trigger, "trigger");
+var Body2 = withContext2(factory.ark.div, "body");
+var Header2 = withContext2(factory.ark.div, "header");
+var Footer2 = withContext2(factory.ark.div, "footer");
+
+// src/components/IconButton.tsx
+var IconButton_exports = {};
+__export(IconButton_exports, {
+  IconButton: () => IconButton
+});
+var IconButton = react$1.forwardRef(
+  function IconButton2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Button, { px: "0", py: "0", ref, ...props });
+  }
+);
+
+// src/components/Switch.tsx
+var Switch_exports = {};
+__export(Switch_exports, {
+  Context: () => _switch.SwitchContext,
+  Control: () => Control,
+  HiddenInput: () => HiddenInput,
+  Label: () => Label,
+  Root: () => Root3,
+  Thumb: () => Thumb
+});
+var { withProvider: withProvider2, withContext: withContext3 } = jsx.createStyleContext(recipes.switchComponent);
+var Root3 = withProvider2(_switch.Switch.Root, "root");
+var Label = withContext3(_switch.Switch.Label, "label");
+var Thumb = withContext3(_switch.Switch.Thumb, "thumb");
+var HiddenInput = _switch.Switch.HiddenInput;
+var Control = withContext3(_switch.Switch.Control, "control", {
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(Thumb, {}) }
+});
+
+// src/components/Accordion.tsx
+var Accordion_exports = {};
+__export(Accordion_exports, {
+  Context: () => accordion.AccordionContext,
+  Item: () => Item,
+  ItemBody: () => ItemBody,
+  ItemContent: () => ItemContent,
+  ItemIndicator: () => ItemIndicator,
+  ItemTrigger: () => ItemTrigger,
+  Root: () => Root4,
+  RootProvider: () => RootProvider
+});
+var ChevronDownIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" }) });
+var { withProvider: withProvider3, withContext: withContext4 } = jsx.createStyleContext(recipes.accordion);
+var Root4 = withProvider3(accordion.Accordion.Root, "root");
+var RootProvider = withProvider3(accordion.Accordion.RootProvider, "root");
+var Item = withContext4(accordion.Accordion.Item, "item");
+var ItemContent = withContext4(accordion.Accordion.ItemContent, "itemContent");
+var ItemIndicator = withContext4(accordion.Accordion.ItemIndicator, "itemIndicator", {
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) }
+});
+var ItemTrigger = withContext4(accordion.Accordion.ItemTrigger, "itemTrigger");
+var ItemBody = withContext4(factory.ark.div, "itemBody");
+
+// src/components/Drawer.tsx
+var Drawer_exports = {};
+__export(Drawer_exports, {
+  Backdrop: () => Backdrop2,
+  Body: () => Body3,
+  CloseTrigger: () => CloseTrigger2,
+  Content: () => Content2,
+  Context: () => dialog.DialogContext,
+  Description: () => Description3,
+  Footer: () => Footer3,
+  Header: () => Header3,
+  Positioner: () => Positioner2,
+  Root: () => Root5,
+  RootProvider: () => RootProvider2,
+  Title: () => Title3,
+  Trigger: () => Trigger2
+});
+var { withRootProvider: withRootProvider2, withContext: withContext5 } = jsx.createStyleContext(recipes.drawer);
+var Root5 = withRootProvider2(dialog.Dialog.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true }
+});
+var RootProvider2 = withRootProvider2(dialog.Dialog.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true }
+});
+var Backdrop2 = withContext5(dialog.Dialog.Backdrop, "backdrop");
+var Positioner2 = withContext5(dialog.Dialog.Positioner, "positioner");
+var CloseTrigger2 = withContext5(dialog.Dialog.CloseTrigger, "closeTrigger");
+var Content2 = withContext5(dialog.Dialog.Content, "content");
+var Description3 = withContext5(dialog.Dialog.Description, "description");
+var Title3 = withContext5(dialog.Dialog.Title, "title");
+var Trigger2 = withContext5(dialog.Dialog.Trigger, "trigger");
+var Body3 = withContext5(factory.ark.div, "body");
+var Header3 = withContext5(factory.ark.div, "header");
+var Footer3 = withContext5(factory.ark.div, "footer");
+
+// src/components/Tabs.tsx
+var Tabs_exports = {};
+__export(Tabs_exports, {
+  Content: () => Content3,
+  Context: () => tabs.TabsContext,
+  Indicator: () => Indicator,
+  List: () => List,
+  Root: () => Root6,
+  RootProvider: () => RootProvider3,
+  Trigger: () => Trigger3
+});
+var { withProvider: withProvider4, withContext: withContext6 } = jsx.createStyleContext(recipes.tabs);
+var Root6 = withProvider4(tabs.Tabs.Root, "root");
+var RootProvider3 = withProvider4(tabs.Tabs.RootProvider, "root");
+var List = withContext6(tabs.Tabs.List, "list");
+var Trigger3 = withContext6(tabs.Tabs.Trigger, "trigger");
+var Content3 = withContext6(tabs.Tabs.Content, "content");
+var Indicator = withContext6(tabs.Tabs.Indicator, "indicator");
+
+// src/components/Checkbox.tsx
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  Control: () => Control2,
+  Group: () => Group2,
+  GroupProvider: () => checkbox.CheckboxGroupProvider,
+  HiddenInput: () => HiddenInput2,
+  Indicator: () => Indicator2,
+  Label: () => Label2,
+  Root: () => Root7,
+  RootProvider: () => RootProvider4
+});
+var { withProvider: withProvider5, withContext: withContext7 } = jsx.createStyleContext(recipes.checkbox);
+var Root7 = withProvider5(checkbox.Checkbox.Root, "root");
+var RootProvider4 = withProvider5(checkbox.Checkbox.RootProvider, "root");
+var Control2 = withContext7(checkbox.Checkbox.Control, "control");
+var Group2 = withProvider5(checkbox.Checkbox.Group, "group");
+var Label2 = withContext7(checkbox.Checkbox.Label, "label");
+var HiddenInput2 = checkbox.Checkbox.HiddenInput;
+var Indicator2 = react$1.forwardRef(
+  function Indicator3(props, ref) {
+    const { indeterminate, checked } = checkbox.useCheckboxContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(checkbox.Checkbox.Indicator, { indeterminate, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      jsx.styled.svg,
       {
         ref,
-        className: cn(recipes.button({ variant, size }), className),
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3px",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
         ...props,
         children: [
-          leftIcon,
-          children,
-          rightIcon
+          /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Checkmark" }),
+          indeterminate ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) : checked ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) : null
         ]
       }
-    );
+    ) });
   }
 );
-Button.displayName = "Button";
-var Card = react.forwardRef(
-  ({ children, variant, interactive, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn(recipes.card({ variant, interactive }), className),
-        ...props,
-        children
-      }
-    );
+
+// src/components/RadioGroup.tsx
+var RadioGroup_exports = {};
+__export(RadioGroup_exports, {
+  Context: () => radioGroup.RadioGroupContext,
+  Indicator: () => Indicator4,
+  Item: () => Item2,
+  ItemControl: () => ItemControl,
+  ItemHiddenInput: () => ItemHiddenInput,
+  ItemText: () => ItemText,
+  Label: () => Label3,
+  Root: () => Root8,
+  RootProvider: () => RootProvider5
+});
+var { withProvider: withProvider6, withContext: withContext8 } = jsx.createStyleContext(recipes.radioGroup);
+var Root8 = withProvider6(radioGroup.RadioGroup.Root, "root");
+var RootProvider5 = withProvider6(radioGroup.RadioGroup.RootProvider, "root");
+var Indicator4 = withContext8(radioGroup.RadioGroup.Indicator, "indicator");
+var Item2 = withContext8(radioGroup.RadioGroup.Item, "item");
+var ItemControl = withContext8(radioGroup.RadioGroup.ItemControl, "itemControl");
+var ItemText = withContext8(radioGroup.RadioGroup.ItemText, "itemText");
+var Label3 = withContext8(radioGroup.RadioGroup.Label, "label");
+var ItemHiddenInput = radioGroup.RadioGroup.ItemHiddenInput;
+
+// src/components/Select.tsx
+var Select_exports = {};
+__export(Select_exports, {
+  ClearTrigger: () => ClearTrigger,
+  Content: () => Content4,
+  Context: () => select.SelectContext,
+  Control: () => Control3,
+  HiddenSelect: () => HiddenSelect,
+  Indicator: () => Indicator5,
+  IndicatorGroup: () => IndicatorGroup,
+  Item: () => Item3,
+  ItemContext: () => select.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 } = jsx.createStyleContext(recipes.select);
+var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) });
+var ChevronsUpDownIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 15 5 5 5-5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 9 5-5 5 5" })
+] });
+var Root9 = withProvider7(select.Select.Root, "root");
+var ClearTrigger = withContext9(select.Select.ClearTrigger, "clearTrigger");
+var Content4 = withContext9(select.Select.Content, "content");
+var Control3 = withContext9(select.Select.Control, "control");
+var IndicatorGroup = withContext9(factory.ark.div, "indicatorGroup");
+var Item3 = withContext9(select.Select.Item, "item");
+var ItemGroup = withContext9(select.Select.ItemGroup, "itemGroup");
+var ItemGroupLabel = withContext9(select.Select.ItemGroupLabel, "itemGroupLabel");
+var ItemText2 = withContext9(select.Select.ItemText, "itemText");
+var Label4 = withContext9(select.Select.Label, "label");
+var List2 = withContext9(select.Select.List, "list");
+var Positioner3 = withContext9(select.Select.Positioner, "positioner");
+var Trigger4 = withContext9(select.Select.Trigger, "trigger");
+var ValueText = withContext9(select.Select.ValueText, "valueText");
+var Indicator5 = withContext9(select.Select.Indicator, "indicator", {
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(ChevronsUpDownIcon, {}) }
+});
+var HiddenSelect = select.Select.HiddenSelect;
+var StyledItemIndicator = withContext9(select.Select.ItemIndicator, "itemIndicator");
+var ItemIndicator2 = react$1.forwardRef(
+  function ItemIndicator3(props, ref) {
+    const item = select.useSelectItemContext();
+    return item.selected ? /* @__PURE__ */ jsxRuntime.jsx(StyledItemIndicator, { ref, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false" });
   }
 );
-Card.displayName = "Card";
-var IconButton = react.forwardRef(
-  ({ children, variant, size, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
+
+// src/components/Slider.tsx
+var Slider_exports = {};
+__export(Slider_exports, {
+  Context: () => slider.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 = react$1.createContext(null);
+var Root10 = react$1.forwardRef(
+  function SliderRoot(props, ref) {
+    const { orientation, size, variant, colorPalette, className, ...arkProps } = props;
+    const styles = recipes.slider({ orientation, size, variant });
+    const colorPaletteClass = colorPalette ? `color-palette_${colorPalette}` : "";
+    const combinedClassName = [styles.root, colorPaletteClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx(StyleContextInternal.Provider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(
+      slider.Slider.Root,
       {
         ref,
-        className: cn(recipes.iconButton({ variant, size }), className),
-        ...props,
-        children
+        orientation,
+        className: combinedClassName,
+        ...arkProps
       }
-    );
+    ) });
   }
 );
-IconButton.displayName = "IconButton";
-var Input = react.forwardRef(
-  ({ label, helperText, errorText, variant, size, state, className, ...props }, ref) => {
-    const hasError = !!errorText || state === "error";
-    return /* @__PURE__ */ jsxRuntime.jsxs(field.Field.Root, { invalid: hasError, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx(field.Field.Label, { children: label }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        field.Field.Input,
-        {
-          ref,
-          className: cn(
-            recipes.input({ variant, size, state: hasError ? "error" : state }),
-            className
-          ),
-          ...props
-        }
-      ),
-      helperText && !hasError && /* @__PURE__ */ jsxRuntime.jsx(field.Field.HelperText, { children: helperText }),
-      errorText && /* @__PURE__ */ jsxRuntime.jsx(field.Field.ErrorText, { children: errorText })
-    ] });
+var createStyledComponent = (Component, slot, displayName) => {
+  const StyledComponent = react$1.forwardRef((props, ref) => {
+    const styles = react$1.useContext(StyleContextInternal);
+    const slotClass = styles?.[slot];
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+  });
+  StyledComponent.displayName = displayName;
+  return StyledComponent;
+};
+var Control4 = createStyledComponent(slider.Slider.Control, "control", "Control");
+var Track = createStyledComponent(slider.Slider.Track, "track", "Track");
+var Range = createStyledComponent(slider.Slider.Range, "range", "Range");
+var Thumb2 = react$1.forwardRef((props, ref) => {
+  const styles = react$1.useContext(StyleContextInternal);
+  const slotClass = styles?.thumb;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.Thumb, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+Thumb2.displayName = "Thumb";
+var Label5 = react$1.forwardRef((props, ref) => {
+  const styles = react$1.useContext(StyleContextInternal);
+  const slotClass = styles?.label;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.Label, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+Label5.displayName = "Label";
+var ValueText2 = react$1.forwardRef((props, ref) => {
+  const styles = react$1.useContext(StyleContextInternal);
+  const slotClass = styles?.valueText;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.ValueText, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+ValueText2.displayName = "ValueText";
+var Marker = react$1.forwardRef((props, ref) => {
+  const styles = react$1.useContext(StyleContextInternal);
+  const slotClass = styles?.marker;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.Marker, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+Marker.displayName = "Marker";
+var MarkerGroup = react$1.forwardRef((props, ref) => {
+  const styles = react$1.useContext(StyleContextInternal);
+  const slotClass = styles?.markerGroup;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.MarkerGroup, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+MarkerGroup.displayName = "MarkerGroup";
+var MarkerIndicator = react$1.forwardRef((props, ref) => {
+  const styles = react$1.useContext(StyleContextInternal);
+  const slotClass = styles?.markerIndicator;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+MarkerIndicator.displayName = "MarkerIndicator";
+var DraggingIndicator = react$1.forwardRef((props, ref) => {
+  const styles = react$1.useContext(StyleContextInternal);
+  const slotClass = styles?.draggingIndicator;
+  const { className, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(slider.Slider.DraggingIndicator, { ref, className: `${slotClass} ${className || ""}`.trim(), ...rest });
+});
+DraggingIndicator.displayName = "DraggingIndicator";
+var HiddenInput3 = slider.Slider.HiddenInput;
+var Marks = react$1.forwardRef(function Marks2(props, ref) {
+  const { marks, ...rest } = props;
+  if (!marks?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Marker, { value, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(MarkerIndicator, {}),
+      label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+    ] }, index);
+  }) });
+});
+var Thumbs = (props) => {
+  const slider2 = slider.useSliderContext();
+  return slider2.value.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(Thumb2, { index, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(HiddenInput3, {}) }, index));
+};
+
+// src/components/Textarea.tsx
+var Textarea_exports = {};
+__export(Textarea_exports, {
+  Textarea: () => Textarea
+});
+var Textarea = jsx.styled(field.Field.Textarea, recipes.textarea);
+
+// src/components/Avatar.tsx
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  Context: () => avatar.AvatarContext,
+  Fallback: () => Fallback,
+  Image: () => Image,
+  Root: () => Root11,
+  RootProvider: () => RootProvider6
+});
+var UserIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "7", r: "4" })
+] });
+var { withProvider: withProvider8, withContext: withContext10 } = jsx.createStyleContext(recipes.avatar);
+var Root11 = withProvider8(avatar.Avatar.Root, "root");
+var RootProvider6 = withProvider8(avatar.Avatar.RootProvider, "root");
+var Image = withContext10(avatar.Avatar.Image, "image", {
+  defaultProps: {
+    draggable: "false",
+    referrerPolicy: "no-referrer"
   }
-);
-Input.displayName = "Input";
-var Dialog = react.forwardRef(
-  ({
-    open,
-    onOpenChange,
-    title,
-    description,
-    children,
-    size,
-    showCloseButton = true,
-    closeLabel = "Close"
-  }, ref) => {
-    const classes = recipes.dialog({ size });
-    return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(portal.Portal, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Backdrop, { className: classes.backdrop }),
-      /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Positioner, { className: classes.positioner, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog.Content, { ref, className: classes.content, children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Title, { className: classes.title, children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog.Description, { className: classes.description, children: description }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.description, children }),
-        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
-          dialog.Dialog.CloseTrigger,
-          {
-            className: classes.closeTrigger,
-            "aria-label": closeLabel,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "svg",
-              {
-                width: "24",
-                height: "24",
-                viewBox: "0 0 24 24",
-                fill: "none",
-                stroke: "currentColor",
-                strokeWidth: "2",
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                ]
-              }
-            )
-          }
-        )
-      ] }) })
-    ] }) });
+});
+var StyledFallback = withContext10(avatar.Avatar.Fallback, "fallback");
+var Fallback = react$1.forwardRef(function Fallback2(props, ref) {
+  const { name, children, asChild, ...rest } = props;
+  const fallbackContent = children || asChild ? children : name ? getInitials(name) : /* @__PURE__ */ jsxRuntime.jsx(UserIcon, {});
+  return /* @__PURE__ */ jsxRuntime.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 = jsx.styled(factory.ark.div, recipes.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 } = jsx.createStyleContext(recipes.progress);
+var Root12 = withProvider9(progress.Progress.Root, "root");
+var RootProvider7 = withProvider9(progress.Progress.RootProvider, "root");
+var Circle = withContext11(progress.Progress.Circle, "circle");
+var CircleRange = withContext11(progress.Progress.CircleRange, "circleRange");
+var CircleTrack = withContext11(progress.Progress.CircleTrack, "circleTrack");
+var Label6 = withContext11(progress.Progress.Label, "label");
+var Range2 = withContext11(progress.Progress.Range, "range");
+var Track2 = withContext11(progress.Progress.Track, "track");
+var ValueText3 = withContext11(progress.Progress.ValueText, "valueText");
+var View = withContext11(progress.Progress.View, "view");
+
+// src/components/Skeleton.tsx
+var Skeleton_exports = {};
+__export(Skeleton_exports, {
+  Skeleton: () => Skeleton,
+  SkeletonCircle: () => SkeletonCircle,
+  SkeletonText: () => SkeletonText
+});
+var Skeleton = jsx.styled(factory.ark.div, recipes.skeleton);
+var SkeletonCircle = jsx.styled(factory.ark.div, recipes.skeleton, { defaultProps: { circle: true } });
+var SkeletonText = react$1.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, gap, rootProps, ...skeletonProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(jsx.Stack, { ref, gap, width: "full", ...rootProps, children: [...Array(noOfLines).keys()].map((index) => /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton,
+      {
+        height: "4",
+        _last: { maxW: noOfLines === 1 ? "100%" : "80%" },
+        ...skeletonProps
+      },
+      index
+    )) });
   }
 );
-Dialog.displayName = "Dialog";
-var Switch = react.forwardRef(
-  ({
-    label,
-    checked,
-    defaultChecked,
-    onCheckedChange,
-    disabled,
-    name,
-    value,
-    required,
-    size
-  }, ref) => {
-    const classes = recipes.switchControl({ size });
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      _switch.Switch.Root,
-      {
-        checked,
-        defaultChecked,
-        onCheckedChange,
-        disabled,
-        name,
-        value,
-        required,
-        className: classes.root,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Control, { className: classes.control, children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: classes.thumb }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.HiddenInput, { ref }),
-          label && /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Label, { className: classes.label, children: label })
-        ]
-      }
-    );
+
+// src/components/CloseButton.tsx
+var CloseButton_exports = {};
+__export(CloseButton_exports, {
+  CloseButton: () => CloseButton
+});
+var XIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+] });
+var CloseButton = react$1.forwardRef(
+  function CloseButton2(props, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "plain", colorPalette: "gray", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ jsxRuntime.jsx(XIcon, {}) });
   }
 );
-Switch.displayName = "Switch";
 
-// node_modules/.pnpm/@pandacss+dev@0.52.0_jsdom@27.4.0_typescript@5.9.3/node_modules/@pandacss/dev/dist/index.mjs
+// src/components/Icon.tsx
+var Icon_exports = {};
+__export(Icon_exports, {
+  Icon: () => Icon
+});
+var Icon = jsx.styled(factory.ark.svg);
+var CheckCircleIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 11 3 3L22 4" })
+] });
+var CircleAlertIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "8", y2: "12" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12.01", y1: "16", y2: "16" })
+] });
+var CircleXIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9-6 6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 9 6 6" })
+] });
+var { withProvider: withProvider10, withContext: withContext12 } = jsx.createStyleContext(recipes.toast);
+var Root13 = withProvider10(toast.Toast.Root, "root");
+var Title4 = withContext12(toast.Toast.Title, "title");
+var Description4 = withContext12(toast.Toast.Description, "description");
+var ActionTrigger = withContext12(toast.Toast.ActionTrigger, "actionTrigger");
+var CloseTrigger3 = withContext12(toast.Toast.CloseTrigger, "closeTrigger");
+var StyledToaster = jsx.styled(toast.Toaster);
+var iconMap = {
+  warning: CircleAlertIcon,
+  success: CheckCircleIcon,
+  error: CircleXIcon
+};
+var Indicator6 = react$1.forwardRef(function ToastIndicator(props, ref) {
+  const toast2 = toast.useToastContext();
+  const StatusIcon = iconMap[toast2.type];
+  if (!StatusIcon) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { ref, "data-type": toast2.type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, {}) });
+});
+var toaster = toast.createToaster({
+  placement: "bottom-end",
+  pauseOnPageIdle: true,
+  overlap: true,
+  max: 5
+});
+var Toaster = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(StyledToaster, { toaster, insetInline: { mdDown: "4" }, children: (toast2) => /* @__PURE__ */ jsxRuntime.jsxs(Root13, { children: [
+    toast2.type === "loading" ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { color: "colorPalette.plain.fg" }) : /* @__PURE__ */ jsxRuntime.jsx(Indicator6, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "3", alignItems: "start", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(jsx.Stack, { gap: "1", children: [
+        toast2.title && /* @__PURE__ */ jsxRuntime.jsx(Title4, { children: toast2.title }),
+        toast2.description && /* @__PURE__ */ jsxRuntime.jsx(Description4, { children: toast2.description })
+      ] }),
+      toast2.action && /* @__PURE__ */ jsxRuntime.jsx(ActionTrigger, { children: toast2.action.label })
+    ] }),
+    toast2.closable && /* @__PURE__ */ jsxRuntime.jsx(CloseTrigger3, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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: () => popover.PopoverContext,
+  Description: () => Description5,
+  Footer: () => Footer4,
+  Header: () => Header4,
+  Indicator: () => Indicator7,
+  Positioner: () => Positioner4,
+  Root: () => Root14,
+  RootProvider: () => RootProvider8,
+  Title: () => Title5,
+  Trigger: () => Trigger5
+});
+var { withRootProvider: withRootProvider3, withContext: withContext13 } = jsx.createStyleContext(recipes.popover);
+var Root14 = withRootProvider3(popover.Popover.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true }
+});
+var RootProvider8 = withRootProvider3(popover.Popover.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true }
+});
+var Anchor = withContext13(popover.Popover.Anchor, "anchor");
+var ArrowTip = withContext13(popover.Popover.ArrowTip, "arrowTip");
+var Arrow = withContext13(popover.Popover.Arrow, "arrow", {
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(ArrowTip, {}) }
+});
+var CloseTrigger4 = withContext13(popover.Popover.CloseTrigger, "closeTrigger");
+var Content5 = withContext13(popover.Popover.Content, "content");
+var Description5 = withContext13(popover.Popover.Description, "description");
+var Indicator7 = withContext13(popover.Popover.Indicator, "indicator");
+var Positioner4 = withContext13(popover.Popover.Positioner, "positioner");
+var Title5 = withContext13(popover.Popover.Title, "title");
+var Trigger5 = withContext13(popover.Popover.Trigger, "trigger");
+var Body4 = withContext13(factory.ark.div, "body");
+var Header4 = withContext13(factory.ark.div, "header");
+var Footer4 = withContext13(factory.ark.div, "footer");
+
+// src/components/Tooltip.tsx
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  Context: () => tooltip.TooltipContext,
+  Tooltip: () => Tooltip
+});
+var { withRootProvider: withRootProvider4, withContext: withContext14 } = jsx.createStyleContext(recipes.tooltip);
+var Root15 = withRootProvider4(tooltip.Tooltip.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true }
+});
+var Arrow2 = withContext14(tooltip.Tooltip.Arrow, "arrow");
+var ArrowTip2 = withContext14(tooltip.Tooltip.ArrowTip, "arrowTip");
+var Content6 = withContext14(tooltip.Tooltip.Content, "content");
+var Positioner5 = withContext14(tooltip.Tooltip.Positioner, "positioner");
+var Trigger6 = withContext14(tooltip.Tooltip.Trigger, "trigger");
+var Tooltip = react$1.forwardRef(function Tooltip2(props, ref) {
+  const {
+    showArrow,
+    children,
+    disabled,
+    portalled = true,
+    content,
+    contentProps,
+    portalRef,
+    ...rootProps
+  } = props;
+  if (disabled) return children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root15, { ...rootProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Trigger6, { asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(portal.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsxRuntime.jsx(Positioner5, { children: /* @__PURE__ */ jsxRuntime.jsxs(Content6, { ref, ...contentProps, children: [
+      showArrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { children: /* @__PURE__ */ jsxRuntime.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;
 }
@@ -949,8 +1557,8 @@ var material3Language = {
   },
   typography: {
     fonts: {
-      display: 'Georgia, "Times New Roman", serif',
-      body: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      display: '"Fraunces", Georgia, serif',
+      body: '"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
       mono: '"JetBrains Mono", "Fira Code", Consolas, monospace'
     },
     scale: {
@@ -1230,13 +1838,35 @@ function extractLetterSpacings(scale) {
     ])
   );
 }
+function cn(...inputs) {
+  return clsx.clsx(inputs);
+}
 
-exports.Button = Button;
-exports.Card = Card;
-exports.Dialog = Dialog;
-exports.IconButton = IconButton;
-exports.Input = Input;
-exports.Switch = Switch;
+exports.AbsoluteCenter = AbsoluteCenter_exports;
+exports.Accordion = Accordion_exports;
+exports.Avatar = Avatar_exports;
+exports.Badge = Badge_exports;
+exports.Button = Button_exports;
+exports.Card = Card_exports;
+exports.Checkbox = Checkbox_exports;
+exports.CloseButton = CloseButton_exports;
+exports.Dialog = Dialog_exports;
+exports.Drawer = Drawer_exports;
+exports.Group = Group_exports;
+exports.Icon = Icon_exports;
+exports.IconButton = IconButton_exports;
+exports.Popover = Popover_exports;
+exports.Progress = Progress_exports;
+exports.RadioGroup = RadioGroup_exports;
+exports.Select = Select_exports;
+exports.Skeleton = Skeleton_exports;
+exports.Slider = Slider_exports;
+exports.Spinner = Spinner_exports;
+exports.Switch = Switch_exports;
+exports.Tabs = Tabs_exports;
+exports.Textarea = Textarea_exports;
+exports.Toaster = Toaster;
+exports.Tooltip = Tooltip_exports;
 exports.activeLanguage = material3Language;
 exports.buttonRecipe = buttonRecipe;
 exports.cardRecipe = cardRecipe;
@@ -1245,6 +1875,7 @@ exports.dialogRecipe = dialogRecipe;
 exports.iconButtonRecipe = iconButtonRecipe;
 exports.inputRecipe = inputRecipe;
 exports.switchRecipe = switchRecipe;
+exports.toaster = toaster;
 exports.transformToPandaTheme = transformToPandaTheme;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map