@salemcobalt/ui 0.2.0-rc.25 → 0.2.0-rc.26
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 +1 -1
- package/dist/index.d.ts +12 -5
- package/dist/index.js +66 -19
- package/dist/index.js.map +1 -1
- package/dist/styles.css +9 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -48,7 +48,7 @@ Styles ship as one stylesheet inside `@layer sc`, so an app's unlayered CSS alwa
|
|
|
48
48
|
| `Disclosure` | A native `<details>` collapse: required `summary`, `summaryOpen`, `open`/`defaultOpen`/`onOpenChange`, `previewLines` (fades the first N lines while closed, summary moves below), `summaryPosition`; share `name` for an exclusive group. |
|
|
49
49
|
| `EmptyState` | Centred placeholder: required `title`, `description`, `icon` (24px in a muted circle), children are the actions, `size` sm · md, `as` div · section · li. |
|
|
50
50
|
| `Skeleton` | Loading placeholder, `aria-hidden`: `variant` text (default, one line) · rect · circle, `width`, `height`, `lines` (text, last line shorter), `still`. Put `aria-busy` on the region or a labelled `Spinner` beside it. |
|
|
51
|
-
| `Menu` | `Root` (`open`, `onOpenChange`, `modal`), `Trigger` (secondary Button with a chevron, or `render={<IconButton label="More" />}`), `Content` (`side`, `align`), `Item` (`icon`, `trailing`, `tone="danger"`, `disabled`), `LinkItem` (`href`), `CheckboxItem` (`checked`, `onCheckedChange`), `RadioGroup` (`value`, `onValueChange`, `label`) + `RadioItem`, `Group` (`label`), `Separator`. Arrow keys, Home/End, type-ahead, Esc and focus return come from Base UI.
|
|
51
|
+
| `Menu` | `Root` (`open`, `onOpenChange`, `modal`), `Trigger` (secondary Button with a chevron, or `render={<IconButton label="More" />}`), `Content` (`side`, `align`), `Item` (`icon`, decorative; `description`, a muted second line that is the item's accessible description, not part of its name; `trailing`, `tone="danger"`, `disabled`), `LinkItem` (`href`, and the same `icon` and `description`), `CheckboxItem` (`checked`, `onCheckedChange`), `RadioGroup` (`value`, `onValueChange`, `label`) + `RadioItem`, `Group` (`label`), `Separator`. Arrow keys, Home/End, type-ahead, Esc and focus return come from Base UI. |
|
|
52
52
|
| `Table` selection | `useRowSelection(ids)` (ids in visible order; ids that disappear leave the selection): `selected`, `selectedIds`, `count`, `anchor`, `headerState` none · some · all, `isSelected`, `toggle`, `toggleRange`, `selectAll`, `clear`; a pure reducer underneath (`selection.*` events). `Table.Root selection` + `Table.SelectionHeader` (`label`, mixed when some) + `Table.SelectionCell label="Select …"` in a `Table.Row selectionId`. Shift+click (checkbox or row) and Shift+Space extend from the anchor; Cmd/Ctrl+click on a row toggles without reaching its `onClick`; Cmd/Ctrl+A in the table selects all, Esc clears. |
|
|
53
53
|
| `SelectionBar` | Floating bulk-action bar on Toolbar, centred at the bottom of the viewport (content width up to 48rem, gutters and the safe area respected, full width between the gutters under 640px, fade and slide-up, none under reduced motion): `count` (hidden at 0), `onClear`, children are `Toolbar.Button`s, `aria-label` ("Bulk actions"), `countLabel`, `clearLabel`. Mount it at the end of the scrolling content: while open it leaves a spacer as tall as itself so the last rows scroll clear. A polite status region announces the count; focus returns to where it came from when the bar leaves. |
|
|
54
54
|
| `Toast` | `Toast.Provider` (`timeout` 6000, `limit` 3) near the root, `useToast().add({ title, description, tone, action: { label, onClick }, timeout, priority })` below it; Base UI Toast: polite region, paused on hover and focus, F6 to reach it, bottom-end at `--sc-z-toast`. |
|
package/dist/index.d.ts
CHANGED
|
@@ -847,6 +847,8 @@ declare function EditIcon(props: IconGlyphProps): react.JSX.Element;
|
|
|
847
847
|
declare function ExternalLinkIcon(props: IconGlyphProps): react.JSX.Element;
|
|
848
848
|
/** `eye` */
|
|
849
849
|
declare function EyeIcon(props: IconGlyphProps): react.JSX.Element;
|
|
850
|
+
/** `eye-off` */
|
|
851
|
+
declare function EyeOffIcon(props: IconGlyphProps): react.JSX.Element;
|
|
850
852
|
/** `filter` */
|
|
851
853
|
declare function FilterIcon(props: IconGlyphProps): react.JSX.Element;
|
|
852
854
|
/** `flag` */
|
|
@@ -903,7 +905,7 @@ declare function WarningIcon(props: IconGlyphProps): react.JSX.Element;
|
|
|
903
905
|
declare function XIcon(props: IconGlyphProps): react.JSX.Element;
|
|
904
906
|
|
|
905
907
|
/** Every icon shipped by this package, as `<Name>Icon` components. */
|
|
906
|
-
declare const iconNames: readonly ["archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bell", "briefcase", "calendar", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-x", "clock", "copy", "document", "download", "edit", "external-link", "eye", "filter", "flag", "inbox", "info", "link", "mail", "map-pin", "menu", "minus", "moon", "more-horizontal", "more-vertical", "pause", "play", "plus", "refresh", "search", "settings", "star", "sun", "thumbs-down", "thumbs-up", "trash", "undo", "user", "warning", "x"];
|
|
908
|
+
declare const iconNames: readonly ["archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bell", "briefcase", "calendar", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-x", "clock", "copy", "document", "download", "edit", "external-link", "eye", "eye-off", "filter", "flag", "inbox", "info", "link", "mail", "map-pin", "menu", "minus", "moon", "more-horizontal", "more-vertical", "pause", "play", "plus", "refresh", "search", "settings", "star", "sun", "thumbs-down", "thumbs-up", "trash", "undo", "user", "warning", "x"];
|
|
907
909
|
type IconName = (typeof iconNames)[number];
|
|
908
910
|
|
|
909
911
|
type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
|
|
@@ -1006,8 +1008,13 @@ interface MenuContentProps extends Omit<Menu$1.Popup.Props, 'className'> {
|
|
|
1006
1008
|
/** Portal, positioner and the popup. Items go inside. */
|
|
1007
1009
|
declare function Content$1({ side, align, sideOffset, className, children, ...rest }: MenuContentProps): react.JSX.Element;
|
|
1008
1010
|
interface ItemSlots {
|
|
1009
|
-
/** A 16px icon before the label. */
|
|
1011
|
+
/** A 16px icon before the label. Decorative: hidden from assistive tech. */
|
|
1010
1012
|
icon?: ReactNode | undefined;
|
|
1013
|
+
/**
|
|
1014
|
+
* A muted second line under the label that says what the item does. It is the item's accessible
|
|
1015
|
+
* description (`aria-describedby`), not part of its name.
|
|
1016
|
+
*/
|
|
1017
|
+
description?: ReactNode | undefined;
|
|
1011
1018
|
/** Muted text at the end: a shortcut (`<Kbd>`) or a count. */
|
|
1012
1019
|
trailing?: ReactNode | undefined;
|
|
1013
1020
|
/** `danger` for destructive actions; put them last, after a separator. */
|
|
@@ -1017,7 +1024,7 @@ interface MenuItemProps extends Omit<Menu$1.Item.Props, 'className'>, ItemSlots
|
|
|
1017
1024
|
className?: string | undefined;
|
|
1018
1025
|
}
|
|
1019
1026
|
/** One action. Closes the menu when activated. */
|
|
1020
|
-
declare function Item({ icon, trailing, tone, className, children, ...rest }: MenuItemProps): react.JSX.Element;
|
|
1027
|
+
declare function Item({ icon, description, trailing, tone, className, children, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: MenuItemProps): react.JSX.Element;
|
|
1021
1028
|
interface MenuLinkItemProps extends Omit<Menu$1.LinkItem.Props, 'className'>, ItemSlots {
|
|
1022
1029
|
className?: string | undefined;
|
|
1023
1030
|
}
|
|
@@ -1025,7 +1032,7 @@ interface MenuLinkItemProps extends Omit<Menu$1.LinkItem.Props, 'className'>, It
|
|
|
1025
1032
|
* An item that navigates: renders an `<a href>`. Closes the menu when chosen, like `Menu.Item`: with client-side
|
|
1026
1033
|
* routing the page stays mounted, so an open menu would sit over the new page. Pass `closeOnClick={false}` to keep it.
|
|
1027
1034
|
*/
|
|
1028
|
-
declare function LinkItem({ icon, trailing, tone, className, closeOnClick, children, ...rest }: MenuLinkItemProps): react.JSX.Element;
|
|
1035
|
+
declare function LinkItem({ icon, description, trailing, tone, className, closeOnClick, children, 'aria-labelledby': labelledBy, 'aria-describedby': describedBy, ...rest }: MenuLinkItemProps): react.JSX.Element;
|
|
1029
1036
|
interface MenuCheckboxItemProps extends Omit<Menu$1.CheckboxItem.Props, 'className' | 'onCheckedChange'> {
|
|
1030
1037
|
/** Called with the next checked state. */
|
|
1031
1038
|
onCheckedChange?: ((checked: boolean) => void) | undefined;
|
|
@@ -3352,5 +3359,5 @@ declare function AvatarButton({ label, name, initials, src, size, type, classNam
|
|
|
3352
3359
|
|
|
3353
3360
|
declare const version = "0.1.1";
|
|
3354
3361
|
|
|
3355
|
-
export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarButton, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, FileInput, FilePreviewDialog, FilterIcon, FlagIcon, FullScreenFlow, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Popover, PriorityNav, Progress$1 as Progress, Quote, ReasonList, RefreshIcon, Score, SearchIcon, Select, SelectionBar, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toast, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, WordDiff, XIcon, avatarInitials, iconNames, useRowSelection, useToast, version };
|
|
3362
|
+
export { ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarButton, Badge, Banner, BellIcon, BriefcaseIcon, BroomIcon, Button, CalendarIcon, Card, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, CircleCheckIcon, CircleXIcon, ClockIcon, CopyIcon, Dialog, Disclosure, DocumentIcon, DownloadIcon, EditIcon, EmptyState, ExternalLinkIcon, EyeIcon, EyeOffIcon, FileInput, FilePreviewDialog, FilterIcon, FlagIcon, FullScreenFlow, Heading, Icon, IconButton, InboxIcon, InfoIcon, Inline, Input, Kbd, LinkIcon, MailIcon, MapPinIcon, Menu, MenuIcon, MinusIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, PauseIcon, PlayIcon, PlusIcon, Popover, PriorityNav, Progress$1 as Progress, Quote, ReasonList, RefreshIcon, Score, SearchIcon, Select, SelectionBar, SettingsIcon, Skeleton, Spinner, Stack, StarIcon, Stat, SunIcon, Switch, Table, Tabs, Text, Textarea, ThumbsDownIcon, ThumbsUpIcon, Toast, Toolbar, Tooltip, TrashIcon, UndoIcon, UserIcon, WarningIcon, WordDiff, XIcon, avatarInitials, iconNames, useRowSelection, useToast, version };
|
|
3356
3363
|
export type { AvatarButtonProps, AvatarProps, AvatarSize, BadgeProps, BadgeSize, BadgeTone, BadgeVariant, BannerProps, BannerTone, BroomIconProps, ButtonProps, ButtonSize, ButtonVariant, CardElement, CardPadding, CardProps, CardVariant, CheckboxProps, ChipProps, ChipSize, ChipTone, ControlSize, DialogActionsProps, DialogBodyProps, DialogCloseProps, DialogCloseRequestReason, DialogContentProps, DialogDescriptionProps, DialogRootProps, DialogSize, DialogTitleProps, DialogVariant, DisclosureProps, EmptyStateElement, EmptyStateProps, EmptyStateSize, FieldProps, FileInputProps, FilePreviewDialogProps, FlowChapter, FlowCloseRequestReason, FlowDirection, FullScreenFlowBodyProps, FullScreenFlowFooterProps, FullScreenFlowHeaderProps, FullScreenFlowProgressProps, FullScreenFlowRailGroupProps, FullScreenFlowRailItemProps, FullScreenFlowRailProps, FullScreenFlowRootProps, FullScreenFlowStepProps, FullScreenFlowViewportProps, HeadingElement, HeadingLevel, HeadingProps, HeadingSize, IconButtonDotTone, IconButtonProps, IconGlyphProps, IconName, IconProps, IconSize, InlineAlign, InlineElement, InlineJustify, InlineProps, InputProps, KbdGroupProps, KbdProps, MenuAlign, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemProps, MenuItemTone, MenuLinkItemProps, MenuRadioGroupProps, MenuRadioItemProps, MenuRootProps, MenuSeparatorProps, MenuSide, MenuTriggerProps, PopoverAlign, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverRootProps, PopoverSide, PopoverTitleProps, PopoverTriggerProps, PriorityNavItem, PriorityNavLinkProps, PriorityNavProps, ProgressProps, ProgressSize, ProgressTone, ProgressVariant, QuoteProps, ReasonListItemProps, ReasonListProps, ReasonListSize, ReasonTone, RowSelection, RowSelectionHeaderState, ScoreProps, ScoreSize, ScoreTone, ScoreVariant, SelectGroup, SelectOption, SelectProps, SelectionBarProps, SkeletonProps, SkeletonVariant, SpacingSize, SpinnerProps, StackAlign, StackElement, StackJustify, StackProps, StatDeltaTone, StatElement, StatProps, StatSize, StatTrend, StatVariant, SwitchProps, TableAlign, TableBodyProps, TableCaptionProps, TableCellProps, TableDensity, TableFootProps, TableHeadProps, TableHeaderProps, TableRootProps, TableRowProps, TableSelectionCellProps, TableSelectionHeaderProps, TableSortDirection, TabsListProps, TabsListVariant, TabsPanelProps, TabsRootProps, TabsTabProps, TextAlign, TextElement, TextFamily, TextProps, TextSize, TextTone, TextWeight, TextareaProps, TextareaVariant, ToastApi, ToastOptions, ToastProviderProps, ToastTone, ToolbarButtonProps, ToolbarGroupProps, ToolbarLinkProps, ToolbarRootProps, ToolbarSeparatorProps, ToolbarSpacerProps, TooltipAlign, TooltipProps, TooltipSide, WordDiffElement, WordDiffKind, WordDiffPart, WordDiffProps, WordDiffSize };
|
package/dist/index.js
CHANGED
|
@@ -431,6 +431,14 @@ function EyeIcon(props) {
|
|
|
431
431
|
/* @__PURE__ */ jsx5("circle", { cx: "8", cy: "8", r: "2" })
|
|
432
432
|
] });
|
|
433
433
|
}
|
|
434
|
+
function EyeOffIcon(props) {
|
|
435
|
+
return /* @__PURE__ */ jsxs4(Icon, { ...props, children: [
|
|
436
|
+
/* @__PURE__ */ jsx5("path", { d: "M6.37 3.99C6.87 3.84 7.42 3.75 8 3.75C12 3.75 14.25 8 14.25 8C14.25 8 13.65 9.13 12.53 10.22" }),
|
|
437
|
+
/* @__PURE__ */ jsx5("path", { d: "M9.63 12.01C9.13 12.16 8.58 12.25 8 12.25C4 12.25 1.75 8 1.75 8C1.75 8 2.35 6.87 3.47 5.78" }),
|
|
438
|
+
/* @__PURE__ */ jsx5("path", { d: "M9.41 9.41A2 2 0 0 1 6.59 6.59" }),
|
|
439
|
+
/* @__PURE__ */ jsx5("path", { d: "M2.5 2.5l11 11" })
|
|
440
|
+
] });
|
|
441
|
+
}
|
|
434
442
|
function FilterIcon(props) {
|
|
435
443
|
return /* @__PURE__ */ jsx5(Icon, { ...props, children: /* @__PURE__ */ jsx5("path", { d: "M2.5 3h11l-4.25 5v4.25L6.75 13.5V8z" }) });
|
|
436
444
|
}
|
|
@@ -696,6 +704,7 @@ var iconNames = [
|
|
|
696
704
|
"edit",
|
|
697
705
|
"external-link",
|
|
698
706
|
"eye",
|
|
707
|
+
"eye-off",
|
|
699
708
|
"filter",
|
|
700
709
|
"flag",
|
|
701
710
|
"inbox",
|
|
@@ -819,6 +828,7 @@ function IconButton({
|
|
|
819
828
|
|
|
820
829
|
// src/components/Menu/Menu.tsx
|
|
821
830
|
import { Menu as BaseMenu } from "@base-ui/react/menu";
|
|
831
|
+
import { useId } from "react";
|
|
822
832
|
import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
823
833
|
function Root2({ open, defaultOpen, onOpenChange, disabled, modal = true, children }) {
|
|
824
834
|
return /* @__PURE__ */ jsx9(
|
|
@@ -854,37 +864,73 @@ function Content2({
|
|
|
854
864
|
}) {
|
|
855
865
|
return /* @__PURE__ */ jsx9(BaseMenu.Portal, { children: /* @__PURE__ */ jsx9(BaseMenu.Positioner, { side, align, sideOffset, className: "sc-menu__positioner", children: /* @__PURE__ */ jsx9(BaseMenu.Popup, { className: cx("sc-menu", className), ...rest, children }) }) });
|
|
856
866
|
}
|
|
857
|
-
function
|
|
867
|
+
function useItemBody({
|
|
858
868
|
icon,
|
|
869
|
+
description,
|
|
859
870
|
trailing,
|
|
860
871
|
children
|
|
861
|
-
}) {
|
|
862
|
-
|
|
872
|
+
}, aria) {
|
|
873
|
+
const id = useId();
|
|
874
|
+
const hasDescription = description !== void 0 && description !== null && description !== false;
|
|
875
|
+
const hasTrailing = trailing !== void 0;
|
|
876
|
+
const join = (...ids) => ids.filter(Boolean).join(" ") || void 0;
|
|
877
|
+
const body = /* @__PURE__ */ jsxs8(Fragment3, { children: [
|
|
863
878
|
/* @__PURE__ */ jsx9("span", { className: "sc-menu__icon", "aria-hidden": "true", children: icon }),
|
|
864
|
-
/* @__PURE__ */ jsx9("span", { className: "sc-menu__label", children }),
|
|
865
|
-
|
|
879
|
+
/* @__PURE__ */ jsx9("span", { className: "sc-menu__label", id: hasDescription ? `${id}-label` : void 0, children }),
|
|
880
|
+
hasDescription ? /* @__PURE__ */ jsx9("span", { className: "sc-menu__description", id: `${id}-description`, children: description }) : null,
|
|
881
|
+
hasTrailing ? /* @__PURE__ */ jsx9("span", { className: "sc-menu__trailing", id: hasDescription ? `${id}-trailing` : void 0, children: trailing }) : null
|
|
866
882
|
] });
|
|
883
|
+
if (!hasDescription) return [body, aria];
|
|
884
|
+
return [
|
|
885
|
+
body,
|
|
886
|
+
{
|
|
887
|
+
"aria-labelledby": aria["aria-labelledby"] ?? join(`${id}-label`, hasTrailing && `${id}-trailing`),
|
|
888
|
+
"aria-describedby": join(aria["aria-describedby"], `${id}-description`)
|
|
889
|
+
}
|
|
890
|
+
];
|
|
867
891
|
}
|
|
868
|
-
function Item({
|
|
869
|
-
|
|
892
|
+
function Item({
|
|
893
|
+
icon,
|
|
894
|
+
description,
|
|
895
|
+
trailing,
|
|
896
|
+
tone = "default",
|
|
897
|
+
className,
|
|
898
|
+
children,
|
|
899
|
+
"aria-labelledby": labelledBy,
|
|
900
|
+
"aria-describedby": describedBy,
|
|
901
|
+
...rest
|
|
902
|
+
}) {
|
|
903
|
+
const [body, aria] = useItemBody(
|
|
904
|
+
{ icon, description, trailing, children },
|
|
905
|
+
{ "aria-labelledby": labelledBy, "aria-describedby": describedBy }
|
|
906
|
+
);
|
|
907
|
+
return /* @__PURE__ */ jsx9(BaseMenu.Item, { className: cx("sc-menu__item", className), "data-tone": tone, ...aria, ...rest, children: body });
|
|
870
908
|
}
|
|
871
909
|
function LinkItem({
|
|
872
910
|
icon,
|
|
911
|
+
description,
|
|
873
912
|
trailing,
|
|
874
913
|
tone = "default",
|
|
875
914
|
className,
|
|
876
915
|
closeOnClick = true,
|
|
877
916
|
children,
|
|
917
|
+
"aria-labelledby": labelledBy,
|
|
918
|
+
"aria-describedby": describedBy,
|
|
878
919
|
...rest
|
|
879
920
|
}) {
|
|
921
|
+
const [body, aria] = useItemBody(
|
|
922
|
+
{ icon, description, trailing, children },
|
|
923
|
+
{ "aria-labelledby": labelledBy, "aria-describedby": describedBy }
|
|
924
|
+
);
|
|
880
925
|
return /* @__PURE__ */ jsx9(
|
|
881
926
|
BaseMenu.LinkItem,
|
|
882
927
|
{
|
|
883
928
|
className: cx("sc-menu__item", className),
|
|
884
929
|
"data-tone": tone,
|
|
885
930
|
closeOnClick,
|
|
931
|
+
...aria,
|
|
886
932
|
...rest,
|
|
887
|
-
children:
|
|
933
|
+
children: body
|
|
888
934
|
}
|
|
889
935
|
);
|
|
890
936
|
}
|
|
@@ -1230,7 +1276,7 @@ function Select({
|
|
|
1230
1276
|
|
|
1231
1277
|
// src/components/Checkbox/Checkbox.tsx
|
|
1232
1278
|
import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
|
|
1233
|
-
import { useId } from "react";
|
|
1279
|
+
import { useId as useId2 } from "react";
|
|
1234
1280
|
import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1235
1281
|
function Checkbox({
|
|
1236
1282
|
label,
|
|
@@ -1240,7 +1286,7 @@ function Checkbox({
|
|
|
1240
1286
|
disabled,
|
|
1241
1287
|
...rest
|
|
1242
1288
|
}) {
|
|
1243
|
-
const descriptionId =
|
|
1289
|
+
const descriptionId = useId2();
|
|
1244
1290
|
return /* @__PURE__ */ jsxs12("div", { className: cx("sc-choice", className), "data-disabled": disabled || void 0, children: [
|
|
1245
1291
|
/* @__PURE__ */ jsxs12("label", { className: "sc-choice__control", children: [
|
|
1246
1292
|
/* @__PURE__ */ jsx14(
|
|
@@ -1265,7 +1311,7 @@ function Checkbox({
|
|
|
1265
1311
|
|
|
1266
1312
|
// src/components/Switch/Switch.tsx
|
|
1267
1313
|
import { Switch as BaseSwitch } from "@base-ui/react/switch";
|
|
1268
|
-
import { useId as
|
|
1314
|
+
import { useId as useId3 } from "react";
|
|
1269
1315
|
import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1270
1316
|
function Switch({
|
|
1271
1317
|
label,
|
|
@@ -1276,7 +1322,7 @@ function Switch({
|
|
|
1276
1322
|
disabled,
|
|
1277
1323
|
...rest
|
|
1278
1324
|
}) {
|
|
1279
|
-
const descriptionId =
|
|
1325
|
+
const descriptionId = useId3();
|
|
1280
1326
|
return /* @__PURE__ */ jsxs13(
|
|
1281
1327
|
"div",
|
|
1282
1328
|
{
|
|
@@ -2310,7 +2356,7 @@ function Skeleton({
|
|
|
2310
2356
|
}
|
|
2311
2357
|
|
|
2312
2358
|
// src/components/FileInput/FileInput.tsx
|
|
2313
|
-
import { useEffect as useEffect4, useId as
|
|
2359
|
+
import { useEffect as useEffect4, useId as useId4, useRef as useRef4, useState as useState6 } from "react";
|
|
2314
2360
|
|
|
2315
2361
|
// src/components/FilePreviewDialog/FilePreviewDialog.tsx
|
|
2316
2362
|
import { useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
|
|
@@ -2575,7 +2621,7 @@ function FileInput({
|
|
|
2575
2621
|
browseLabel = "browse",
|
|
2576
2622
|
preview = true
|
|
2577
2623
|
}) {
|
|
2578
|
-
const id =
|
|
2624
|
+
const id = useId4();
|
|
2579
2625
|
const labelId = `${id}label`;
|
|
2580
2626
|
const descriptionId = `${id}description`;
|
|
2581
2627
|
const messagesId = `${id}messages`;
|
|
@@ -2923,7 +2969,7 @@ function FileInput({
|
|
|
2923
2969
|
// src/components/PriorityNav/PriorityNav.tsx
|
|
2924
2970
|
import {
|
|
2925
2971
|
useEffect as useEffect5,
|
|
2926
|
-
useId as
|
|
2972
|
+
useId as useId5,
|
|
2927
2973
|
useLayoutEffect as useLayoutEffect2,
|
|
2928
2974
|
useRef as useRef5,
|
|
2929
2975
|
useState as useState7
|
|
@@ -3018,7 +3064,7 @@ function PriorityNav({
|
|
|
3018
3064
|
const current = items.findIndex((item) => item.current);
|
|
3019
3065
|
const [fit, setFit] = useState7({ signature: null, current: -1, count: 0, overflowing: false });
|
|
3020
3066
|
const [open, setOpen] = useState7(false);
|
|
3021
|
-
const panelId =
|
|
3067
|
+
const panelId = useId5();
|
|
3022
3068
|
const listRef = useRef5(null);
|
|
3023
3069
|
const moreRef = useRef5(null);
|
|
3024
3070
|
const toggleRef = useRef5(null);
|
|
@@ -3354,7 +3400,7 @@ import {
|
|
|
3354
3400
|
useCallback as useCallback3,
|
|
3355
3401
|
useContext as useContext3,
|
|
3356
3402
|
useEffect as useEffect6,
|
|
3357
|
-
useId as
|
|
3403
|
+
useId as useId6,
|
|
3358
3404
|
useMemo as useMemo3,
|
|
3359
3405
|
useRef as useRef6,
|
|
3360
3406
|
useState as useState8
|
|
@@ -3508,7 +3554,7 @@ function Rail({
|
|
|
3508
3554
|
] });
|
|
3509
3555
|
}
|
|
3510
3556
|
function RailGroup({ label, className, children, ...rest }) {
|
|
3511
|
-
const id =
|
|
3557
|
+
const id = useId6();
|
|
3512
3558
|
return /* @__PURE__ */ jsxs29("div", { className: cx("sc-flow__rail-group", className), ...rest, children: [
|
|
3513
3559
|
/* @__PURE__ */ jsx34("span", { className: "sc-flow__rail-label", id, children: label }),
|
|
3514
3560
|
/* @__PURE__ */ jsx34("ol", { className: "sc-flow__rail-list", "aria-labelledby": id, children })
|
|
@@ -3630,7 +3676,7 @@ function Step({
|
|
|
3630
3676
|
children,
|
|
3631
3677
|
...rest
|
|
3632
3678
|
}) {
|
|
3633
|
-
const id =
|
|
3679
|
+
const id = useId6();
|
|
3634
3680
|
const titleRef = useRef6(null);
|
|
3635
3681
|
const phase = useContext3(FrameContext);
|
|
3636
3682
|
const { announce } = useContext3(FlowContext);
|
|
@@ -3897,6 +3943,7 @@ export {
|
|
|
3897
3943
|
EmptyState,
|
|
3898
3944
|
ExternalLinkIcon,
|
|
3899
3945
|
EyeIcon,
|
|
3946
|
+
EyeOffIcon,
|
|
3900
3947
|
FileInput,
|
|
3901
3948
|
FilePreviewDialog,
|
|
3902
3949
|
FilterIcon,
|