@med-o/ui 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -1,9 +1,66 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties, HTMLAttributes, ImgHTMLAttributes } from 'react';
+import { HTMLAttributes, Ref, ReactNode, CSSProperties, ImgHTMLAttributes } from 'react';
 import { ButtonProps as ButtonProps$1, TextFieldProps as TextFieldProps$1, CheckboxFieldProps, CheckboxGroupProps as CheckboxGroupProps$1, RadioFieldProps, RadioGroupProps as RadioGroupProps$1, SwitchFieldProps, ValidationResult, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, ProgressBarProps as ProgressBarProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, ToolbarProps as ToolbarProps$1, ListBoxProps as ListBoxProps$1, ListBoxItemProps, SelectProps as SelectProps$1, Key, ModalOverlayProps, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuTriggerProps as MenuTriggerProps$1, ComboBoxProps, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, PopoverProps as PopoverProps$1, DialogTrigger, PressEvent, LinkProps as LinkProps$1, GridListItemProps, GridListProps, SearchFieldProps as SearchFieldProps$1, DisclosureGroupProps, SliderProps as SliderProps$1, NumberFieldProps as NumberFieldProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps, TableProps as TableProps$1, TableBodyProps, TableHeaderProps, DateValue, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1, DateFieldProps as DateFieldProps$1, TimeFieldProps as TimeFieldProps$1, TimeValue, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1 } from 'react-aria-components';
 export { DateValue, DialogTrigger, TimeValue } from 'react-aria-components';
 export { CalendarDate, CalendarDateTime, Time, ZonedDateTime, getLocalTimeZone, isToday, isWeekend, now, parseDate, parseDateTime, parseTime, parseZonedDateTime, today } from '@internationalized/date';
 
+/**
+ * Spacing rules: every gap between elements comes from one of six rules. The values grow with the layout mode
+ * (mobile · tablet · desktop), so a layout needs no breakpoints for its spacing.
+ *
+ * inline 8 · content 16 · fields 16/24/24 · items 16/24/24 · group 32/40/48 · section 48/64/96 px
+ */
+type SpacingRule = 'inline' | 'content' | 'fields' | 'items' | 'group' | 'section';
+/** Elements a layout component can render as. Choose the one that says what the content is. */
+type LayoutElement = 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer' | 'nav' | 'ul' | 'ol' | 'li' | 'form' | 'fieldset';
+interface LayoutProps extends HTMLAttributes<HTMLElement> {
+    /** HTML element, e.g. `ul` for a list of cards or `section` for a page section. Default: `div`. */
+    as?: LayoutElement;
+    ref?: Ref<HTMLElement>;
+}
+interface StackProps extends LayoutProps {
+    /** vertical (default) · horizontal. */
+    direction?: 'vertical' | 'horizontal';
+    /** Spacing rule. Default: `content` when vertical, `inline` when horizontal. */
+    gap?: SpacingRule;
+    /** Cross axis: start · center · end · stretch (default) · baseline. */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /** Main axis: start · center · end · between. */
+    justify?: 'start' | 'center' | 'end' | 'between';
+    /** Horizontal only: wrap to the next line when space runs out. */
+    wrap?: boolean;
+}
+/**
+ * Stack – elements below or next to each other with a spacing rule.
+ * Vertical uses the rule `content`, horizontal the rule `inline`; pass `gap` for another rule.
+ */
+declare function Stack({ as: Tag, direction, gap, align, justify, wrap, className, ...props }: StackProps): react.JSX.Element;
+interface GridProps extends LayoutProps {
+    /**
+     * Columns. Without it: as many as fit, each at least `minItemSize` wide – no breakpoints needed.
+     * A number: that many equal columns. `layout`: the layout grid (4 · 8 · 12 columns), place children with `GridItem`.
+     */
+    columns?: number | 'layout';
+    /** Without `columns`: the narrowest a column may get (CSS length). Default `16rem`. */
+    minItemSize?: string;
+    /** Spacing rule. Default: `items` (the layout gutter). */
+    gap?: SpacingRule;
+}
+/** Grid – cards, tiles and page areas in columns. The gap between items is always the rule `items` unless set. */
+declare function Grid({ as: Tag, columns, minItemSize, gap, className, style, ...props }: GridProps): react.JSX.Element;
+interface GridItemProps extends LayoutProps {
+    /** Columns to span, or `full`. Never more than there are: span 6 is full width on a phone (4 columns). */
+    span?: number | 'full';
+}
+/** GridItem – a child of `Grid` that spans several columns. */
+declare function GridItem({ as: Tag, span, className, style, ...props }: GridItemProps): react.JSX.Element;
+interface ContainerProps extends LayoutProps {
+    /** Width of the content: prose 680 (running text) · md 768 · lg 1024 · xl 1280 (default) · full. */
+    size?: 'prose' | 'md' | 'lg' | 'xl' | 'full';
+}
+/** Container – centres the content, limits its width and adds the page margin of the layout mode. */
+declare function Container({ as: Tag, size, className, ...props }: ContainerProps): react.JSX.Element;
+
 type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'text' | 'ghost-danger';
 type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonProps extends Omit<ButtonProps$1, 'children' | 'className' | 'style'> {
@@ -2234,4 +2291,4 @@ interface EmbedConsentProps {
  */
 declare function EmbedConsent({ type, provider, company, src, title, ratio, privacyHref, isConsented, onConsent, allow, texts, className, }: EmbedConsentProps): react.JSX.Element;
 
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertProps, type AlertTone, AppHeader, type AppHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, BadgeCount, type BadgeCountProps, BadgeDot, type BadgeDotProps, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, BottomTabBar, type BottomTabBarProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type BulkAction, BulkActionBar, type BulkActionBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, type CalendarTexts, Card, type CardProps, Cell, type CellProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceSize, Column, type ColumnOption, type ColumnProps, ColumnsMenu, type ColumnsMenuProps, Combobox, type ComboboxProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, type DatePickerTexts, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, Dialog, type DialogAction, type DialogDiscardText, type DialogProps, Drawer, type DrawerProps, Dropzone, type DropzoneProps, EmbedConsent, type EmbedConsentProps, type EmbedMessages, type EmbedTexts, type EmbedType, EmptyState, type EmptyStateAction, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, FieldFooter, FieldLabel, Figure, type FigureProps, FileItem, type FileItemProps, FileTile, type FileTileProps, FileTrigger, type FileTriggerProps, Highlight, IconButton, type IconButtonProps, Image, type ImageProps, type ImageRatio, InputAction, type InputActionProps, type InputSize, Link, type LinkProps, List, ListBox, ListBoxMessage, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, type ListBoxSize, ListCard, type ListCardProps, ListItem, type ListItemProps, type ListProps, ListRow, ListRowIcon, type ListRowProps, type ListType, ListView, type ListViewProps, MediaPlayButton, type MediaPlayButtonProps, Menu, MenuButton, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, type Messages, MessagesProvider, type NavAction, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NavList, type NavListProps, NavSection, type NavSectionProps, type NavVariant, NumberField, type NumberFieldProps, Option, type OptionProps, Pagination, type PaginationProps, Popover, type PopoverProps, PopoverTrigger, ProgressBar, type ProgressBarProps, QuickSearch, type QuickSearchProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, Row, SearchField, type SearchFieldProps, SearchResult, type SearchResultProps, type SearchResultType, Select, type SelectOverlay, type SelectProps, SideNav, type SideNavProps, type SideNavUser, SiteHeader, type SiteHeaderProps, Skeleton, type SkeletonProps, SkipLink, type SkipLinkProps, Slider, SliderField, type SliderFieldProps, type SliderProps, Spinner, type SpinnerProps, StaticTable, type StaticTableProps, Submenu, type SubmenuProps, Switch, type SwitchProps, Tab, TabBarItem, type TabBarItemProps, TabBarMore, type TabBarMoreProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, TextField, type TextFieldProps, TimeField, type TimeFieldProps, type TimeSlot, type ToastAction, type ToastOptions, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Toggletip, type ToggletipProps, Toolbar, type ToolbarProps, ToolbarSeparator, Tooltip, type TooltipProps, TooltipTrigger, UploadField, type UploadFieldProps, type UploadFile, type UploadTexts, de as deMessages, defaultCalendarTexts, defaultDatePickerTexts, defaultDatePresets, defaultEmbedTexts, defaultUploadTexts, en as enMessages, formatBytes, initialsOf, toast, useMessages };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, Alert, AlertDialog, type AlertDialogProps, type AlertDialogTone, type AlertProps, type AlertTone, AppHeader, type AppHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Badge, BadgeCount, type BadgeCountProps, BadgeDot, type BadgeDotProps, type BadgeProps, type BadgeTone, BottomSheet, type BottomSheetProps, BottomTabBar, type BottomTabBarProps, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type BulkAction, BulkActionBar, type BulkActionBarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, type CalendarTexts, Card, type CardProps, Cell, type CellProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type ChoiceSize, Column, type ColumnOption, type ColumnProps, ColumnsMenu, type ColumnsMenuProps, Combobox, type ComboboxProps, Container, type ContainerProps, DateField, type DateFieldProps, DatePicker, type DatePickerProps, type DatePickerTexts, DateRangePicker, type DateRangePickerProps, type DateRangePreset, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListProps, Dialog, type DialogAction, type DialogDiscardText, type DialogProps, Drawer, type DrawerProps, Dropzone, type DropzoneProps, EmbedConsent, type EmbedConsentProps, type EmbedMessages, type EmbedTexts, type EmbedType, EmptyState, type EmptyStateAction, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, FieldFooter, FieldLabel, Figure, type FigureProps, FileItem, type FileItemProps, FileTile, type FileTileProps, FileTrigger, type FileTriggerProps, Grid, GridItem, type GridItemProps, type GridProps, Highlight, IconButton, type IconButtonProps, Image, type ImageProps, type ImageRatio, InputAction, type InputActionProps, type InputSize, type LayoutElement, Link, type LinkProps, List, ListBox, ListBoxMessage, type ListBoxProps, ListBoxSection, type ListBoxSectionProps, type ListBoxSize, ListCard, type ListCardProps, ListItem, type ListItemProps, type ListProps, ListRow, ListRowIcon, type ListRowProps, type ListType, ListView, type ListViewProps, MediaPlayButton, type MediaPlayButtonProps, Menu, MenuButton, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSectionProps, MenuTrigger, type MenuTriggerProps, type Messages, MessagesProvider, type NavAction, NavGroup, type NavGroupProps, NavItem, type NavItemProps, NavList, type NavListProps, NavSection, type NavSectionProps, type NavVariant, NumberField, type NumberFieldProps, Option, type OptionProps, Pagination, type PaginationProps, Popover, type PopoverProps, PopoverTrigger, ProgressBar, type ProgressBarProps, QuickSearch, type QuickSearchProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RangeCalendar, type RangeCalendarProps, Row, SearchField, type SearchFieldProps, SearchResult, type SearchResultProps, type SearchResultType, Select, type SelectOverlay, type SelectProps, SideNav, type SideNavProps, type SideNavUser, SiteHeader, type SiteHeaderProps, Skeleton, type SkeletonProps, SkipLink, type SkipLinkProps, Slider, SliderField, type SliderFieldProps, type SliderProps, type SpacingRule, Spinner, type SpinnerProps, Stack, type StackProps, StaticTable, type StaticTableProps, Submenu, type SubmenuProps, Switch, type SwitchProps, Tab, TabBarItem, type TabBarItemProps, TabBarMore, type TabBarMoreProps, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableHeader, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, type TagProps, TextField, type TextFieldProps, TimeField, type TimeFieldProps, type TimeSlot, type ToastAction, type ToastOptions, ToastRegion, type ToastRegionProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Toggletip, type ToggletipProps, Toolbar, type ToolbarProps, ToolbarSeparator, Tooltip, type TooltipProps, TooltipTrigger, UploadField, type UploadFieldProps, type UploadFile, type UploadTexts, de as deMessages, defaultCalendarTexts, defaultDatePickerTexts, defaultDatePresets, defaultEmbedTexts, defaultUploadTexts, en as enMessages, formatBytes, initialsOf, toast, useMessages };