@umami/react-zen 0.11.0 → 0.13.0

package/dist/index.css

@@ -1,4 +1,4 @@
-/* src/components/form/Form.module.css */
+/* src/components/forms/Form.module.css */
 .Form_form {
   display: flex;
   flex-direction: column;
@@ -620,8 +620,17 @@
 .Text_wider {
   letter-spacing: 0.05em;
 }
+.Text_left {
+  text-align: left;
+}
+.Text_center {
+  text-align: center;
+}
+.Text_right {
+  text-align: right;
+}
 
-/* src/components/form/FormField.module.css */
+/* src/components/forms/FormField.module.css */
 .FormField_field {
   display: flex;
   flex-direction: column;
@@ -1209,7 +1218,6 @@
 .TextField_textarea {
   font-family: inherit;
   min-height: 60px;
-  min-width: 140px;
 }
 .TextField_allowCopy {
   padding-right: 32px;
@@ -1360,6 +1368,8 @@
 
 /* src/components/HoverTrigger.module.css */
 .HoverTrigger_wrapper {
+  transform: translateY(-10px);
+  border-top: 10px solid transparent;
 }
 
 /* src/components/InlineEditField.module.css */
@@ -1484,198 +1494,28 @@
 }
 
 /* src/components/NavigationMenu.module.css */
-.NavigationMenu_root {
-  position: relative;
+.NavigationMenu_nav {
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 100%;
-  z-index: 1;
-}
-.NavigationMenu_list {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--background-color);
-  gap: var(--gap);
-  list-style: none;
-  margin: 0;
+  gap: var(--gap-lg);
 }
-.NavigationMenu_trigger {
+.NavigationMenu_item {
+  color: var(--font-color);
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--gap);
-  border: 0;
-  background: none;
-}
-.NavigationMenu_link {
-  display: block;
-  text-decoration: none;
-}
-.NavigationMenu_trigger,
-.NavigationMenu_link {
-  outline: none;
-  user-select: none;
-}
-.NavigationMenu_content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  animation-duration: 250ms;
-  animation-timing-function: ease;
-}
-.NavigationMenu_content[data-motion=from-start] {
-  animation-name: NavigationMenu_enterFromLeft;
-}
-.NavigationMenu_content[data-motion=from-end] {
-  animation-name: NavigationMenu_enterFromRight;
-}
-.NavigationMenu_content[data-motion=to-start] {
-  animation-name: NavigationMenu_exitToLeft;
-}
-.NavigationMenu_content[data-motion=to-end] {
-  animation-name: NavigationMenu_exitToRight;
-}
-@media only screen and (min-width: 600px) {
-  .NavigationMenu_content {
-    width: auto;
-  }
-}
-.NavigationMenu_indicator {
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  height: 10px;
-  top: 100%;
-  overflow: hidden;
-  z-index: 1;
-  transition: width, transform 250ms ease;
-}
-.NavigationMenu_indicator[data-state=visible] {
-  animation: NavigationMenu_fadeIn 200ms ease;
-}
-.NavigationMenu_indicator[data-state=hidden] {
-  animation: NavigationMenu_fadeOut 200ms ease;
-}
-.NavigationMenu_viewport {
-  position: relative;
-  transform-origin: top center;
-  margin-top: 10px;
-  width: 100%;
-  overflow: hidden;
-  box-shadow: var(--box-shadow);
-  height: var(--radix-navigation-menu-viewport-height);
-  transition:
-    width,
-    height,
-    300ms ease;
-}
-.NavigationMenu_viewport[data-state=open] {
-  animation: NavigationMenu_scaleIn 200ms ease;
-}
-.NavigationMenu_viewport[data-state=closed] {
-  animation: NavigationMenu_scaleOut 200ms ease;
-}
-@media only screen and (min-width: 600px) {
-  .NavigationMenu_viewport {
-    width: var(--radix-navigation-menu-viewport-width);
-  }
-}
-.NavigationMenu_wrapper {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  top: 100%;
-  left: 0;
-  perspective: 2000px;
-}
-.NavigationMenu_arrow {
-  position: relative;
-  top: 70%;
-  background-color: white;
-  width: 10px;
-  height: 10px;
-  transform: rotate(45deg);
-  border-top-left-radius: 2px;
-}
-@keyframes NavigationMenu_enterFromRight {
-  from {
-    opacity: 0;
-    transform: translateX(200px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes NavigationMenu_enterFromLeft {
-  from {
-    opacity: 0;
-    transform: translateX(-200px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes NavigationMenu_exitToRight {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(200px);
-  }
-}
-@keyframes NavigationMenu_exitToLeft {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-200px);
-  }
-}
-@keyframes NavigationMenu_scaleIn {
-  from {
-    opacity: 0;
-    transform: rotateX(-30deg) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: rotateX(0deg) scale(1);
-  }
+  gap: var(--gap-md);
+  padding: var(--padding);
+  border-radius: var(--border-radius);
+  cursor: default;
 }
-@keyframes NavigationMenu_scaleOut {
-  from {
-    opacity: 1;
-    transform: rotateX(0deg) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: rotateX(-10deg) scale(0.95);
-  }
+.NavigationMenu_item:hover {
+  background: var(--highlight-color);
 }
-@keyframes NavigationMenu_fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+.NavigationMenu_nav .NavigationMenu_item > a {
+  color: var(--font-color);
 }
-@keyframes NavigationMenu_fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+.NavigationMenu_icon {
+  color: var(--font-muted-color);
 }
 
 /* src/components/PasswordField.module.css */

package/dist/index.d.ts

@@ -2,21 +2,23 @@
 // Dependencies for this module:
 //   ../../react-aria-components
 //   ../../@radix-ui/react-slot
+//   ../../@/components/forms/Form
+//   ../../@/components/forms/FormField
+//   ../../@/components/forms/FormResetButton
+//   ../../@/components/forms/FormSubmitButton
 //   ../../react
-//   ../../react-hook-form
 //   ../../@radix-ui/react-accordion
 //   ../../@/lib/types
-//   ../../@radix-ui/react-navigation-menu
 //   ../../@radix-ui/react-toast
 //   ../../@radix-ui/react-toggle-group
 
 declare module '@umami/react-zen' {
     import { DialogTrigger, FileTrigger, MenuTrigger, SubmenuTrigger, TooltipTrigger } from 'react-aria-components';
     import { Slot } from '@radix-ui/react-slot';
-    import { Form } from '@umami/react-zen/form/Form';
-    import { FormField } from '@umami/react-zen/form/FormField';
-    import { FormResetButton } from '@umami/react-zen/form/FormResetButton';
-    import { FormSubmitButton } from '@umami/react-zen/form/FormSubmitButton';
+    import { Form } from '@/components/forms/Form';
+    import { FormField } from '@/components/forms/FormField';
+    import { FormResetButton } from '@/components/forms/FormResetButton';
+    import { FormSubmitButton } from '@/components/forms/FormSubmitButton';
     import { useDebounce } from '@umami/react-zen/hooks/useDebounce';
     import { useTheme } from '@umami/react-zen/hooks/useTheme';
     import { useToast } from '@umami/react-zen/hooks/useToast';
@@ -48,7 +50,7 @@ declare module '@umami/react-zen' {
     import { Menu } from '@umami/react-zen/Menu';
     import { MenuItem } from '@umami/react-zen/MenuItem';
     import { Modal } from '@umami/react-zen/Modal';
-    import { NavigationMenu, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink } from '@umami/react-zen/NavigationMenu';
+    import { NavigationMenu, NavigationMenuItem } from '@umami/react-zen/NavigationMenu';
     import { PasswordField } from '@umami/react-zen/PasswordField';
     import { Page } from '@umami/react-zen/Page';
     import { Popover } from '@umami/react-zen/Popover';
@@ -73,57 +75,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 { Form, FormField, FormResetButton, FormSubmitButton, 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, HoverTrigger, Icon, Icons, InlineEditField, Label, List, ListItem, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, Modal, NavigationMenu, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent, NavigationMenuLink, 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/form/Form' {
-    import { HTMLAttributes, ReactNode } from 'react';
-    import { UseFormProps, SubmitHandler, UseFormReturn } from 'react-hook-form';
-    interface FormProps extends UseFormProps, Omit<HTMLAttributes<HTMLFormElement>, 'children'> {
-        gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-        autoComplete?: string;
-        onSubmit?: SubmitHandler<any>;
-        error?: ReactNode;
-        preventSubmit?: boolean;
-        children?: ReactNode | ((e: UseFormReturn) => ReactNode);
-    }
-    function Form({ gap, autoComplete, onSubmit, error, preventSubmit, mode, disabled, reValidateMode, defaultValues, values, errors, resetOptions, resolver, context, shouldFocusError, shouldUnregister, shouldUseNativeValidation, progressive, criteriaMode, delayError, className, children, ...props }: FormProps): import("react").JSX.Element;
-    export { Form };
-    export type { FormProps };
-}
-
-declare module '@umami/react-zen/form/FormField' {
-    import { HTMLAttributes } from 'react';
-    import { RegisterOptions, UseFormReturn, FieldValues } from 'react-hook-form';
-    interface FormFieldProps extends HTMLAttributes<HTMLDivElement>, Partial<UseFormReturn> {
-        name: string;
-        description?: string;
-        label?: string;
-        rules?: RegisterOptions<FieldValues, string>;
-        children: any;
-    }
-    const FormField: import("react").ForwardRefExoticComponent<FormFieldProps & import("react").RefAttributes<any>>;
-    export { FormField };
-    export type { FormFieldProps };
-}
-
-declare module '@umami/react-zen/form/FormResetButton' {
-    import { FieldValues } from 'react-hook-form';
-    import { ButtonProps } from '@umami/react-zen/Button';
-    interface FormResetButtonProps extends ButtonProps {
-        values?: FieldValues | {
-            [p: string]: any;
-        };
-    }
-    function FormResetButton({ values, children, onPress, ...props }: FormResetButtonProps): import("react").JSX.Element;
-    export { FormResetButton };
-    export type { FormResetButtonProps };
-}
-
-declare module '@umami/react-zen/form/FormSubmitButton' {
-    import { LoadingButtonProps } from '@umami/react-zen/LoadingButton';
-    function FormSubmitButton({ children, disabled, isLoading, ...props }: LoadingButtonProps): import("react").JSX.Element;
-    export { FormSubmitButton };
+    export { Form, FormField, FormResetButton, FormSubmitButton, 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, HoverTrigger, Icon, Icons, InlineEditField, Label, List, ListItem, Loading, LoadingButton, Menu, MenuItem, MenuTrigger, Modal, NavigationMenu, NavigationMenuItem, 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' {
@@ -247,7 +199,7 @@ declare module '@umami/react-zen/Button' {
         asChild?: boolean;
         slot?: string;
     }
-    function Button({ variant, size, preventFocusOnPress, asChild, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+    const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<any>>;
     export { Button };
     export type { ButtonProps };
 }
@@ -376,10 +328,13 @@ declare module '@umami/react-zen/Heading' {
 declare module '@umami/react-zen/HoverTrigger' {
     import { ReactElement } from 'react';
     export interface HoverButtonProps {
+        isOpen?: boolean;
+        onHoverStart?: () => void;
+        onHoverEnd?: () => void;
         closeDelay?: number;
         children: ReactElement[];
     }
-    export function HoverTrigger({ closeDelay, children }: HoverButtonProps): import("react").JSX.Element;
+    export function HoverTrigger({ isOpen, onHoverStart, onHoverEnd, closeDelay, children, }: HoverButtonProps): import("react").JSX.Element;
 }
 
 declare module '@umami/react-zen/Icon' {
@@ -522,16 +477,16 @@ declare module '@umami/react-zen/Modal' {
 }
 
 declare module '@umami/react-zen/NavigationMenu' {
-    import React from 'react';
-    import { NavigationMenuProps as RadixNavigationMenuProps, NavigationMenuItemProps, NavigationMenuTriggerProps, NavigationMenuContentProps, NavigationMenuLinkProps } from '@radix-ui/react-navigation-menu';
-    export interface NavigationMenuProps extends RadixNavigationMenuProps {
+    import { HTMLAttributes, ReactNode } from 'react';
+    export interface NavigationMenuProps extends HTMLAttributes<HTMLElement> {
         showArrow?: boolean;
     }
-    export function NavigationMenu({ showArrow, children, ...props }: NavigationMenuProps): React.JSX.Element;
-    export function NavigationMenuItem({ children, className, ...props }: NavigationMenuItemProps): React.JSX.Element;
-    export function NavigationMenuTrigger({ children, className, ...props }: NavigationMenuTriggerProps): React.JSX.Element;
-    export function NavigationMenuContent({ children, className, ...props }: NavigationMenuContentProps): React.JSX.Element;
-    export function NavigationMenuLink({ children, className, ...props }: NavigationMenuLinkProps): React.JSX.Element;
+    export function NavigationMenu({ showArrow, className, children, ...props }: NavigationMenuProps): import("react").JSX.Element;
+    export interface NavigationMenuItemProps extends HTMLAttributes<HTMLElement> {
+        label: string;
+        children?: ReactNode;
+    }
+    export function NavigationMenuItem({ label, children, className, ...props }: NavigationMenuItemProps): import("react").JSX.Element;
 }
 
 declare module '@umami/react-zen/PasswordField' {
@@ -704,11 +659,12 @@ declare module '@umami/react-zen/Text' {
         spacing?: 'tighter' | 'tight' | 'wide' | 'wider';
         type?: 'muted' | 'faded';
         weight?: 'lighter' | 'light' | 'bold' | 'bolder';
+        align?: 'left' | 'center' | 'right';
         asChild?: boolean;
         className?: string;
         children?: ReactNode;
     }
-    function Text({ children, type, size, spacing, weight, asChild, className, ...props }: TextProps): import("react").JSX.Element;
+    function Text({ children, type, size, spacing, weight, align, asChild, className, ...props }: TextProps): import("react").JSX.Element;
     export { Text };
     export type { TextProps };
 }