@umami/react-zen 0.4.0 → 0.5.0

package/dist/index.css

@@ -141,6 +141,7 @@
   background: var(--background-color);
   border: var(--border);
   border-radius: var(--border-radius);
+  outline: none;
 }
 .Dialog_title {
   font-size: var(--font-size-lg);
@@ -148,6 +149,68 @@
   margin-bottom: var(--spacing-3);
 }
 
+/* src/components/Box.module.css */
+.Box_font-size-xs {
+  font-size: var(--font-size-xs);
+}
+.Box_font-size-sm {
+  font-size: var(--font-size-sm);
+}
+.Box_font-size-md {
+  font-size: var(--font-size-md);
+}
+.Box_font-size-lg {
+  font-size: var(--font-size-lg);
+}
+.Box_font-size-xl {
+  font-size: var(--font-size-xl);
+}
+.Box_border-radius-sm {
+  border-radius: var(--border-radius-sm);
+}
+.Box_border-radius-md {
+  border-radius: var(--border-radius-md);
+}
+.Box_border-radius-lg {
+  border-radius: var(--border-radius-lg);
+}
+.Box_border-radius-full {
+  border-radius: 100%;
+}
+.Box_gap-xs {
+  gap: var(--gap-xs);
+}
+.Box_gap-sm {
+  gap: var(--gap-sm);
+}
+.Box_gap-md {
+  gap: var(--gap-md);
+}
+.Box_gap-lg {
+  gap: var(--gap-lg);
+}
+.Box_gap-xl {
+  gap: var(--gap-xl);
+}
+.Box_shadow-1 {
+  box-shadow: var(--box-shadow-1);
+}
+.Box_shadow-2 {
+  box-shadow: var(--box-shadow-2);
+}
+.Box_shadow-3 {
+  box-shadow: var(--box-shadow-3);
+}
+.Box_shadow-4 {
+  box-shadow: var(--box-shadow-4);
+}
+.Box_shadow-5 {
+  box-shadow: var(--box-shadow-5);
+}
+.Box_shadow-6 {
+  box-shadow: var(--box-shadow-6);
+}
+
 /* src/components/Flexbox.module.css */
 .Flexbox_flexbox {
   display: flex;
@@ -516,6 +579,10 @@
   font-size: 1.1rem;
   padding: 1rem 1.25rem;
 }
+.Button_button.Button_xl {
+  font-size: 1.3rem;
+  padding: 1.25rem 1.5rem;
+}
 .Button_button a {
   color: inherit;
 }
@@ -799,6 +866,7 @@
   padding: var(--padding);
   line-height: 1.5rem;
   flex: 1;
+  outline: none;
 }
 .Field_input::placeholder {
   color: var(--font-muted-color);
@@ -1143,6 +1211,7 @@
   border-radius: var(--border-radius);
   gap: var(--gap);
   cursor: pointer;
+  outline: none;
 }
 .MenuItem_item:hover {
   background: var(--highlight-bg-color);

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
 //   ../react-aria-components
+//   ../@radix-ui/react-slot
 //   ../react
 //   ../@radix-ui/react-accordion
 //   ../@radix-ui/react-toast
@@ -8,13 +9,15 @@
 //   ../@radix-ui/react-toolbar
 
 declare module '@umami/react-zen' {
-    import { DialogTrigger, FileTrigger, MenuTrigger, TooltipTrigger } from 'react-aria-components';
+    import { DialogTrigger, FileTrigger, MenuTrigger, SubmenuTrigger, TooltipTrigger } from 'react-aria-components';
+    import { Slot } from '@radix-ui/react-slot';
     import { useDebounce } from '@umami/react-zen/hooks/useDebounce';
     import { useTheme } from '@umami/react-zen/hooks/useTheme';
     import { useToast } from '@umami/react-zen/hooks/useToast';
     import { Accordion, AccordionItem, AccordionHeader, AccordionContent } from '@umami/react-zen/Accordion';
     import { AlertBanner } from '@umami/react-zen/AlertBanner';
     import { AlertDialog } from '@umami/react-zen/AlertDialog';
+    import { Box } from '@umami/react-zen/Box';
     import { Breadcrumbs, Breadcrumb } from '@umami/react-zen/Breadcrumbs';
     import { Button } from '@umami/react-zen/Button';
     import { Calendar } from '@umami/react-zen/Calendar';
@@ -62,7 +65,7 @@ declare module '@umami/react-zen' {
     import { ToggleGroup, ToggleGroupItem } from '@umami/react-zen/ToggleGroup';
     import { Tooltip } from '@umami/react-zen/Tooltip';
     import { ZenProvider } from '@umami/react-zen/ZenProvider';
-    export { useDebounce, useTheme, useToast, Accordion, AccordionContent, AccordionItem, AccordionHeader, AlertBanner, AlertDialog, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Column, Combobox, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Heading, Icon, Icons, InlineEditField, Label, List, ListItem, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, Modal, PasswordField, Page, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, Slider, Spinner, StatusLight, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextOverflow, TextField, TextArea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
+    export { useDebounce, useTheme, useToast, Accordion, AccordionContent, AccordionItem, AccordionHeader, AlertBanner, AlertDialog, Box, Breadcrumb, Breadcrumbs, Button, Calendar, Checkbox, Column, Combobox, ConfirmationDialog, DataTable, DataColumn, Dialog, DialogTrigger, Dots, FileTrigger, Flexbox, Heading, Icon, Icons, InlineEditField, Label, List, ListItem, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, Modal, PasswordField, Page, Popover, ProgressBar, ProgressCircle, Radio, RadioGroup, Row, SearchField, Select, Slider, Slot, Spinner, StatusLight, SubmenuTrigger, Switch, Table, TableHeader, TableBody, TableRow, TableColumn, TableCell, Tab, Tabs, TabList, TabPanel, Text, TextOverflow, TextField, TextArea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipTrigger, ZenProvider, };
 }
 
 declare module '@umami/react-zen/hooks/useDebounce' {
@@ -150,6 +153,23 @@ declare module '@umami/react-zen/AlertDialog' {
     export type { AlertDialogProps };
 }
 
+declare module '@umami/react-zen/Box' {
+    import { ReactNode, HTMLProps } from 'react';
+    interface BoxProps extends HTMLProps<HTMLDivElement> {
+        className?: string;
+        fontSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        borderRadius?: 'sm' | 'md' | 'lg' | 'full';
+        shadow?: 1 | 2 | 3 | 4 | 5 | 6;
+        spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+        asChild?: boolean;
+        children?: ReactNode;
+    }
+    function Box({ className, spacing, fontSize, borderRadius, shadow, gap, asChild, children, ...props }: BoxProps): import("react").JSX.Element;
+    export { Box };
+    export type { BoxProps };
+}
+
 declare module '@umami/react-zen/Breadcrumbs' {
     import { BreadcrumbsProps, BreadcrumbProps } from 'react-aria-components';
     function Breadcrumbs({ children, className, ...props }: BreadcrumbsProps<any>): import("react").JSX.Element;
@@ -162,7 +182,7 @@ declare module '@umami/react-zen/Button' {
     import { ButtonProps as _ButtonProps } from 'react-aria-components';
     interface ButtonProps extends _ButtonProps {
         variant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger' | 'zero';
-        size?: 'xs' | 'sm' | 'md' | 'lg';
+        size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
         asChild?: boolean;
         slot?: string;
     }
@@ -255,7 +275,8 @@ declare module '@umami/react-zen/Dots' {
 
 declare module '@umami/react-zen/Flexbox' {
     import { CSSProperties, ReactNode } from 'react';
-    export interface FlexboxProps {
+    import { BoxProps } from '@umami/react-zen/Box';
+    export interface FlexboxProps extends BoxProps {
         direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
         wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
         justifyContent?: 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'left' | 'right' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'safe center' | 'unsafe center';
@@ -264,17 +285,14 @@ declare module '@umami/react-zen/Flexbox' {
         alignItems?: 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center';
         alignSelf?: 'center' | 'start' | 'end' | 'self-start' | 'self-end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'stretch' | 'safe center' | 'unsafe center';
         inline?: boolean;
-        gap?: string | number;
-        order?: number;
         grow?: number;
         shrink?: number;
         basis?: string | number;
-        spacing?: number;
         style?: CSSProperties;
         className?: string;
         children?: ReactNode;
     }
-    export function Flexbox({ inline, direction, wrap, justifyContent, justifyItems, alignContent, alignItems, alignSelf, gap, order, grow, shrink, basis, spacing, style, className, children, ...attributes }: FlexboxProps): import("react").JSX.Element;
+    export function Flexbox({ inline, direction, wrap, justifyContent, justifyItems, alignContent, alignItems, alignSelf, grow, shrink, basis, spacing, style, className, children, ...props }: FlexboxProps): import("react").JSX.Element;
 }
 
 declare module '@umami/react-zen/Heading' {
@@ -370,7 +388,6 @@ declare module '@umami/react-zen/ListItem' {
     function ListItem({ children, className, ...props }: ListBoxItemProps<any>): import("react").JSX.Element;
     export { ListItem };
     export type { ListBoxItemProps as ListItemProps };
-    export default ListItem;
 }
 
 declare module '@umami/react-zen/Loading' {
@@ -410,12 +427,14 @@ declare module '@umami/react-zen/MenuItem' {
     function MenuItem({ children, className, ...props }: MenuItemProps<any>): import("react").JSX.Element;
     export { MenuItem };
     export type { MenuItemProps };
+    export default MenuItem;
 }
 
 declare module '@umami/react-zen/Modal' {
+    import { ReactNode } from 'react';
     interface ModalProps {
         className?: string;
-        children?: React.ReactNode;
+        children?: ReactNode;
     }
     function Modal({ children, className, ...props }: ModalProps): import("react").JSX.Element;
     export { Modal };