@seekalfred/primitives 0.7.3 → 0.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -1
- package/dist/alert/alert.d.ts +2 -2
- package/dist/alert-dialog/alert-dialog.d.ts +14 -0
- package/dist/alert-dialog/alert-dialog.js +51 -26
- package/dist/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/announcement-bar/announcement-bar.d.ts +15 -4
- package/dist/announcement-bar/announcement-bar.js +31 -6
- package/dist/announcement-bar/announcement-bar.js.map +1 -1
- package/dist/avatar/avatar.d.ts +7 -0
- package/dist/avatar/avatar.js +33 -12
- package/dist/avatar/avatar.js.map +1 -1
- package/dist/badge/badge.d.ts +1 -1
- package/dist/bar-chart/bar-chart-series.d.ts +75 -0
- package/dist/bar-chart/bar-chart-series.js +401 -0
- package/dist/bar-chart/bar-chart-series.js.map +1 -0
- package/dist/bar-chart/bar-chart.d.ts +25 -1
- package/dist/bar-chart/bar-chart.js +26 -1
- package/dist/bar-chart/bar-chart.js.map +1 -1
- package/dist/bar-chart/index.d.ts +2 -1
- package/dist/button/button.d.ts +2 -2
- package/dist/chip-group/chip-group.d.ts +11 -0
- package/dist/chip-group/chip-group.js +50 -34
- package/dist/chip-group/chip-group.js.map +1 -1
- package/dist/chip-group/index.d.ts +2 -2
- package/dist/copy-button/copy-button.d.ts +19 -3
- package/dist/copy-button/copy-button.js +7 -4
- package/dist/copy-button/copy-button.js.map +1 -1
- package/dist/file-drop-zone/file-drop-zone.d.ts +29 -3
- package/dist/file-drop-zone/file-drop-zone.js +26 -8
- package/dist/file-drop-zone/file-drop-zone.js.map +1 -1
- package/dist/gauge/gauge.d.ts +18 -1
- package/dist/gauge/gauge.js +35 -21
- package/dist/gauge/gauge.js.map +1 -1
- package/dist/gauge/index.d.ts +2 -2
- package/dist/index.d.ts +8 -7
- package/dist/index.js +4 -4
- package/dist/input/input.d.ts +7 -0
- package/dist/input/input.js +3 -1
- package/dist/input/input.js.map +1 -1
- package/dist/lib/field-shell.js +2 -6
- package/dist/lib/field-shell.js.map +1 -1
- package/dist/lib/required-marker.js +20 -0
- package/dist/lib/required-marker.js.map +1 -0
- package/dist/line-chart/index.d.ts +2 -2
- package/dist/line-chart/line-chart.d.ts +105 -3
- package/dist/line-chart/line-chart.js +183 -44
- package/dist/line-chart/line-chart.js.map +1 -1
- package/dist/money-input/index.d.ts +2 -2
- package/dist/money-input/money-input.d.ts +14 -0
- package/dist/money-input/money-input.js +17 -7
- package/dist/money-input/money-input.js.map +1 -1
- package/dist/morph-select/morph-select.d.ts +8 -1
- package/dist/morph-select/morph-select.js +8 -5
- package/dist/morph-select/morph-select.js.map +1 -1
- package/dist/multi-select/multi-select.d.ts +31 -0
- package/dist/multi-select/multi-select.js +122 -5
- package/dist/multi-select/multi-select.js.map +1 -1
- package/dist/progress/index.d.ts +2 -2
- package/dist/progress/index.js +2 -2
- package/dist/progress/progress.d.ts +53 -2
- package/dist/progress/progress.js +146 -36
- package/dist/progress/progress.js.map +1 -1
- package/dist/radio-group/radio-group.d.ts +1 -1
- package/dist/scrub-input/scrub-input.d.ts +11 -1
- package/dist/scrub-input/scrub-input.js +22 -10
- package/dist/scrub-input/scrub-input.js.map +1 -1
- package/dist/select/select.d.ts +9 -0
- package/dist/select/select.js +3 -2
- package/dist/select/select.js.map +1 -1
- package/dist/sparkline/sparkline.d.ts +27 -2
- package/dist/sparkline/sparkline.js +115 -18
- package/dist/sparkline/sparkline.js.map +1 -1
- package/dist/stat-card/index.d.ts +2 -2
- package/dist/stat-card/index.js +2 -2
- package/dist/stat-card/stat-card.d.ts +32 -1
- package/dist/stat-card/stat-card.js +52 -9
- package/dist/stat-card/stat-card.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/table/index.d.ts +2 -2
- package/dist/table/index.js +2 -2
- package/dist/table/table.d.ts +114 -4
- package/dist/table/table.js +374 -94
- package/dist/table/table.js.map +1 -1
- package/dist/text-shimmer/text-shimmer.d.ts +18 -2
- package/dist/text-shimmer/text-shimmer.js +5 -2
- package/dist/text-shimmer/text-shimmer.js.map +1 -1
- package/dist/textarea/textarea.d.ts +7 -0
- package/dist/textarea/textarea.js +3 -1
- package/dist/textarea/textarea.js.map +1 -1
- package/dist/toast/toast.d.ts +2 -2
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ import { AnimatedCounter, AnimatedCounterProps } from "./animated-counter/animat
|
|
|
9
9
|
import { Announcement, AnnouncementAction, AnnouncementBar, AnnouncementBarProps, clearAnnouncementDismissal } from "./announcement-bar/announcement-bar.js";
|
|
10
10
|
import { Avatar, AvatarProps, avatarVariants } from "./avatar/avatar.js";
|
|
11
11
|
import { Badge, BadgeProps, badgeVariants } from "./badge/badge.js";
|
|
12
|
+
import { BarChartSeries, BarChartSeriesDatum, BarChartSeriesProps } from "./bar-chart/bar-chart-series.js";
|
|
12
13
|
import { BarChart, BarChartDatum, BarChartProps } from "./bar-chart/bar-chart.js";
|
|
13
14
|
import { BreadcrumbItem, BreadcrumbItemProps, Breadcrumbs, BreadcrumbsProps, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants } from "./breadcrumb/breadcrumb.js";
|
|
14
15
|
import { BrushChart, BrushChartAnnotation, BrushChartDatum, BrushChartProps } from "./brush-chart/brush-chart.js";
|
|
@@ -18,7 +19,7 @@ import { CardDecision, CardStack, CardStackProps } from "./card-stack/card-stack
|
|
|
18
19
|
import { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants } from "./card/card.js";
|
|
19
20
|
import { Carousel, CarouselProps } from "./carousel/carousel.js";
|
|
20
21
|
import { Checkbox, CheckboxProps, checkboxBoxVariants, checkboxVariants } from "./checkbox/checkbox.js";
|
|
21
|
-
import { ChipGroup, ChipGroupProps, ChipOption } from "./chip-group/chip-group.js";
|
|
22
|
+
import { ChipAttrs, ChipGroup, ChipGroupProps, ChipOption } from "./chip-group/chip-group.js";
|
|
22
23
|
import { ConfirmMorph, ConfirmMorphMode, ConfirmMorphProps, ConfirmMorphState } from "./confirm-morph/confirm-morph.js";
|
|
23
24
|
import { CopyButton, CopyButtonProps } from "./copy-button/copy-button.js";
|
|
24
25
|
import { Countdown, CountdownProps, CountdownUnit } from "./countdown/countdown.js";
|
|
@@ -37,10 +38,10 @@ import { InViewTitle, InViewTitleProps, InViewTitleVariant } from "./in-view-tit
|
|
|
37
38
|
import { Input, InputProps, inputVariants } from "./input/input.js";
|
|
38
39
|
import { Label, LabelProps, labelVariants } from "./label/label.js";
|
|
39
40
|
import { cn, cnAll } from "./lib/cn.js";
|
|
40
|
-
import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartReference, LineChartSeries } from "./line-chart/line-chart.js";
|
|
41
|
+
import { LINE_CHART_DRAW_MS, LineChart, LineChartBand, LineChartDatum, LineChartMarker, LineChartProps, LineChartReference, LineChartSeries, LineChartTone, LineChartTooltipContext } from "./line-chart/line-chart.js";
|
|
41
42
|
import { Mention, MentionChannel, MentionInput, MentionInputHandle, MentionInputProps, MentionKind, MentionPerson, MentionValue, mentionText, serializeMentions } from "./mention-input/mention-input.js";
|
|
42
43
|
import { Menu, MenuItem, MenuItemProps, MenuProps, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants } from "./menu/menu.js";
|
|
43
|
-
import { MoneyInput, MoneyInputDetails, MoneyInputProps } from "./money-input/money-input.js";
|
|
44
|
+
import { MoneyInput, MoneyInputDetails, MoneyInputProps, MoneyInputSize } from "./money-input/money-input.js";
|
|
44
45
|
import { MorphSelect, MorphSelectGroup, MorphSelectItem, MorphSelectOption, MorphSelectProps } from "./morph-select/morph-select.js";
|
|
45
46
|
import { MultiSelect, MultiSelectGroup, MultiSelectGroupProps, MultiSelectProps, multiSelectGroupHeaderVariants, multiSelectGroupVariants } from "./multi-select/multi-select.js";
|
|
46
47
|
import { NumberField, NumberFieldProps } from "./number-field/number-field.js";
|
|
@@ -51,7 +52,7 @@ import { EstimateStrengthOptions, PasswordRule, PasswordRuleLabels, PasswordRule
|
|
|
51
52
|
import { PHONE_COUNTRIES, PhoneCountry, PhoneStatus, formatNational, formatPhoneNumber, parsePhoneNumber } from "./phone-input/phone-countries.js";
|
|
52
53
|
import { PhoneInput, PhoneInputDetails, PhoneInputProps } from "./phone-input/phone-input.js";
|
|
53
54
|
import { Popover, PopoverHoverTrigger, PopoverHoverTriggerProps, PopoverProps, PopoverTrigger, popoverVariants } from "./popover/popover.js";
|
|
54
|
-
import { Progress, ProgressProps, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
|
|
55
|
+
import { Progress, ProgressProps, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
|
|
55
56
|
import { Radio, RadioGroup, RadioGroupProps, RadioGroupVariant, RadioProps, radioCardVariants, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
|
|
56
57
|
import { Reaction, ReactionOption, Reactions, ReactionsProps } from "./reactions/reactions.js";
|
|
57
58
|
import { Ridgeline, RidgelineProps, RidgelineSeries } from "./ridgeline/ridgeline.js";
|
|
@@ -74,13 +75,13 @@ import { Spinner, SpinnerProps, spinnerVariants } from "./spinner/spinner.js";
|
|
|
74
75
|
import { SplitBar, SplitBarProps, SplitSegment } from "./split-bar/split-bar.js";
|
|
75
76
|
import { SplitButton, SplitButtonAction, SplitButtonProps } from "./split-button/split-button.js";
|
|
76
77
|
import { SPARKLINE_DRAW_MS, Sparkline, SparklineProps, SparklineTone, sparklineVariants } from "./sparkline/sparkline.js";
|
|
77
|
-
import { StatCard, StatCardChangeTone, StatCardProps, StatCardTone, StatCardTrend, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
|
|
78
|
+
import { StatCard, StatCardChangeTone, StatCardProps, StatCardTone, StatCardTrend, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSkeletonVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
|
|
78
79
|
import { Stepper, StepperOrientation, StepperProps, StepperStatus, StepperStep } from "./stepper/stepper.js";
|
|
79
80
|
import { Streamgraph, StreamgraphDatum, StreamgraphProps, StreamgraphSeries } from "./streamgraph/streamgraph.js";
|
|
80
81
|
import { SwipeAction, SwipeActions, SwipeActionsProps, SwipeActionsRow, SwipeActionsRowProps } from "./swipe-actions/swipe-actions.js";
|
|
81
82
|
import "./swipe-actions/index.js";
|
|
82
83
|
import { Switch, SwitchProps, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
|
|
83
|
-
import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants } from "./table/table.js";
|
|
84
|
+
import { Column, RowKey, Table, TableProps, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants } from "./table/table.js";
|
|
84
85
|
import { Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Tabs, TabsProps, tabListVariants, tabPanelVariants, tabVariants, tabsVariants } from "./tabs/tabs.js";
|
|
85
86
|
import { TextShimmer, TextShimmerProps } from "./text-shimmer/text-shimmer.js";
|
|
86
87
|
import { TagInput, TagInputProps } from "./tag-input/tag-input.js";
|
|
@@ -94,4 +95,4 @@ import { Tooltip, TooltipProps, TooltipTrigger, TooltipTriggerProps, tooltipVari
|
|
|
94
95
|
import { Treemap, TreemapNode, TreemapProps } from "./treemap/treemap.js";
|
|
95
96
|
import { UsageMeter, UsageMeterProps, UsageMeterSegment, UsageMeterStatus } from "./usage-meter/usage-meter.js";
|
|
96
97
|
import { WaffleCategory, WaffleChart, WaffleChartProps } from "./waffle-chart/waffle-chart.js";
|
|
97
|
-
export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, type ActivityDay, type ActivityDayDetail, ActivityHeatmap, type ActivityHeatmapProps, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, InfoGlyph as AlertInfoIcon, type AlertProps, type StatusIconProps as AlertStatusIconProps, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, type AnimatedCounterProps, type Announcement, type AnnouncementAction, AnnouncementBar, type AnnouncementBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDatum, type BarChartProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, BrushChart, type BrushChartAnnotation, type BrushChartDatum, type BrushChartProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, type CardDecision, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardStack, type CardStackProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, ChipGroup, type ChipGroupProps, type ChipOption, type Column, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, Countdown, type CountdownProps, type CountdownUnit, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, DonutChart, type DonutChartCenter, type DonutChartDatum, type DonutChartProps, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, InViewTitle, type InViewTitleProps, type InViewTitleVariant, Input, type InputProps, LINE_CHART_DRAW_MS, Label, type LabelProps, LineChart, type LineChartDatum, type LineChartProps, type LineChartReference, type LineChartSeries, type Mention, type MentionChannel, MentionInput, type MentionInputHandle, type MentionInputProps, type MentionKind, type MentionPerson, type MentionValue, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, MoneyInput, type MoneyInputDetails, type MoneyInputProps, MorphSelect, type MorphSelectGroup, type MorphSelectItem, type MorphSelectOption, type MorphSelectProps, MultiSelect, MultiSelectGroup, type MultiSelectGroupProps, type MultiSelectProps, NumberField, type NumberFieldProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, PHONE_COUNTRIES, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, type PhoneCountry, PhoneInput, type PhoneInputDetails, type PhoneInputProps, type PhoneStatus, type Platform, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, type PopoverHoverTriggerProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioGroupVariant, type RadioProps, type Reaction, type ReactionOption, Reactions, type ReactionsProps, Ridgeline, type RidgelineProps, type RidgelineSeries, type RowKey, SPARKLINE_DRAW_MS, ScrollArea, type ScrollAreaProps, ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type ShortcutBinding, ShortcutKbd, type ShortcutKbdProps, ShortcutKeys, type ShortcutKeysProps, ShortcutRecorder, type ShortcutRecorderProps, type ShortcutToken, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderMark, type SliderProps, type SliderValue, SlopeChart, type SlopeChartProps, type SlopeItem, Sparkline, type SparklineProps, type SparklineTone, Spinner, type SpinnerProps, SplitBar, type SplitBarProps, SplitButton, type SplitButtonAction, type SplitButtonProps, type SplitSegment, StatCard, type StatCardChangeTone, type StatCardProps, type StatCardTone, type StatCardTrend, Stepper, type StepperOrientation, type StepperProps, type StepperStatus, type StepperStep, Streamgraph, type StreamgraphDatum, type StreamgraphProps, type StreamgraphSeries, SunMoonIcon, type SwipeAction, SwipeActions, type SwipeActionsProps, SwipeActionsRow, type SwipeActionsRowProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, TagInput, type TagInputProps, TextMorph, type TextMorphProps, TextReveal, type TextRevealProps, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Treemap, type TreemapNode, type TreemapProps, UsageMeter, type UsageMeterProps, type UsageMeterSegment, type UsageMeterStatus, type WaffleCategory, WaffleChart, type WaffleChartProps, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
|
|
98
|
+
export { Accordion, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, ActionButton, type ActionButtonProps, type ActivityDay, type ActivityDayDetail, ActivityHeatmap, type ActivityHeatmapProps, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps, InfoGlyph as AlertInfoIcon, type AlertProps, type StatusIconProps as AlertStatusIconProps, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, type AnimatedCounterProps, type Announcement, type AnnouncementAction, AnnouncementBar, type AnnouncementBarProps, Avatar, type AvatarProps, Badge, type BadgeProps, BarChart, type BarChartDatum, type BarChartProps, type BarChartSeries, type BarChartSeriesDatum, type BarChartSeriesProps, BellIcon, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, BrushChart, type BrushChartAnnotation, type BrushChartDatum, type BrushChartProps, Button, ButtonGroup, type ButtonGroupItem, type ButtonGroupMenu, type ButtonGroupMenuItem, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSize, type ButtonGroupVariant, type ButtonProps, Calendar, type CalendarProps, CalendarRange, type CalendarRangeProps, Card, CardContent, type CardContentProps, type CardDecision, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardStack, type CardStackProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, Checkbox, type CheckboxProps, ChevronIcon, type ChevronIconProps, type ChipAttrs, ChipGroup, type ChipGroupProps, type ChipOption, type Column, ConfirmMorph, type ConfirmMorphMode, type ConfirmMorphProps, type ConfirmMorphState, CopyButton, type CopyButtonProps, CopyCheckIcon, Countdown, type CountdownProps, type CountdownUnit, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerMessages, type DateRangePickerProps, type DateRangePickerValue, type DateRangePreset, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, DialogTrigger, DonutChart, type DonutChartCenter, type DonutChartDatum, type DonutChartProps, EmptyState, type EmptyStateProps, type EstimateStrengthOptions, ExpandingButtonGroup, type ExpandingButtonGroupItem, type ExpandingButtonGroupProps, type ExpandingButtonGroupSize, type ExpandingButtonGroupTone, FileDropZone, type FileDropZoneProps, FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, FloatingButtonGroup, type FloatingButtonGroupAction, type FloatingButtonGroupItem, type FloatingButtonGroupOrientation, type FloatingButtonGroupProps, type FloatingButtonGroupSeparator, type FloatingButtonGroupSize, type FloatingButtonGroupVariant, Gauge, type GaugeProps, type GaugeThreshold, type GaugeTone, HeartIcon, IconMorph, type IconMorphIconProps, type IconMorphName, type IconMorphProps, InViewTitle, type InViewTitleProps, type InViewTitleVariant, Input, type InputProps, LINE_CHART_DRAW_MS, Label, type LabelProps, LineChart, type LineChartBand, type LineChartDatum, type LineChartMarker, type LineChartProps, type LineChartReference, type LineChartSeries, type LineChartTone, type LineChartTooltipContext, type Mention, type MentionChannel, MentionInput, type MentionInputHandle, type MentionInputProps, type MentionKind, type MentionPerson, type MentionValue, Menu, MenuIcon, MenuItem, type MenuItemProps, type MenuProps, MenuSeparator, MenuTrigger, MoneyInput, type MoneyInputDetails, type MoneyInputProps, type MoneyInputSize, MorphSelect, type MorphSelectGroup, type MorphSelectItem, type MorphSelectOption, type MorphSelectProps, MultiSelect, MultiSelectGroup, type MultiSelectGroupProps, type MultiSelectProps, NumberField, type NumberFieldProps, OnboardingChecklist, type OnboardingChecklistProps, type OnboardingStep, PHONE_COUNTRIES, PageHeader, type PageHeaderProps, PasswordField, type PasswordFieldMessages, type PasswordFieldProps, type PasswordRule, type PasswordRuleLabels, type PasswordRuleOptions, PasswordStrength, type PasswordStrengthLevels, type PasswordStrengthMessages, type PasswordStrengthMessagesInput, type PasswordStrengthProps, type PasswordStrengthResult, type PhoneCountry, PhoneInput, type PhoneInputDetails, type PhoneInputProps, type PhoneStatus, type Platform, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, type PopoverHoverTriggerProps, type PopoverProps, PopoverTrigger, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioGroupVariant, type RadioProps, type Reaction, type ReactionOption, Reactions, type ReactionsProps, Ridgeline, type RidgelineProps, type RidgelineSeries, type RowKey, SPARKLINE_DRAW_MS, ScrollArea, type ScrollAreaProps, ScrubInput, type ScrubInputChangeDetails, type ScrubInputProps, type ScrubInputSource, SearchField, type SearchFieldProps, Select, SelectItem, type SelectItemProps, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, type ShortcutBinding, ShortcutKbd, type ShortcutKbdProps, ShortcutKeys, type ShortcutKeysProps, ShortcutRecorder, type ShortcutRecorderProps, type ShortcutToken, SideNav, type SideNavGroup, type SideNavProps, type SideNavSection, Skeleton, type SkeletonProps, Slider, type SliderMark, type SliderProps, type SliderValue, SlopeChart, type SlopeChartProps, type SlopeItem, Sparkline, type SparklineProps, type SparklineTone, Spinner, type SpinnerProps, SplitBar, type SplitBarProps, SplitButton, type SplitButtonAction, type SplitButtonProps, type SplitSegment, StatCard, type StatCardChangeTone, type StatCardProps, type StatCardTone, type StatCardTrend, Stepper, type StepperOrientation, type StepperProps, type StepperStatus, type StepperStep, Streamgraph, type StreamgraphDatum, type StreamgraphProps, type StreamgraphSeries, SunMoonIcon, type SwipeAction, SwipeActions, type SwipeActionsProps, SwipeActionsRow, type SwipeActionsRowProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableProps, Tabs, type TabsProps, TagInput, type TagInputProps, TextMorph, type TextMorphProps, TextReveal, type TextRevealProps, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, type Theme, ThemeSwitch, type ThemeSwitchProps, type ThemeSwitchVariant, TimePicker, type TimePickerProps, type ToastContent, ToastRegion, type ToastRegionProps, Tooltip, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, Treemap, type TreemapNode, type TreemapProps, UsageMeter, type UsageMeterProps, type UsageMeterSegment, type UsageMeterStatus, type WaffleCategory, WaffleChart, type WaffleChartProps, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSkeletonVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
|
package/dist/index.js
CHANGED
|
@@ -55,7 +55,7 @@ import { PasswordStrength, countCodePoints, createPasswordRules, defaultPassword
|
|
|
55
55
|
import { ScrollArea, scrollAreaRootVariants, scrollAreaVariants } from "./scroll-area/scroll-area.js";
|
|
56
56
|
import { PHONE_COUNTRIES, formatNational, formatPhoneNumber, parsePhoneNumber } from "./phone-input/phone-countries.js";
|
|
57
57
|
import { PhoneInput } from "./phone-input/phone-input.js";
|
|
58
|
-
import { Progress, progressFillVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
|
|
58
|
+
import { Progress, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants } from "./progress/progress.js";
|
|
59
59
|
import { Radio, RadioGroup, radioCardVariants, radioGroupVariants, radioVariants } from "./radio-group/radio-group.js";
|
|
60
60
|
import { Reactions } from "./reactions/reactions.js";
|
|
61
61
|
import { Ridgeline } from "./ridgeline/ridgeline.js";
|
|
@@ -74,12 +74,12 @@ import { Spinner, spinnerVariants } from "./spinner/spinner.js";
|
|
|
74
74
|
import { SplitBar } from "./split-bar/split-bar.js";
|
|
75
75
|
import { SplitButton } from "./split-button/split-button.js";
|
|
76
76
|
import { SPARKLINE_DRAW_MS, Sparkline, sparklineVariants } from "./sparkline/sparkline.js";
|
|
77
|
-
import { StatCard, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
|
|
77
|
+
import { StatCard, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSkeletonVariants, statCardSubVariants, statCardValueVariants, statCardVariants } from "./stat-card/stat-card.js";
|
|
78
78
|
import { Stepper } from "./stepper/stepper.js";
|
|
79
79
|
import { Streamgraph } from "./streamgraph/streamgraph.js";
|
|
80
80
|
import { SwipeActions, SwipeActionsRow } from "./swipe-actions/swipe-actions.js";
|
|
81
81
|
import { Switch, switchThumbVariants, switchTrackVariants } from "./switch/switch.js";
|
|
82
|
-
import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants } from "./table/table.js";
|
|
82
|
+
import { Table, createColumns, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants } from "./table/table.js";
|
|
83
83
|
import { TextShimmer } from "./text-shimmer/text-shimmer.js";
|
|
84
84
|
import { TagInput } from "./tag-input/tag-input.js";
|
|
85
85
|
import { TextMorph } from "./text-morph/text-morph.js";
|
|
@@ -91,4 +91,4 @@ import { ToastRegion, toast, toastCloseVariants, toastQueue, toastRegionVariants
|
|
|
91
91
|
import { Treemap } from "./treemap/treemap.js";
|
|
92
92
|
import { UsageMeter } from "./usage-meter/usage-meter.js";
|
|
93
93
|
import { WaffleChart } from "./waffle-chart/waffle-chart.js";
|
|
94
|
-
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActionButton, ActivityHeatmap, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, InfoGlyph as AlertInfoIcon, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, AnnouncementBar, Avatar, Badge, BarChart, BellIcon, BreadcrumbItem, Breadcrumbs, BrushChart, Button, ButtonGroup, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardStack, CardTitle, Carousel, Checkbox, ChevronIcon, ChipGroup, ConfirmMorph, CopyButton, CopyCheckIcon, Countdown, DatePicker, DateRangePicker, Dialog, DialogFooter, DialogTrigger, DonutChart, EmptyState, ExpandingButtonGroup, FileDropZone, FilterBar, FloatingButtonGroup, Gauge, HeartIcon, IconMorph, InViewTitle, Input, LINE_CHART_DRAW_MS, Label, LineChart, MentionInput, Menu, MenuIcon, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, MorphSelect, MultiSelect, MultiSelectGroup, NumberField, OnboardingChecklist, PHONE_COUNTRIES, PageHeader, PasswordField, PasswordStrength, PhoneInput, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, PopoverTrigger, Progress, Radio, RadioGroup, Reactions, Ridgeline, SPARKLINE_DRAW_MS, ScrollArea, ScrubInput, SearchField, Select, SelectItem, Separator, Sheet, ShortcutKbd, ShortcutKeys, ShortcutRecorder, SideNav, Skeleton, Slider, SlopeChart, Sparkline, Spinner, SplitBar, SplitButton, StatCard, Stepper, Streamgraph, SunMoonIcon, SwipeActions, SwipeActionsRow, Switch, Tab, TabList, TabPanel, Table, Tabs, TagInput, TextMorph, TextReveal, TextShimmer, Textarea, ThemeSwitch, TimePicker, ToastRegion, Tooltip, TooltipTrigger, Treemap, UsageMeter, WaffleChart, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableFooterVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
|
|
94
|
+
export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, ActionButton, ActivityHeatmap, Alert, DestructiveGlyph as AlertDestructiveIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, InfoGlyph as AlertInfoIcon, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, AnimatedCounter, AnnouncementBar, Avatar, Badge, BarChart, BellIcon, BreadcrumbItem, Breadcrumbs, BrushChart, Button, ButtonGroup, Calendar, CalendarRange, Card, CardContent, CardDescription, CardFooter, CardHeader, CardStack, CardTitle, Carousel, Checkbox, ChevronIcon, ChipGroup, ConfirmMorph, CopyButton, CopyCheckIcon, Countdown, DatePicker, DateRangePicker, Dialog, DialogFooter, DialogTrigger, DonutChart, EmptyState, ExpandingButtonGroup, FileDropZone, FilterBar, FloatingButtonGroup, Gauge, HeartIcon, IconMorph, InViewTitle, Input, LINE_CHART_DRAW_MS, Label, LineChart, MentionInput, Menu, MenuIcon, MenuItem, MenuSeparator, MenuTrigger, MoneyInput, MorphSelect, MultiSelect, MultiSelectGroup, NumberField, OnboardingChecklist, PHONE_COUNTRIES, PageHeader, PasswordField, PasswordStrength, PhoneInput, PlayPauseIcon, PlusCheckIcon, Popover, PopoverHoverTrigger, PopoverTrigger, Progress, Radio, RadioGroup, Reactions, Ridgeline, SPARKLINE_DRAW_MS, ScrollArea, ScrubInput, SearchField, Select, SelectItem, Separator, Sheet, ShortcutKbd, ShortcutKeys, ShortcutRecorder, SideNav, Skeleton, Slider, SlopeChart, Sparkline, Spinner, SplitBar, SplitButton, StatCard, Stepper, Streamgraph, SunMoonIcon, SwipeActions, SwipeActionsRow, Switch, Tab, TabList, TabPanel, Table, Tabs, TagInput, TextMorph, TextReveal, TextShimmer, Textarea, ThemeSwitch, TimePicker, ToastRegion, Tooltip, TooltipTrigger, Treemap, UsageMeter, WaffleChart, alertIconVariants, alertVariants, avatarVariants, badgeVariants, breadcrumbItemVariants, breadcrumbLinkVariants, breadcrumbsVariants, buttonVariants, calendarCellVariants, calendarClearVariants, calendarGridVariants, calendarHeaderCellVariants, calendarHeaderVariants, calendarHeadingVariants, calendarLabelVariants, calendarMonthsVariants, calendarNavVariants, calendarVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants, cardVariants, checkboxBoxVariants, checkboxVariants, clearAnnouncementDismissal, cn, cnAll, countCodePoints, createColumns, createPasswordRules, datePickerInputVariants, datePickerLabelVariants, datePickerSegmentVariants, datePickerTriggerVariants, datePickerVariants, defaultDateRangePresets, defaultPasswordFieldMessages, defaultPasswordRules, defaultPasswordStrengthMessages, dialogDescriptionVariants, dialogFooterVariants, dialogOverlayVariants, dialogPanelVariants, dialogTitleVariants, emptyStateActionVariants, emptyStateImageVariants, emptyStateTextVariants, emptyStateTitleVariants, emptyStateVariants, estimateStrength, evaluateScrubExpression, fileDropZoneHintVariants, fileDropZonePromptVariants, fileDropZoneVariants, filterBarChipVariants, filterBarRowVariants, filterBarVariants, formatNational, formatPhoneNumber, formatShortcut, inputVariants, labelVariants, matchesShortcut, mentionText, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants, multiSelectGroupHeaderVariants, multiSelectGroupVariants, normalizeShortcut, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants, parsePhoneNumber, popoverVariants, progressFillVariants, progressTargetVariants, progressTrackVariants, progressVariants, radioCardVariants, radioGroupVariants, radioVariants, scrollAreaRootVariants, scrollAreaVariants, selectItemVariants, selectPopoverVariants, selectTriggerVariants, selectVariants, separatorVariants, serializeMentions, sheetOverlayVariants, sheetPanelVariants, shortcutFromEvent, shortcutTokens, sideNavHeaderVariants, sideNavItemVariants, sideNavMenuVariants, sideNavVariants, skeletonVariants, sliderBarVariants, sliderFillVariants, sliderThumbVariants, sliderTrackVariants, sliderVariants, sparklineVariants, spinnerVariants, statCardHeaderVariants, statCardIconVariants, statCardLabelVariants, statCardSkeletonVariants, statCardSubVariants, statCardValueVariants, statCardVariants, switchThumbVariants, switchTrackVariants, tabListVariants, tabPanelVariants, tabVariants, tableCardVariants, tableCellVariants, tableColumnVariants, tableEmptyVariants, tableExpandButtonVariants, tableFooterVariants, tableGroupRowVariants, tableHeaderVariants, tablePaginationVariants, tableRowVariants, tableScrollVariants, tableSelectionBarVariants, tableSortButtonVariants, tableVariants, tabsVariants, textareaVariants, timePickerItemVariants, timePickerListVariants, toast, toastCloseVariants, toastQueue, toastRegionVariants, toastVariants, tooltipVariants, usePlatform, usePressedKeys };
|
package/dist/input/input.d.ts
CHANGED
|
@@ -95,6 +95,13 @@ interface InputProps$1 extends Omit<InputProps, "className" | "style" | "size">
|
|
|
95
95
|
* closes like `description`. An empty or `undefined` value closes the row.
|
|
96
96
|
*/
|
|
97
97
|
error?: string;
|
|
98
|
+
/**
|
|
99
|
+
* The field must be filled: the input is `required` (announced by screen
|
|
100
|
+
* readers, and checked by native form validation) and the label shows the
|
|
101
|
+
* required marker. The same prop as PasswordField's.
|
|
102
|
+
* @default false
|
|
103
|
+
*/
|
|
104
|
+
isRequired?: boolean;
|
|
98
105
|
}
|
|
99
106
|
declare const Input$1: import("react").ForwardRefExoticComponent<InputProps$1 & import("react").RefAttributes<HTMLInputElement>>;
|
|
100
107
|
//#endregion
|
package/dist/input/input.js
CHANGED
|
@@ -161,7 +161,7 @@ const affixVariants = cva([
|
|
|
161
161
|
defaultVariants: { size: "md" }
|
|
162
162
|
});
|
|
163
163
|
const Input$1 = forwardRef(function Input$2(allProps, ref) {
|
|
164
|
-
const { className, size = "md", startIcon, endIcon, label, description, error, ...props } = allProps;
|
|
164
|
+
const { className, size = "md", startIcon, endIcon, label, description, error, isRequired, ...props } = allProps;
|
|
165
165
|
const field = useFieldWiring({
|
|
166
166
|
enabled: hasFieldProps(allProps),
|
|
167
167
|
id: props.id,
|
|
@@ -173,6 +173,7 @@ const Input$1 = forwardRef(function Input$2(allProps, ref) {
|
|
|
173
173
|
const input = /* @__PURE__ */ jsx(Input, {
|
|
174
174
|
ref,
|
|
175
175
|
...props,
|
|
176
|
+
...isRequired ? { required: true } : {},
|
|
176
177
|
...field.controlProps,
|
|
177
178
|
"data-slot": "input",
|
|
178
179
|
className: cn(inputVariants({
|
|
@@ -212,6 +213,7 @@ const Input$1 = forwardRef(function Input$2(allProps, ref) {
|
|
|
212
213
|
hintId: field.hintId,
|
|
213
214
|
error,
|
|
214
215
|
errorId: field.errorId,
|
|
216
|
+
required: isRequired,
|
|
215
217
|
children: control
|
|
216
218
|
});
|
|
217
219
|
});
|
package/dist/input/input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","names":["Input","AriaInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Input as AriaInput, type InputProps as AriaInputProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { FieldShell, hasFieldProps, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from \"../lib/field-surface.js\";\n\n/**\n * Input, ported from the legacy shadcn component onto React Aria's Input.\n *\n * Census: 25 files, 51 uses -- the busiest control in the app after Button.\n * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.\n *\n * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`\n * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real\n * event -- not the `isDisabled`/`onChange(value)` shape the rest of React\n * Aria uses. It reads `InputContext` when one is present, so the same\n * component is a bare styled input today and composes inside a `TextField`\n * the moment one is wrapped around it. There is no rename to schedule.\n *\n * That is also why this is not `TextField`. Wrapping 51 call sites in a\n * field they do not have, to get a `onChange(value: string)` they did not\n * ask for, would be the migration doing work on the app's behalf.\n *\n * `border-input` becomes `border-border`: in the legacy theme `--input` is\n * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the\n * dark values differ only in alpha. A fourth token role that turns out to\n * be an existing one, after `popover`, `accent` and the scrim.\n */\nexport const inputVariants = cva(\n [\n fieldSurfaceVariants(),\n\n // type=\"file\" has one call site, which is not zero. Enough to keep it\n // from rendering as an unstyled user-agent button.\n \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n \"file:text-foreground\",\n ],\n {\n variants: {\n /**\n * Height and inline padding from the control scale, so `data-density`\n * moves a whole form at once. Same three names and the same tokens as\n * Button, because they sit in the same row: Button's `sm` is the app's\n * second most common at 167 call sites, and while the field was locked\n * to `md` the pair was 10px out of alignment with no supported fix.\n *\n * Type follows Button's sm rung, with one guard. `sm` is 14px, the\n * size of the body text a small field sits among (Button's sm label is\n * text-sm for the same reason). `md` and `lg` stay 16px.\n *\n * The guard: iOS Safari zooms the viewport when a focused field's text\n * is under 16px, so a coarse pointer (a touch screen) keeps 16px on\n * `sm` too. The switch is the input device, not the viewport width:\n * the legacy `text-base md:text-sm` changed size at a breakpoint that\n * has nothing to do with zoom, so a narrow desktop window got 16px and\n * a tablet in landscape got 14px and zoomed.\n */\n size: {\n sm: [fieldBoxSize.sm, fieldTextSize.sm],\n md: [fieldBoxSize.md, fieldTextSize.md],\n lg: [fieldBoxSize.lg, fieldTextSize.lg],\n },\n // Declared empty and filled by the compound variants below: the affix\n // inset depends on BOTH whether a slot is used and which rung it is on.\n hasStartIcon: { true: \"\" },\n hasEndIcon: { true: \"\" },\n },\n compoundVariants: [\n // The affix slots float ABOVE the field rather than sitting beside it\n // in a flex row, so the only thing keeping the value from running\n // underneath a glyph is this padding. It is the same three tokens that\n // place the glyph -- inline padding, icon box, control gap -- so the\n // text and the glyph move together across density AND size. A\n // hand-tuned `pl-9` at the call site can do neither, and the product\n // app has eighteen of those.\n {\n size: \"sm\",\n hasStartIcon: true,\n class:\n \"ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"md\",\n hasStartIcon: true,\n class:\n \"ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"lg\",\n hasStartIcon: true,\n class:\n \"ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"sm\",\n hasEndIcon: true,\n class:\n \"pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"md\",\n hasEndIcon: true,\n class:\n \"pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"lg\",\n hasEndIcon: true,\n class:\n \"pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n ],\n defaultVariants: { size: \"md\" },\n },\n);\n\n/**\n * An affix slot.\n *\n * `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on\n * top of the field, so without it the glyph swallows the click that was meant\n * to focus the input. Which also fixes the slot's scope -- these are\n * DECORATIVE marks. An interactive trailing control (a password reveal, a\n * clear button) needs its own pointer events and its own accessible name, and\n * the census found no call site for one, so it is not built here.\n *\n * Logical properties throughout. The product app's eighteen hand-rolled\n * adornments are all `absolute left-*`, with `absolute start-*` at zero\n * occurrences, so every one of them puts the glyph on the wrong side under\n * RTL and lets the text run over it.\n */\nconst affixVariants = cva(\n [\n \"pointer-events-none absolute inset-y-0 flex items-center\",\n \"text-muted-foreground\",\n // Sized like Button's icon slots, and skipped when the caller sized the\n // glyph themselves. An svg with neither a width attribute nor a resolved\n // class renders at 0x0 and every position assertion still passes.\n \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n ],\n {\n variants: {\n side: { start: \"\", end: \"\" },\n size: { sm: \"\", md: \"\", lg: \"\" },\n },\n // The glyph's inset is the field's own inline padding, so it lines up with\n // where the value would have started. That makes it a pair of axes, not\n // one: a small field at the medium inset puts the glyph under the text.\n compoundVariants: [\n { side: \"start\", size: \"sm\", class: \"start-(--density-control-pad-sm)\" },\n { side: \"start\", size: \"md\", class: \"start-(--density-control-pad-md)\" },\n { side: \"start\", size: \"lg\", class: \"start-(--density-control-pad-lg)\" },\n { side: \"end\", size: \"sm\", class: \"end-(--density-control-pad-sm)\" },\n { side: \"end\", size: \"md\", class: \"end-(--density-control-pad-md)\" },\n { side: \"end\", size: \"lg\", class: \"end-(--density-control-pad-lg)\" },\n ],\n defaultVariants: { size: \"md\" },\n },\n);\n\n/**\n * A single-line text field.\n *\n * @example\n * <Input type=\"email\" placeholder=\"you@example.com\" value={v} onChange={e => set(e.target.value)} />\n * <Input aria-label=\"Search\" startIcon={<SearchIcon aria-hidden />} />\n */\nexport interface InputProps extends Omit<AriaInputProps, \"className\" | \"style\" | \"size\"> {\n /** Extra classes. Merged last, so they win conflicts with ours. */\n className?: string;\n /**\n * Control scale. Height and inline padding come from the same\n * `--density-control-*` tokens as Button, so a field and a button on one\n * rung are the same height.\n *\n * Type does not scale with it: the field stays at 16px everywhere, because\n * iOS Safari zooms the viewport when a focused input's text is smaller.\n *\n * This REPLACES the native `size` attribute, which React Aria inherits from\n * `InputHTMLAttributes` as a character count. No call site in the census\n * used it; set a width with `className` instead.\n *\n * @default \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n /**\n * Decorative glyph at the leading edge of the field.\n *\n * Mark it `aria-hidden` -- the field's label carries the accessible name,\n * and a second name source only makes it announce twice. It is sized at\n * `--icon-sm` unless it carries a `size-*` class of its own, positioned\n * from `--density-control-pad-md`, and the field's leading padding grows to\n * match so the value cannot run underneath it.\n *\n * The slot is `pointer-events: none`, so a click on the glyph focuses the\n * field. That makes it decorative by construction: an interactive\n * adornment -- a password reveal, a clear button -- is NOT this prop.\n *\n * Two named slots rather than one `icon` plus a position prop, matching\n * Button: a search field can legitimately carry a leading glyph AND a\n * trailing unit, which one slot cannot express.\n */\n startIcon?: ReactNode;\n /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */\n endIcon?: ReactNode;\n /**\n * A visible label above the field, tied to it with `htmlFor`. Passing any of\n * `label`, `description` or `error` (even as `undefined`) wraps the field;\n * with none of them the DOM is exactly the bare input. Do not also pass\n * `aria-label`: it wins over the label, so the visible name is not the\n * accessible one (WCAG 2.5.3). Ignored inside a React Aria `TextField`,\n * which supplies its own label and messages.\n */\n label?: ReactNode;\n /**\n * Helper text under the field, named by `aria-describedby`. It opens on a\n * spring when it appears after mount, changed words rise in and numbers roll\n * digit by digit; nothing animates on first render, and reduced motion swaps\n * it instantly. A string, because the copy is animated word by word.\n */\n description?: string;\n /**\n * Error text under the field. Sets `aria-invalid`, so the field takes its\n * invalid border, and is announced as an alert when it appears. Opens and\n * closes like `description`. An empty or `undefined` value closes the row.\n */\n error?: string;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(allProps, ref) {\n const {\n className,\n size = \"md\",\n startIcon,\n endIcon,\n label,\n description,\n error,\n ...props\n } = allProps;\n const field = useFieldWiring({\n enabled: hasFieldProps(allProps),\n id: props.id,\n describedBy: props[\"aria-describedby\"],\n invalid: props[\"aria-invalid\"],\n description,\n error,\n });\n const input = (\n <AriaInput\n // The ref goes on the INPUT, never on the wrapper span below. A ref\n // pointing at the wrapper is still non-null, so it satisfies the obvious\n // assertion while breaking `.focus()`, `.select()` and every\n // react-hook-form site -- but only at the call sites that pass an icon.\n // RefLandsOnTheInputNotTheWrapper is the guard.\n ref={ref}\n {...props}\n {...field.controlProps}\n data-slot=\"input\"\n className={cn(\n inputVariants({\n size,\n hasStartIcon: startIcon !== undefined,\n hasEndIcon: endIcon !== undefined,\n }),\n className,\n )}\n />\n );\n\n // With neither slot used there is no wrapper AT ALL, so the DOM is\n // byte-identical to what shipped before this prop existed. That is what\n // keeps this additive for the 97 call sites that pass no glyph, and\n // NoIconsLeaveDomUnchanged is the assertion holding it true.\n // With neither slot used there is no wrapper AT ALL, so the DOM is\n // byte-identical to what shipped before this prop existed. That is what\n // keeps this additive for the 97 call sites that pass no glyph, and\n // NoIconsLeaveDomUnchanged is the assertion holding it true.\n //\n // An overlay, not a flex row. Moving the border onto this wrapper would\n // take the painted surface off [data-slot=\"input\"] -- the selector the\n // escape hatch is built on -- and would force the focus ring onto\n // :focus-within and the invalid border onto :has(), when React Aria\n // already puts data-focus-visible and data-invalid on the input itself.\n const control =\n startIcon === undefined && endIcon === undefined ? (\n input\n ) : (\n <span data-slot=\"input-wrapper\" className=\"relative block w-full\">\n {input}\n {startIcon === undefined ? null : (\n <span data-slot=\"input-start-icon\" className={affixVariants({ side: \"start\", size })}>\n {startIcon}\n </span>\n )}\n {endIcon === undefined ? null : (\n <span data-slot=\"input-end-icon\" className={affixVariants({ side: \"end\", size })}>\n {endIcon}\n </span>\n )}\n </span>\n );\n\n // Without a field prop there is no field wrapper either, and the DOM is the bare input (or the icon wrapper).\n if (!field.active) return control;\n return (\n <FieldShell\n label={label}\n controlId={field.controlId}\n description={description}\n hintId={field.hintId}\n error={error}\n errorId={field.errorId}\n >\n {control}\n </FieldShell>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,gBAAgB,IAC3B;CACE,qBAAqB;CAIrB;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;;;;;;EAmBR,MAAM;GACJ,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;GACtC,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;GACtC,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;EACxC;EAGA,cAAc,EAAE,MAAM,GAAG;EACzB,YAAY,EAAE,MAAM,GAAG;CACzB;CACA,kBAAkB;EAQhB;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;CACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,IACpB;CACE;CACA;CAIA;AACF,GACA;CACE,UAAU;EACR,MAAM;GAAE,OAAO;GAAI,KAAK;EAAG;EAC3B,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CAIA,kBAAkB;EAChB;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;CACrE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAuEA,MAAaA,UAAQ,WAAyC,SAASA,QAAM,UAAU,KAAK;CAC1F,MAAM,EACJ,WACA,OAAO,MACP,WACA,SACA,OACA,aACA,OACA,GAAG,UACD;CACJ,MAAM,QAAQ,eAAe;EAC3B,SAAS,cAAc,QAAQ;EAC/B,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA;CACF,CAAC;CACD,MAAM,QACJ,oBAACC,OAAD;EAMO;EACL,GAAI;EACJ,GAAI,MAAM;EACV,aAAU;EACV,WAAW,GACT,cAAc;GACZ;GACA,cAAc,cAAc,KAAA;GAC5B,YAAY,YAAY,KAAA;EAC1B,CAAC,GACD,SACF;CACD,CAAA;CAiBH,MAAM,UACJ,cAAc,KAAA,KAAa,YAAY,KAAA,IACrC,QAEA,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EAA1C,UAAA;GACG;GACA,cAAc,KAAA,IAAY,OACzB,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,cAAc;KAAE,MAAM;KAAS;IAAK,CAAC;IAChF,UAAA;GACG,CAAA;GAEP,YAAY,KAAA,IAAY,OACvB,oBAAC,QAAD;IAAM,aAAU;IAAiB,WAAW,cAAc;KAAE,MAAM;KAAO;IAAK,CAAC;IAC5E,UAAA;GACG,CAAA;EAEJ;;CAIV,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACP;EACP,SAAS,MAAM;EAEd,UAAA;CACS,CAAA;AAEhB,CAAC"}
|
|
1
|
+
{"version":3,"file":"input.js","names":["Input","AriaInput"],"sources":["../../src/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { Input as AriaInput, type InputProps as AriaInputProps } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { FieldShell, hasFieldProps, useFieldWiring } from \"../lib/field-shell.js\";\nimport { fieldBoxSize, fieldSurfaceVariants, fieldTextSize } from \"../lib/field-surface.js\";\n\n/**\n * Input, ported from the legacy shadcn component onto React Aria's Input.\n *\n * Census: 25 files, 51 uses -- the busiest control in the app after Button.\n * Props are `onChange` 36, `value` 35, `placeholder` 33, `id` 23, `type` 21.\n *\n * EVERY ONE OF THOSE 51 CALL SITES MIGRATES UNCHANGED. React Aria's `Input`\n * takes NATIVE props -- `disabled`, `aria-invalid`, `onChange` with a real\n * event -- not the `isDisabled`/`onChange(value)` shape the rest of React\n * Aria uses. It reads `InputContext` when one is present, so the same\n * component is a bare styled input today and composes inside a `TextField`\n * the moment one is wrapped around it. There is no rename to schedule.\n *\n * That is also why this is not `TextField`. Wrapping 51 call sites in a\n * field they do not have, to get a `onChange(value: string)` they did not\n * ask for, would be the migration doing work on the app's behalf.\n *\n * `border-input` becomes `border-border`: in the legacy theme `--input` is\n * character-for-character `--border` on light (`oklch(0.922 0 0)`), and the\n * dark values differ only in alpha. A fourth token role that turns out to\n * be an existing one, after `popover`, `accent` and the scrim.\n */\nexport const inputVariants = cva(\n [\n fieldSurfaceVariants(),\n\n // type=\"file\" has one call site, which is not zero. Enough to keep it\n // from rendering as an unstyled user-agent button.\n \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium\",\n \"file:text-foreground\",\n ],\n {\n variants: {\n /**\n * Height and inline padding from the control scale, so `data-density`\n * moves a whole form at once. Same three names and the same tokens as\n * Button, because they sit in the same row: Button's `sm` is the app's\n * second most common at 167 call sites, and while the field was locked\n * to `md` the pair was 10px out of alignment with no supported fix.\n *\n * Type follows Button's sm rung, with one guard. `sm` is 14px, the\n * size of the body text a small field sits among (Button's sm label is\n * text-sm for the same reason). `md` and `lg` stay 16px.\n *\n * The guard: iOS Safari zooms the viewport when a focused field's text\n * is under 16px, so a coarse pointer (a touch screen) keeps 16px on\n * `sm` too. The switch is the input device, not the viewport width:\n * the legacy `text-base md:text-sm` changed size at a breakpoint that\n * has nothing to do with zoom, so a narrow desktop window got 16px and\n * a tablet in landscape got 14px and zoomed.\n */\n size: {\n sm: [fieldBoxSize.sm, fieldTextSize.sm],\n md: [fieldBoxSize.md, fieldTextSize.md],\n lg: [fieldBoxSize.lg, fieldTextSize.lg],\n },\n // Declared empty and filled by the compound variants below: the affix\n // inset depends on BOTH whether a slot is used and which rung it is on.\n hasStartIcon: { true: \"\" },\n hasEndIcon: { true: \"\" },\n },\n compoundVariants: [\n // The affix slots float ABOVE the field rather than sitting beside it\n // in a flex row, so the only thing keeping the value from running\n // underneath a glyph is this padding. It is the same three tokens that\n // place the glyph -- inline padding, icon box, control gap -- so the\n // text and the glyph move together across density AND size. A\n // hand-tuned `pl-9` at the call site can do neither, and the product\n // app has eighteen of those.\n {\n size: \"sm\",\n hasStartIcon: true,\n class:\n \"ps-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"md\",\n hasStartIcon: true,\n class:\n \"ps-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"lg\",\n hasStartIcon: true,\n class:\n \"ps-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"sm\",\n hasEndIcon: true,\n class:\n \"pe-[calc(var(--density-control-pad-sm)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"md\",\n hasEndIcon: true,\n class:\n \"pe-[calc(var(--density-control-pad-md)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n {\n size: \"lg\",\n hasEndIcon: true,\n class:\n \"pe-[calc(var(--density-control-pad-lg)_+_var(--icon-sm)_+_var(--density-control-gap))]\",\n },\n ],\n defaultVariants: { size: \"md\" },\n },\n);\n\n/**\n * An affix slot.\n *\n * `pointer-events-none` is load-bearing, not cosmetic: the slot is painted on\n * top of the field, so without it the glyph swallows the click that was meant\n * to focus the input. Which also fixes the slot's scope -- these are\n * DECORATIVE marks. An interactive trailing control (a password reveal, a\n * clear button) needs its own pointer events and its own accessible name, and\n * the census found no call site for one, so it is not built here.\n *\n * Logical properties throughout. The product app's eighteen hand-rolled\n * adornments are all `absolute left-*`, with `absolute start-*` at zero\n * occurrences, so every one of them puts the glyph on the wrong side under\n * RTL and lets the text run over it.\n */\nconst affixVariants = cva(\n [\n \"pointer-events-none absolute inset-y-0 flex items-center\",\n \"text-muted-foreground\",\n // Sized like Button's icon slots, and skipped when the caller sized the\n // glyph themselves. An svg with neither a width attribute nor a resolved\n // class renders at 0x0 and every position assertion still passes.\n \"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n ],\n {\n variants: {\n side: { start: \"\", end: \"\" },\n size: { sm: \"\", md: \"\", lg: \"\" },\n },\n // The glyph's inset is the field's own inline padding, so it lines up with\n // where the value would have started. That makes it a pair of axes, not\n // one: a small field at the medium inset puts the glyph under the text.\n compoundVariants: [\n { side: \"start\", size: \"sm\", class: \"start-(--density-control-pad-sm)\" },\n { side: \"start\", size: \"md\", class: \"start-(--density-control-pad-md)\" },\n { side: \"start\", size: \"lg\", class: \"start-(--density-control-pad-lg)\" },\n { side: \"end\", size: \"sm\", class: \"end-(--density-control-pad-sm)\" },\n { side: \"end\", size: \"md\", class: \"end-(--density-control-pad-md)\" },\n { side: \"end\", size: \"lg\", class: \"end-(--density-control-pad-lg)\" },\n ],\n defaultVariants: { size: \"md\" },\n },\n);\n\n/**\n * A single-line text field.\n *\n * @example\n * <Input type=\"email\" placeholder=\"you@example.com\" value={v} onChange={e => set(e.target.value)} />\n * <Input aria-label=\"Search\" startIcon={<SearchIcon aria-hidden />} />\n */\nexport interface InputProps extends Omit<AriaInputProps, \"className\" | \"style\" | \"size\"> {\n /** Extra classes. Merged last, so they win conflicts with ours. */\n className?: string;\n /**\n * Control scale. Height and inline padding come from the same\n * `--density-control-*` tokens as Button, so a field and a button on one\n * rung are the same height.\n *\n * Type does not scale with it: the field stays at 16px everywhere, because\n * iOS Safari zooms the viewport when a focused input's text is smaller.\n *\n * This REPLACES the native `size` attribute, which React Aria inherits from\n * `InputHTMLAttributes` as a character count. No call site in the census\n * used it; set a width with `className` instead.\n *\n * @default \"md\"\n */\n size?: \"sm\" | \"md\" | \"lg\";\n /**\n * Decorative glyph at the leading edge of the field.\n *\n * Mark it `aria-hidden` -- the field's label carries the accessible name,\n * and a second name source only makes it announce twice. It is sized at\n * `--icon-sm` unless it carries a `size-*` class of its own, positioned\n * from `--density-control-pad-md`, and the field's leading padding grows to\n * match so the value cannot run underneath it.\n *\n * The slot is `pointer-events: none`, so a click on the glyph focuses the\n * field. That makes it decorative by construction: an interactive\n * adornment -- a password reveal, a clear button -- is NOT this prop.\n *\n * Two named slots rather than one `icon` plus a position prop, matching\n * Button: a search field can legitimately carry a leading glyph AND a\n * trailing unit, which one slot cannot express.\n */\n startIcon?: ReactNode;\n /** Decorative glyph at the trailing edge. Same rules as {@link InputProps.startIcon}. */\n endIcon?: ReactNode;\n /**\n * A visible label above the field, tied to it with `htmlFor`. Passing any of\n * `label`, `description` or `error` (even as `undefined`) wraps the field;\n * with none of them the DOM is exactly the bare input. Do not also pass\n * `aria-label`: it wins over the label, so the visible name is not the\n * accessible one (WCAG 2.5.3). Ignored inside a React Aria `TextField`,\n * which supplies its own label and messages.\n */\n label?: ReactNode;\n /**\n * Helper text under the field, named by `aria-describedby`. It opens on a\n * spring when it appears after mount, changed words rise in and numbers roll\n * digit by digit; nothing animates on first render, and reduced motion swaps\n * it instantly. A string, because the copy is animated word by word.\n */\n description?: string;\n /**\n * Error text under the field. Sets `aria-invalid`, so the field takes its\n * invalid border, and is announced as an alert when it appears. Opens and\n * closes like `description`. An empty or `undefined` value closes the row.\n */\n error?: string;\n /**\n * The field must be filled: the input is `required` (announced by screen\n * readers, and checked by native form validation) and the label shows the\n * required marker. The same prop as PasswordField's.\n * @default false\n */\n isRequired?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(allProps, ref) {\n const {\n className,\n size = \"md\",\n startIcon,\n endIcon,\n label,\n description,\n error,\n isRequired,\n ...props\n } = allProps;\n const field = useFieldWiring({\n enabled: hasFieldProps(allProps),\n id: props.id,\n describedBy: props[\"aria-describedby\"],\n invalid: props[\"aria-invalid\"],\n description,\n error,\n });\n const input = (\n <AriaInput\n // The ref goes on the INPUT, never on the wrapper span below. A ref\n // pointing at the wrapper is still non-null, so it satisfies the obvious\n // assertion while breaking `.focus()`, `.select()` and every\n // react-hook-form site -- but only at the call sites that pass an icon.\n // RefLandsOnTheInputNotTheWrapper is the guard.\n ref={ref}\n {...props}\n {...(isRequired ? { required: true } : {})}\n {...field.controlProps}\n data-slot=\"input\"\n className={cn(\n inputVariants({\n size,\n hasStartIcon: startIcon !== undefined,\n hasEndIcon: endIcon !== undefined,\n }),\n className,\n )}\n />\n );\n\n // With neither slot used there is no wrapper AT ALL, so the DOM is\n // byte-identical to what shipped before this prop existed. That is what\n // keeps this additive for the 97 call sites that pass no glyph, and\n // NoIconsLeaveDomUnchanged is the assertion holding it true.\n // With neither slot used there is no wrapper AT ALL, so the DOM is\n // byte-identical to what shipped before this prop existed. That is what\n // keeps this additive for the 97 call sites that pass no glyph, and\n // NoIconsLeaveDomUnchanged is the assertion holding it true.\n //\n // An overlay, not a flex row. Moving the border onto this wrapper would\n // take the painted surface off [data-slot=\"input\"] -- the selector the\n // escape hatch is built on -- and would force the focus ring onto\n // :focus-within and the invalid border onto :has(), when React Aria\n // already puts data-focus-visible and data-invalid on the input itself.\n const control =\n startIcon === undefined && endIcon === undefined ? (\n input\n ) : (\n <span data-slot=\"input-wrapper\" className=\"relative block w-full\">\n {input}\n {startIcon === undefined ? null : (\n <span data-slot=\"input-start-icon\" className={affixVariants({ side: \"start\", size })}>\n {startIcon}\n </span>\n )}\n {endIcon === undefined ? null : (\n <span data-slot=\"input-end-icon\" className={affixVariants({ side: \"end\", size })}>\n {endIcon}\n </span>\n )}\n </span>\n );\n\n // Without a field prop there is no field wrapper either, and the DOM is the bare input (or the icon wrapper).\n if (!field.active) return control;\n return (\n <FieldShell\n label={label}\n controlId={field.controlId}\n description={description}\n hintId={field.hintId}\n error={error}\n errorId={field.errorId}\n required={isRequired}\n >\n {control}\n </FieldShell>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAa,gBAAgB,IAC3B;CACE,qBAAqB;CAIrB;CACA;AACF,GACA;CACE,UAAU;;;;;;;;;;;;;;;;;;;EAmBR,MAAM;GACJ,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;GACtC,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;GACtC,IAAI,CAAC,aAAa,IAAI,cAAc,EAAE;EACxC;EAGA,cAAc,EAAE,MAAM,GAAG;EACzB,YAAY,EAAE,MAAM,GAAG;CACzB;CACA,kBAAkB;EAQhB;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,cAAc;GACd,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;EACA;GACE,MAAM;GACN,YAAY;GACZ,OACE;EACJ;CACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;;;;;;;;;;;;;;;AAiBA,MAAM,gBAAgB,IACpB;CACE;CACA;CAIA;AACF,GACA;CACE,UAAU;EACR,MAAM;GAAE,OAAO;GAAI,KAAK;EAAG;EAC3B,MAAM;GAAE,IAAI;GAAI,IAAI;GAAI,IAAI;EAAG;CACjC;CAIA,kBAAkB;EAChB;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAS,MAAM;GAAM,OAAO;EAAmC;EACvE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;EACnE;GAAE,MAAM;GAAO,MAAM;GAAM,OAAO;EAAiC;CACrE;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AA8EA,MAAaA,UAAQ,WAAyC,SAASA,QAAM,UAAU,KAAK;CAC1F,MAAM,EACJ,WACA,OAAO,MACP,WACA,SACA,OACA,aACA,OACA,YACA,GAAG,UACD;CACJ,MAAM,QAAQ,eAAe;EAC3B,SAAS,cAAc,QAAQ;EAC/B,IAAI,MAAM;EACV,aAAa,MAAM;EACnB,SAAS,MAAM;EACf;EACA;CACF,CAAC;CACD,MAAM,QACJ,oBAACC,OAAD;EAMO;EACL,GAAI;EACJ,GAAK,aAAa,EAAE,UAAU,KAAK,IAAI,CAAC;EACxC,GAAI,MAAM;EACV,aAAU;EACV,WAAW,GACT,cAAc;GACZ;GACA,cAAc,cAAc,KAAA;GAC5B,YAAY,YAAY,KAAA;EAC1B,CAAC,GACD,SACF;CACD,CAAA;CAiBH,MAAM,UACJ,cAAc,KAAA,KAAa,YAAY,KAAA,IACrC,QAEA,qBAAC,QAAD;EAAM,aAAU;EAAgB,WAAU;EAA1C,UAAA;GACG;GACA,cAAc,KAAA,IAAY,OACzB,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAW,cAAc;KAAE,MAAM;KAAS;IAAK,CAAC;IAChF,UAAA;GACG,CAAA;GAEP,YAAY,KAAA,IAAY,OACvB,oBAAC,QAAD;IAAM,aAAU;IAAiB,WAAW,cAAc;KAAE,MAAM;KAAO;IAAK,CAAC;IAC5E,UAAA;GACG,CAAA;EAEJ;;CAIV,IAAI,CAAC,MAAM,QAAQ,OAAO;CAC1B,OACE,oBAAC,YAAD;EACS;EACP,WAAW,MAAM;EACJ;EACb,QAAQ,MAAM;EACP;EACP,SAAS,MAAM;EACf,UAAU;EAET,UAAA;CACS,CAAA;AAEhB,CAAC"}
|
package/dist/lib/field-shell.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { Label as Label$1 } from "../label/label.js";
|
|
2
2
|
import { FieldMessage } from "./field-message.js";
|
|
3
|
+
import { RequiredMarker } from "./required-marker.js";
|
|
3
4
|
import { useId } from "react";
|
|
4
5
|
import { InputContext, LabelContext, useSlottedContext } from "react-aria-components";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -57,12 +58,7 @@ function FieldShell({ label, controlId, description, hintId, error, errorId, wor
|
|
|
57
58
|
label == null ? null : /* @__PURE__ */ jsxs(Label$1, {
|
|
58
59
|
htmlFor: controlId,
|
|
59
60
|
className: "mb-1.5",
|
|
60
|
-
children: [label, required ? /* @__PURE__ */ jsx(
|
|
61
|
-
"aria-hidden": "true",
|
|
62
|
-
"data-slot": "field-required",
|
|
63
|
-
className: "-ms-1 text-destructive-strong",
|
|
64
|
-
children: "*"
|
|
65
|
-
}) : null]
|
|
61
|
+
children: [label, required ? /* @__PURE__ */ jsx(RequiredMarker, {}) : null]
|
|
66
62
|
}),
|
|
67
63
|
children,
|
|
68
64
|
/* @__PURE__ */ jsx(FieldMessage, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-shell.js","names":["Label"],"sources":["../../src/lib/field-shell.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { InputContext, LabelContext, useSlottedContext } from \"react-aria-components\";\n\nimport { Label } from \"../label/label.js\";\nimport { FieldMessage, type WordExit } from \"./field-message.js\";\n\n/*\n * The label, helper text and error text around a text control, for Input and\n * Textarea. The first lib file that imports a sibling component (Label): the\n * layer rule allows primitives to use primitives, and a field's label is the\n * same Label everywhere else.\n */\n\n/**\n * True when any field prop was passed at all, even as `undefined`. Deciding by\n * presence, not value, is what keeps `error={maybeMessage}` from moving the\n * control between a wrapper and no wrapper when the message appears: that would\n * remount the control and drop focus and an uncontrolled value.\n */\nexport const hasFieldProps = (props: object) =>\n \"label\" in props || \"description\" in props || \"error\" in props;\n\n/** A control inside a React Aria `TextField` already has its label and messages supplied by the field. */\nfunction useInsideReactAriaField() {\n const label = useSlottedContext(LabelContext);\n const input = useSlottedContext(InputContext);\n return Object.keys(label ?? {}).length > 0 || Object.keys(input ?? {}).length > 0;\n}\n\n/**\n * The ids and aria wiring for a control with field props. `active` is false\n * when no field prop was passed, or inside a React Aria field, and then\n * `controlProps` is empty: the control's own props are untouched, and a bare\n * control has no generated `id`.\n */\nexport function useFieldWiring({\n enabled,\n id,\n describedBy,\n invalid,\n description,\n error,\n}: {\n enabled: boolean;\n id: string | undefined;\n describedBy: string | undefined;\n invalid: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined;\n description: string | undefined;\n error: string | undefined;\n}) {\n const generated = useId();\n const inside = useInsideReactAriaField();\n const active = enabled && !inside;\n const controlId = id ?? generated;\n const hintId = active && description ? `${controlId}-description` : undefined;\n const errorId = active && error ? `${controlId}-error` : undefined;\n return {\n active,\n /** True inside a React Aria field, which supplies the label and its own messages. */\n inside,\n controlId,\n hintId,\n errorId,\n controlProps: active\n ? {\n id: controlId,\n \"aria-invalid\": error ? true : invalid,\n \"aria-describedby\": [describedBy, hintId, errorId].filter(Boolean).join(\" \") || undefined,\n }\n : {},\n };\n}\n\n/** The wrapper: label above the control, then the helper row and the error row. Each row owns its top space, so a closed row costs nothing. */\nexport function FieldShell({\n label,\n controlId,\n description,\n hintId,\n error,\n errorId,\n wordExit,\n numbers,\n required = false,\n children,\n}: {\n label: ReactNode;\n controlId: string;\n description: string | undefined;\n hintId: string | undefined;\n error: string | undefined;\n errorId: string | undefined;\n wordExit?: WordExit;\n numbers?: boolean;\n /**\n * Draws the required marker after the label. Decoration only (aria-hidden):\n * the control's own `required` is what a screen reader announces, so the\n * name stays \"Password\", not \"Password star\".\n */\n required?: boolean;\n children: ReactNode;\n}) {\n return (\n <div data-slot=\"field\" className=\"grid min-w-0 font-sans\">\n {label == null ? null : (\n // 6px, the gap Select and DatePicker keep between their label and control, so a labelled Input sits level with them.\n <Label htmlFor={controlId} className=\"mb-1.5\">\n {label}\n {required ?
|
|
1
|
+
{"version":3,"file":"field-shell.js","names":["Label"],"sources":["../../src/lib/field-shell.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { InputContext, LabelContext, useSlottedContext } from \"react-aria-components\";\n\nimport { Label } from \"../label/label.js\";\nimport { FieldMessage, type WordExit } from \"./field-message.js\";\nimport { RequiredMarker } from \"./required-marker.js\";\n\n/*\n * The label, helper text and error text around a text control, for Input and\n * Textarea. The first lib file that imports a sibling component (Label): the\n * layer rule allows primitives to use primitives, and a field's label is the\n * same Label everywhere else.\n */\n\n/**\n * True when any field prop was passed at all, even as `undefined`. Deciding by\n * presence, not value, is what keeps `error={maybeMessage}` from moving the\n * control between a wrapper and no wrapper when the message appears: that would\n * remount the control and drop focus and an uncontrolled value.\n */\nexport const hasFieldProps = (props: object) =>\n \"label\" in props || \"description\" in props || \"error\" in props;\n\n/** A control inside a React Aria `TextField` already has its label and messages supplied by the field. */\nfunction useInsideReactAriaField() {\n const label = useSlottedContext(LabelContext);\n const input = useSlottedContext(InputContext);\n return Object.keys(label ?? {}).length > 0 || Object.keys(input ?? {}).length > 0;\n}\n\n/**\n * The ids and aria wiring for a control with field props. `active` is false\n * when no field prop was passed, or inside a React Aria field, and then\n * `controlProps` is empty: the control's own props are untouched, and a bare\n * control has no generated `id`.\n */\nexport function useFieldWiring({\n enabled,\n id,\n describedBy,\n invalid,\n description,\n error,\n}: {\n enabled: boolean;\n id: string | undefined;\n describedBy: string | undefined;\n invalid: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined;\n description: string | undefined;\n error: string | undefined;\n}) {\n const generated = useId();\n const inside = useInsideReactAriaField();\n const active = enabled && !inside;\n const controlId = id ?? generated;\n const hintId = active && description ? `${controlId}-description` : undefined;\n const errorId = active && error ? `${controlId}-error` : undefined;\n return {\n active,\n /** True inside a React Aria field, which supplies the label and its own messages. */\n inside,\n controlId,\n hintId,\n errorId,\n controlProps: active\n ? {\n id: controlId,\n \"aria-invalid\": error ? true : invalid,\n \"aria-describedby\": [describedBy, hintId, errorId].filter(Boolean).join(\" \") || undefined,\n }\n : {},\n };\n}\n\n/** The wrapper: label above the control, then the helper row and the error row. Each row owns its top space, so a closed row costs nothing. */\nexport function FieldShell({\n label,\n controlId,\n description,\n hintId,\n error,\n errorId,\n wordExit,\n numbers,\n required = false,\n children,\n}: {\n label: ReactNode;\n controlId: string;\n description: string | undefined;\n hintId: string | undefined;\n error: string | undefined;\n errorId: string | undefined;\n wordExit?: WordExit;\n numbers?: boolean;\n /**\n * Draws the required marker after the label. Decoration only (aria-hidden):\n * the control's own `required` is what a screen reader announces, so the\n * name stays \"Password\", not \"Password star\".\n */\n required?: boolean;\n children: ReactNode;\n}) {\n return (\n <div data-slot=\"field\" className=\"grid min-w-0 font-sans\">\n {label == null ? null : (\n // 6px, the gap Select and DatePicker keep between their label and control, so a labelled Input sits level with them.\n <Label htmlFor={controlId} className=\"mb-1.5\">\n {label}\n {required ? <RequiredMarker /> : null}\n </Label>\n )}\n {children}\n <FieldMessage\n id={hintId}\n text={description}\n tone=\"description\"\n wordExit={wordExit}\n numbers={numbers}\n />\n <FieldMessage id={errorId} text={error} tone=\"error\" wordExit={wordExit} numbers={numbers} />\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,iBAAiB,UAC5B,WAAW,SAAS,iBAAiB,SAAS,WAAW;;AAG3D,SAAS,0BAA0B;CACjC,MAAM,QAAQ,kBAAkB,YAAY;CAC5C,MAAM,QAAQ,kBAAkB,YAAY;CAC5C,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;AAClF;;;;;;;AAQA,SAAgB,eAAe,EAC7B,SACA,IACA,aACA,SACA,aACA,SAQC;CACD,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,wBAAwB;CACvC,MAAM,SAAS,WAAW,CAAC;CAC3B,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,UAAU,cAAc,GAAG,UAAU,gBAAgB,KAAA;CACpE,MAAM,UAAU,UAAU,QAAQ,GAAG,UAAU,UAAU,KAAA;CACzD,OAAO;EACL;;EAEA;EACA;EACA;EACA;EACA,cAAc,SACV;GACE,IAAI;GACJ,gBAAgB,QAAQ,OAAO;GAC/B,oBAAoB;IAAC;IAAa;IAAQ;GAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;EAClF,IACA,CAAC;CACP;AACF;;AAGA,SAAgB,WAAW,EACzB,OACA,WACA,aACA,QACA,OACA,SACA,UACA,SACA,WAAW,OACX,YAiBC;CACD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAQ,WAAU;EAAjC,UAAA;GACG,SAAS,OAAO,OAEf,qBAACA,SAAD;IAAO,SAAS;IAAW,WAAU;IAArC,UAAA,CACG,OACA,WAAW,oBAAC,gBAAD,CAAiB,CAAA,IAAI,IAC5B;;GAER;GACD,oBAAC,cAAD;IACE,IAAI;IACJ,MAAM;IACN,MAAK;IACK;IACD;GACV,CAAA;GACD,oBAAC,cAAD;IAAc,IAAI;IAAS,MAAM;IAAO,MAAK;IAAkB;IAAmB;GAAU,CAAA;EACzF;;AAET"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
//#region src/lib/required-marker.tsx
|
|
3
|
+
/**
|
|
4
|
+
* The required marker after a field's label: one red asterisk, the same in
|
|
5
|
+
* every field (FieldShell's, and Select's own label). Decoration only
|
|
6
|
+
* (aria-hidden): the control's own `required` is what a screen reader
|
|
7
|
+
* announces, so the name stays "Email", not "Email star".
|
|
8
|
+
*/
|
|
9
|
+
function RequiredMarker() {
|
|
10
|
+
return /* @__PURE__ */ jsx("span", {
|
|
11
|
+
"aria-hidden": "true",
|
|
12
|
+
"data-slot": "field-required",
|
|
13
|
+
className: "-ms-1 text-destructive-strong",
|
|
14
|
+
children: "*"
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
//#endregion
|
|
18
|
+
export { RequiredMarker };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=required-marker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"required-marker.js","names":[],"sources":["../../src/lib/required-marker.tsx"],"sourcesContent":["/**\n * The required marker after a field's label: one red asterisk, the same in\n * every field (FieldShell's, and Select's own label). Decoration only\n * (aria-hidden): the control's own `required` is what a screen reader\n * announces, so the name stays \"Email\", not \"Email star\".\n */\nexport function RequiredMarker() {\n return (\n <span aria-hidden=\"true\" data-slot=\"field-required\" className=\"-ms-1 text-destructive-strong\">\n *\n </span>\n );\n}\n"],"mappings":";;;;;;;;AAMA,SAAgB,iBAAiB;CAC/B,OACE,oBAAC,QAAD;EAAM,eAAY;EAAO,aAAU;EAAiB,WAAU;EAAgC,UAAA;CAExF,CAAA;AAEV"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartReference, LineChartSeries } from "./line-chart.js";
|
|
2
|
-
export { LINE_CHART_DRAW_MS, LineChart, type LineChartDatum, type LineChartProps, type LineChartReference, type LineChartSeries };
|
|
1
|
+
import { LINE_CHART_DRAW_MS, LineChart, LineChartBand, LineChartDatum, LineChartMarker, LineChartProps, LineChartReference, LineChartSeries, LineChartTone, LineChartTooltipContext } from "./line-chart.js";
|
|
2
|
+
export { LINE_CHART_DRAW_MS, LineChart, type LineChartBand, type LineChartDatum, type LineChartMarker, type LineChartProps, type LineChartReference, type LineChartSeries, type LineChartTone, type LineChartTooltipContext };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ReactNode } from "react";
|
|
1
2
|
//#region src/line-chart/line-chart.d.ts
|
|
2
3
|
/**
|
|
3
4
|
* LineChart: one or more measures over time, when the shape of the trend
|
|
@@ -26,6 +27,19 @@ export interface LineChartSeries {
|
|
|
26
27
|
dashed?: boolean;
|
|
27
28
|
/** A faint fill under the line. Defaults to true for the first series. */
|
|
28
29
|
area?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Prints each value above its point, read with `formatValue` (without `unit`).
|
|
32
|
+
* A missing value (with `missing` `"gap"` or `"connect"`) has no label. For a
|
|
33
|
+
* few points: labels on a dense line collide.
|
|
34
|
+
* @default false
|
|
35
|
+
*/
|
|
36
|
+
pointLabels?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* A label above the series' last point with a value. `true` prints that value
|
|
39
|
+
* (read with `formatValue`, without `unit`); a string prints the text, such as
|
|
40
|
+
* "Heading for 1,800", and is read in the chart's summary.
|
|
41
|
+
*/
|
|
42
|
+
endLabel?: boolean | string;
|
|
29
43
|
}
|
|
30
44
|
export interface LineChartDatum {
|
|
31
45
|
/** Stable identity, such as an ISO date. */
|
|
@@ -40,6 +54,8 @@ export interface LineChartDatum {
|
|
|
40
54
|
*/
|
|
41
55
|
values: Record<string, number | null | undefined>;
|
|
42
56
|
}
|
|
57
|
+
/** The colour role of a reference line or an event marker. `"neutral"` is the quiet default. */
|
|
58
|
+
export type LineChartTone = "neutral" | "accent" | "success" | "warning" | "danger";
|
|
43
59
|
/**
|
|
44
60
|
* A reference line: a horizontal line at a value (a target, a threshold), or a
|
|
45
61
|
* vertical line at one datum (today, a launch). Drawn dashed and quiet, behind
|
|
@@ -50,6 +66,12 @@ export type LineChartReference = {
|
|
|
50
66
|
key: string;
|
|
51
67
|
/** Short text beside the line, such as "Target" or "Today". Also read to screen readers. */
|
|
52
68
|
label: string;
|
|
69
|
+
/**
|
|
70
|
+
* Colours the line and its label, for a line whose colour carries meaning,
|
|
71
|
+
* such as a "Goal" in warning. Still dashed, still behind the series.
|
|
72
|
+
* @default "neutral"
|
|
73
|
+
*/
|
|
74
|
+
tone?: LineChartTone;
|
|
53
75
|
} & ({
|
|
54
76
|
/**
|
|
55
77
|
* A value on the value axis: a horizontal line. The scale grows to keep it
|
|
@@ -64,6 +86,54 @@ export type LineChartReference = {
|
|
|
64
86
|
at: string;
|
|
65
87
|
value?: never;
|
|
66
88
|
});
|
|
89
|
+
/**
|
|
90
|
+
* An event on the category axis, such as "prompts changed": a short stem up
|
|
91
|
+
* from the baseline at one datum, with a short visible label above it.
|
|
92
|
+
*/
|
|
93
|
+
export interface LineChartMarker {
|
|
94
|
+
/** Stable identity. */
|
|
95
|
+
key: string;
|
|
96
|
+
/** The `key` of a datum. A key not in `data` draws nothing. */
|
|
97
|
+
at: string;
|
|
98
|
+
/** Short visible text, such as "Changed" or "v2". */
|
|
99
|
+
label: string;
|
|
100
|
+
/** What happened, read to screen readers in place of `label`, such as "Prompt set changed". */
|
|
101
|
+
description?: string;
|
|
102
|
+
/** @default "neutral" */
|
|
103
|
+
tone?: LineChartTone;
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* A shaded band across the plot between two values, such as "Page 1" for
|
|
107
|
+
* ranks 1 to 10. Drawn behind the gridlines and the series, clipped to the
|
|
108
|
+
* value axis; it never grows the scale.
|
|
109
|
+
*/
|
|
110
|
+
export interface LineChartBand {
|
|
111
|
+
/** Stable identity. */
|
|
112
|
+
key: string;
|
|
113
|
+
/** One edge of the band, on the value axis. Either order. */
|
|
114
|
+
from: number;
|
|
115
|
+
/** The other edge. */
|
|
116
|
+
to: number;
|
|
117
|
+
/** Short text inside the band at its top inline-start corner, such as "Page 1". Hidden when the band is too thin to hold it. */
|
|
118
|
+
label: string;
|
|
119
|
+
/** What the band means, read in the chart's summary in place of `label` and its range, such as "Page 1: ranks 1 to 10". */
|
|
120
|
+
description?: string;
|
|
121
|
+
/** @default "neutral" */
|
|
122
|
+
tone?: LineChartTone;
|
|
123
|
+
}
|
|
124
|
+
/** What `renderTooltip` is given for the point under the crosshair. */
|
|
125
|
+
export interface LineChartTooltipContext {
|
|
126
|
+
datum: LineChartDatum;
|
|
127
|
+
index: number;
|
|
128
|
+
/** The series on show, in order. */
|
|
129
|
+
series: LineChartSeries[];
|
|
130
|
+
/** Each shown series' value at this point; `null` when it is missing (with `missing` `"gap"` or `"connect"`). */
|
|
131
|
+
values: Record<string, number | null>;
|
|
132
|
+
/** Reads a value the way the default tooltip does: `formatValue`, `unit`, and `missingLabel` for `null`. */
|
|
133
|
+
format: (value: number | null, series: LineChartSeries) => string;
|
|
134
|
+
/** The default tooltip content (the date and one row per series), to keep and add to. */
|
|
135
|
+
readout: ReactNode;
|
|
136
|
+
}
|
|
67
137
|
export interface LineChartProps {
|
|
68
138
|
data: LineChartDatum[];
|
|
69
139
|
series: LineChartSeries[];
|
|
@@ -98,14 +168,46 @@ export interface LineChartProps {
|
|
|
98
168
|
* `"zero"` counts it as zero, as before. `"gap"` breaks the line (and its
|
|
99
169
|
* area) there, leaves it out of the scale, hides the crosshair dot on it and
|
|
100
170
|
* reads it as `missingLabel` in the tooltip and the data table. A point with
|
|
101
|
-
* missing neighbours on both sides is drawn as a dot.
|
|
171
|
+
* missing neighbours on both sides is drawn as a dot. `"connect"` is the same,
|
|
172
|
+
* except the line runs on across missing values between two present ones,
|
|
173
|
+
* through the straight line between them (a projection known at a few
|
|
174
|
+
* points); before the first value and after the last, nothing is drawn.
|
|
102
175
|
* @default "zero"
|
|
103
176
|
*/
|
|
104
|
-
missing?: "zero" | "gap";
|
|
105
|
-
/** Read in place of a missing value when `missing` is `"gap"`. @default "No data" */
|
|
177
|
+
missing?: "zero" | "gap" | "connect";
|
|
178
|
+
/** Read in place of a missing value when `missing` is `"gap"` or `"connect"`. @default "No data" */
|
|
106
179
|
missingLabel?: string;
|
|
107
180
|
/** Reference lines: targets at a value, or markers such as "today" at a datum. */
|
|
108
181
|
references?: LineChartReference[];
|
|
182
|
+
/** Events on the category axis, each with a short visible label. Read in the summary and when scrubbed to. */
|
|
183
|
+
markers?: LineChartMarker[];
|
|
184
|
+
/**
|
|
185
|
+
* Flips the value axis: the lowest value at the top, the highest on the
|
|
186
|
+
* baseline. For ranks, where 1 is best. Pair it with `valueDomain`, such as
|
|
187
|
+
* `{ min: 1 }`, so the axis starts at rank 1 rather than 0.
|
|
188
|
+
* @default false
|
|
189
|
+
*/
|
|
190
|
+
reversed?: boolean;
|
|
191
|
+
/**
|
|
192
|
+
* Pins either end of the value axis, such as `{ min: 1, max: 100 }` for ranks
|
|
193
|
+
* #1 to #100. An end left out fits the data as before (from zero at the low
|
|
194
|
+
* end). The pinned values are always ticks. A value past a pinned end is drawn
|
|
195
|
+
* past the edge, so pin a range that covers the data.
|
|
196
|
+
*/
|
|
197
|
+
valueDomain?: {
|
|
198
|
+
min?: number;
|
|
199
|
+
max?: number;
|
|
200
|
+
};
|
|
201
|
+
/** Shaded bands between two values, such as rank pages. Read in the summary. */
|
|
202
|
+
bands?: LineChartBand[];
|
|
203
|
+
/**
|
|
204
|
+
* Replaces the tooltip's content for the point under the crosshair. It is
|
|
205
|
+
* given the point and the default `readout`, to keep and add to (gained and
|
|
206
|
+
* lost counts under a total). Return `null` (or `undefined`, `false`, `0` or `""`) to show no tooltip at that point.
|
|
207
|
+
* The tooltip is visual only: the slider's value text, the summary and the
|
|
208
|
+
* data table still read every value.
|
|
209
|
+
*/
|
|
210
|
+
renderTooltip?: (context: LineChartTooltipContext) => ReactNode;
|
|
109
211
|
/** Extra classes for the root. Merged last. */
|
|
110
212
|
className?: string;
|
|
111
213
|
}
|