bako-ui 0.2.0

package/dist/index.mjs

@@ -0,0 +1,1017 @@
+import { CloseButton, IconButton, Icon as Icon$1, Link, LinkOverlay, Checkbox as Checkbox$1, Combobox as Combobox$1, Input, RadioGroup as RadioGroup$1, Select as Select$1, Switch as Switch$1, mergeRefs, Dialog as Dialog$1, Drawer as Drawer$1, Popover as Popover$1, createToaster, Toast as Toast$1, Accordion as Accordion$1, Breadcrumb as Breadcrumb$1, Steps as Steps$1, Menu as Menu$1, createIcon, defineRecipe, defineSemanticTokens, defineSlotRecipe, defineTokens, defineConfig, createSystem, defaultConfig, Badge as Badge$1, Box, Card as Card$1, Clipboard as Clipboard$1, Portal, EmptyState as EmptyState$1, Flex, HStack as HStack$1, Heading, Image, List as List$1, Spinner, QrCode as QrCode$1, Separator, Skeleton as Skeleton$1, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Stack as Stack$1, Tabs as Tabs$1, Text, Toaster, VStack as VStack$1, Grid as Grid$1, GridItem as GridItem$1, Button as Button$1, Container as Container$1, useFilter, useListCollection, Field, defineStyle, Span, InputGroup, Textarea, Avatar as Avatar$1, Group, Tooltip as Tooltip$1, ChakraProvider } from '@chakra-ui/react';
+export { Alert, ButtonGroup, Center, Icon as ChakraIcon, ClientOnly, Field, FormatNumber, InputGroup, Portal, Spacer, Span, createIcon, createListCollection, createToaster, useAccordion, useAccordionContext, useAccordionItemContext, useClipboard, useMediaQuery, useSteps, useStepsContext, useStepsItemContext } from '@chakra-ui/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, useCallback, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { useController } from 'react-hook-form';
+import { withMask } from 'use-mask-input';
+import { menuAnatomy, tabsAnatomy } from '@chakra-ui/react/anatomy';
+
+// src/components/Stack/stack.tsx
+var Stack = Stack$1;
+var HStack = HStack$1;
+var VStack = VStack$1;
+var flex_default = Flex;
+function Grid(props) {
+  return /* @__PURE__ */ jsx(Grid$1, { ...props });
+}
+function GridItem(props) {
+  return /* @__PURE__ */ jsx(GridItem$1, { ...props });
+}
+var text_default = Text;
+var heading_default = Heading;
+var box_default = Box;
+var Badge = Badge$1;
+function Button({
+  colorPalette = "primary",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Button$1, { colorPalette, ...props });
+}
+var Card = Card$1;
+var card_default = Card;
+var Clipboard = Clipboard$1;
+var close_button_default = forwardRef(
+  function CloseButton$1(props, ref) {
+    return /* @__PURE__ */ jsx(CloseButton, { ref, ...props });
+  }
+);
+function Container(props) {
+  return /* @__PURE__ */ jsx(Container$1, { ...props });
+}
+var icon_button_default = forwardRef(
+  function IconButton$1(props, ref) {
+    return /* @__PURE__ */ jsx(IconButton, { ref, ...props });
+  }
+);
+var QrCode = QrCode$1;
+var separator_default = Separator;
+var image_default = Image;
+var Icon = forwardRef(function Icon2(props, ref) {
+  return /* @__PURE__ */ jsx(Icon$1, { ref, ...props });
+});
+var icon_default = Icon;
+var link_default = forwardRef(
+  function Link$1(props, ref) {
+    return /* @__PURE__ */ jsx(Link, { ref, ...props });
+  }
+);
+var link_overlay_default = forwardRef(
+  function LinkOverlay$1(props, ref) {
+    return /* @__PURE__ */ jsx(LinkOverlay, { ref, ...props });
+  }
+);
+var loader_default = Spinner;
+var Skeleton = Skeleton$1;
+var SkeletonCircle = SkeletonCircle$1;
+var SkeletonText = SkeletonText$1;
+var Checkbox = forwardRef(
+  function Checkbox2(props, ref) {
+    const { icon, children, inputProps, rootRef, ...rest } = props;
+    return /* @__PURE__ */ jsxs(Checkbox$1.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ jsx(Checkbox$1.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ jsx(Checkbox$1.Control, { children: icon || /* @__PURE__ */ jsx(Checkbox$1.Indicator, {}) }),
+      children != null && /* @__PURE__ */ jsx(Checkbox$1.Label, { children })
+    ] });
+  }
+);
+var checkbox_default = Checkbox;
+var Combobox = {
+  ...Combobox$1,
+  Portal
+};
+var input_default = forwardRef(
+  function Input$1(props, ref) {
+    return /* @__PURE__ */ jsx(Input, { ref, ...props });
+  }
+);
+function MoneyField({
+  value,
+  onChange,
+  thousandSeparator = ",",
+  decimalSeparator = ".",
+  decimalScale = 2,
+  ...props
+}) {
+  const inputRef = useRef(null);
+  const config2 = useMemo(
+    () => ({
+      thousandSeparator,
+      decimalSeparator,
+      decimalScale
+    }),
+    [thousandSeparator, decimalSeparator, decimalScale]
+  );
+  const formatNumber = useCallback(
+    (num) => {
+      const numStr = String(num).replace(/[^\d.-]/g, "");
+      if (!numStr || numStr === "-") return "";
+      const [integerPart, decimalPart] = numStr.split(".");
+      const formattedInteger = integerPart.replace(
+        /\B(?=(\d{3})+(?!\d))/g,
+        config2.thousandSeparator
+      );
+      let result = formattedInteger;
+      if (decimalPart !== void 0) {
+        const limitedDecimal = decimalPart.slice(0, config2.decimalScale);
+        result = `${formattedInteger}${config2.decimalSeparator}${limitedDecimal}`;
+      }
+      return result;
+    },
+    [config2]
+  );
+  const unformatNumber = useCallback(
+    (formatted) => {
+      return formatted.replace(new RegExp(`\\${config2.thousandSeparator}`, "g"), "").replace(new RegExp(`\\${config2.decimalSeparator}`, "g"), ".");
+    },
+    [config2]
+  );
+  const displayValue = useMemo(() => {
+    if (!value && value !== 0) return "";
+    return formatNumber(value);
+  }, [value, formatNumber]);
+  const handleChange = useCallback(
+    (event) => {
+      const inputValue = event.target.value;
+      const cursorPosition = event.target.selectionStart || 0;
+      const rawValue = unformatNumber(inputValue);
+      if (rawValue === "" || rawValue === "-" || !Number.isNaN(Number(rawValue))) {
+        onChange(rawValue);
+        setTimeout(() => {
+          if (inputRef.current) {
+            const newFormattedValue = formatNumber(rawValue);
+            const diff = newFormattedValue.length - inputValue.length;
+            inputRef.current.setSelectionRange(
+              cursorPosition + diff,
+              cursorPosition + diff
+            );
+          }
+        }, 0);
+      }
+    },
+    [formatNumber, unformatNumber, onChange]
+  );
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: inputRef,
+      value: displayValue,
+      type: "text",
+      onChange: handleChange,
+      color: "fg.inverted",
+      ...props
+    }
+  );
+}
+var RadioGroup = forwardRef(
+  function RadioGroup2(props, ref) {
+    return /* @__PURE__ */ jsx(RadioGroup$1.Root, { ref, spaceX: 2, ...props });
+  }
+);
+var Radio = forwardRef(
+  function Radio2(props, ref) {
+    const { children, inputProps, ...rest } = props;
+    return /* @__PURE__ */ jsxs(RadioGroup$1.Item, { ...rest, children: [
+      /* @__PURE__ */ jsx(RadioGroup$1.ItemHiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ jsx(RadioGroup$1.ItemControl, {}),
+      children != null && /* @__PURE__ */ jsx(RadioGroup$1.ItemText, { children })
+    ] });
+  }
+);
+var radio_default = Radio;
+var floatingStyles = ({
+  hasValue,
+  withStartIcon
+}) => defineStyle({
+  pos: "absolute",
+  px: "1",
+  top: hasValue ? "0" : "50%",
+  transform: hasValue ? "none" : "translateY(-50%)",
+  insetStart: withStartIcon ? "9" : "2.5",
+  color: "bg.emphasized",
+  fontWeight: "normal",
+  pointerEvents: "none",
+  transition: "all 0.2s",
+  fontSize: hasValue ? "2xs" : "sm",
+  _peerPlaceholderShown: {
+    insetStart: withStartIcon ? "9" : "2.5"
+  },
+  _peerFocusVisible: {
+    top: "0",
+    transform: "none",
+    insetStart: withStartIcon ? "9" : "2.5",
+    fontSize: "2xs"
+  }
+});
+function ComboboxHiddenInput(props) {
+  return /* @__PURE__ */ jsx("input", { type: "hidden", ...props });
+}
+function RhfCombobox({
+  control,
+  name,
+  defaultValue,
+  label,
+  error,
+  options,
+  disabled = false,
+  helperText,
+  isLoadingOptions = false,
+  noOptionsText = "No items found",
+  openOnFocus = true,
+  slotProps,
+  variant,
+  clearTriggerIcon,
+  showTrigger = false,
+  allowCustomValue = true
+}) {
+  const {
+    field: { value, onChange, ref, ...rest }
+  } = useController({ defaultValue, control, name });
+  const { contains } = useFilter({ sensitivity: "base" });
+  const { collection, filter } = useListCollection({
+    initialItems: options,
+    filter: contains
+  });
+  const [inputValue, setInputValue] = useState(value || "");
+  const handleValueChange = useCallback(
+    (details) => {
+      const newValue = details.value[0] || "";
+      onChange(newValue);
+      setInputValue(newValue);
+    },
+    [onChange]
+  );
+  const handleInputValueChange = useCallback(
+    (details) => {
+      setInputValue(details.inputValue);
+      flushSync(() => {
+        filter(details.inputValue);
+      });
+      if (allowCustomValue) {
+        onChange(details.inputValue);
+      }
+    },
+    [filter, allowCustomValue, onChange]
+  );
+  const handleOpenChange = useCallback(
+    (details) => {
+      var _a, _b;
+      if (allowCustomValue && details.open && inputValue.trim() !== "") {
+        const hasMatchingOptions = collection.items.length > 0;
+        if (!hasMatchingOptions) {
+          return;
+        }
+      }
+      (_b = (_a = slotProps == null ? void 0 : slotProps.root) == null ? void 0 : _a.onOpenChange) == null ? void 0 : _b.call(_a, details);
+    },
+    [slotProps == null ? void 0 : slotProps.root, allowCustomValue, inputValue, collection.items.length]
+  );
+  const hasValue = useMemo(() => {
+    if (!value) {
+      return false;
+    }
+    if (Array.isArray(value)) {
+      return value.length > 0;
+    }
+    const stringValue = typeof value === "string" ? value : String(value);
+    return !!stringValue || stringValue.length > 0;
+  }, [value]);
+  const inputProps = label ? {
+    pt: 2,
+    px: 3,
+    placeholder: ""
+  } : {};
+  return /* @__PURE__ */ jsxs(Field.Root, { invalid: !!error, children: [
+    label && /* @__PURE__ */ jsx(
+      Field.Label,
+      {
+        color: "bg.emphasized",
+        htmlFor: rest.name,
+        ...slotProps == null ? void 0 : slotProps.label,
+        css: floatingStyles({
+          hasValue,
+          withStartIcon: false
+        }),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Combobox$1.Root,
+      {
+        collection,
+        width: "full",
+        variant,
+        inputValue,
+        value: value ? [value] : [],
+        borderRadius: "lg",
+        onValueChange: handleValueChange,
+        onOpenChange: handleOpenChange,
+        onInputValueChange: handleInputValueChange,
+        disabled,
+        openOnClick: openOnFocus,
+        multiple: false,
+        invalid: !!error,
+        allowCustomValue,
+        selectionBehavior: "preserve",
+        ...slotProps == null ? void 0 : slotProps.root,
+        children: [
+          /* @__PURE__ */ jsxs(Combobox$1.Control, { children: [
+            /* @__PURE__ */ jsx(
+              Combobox$1.Input,
+              {
+                color: "fg",
+                ref,
+                ...inputProps,
+                ...slotProps == null ? void 0 : slotProps.input
+              }
+            ),
+            /* @__PURE__ */ jsxs(Combobox$1.IndicatorGroup, { children: [
+              clearTriggerIcon ? /* @__PURE__ */ jsx(Combobox$1.ClearTrigger, { hidden: !hasValue, color: "unset", asChild: true, children: clearTriggerIcon }) : /* @__PURE__ */ jsx(Combobox$1.ClearTrigger, { hidden: !hasValue, color: "unset" }),
+              showTrigger && /* @__PURE__ */ jsx(Combobox$1.Trigger, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ComboboxHiddenInput, { name: rest.name, value: value || "" }),
+          helperText && /* @__PURE__ */ jsx(Field.HelperText, { children: helperText }),
+          error && /* @__PURE__ */ jsx(Field.ErrorText, { children: error.message }),
+          /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { children: /* @__PURE__ */ jsxs(Combobox$1.Content, { children: [
+            !allowCustomValue && /* @__PURE__ */ jsx(Combobox$1.Empty, { children: noOptionsText }),
+            isLoadingOptions && /* @__PURE__ */ jsxs(HStack$1, { p: "2", children: [
+              /* @__PURE__ */ jsx(Spinner, { size: "xs", borderWidth: "1px" }),
+              /* @__PURE__ */ jsx(Span, { children: "Loading..." })
+            ] }),
+            !isLoadingOptions && collection.items.map((item) => /* @__PURE__ */ jsxs(Combobox$1.Item, { item, children: [
+              !item.imageUrl && item.label,
+              item.imageUrl && /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "center", children: [
+                /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    src: item.imageUrl,
+                    boxSize: "5",
+                    alt: `${item.label} image`
+                  }
+                ),
+                /* @__PURE__ */ jsx(Span, { children: item.label })
+              ] }),
+              /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {})
+            ] }, item.value))
+          ] }) }) })
+        ]
+      }
+    )
+  ] });
+}
+function RhfInput({
+  control,
+  defaultValue,
+  name,
+  label,
+  error,
+  type = "text",
+  helperText,
+  slotProps,
+  ...props
+}) {
+  var _a;
+  const {
+    field: { value, onChange, ref, ...rest }
+  } = useController({ control, defaultValue, name });
+  const { inputGroup } = slotProps || {};
+  const hasValue = useMemo(
+    () => value != null && value !== "" && value.toString().length > 0,
+    [value]
+  );
+  return /* @__PURE__ */ jsxs(Field.Root, { invalid: !!error, children: [
+    /* @__PURE__ */ jsx(InputGroup, { borderRadius: "sm", ...inputGroup, children: /* @__PURE__ */ jsxs(Box, { position: "relative", w: "full", ...slotProps == null ? void 0 : slotProps.root, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value,
+          ref,
+          borderTopLeftRadius: (inputGroup == null ? void 0 : inputGroup.startAddon) ? "none" : "sm",
+          borderBottomLeftRadius: (inputGroup == null ? void 0 : inputGroup.startAddon) ? "none" : "sm",
+          borderTopRightRadius: (inputGroup == null ? void 0 : inputGroup.endAddon) ? "none" : "sm",
+          borderBottomRightRadius: (inputGroup == null ? void 0 : inputGroup.endAddon) ? "none" : "sm",
+          type,
+          onChange,
+          className: `peer ${((_a = slotProps == null ? void 0 : slotProps.input) == null ? void 0 : _a.className) || ""}`,
+          pt: 2,
+          pl: (inputGroup == null ? void 0 : inputGroup.startElement) ? "10" : "3",
+          pr: (inputGroup == null ? void 0 : inputGroup.endElement) ? "10" : "3",
+          color: "fg.inverted",
+          ...rest,
+          ...slotProps == null ? void 0 : slotProps.input,
+          ...props,
+          placeholder: " "
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Field.Label,
+        {
+          css: floatingStyles({
+            hasValue,
+            withStartIcon: !!(inputGroup == null ? void 0 : inputGroup.startElement)
+          }),
+          htmlFor: name,
+          ...slotProps == null ? void 0 : slotProps.label,
+          children: label
+        }
+      )
+    ] }) }),
+    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx(Field.ErrorText, { children: error == null ? void 0 : error.message }),
+    helperText && /* @__PURE__ */ jsx(Field.HelperText, { color: "bg.emphasized", children: helperText })
+  ] });
+}
+function RhfMoneyField({
+  control,
+  defaultValue,
+  name,
+  label,
+  error,
+  thousandSeparator,
+  decimalSeparator,
+  decimalScale,
+  helperText,
+  slotProps,
+  disabled = false,
+  ...props
+}) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    field: { value, onChange, ...rest }
+  } = useController({ control, defaultValue, name });
+  const hasValue = useMemo(() => {
+    return String(value).length > 0;
+  }, [value]);
+  return /* @__PURE__ */ jsxs(Field.Root, { invalid: !!error, children: [
+    /* @__PURE__ */ jsx(InputGroup, { borderRadius: "sm", ...slotProps == null ? void 0 : slotProps.inputGroup, children: /* @__PURE__ */ jsxs(Box, { position: "relative", w: "full", ...slotProps == null ? void 0 : slotProps.root, children: [
+      /* @__PURE__ */ jsx(
+        MoneyField,
+        {
+          value,
+          onChange,
+          thousandSeparator,
+          decimalSeparator,
+          decimalScale,
+          disabled,
+          className: `peer ${(props == null ? void 0 : props.className) || ""}`,
+          pt: 2,
+          pl: ((_a = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _a.startElement) ? "10" : "3",
+          pr: ((_b = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _b.endElement) ? "10" : "3",
+          color: "fg.inverted",
+          borderTopLeftRadius: ((_c = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _c.startAddon) ? "none" : "sm",
+          borderBottomLeftRadius: ((_d = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _d.startAddon) ? "none" : "sm",
+          borderTopRightRadius: ((_e = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _e.endAddon) ? "none" : "sm",
+          borderBottomRightRadius: ((_f = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _f.endAddon) ? "none" : "sm",
+          placeholder: " ",
+          ...rest,
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Field.Label,
+        {
+          css: floatingStyles({
+            hasValue,
+            withStartIcon: !!((_g = slotProps == null ? void 0 : slotProps.inputGroup) == null ? void 0 : _g.startElement)
+          }),
+          htmlFor: rest.name,
+          ...slotProps == null ? void 0 : slotProps.label,
+          children: label
+        }
+      )
+    ] }) }),
+    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx(Field.ErrorText, { children: error.message }),
+    helperText && /* @__PURE__ */ jsx(Field.HelperText, { color: "bg.emphasized", children: helperText })
+  ] });
+}
+var Select = {
+  ...Select$1,
+  Portal: Portal
+};
+var Switch = forwardRef(
+  function Switch2(props, ref) {
+    const { children, inputProps, thumbLabel, ...rest } = props;
+    return /* @__PURE__ */ jsxs(Switch$1.Root, { ...rest, children: [
+      /* @__PURE__ */ jsx(Switch$1.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ jsxs(Switch$1.Control, { children: [
+        /* @__PURE__ */ jsx(Switch$1.Thumb, {}),
+        thumbLabel && /* @__PURE__ */ jsx(Switch$1.Indicator, { fallback: thumbLabel.off, children: thumbLabel.on })
+      ] }),
+      children != null && /* @__PURE__ */ jsx(Switch$1.Label, { children })
+    ] });
+  }
+);
+var switch_default = Switch;
+function TextArea(props) {
+  return /* @__PURE__ */ jsx(Textarea, { ...props });
+}
+var defaultMaskOptions = {
+  placeholder: "",
+  showMaskOnFocus: false,
+  showMaskOnHover: false
+};
+var TextMask = forwardRef(
+  ({ mask, maskOptions, ...props }, ref) => {
+    const mergedMaskOptions = {
+      ...defaultMaskOptions,
+      ...maskOptions
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref: mergeRefs(ref, withMask(mask, mergedMaskOptions)),
+        ...props
+      }
+    );
+  }
+);
+var text_mask_default = TextMask;
+function Avatar(props) {
+  const { name, src, fallback, slotProps, ...rest } = props;
+  const { image: imageProps = {}, fallback: fallbackProps = {} } = slotProps || {};
+  return /* @__PURE__ */ jsxs(Avatar$1.Root, { ...rest, children: [
+    src && /* @__PURE__ */ jsx(Avatar$1.Image, { src, alt: name, ...imageProps }),
+    /* @__PURE__ */ jsx(Avatar$1.Fallback, { name, ...fallbackProps, children: fallback || (name ? void 0 : /* @__PURE__ */ jsx(Avatar$1.Icon, {})) })
+  ] });
+}
+function AvatarGroup(props) {
+  return /* @__PURE__ */ jsx(Group, { ...props });
+}
+var EmptyState = EmptyState$1;
+function Tooltip(props) {
+  const { children, content, showArrow = true, ...rest } = props;
+  return /* @__PURE__ */ jsxs(Tooltip$1.Root, { ...rest, children: [
+    /* @__PURE__ */ jsx(Tooltip$1.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip$1.Content, { children: [
+      showArrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, { children: /* @__PURE__ */ jsx(Tooltip$1.ArrowTip, {}) }),
+      content
+    ] }) }) })
+  ] });
+}
+var Dialog = {
+  ...Dialog$1,
+  Portal: Portal
+};
+var Drawer = {
+  ...Drawer$1,
+  Portal: Portal
+};
+var Popover = {
+  ...Popover$1,
+  Portal: Portal
+};
+var toaster = createToaster({
+  placement: "bottom-end",
+  overlap: false
+});
+var Toast = { ...Toast$1, Toaster };
+var Accordion = {
+  ...Accordion$1
+};
+var Breadcrumb = {
+  ...Breadcrumb$1
+};
+var List = List$1;
+var Steps = {
+  ...Steps$1
+};
+var Tabs = Tabs$1;
+var Menu = {
+  ...Menu$1,
+  Portal: Portal
+};
+var CheckIcon = createIcon({
+  displayName: "CheckIcon",
+  viewBox: "0 0 24 24",
+  path: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      fill: "currentColor",
+      width: "24px",
+      height: "24px",
+      viewBox: "0 0 0.72 0.72",
+      xmlns: "http://www.w3.org/2000/svg",
+      "enable-background": "new 0 0 24 24",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "check" }),
+        /* @__PURE__ */ jsx("path", { d: "M0.561 0.216c-0.012 -0.012 -0.03 -0.012 -0.042 0l-0.225 0.225 -0.093 -0.093c-0.012 -0.012 -0.03 -0.012 -0.042 0s-0.012 0.03 0 0.042l0.114 0.114c0.006 0.006 0.012 0.009 0.021 0.009s0.015 -0.003 0.021 -0.009l0.246 -0.246c0.012 -0.012 0.012 -0.03 0 -0.042" })
+      ]
+    }
+  )
+});
+var CloseIcon = createIcon({
+  displayName: "CloseIcon",
+  viewBox: "0 0 24 24",
+  path: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24px",
+      height: "24px",
+      viewBox: "0 0 0.48 0.48",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "currentColor",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "close" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            "fill-rule": "evenodd",
+            "clip-rule": "evenodd",
+            d: "m0.24 0.261 0.109 0.109 0.021 -0.021L0.261 0.24l0.109 -0.109 -0.021 -0.021L0.24 0.219 0.131 0.109l-0.021 0.021L0.219 0.24l-0.109 0.109 0.021 0.021z"
+          }
+        )
+      ]
+    }
+  )
+});
+var WalletIcon = createIcon({
+  displayName: "WalletIcon",
+  viewBox: "0 0 21 18",
+  path: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M20 4H21V14H20V17C20 17.2652 19.8946 17.5196 19.7071 17.7071C19.5196 17.8946 19.2652 18 19 18H1C0.734784 18 0.48043 17.8946 0.292893 17.7071C0.105357 17.5196 0 17.2652 0 17V1C0 0.734784 0.105357 0.48043 0.292893 0.292893C0.48043 0.105357 0.734784 0 1 0H19C19.2652 0 19.5196 0.105357 19.7071 0.292893C19.8946 0.48043 20 0.734784 20 1V4ZM18 14H12C10.6739 14 9.40215 13.4732 8.46447 12.5355C7.52678 11.5979 7 10.3261 7 9C7 7.67392 7.52678 6.40215 8.46447 5.46447C9.40215 4.52678 10.6739 4 12 4H18V2H2V16H18V14ZM19 12V6H12C11.2044 6 10.4413 6.31607 9.87868 6.87868C9.31607 7.44129 9 8.20435 9 9C9 9.79565 9.31607 10.5587 9.87868 11.1213C10.4413 11.6839 11.2044 12 12 12H19ZM12 8H15V10H12V8Z",
+      fill: "currentColor"
+    }
+  )
+});
+var ThemeProvider = (props) => {
+  return /* @__PURE__ */ jsx(ChakraProvider, { ...props });
+};
+var badgeRecipe = defineRecipe({
+  base: {
+    borderRadius: "xl"
+  },
+  variants: {
+    variant: {
+      outline: {
+        border: "1px solid",
+        borderColor: "colorPalette.subtle/25",
+        bg: "colorPalette.subtle/10",
+        color: "colorPalette.solid"
+      }
+    }
+  }
+});
+var buttonRecipe = defineRecipe({
+  base: {
+    borderRadius: "lg"
+  },
+  variants: {
+    variant: {}
+  },
+  defaultVariants: { colorPalette: "primary" }
+});
+var cardRecipe = defineRecipe({
+  variants: {
+    variant: {
+      subtle: {}
+    }
+  },
+  defaultVariants: {
+    variant: "subtle"
+  }
+});
+var iconRecipe = defineRecipe({
+  variants: {
+    size: {
+      inherit: {},
+      xs: { boxSize: "3" },
+      sm: { boxSize: "4" },
+      md: { boxSize: "5" },
+      lg: { boxSize: "6" },
+      xl: { boxSize: "7" },
+      "2xl": { boxSize: "8" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var inputRecipe = defineRecipe({
+  variants: {
+    variant: {
+      outline: {
+        bg: "transparent",
+        borderWidth: "1px",
+        borderColor: "gray.450",
+        focusVisibleRing: "inside",
+        outlineWidth: "3px",
+        focusRingColor: "var(--focus-color)",
+        _focusVisible: {
+          borderColor: "border"
+        }
+      }
+    }
+  }
+});
+var linkRecipe = defineRecipe({
+  variants: {
+    variant: {
+      underline: {
+        color: "textPrimary"
+      },
+      plain: {
+        color: "textPrimary"
+      }
+    }
+  }
+});
+
+// src/theme/recipes/index.ts
+var recipes = {
+  button: buttonRecipe,
+  card: cardRecipe,
+  input: inputRecipe,
+  badge: badgeRecipe,
+  icon: iconRecipe,
+  link: linkRecipe
+};
+var semanticColors = defineSemanticTokens.colors({
+  bg: {
+    DEFAULT: {
+      value: {
+        _light: "{colors.background}",
+        _dark: "{colors.background}"
+      }
+    },
+    panel: {
+      value: { _light: "{colors.gray.600}", _dark: "{colors.gray.600}" }
+    },
+    muted: {
+      value: { _light: "{colors.gray.500}", _dark: "{colors.gray.500}" }
+    }
+  },
+  fg: {
+    DEFAULT: {
+      value: { _light: "{colors.gray.50}", _dark: "{colors.gray.50}" }
+    },
+    muted: {
+      value: { _light: "{colors.gray.200}", _dark: "{colors.gray.200}" }
+    }
+  },
+  red: {
+    solid: {
+      value: {
+        _light: "{colors.red.100}",
+        _dark: "{colors.red.100}"
+      }
+    },
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.red.700}", _dark: "{colors.red.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.red.100}", _dark: "{colors.red.900}" }
+    },
+    muted: {
+      value: { _light: "{colors.red.200}", _dark: "{colors.red.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.red.300}", _dark: "{colors.red.700}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.red.500}", _dark: "{colors.red.500}" }
+    }
+  },
+  primary: {
+    DEFAULT: {
+      value: { _light: "{colors.primary}", _dark: "{colors.primary}" }
+    },
+    solid: {
+      value: {
+        _light: "{colors.primary.default}",
+        _dark: "{colors.primary.default}"
+      }
+    },
+    muted: {
+      value: {
+        _light: "{colors.gray.300/40}",
+        _dark: "{colors.gray.300/40}"
+      }
+    },
+    contrast: {
+      value: { _light: "black", _dark: "black" }
+    },
+    fg: {
+      value: { _light: "{colors.gray.100}", _dark: "{colors.gray.100}" }
+    },
+    subtle: {
+      value: {
+        _light: "{colors.gray.300/20}",
+        _dark: "{colors.gray.300/20}"
+      }
+    },
+    emphasized: {
+      value: { _light: "{colors.gray.400}", _dark: "{colors.gray.400}" }
+    },
+    border: {
+      value: {
+        _light: "{colors.gray.600}",
+        _dark: "{colors.gray.600}"
+      }
+    }
+  },
+  green: {
+    contrast: {
+      value: { _light: "white", _dark: "white" }
+    },
+    fg: {
+      value: { _light: "{colors.green.300}", _dark: "{colors.green.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.green.100}", _dark: "{colors.green.100}" }
+    },
+    muted: {
+      value: { _light: "{colors.green.100}", _dark: "{colors.green.100}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.green.300}", _dark: "{colors.green.300}" }
+    },
+    solid: {
+      value: { _light: "{colors.green.300}", _dark: "{colors.green.300}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.green.300}", _dark: "{colors.green.300}" }
+    }
+  },
+  yellow: {
+    contrast: {
+      value: { _light: "black", _dark: "black" }
+    },
+    fg: {
+      value: { _light: "{colors.yellow.800}", _dark: "{colors.yellow.300}" }
+    },
+    subtle: {
+      value: { _light: "{colors.yellow.150}", _dark: "{colors.yellow.150}" }
+    },
+    muted: {
+      value: { _light: "{colors.yellow.200}", _dark: "{colors.yellow.800}" }
+    },
+    emphasized: {
+      value: { _light: "{colors.yellow.300}", _dark: "{colors.yellow.700}" }
+    },
+    solid: {
+      value: { _light: "{colors.yellow.100}", _dark: "{colors.yellow.100}" }
+    },
+    focusRing: {
+      value: { _light: "{colors.yellow.500}", _dark: "{colors.yellow.500}" }
+    }
+  }
+});
+
+// src/theme/semantic-tokens/index.ts
+var semanticTokens = {
+  colors: semanticColors
+};
+var menuSlotRecipe = defineSlotRecipe({
+  slots: menuAnatomy.keys(),
+  base: {
+    content: {
+      color: "primary.fg"
+    },
+    item: {
+      color: "primary.fg"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        item: {
+          _highlighted: {
+            bg: "primary.emphasized"
+          }
+        }
+      }
+    }
+  }
+});
+var tabsSlotRecipe = defineSlotRecipe({
+  slots: tabsAnatomy.keys(),
+  variants: {
+    variant: {
+      enclosed: {
+        trigger: {
+          _selected: {
+            color: "fg"
+          }
+        }
+      },
+      outline: {
+        trigger: {
+          _selected: {
+            color: "fg"
+          }
+        }
+      },
+      plain: {
+        trigger: {
+          _selected: {
+            color: "fg"
+          }
+        }
+      }
+    }
+  }
+});
+
+// src/theme/slot-recipes/index.ts
+var slotRecipes = {
+  menu: menuSlotRecipe,
+  tabs: tabsSlotRecipe
+};
+var colorsTokens = defineTokens.colors({
+  primary: {
+    contrast: { value: "{colors.gray.500}" },
+    default: { value: "{colors.yellow.100}" }
+  },
+  secondary: {
+    default: { value: "{colors.gray.500}" },
+    contrast: { value: "{colors.gray.300}" }
+  },
+  textPrimary: { value: "{colors.gray.50}" },
+  textSecondary: { value: "{colors.gray.300}" },
+  background: { value: "#0D0D0C" },
+  // ------------------------------------------
+  gray: {
+    "50": { value: "#F5F5F5" },
+    "100": { value: "#CFCCC9" },
+    "200": { value: "#AAA6A1" },
+    "300": { value: "#868079" },
+    "400": { value: "#5E5955" },
+    "500": { value: "#201F1D" },
+    "600": { value: "#151413" }
+  },
+  yellow: {
+    "50": { value: "#EED07C" },
+    "100": { value: "#FFC010" },
+    "150": { value: "#E3AF13" },
+    "200": { value: "#B68F40" },
+    "300": { value: "#F16517" },
+    "400": { value: "#B24F18" },
+    "500": { value: "#54372D" }
+  },
+  red: {
+    50: { value: "#EF9B8F" },
+    100: { value: "#F05D48" },
+    200: { value: "#F2290D" }
+  },
+  green: {
+    50: { value: "#8CEEB3" },
+    100: { value: "#00F48B" },
+    200: { value: "#00E55C" },
+    300: { value: "#00943B" }
+  },
+  blue: {
+    50: { value: "#90CDFA" },
+    100: { value: "#008EF4" },
+    200: { value: "#005DA0" }
+  }
+});
+var fontsTokens = defineTokens.fonts({
+  heading: { value: "Inter, sans-serif" },
+  body: { value: "Inter, sans-serif" }
+});
+
+// src/theme/tokens/index.ts
+var tokens = {
+  colors: colorsTokens,
+  fonts: fontsTokens
+};
+
+// src/theme/index.ts
+var config = defineConfig({
+  theme: {
+    tokens,
+    semanticTokens,
+    breakpoints: {
+      xs: "25em",
+      // 400px
+      sm: "48em",
+      // 768px
+      md: "64em",
+      // 1024px
+      lg: "80em",
+      // 1280px
+      xl: "90em"
+      // 1440px
+    },
+    recipes,
+    slotRecipes
+  },
+  globalCss: {
+    body: {
+      color: "textPrimary",
+      bg: "background",
+      minH: "100vh"
+    }
+  }
+});
+var theme = createSystem(defaultConfig, config);
+var theme_default = theme;
+
+export { Accordion, Avatar, AvatarGroup, Badge, box_default as Box, Breadcrumb, Button, card_default as Card, CheckIcon, checkbox_default as Checkbox, Clipboard, close_button_default as CloseButton, CloseIcon, Combobox, Container, Dialog, Drawer, EmptyState, flex_default as Flex, Grid, GridItem, HStack, heading_default as Heading, icon_default as Icon, icon_button_default as IconButton, image_default as Image, input_default as Input, link_default as Link, link_overlay_default as LinkOverlay, List, loader_default as Loader, Menu, MoneyField, Popover, QrCode, radio_default as Radio, RadioGroup, RhfCombobox, RhfInput, RhfMoneyField, Select, separator_default as Separator, Skeleton, SkeletonCircle, SkeletonText, Stack, Steps, switch_default as Switch, Tabs, text_default as Text, TextArea, text_mask_default as TextMask, ThemeProvider, Toast, Tooltip, VStack, WalletIcon, theme_default as theme, toaster };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map