bako-ui 0.4.0 → 0.5.1

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Button as Button$1, 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, Float, 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, defineStyle, Grid as Grid$1, GridItem as GridItem$1, Container as Container$1, useFilter, useListCollection, Field, Span, InputGroup, Textarea, useAvatar, Avatar as Avatar$1, Group, ChakraProvider } from '@chakra-ui/react';
+import { Button as Button$1, 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, Float, HStack as HStack$1, Heading, Image, List as List$1, Spinner, QrCode as QrCode$1, ScrollArea as ScrollArea$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, defineStyle, Grid as Grid$1, GridItem as GridItem$1, Container as Container$1, useFilter, useListCollection, Field, Span, InputGroup, Textarea, useAvatar, 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, useSelect, useSelectContext, useSelectItemContext, useSteps, useStepsContext, useStepsItemContext } from '@chakra-ui/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -7,7 +7,7 @@ import { flushSync } from 'react-dom';
 import { useController } from 'react-hook-form';
 import { withMask } from 'use-mask-input';
 export { Chart, ChartGradient, ChartLegend, ChartRadialText, ChartRoot, ChartTooltip, useChart } from '@chakra-ui/charts';
-import { accordionAnatomy, fieldAnatomy, menuAnatomy, progressAnatomy, tabsAnatomy, toastAnatomy } from '@chakra-ui/react/anatomy';
+import { accordionAnatomy, cardAnatomy, checkboxAnatomy, comboboxAnatomy, dialogAnatomy, fieldAnatomy, menuAnatomy, popoverAnatomy, progressAnatomy, selectAnatomy, tabsAnatomy, toastAnatomy, tooltipAnatomy } from '@chakra-ui/react/anatomy';
 
 // src/components/Stack/stack.tsx
 var Stack = Stack$1;
@@ -398,16 +398,16 @@ function RhfInput({
     [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(InputGroup, { borderRadius: "lg", ...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",
+          borderTopLeftRadius: (inputGroup == null ? void 0 : inputGroup.startAddon) ? "none" : "lg",
+          borderBottomLeftRadius: (inputGroup == null ? void 0 : inputGroup.startAddon) ? "none" : "lg",
+          borderTopRightRadius: (inputGroup == null ? void 0 : inputGroup.endAddon) ? "none" : "lg",
+          borderBottomRightRadius: (inputGroup == null ? void 0 : inputGroup.endAddon) ? "none" : "lg",
           type,
           onChange,
           className: `peer ${((_a = slotProps == null ? void 0 : slotProps.input) == null ? void 0 : _a.className) || ""}`,
@@ -596,6 +596,7 @@ var ProgressTrack = Progress$1.Track;
 var ProgressRange = Progress$1.Range;
 var ProgressLabel = Progress$1.Label;
 var ProgressValueText = Progress$1.ValueText;
+var ScrollArea = ScrollArea$1;
 var Tooltip = React.forwardRef(
   function Tooltip2(props, ref) {
     const {
@@ -735,17 +736,7 @@ var buttonRecipe = defineRecipe({
   variants: {
     variant: {}
   },
-  defaultVariants: { colorPalette: "primary" }
-});
-var cardRecipe = defineRecipe({
-  variants: {
-    variant: {
-      subtle: {}
-    }
-  },
-  defaultVariants: {
-    variant: "subtle"
-  }
+  defaultVariants: { colorPalette: "yellow" }
 });
 var iconRecipe = defineRecipe({
   variants: {
@@ -764,6 +755,9 @@ var iconRecipe = defineRecipe({
   }
 });
 var inputRecipe = defineRecipe({
+  base: {
+    borderRadius: "lg"
+  },
   variants: {
     variant: {
       outline: {
@@ -792,15 +786,20 @@ var linkRecipe = defineRecipe({
     }
   }
 });
+var textareaRecipe = defineRecipe({
+  base: {
+    borderRadius: "lg"
+  }
+});
 
 // src/theme/recipes/index.ts
 var recipes = {
   button: buttonRecipe,
-  card: cardRecipe,
   input: inputRecipe,
   badge: badgeRecipe,
   icon: iconRecipe,
-  link: linkRecipe
+  link: linkRecipe,
+  textarea: textareaRecipe
 };
 var semanticColors = defineSemanticTokens.colors({
   bg: {
@@ -974,6 +973,50 @@ var accordionSlotRecipe = defineSlotRecipe({
     }
   }
 });
+var cardSlotRecipe = defineSlotRecipe({
+  slots: cardAnatomy.keys(),
+  base: {
+    root: {
+      borderRadius: "2xl"
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        root: {
+          bg: "bg.panel"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "subtle"
+  }
+});
+var checkboxSlotRecipe = defineSlotRecipe({
+  slots: checkboxAnatomy.keys(),
+  base: {
+    control: {
+      borderRadius: "sm"
+    }
+  }
+});
+var comboboxSlotRecipe = defineSlotRecipe({
+  slots: comboboxAnatomy.keys(),
+  base: {
+    input: {
+      borderRadius: "lg"
+    }
+  }
+});
+var dialogSlotRecipe = defineSlotRecipe({
+  slots: dialogAnatomy.keys(),
+  base: {
+    content: {
+      borderRadius: "2xl"
+    }
+  }
+});
 var fieldSlotRecipe = defineSlotRecipe({
   slots: fieldAnatomy.keys(),
   base: {
@@ -986,7 +1029,8 @@ var menuSlotRecipe = defineSlotRecipe({
   slots: menuAnatomy.keys(),
   base: {
     content: {
-      color: "primary.fg"
+      color: "primary.fg",
+      borderRadius: "2xl"
     },
     item: {
       color: "primary.fg"
@@ -1004,6 +1048,14 @@ var menuSlotRecipe = defineSlotRecipe({
     }
   }
 });
+var popoverSlotRecipe = defineSlotRecipe({
+  slots: popoverAnatomy.keys(),
+  base: {
+    content: {
+      borderRadius: "lg"
+    }
+  }
+});
 var progessSlotRecipes = defineSlotRecipe({
   slots: progressAnatomy.keys(),
   variants: {
@@ -1026,6 +1078,14 @@ var progessSlotRecipes = defineSlotRecipe({
     }
   }
 });
+var selectSlotRecipe = defineSlotRecipe({
+  slots: selectAnatomy.keys(),
+  base: {
+    trigger: {
+      borderRadius: "lg"
+    }
+  }
+});
 var tabsSlotRecipe = defineSlotRecipe({
   slots: tabsAnatomy.keys(),
   variants: {
@@ -1114,15 +1174,32 @@ var toastSlotRecipe = defineSlotRecipe({
     }
   }
 });
+var tooltipSlotRecipe = defineSlotRecipe({
+  slots: tooltipAnatomy.keys(),
+  base: {
+    content: {
+      "--tooltip-bg": "colors.bg.muted",
+      color: "fg",
+      borderRadius: "lg"
+    }
+  }
+});
 
 // src/theme/slot-recipes/index.ts
 var slotRecipes = {
+  card: cardSlotRecipe,
   menu: menuSlotRecipe,
   tabs: tabsSlotRecipe,
   progress: progessSlotRecipes,
   toast: toastSlotRecipe,
   accordion: accordionSlotRecipe,
-  field: fieldSlotRecipe
+  field: fieldSlotRecipe,
+  select: selectSlotRecipe,
+  dialog: dialogSlotRecipe,
+  combobox: comboboxSlotRecipe,
+  checkbox: checkboxSlotRecipe,
+  tooltip: tooltipSlotRecipe,
+  popover: popoverSlotRecipe
 };
 var colorsTokens = defineTokens.colors({
   primary: {
@@ -1216,6 +1293,6 @@ var config = defineConfig({
 var theme = createSystem(defaultConfig, config);
 var theme_default = theme;
 
-export { Accordion, Avatar, AvatarGroup, Badge, box_default as Box, Breadcrumb, button_default as 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, float_default as Float, 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, floatingStyles, theme_default as theme, toaster };
+export { Accordion, Avatar, AvatarGroup, Badge, box_default as Box, Breadcrumb, button_default as 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, float_default as Float, 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, ScrollArea, 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, floatingStyles, theme_default as theme, toaster };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map