bako-ui 0.2.0 → 0.2.2

package/dist/index.js

@@ -2,12 +2,32 @@
 
 var react = require('@chakra-ui/react');
 var jsxRuntime = require('react/jsx-runtime');
-var react$1 = require('react');
+var React = require('react');
 var reactDom = require('react-dom');
 var reactHookForm = require('react-hook-form');
 var useMaskInput = require('use-mask-input');
 var anatomy = require('@chakra-ui/react/anatomy');
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
 // src/components/Stack/stack.tsx
 var Stack = react.Stack;
 var HStack = react.HStack;
@@ -32,7 +52,7 @@ function Button({
 var Card = react.Card;
 var card_default = Card;
 var Clipboard = react.Clipboard;
-var close_button_default = react$1.forwardRef(
+var close_button_default = React.forwardRef(
   function CloseButton(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(react.CloseButton, { ref, ...props });
   }
@@ -40,7 +60,7 @@ var close_button_default = react$1.forwardRef(
 function Container(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Container, { ...props });
 }
-var icon_button_default = react$1.forwardRef(
+var icon_button_default = React.forwardRef(
   function IconButton(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(react.IconButton, { ref, ...props });
   }
@@ -48,16 +68,16 @@ var icon_button_default = react$1.forwardRef(
 var QrCode = react.QrCode;
 var separator_default = react.Separator;
 var image_default = react.Image;
-var Icon = react$1.forwardRef(function Icon2(props, ref) {
+var Icon = React.forwardRef(function Icon2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { ref, ...props });
 });
 var icon_default = Icon;
-var link_default = react$1.forwardRef(
+var link_default = React.forwardRef(
   function Link(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(react.Link, { ref, ...props });
   }
 );
-var link_overlay_default = react$1.forwardRef(
+var link_overlay_default = React.forwardRef(
   function LinkOverlay(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(react.LinkOverlay, { ref, ...props });
   }
@@ -66,7 +86,7 @@ var loader_default = react.Spinner;
 var Skeleton = react.Skeleton;
 var SkeletonCircle = react.SkeletonCircle;
 var SkeletonText = react.SkeletonText;
-var Checkbox = react$1.forwardRef(
+var Checkbox = React.forwardRef(
   function Checkbox2(props, ref) {
     const { icon, children, inputProps, rootRef, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Checkbox.Root, { ref: rootRef, ...rest, children: [
@@ -81,7 +101,7 @@ var Combobox = {
   ...react.Combobox,
   Portal: react.Portal
 };
-var input_default = react$1.forwardRef(
+var input_default = React.forwardRef(
   function Input(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(react.Input, { ref, ...props });
   }
@@ -94,8 +114,8 @@ function MoneyField({
   decimalScale = 2,
   ...props
 }) {
-  const inputRef = react$1.useRef(null);
-  const config2 = react$1.useMemo(
+  const inputRef = React.useRef(null);
+  const config2 = React.useMemo(
     () => ({
       thousandSeparator,
       decimalSeparator,
@@ -103,7 +123,7 @@ function MoneyField({
     }),
     [thousandSeparator, decimalSeparator, decimalScale]
   );
-  const formatNumber = react$1.useCallback(
+  const formatNumber = React.useCallback(
     (num) => {
       const numStr = String(num).replace(/[^\d.-]/g, "");
       if (!numStr || numStr === "-") return "";
@@ -121,17 +141,17 @@ function MoneyField({
     },
     [config2]
   );
-  const unformatNumber = react$1.useCallback(
+  const unformatNumber = React.useCallback(
     (formatted) => {
       return formatted.replace(new RegExp(`\\${config2.thousandSeparator}`, "g"), "").replace(new RegExp(`\\${config2.decimalSeparator}`, "g"), ".");
     },
     [config2]
   );
-  const displayValue = react$1.useMemo(() => {
+  const displayValue = React.useMemo(() => {
     if (!value && value !== 0) return "";
     return formatNumber(value);
   }, [value, formatNumber]);
-  const handleChange = react$1.useCallback(
+  const handleChange = React.useCallback(
     (event) => {
       const inputValue = event.target.value;
       const cursorPosition = event.target.selectionStart || 0;
@@ -164,12 +184,12 @@ function MoneyField({
     }
   );
 }
-var RadioGroup = react$1.forwardRef(
+var RadioGroup = React.forwardRef(
   function RadioGroup2(props, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(react.RadioGroup.Root, { ref, spaceX: 2, ...props });
   }
 );
-var Radio = react$1.forwardRef(
+var Radio = React.forwardRef(
   function Radio2(props, ref) {
     const { children, inputProps, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.RadioGroup.Item, { ...rest, children: [
@@ -223,7 +243,8 @@ function RhfCombobox({
   variant,
   clearTriggerIcon,
   showTrigger = false,
-  allowCustomValue = true
+  allowCustomValue = true,
+  onInputValueChange
 }) {
   const {
     field: { value, onChange, ref, ...rest }
@@ -233,28 +254,40 @@ function RhfCombobox({
     initialItems: options,
     filter: contains
   });
-  const [inputValue, setInputValue] = react$1.useState(value || "");
-  const handleValueChange = react$1.useCallback(
+  const [inputValue, setInputValue] = React.useState(value || "");
+  const [isTyping, setIsTyping] = React.useState(false);
+  React.useEffect(() => {
+    if (isTyping) return;
+    if (value !== inputValue) {
+      setInputValue(value || "");
+    }
+  }, [value, inputValue, isTyping]);
+  const handleValueChange = React.useCallback(
     (details) => {
       const newValue = details.value[0] || "";
+      setIsTyping(false);
       onChange(newValue);
       setInputValue(newValue);
+      onInputValueChange == null ? void 0 : onInputValueChange(newValue);
     },
-    [onChange]
+    [onChange, onInputValueChange]
   );
-  const handleInputValueChange = react$1.useCallback(
+  const handleInputValueChange = React.useCallback(
     (details) => {
+      setIsTyping(true);
       setInputValue(details.inputValue);
       reactDom.flushSync(() => {
         filter(details.inputValue);
       });
+      onInputValueChange == null ? void 0 : onInputValueChange(details.inputValue);
       if (allowCustomValue) {
         onChange(details.inputValue);
       }
+      setTimeout(() => setIsTyping(false), 100);
     },
-    [filter, allowCustomValue, onChange]
+    [filter, allowCustomValue, onChange, onInputValueChange]
   );
-  const handleOpenChange = react$1.useCallback(
+  const handleOpenChange = React.useCallback(
     (details) => {
       var _a, _b;
       if (allowCustomValue && details.open && inputValue.trim() !== "") {
@@ -267,7 +300,7 @@ function RhfCombobox({
     },
     [slotProps == null ? void 0 : slotProps.root, allowCustomValue, inputValue, collection.items.length]
   );
-  const hasValue = react$1.useMemo(() => {
+  const hasValue = React.useMemo(() => {
     if (!value) {
       return false;
     }
@@ -314,6 +347,7 @@ function RhfCombobox({
         invalid: !!error,
         allowCustomValue,
         selectionBehavior: "preserve",
+        defaultValue: [defaultValue || ""],
         ...slotProps == null ? void 0 : slotProps.root,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(react.Combobox.Control, { children: [
@@ -377,7 +411,7 @@ function RhfInput({
     field: { value, onChange, ref, ...rest }
   } = reactHookForm.useController({ control, defaultValue, name });
   const { inputGroup } = slotProps || {};
-  const hasValue = react$1.useMemo(
+  const hasValue = React.useMemo(
     () => value != null && value !== "" && value.toString().length > 0,
     [value]
   );
@@ -440,7 +474,7 @@ function RhfMoneyField({
   const {
     field: { value, onChange, ...rest }
   } = reactHookForm.useController({ control, defaultValue, name });
-  const hasValue = react$1.useMemo(() => {
+  const hasValue = React.useMemo(() => {
     return String(value).length > 0;
   }, [value]);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Field.Root, { invalid: !!error, children: [
@@ -489,7 +523,7 @@ var Select = {
   ...react.Select,
   Portal: react.Portal
 };
-var Switch = react$1.forwardRef(
+var Switch = React.forwardRef(
   function Switch2(props, ref) {
     const { children, inputProps, thumbLabel, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Switch.Root, { ...rest, children: [
@@ -511,7 +545,7 @@ var defaultMaskOptions = {
   showMaskOnFocus: false,
   showMaskOnHover: false
 };
-var TextMask = react$1.forwardRef(
+var TextMask = React.forwardRef(
   ({ mask, maskOptions, ...props }, ref) => {
     const mergedMaskOptions = {
       ...defaultMaskOptions,
@@ -539,16 +573,53 @@ function AvatarGroup(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Group, { ...props });
 }
 var EmptyState = react.EmptyState;
-function Tooltip(props) {
-  const { children, content, showArrow = true, ...rest } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Tooltip.Root, { ...rest, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Tooltip.Content, { children: [
-      showArrow && /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Arrow, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.ArrowTip, {}) }),
-      content
-    ] }) }) })
-  ] });
-}
+var Progress = React.forwardRef(
+  function Progress2(props, ref) {
+    const {
+      showValueText,
+      valueText,
+      label,
+      trackProps,
+      rangeProps,
+      labelProps,
+      valueTextProps,
+      ...rootProps
+    } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Progress.Root, { ref, ...rootProps, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Label, { ...labelProps, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Track, { ...trackProps, children: /* @__PURE__ */ jsxRuntime.jsx(react.Progress.Range, { ...rangeProps }) }),
+      showValueText && /* @__PURE__ */ jsxRuntime.jsx(react.Progress.ValueText, { ...valueTextProps, children: valueText })
+    ] });
+  }
+);
+var ProgressRoot = react.Progress.Root;
+var ProgressTrack = react.Progress.Track;
+var ProgressRange = react.Progress.Range;
+var ProgressLabel = react.Progress.Label;
+var ProgressValueText = react.Progress.ValueText;
+var Tooltip = React__namespace.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props;
+    if (disabled) return children;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Tooltip.Root, { ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Tooltip.Content, { ref, ...contentProps, children: [
+        showArrow && /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.Arrow, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Tooltip.ArrowTip, {}) }),
+        content
+      ] }) }) })
+    ] });
+  }
+);
+var tooltip_default = Tooltip;
 var Dialog = {
   ...react.Dialog,
   Portal: react.Portal
@@ -737,10 +808,10 @@ var semanticColors = react.defineSemanticTokens.colors({
       }
     },
     panel: {
-      value: { _light: "{colors.gray.600}", _dark: "{colors.gray.600}" }
+      value: { _light: "{colors.gray.700}", _dark: "{colors.gray.700}" }
     },
     muted: {
-      value: { _light: "{colors.gray.500}", _dark: "{colors.gray.500}" }
+      value: { _light: "{colors.gray.600}", _dark: "{colors.gray.600}" }
     }
   },
   fg: {
@@ -762,7 +833,7 @@ var semanticColors = react.defineSemanticTokens.colors({
       value: { _light: "white", _dark: "white" }
     },
     fg: {
-      value: { _light: "{colors.red.700}", _dark: "{colors.red.300}" }
+      value: { _light: "{colors.red.50}", _dark: "{colors.red.50}" }
     },
     subtle: {
       value: { _light: "{colors.red.100}", _dark: "{colors.red.900}" }
@@ -810,8 +881,8 @@ var semanticColors = react.defineSemanticTokens.colors({
     },
     border: {
       value: {
-        _light: "{colors.gray.600}",
-        _dark: "{colors.gray.600}"
+        _light: "{colors.gray.700}",
+        _dark: "{colors.gray.700}"
       }
     }
   },
@@ -820,7 +891,7 @@ var semanticColors = react.defineSemanticTokens.colors({
       value: { _light: "white", _dark: "white" }
     },
     fg: {
-      value: { _light: "{colors.green.300}", _dark: "{colors.green.300}" }
+      value: { _light: "{colors.green.50}", _dark: "{colors.green.50}" }
     },
     subtle: {
       value: { _light: "{colors.green.100}", _dark: "{colors.green.100}" }
@@ -843,7 +914,7 @@ var semanticColors = react.defineSemanticTokens.colors({
       value: { _light: "black", _dark: "black" }
     },
     fg: {
-      value: { _light: "{colors.yellow.800}", _dark: "{colors.yellow.300}" }
+      value: { _light: "{colors.yellow.50}", _dark: "{colors.yellow.50}" }
     },
     subtle: {
       value: { _light: "{colors.yellow.150}", _dark: "{colors.yellow.150}" }
@@ -860,6 +931,14 @@ var semanticColors = react.defineSemanticTokens.colors({
     focusRing: {
       value: { _light: "{colors.yellow.500}", _dark: "{colors.yellow.500}" }
     }
+  },
+  blue: {
+    solid: {
+      value: { _light: "{colors.blue.200}", _dark: "{colors.blue.200}" }
+    },
+    fg: {
+      value: { _light: "{colors.blue.50}", _dark: "{colors.blue.50}" }
+    }
   }
 });
 
@@ -867,6 +946,26 @@ var semanticColors = react.defineSemanticTokens.colors({
 var semanticTokens = {
   colors: semanticColors
 };
+var accordionSlotRecipe = react.defineSlotRecipe({
+  slots: anatomy.accordionAnatomy.keys(),
+  base: {
+    root: {
+      "--accordion-radius": "radii.lg"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        item: {
+          bg: "bg.panel",
+          _open: {
+            bg: "bg.panel"
+          }
+        }
+      }
+    }
+  }
+});
 var menuSlotRecipe = react.defineSlotRecipe({
   slots: anatomy.menuAnatomy.keys(),
   base: {
@@ -889,6 +988,28 @@ var menuSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
+var progessSlotRecipes = react.defineSlotRecipe({
+  slots: anatomy.progressAnatomy.keys(),
+  variants: {
+    size: {
+      xs: {
+        track: { h: "0.5" }
+      },
+      sm: {
+        track: { h: "1" }
+      },
+      md: {
+        track: { h: "2.5" }
+      },
+      lg: {
+        track: { h: "3" }
+      },
+      xl: {
+        track: { h: "4" }
+      }
+    }
+  }
+});
 var tabsSlotRecipe = react.defineSlotRecipe({
   slots: anatomy.tabsAnatomy.keys(),
   variants: {
@@ -917,22 +1038,69 @@ var tabsSlotRecipe = react.defineSlotRecipe({
     }
   }
 });
+var toastSlotRecipe = react.defineSlotRecipe({
+  slots: anatomy.toastAnatomy.keys(),
+  base: {
+    root: {
+      py: "2",
+      ps: "2",
+      pe: "4",
+      gap: "2",
+      borderRadius: "lg",
+      border: "1px solid",
+      borderColor: "variable(--toast-border-color, transparent)",
+      "&[data-type=info]": {
+        bg: "blue.solid/15",
+        color: "blue.fg",
+        "--toast-trigger-bg": "{white/10}",
+        "--toast-border-color": "{blue.solid/30}"
+      },
+      "&[data-type=warning]": {
+        bg: "yellow.solid/15",
+        color: "yellow.fg",
+        "--toast-trigger-bg": "{white/10}",
+        "--toast-border-color": "{yellow.solid/30}"
+      },
+      "&[data-type=success]": {
+        bg: "green.solid/15",
+        color: "green.fg",
+        "--toast-trigger-bg": "{white/10}",
+        "--toast-border-color": "{green.solid/30}"
+      },
+      "&[data-type=error]": {
+        bg: "red.solid/15",
+        color: "red.fg",
+        "--toast-trigger-bg": "{white/10}",
+        "--toast-border-color": "{red.solid/30}"
+      }
+    },
+    title: {
+      fontWeight: "semibold"
+    },
+    description: {
+      fontStyle: "xs"
+    }
+  }
+});
 
 // src/theme/slot-recipes/index.ts
 var slotRecipes = {
   menu: menuSlotRecipe,
-  tabs: tabsSlotRecipe
+  tabs: tabsSlotRecipe,
+  progress: progessSlotRecipes,
+  toast: toastSlotRecipe,
+  accordion: accordionSlotRecipe
 };
 var colorsTokens = react.defineTokens.colors({
   primary: {
-    contrast: { value: "{colors.gray.500}" },
+    contrast: { value: "{colors.gray.600}" },
     default: { value: "{colors.yellow.100}" }
   },
   secondary: {
-    default: { value: "{colors.gray.500}" },
+    default: { value: "{colors.gray.600}" },
     contrast: { value: "{colors.gray.300}" }
   },
-  textPrimary: { value: "{colors.gray.50}" },
+  textPrimary: { value: "{colors.gray.100}" },
   textSecondary: { value: "{colors.gray.300}" },
   background: { value: "#0D0D0C" },
   // ------------------------------------------
@@ -942,8 +1110,10 @@ var colorsTokens = react.defineTokens.colors({
     "200": { value: "#AAA6A1" },
     "300": { value: "#868079" },
     "400": { value: "#5E5955" },
-    "500": { value: "#201F1D" },
-    "600": { value: "#151413" }
+    "500": { value: "#353230" },
+    "550": { value: "#2B2927" },
+    "600": { value: "#201F1D" },
+    "700": { value: "#151413" }
   },
   yellow: {
     "50": { value: "#EED07C" },
@@ -1135,6 +1305,12 @@ exports.Loader = loader_default;
 exports.Menu = Menu;
 exports.MoneyField = MoneyField;
 exports.Popover = Popover;
+exports.Progress = Progress;
+exports.ProgressLabel = ProgressLabel;
+exports.ProgressRange = ProgressRange;
+exports.ProgressRoot = ProgressRoot;
+exports.ProgressTrack = ProgressTrack;
+exports.ProgressValueText = ProgressValueText;
 exports.QrCode = QrCode;
 exports.Radio = radio_default;
 exports.RadioGroup = RadioGroup;
@@ -1155,7 +1331,7 @@ exports.TextArea = TextArea;
 exports.TextMask = text_mask_default;
 exports.ThemeProvider = ThemeProvider;
 exports.Toast = Toast;
-exports.Tooltip = Tooltip;
+exports.Tooltip = tooltip_default;
 exports.VStack = VStack;
 exports.WalletIcon = WalletIcon;
 exports.theme = theme_default;