bako-ui 0.2.0 → 0.2.1

package/dist/index.mjs

@@ -1,11 +1,11 @@
-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, 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 { 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 { menuAnatomy, progressAnatomy, tabsAnatomy, toastAnatomy } from '@chakra-ui/react/anatomy';
 
 // src/components/Stack/stack.tsx
 var Stack = Stack$1;
@@ -222,7 +222,8 @@ function RhfCombobox({
   variant,
   clearTriggerIcon,
   showTrigger = false,
-  allowCustomValue = true
+  allowCustomValue = true,
+  onInputValueChange
 }) {
   const {
     field: { value, onChange, ref, ...rest }
@@ -233,25 +234,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 +326,7 @@ function RhfCombobox({
         invalid: !!error,
         allowCustomValue,
         selectionBehavior: "preserve",
+        defaultValue: [defaultValue || ""],
         ...slotProps == null ? void 0 : slotProps.root,
         children: [
           /* @__PURE__ */ jsxs(Combobox$1.Control, { children: [
@@ -538,6 +552,30 @@ function AvatarGroup(props) {
   return /* @__PURE__ */ jsx(Group, { ...props });
 }
 var EmptyState = EmptyState$1;
+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;
 function Tooltip(props) {
   const { children, content, showArrow = true, ...rest } = props;
   return /* @__PURE__ */ jsxs(Tooltip$1.Root, { ...rest, children: [
@@ -761,7 +799,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}" }
@@ -819,7 +857,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 +880,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 +897,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}" }
+    }
   }
 });
 
@@ -888,6 +934,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,11 +984,57 @@ 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
 };
 var colorsTokens = defineTokens.colors({
   primary: {
@@ -931,7 +1045,7 @@ var colorsTokens = defineTokens.colors({
     default: { value: "{colors.gray.500}" },
     contrast: { value: "{colors.gray.300}" }
   },
-  textPrimary: { value: "{colors.gray.50}" },
+  textPrimary: { value: "{colors.gray.100}" },
   textSecondary: { value: "{colors.gray.300}" },
   background: { value: "#0D0D0C" },
   // ------------------------------------------
@@ -1012,6 +1126,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, VStack, WalletIcon, theme_default as theme, toaster };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map