bako-ui 0.2.1 → 0.2.3

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, 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';
+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, 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, 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 * 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, progressAnatomy, tabsAnatomy, toastAnatomy } 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;
@@ -22,12 +23,13 @@ var text_default = Text;
 var heading_default = Heading;
 var box_default = Box;
 var Badge = Badge$1;
-function Button({
-  colorPalette = "primary",
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(Button$1, { colorPalette, ...props });
-}
+var Button = forwardRef(
+  function Button2(props, ref) {
+    const { colorPalette = "primary", ...rest } = props;
+    return /* @__PURE__ */ jsx(Button$1, { ref, colorPalette, ...rest });
+  }
+);
+var button_default = Button;
 var Card = Card$1;
 var card_default = Card;
 var Clipboard = Clipboard$1;
@@ -576,16 +578,29 @@ 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: [
-    /* @__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 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
@@ -774,10 +789,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: {
@@ -820,8 +835,8 @@ var semanticColors = defineSemanticTokens.colors({
     },
     solid: {
       value: {
-        _light: "{colors.primary.default}",
-        _dark: "{colors.primary.default}"
+        _light: "{colors.primary.main}",
+        _dark: "{colors.primary.main}"
       }
     },
     muted: {
@@ -847,8 +862,8 @@ var semanticColors = defineSemanticTokens.colors({
     },
     border: {
       value: {
-        _light: "{colors.gray.600}",
-        _dark: "{colors.gray.600}"
+        _light: "{colors.gray.700}",
+        _dark: "{colors.gray.700}"
       }
     }
   },
@@ -912,6 +927,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: {
@@ -980,6 +1015,22 @@ var tabsSlotRecipe = 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"
+          }
+        }
       }
     }
   }
@@ -1034,15 +1085,16 @@ var slotRecipes = {
   menu: menuSlotRecipe,
   tabs: tabsSlotRecipe,
   progress: progessSlotRecipes,
-  toast: toastSlotRecipe
+  toast: toastSlotRecipe,
+  accordion: accordionSlotRecipe
 };
 var colorsTokens = 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}" },
@@ -1055,8 +1107,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" },
@@ -1126,6 +1180,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, 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 };
+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, 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