bako-ui 0.2.0

package/README.md

@@ -0,0 +1,333 @@
+# Bako UI
+
+Bako Design System - A modern React component library built with Chakra UI.
+
+## Installation
+
+```bash
+npm install @bako-ui
+# or
+yarn add @bako-ui
+# or
+pnpm add @bako-ui
+```
+
+## Usage
+
+```tsx
+import { Button, RhfInput, theme } from '@bako-ui';
+import { ChakraProvider } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+
+function App() {
+  const { control } = useForm();
+
+  return (
+    <ChakraProvider value={theme}>
+      <Button colorPalette="primary">
+        Click me
+      </Button>
+      
+      <RhfInput
+        control={control}
+        name="email"
+        label="Email Address"
+        type="email"
+      />
+    </ChakraProvider>
+  );
+}
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants and states.
+
+```tsx
+import { Button } from '@bako-ui';
+
+// Basic usage
+<Button>Click me</Button>
+
+// With variants
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+
+// With colors
+<Button colorPalette="red">Red Button</Button>
+
+// With loading state
+<Button loading loadingText="Loading...">Submit</Button>
+
+// With icons
+<Button>
+  <WalletIcon />
+  Connect Wallet
+</Button>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'solid' \| 'outline' \| 'ghost' \| 'plain' \| 'shaded'` | `'solid'` | Button variant |
+| `colorPalette` | `string` | `'primary'` | Color palette for the button |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
+| `loading` | `boolean` | `false` | Show loading state |
+| `loadingText` | `string` | - | Text to show when loading |
+| `disabled` | `boolean` | `false` | Disable the button |
+
+### RhfInput
+
+A form input component with floating labels, built for React Hook Form integration.
+
+```tsx
+import { RhfInput } from '@bako-ui';
+import { useForm } from 'react-hook-form';
+
+function LoginForm() {
+  const { control, handleSubmit } = useForm();
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {/* Basic usage */}
+      <RhfInput
+        control={control}
+        name="email"
+        label="Email"
+        type="email"
+      />
+
+      {/* With validation */}
+      <RhfInput
+        control={control}
+        name="password"
+        label="Password"
+        type="password"
+        rules={{ required: 'Password is required' }}
+      />
+
+      {/* With helper text */}
+      <RhfInput
+        control={control}
+        name="username"
+        label="Username"
+        helperText="Choose a unique username"
+      />
+
+      {/* With icons */}
+      <RhfInput
+        control={control}
+        name="amount"
+        label="Amount"
+        type="number"
+        slotProps={{
+          inputGroup: {
+            startElement: <span>$</span>,
+            endElement: <span>USD</span>
+          }
+        }}
+      />
+    </form>
+  );
+}
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `control` | `Control` | - | React Hook Form control object |
+| `name` | `string` | - | Field name for form registration |
+| `label` | `string` | - | Floating label text |
+| `type` | `string` | `'text'` | Input type (text, email, password, etc.) |
+| `helperText` | `string` | - | Helper text displayed below input |
+| `error` | `FieldError` | - | Error object from React Hook Form |
+| `rules` | `RegisterOptions` | - | Validation rules |
+| `disabled` | `boolean` | `false` | Disable the input |
+| `slotProps` | `object` | - | Props for customizing sub-components |
+
+#### SlotProps
+
+The `slotProps` prop allows customization of internal components:
+
+```tsx
+<RhfInput
+  // ...other props
+  slotProps={{
+    // Customize the input group container
+    inputGroup: {
+      startElement: <Icon />,
+      endElement: <Button />,
+      startAddon: <Text>https://</Text>,
+      endAddon: <Text>.com</Text>
+    },
+    // Customize the input element
+    input: {
+      className: 'custom-input',
+      'data-testid': 'username-input'
+    },
+    // Customize the root container
+    root: {
+      maxW: 'md'
+    }
+  }}
+/>
+```
+
+#### Features
+
+- **Floating Labels**: Labels animate smoothly when input gains focus or has value
+- **React Hook Form Integration**: Seamless integration with validation and form state
+- **Chakra UI Styling**: Consistent with Chakra UI design system
+- **Icon Support**: Start and end elements/addons support
+- **Accessibility**: Proper ARIA attributes and keyboard navigation
+- **TypeScript Support**: Full TypeScript support with type inference
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start Storybook (docs app)
+pnpm storybook
+
+# Run tests
+pnpm test
+
+# Build library
+pnpm build
+
+# Run linter
+pnpm lint
+```
+
+### Testing
+
+- `pnpm test:ui` - Opens Vitest visual interface
+- `pnpm test:coverage` - Runs tests with coverage report
+
+### Storybook
+
+Storybook now lives in `apps/docs`.
+
+- `pnpm storybook` - Starts Storybook in development mode
+- `pnpm build --filter @bako/docs` - Builds the static Storybook bundle
+
+## Test Configuration
+
+The project is configured with:
+
+- **Vitest** - Fast testing framework
+- **React Testing Library** - Utilities for testing React components
+- **Jest DOM** - Custom DOM matchers
+- **jsdom** - Simulated DOM environment for tests
+- **User Event** - User interaction simulation
+
+### Configuration Files
+
+- `vite.config.ts` - Vitest configuration
+- `setup-test.ts` - Initial test setup
+- `src/types/test.d.ts` - TypeScript types for tests
+- `src/test-utils.tsx` - Reusable test utilities
+
+## Test Examples
+
+### Basic Component Test
+
+```typescript
+import { renderWithChakra } from '../test-utils';
+import Button from './button';
+
+test('renders button with text', () => {
+	renderWithChakra(<Button>Click me</Button>);
+	expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+});
+```
+
+### React Hook Form Component Test
+
+```typescript
+import { useForm } from 'react-hook-form';
+import { renderWithChakra } from '../test-utils';
+import { RhfInput } from './rhf-input';
+
+test('handles user input correctly', async () => {
+	const TestWrapper = () => {
+		const { control } = useForm();
+		return <RhfInput control={control} name="test" label="Test Field" />;
+	};
+
+	renderWithChakra(<TestWrapper />);
+	
+	const input = screen.getByRole('textbox');
+	await userEvent.type(input, 'test value');
+	
+	expect(input).toHaveValue('test value');
+});
+```
+
+## Test Utilities
+
+The `src/test-utils.tsx` file exports:
+
+- `ChakraWrapper` - Wrapper component with Chakra UI context
+- `renderWithChakra` - Function that renders components with necessary context
+
+## Project Structure
+
+```
+src/
+├── components/
+│   ├── Button/
+│   │   ├── button.tsx                    # Component
+│   │   ├── button.stories.tsx            # Storybook stories
+│   │   └── button.test.tsx               # Unit tests
+│   └── RhfInput/
+│       ├── rhf-input.tsx                 # Component
+│       ├── rhf-input.types.tsx           # TypeScript types
+│       ├── rhf-input.stories.tsx         # Storybook stories
+│       └── rhf-input.test.tsx            # Unit tests
+├── theme/
+│   └── index.ts                          # Theme configuration
+├── types/
+│   └── test.d.ts                         # TypeScript types for tests
+├── test-utils.tsx                        # Reusable utilities
+├── setup-test.ts                         # Initial test setup
+└── vite.config.ts                        # Vite/Vitest configuration
+```
+
+## Useful Commands
+
+```bash
+# Run tests in watch mode
+pnpm test:watch
+
+# Run tests once
+pnpm test
+
+# Open Vitest visual interface
+pnpm test:ui
+
+# Run tests with coverage
+pnpm test:coverage
+
+# Update snapshots
+pnpm test -- -u
+
+# Run only Button tests
+pnpm test -- Button
+
+# Run only RhfInput tests
+pnpm test -- RhfInput
+
+# Run specific component tests
+pnpm test -- components/
+```
+
+## License
+
+ISC

package/dist/index.d.mts

@@ -0,0 +1,313 @@
+import * as react from 'react';
+import react__default, { FC } from 'react';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { StackProps as StackProps$1, GridProps as GridProps$1, GridItemProps as GridItemProps$1, ButtonProps as ButtonProps$1, Card as Card$1, Clipboard as Clipboard$1, CloseButtonProps as CloseButtonProps$1, ContainerProps as ContainerProps$1, IconButtonProps as IconButtonProps$1, QrCode as QrCode$1, IconProps, LinkProps as LinkProps$1, LinkOverlayProps as LinkOverlayProps$1, Checkbox as Checkbox$1, Combobox as Combobox$1, Portal, InputProps as InputProps$1, RadioGroup as RadioGroup$1, ComboboxRootProps, FieldLabelProps, InputGroupProps, BoxProps, Select as Select$1, Switch as Switch$1, TextareaProps, Avatar as Avatar$1, GroupProps, EmptyState as EmptyState$1, Tooltip as Tooltip$1, Dialog as Dialog$1, Drawer as Drawer$1, Popover as Popover$1, Toast as Toast$1, CreateToasterReturn, Accordion as Accordion$1, Breadcrumb as Breadcrumb$1, List as List$1, Steps as Steps$1, Tabs as Tabs$1, Menu as Menu$1, ChakraProviderProps } from '@chakra-ui/react';
+export { Alert, BadgeProps, Box, BoxProps, ButtonGroup, CardBodyProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps, Center, CenterProps, Icon as ChakraIcon, ClientOnly, ClientOnlyProps, ClipboardTriggerProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxRootProps, ComboboxTriggerProps, DialogActionTriggerProps, DialogBackdropProps, DialogBodyProps, DialogCloseTriggerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogOpenChangeDetails, DialogPositionerProps, DialogRootProps, DialogTitleProps, DialogTriggerProps, DrawerActionTriggerProps, DrawerBackdropProps, DrawerBodyProps, DrawerCloseTriggerProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerOpenChangeDetails, DrawerPositionerProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps, EmptyStateContentProps, EmptyStateDescriptionProps, EmptyStateIndicatorProps, EmptyStateRootProps, EmptyStateTitleProps, Field, FieldErrorIconProps, FieldErrorTextProps, FieldHelperTextProps, FieldLabelProps, FieldRootProps, Flex, FlexProps, FormatNumber, Heading, HeadingProps, IconProps, Image, ImageProps, InputAddonProps, InputElementProps, InputGroup, InputGroupProps, ListItemProps, ListRootProps, Spinner as Loader, SpinnerProps as LoaderProps, MenuArrowProps, MenuArrowTipProps, MenuCheckboxItemProps, MenuContentProps, MenuContextTriggerProps, MenuIndicatorProps, MenuItemCommandProps, MenuItemGroupLabelProps, MenuItemGroupProps, MenuItemIndicatorProps, MenuItemProps, MenuItemTextProps, MenuOpenChangeDetails, MenuPositionerProps, MenuRadioItemGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuTriggerItemProps, MenuTriggerProps, Portal, QrCodeRootProps, SelectClearTriggerProps, SelectContentProps, SelectControlProps, SelectIndicatorGroupProps, SelectIndicatorProps, SelectItemGroupLabelProps, SelectItemGroupProps, SelectItemIndicatorProps, SelectItemProps, SelectItemTextProps, SelectLabelProps, SelectPositionerProps, SelectRootProps, SelectTriggerProps, SelectValueTextProps, Separator, SeparatorProps, SkeletonCircleProps, SkeletonProps, SkeletonTextProps, Spacer, SpacerProps, Span, SpanProps, Text, TextProps, createIcon, createListCollection, createToaster, useAccordion, useAccordionContext, useAccordionItemContext, useClipboard, useMediaQuery, useSteps, useStepsContext, useStepsItemContext } from '@chakra-ui/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { FieldValues, FieldPath, UseControllerProps, FieldError } from 'react-hook-form';
+import { Mask, Options } from 'use-mask-input';
+
+declare const Stack: react.ForwardRefExoticComponent<_chakra_ui_react.StackProps & react.RefAttributes<HTMLDivElement>>;
+declare const HStack: react.ForwardRefExoticComponent<_chakra_ui_react.StackProps & react.RefAttributes<HTMLDivElement>>;
+declare const VStack: react.ForwardRefExoticComponent<_chakra_ui_react.StackProps & react.RefAttributes<HTMLDivElement>>;
+
+type StackProps = StackProps$1;
+type HStackProps = StackProps$1;
+type VStackProps = StackProps$1;
+
+interface GridProps extends GridProps$1 {
+}
+interface GridItemProps extends GridItemProps$1 {
+}
+
+declare function Grid(props: GridProps): react_jsx_runtime.JSX.Element;
+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 function Button({ colorPalette, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+declare const Card: typeof Card$1;
+
+declare const Clipboard: typeof Clipboard$1;
+
+interface CloseButtonProps extends CloseButtonProps$1 {
+}
+
+declare const _default$4: react.ForwardRefExoticComponent<CloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface ContainerProps extends ContainerProps$1 {
+}
+
+declare function Container(props: ContainerProps): react_jsx_runtime.JSX.Element;
+
+interface IconButtonProps extends IconButtonProps$1 {
+}
+
+declare const _default$3: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+declare const QrCode: typeof QrCode$1;
+
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+
+interface LinkProps extends LinkProps$1 {
+}
+
+declare const _default$2: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLAnchorElement>>;
+
+interface LinkOverlayProps extends LinkOverlayProps$1 {
+}
+
+declare const _default$1: react.ForwardRefExoticComponent<LinkOverlayProps & react.RefAttributes<HTMLAnchorElement>>;
+
+declare const Skeleton: react.ForwardRefExoticComponent<_chakra_ui_react.SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+declare const SkeletonCircle: react.ForwardRefExoticComponent<_chakra_ui_react.SkeletonCircleProps & react.RefAttributes<HTMLDivElement>>;
+declare const SkeletonText: react.ForwardRefExoticComponent<_chakra_ui_react.SkeletonTextProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CheckboxProps extends Checkbox$1.RootProps {
+    icon?: react__default.ReactNode;
+    inputProps?: react__default.InputHTMLAttributes<HTMLInputElement>;
+    rootRef?: react__default.RefObject<HTMLLabelElement | null>;
+}
+
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+declare const Combobox: typeof Combobox$1 & {
+    Portal: typeof Portal;
+};
+
+interface InputProps extends InputProps$1 {
+}
+
+declare const _default: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface MoneyFieldProps extends Omit<InputProps$1, 'value' | 'onChange' | 'type'> {
+    value: string | number;
+    onChange: (value: string) => void;
+    /**
+     * The character to use as a thousand separator
+     * @default ','
+     */
+    thousandSeparator?: string;
+    /**
+     * The character to use as a decimal separator
+     * @default '.'
+     */
+    decimalSeparator?: string;
+    /**
+     * The number of decimal places to allow
+     * @default 2
+     */
+    decimalScale?: number;
+}
+
+declare function MoneyField({ value, onChange, thousandSeparator, decimalSeparator, decimalScale, ...props }: MoneyFieldProps): react_jsx_runtime.JSX.Element;
+
+interface RadioGroupProps extends RadioGroup$1.RootProps {
+}
+interface RadioProps extends RadioGroup$1.ItemProps {
+    inputProps?: react__default.InputHTMLAttributes<HTMLInputElement>;
+}
+
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+type EnumOption<T = string> = {
+    label: string;
+    value: T;
+};
+
+type RhfComboboxOptions = (EnumOption & {
+    imageUrl?: never;
+}) | (EnumOption & {
+    imageUrl: string;
+});
+type RhfComboboxProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = UseControllerProps<TFieldValues, TName> & {
+    options: RhfComboboxOptions[];
+    label?: string;
+    helperText?: string;
+    disabled?: boolean;
+    error?: FieldError;
+    noOptionsText?: string;
+    isLoadingOptions?: boolean;
+    openOnFocus?: boolean;
+    variant?: ComboboxRootProps['variant'];
+    showTrigger?: boolean;
+    clearTriggerIcon?: React.ReactNode;
+    allowCustomValue?: boolean;
+    slotProps?: {
+        root?: Omit<ComboboxRootProps, 'collection' | 'openOnClick'>;
+        label?: FieldLabelProps;
+        input?: Omit<InputProps, 'value' | 'onChange' | 'disabled' | 'type'>;
+    };
+};
+
+declare function RhfCombobox<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, defaultValue, label, error, options, disabled, helperText, isLoadingOptions, noOptionsText, openOnFocus, slotProps, variant, clearTriggerIcon, showTrigger, allowCustomValue, }: RhfComboboxProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+type RhfInputProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = UseControllerProps<TFieldValues, TName> & {
+    label: string;
+    type?: string;
+    helperText?: string;
+    disabled?: boolean;
+    error?: FieldError;
+    slotProps?: {
+        inputGroup?: Omit<InputGroupProps, 'children'>;
+        input?: Omit<InputProps$1, 'value' | 'onChange' | 'placeholder' | 'name' | 'children' | 'variant'>;
+        label?: FieldLabelProps;
+        root?: BoxProps;
+    };
+};
+
+declare function RhfInput<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, defaultValue, name, label, error, type, helperText, slotProps, ...props }: RhfInputProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+type RhfMoneyFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = UseControllerProps<TFieldValues, TName> & Omit<MoneyFieldProps, 'value' | 'onChange'> & {
+    label: string;
+    error?: FieldError;
+    helperText?: string;
+    slotProps?: {
+        inputGroup?: Omit<InputGroupProps, 'children'>;
+        label?: FieldLabelProps;
+        root?: BoxProps;
+    };
+};
+
+declare function RhfMoneyField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, defaultValue, name, label, error, thousandSeparator, decimalSeparator, decimalScale, helperText, slotProps, disabled, ...props }: RhfMoneyFieldProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+declare const Select: typeof Select$1 & {
+    Portal: typeof Portal;
+};
+
+interface SwitchProps extends Switch$1.RootProps {
+    inputProps?: react__default.InputHTMLAttributes<HTMLInputElement>;
+    thumbLabel?: {
+        on?: react__default.ReactNode;
+        off?: react__default.ReactNode;
+    };
+}
+
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+interface TextAreaProps extends TextareaProps {
+}
+
+declare function TextArea(props: TextAreaProps): react_jsx_runtime.JSX.Element;
+
+interface TextMaskProps extends Omit<InputProps, 'mask'> {
+    mask: Mask;
+    maskOptions?: Options;
+}
+
+declare const TextMask: react.ForwardRefExoticComponent<TextMaskProps & react.RefAttributes<HTMLInputElement>>;
+
+interface AvatarProps extends Avatar$1.RootProps {
+    /**
+     * The name to derive the initials from. If not provided, the fallback will display a generic icon
+     */
+    name?: string;
+    /**
+     * The source URL of the avatar image to display.
+     */
+    src?: string;
+    fallback?: React.ReactNode;
+    slotProps?: {
+        image?: Avatar$1.ImageProps;
+        fallback?: Avatar$1.FallbackProps;
+    };
+}
+interface AvatarGroupProps extends GroupProps {
+}
+
+declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
+declare function AvatarGroup(props: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+declare const EmptyState: typeof EmptyState$1;
+
+interface TooltipProps extends Tooltip$1.RootProps {
+    content: react__default.ReactNode;
+    showArrow?: boolean;
+}
+
+declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
+
+declare const Dialog: typeof Dialog$1 & {
+    Portal: typeof Portal;
+};
+
+declare const Drawer: typeof Drawer$1 & {
+    Portal: typeof Portal;
+};
+
+declare const Popover: typeof Popover$1 & {
+    Portal: typeof Portal;
+};
+
+declare const toaster: CreateToasterReturn;
+declare const Toast: {
+    Toaster: react.FC<_chakra_ui_react.ToasterProps>;
+    ActionTrigger: react.ForwardRefExoticComponent<Toast$1.ActionTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    CloseTrigger: react.ForwardRefExoticComponent<Toast$1.CloseTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Description: react.ForwardRefExoticComponent<Toast$1.DescriptionProps & react.RefAttributes<HTMLDivElement>>;
+    Root: react.ForwardRefExoticComponent<Toast$1.RootProps & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<Toast$1.TitleProps & react.RefAttributes<HTMLDivElement>>;
+    Indicator: react.ForwardRefExoticComponent<Toast$1.IndicatorProps & react.RefAttributes<HTMLSpanElement>>;
+};
+
+declare const Accordion: typeof Accordion$1;
+
+type AccordionRootProps = React.ComponentProps<typeof Accordion$1.Root>;
+type AccordionItemProps = React.ComponentProps<typeof Accordion$1.Item>;
+type AccordionItemTriggerProps = React.ComponentProps<typeof Accordion$1.ItemTrigger>;
+type AccordionItemContentProps = React.ComponentProps<typeof Accordion$1.ItemContent>;
+type AccordionItemBodyProps = React.ComponentProps<typeof Accordion$1.ItemBody>;
+type AccordionItemIndicatorProps = React.ComponentProps<typeof Accordion$1.ItemIndicator>;
+
+declare const Breadcrumb: typeof Breadcrumb$1;
+
+type BreadcrumbRootProps = React.ComponentProps<typeof Breadcrumb$1.Root>;
+type BreadcrumbListProps = React.ComponentProps<typeof Breadcrumb$1.List>;
+type BreadcrumbItemProps = React.ComponentProps<typeof Breadcrumb$1.Item>;
+type BreadcrumbLinkProps = React.ComponentProps<typeof Breadcrumb$1.Link>;
+type BreadcrumbCurrentLinkProps = React.ComponentProps<typeof Breadcrumb$1.CurrentLink>;
+type BreadcrumbSeparatorProps = React.ComponentProps<typeof Breadcrumb$1.Separator>;
+type BreadcrumbEllipsisProps = React.ComponentProps<typeof Breadcrumb$1.Ellipsis>;
+
+declare const List: typeof List$1;
+
+declare const Steps: typeof Steps$1;
+
+type StepsRootProps = React.ComponentProps<typeof Steps$1.Root>;
+type StepsListProps = React.ComponentProps<typeof Steps$1.List>;
+type StepsItemProps = React.ComponentProps<typeof Steps$1.Item>;
+type StepsIndicatorProps = React.ComponentProps<typeof Steps$1.Indicator>;
+type StepsTitleProps = React.ComponentProps<typeof Steps$1.Title>;
+type StepsDescriptionProps = React.ComponentProps<typeof Steps$1.Description>;
+type StepsContentProps = React.ComponentProps<typeof Steps$1.Content>;
+type StepsCompletedContentProps = React.ComponentProps<typeof Steps$1.CompletedContent>;
+type StepsTriggerProps = React.ComponentProps<typeof Steps$1.Trigger>;
+type StepsSeparatorProps = React.ComponentProps<typeof Steps$1.Separator>;
+type StepsNextTriggerProps = React.ComponentProps<typeof Steps$1.NextTrigger>;
+type StepsPrevTriggerProps = React.ComponentProps<typeof Steps$1.PrevTrigger>;
+type StepsStatusProps = React.ComponentProps<typeof Steps$1.Status>;
+type StepsNumberProps = React.ComponentProps<typeof Steps$1.Number>;
+
+declare const Tabs: typeof Tabs$1;
+
+declare const Menu: typeof Menu$1 & {
+    Portal: typeof Portal;
+};
+
+declare const CheckIcon: FC<IconProps>;
+
+declare const CloseIcon: FC<IconProps>;
+
+declare const WalletIcon: FC<IconProps>;
+
+type ThemeProviderProps = ChakraProviderProps;
+declare const ThemeProvider: (props: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
+
+declare const theme: _chakra_ui_react.SystemContext;
+
+export { Accordion, type AccordionItemBodyProps, type AccordionItemContentProps, type AccordionItemIndicatorProps, type AccordionItemProps, type AccordionItemTriggerProps, type AccordionRootProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, Breadcrumb, type BreadcrumbCurrentLinkProps, type BreadcrumbEllipsisProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbListProps, type BreadcrumbRootProps, type BreadcrumbSeparatorProps, Button, type ButtonProps, Card, CheckIcon, Checkbox, type CheckboxProps, Clipboard, _default$4 as CloseButton, type CloseButtonProps, CloseIcon, Combobox, Container, type ContainerProps, Dialog, Drawer, EmptyState, type EnumOption, Grid, GridItem, type GridItemProps, type GridProps, HStack, type HStackProps, Icon, _default$3 as IconButton, type IconButtonProps, _default as Input, type InputProps, _default$2 as Link, _default$1 as LinkOverlay, type LinkOverlayProps, type LinkProps, List, Menu, MoneyField, type MoneyFieldProps, Popover, QrCode, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RhfCombobox, type RhfComboboxOptions, type RhfComboboxProps, RhfInput, type RhfInputProps, RhfMoneyField, type RhfMoneyFieldProps, Select, Skeleton, SkeletonCircle, SkeletonText, Stack, type StackProps, Steps, type StepsCompletedContentProps, type StepsContentProps, type StepsDescriptionProps, type StepsIndicatorProps, type StepsItemProps, type StepsListProps, type StepsNextTriggerProps, type StepsNumberProps, type StepsPrevTriggerProps, type StepsRootProps, type StepsSeparatorProps, type StepsStatusProps, type StepsTitleProps, type StepsTriggerProps, Switch, type SwitchProps, Tabs, TextArea, type TextAreaProps, TextMask, type TextMaskProps, ThemeProvider, type ThemeProviderProps, Toast, Tooltip, type TooltipProps, VStack, type VStackProps, WalletIcon, theme, toaster };