bako-ui 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -1,11 +1,12 @@
-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';
+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, Progress as Progress$1, Tooltip as Tooltip$1, Portal, 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, 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, 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 * as React from 'react';
+import { forwardRef, useRef, useMemo, useCallback, useState, useEffect } 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';
+import { accordionAnatomy, menuAnatomy, progressAnatomy, tabsAnatomy, toastAnatomy } from '@chakra-ui/react/anatomy';
 
 // src/components/Stack/stack.tsx
 var Stack = Stack$1;
@@ -222,7 +223,8 @@ function RhfCombobox({
   variant,
   clearTriggerIcon,
   showTrigger = false,
-  allowCustomValue = true
+  allowCustomValue = true,
+  onInputValueChange
 }) {
   const {
     field: { value, onChange, ref, ...rest }
@@ -233,25 +235,37 @@ function RhfCombobox({
     filter: contains
   });
   const [inputValue, setInputValue] = useState(value || "");
+  const [isTyping, setIsTyping] = useState(false);
+  useEffect(() => {
+    if (isTyping) return;
+    if (value !== inputValue) {
+      setInputValue(value || "");
+    }
+  }, [value, inputValue, isTyping]);
   const handleValueChange = useCallback(
     (details) => {
       const newValue = details.value[0] || "";
+      setIsTyping(false);
       onChange(newValue);
       setInputValue(newValue);
+      onInputValueChange == null ? void 0 : onInputValueChange(newValue);
     },
-    [onChange]
+    [onChange, onInputValueChange]
   );
   const handleInputValueChange = useCallback(
     (details) => {
+      setIsTyping(true);
       setInputValue(details.inputValue);
       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 = useCallback(
     (details) => {
@@ -313,6 +327,7 @@ function RhfCombobox({
         invalid: !!error,
         allowCustomValue,
         selectionBehavior: "preserve",
+        defaultValue: [defaultValue || ""],
         ...slotProps == null ? void 0 : slotProps.root,
         children: [
           /* @__PURE__ */ jsxs(Combobox$1.Control, { children: [
@@ -538,16 +553,53 @@ 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 Progress = forwardRef(
+  function Progress2(props, ref) {
+    const {
+      showValueText,
+      valueText,
+      label,
+      trackProps,
+      rangeProps,
+      labelProps,
+      valueTextProps,
+      ...rootProps
+    } = props;
+    return /* @__PURE__ */ jsxs(Progress$1.Root, { ref, ...rootProps, children: [
+      label && /* @__PURE__ */ jsx(Progress$1.Label, { ...labelProps, children: label }),
+      /* @__PURE__ */ jsx(Progress$1.Track, { ...trackProps, children: /* @__PURE__ */ jsx(Progress$1.Range, { ...rangeProps }) }),
+      showValueText && /* @__PURE__ */ jsx(Progress$1.ValueText, { ...valueTextProps, children: valueText })
+    ] });
+  }
+);
+var ProgressRoot = Progress$1.Root;
+var ProgressTrack = Progress$1.Track;
+var ProgressRange = Progress$1.Range;
+var ProgressLabel = Progress$1.Label;
+var ProgressValueText = Progress$1.ValueText;
+var Tooltip = React.forwardRef(
+  function Tooltip2(props, ref) {
+    const {
+      showArrow,
+      children,
+      disabled,
+      portalled = true,
+      content,
+      contentProps,
+      portalRef,
+      ...rest
+    } = props;
+    if (disabled) return children;
+    return /* @__PURE__ */ jsxs(Tooltip$1.Root, { ...rest, children: [
+      /* @__PURE__ */ jsx(Tooltip$1.Trigger, { asChild: true, children }),
+      /* @__PURE__ */ jsx(Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { children: /* @__PURE__ */ jsxs(Tooltip$1.Content, { ref, ...contentProps, children: [
+        showArrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, { children: /* @__PURE__ */ jsx(Tooltip$1.ArrowTip, {}) }),
+        content
+      ] }) }) })
+    ] });
+  }
+);
+var tooltip_default = Tooltip;
 var Dialog = {
   ...Dialog$1,
   Portal: Portal
@@ -736,10 +788,10 @@ var semanticColors = 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: {
@@ -761,7 +813,7 @@ var semanticColors = 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}" }
@@ -809,8 +861,8 @@ var semanticColors = defineSemanticTokens.colors({
     },
     border: {
       value: {
-        _light: "{colors.gray.600}",
-        _dark: "{colors.gray.600}"
+        _light: "{colors.gray.700}",
+        _dark: "{colors.gray.700}"
       }
     }
   },
@@ -819,7 +871,7 @@ var semanticColors = 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}" }
@@ -842,7 +894,7 @@ var semanticColors = 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}" }
@@ -859,6 +911,14 @@ var semanticColors = 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}" }
+    }
   }
 });
 
@@ -866,6 +926,26 @@ var semanticColors = defineSemanticTokens.colors({
 var semanticTokens = {
   colors: semanticColors
 };
+var accordionSlotRecipe = defineSlotRecipe({
+  slots: accordionAnatomy.keys(),
+  base: {
+    root: {
+      "--accordion-radius": "radii.lg"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        item: {
+          bg: "bg.panel",
+          _open: {
+            bg: "bg.panel"
+          }
+        }
+      }
+    }
+  }
+});
 var menuSlotRecipe = defineSlotRecipe({
   slots: menuAnatomy.keys(),
   base: {
@@ -888,6 +968,28 @@ var menuSlotRecipe = defineSlotRecipe({
     }
   }
 });
+var progessSlotRecipes = defineSlotRecipe({
+  slots: 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 = defineSlotRecipe({
   slots: tabsAnatomy.keys(),
   variants: {
@@ -916,22 +1018,69 @@ var tabsSlotRecipe = defineSlotRecipe({
     }
   }
 });
+var toastSlotRecipe = defineSlotRecipe({
+  slots: 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 = 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" },
   // ------------------------------------------
@@ -941,8 +1090,10 @@ var colorsTokens = 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" },
@@ -1012,6 +1163,6 @@ var config = defineConfig({
 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 };
+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, Progress, ProgressLabel, ProgressRange, ProgressRoot, ProgressTrack, ProgressValueText, 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_default as Tooltip, VStack, WalletIcon, theme_default as theme, toaster };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map