@umami/react-zen 0.10.0 → 0.12.0

package/dist/index.css

@@ -620,6 +620,15 @@
 .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 */
 .FormField_field {
@@ -1358,6 +1367,12 @@
   font-size: 5rem;
 }
 
+/* src/components/HoverTrigger.module.css */
+.HoverTrigger_wrapper {
+  transform: translateY(-10px);
+  border-top: 10px solid transparent;
+}
+
 /* src/components/InlineEditField.module.css */
 .InlineEditField_edit {
   display: flex;
@@ -1479,6 +1494,201 @@
   }
 }
 
+/* src/components/NavigationMenu.module.css */
+.NavigationMenu_root {
+  position: relative;
+  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;
+}
+.NavigationMenu_trigger {
+  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);
+  }
+}
+@keyframes NavigationMenu_scaleOut {
+  from {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: rotateX(-10deg) scale(0.95);
+  }
+}
+@keyframes NavigationMenu_fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes NavigationMenu_fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 /* src/components/PasswordField.module.css */
 .PasswordField_icon {
   position: absolute;

package/dist/index.d.ts

@@ -6,6 +6,7 @@
 //   ../../react-hook-form
 //   ../../@radix-ui/react-accordion
 //   ../../@/lib/types
+//   ../../@radix-ui/react-navigation-menu
 //   ../../@radix-ui/react-toast
 //   ../../@radix-ui/react-toggle-group
 
@@ -35,6 +36,7 @@ declare module '@umami/react-zen' {
     import { Dots } from '@umami/react-zen/Dots';
     import { Flexbox } from '@umami/react-zen/Flexbox';
     import { Heading } from '@umami/react-zen/Heading';
+    import { HoverTrigger } from '@umami/react-zen/HoverTrigger';
     import { Icon } from '@umami/react-zen/Icon';
     import { Icons } from '@umami/react-zen/Icons';
     import { InlineEditField } from '@umami/react-zen/InlineEditField';
@@ -46,6 +48,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 { PasswordField } from '@umami/react-zen/PasswordField';
     import { Page } from '@umami/react-zen/Page';
     import { Popover } from '@umami/react-zen/Popover';
@@ -70,7 +73,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, 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, };
+    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' {
@@ -370,6 +373,15 @@ declare module '@umami/react-zen/Heading' {
     export type { HeadingProps };
 }
 
+declare module '@umami/react-zen/HoverTrigger' {
+    import { ReactElement } from 'react';
+    export interface HoverButtonProps {
+        closeDelay?: number;
+        children: ReactElement[];
+    }
+    export function HoverTrigger({ closeDelay, children }: HoverButtonProps): import("react").JSX.Element;
+}
+
 declare module '@umami/react-zen/Icon' {
     import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
     export interface IconProps {
@@ -509,6 +521,19 @@ declare module '@umami/react-zen/Modal' {
     export type { ModalProps };
 }
 
+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 {
+        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;
+}
+
 declare module '@umami/react-zen/PasswordField' {
     import { TextFieldProps } from 'react-aria-components';
     interface PasswordFieldProps extends TextFieldProps {
@@ -679,11 +704,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 };
 }