bako-ui 0.2.1 → 0.2.3

package/dist/index.d.mts

@@ -25,10 +25,9 @@ declare function GridItem(props: GridItemProps$1): react_jsx_runtime.JSX.Element
 
 declare const Badge: react.ForwardRefExoticComponent<_chakra_ui_react.BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
-interface ButtonProps extends ButtonProps$1 {
-}
+declare const Button: react.ForwardRefExoticComponent<_chakra_ui_react.ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-declare function Button({ colorPalette, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+type ButtonProps = ButtonProps$1;
 
 declare const Card: typeof Card$1;
 
@@ -266,11 +265,15 @@ declare const ProgressLabel: react.ForwardRefExoticComponent<Progress$1.LabelPro
 declare const ProgressValueText: react.ForwardRefExoticComponent<Progress$1.ValueTextProps & react.RefAttributes<HTMLDivElement>>;
 
 interface TooltipProps extends Tooltip$1.RootProps {
-    content: react__default.ReactNode;
     showArrow?: boolean;
+    portalled?: boolean;
+    portalRef?: react__default.RefObject<HTMLElement | null>;
+    content: react__default.ReactNode;
+    contentProps?: Tooltip$1.ContentProps;
+    disabled?: boolean;
 }
 
-declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const Dialog: typeof Dialog$1 & {
     Portal: typeof Portal;

package/dist/index.d.ts

@@ -25,10 +25,9 @@ declare function GridItem(props: GridItemProps$1): react_jsx_runtime.JSX.Element
 
 declare const Badge: react.ForwardRefExoticComponent<_chakra_ui_react.BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
-interface ButtonProps extends ButtonProps$1 {
-}
+declare const Button: react.ForwardRefExoticComponent<_chakra_ui_react.ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
-declare function Button({ colorPalette, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+type ButtonProps = ButtonProps$1;
 
 declare const Card: typeof Card$1;
 
@@ -266,11 +265,15 @@ declare const ProgressLabel: react.ForwardRefExoticComponent<Progress$1.LabelPro
 declare const ProgressValueText: react.ForwardRefExoticComponent<Progress$1.ValueTextProps & react.RefAttributes<HTMLDivElement>>;
 
 interface TooltipProps extends Tooltip$1.RootProps {
-    content: react__default.ReactNode;
     showArrow?: boolean;
+    portalled?: boolean;
+    portalRef?: react__default.RefObject<HTMLElement | null>;
+    content: react__default.ReactNode;
+    contentProps?: Tooltip$1.ContentProps;
+    disabled?: boolean;
 }
 
-declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
+declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLDivElement>>;
 
 declare const Dialog: typeof Dialog$1 & {
     Portal: typeof Portal;

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;
@@ -23,16 +43,17 @@ var text_default = react.Text;
 var heading_default = react.Heading;
 var box_default = react.Box;
 var Badge = react.Badge;
-function Button({
-  colorPalette = "primary",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Button, { colorPalette, ...props });
-}
+var Button = React.forwardRef(
+  function Button2(props, ref) {
+    const { colorPalette = "primary", ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Button, { ref, colorPalette, ...rest });
+  }
+);
+var button_default = 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 +61,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 +69,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 +87,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 +102,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 +115,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 +124,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 +142,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 +185,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: [
@@ -234,15 +255,15 @@ function RhfCombobox({
     initialItems: options,
     filter: contains
   });
-  const [inputValue, setInputValue] = react$1.useState(value || "");
-  const [isTyping, setIsTyping] = react$1.useState(false);
-  react$1.useEffect(() => {
+  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$1.useCallback(
+  const handleValueChange = React.useCallback(
     (details) => {
       const newValue = details.value[0] || "";
       setIsTyping(false);
@@ -252,7 +273,7 @@ function RhfCombobox({
     },
     [onChange, onInputValueChange]
   );
-  const handleInputValueChange = react$1.useCallback(
+  const handleInputValueChange = React.useCallback(
     (details) => {
       setIsTyping(true);
       setInputValue(details.inputValue);
@@ -267,7 +288,7 @@ function RhfCombobox({
     },
     [filter, allowCustomValue, onChange, onInputValueChange]
   );
-  const handleOpenChange = react$1.useCallback(
+  const handleOpenChange = React.useCallback(
     (details) => {
       var _a, _b;
       if (allowCustomValue && details.open && inputValue.trim() !== "") {
@@ -280,7 +301,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;
     }
@@ -391,7 +412,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]
   );
@@ -454,7 +475,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: [
@@ -503,7 +524,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: [
@@ -525,7 +546,7 @@ var defaultMaskOptions = {
   showMaskOnFocus: false,
   showMaskOnHover: false
 };
-var TextMask = react$1.forwardRef(
+var TextMask = React.forwardRef(
   ({ mask, maskOptions, ...props }, ref) => {
     const mergedMaskOptions = {
       ...defaultMaskOptions,
@@ -553,7 +574,7 @@ function AvatarGroup(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(react.Group, { ...props });
 }
 var EmptyState = react.EmptyState;
-var Progress = react$1.forwardRef(
+var Progress = React.forwardRef(
   function Progress2(props, ref) {
     const {
       showValueText,
@@ -577,16 +598,29 @@ var ProgressTrack = react.Progress.Track;
 var ProgressRange = react.Progress.Range;
 var ProgressLabel = react.Progress.Label;
 var ProgressValueText = react.Progress.ValueText;
-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 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
@@ -775,10 +809,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: {
@@ -821,8 +855,8 @@ var semanticColors = react.defineSemanticTokens.colors({
     },
     solid: {
       value: {
-        _light: "{colors.primary.default}",
-        _dark: "{colors.primary.default}"
+        _light: "{colors.primary.main}",
+        _dark: "{colors.primary.main}"
       }
     },
     muted: {
@@ -848,8 +882,8 @@ var semanticColors = react.defineSemanticTokens.colors({
     },
     border: {
       value: {
-        _light: "{colors.gray.600}",
-        _dark: "{colors.gray.600}"
+        _light: "{colors.gray.700}",
+        _dark: "{colors.gray.700}"
       }
     }
   },
@@ -913,6 +947,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: {
@@ -981,6 +1035,22 @@ var tabsSlotRecipe = react.defineSlotRecipe({
             color: "fg"
           }
         }
+      },
+      subtle: {
+        trigger: {
+          rounded: "lg",
+          color: "textSecondary",
+          bg: "bg.panel",
+          transition: "all 0.3s",
+          _hover: {
+            bg: "bg.muted",
+            color: "textPrimary"
+          },
+          _selected: {
+            color: "textPrimary",
+            bg: "bg.muted"
+          }
+        }
       }
     }
   }
@@ -1035,15 +1105,16 @@ var slotRecipes = {
   menu: menuSlotRecipe,
   tabs: tabsSlotRecipe,
   progress: progessSlotRecipes,
-  toast: toastSlotRecipe
+  toast: toastSlotRecipe,
+  accordion: accordionSlotRecipe
 };
 var colorsTokens = react.defineTokens.colors({
   primary: {
-    contrast: { value: "{colors.gray.500}" },
-    default: { value: "{colors.yellow.100}" }
+    contrast: { value: "{colors.gray.600}" },
+    main: { value: "{colors.yellow.100}" }
   },
   secondary: {
-    default: { value: "{colors.gray.500}" },
+    main: { value: "{colors.gray.600}" },
     contrast: { value: "{colors.gray.300}" }
   },
   textPrimary: { value: "{colors.gray.100}" },
@@ -1056,8 +1127,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" },
@@ -1221,7 +1294,7 @@ exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
 exports.Box = box_default;
 exports.Breadcrumb = Breadcrumb;
-exports.Button = Button;
+exports.Button = button_default;
 exports.Card = card_default;
 exports.CheckIcon = CheckIcon;
 exports.Checkbox = checkbox_default;
@@ -1275,7 +1348,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;