@passui/react 0.1.19 → 0.1.20

package/src/icons/icons.tsx

@@ -179,7 +179,7 @@ function icon(svg: IconSvgElement, displayName: string) {
 
 /** A filled variant for toggled states (hearted, starred). */
 function toggleIcon(svg: IconSvgElement, displayName: string) {
-    const Base = icon(svg, displayName)
+    const Base = /* @__PURE__ */ icon(svg, displayName)
     const Icon = ({ filled = false, className, ...props }: IconProps & { filled?: boolean }) => (
         <Base className={cn(filled && "[&_path]:fill-current", className)} {...props} />
     )
@@ -189,156 +189,156 @@ function toggleIcon(svg: IconSvgElement, displayName: string) {
 
 /** Existing catalog glyphs rendered through PassUI's common icon contract. */
 export const catalogIcons = {
-    tap: icon(CatalogTapGlyph, "CatalogTapIcon"),
-    settings: icon(CatalogSettingsGlyph, "CatalogSettingsIcon"),
-    tag: icon(CatalogTagGlyph, "CatalogTagIcon"),
-    input: icon(CatalogInputTextGlyph, "CatalogInputIcon"),
-    password: icon(CatalogPasswordGlyph, "CatalogPasswordIcon"),
-    search: icon(CatalogSearchGlyph, "CatalogSearchIcon"),
-    toggle: icon(CatalogToggleGlyph, "CatalogToggleIcon"),
-    columns: icon(CatalogColumnsGlyph, "CatalogColumnsIcon"),
-    unfold: icon(CatalogUnfoldGlyph, "CatalogUnfoldIcon"),
-    colors: icon(CatalogColorsGlyph, "CatalogColorsIcon"),
-    calendar: icon(CatalogCalendarGlyph, "CatalogCalendarIcon"),
-    clock: icon(CatalogClockGlyph, "CatalogClockIcon"),
-    text: icon(CatalogTextGlyph, "CatalogTextIcon"),
-    searchList: icon(CatalogSearchListGlyph, "CatalogSearchListIcon"),
-    list: icon(CatalogListGlyph, "CatalogListIcon"),
-    label: icon(CatalogLabelGlyph, "CatalogLabelIcon"),
-    table: icon(CatalogTableGlyph, "CatalogTableIcon"),
-    cards: icon(CatalogCardsGlyph, "CatalogCardsIcon"),
-    message: icon(CatalogMessageGlyph, "CatalogMessageIcon"),
-    sun: icon(CatalogSunGlyph, "CatalogSunIcon"),
-    status: icon(CatalogStatusGlyph, "CatalogStatusIcon"),
-    analytics: icon(CatalogAnalyticsGlyph, "CatalogAnalyticsIcon"),
-    alert: icon(CatalogAlertGlyph, "CatalogAlertIcon"),
-    panel: icon(CatalogPanelGlyph, "CatalogPanelIcon"),
-    bubble: icon(CatalogBubbleGlyph, "CatalogBubbleIcon"),
-    notification: icon(CatalogNotificationGlyph, "CatalogNotificationIcon"),
-    menu: icon(CatalogMenuGlyph, "CatalogMenuIcon"),
-    help: icon(CatalogHelpGlyph, "CatalogHelpIcon"),
-    translate: icon(CatalogTranslateGlyph, "CatalogTranslateIcon"),
-    layoutTop: icon(CatalogLayoutTopGlyph, "CatalogLayoutTopIcon"),
-    layoutBottom: icon(CatalogLayoutBottomGlyph, "CatalogLayoutBottomIcon"),
-    sidebar: icon(CatalogSidebarGlyph, "CatalogSidebarIcon"),
-    browser: icon(CatalogBrowserGlyph, "CatalogBrowserIcon"),
-    user: icon(CatalogUserGlyph, "CatalogUserIcon"),
+    tap: /* @__PURE__ */ icon(CatalogTapGlyph, "CatalogTapIcon"),
+    settings: /* @__PURE__ */ icon(CatalogSettingsGlyph, "CatalogSettingsIcon"),
+    tag: /* @__PURE__ */ icon(CatalogTagGlyph, "CatalogTagIcon"),
+    input: /* @__PURE__ */ icon(CatalogInputTextGlyph, "CatalogInputIcon"),
+    password: /* @__PURE__ */ icon(CatalogPasswordGlyph, "CatalogPasswordIcon"),
+    search: /* @__PURE__ */ icon(CatalogSearchGlyph, "CatalogSearchIcon"),
+    toggle: /* @__PURE__ */ icon(CatalogToggleGlyph, "CatalogToggleIcon"),
+    columns: /* @__PURE__ */ icon(CatalogColumnsGlyph, "CatalogColumnsIcon"),
+    unfold: /* @__PURE__ */ icon(CatalogUnfoldGlyph, "CatalogUnfoldIcon"),
+    colors: /* @__PURE__ */ icon(CatalogColorsGlyph, "CatalogColorsIcon"),
+    calendar: /* @__PURE__ */ icon(CatalogCalendarGlyph, "CatalogCalendarIcon"),
+    clock: /* @__PURE__ */ icon(CatalogClockGlyph, "CatalogClockIcon"),
+    text: /* @__PURE__ */ icon(CatalogTextGlyph, "CatalogTextIcon"),
+    searchList: /* @__PURE__ */ icon(CatalogSearchListGlyph, "CatalogSearchListIcon"),
+    list: /* @__PURE__ */ icon(CatalogListGlyph, "CatalogListIcon"),
+    label: /* @__PURE__ */ icon(CatalogLabelGlyph, "CatalogLabelIcon"),
+    table: /* @__PURE__ */ icon(CatalogTableGlyph, "CatalogTableIcon"),
+    cards: /* @__PURE__ */ icon(CatalogCardsGlyph, "CatalogCardsIcon"),
+    message: /* @__PURE__ */ icon(CatalogMessageGlyph, "CatalogMessageIcon"),
+    sun: /* @__PURE__ */ icon(CatalogSunGlyph, "CatalogSunIcon"),
+    status: /* @__PURE__ */ icon(CatalogStatusGlyph, "CatalogStatusIcon"),
+    analytics: /* @__PURE__ */ icon(CatalogAnalyticsGlyph, "CatalogAnalyticsIcon"),
+    alert: /* @__PURE__ */ icon(CatalogAlertGlyph, "CatalogAlertIcon"),
+    panel: /* @__PURE__ */ icon(CatalogPanelGlyph, "CatalogPanelIcon"),
+    bubble: /* @__PURE__ */ icon(CatalogBubbleGlyph, "CatalogBubbleIcon"),
+    notification: /* @__PURE__ */ icon(CatalogNotificationGlyph, "CatalogNotificationIcon"),
+    menu: /* @__PURE__ */ icon(CatalogMenuGlyph, "CatalogMenuIcon"),
+    help: /* @__PURE__ */ icon(CatalogHelpGlyph, "CatalogHelpIcon"),
+    translate: /* @__PURE__ */ icon(CatalogTranslateGlyph, "CatalogTranslateIcon"),
+    layoutTop: /* @__PURE__ */ icon(CatalogLayoutTopGlyph, "CatalogLayoutTopIcon"),
+    layoutBottom: /* @__PURE__ */ icon(CatalogLayoutBottomGlyph, "CatalogLayoutBottomIcon"),
+    sidebar: /* @__PURE__ */ icon(CatalogSidebarGlyph, "CatalogSidebarIcon"),
+    browser: /* @__PURE__ */ icon(CatalogBrowserGlyph, "CatalogBrowserIcon"),
+    user: /* @__PURE__ */ icon(CatalogUserGlyph, "CatalogUserIcon"),
 } as const
 
-export const NoteIcon = icon(Note01Icon, "NoteIcon")
-export const LanguageIcon = icon(LanguagesIcon, "LanguageIcon")
-export const SignOutIcon = icon(Logout01Icon, "SignOutIcon")
-export const MoreVerticalIcon = icon(MoreVertical, "MoreVerticalIcon")
-export const SendIcon = icon(SentIcon, "SendIcon")
-export const InboxIcon = icon(InboxGlyph, "InboxIcon")
-export const LaptopIcon = icon(LaptopGlyph, "LaptopIcon")
-export const SmartphoneIcon = icon(SmartPhone01Icon, "SmartphoneIcon")
-export const TabletIcon = icon(Tablet01Icon, "TabletIcon")
-export const HomeIcon = icon(Home01Icon, "HomeIcon")
-export const LibraryIcon = icon(LibraryGlyph, "LibraryIcon")
-export const PersonIcon = icon(UserIcon, "PersonIcon")
-export const ChartIcon = icon(Analytics01Icon, "ChartIcon")
-export const SupportIcon = icon(CustomerSupportIcon, "SupportIcon")
-export const KeyIcon = icon(Key01Icon, "KeyIcon")
-export const PasswordIcon = icon(LockPasswordIcon, "PasswordIcon")
-export const JournalIcon = icon(NotebookIcon, "JournalIcon")
-export const PenIcon = icon(PencilEdit02Icon, "PenIcon")
-export const StoryIcon = icon(QuillWrite02Icon, "StoryIcon")
-export const BookIcon = icon(BookOpen01Icon, "BookIcon")
-export const ArticleIcon = icon(Book02Icon, "ArticleIcon")
-export const CanvasIcon = icon(HugeCanvasIcon, "CanvasIcon")
-export const LessonIcon = icon(Mortarboard01Icon, "LessonIcon")
-export const PlanIcon = icon(CheckListIcon, "PlanIcon")
-export const MicIcon = icon(Mic01Icon, "MicIcon")
-export const GlobeIcon = icon(Globe02Icon, "GlobeIcon")
-export const ChecklistIcon = icon(CheckmarkCircle02Icon, "ChecklistIcon")
-export const DrawIcon = icon(PencilIcon, "DrawIcon")
-export const ShareIcon = icon(Share08Icon, "ShareIcon")
-export const SearchIcon = icon(Search01Icon, "SearchIcon")
-export const ChevronLeftIcon = icon(ArrowLeft01Icon, "ChevronLeftIcon")
-export const ChevronRightIcon = icon(ArrowRight01Icon, "ChevronRightIcon")
-export const ChevronUpIcon = icon(ArrowUp01Icon, "ChevronUpIcon")
-export const ChevronDownIcon = icon(ArrowDown01Icon, "ChevronDownIcon")
-export const CloseIcon = icon(Cancel01Icon, "CloseIcon")
-export const MenuIcon = icon(Menu01Icon, "MenuIcon")
-export const ThemingIcon = icon(GuidePaintGlyph, "ThemingIcon")
-export const TypesetIcon = icon(GuideTextGlyph, "TypesetIcon")
-export const LayersIcon = icon(GuideLayersGlyph, "LayersIcon")
-export const UploadIcon = icon(UploadGlyph, "UploadIcon")
-export const AttachIcon = icon(AttachGlyph, "AttachIcon")
-export const PlusIcon = icon(Add01Icon, "PlusIcon")
-export const LinkIcon = icon(Link01Icon, "LinkIcon")
-export const CommentIcon = icon(Comment01Icon, "CommentIcon")
-export const TrashIcon = icon(Delete02Icon, "TrashIcon")
-export const PinIcon = icon(Pin02Icon, "PinIcon")
-export const SidebarIcon = icon(PanelLeftIcon, "SidebarIcon")
-export const SettingsIcon = icon(Settings02Icon, "SettingsIcon")
-export const DragHandleIcon = icon(DragDropVerticalIcon, "DragHandleIcon")
-export const VisibleIcon = icon(ViewIcon, "VisibleIcon")
-export const HiddenIcon = icon(ViewOffSlashIcon, "HiddenIcon")
-export const CheckIcon = icon(Tick02Icon, "CheckIcon")
-export const InvoiceIcon = icon(Invoice03Icon, "InvoiceIcon")
-export const QrCodeGlyph = icon(QrCodeIcon, "QrCodeGlyph")
-export const WalletIcon = icon(Wallet01Icon, "WalletIcon")
-export const ScanCodeIcon = icon(ScanIcon, "ScanCodeIcon")
-export const VerifiedIcon = icon(CheckmarkBadge01Icon, "VerifiedIcon")
-export const WarningIcon = icon(Alert02Icon, "WarningIcon")
-export const PrintIcon = icon(PrinterIcon, "PrintIcon")
-export const ImportIcon = icon(FileImportIcon, "ImportIcon")
-export const DownloadIcon = icon(Download01Icon, "DownloadIcon")
-export const PlayIcon = icon(HugePlayIcon, "PlayIcon")
-export const PauseIcon = icon(HugePauseIcon, "PauseIcon")
-export const SkipBackIcon = icon(GoBackward15SecIcon, "SkipBackIcon")
-export const SkipForwardIcon = icon(GoForward30SecIcon, "SkipForwardIcon")
-export const PreviousTrackIcon = icon(PreviousIcon, "PreviousTrackIcon")
-export const NextTrackIcon = icon(NextIcon, "NextTrackIcon")
-export const HeadphonesIcon = icon(HugeHeadphonesIcon, "HeadphonesIcon")
-export const HighlighterIcon = icon(HugeHighlighterIcon, "HighlighterIcon")
-export const ChaptersIcon = icon(LeftToRightListBulletIcon, "ChaptersIcon")
-export const SleepIcon = icon(Moon02Icon, "SleepIcon")
-export const ExpandIcon = icon(FullScreenIcon, "ExpandIcon")
-export const SparkleIcon = icon(AiMagicIcon, "SparkleIcon")
-export const BellIcon = icon(Notification03Icon, "BellIcon")
-export const BusinessIcon = icon(Store01Icon, "BusinessIcon")
-export const CalendarIcon = icon(Calendar03Icon, "CalendarIcon")
-export const BirthdayIcon = icon(BirthdayCakeIcon, "BirthdayIcon")
-export const AlarmIcon = icon(AlarmClockIcon, "AlarmIcon")
-export const RepeatIcon = icon(HugeRepeatIcon, "RepeatIcon")
-export const UndoIcon = icon(HugeUndoIcon, "UndoIcon")
-export const RedoIcon = icon(HugeRedoIcon, "RedoIcon")
-export const PointerIcon = icon(Cursor01Icon, "PointerIcon")
-export const EraserIcon = icon(Eraser01Icon, "EraserIcon")
-export const TouchIcon = icon(Touch01Icon, "TouchIcon")
-export const BubbleIcon = icon(BubbleChatIcon, "BubbleIcon")
-export const BrushIcon = icon(PaintBrush02Icon, "BrushIcon")
-export const LayoutIcon = icon(LayoutGridIcon, "LayoutIcon")
-export const ZoomIcon = icon(SearchAddIcon, "ZoomIcon")
-export const SelectorIcon = icon(UnfoldMoreIcon, "SelectorIcon")
-export const MoreIcon = icon(MoreHorizontalIcon, "MoreIcon")
-export const PeopleIcon = icon(UserMultipleIcon, "PeopleIcon")
-export const AddPersonIcon = icon(UserAdd01Icon, "AddPersonIcon")
-export const ClockIcon = icon(Clock01Icon, "ClockIcon")
-export const LocationIcon = icon(Location01Icon, "LocationIcon")
-export const TaskIcon = icon(Task01Icon, "TaskIcon")
-export const FolderIcon = icon(Folder01Icon, "FolderIcon")
-export const RecentIcon = icon(Time04Icon, "RecentIcon")
-export const ThumbsUpIcon = toggleIcon(HugeThumbsUpIcon, "ThumbsUpIcon")
-export const HeartIcon = toggleIcon(FavouriteIcon, "HeartIcon")
-export const StarIcon = toggleIcon(HugeStarIcon, "StarIcon")
+export const NoteIcon = /* @__PURE__ */ icon(Note01Icon, "NoteIcon")
+export const LanguageIcon = /* @__PURE__ */ icon(LanguagesIcon, "LanguageIcon")
+export const SignOutIcon = /* @__PURE__ */ icon(Logout01Icon, "SignOutIcon")
+export const MoreVerticalIcon = /* @__PURE__ */ icon(MoreVertical, "MoreVerticalIcon")
+export const SendIcon = /* @__PURE__ */ icon(SentIcon, "SendIcon")
+export const InboxIcon = /* @__PURE__ */ icon(InboxGlyph, "InboxIcon")
+export const LaptopIcon = /* @__PURE__ */ icon(LaptopGlyph, "LaptopIcon")
+export const SmartphoneIcon = /* @__PURE__ */ icon(SmartPhone01Icon, "SmartphoneIcon")
+export const TabletIcon = /* @__PURE__ */ icon(Tablet01Icon, "TabletIcon")
+export const HomeIcon = /* @__PURE__ */ icon(Home01Icon, "HomeIcon")
+export const LibraryIcon = /* @__PURE__ */ icon(LibraryGlyph, "LibraryIcon")
+export const PersonIcon = /* @__PURE__ */ icon(UserIcon, "PersonIcon")
+export const ChartIcon = /* @__PURE__ */ icon(Analytics01Icon, "ChartIcon")
+export const SupportIcon = /* @__PURE__ */ icon(CustomerSupportIcon, "SupportIcon")
+export const KeyIcon = /* @__PURE__ */ icon(Key01Icon, "KeyIcon")
+export const PasswordIcon = /* @__PURE__ */ icon(LockPasswordIcon, "PasswordIcon")
+export const JournalIcon = /* @__PURE__ */ icon(NotebookIcon, "JournalIcon")
+export const PenIcon = /* @__PURE__ */ icon(PencilEdit02Icon, "PenIcon")
+export const StoryIcon = /* @__PURE__ */ icon(QuillWrite02Icon, "StoryIcon")
+export const BookIcon = /* @__PURE__ */ icon(BookOpen01Icon, "BookIcon")
+export const ArticleIcon = /* @__PURE__ */ icon(Book02Icon, "ArticleIcon")
+export const CanvasIcon = /* @__PURE__ */ icon(HugeCanvasIcon, "CanvasIcon")
+export const LessonIcon = /* @__PURE__ */ icon(Mortarboard01Icon, "LessonIcon")
+export const PlanIcon = /* @__PURE__ */ icon(CheckListIcon, "PlanIcon")
+export const MicIcon = /* @__PURE__ */ icon(Mic01Icon, "MicIcon")
+export const GlobeIcon = /* @__PURE__ */ icon(Globe02Icon, "GlobeIcon")
+export const ChecklistIcon = /* @__PURE__ */ icon(CheckmarkCircle02Icon, "ChecklistIcon")
+export const DrawIcon = /* @__PURE__ */ icon(PencilIcon, "DrawIcon")
+export const ShareIcon = /* @__PURE__ */ icon(Share08Icon, "ShareIcon")
+export const SearchIcon = /* @__PURE__ */ icon(Search01Icon, "SearchIcon")
+export const ChevronLeftIcon = /* @__PURE__ */ icon(ArrowLeft01Icon, "ChevronLeftIcon")
+export const ChevronRightIcon = /* @__PURE__ */ icon(ArrowRight01Icon, "ChevronRightIcon")
+export const ChevronUpIcon = /* @__PURE__ */ icon(ArrowUp01Icon, "ChevronUpIcon")
+export const ChevronDownIcon = /* @__PURE__ */ icon(ArrowDown01Icon, "ChevronDownIcon")
+export const CloseIcon = /* @__PURE__ */ icon(Cancel01Icon, "CloseIcon")
+export const MenuIcon = /* @__PURE__ */ icon(Menu01Icon, "MenuIcon")
+export const ThemingIcon = /* @__PURE__ */ icon(GuidePaintGlyph, "ThemingIcon")
+export const TypesetIcon = /* @__PURE__ */ icon(GuideTextGlyph, "TypesetIcon")
+export const LayersIcon = /* @__PURE__ */ icon(GuideLayersGlyph, "LayersIcon")
+export const UploadIcon = /* @__PURE__ */ icon(UploadGlyph, "UploadIcon")
+export const AttachIcon = /* @__PURE__ */ icon(AttachGlyph, "AttachIcon")
+export const PlusIcon = /* @__PURE__ */ icon(Add01Icon, "PlusIcon")
+export const LinkIcon = /* @__PURE__ */ icon(Link01Icon, "LinkIcon")
+export const CommentIcon = /* @__PURE__ */ icon(Comment01Icon, "CommentIcon")
+export const TrashIcon = /* @__PURE__ */ icon(Delete02Icon, "TrashIcon")
+export const PinIcon = /* @__PURE__ */ icon(Pin02Icon, "PinIcon")
+export const SidebarIcon = /* @__PURE__ */ icon(PanelLeftIcon, "SidebarIcon")
+export const SettingsIcon = /* @__PURE__ */ icon(Settings02Icon, "SettingsIcon")
+export const DragHandleIcon = /* @__PURE__ */ icon(DragDropVerticalIcon, "DragHandleIcon")
+export const VisibleIcon = /* @__PURE__ */ icon(ViewIcon, "VisibleIcon")
+export const HiddenIcon = /* @__PURE__ */ icon(ViewOffSlashIcon, "HiddenIcon")
+export const CheckIcon = /* @__PURE__ */ icon(Tick02Icon, "CheckIcon")
+export const InvoiceIcon = /* @__PURE__ */ icon(Invoice03Icon, "InvoiceIcon")
+export const QrCodeGlyph = /* @__PURE__ */ icon(QrCodeIcon, "QrCodeGlyph")
+export const WalletIcon = /* @__PURE__ */ icon(Wallet01Icon, "WalletIcon")
+export const ScanCodeIcon = /* @__PURE__ */ icon(ScanIcon, "ScanCodeIcon")
+export const VerifiedIcon = /* @__PURE__ */ icon(CheckmarkBadge01Icon, "VerifiedIcon")
+export const WarningIcon = /* @__PURE__ */ icon(Alert02Icon, "WarningIcon")
+export const PrintIcon = /* @__PURE__ */ icon(PrinterIcon, "PrintIcon")
+export const ImportIcon = /* @__PURE__ */ icon(FileImportIcon, "ImportIcon")
+export const DownloadIcon = /* @__PURE__ */ icon(Download01Icon, "DownloadIcon")
+export const PlayIcon = /* @__PURE__ */ icon(HugePlayIcon, "PlayIcon")
+export const PauseIcon = /* @__PURE__ */ icon(HugePauseIcon, "PauseIcon")
+export const SkipBackIcon = /* @__PURE__ */ icon(GoBackward15SecIcon, "SkipBackIcon")
+export const SkipForwardIcon = /* @__PURE__ */ icon(GoForward30SecIcon, "SkipForwardIcon")
+export const PreviousTrackIcon = /* @__PURE__ */ icon(PreviousIcon, "PreviousTrackIcon")
+export const NextTrackIcon = /* @__PURE__ */ icon(NextIcon, "NextTrackIcon")
+export const HeadphonesIcon = /* @__PURE__ */ icon(HugeHeadphonesIcon, "HeadphonesIcon")
+export const HighlighterIcon = /* @__PURE__ */ icon(HugeHighlighterIcon, "HighlighterIcon")
+export const ChaptersIcon = /* @__PURE__ */ icon(LeftToRightListBulletIcon, "ChaptersIcon")
+export const SleepIcon = /* @__PURE__ */ icon(Moon02Icon, "SleepIcon")
+export const ExpandIcon = /* @__PURE__ */ icon(FullScreenIcon, "ExpandIcon")
+export const SparkleIcon = /* @__PURE__ */ icon(AiMagicIcon, "SparkleIcon")
+export const BellIcon = /* @__PURE__ */ icon(Notification03Icon, "BellIcon")
+export const BusinessIcon = /* @__PURE__ */ icon(Store01Icon, "BusinessIcon")
+export const CalendarIcon = /* @__PURE__ */ icon(Calendar03Icon, "CalendarIcon")
+export const BirthdayIcon = /* @__PURE__ */ icon(BirthdayCakeIcon, "BirthdayIcon")
+export const AlarmIcon = /* @__PURE__ */ icon(AlarmClockIcon, "AlarmIcon")
+export const RepeatIcon = /* @__PURE__ */ icon(HugeRepeatIcon, "RepeatIcon")
+export const UndoIcon = /* @__PURE__ */ icon(HugeUndoIcon, "UndoIcon")
+export const RedoIcon = /* @__PURE__ */ icon(HugeRedoIcon, "RedoIcon")
+export const PointerIcon = /* @__PURE__ */ icon(Cursor01Icon, "PointerIcon")
+export const EraserIcon = /* @__PURE__ */ icon(Eraser01Icon, "EraserIcon")
+export const TouchIcon = /* @__PURE__ */ icon(Touch01Icon, "TouchIcon")
+export const BubbleIcon = /* @__PURE__ */ icon(BubbleChatIcon, "BubbleIcon")
+export const BrushIcon = /* @__PURE__ */ icon(PaintBrush02Icon, "BrushIcon")
+export const LayoutIcon = /* @__PURE__ */ icon(LayoutGridIcon, "LayoutIcon")
+export const ZoomIcon = /* @__PURE__ */ icon(SearchAddIcon, "ZoomIcon")
+export const SelectorIcon = /* @__PURE__ */ icon(UnfoldMoreIcon, "SelectorIcon")
+export const MoreIcon = /* @__PURE__ */ icon(MoreHorizontalIcon, "MoreIcon")
+export const PeopleIcon = /* @__PURE__ */ icon(UserMultipleIcon, "PeopleIcon")
+export const AddPersonIcon = /* @__PURE__ */ icon(UserAdd01Icon, "AddPersonIcon")
+export const ClockIcon = /* @__PURE__ */ icon(Clock01Icon, "ClockIcon")
+export const LocationIcon = /* @__PURE__ */ icon(Location01Icon, "LocationIcon")
+export const TaskIcon = /* @__PURE__ */ icon(Task01Icon, "TaskIcon")
+export const FolderIcon = /* @__PURE__ */ icon(Folder01Icon, "FolderIcon")
+export const RecentIcon = /* @__PURE__ */ icon(Time04Icon, "RecentIcon")
+export const ThumbsUpIcon = /* @__PURE__ */ toggleIcon(HugeThumbsUpIcon, "ThumbsUpIcon")
+export const HeartIcon = /* @__PURE__ */ toggleIcon(FavouriteIcon, "HeartIcon")
+export const StarIcon = /* @__PURE__ */ toggleIcon(HugeStarIcon, "StarIcon")
 
 // Wallet: adding, copying and protecting cards.
-export const CameraIcon = icon(Camera01Icon, "CameraIcon")
-export const CopyIcon = icon(Copy01Icon, "CopyIcon")
-export const LockIcon = icon(LockIconSvg, "LockIcon")
-export const NfcReadIcon = icon(NfcIcon, "NfcReadIcon")
-export const PhotoIcon = icon(Image01Icon, "PhotoIcon")
-export const BookmarkIcon = icon(Bookmark02Icon, "BookmarkIcon")
-export const MailIcon = icon(Mail01Icon, "MailIcon")
-export const ReplyIcon = icon(MailReply01Icon, "ReplyIcon")
-export const ArchiveIcon = icon(Archive01Icon, "ArchiveIcon")
-export const InfoIcon = icon(InformationCircleIcon, "InfoIcon")
-export const AlignCenterIcon = icon(TextAlignCenterIcon, "AlignCenterIcon")
-export const AlignLeftIcon = icon(TextAlignLeftIcon, "AlignLeftIcon")
-export const BoldIcon = icon(TextBoldIcon, "BoldIcon")
-export const ItalicIcon = icon(TextItalicIcon, "ItalicIcon")
-export const UnderlineIcon = icon(TextUnderlineIcon, "UnderlineIcon")
+export const CameraIcon = /* @__PURE__ */ icon(Camera01Icon, "CameraIcon")
+export const CopyIcon = /* @__PURE__ */ icon(Copy01Icon, "CopyIcon")
+export const LockIcon = /* @__PURE__ */ icon(LockIconSvg, "LockIcon")
+export const NfcReadIcon = /* @__PURE__ */ icon(NfcIcon, "NfcReadIcon")
+export const PhotoIcon = /* @__PURE__ */ icon(Image01Icon, "PhotoIcon")
+export const BookmarkIcon = /* @__PURE__ */ icon(Bookmark02Icon, "BookmarkIcon")
+export const MailIcon = /* @__PURE__ */ icon(Mail01Icon, "MailIcon")
+export const ReplyIcon = /* @__PURE__ */ icon(MailReply01Icon, "ReplyIcon")
+export const ArchiveIcon = /* @__PURE__ */ icon(Archive01Icon, "ArchiveIcon")
+export const InfoIcon = /* @__PURE__ */ icon(InformationCircleIcon, "InfoIcon")
+export const AlignCenterIcon = /* @__PURE__ */ icon(TextAlignCenterIcon, "AlignCenterIcon")
+export const AlignLeftIcon = /* @__PURE__ */ icon(TextAlignLeftIcon, "AlignLeftIcon")
+export const BoldIcon = /* @__PURE__ */ icon(TextBoldIcon, "BoldIcon")
+export const ItalicIcon = /* @__PURE__ */ icon(TextItalicIcon, "ItalicIcon")
+export const UnderlineIcon = /* @__PURE__ */ icon(TextUnderlineIcon, "UnderlineIcon")

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./components/button/button"
+export * from "./components/accordion/accordion"
 export * from "./components/text-field/text-field"
 export * from "./components/secure-field/secure-field"
 export * from "./components/text-editor/text-editor"
@@ -84,3 +85,20 @@ export * from "./hooks/use-visual-viewport"
 export { registerFloatingLayer } from "./lib/floating-layers"
 
 export * from "./hooks/use-minimize-on-scroll"
+
+export * from "./components/code-block/code-block"
+export * from "./components/keyboard-shortcut/keyboard-shortcut"
+export * from "./components/content-unavailable-view/content-unavailable-view"
+export * from "./components/combo-box/combo-box"
+export * from "./components/radio-group/radio-group"
+export * from "./components/breadcrumb/breadcrumb"
+export * from "./components/skeleton/skeleton"
+
+export * from "./components/command/command"
+
+export * from "./components/slosh-slider/slosh-slider"
+export * from "./components/wake-slider/wake-slider"
+
+export * from "./components/one-time-code/one-time-code"
+
+export * from "./components/aspect-ratio/aspect-ratio"

package/src/lib/anchored-placement.ts

@@ -35,8 +35,10 @@ export function placeInViewport(
     { anchor, viewport, edges }: PlacementFrame,
     width: number,
     needed: number,
-    gap = 6
+    gap = 6,
+    overlap = false
 ): AnchoredPlacement {
+    if (overlap) gap = anchor.top - anchor.bottom
     const fitted = Math.min(width, viewport.width - edges.left - edges.right)
     const left = Math.min(Math.max(edges.left, anchor.left), viewport.width - fitted - edges.right)
     const roomBelow = viewport.height - anchor.bottom - gap - edges.bottom
@@ -58,7 +60,8 @@ export function placeAnchored(
     anchor: HTMLElement,
     width: number,
     needed: number,
-    gap = 6
+    gap = 6,
+    overlap = false
 ): AnchoredPlacement {
     const rect = anchor.getBoundingClientRect()
     const viewport = window.visualViewport
@@ -77,6 +80,7 @@ export function placeAnchored(
         },
         width,
         needed,
-        gap
+        gap,
+        overlap
     )
 }

package/src/styles/code-block.css

@@ -0,0 +1,33 @@
+@layer components {
+    .passui-code-block pre {
+        margin: 0;
+        padding-block: 1rem;
+        padding-inline-end: 1.5rem;
+        overflow-x: auto;
+        font-family: var(--font-mono);
+        font-size: var(--text-footnote);
+        line-height: 1.75;
+        color: var(--color-label);
+        background: transparent !important;
+        counter-reset: code-line;
+        tab-size: 4;
+    }
+    .passui-code-block .line { display: inline-block; min-width: 100%; }
+    .passui-code-block[data-line-numbers] .line::before {
+        counter-increment: code-line;
+        content: counter(code-line);
+        display: inline-block;
+        width: 3rem;
+        margin-inline-end: 1.25rem;
+        color: var(--color-label-tertiary);
+        text-align: end;
+        user-select: none;
+    }
+    .passui-code-block:not([data-line-numbers]) pre { padding-inline-start: 1rem; }
+    .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-light); background: transparent !important; }
+    @media (prefers-color-scheme: dark) {
+        .passui-code-block .shiki, .passui-code-block .shiki span { color: var(--shiki-dark); }
+    }
+    [data-theme="light"] .passui-code-block .shiki, [data-theme="light"] .passui-code-block .shiki span { color: var(--shiki-light); }
+    [data-theme="dark"] .passui-code-block .shiki, [data-theme="dark"] .passui-code-block .shiki span { color: var(--shiki-dark); }
+}

package/src/styles/motion-controls.css

@@ -0,0 +1,189 @@
+/* Slosh and Wake adapted from Bencho; see THIRD_PARTY_NOTICES.md.
+   Bencho ink/fill-on map to label; board/fill-slab to elevated; bg to
+   background; pane-edge to separator; font-ui to font-sans. Color mixes
+   replace rgba RGB triples, so no Bencho variables or new globals leak. */
+@layer components {
+    .passui-search-pill { transition: scale 90ms ease; }
+    .passui-search-pill:active { scale: 0.98; }
+    /* The outline stays whole; its legend opens a real gap under the label.
+       No painted background patch needs to match the field's surroundings. */
+    .passui-field-outline {
+        position: absolute;
+        inset: -0.45em 0 0;
+        min-width: 0;
+        margin: 0;
+        padding: 0 0.5rem;
+        border: 1px solid var(--color-separator);
+        border-radius: inherit;
+        pointer-events: none;
+        transition: border-color 200ms ease;
+    }
+    .passui-field-outline legend {
+        max-width: 0;
+        overflow: hidden;
+        padding: 0;
+        font-size: var(--text-footnote);
+        white-space: nowrap;
+        visibility: hidden;
+        transition: max-width 320ms ease, padding 320ms ease;
+    }
+    .passui-floating-label {
+        position: absolute;
+        inset-inline-start: 0.75rem;
+        top: 50%;
+        z-index: 1;
+        max-width: calc(100% - 1.5rem);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--color-label-secondary);
+        font-size: var(--text-body);
+        transform: translateY(-50%);
+        transform-origin: left center;
+        transition: top 320ms ease, transform 320ms ease, color 200ms ease;
+        pointer-events: none;
+    }
+    .passui-floating-label:dir(rtl) { transform-origin: right center; }
+    .passui-floating-label-with-icon { inset-inline-start: 2.5rem; }
+    .passui-floating-field input::placeholder { opacity: 0; }
+    .passui-floating-field:focus-within input::placeholder { opacity: 1; }
+    .passui-floating-field:focus-within .passui-field-outline { border-color: var(--color-label); }
+    .passui-floating-field:has(input[aria-invalid="true"]) .passui-field-outline { border-color: var(--color-danger); }
+    .passui-floating-field:is(:focus-within, :has(input:not(:placeholder-shown))) .passui-floating-label {
+        top: 0;
+        inset-inline-start: 0.75rem;
+        transform: translateY(-50%) scale(0.78);
+        color: var(--color-label);
+    }
+    .passui-floating-field:is(:focus-within, :has(input:not(:placeholder-shown))) legend {
+        max-width: 100%;
+        padding-inline: 0.25rem;
+    }
+    .passui-one-time-code { width: 100%; max-width: calc(var(--otp-length) * 2.5rem + (var(--otp-length) - 1) * 0.5rem); }
+    .passui-otp-row { position: relative; height: 3rem; }
+    .passui-otp-materials, .passui-otp-digits { display: flex; position: absolute; inset: 0; gap: 0.5rem; pointer-events: none; }
+    .passui-otp-cell, .passui-otp-digit { flex: 1; min-width: 0; border-radius: var(--radius-xl); }
+    .passui-otp-cell {
+        background: var(--color-fill);
+        transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms;
+    }
+    .passui-otp-digit { display: grid; place-items: center; font-size: var(--text-title3); color: var(--color-label); font-variant-numeric: tabular-nums; }
+    .passui-otp-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: text; }
+    .passui-one-time-code:focus-within .passui-otp-digit[data-active] { box-shadow: inset 0 0 0 2px var(--color-accent-text); }
+    .passui-otp-glyph { animation: passui-otp-in 200ms ease-out both; }
+    @keyframes passui-otp-in { from { transform: translateY(45%) scale(0.86); opacity: 0; filter: blur(3px); } }
+    .passui-otp-capsule { position: absolute; inset-block: 0; left: 50%; width: 60%; border-radius: var(--radius-full); background: var(--color-accent); transform: translateX(-50%) scaleX(0); opacity: 0; transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms; }
+    .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-cell { transform: translateX(calc((var(--otp-middle) - var(--otp-index)) * (100% + 0.5rem))); background: var(--color-accent); }
+    .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-capsule { opacity: 1; transform: translateX(-50%) scaleX(1); }
+    .passui-one-time-code:is([data-status="verifying"], [data-status="success"]) .passui-otp-digits { opacity: 0; }
+    .passui-otp-check { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--color-on-accent); opacity: 0; pointer-events: none; }
+    .passui-one-time-code[data-status="success"] .passui-otp-check { opacity: 1; transition: opacity 160ms 240ms; }
+    /* A wrong code shivers, then drains right to left. Selecting the single
+       input afterward lets the next keystroke replace it without a trap. */
+    .passui-one-time-code[data-status="error"] .passui-otp-digit { animation: passui-otp-shiver 380ms ease-out; }
+    .passui-one-time-code[data-status="error"] .passui-otp-glyph { animation: passui-otp-drain 220ms calc(380ms + (var(--otp-length) - var(--otp-index)) * 35ms) both; }
+    @keyframes passui-otp-shiver { 20% { transform: translateX(4px); } 40% { transform: translateX(-3px); } 60% { transform: translateX(2px); } 80% { transform: translateX(-1px); } }
+    @keyframes passui-otp-drain { to { transform: translateY(65%); opacity: 0; filter: blur(3px); } }
+    .passui-progress-fill {
+        clip-path: polygon(0 0, calc(100% + var(--progress-lean, 0px)) 0,
+            calc(100% - var(--progress-lean, 0px)) 100%, 0 100%);
+    }
+    .passui-slosh-slider {
+        width: 100%;
+        min-width: 0;
+        font-family: var(--font-sans);
+        color: var(--color-label);
+    }
+
+    /* No transitions: every geometry value is written by the loop, and
+       a transition on top of a spring is two opinions about one number. */
+    .passui-slosh-track {
+        position: relative;
+        height: 2.5rem;
+        border-radius: var(--slosh-radius, var(--radius-full));
+        /* Opaque, mixed from the surface's own pair. A translucent wash
+           changes with the stage behind it and can disappear in dark mode. */
+        background: color-mix(in srgb, var(--color-label) 11%, var(--color-elevated));
+        overflow: hidden;
+        cursor: ew-resize;
+        touch-action: pan-y;
+    }
+    .passui-slosh-track[aria-disabled="true"],
+    .passui-wake-track[aria-disabled="true"] { cursor: not-allowed; }
+    .passui-slosh-track:focus-visible,
+    .passui-wake-track:focus-visible {
+        outline: 2px solid var(--color-accent-text);
+        outline-offset: 4px;
+    }
+    .passui-slosh-fill {
+        position: absolute;
+        inset-block: 0;
+        inset-inline-start: 0;
+        background: light-dark(var(--color-elevated), color-mix(in srgb, var(--color-label) 15%, var(--color-elevated)));
+        /* Clipped, never skewed: a skew lifts the whole body off the floor;
+           a meniscus leans only the moving edge. The track clips end stops. */
+        clip-path: polygon(0 0, calc(100% + var(--slosh-lean, 0px)) 0,
+            calc(100% - var(--slosh-lean, 0px)) 100%, 0 100%);
+    }
+    .passui-slosh-track:dir(rtl) .passui-slosh-fill { transform: scaleX(-1); }
+    .passui-slosh-knob {
+        position: absolute;
+        top: 6px;
+        bottom: 6px;
+        width: 3px;
+        margin-inline-start: -1.5px;
+        border-radius: var(--radius-full);
+        background: var(--color-label);
+        pointer-events: none;
+    }
+    /* Each bar holds energy. Its height is written directly, while React
+       owns the value and lit marks. No standing animation runs at rest. */
+    .passui-wake-slider {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        width: 100%;
+        min-width: 0;
+        color: var(--color-label);
+    }
+    .passui-wake-track {
+        display: flex;
+        flex: 1;
+        min-width: 0;
+        align-items: center;
+        justify-content: space-between;
+        gap: min(4px, calc(25% / var(--wake-bars, 36)));
+        cursor: ew-resize;
+        touch-action: pan-y;
+        user-select: none;
+        -webkit-user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        border-radius: var(--radius-sm);
+    }
+    .passui-wake-bar {
+        flex: 1 1 3px;
+        max-width: 3px;
+        min-width: 0;
+        border-radius: var(--radius-full);
+        background: color-mix(in srgb, var(--color-label) 24%, var(--color-elevated));
+        transform-origin: 50% 50%;
+        transition: background-color 160ms ease;
+    }
+    .passui-wake-bar[data-on] { background: var(--color-label); }
+    .passui-wake-value {
+        min-width: 3ch;
+        font-family: var(--font-sans);
+        font-size: var(--text-footnote);
+        font-weight: 500;
+        font-variant-numeric: tabular-nums;
+        color: var(--color-label-secondary);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .passui-wake-bar, .passui-search-pill { transition: none; }
+        .passui-search-pill:active { scale: 1; }
+        .passui-floating-label, .passui-field-outline, .passui-field-outline legend,
+        .passui-otp-cell, .passui-otp-capsule, .passui-otp-check { transition: none; }
+        .passui-otp-glyph, .passui-otp-digit { animation: none !important; }
+        .passui-otp-materials { filter: none !important; }
+    }
+}

package/src/styles/styles.css

@@ -1,3 +1,6 @@
 @import "@passui/tokens/styles.css";
 
 @source "../";
+@import "./code-block.css";
+
+@import "./motion-controls.css";