@xenide-io/the-old-ui-theme 0.3.2 → 0.4.3
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/dist/chunk-54ZR4VL5.mjs +4641 -0
- package/dist/chunk-G53YLHVE.mjs +1023 -0
- package/dist/{index-BgG8Homu.d.mts → index-B5NOyoKS.d.mts} +100 -100
- package/dist/{index-BgG8Homu.d.ts → index-B5NOyoKS.d.ts} +100 -100
- package/dist/index.d.mts +9 -145
- package/dist/index.d.ts +9 -145
- package/dist/index.js +653 -1111
- package/dist/index.mjs +86 -342
- package/dist/suite.d.mts +760 -0
- package/dist/suite.d.ts +760 -0
- package/dist/suite.js +2800 -0
- package/dist/suite.mjs +2441 -0
- package/dist/ui.d.mts +1 -2
- package/dist/ui.d.ts +1 -2
- package/dist/ui.js +14 -10
- package/dist/ui.mjs +13 -11
- package/package.json +43 -24
- package/src/components/icons/icons.tsx +0 -2
- package/src/components/icons/index.ts +0 -3
- package/src/components/sections/IconShowcase.tsx +1 -110
- package/src/components/sections/NewComponentsShowcase.tsx +4 -4
- package/src/components/sections/SidebarShowcase.tsx +3 -3
- package/src/components/sections/SuiteShowcase.tsx +669 -0
- package/src/components/ui/ComponentDocs.tsx +2 -2
- package/src/components/ui/ContextMenu.tsx +1 -1
- package/src/components/ui/Menubar.tsx +1 -1
- package/src/components/ui/Sidebar.tsx +10 -8
- package/src/styles/suite-skin.css +255 -0
- package/src/suite/components/ai-panel.tsx +202 -0
- package/src/suite/components/app-switcher.tsx +196 -0
- package/src/suite/components/command-palette-host.tsx +62 -0
- package/src/suite/components/deferred-chrome.tsx +12 -0
- package/src/suite/components/suite-app-layout.tsx +69 -0
- package/src/suite/components/suite-bottom-nav.tsx +113 -0
- package/src/suite/components/suite-layout.tsx +285 -0
- package/src/suite/components/suite-mobile-drawer.tsx +150 -0
- package/src/suite/components/suite-mobile-header.tsx +71 -0
- package/src/suite/components/suite-notification-bell.tsx +227 -0
- package/src/suite/components/suite-settings-mobile-nav.tsx +83 -0
- package/src/suite/components/suite-sidebar.tsx +198 -0
- package/src/suite/components/suite-skeleton.tsx +191 -0
- package/src/suite/components/suite-user-menu.tsx +109 -0
- package/src/suite/components/theme-provider.tsx +174 -0
- package/src/suite/components/today-calibrating.tsx +95 -0
- package/src/suite/components/today-page-frame.tsx +28 -0
- package/src/suite/components/today-ui.tsx +370 -0
- package/src/suite/icons/app-accents.ts +75 -0
- package/src/suite/icons/glyph-parts.tsx +67 -0
- package/src/suite/icons/glyphs.ts +203 -0
- package/src/suite/icons/index.ts +12 -0
- package/src/suite/icons/suite-app-icon.tsx +68 -0
- package/src/suite/icons/suite-icon.tsx +93 -0
- package/src/suite/index.ts +108 -0
- package/src/suite/lib/apps.ts +75 -0
- package/src/suite/lib/cn.ts +6 -0
- package/src/suite/lib/injected.ts +54 -0
- package/src/suite/lib/motion.tsx +48 -0
- package/src/suite/lib/use-idle-mount.ts +25 -0
- package/dist/chunk-5HSOBJ4F.mjs +0 -5968
- package/src/components/icons/lemon-brand-icons.tsx +0 -16
- package/src/components/icons/lemon-category-icons.tsx +0 -72
- package/src/components/icons/lemon-icons.tsx +0 -57
package/dist/ui.d.mts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export { A as Accordion, a as Alert, b as AlertDialog, c as AlertDialogProps, d as AlertProps, e as AlertStatus, f as AppLayout, g as AppLayoutProps, h as AuthCard, i as AuthCardProps, j as AuthDivider, k as AuthDividerProps, l as AuthLayout, m as AuthLayoutProps, n as Autocomplete, o as AutocompleteOption, p as AutocompleteProps, q as Avatar, r as AvatarGroup, s as AvatarGroupProps, t as AvatarProps, u as AvatarSize, v as AvatarStatus, B as Badge, w as BadgeProps, x as BadgeSize, y as BadgeVariant, z as Banner, C as BannerProps, D as BannerType, E as BreadcrumbItem, F as Breadcrumbs, G as BreadcrumbsProps, H as Button, I as ButtonChrome, J as ButtonChromeProps, K as ButtonGroup, L as ButtonGroupProps, M as ButtonProps, N as ButtonShape, O as ButtonSize, P as ButtonVariant, R as Calendar, S as CanonicalIconName, T as Caption, U as Card, V as CardProps, W as CardVariant, X as ChatBubble, Y as ChatBubbleProps, Z as ChatBubbleVariant, _ as Checkbox, $ as CheckboxProps, a0 as Chip, a1 as ChipProps, a2 as CodeBlock, a3 as Collapsible, a4 as CollapsibleProps, a5 as CollapsibleSection, a6 as Combobox, a7 as ComboboxOption, a8 as ComboboxProps, a9 as CommandPalette, aa as ComponentDocs, ab as ComponentDocsProps, ac as ComponentPropRow, ad as ContextMenu, ae as ContextMenuItem, af as ContextMenuProps, ag as DataTable, ah as DataTableColumn, ai as DataTableProps, aj as DatePicker, ak as DatePickerProps, al as Dialog, am as DialogProps, an as Display, ao as Divider, ap as DividerProps, aq as Dot, ar as DotProps, as as Drawer, at as DrawerProps, au as DrawerSide, av as DrawerSize, aw as DropdownAlign, ax as DropdownButton, ay as DropdownButtonProps, az as DropdownItem, aA as DropdownItemProps, aB as DropdownMenu, aC as DropdownMenuProps, aD as DropdownRadioGroup, aE as DropdownRadioGroupProps, aF as DropdownRadioItem, aG as DropdownRadioItemProps, aH as DropdownSide, aI as EmptyState, aJ as FileUpload, aK as FileUploadProps, aL as FilterBar, aM as FilterBarProps, aN as FilterChip, aO as FilterChips, aP as FilterChipsProps, aQ as FilterControls, aR as FilterControlsProps, aS as FilterMenu, aT as FilterMenuOption, aU as FilterMenuProps, aV as FormField, aW as FormFieldControlProps, aX as FormFieldProps, aY as H1, aZ as H2, a_ as H3, a$ as H4, b0 as H5, b1 as HoverCard, b7 as Icon, b3 as IconAliasName, bc as IconByName, bN as IconName, bU as IconProps, cj as Indicator, ck as IndicatorPosition, cl as IndicatorProps, cm as Input, cn as InputGroup, co as InputGroupProps, cp as InputProps, cq as InputSize, cr as InputVariant, cs as Kbd, ct as KbdPlatform, cu as KbdProps, cv as KbdVariant, cw as Label, cx as Lead, cy as Lettermark, cz as LettermarkProps, cA as Link, cB as LinkProps, cC as Loader, cD as LoaderProps, cE as LoaderSize, cF as LoaderVariant, cG as LoadingBar, cH as LoadingBarProps, cI as LoadingState, cJ as LoadingStateProps, cK as Menubar, cL as MenubarItem, cM as MenubarProps, cN as Metric, cO as MetricProps, cP as Modal, cQ as ModalProps, cR as ModalSize, cS as Mono, cT as NumberField, cU as NumberFieldProps, cW as Overline, cX as P, c_ as Pagination, c$ as PaginationProps, d0 as Panel, d1 as PanelProps, d2 as Popover, d3 as PopoverProps, d4 as Progress, d5 as ProgressCircle, d6 as ProgressCircleProps, d7 as ProgressProps, d8 as Radio, d9 as RadioProps, da as Range, db as RangeProps, dc as Rating, dd as RatingProps, de as Resizable, df as ResizableProps, dg as Row, dh as RowProps, di as ScrollArea, dj as ScrollAreaProps, dk as SearchGroup, dl as SearchGroupProps, dm as SearchInput, dn as SearchInputProps, dp as SegmentedControl, dq as Select, dr as SelectProps, ds as SettingsLayout, dt as SettingsLayoutProps, du as SettingsNav, dv as SettingsNavGroup, dw as SettingsNavItem, dx as SettingsNavProps, dy as ShowcaseWrapper, dz as Sidebar, dA as SidebarGroup, dB as SidebarItemDef, dC as SidebarProps, dD as Skeleton, dE as SkeletonProps, dF as SkeletonShape, dG as Small, dH as Snack, dI as SnackProps, dJ as SortMenu, dK as SortMenuProps, dL as Spinner, dM as SpinnerProps, dN as Splotch, dO as SplotchColor, dP as SplotchProps, dQ as Stat, dR as StatProps, dS as StatTone, dT as Stepper, dU as TabItem, dV as Table, dW as TableColumn, dX as TableProps, dY as Tabs, dZ as TabsProps, d_ as TabsVariant, d$ as Tag, e0 as TagProps, e1 as TagType, e2 as Terminal, e3 as TerminalProps, e4 as Textarea, e5 as TextareaProps, e6 as ThemeDomSync, e7 as ThemeManager, e8 as ThemeManagerProps, e9 as ThemeSwitcher, ea as ThemeSwitcherProps, eb as Timeline, ec as TimelineEvent, ed as TimelineProps, ee as Toast, ef as ToastProps, eg as ToastStack, eh as ToastStackProps, ei as ToastStatus, ej as Toggle, ek as ToggleButton, el as ToggleButtonProps, em as ToggleGroup, en as ToggleGroupProps, eo as ToggleProps, ep as Tooltip, eq as TooltipAlign, er as TooltipProps, es as TooltipProvider, et as TooltipProviderProps, eu as TooltipSide, ev as Widget, ew as WidgetProps } from './index-
|
|
1
|
+
export { A as Accordion, a as Alert, b as AlertDialog, c as AlertDialogProps, d as AlertProps, e as AlertStatus, f as AppLayout, g as AppLayoutProps, h as AuthCard, i as AuthCardProps, j as AuthDivider, k as AuthDividerProps, l as AuthLayout, m as AuthLayoutProps, n as Autocomplete, o as AutocompleteOption, p as AutocompleteProps, q as Avatar, r as AvatarGroup, s as AvatarGroupProps, t as AvatarProps, u as AvatarSize, v as AvatarStatus, B as Badge, w as BadgeProps, x as BadgeSize, y as BadgeVariant, z as Banner, C as BannerProps, D as BannerType, E as BreadcrumbItem, F as Breadcrumbs, G as BreadcrumbsProps, H as Button, I as ButtonChrome, J as ButtonChromeProps, K as ButtonGroup, L as ButtonGroupProps, M as ButtonProps, N as ButtonShape, O as ButtonSize, P as ButtonVariant, R as Calendar, S as CanonicalIconName, T as Caption, U as Card, V as CardProps, W as CardVariant, X as ChatBubble, Y as ChatBubbleProps, Z as ChatBubbleVariant, _ as Checkbox, $ as CheckboxProps, a0 as Chip, a1 as ChipProps, a2 as CodeBlock, a3 as Collapsible, a4 as CollapsibleProps, a5 as CollapsibleSection, a6 as Combobox, a7 as ComboboxOption, a8 as ComboboxProps, a9 as CommandPalette, aa as ComponentDocs, ab as ComponentDocsProps, ac as ComponentPropRow, ad as ContextMenu, ae as ContextMenuItem, af as ContextMenuProps, ag as DataTable, ah as DataTableColumn, ai as DataTableProps, aj as DatePicker, ak as DatePickerProps, al as Dialog, am as DialogProps, an as Display, ao as Divider, ap as DividerProps, aq as Dot, ar as DotProps, as as Drawer, at as DrawerProps, au as DrawerSide, av as DrawerSize, aw as DropdownAlign, ax as DropdownButton, ay as DropdownButtonProps, az as DropdownItem, aA as DropdownItemProps, aB as DropdownMenu, aC as DropdownMenuProps, aD as DropdownRadioGroup, aE as DropdownRadioGroupProps, aF as DropdownRadioItem, aG as DropdownRadioItemProps, aH as DropdownSide, aI as EmptyState, aJ as FileUpload, aK as FileUploadProps, aL as FilterBar, aM as FilterBarProps, aN as FilterChip, aO as FilterChips, aP as FilterChipsProps, aQ as FilterControls, aR as FilterControlsProps, aS as FilterMenu, aT as FilterMenuOption, aU as FilterMenuProps, aV as FormField, aW as FormFieldControlProps, aX as FormFieldProps, aY as H1, aZ as H2, a_ as H3, a$ as H4, b0 as H5, b1 as HoverCard, b7 as Icon, b3 as IconAliasName, bc as IconByName, bN as IconName, bU as IconProps, cj as Indicator, ck as IndicatorPosition, cl as IndicatorProps, cm as Input, cn as InputGroup, co as InputGroupProps, cp as InputProps, cq as InputSize, cr as InputVariant, cs as Kbd, ct as KbdPlatform, cu as KbdProps, cv as KbdVariant, cw as Label, cx as Lead, cy as Lettermark, cz as LettermarkProps, cA as Link, cB as LinkProps, cC as Loader, cD as LoaderProps, cE as LoaderSize, cF as LoaderVariant, cG as LoadingBar, cH as LoadingBarProps, cI as LoadingState, cJ as LoadingStateProps, cK as Menubar, cL as MenubarItem, cM as MenubarProps, cN as Metric, cO as MetricProps, cP as Modal, cQ as ModalProps, cR as ModalSize, cS as Mono, cT as NumberField, cU as NumberFieldProps, cW as Overline, cX as P, c_ as Pagination, c$ as PaginationProps, d0 as Panel, d1 as PanelProps, d2 as Popover, d3 as PopoverProps, d4 as Progress, d5 as ProgressCircle, d6 as ProgressCircleProps, d7 as ProgressProps, d8 as Radio, d9 as RadioProps, da as Range, db as RangeProps, dc as Rating, dd as RatingProps, de as Resizable, df as ResizableProps, dg as Row, dh as RowProps, di as ScrollArea, dj as ScrollAreaProps, dk as SearchGroup, dl as SearchGroupProps, dm as SearchInput, dn as SearchInputProps, dp as SegmentedControl, dq as Select, dr as SelectProps, ds as SettingsLayout, dt as SettingsLayoutProps, du as SettingsNav, dv as SettingsNavGroup, dw as SettingsNavItem, dx as SettingsNavProps, dy as ShowcaseWrapper, dz as Sidebar, dA as SidebarGroup, dB as SidebarItemDef, dC as SidebarProps, dD as Skeleton, dE as SkeletonProps, dF as SkeletonShape, dG as Small, dH as Snack, dI as SnackProps, dJ as SortMenu, dK as SortMenuProps, dL as Spinner, dM as SpinnerProps, dN as Splotch, dO as SplotchColor, dP as SplotchProps, dQ as Stat, dR as StatProps, dS as StatTone, dT as Stepper, dU as TabItem, dV as Table, dW as TableColumn, dX as TableProps, dY as Tabs, dZ as TabsProps, d_ as TabsVariant, d$ as Tag, e0 as TagProps, e1 as TagType, e2 as Terminal, e3 as TerminalProps, e4 as Textarea, e5 as TextareaProps, e6 as ThemeDomSync, e7 as ThemeManager, e8 as ThemeManagerProps, e9 as ThemeSwitcher, ea as ThemeSwitcherProps, eb as Timeline, ec as TimelineEvent, ed as TimelineProps, ee as Toast, ef as ToastProps, eg as ToastStack, eh as ToastStackProps, ei as ToastStatus, ej as Toggle, ek as ToggleButton, el as ToggleButtonProps, em as ToggleGroup, en as ToggleGroupProps, eo as ToggleProps, ep as Tooltip, eq as TooltipAlign, er as TooltipProps, es as TooltipProvider, et as TooltipProviderProps, eu as TooltipSide, ev as Widget, ew as WidgetProps } from './index-B5NOyoKS.mjs';
|
|
2
2
|
import 'react';
|
|
3
|
-
import 'react/jsx-runtime';
|
|
4
3
|
import '@radix-ui/react-dropdown-menu';
|
package/dist/ui.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
export { A as Accordion, a as Alert, b as AlertDialog, c as AlertDialogProps, d as AlertProps, e as AlertStatus, f as AppLayout, g as AppLayoutProps, h as AuthCard, i as AuthCardProps, j as AuthDivider, k as AuthDividerProps, l as AuthLayout, m as AuthLayoutProps, n as Autocomplete, o as AutocompleteOption, p as AutocompleteProps, q as Avatar, r as AvatarGroup, s as AvatarGroupProps, t as AvatarProps, u as AvatarSize, v as AvatarStatus, B as Badge, w as BadgeProps, x as BadgeSize, y as BadgeVariant, z as Banner, C as BannerProps, D as BannerType, E as BreadcrumbItem, F as Breadcrumbs, G as BreadcrumbsProps, H as Button, I as ButtonChrome, J as ButtonChromeProps, K as ButtonGroup, L as ButtonGroupProps, M as ButtonProps, N as ButtonShape, O as ButtonSize, P as ButtonVariant, R as Calendar, S as CanonicalIconName, T as Caption, U as Card, V as CardProps, W as CardVariant, X as ChatBubble, Y as ChatBubbleProps, Z as ChatBubbleVariant, _ as Checkbox, $ as CheckboxProps, a0 as Chip, a1 as ChipProps, a2 as CodeBlock, a3 as Collapsible, a4 as CollapsibleProps, a5 as CollapsibleSection, a6 as Combobox, a7 as ComboboxOption, a8 as ComboboxProps, a9 as CommandPalette, aa as ComponentDocs, ab as ComponentDocsProps, ac as ComponentPropRow, ad as ContextMenu, ae as ContextMenuItem, af as ContextMenuProps, ag as DataTable, ah as DataTableColumn, ai as DataTableProps, aj as DatePicker, ak as DatePickerProps, al as Dialog, am as DialogProps, an as Display, ao as Divider, ap as DividerProps, aq as Dot, ar as DotProps, as as Drawer, at as DrawerProps, au as DrawerSide, av as DrawerSize, aw as DropdownAlign, ax as DropdownButton, ay as DropdownButtonProps, az as DropdownItem, aA as DropdownItemProps, aB as DropdownMenu, aC as DropdownMenuProps, aD as DropdownRadioGroup, aE as DropdownRadioGroupProps, aF as DropdownRadioItem, aG as DropdownRadioItemProps, aH as DropdownSide, aI as EmptyState, aJ as FileUpload, aK as FileUploadProps, aL as FilterBar, aM as FilterBarProps, aN as FilterChip, aO as FilterChips, aP as FilterChipsProps, aQ as FilterControls, aR as FilterControlsProps, aS as FilterMenu, aT as FilterMenuOption, aU as FilterMenuProps, aV as FormField, aW as FormFieldControlProps, aX as FormFieldProps, aY as H1, aZ as H2, a_ as H3, a$ as H4, b0 as H5, b1 as HoverCard, b7 as Icon, b3 as IconAliasName, bc as IconByName, bN as IconName, bU as IconProps, cj as Indicator, ck as IndicatorPosition, cl as IndicatorProps, cm as Input, cn as InputGroup, co as InputGroupProps, cp as InputProps, cq as InputSize, cr as InputVariant, cs as Kbd, ct as KbdPlatform, cu as KbdProps, cv as KbdVariant, cw as Label, cx as Lead, cy as Lettermark, cz as LettermarkProps, cA as Link, cB as LinkProps, cC as Loader, cD as LoaderProps, cE as LoaderSize, cF as LoaderVariant, cG as LoadingBar, cH as LoadingBarProps, cI as LoadingState, cJ as LoadingStateProps, cK as Menubar, cL as MenubarItem, cM as MenubarProps, cN as Metric, cO as MetricProps, cP as Modal, cQ as ModalProps, cR as ModalSize, cS as Mono, cT as NumberField, cU as NumberFieldProps, cW as Overline, cX as P, c_ as Pagination, c$ as PaginationProps, d0 as Panel, d1 as PanelProps, d2 as Popover, d3 as PopoverProps, d4 as Progress, d5 as ProgressCircle, d6 as ProgressCircleProps, d7 as ProgressProps, d8 as Radio, d9 as RadioProps, da as Range, db as RangeProps, dc as Rating, dd as RatingProps, de as Resizable, df as ResizableProps, dg as Row, dh as RowProps, di as ScrollArea, dj as ScrollAreaProps, dk as SearchGroup, dl as SearchGroupProps, dm as SearchInput, dn as SearchInputProps, dp as SegmentedControl, dq as Select, dr as SelectProps, ds as SettingsLayout, dt as SettingsLayoutProps, du as SettingsNav, dv as SettingsNavGroup, dw as SettingsNavItem, dx as SettingsNavProps, dy as ShowcaseWrapper, dz as Sidebar, dA as SidebarGroup, dB as SidebarItemDef, dC as SidebarProps, dD as Skeleton, dE as SkeletonProps, dF as SkeletonShape, dG as Small, dH as Snack, dI as SnackProps, dJ as SortMenu, dK as SortMenuProps, dL as Spinner, dM as SpinnerProps, dN as Splotch, dO as SplotchColor, dP as SplotchProps, dQ as Stat, dR as StatProps, dS as StatTone, dT as Stepper, dU as TabItem, dV as Table, dW as TableColumn, dX as TableProps, dY as Tabs, dZ as TabsProps, d_ as TabsVariant, d$ as Tag, e0 as TagProps, e1 as TagType, e2 as Terminal, e3 as TerminalProps, e4 as Textarea, e5 as TextareaProps, e6 as ThemeDomSync, e7 as ThemeManager, e8 as ThemeManagerProps, e9 as ThemeSwitcher, ea as ThemeSwitcherProps, eb as Timeline, ec as TimelineEvent, ed as TimelineProps, ee as Toast, ef as ToastProps, eg as ToastStack, eh as ToastStackProps, ei as ToastStatus, ej as Toggle, ek as ToggleButton, el as ToggleButtonProps, em as ToggleGroup, en as ToggleGroupProps, eo as ToggleProps, ep as Tooltip, eq as TooltipAlign, er as TooltipProps, es as TooltipProvider, et as TooltipProviderProps, eu as TooltipSide, ev as Widget, ew as WidgetProps } from './index-
|
|
1
|
+
export { A as Accordion, a as Alert, b as AlertDialog, c as AlertDialogProps, d as AlertProps, e as AlertStatus, f as AppLayout, g as AppLayoutProps, h as AuthCard, i as AuthCardProps, j as AuthDivider, k as AuthDividerProps, l as AuthLayout, m as AuthLayoutProps, n as Autocomplete, o as AutocompleteOption, p as AutocompleteProps, q as Avatar, r as AvatarGroup, s as AvatarGroupProps, t as AvatarProps, u as AvatarSize, v as AvatarStatus, B as Badge, w as BadgeProps, x as BadgeSize, y as BadgeVariant, z as Banner, C as BannerProps, D as BannerType, E as BreadcrumbItem, F as Breadcrumbs, G as BreadcrumbsProps, H as Button, I as ButtonChrome, J as ButtonChromeProps, K as ButtonGroup, L as ButtonGroupProps, M as ButtonProps, N as ButtonShape, O as ButtonSize, P as ButtonVariant, R as Calendar, S as CanonicalIconName, T as Caption, U as Card, V as CardProps, W as CardVariant, X as ChatBubble, Y as ChatBubbleProps, Z as ChatBubbleVariant, _ as Checkbox, $ as CheckboxProps, a0 as Chip, a1 as ChipProps, a2 as CodeBlock, a3 as Collapsible, a4 as CollapsibleProps, a5 as CollapsibleSection, a6 as Combobox, a7 as ComboboxOption, a8 as ComboboxProps, a9 as CommandPalette, aa as ComponentDocs, ab as ComponentDocsProps, ac as ComponentPropRow, ad as ContextMenu, ae as ContextMenuItem, af as ContextMenuProps, ag as DataTable, ah as DataTableColumn, ai as DataTableProps, aj as DatePicker, ak as DatePickerProps, al as Dialog, am as DialogProps, an as Display, ao as Divider, ap as DividerProps, aq as Dot, ar as DotProps, as as Drawer, at as DrawerProps, au as DrawerSide, av as DrawerSize, aw as DropdownAlign, ax as DropdownButton, ay as DropdownButtonProps, az as DropdownItem, aA as DropdownItemProps, aB as DropdownMenu, aC as DropdownMenuProps, aD as DropdownRadioGroup, aE as DropdownRadioGroupProps, aF as DropdownRadioItem, aG as DropdownRadioItemProps, aH as DropdownSide, aI as EmptyState, aJ as FileUpload, aK as FileUploadProps, aL as FilterBar, aM as FilterBarProps, aN as FilterChip, aO as FilterChips, aP as FilterChipsProps, aQ as FilterControls, aR as FilterControlsProps, aS as FilterMenu, aT as FilterMenuOption, aU as FilterMenuProps, aV as FormField, aW as FormFieldControlProps, aX as FormFieldProps, aY as H1, aZ as H2, a_ as H3, a$ as H4, b0 as H5, b1 as HoverCard, b7 as Icon, b3 as IconAliasName, bc as IconByName, bN as IconName, bU as IconProps, cj as Indicator, ck as IndicatorPosition, cl as IndicatorProps, cm as Input, cn as InputGroup, co as InputGroupProps, cp as InputProps, cq as InputSize, cr as InputVariant, cs as Kbd, ct as KbdPlatform, cu as KbdProps, cv as KbdVariant, cw as Label, cx as Lead, cy as Lettermark, cz as LettermarkProps, cA as Link, cB as LinkProps, cC as Loader, cD as LoaderProps, cE as LoaderSize, cF as LoaderVariant, cG as LoadingBar, cH as LoadingBarProps, cI as LoadingState, cJ as LoadingStateProps, cK as Menubar, cL as MenubarItem, cM as MenubarProps, cN as Metric, cO as MetricProps, cP as Modal, cQ as ModalProps, cR as ModalSize, cS as Mono, cT as NumberField, cU as NumberFieldProps, cW as Overline, cX as P, c_ as Pagination, c$ as PaginationProps, d0 as Panel, d1 as PanelProps, d2 as Popover, d3 as PopoverProps, d4 as Progress, d5 as ProgressCircle, d6 as ProgressCircleProps, d7 as ProgressProps, d8 as Radio, d9 as RadioProps, da as Range, db as RangeProps, dc as Rating, dd as RatingProps, de as Resizable, df as ResizableProps, dg as Row, dh as RowProps, di as ScrollArea, dj as ScrollAreaProps, dk as SearchGroup, dl as SearchGroupProps, dm as SearchInput, dn as SearchInputProps, dp as SegmentedControl, dq as Select, dr as SelectProps, ds as SettingsLayout, dt as SettingsLayoutProps, du as SettingsNav, dv as SettingsNavGroup, dw as SettingsNavItem, dx as SettingsNavProps, dy as ShowcaseWrapper, dz as Sidebar, dA as SidebarGroup, dB as SidebarItemDef, dC as SidebarProps, dD as Skeleton, dE as SkeletonProps, dF as SkeletonShape, dG as Small, dH as Snack, dI as SnackProps, dJ as SortMenu, dK as SortMenuProps, dL as Spinner, dM as SpinnerProps, dN as Splotch, dO as SplotchColor, dP as SplotchProps, dQ as Stat, dR as StatProps, dS as StatTone, dT as Stepper, dU as TabItem, dV as Table, dW as TableColumn, dX as TableProps, dY as Tabs, dZ as TabsProps, d_ as TabsVariant, d$ as Tag, e0 as TagProps, e1 as TagType, e2 as Terminal, e3 as TerminalProps, e4 as Textarea, e5 as TextareaProps, e6 as ThemeDomSync, e7 as ThemeManager, e8 as ThemeManagerProps, e9 as ThemeSwitcher, ea as ThemeSwitcherProps, eb as Timeline, ec as TimelineEvent, ed as TimelineProps, ee as Toast, ef as ToastProps, eg as ToastStack, eh as ToastStackProps, ei as ToastStatus, ej as Toggle, ek as ToggleButton, el as ToggleButtonProps, em as ToggleGroup, en as ToggleGroupProps, eo as ToggleProps, ep as Tooltip, eq as TooltipAlign, er as TooltipProps, es as TooltipProvider, et as TooltipProviderProps, eu as TooltipSide, ev as Widget, ew as WidgetProps } from './index-B5NOyoKS.js';
|
|
2
2
|
import 'react';
|
|
3
|
-
import 'react/jsx-runtime';
|
|
4
3
|
import '@radix-ui/react-dropdown-menu';
|
package/dist/ui.js
CHANGED
|
@@ -3406,12 +3406,12 @@ function ComponentDocs({ title = "Props & variants", rows, defaultOpen = false,
|
|
|
3406
3406
|
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("th", { className: "px-4 py-2 font-semibold", children: "Use" })
|
|
3407
3407
|
] }) }),
|
|
3408
3408
|
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tbody", { className: "divide-y divide-ph-border", children: rows.map((row) => {
|
|
3409
|
-
var _a;
|
|
3409
|
+
var _a, _b;
|
|
3410
3410
|
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { children: [
|
|
3411
3411
|
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-ink", children: row.name }),
|
|
3412
3412
|
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: row.type }),
|
|
3413
3413
|
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-4 py-3 align-top font-mono text-xs text-ph-subtle", children: (_a = row.defaultValue) != null ? _a : "-" }),
|
|
3414
|
-
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: row.description })
|
|
3414
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "px-4 py-3 align-top text-ph-subtle", children: (_b = row.description) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-ph-mutedtext", children: "\u2014" }) })
|
|
3415
3415
|
] }, row.name);
|
|
3416
3416
|
}) })
|
|
3417
3417
|
] }) })
|
|
@@ -5538,23 +5538,27 @@ function AppLayout({ sidebar, children, sidebarWidth = 240, className }) {
|
|
|
5538
5538
|
|
|
5539
5539
|
// src/components/ui/Sidebar.tsx
|
|
5540
5540
|
var import_jsx_runtime82 = require("react/jsx-runtime");
|
|
5541
|
-
function Sidebar({ groups, className, header, footer, collapsed = false, onCollapse }) {
|
|
5541
|
+
function Sidebar({ groups, className, header, footer, children, collapsed = false, onCollapse }) {
|
|
5542
5542
|
return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("nav", { className: cn("ph-sidebar flex flex-col h-full", collapsed && "ph-sidebar--collapsed", className), children: [
|
|
5543
5543
|
header && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "ph-sidebar__header px-3 py-3 border-b border-ph-border-subtle", children: header }),
|
|
5544
|
-
/* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "ph-sidebar__body flex-1 overflow-y-auto px-2 py-3 space-y-5", children: groups.map((group) =>
|
|
5545
|
-
|
|
5546
|
-
/* @__PURE__ */ (0, import_jsx_runtime82.
|
|
5547
|
-
|
|
5544
|
+
/* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "ph-sidebar__body flex-1 overflow-y-auto px-2 py-3 space-y-5", children: groups.map((group) => {
|
|
5545
|
+
var _a;
|
|
5546
|
+
return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "ph-sidebar__group", children: [
|
|
5547
|
+
group.label && !collapsed && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("h3", { className: "ph-sidebar__group-label px-2 mb-1 text-[10px] font-semibold uppercase tracking-wider text-ph-mutedtext", children: group.label }),
|
|
5548
|
+
/* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "ph-sidebar__items space-y-0.5", children: group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SidebarItem, __spreadProps(__spreadValues({}, item), { collapsed }), item.label)) })
|
|
5549
|
+
] }, (_a = group.label) != null ? _a : "default");
|
|
5550
|
+
}) }),
|
|
5551
|
+
children,
|
|
5548
5552
|
footer && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "ph-sidebar__footer px-3 py-3 border-t border-ph-border-subtle", children: footer })
|
|
5549
5553
|
] });
|
|
5550
5554
|
}
|
|
5551
|
-
function SidebarItem({ label, icon, badge, active, onClick, collapsed }) {
|
|
5555
|
+
function SidebarItem({ label, icon, badge, active, href, onClick, collapsed }) {
|
|
5552
5556
|
const Comp = onClick ? "button" : "a";
|
|
5553
5557
|
return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
|
|
5554
5558
|
Comp,
|
|
5555
5559
|
{
|
|
5556
5560
|
type: onClick ? "button" : void 0,
|
|
5557
|
-
href: onClick ? void 0 :
|
|
5561
|
+
href: onClick ? void 0 : href,
|
|
5558
5562
|
onClick,
|
|
5559
5563
|
className: cn(
|
|
5560
5564
|
"ph-sidebar__item flex items-center gap-2.5 w-full rounded-md px-2.5 py-2 text-sm text-left transition",
|
|
@@ -5563,7 +5567,7 @@ function SidebarItem({ label, icon, badge, active, onClick, collapsed }) {
|
|
|
5563
5567
|
),
|
|
5564
5568
|
title: collapsed ? label : void 0,
|
|
5565
5569
|
children: [
|
|
5566
|
-
icon && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "ph-sidebar__item-icon shrink-0 w-
|
|
5570
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: cn("ph-sidebar__item-icon shrink-0 flex items-center justify-center", collapsed ? "w-5 h-5" : "w-4 h-4"), children: icon }),
|
|
5567
5571
|
!collapsed && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "ph-sidebar__item-label truncate flex-1", children: label }),
|
|
5568
5572
|
!collapsed && badge && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "ph-sidebar__item-badge shrink-0", children: badge })
|
|
5569
5573
|
]
|
package/dist/ui.mjs
CHANGED
|
@@ -14,7 +14,6 @@ import {
|
|
|
14
14
|
Banner,
|
|
15
15
|
Breadcrumbs,
|
|
16
16
|
Button,
|
|
17
|
-
ButtonChrome,
|
|
18
17
|
ButtonGroup,
|
|
19
18
|
Calendar,
|
|
20
19
|
Caption,
|
|
@@ -36,11 +35,6 @@ import {
|
|
|
36
35
|
Divider,
|
|
37
36
|
Dot,
|
|
38
37
|
Drawer,
|
|
39
|
-
DropdownButton,
|
|
40
|
-
DropdownItem,
|
|
41
|
-
DropdownMenu,
|
|
42
|
-
DropdownRadioGroup,
|
|
43
|
-
DropdownRadioItem,
|
|
44
38
|
EmptyState,
|
|
45
39
|
FileUpload,
|
|
46
40
|
FilterBar,
|
|
@@ -54,8 +48,6 @@ import {
|
|
|
54
48
|
H4,
|
|
55
49
|
H5,
|
|
56
50
|
HoverCard,
|
|
57
|
-
IconBase,
|
|
58
|
-
IconByName,
|
|
59
51
|
Indicator,
|
|
60
52
|
Input,
|
|
61
53
|
InputGroup,
|
|
@@ -115,10 +107,20 @@ import {
|
|
|
115
107
|
Toggle,
|
|
116
108
|
ToggleButton,
|
|
117
109
|
ToggleGroup,
|
|
118
|
-
Tooltip,
|
|
119
|
-
TooltipProvider,
|
|
120
110
|
Widget
|
|
121
|
-
} from "./chunk-
|
|
111
|
+
} from "./chunk-54ZR4VL5.mjs";
|
|
112
|
+
import {
|
|
113
|
+
ButtonChrome,
|
|
114
|
+
DropdownButton,
|
|
115
|
+
DropdownItem,
|
|
116
|
+
DropdownMenu,
|
|
117
|
+
DropdownRadioGroup,
|
|
118
|
+
DropdownRadioItem,
|
|
119
|
+
IconBase,
|
|
120
|
+
IconByName,
|
|
121
|
+
Tooltip,
|
|
122
|
+
TooltipProvider
|
|
123
|
+
} from "./chunk-G53YLHVE.mjs";
|
|
122
124
|
import "./chunk-FWCSY2DS.mjs";
|
|
123
125
|
export {
|
|
124
126
|
Accordion,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xenide-io/the-old-ui-theme",
|
|
3
|
-
"version": "0.3
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "Props-driven React components and theme tokens inspired by classic interface design — optimized for Next.js apps and internal tools.",
|
|
5
5
|
"author": "Xenide",
|
|
6
6
|
"license": "MIT",
|
|
@@ -42,6 +42,12 @@
|
|
|
42
42
|
"require": "./dist/ui.js",
|
|
43
43
|
"default": "./dist/ui.mjs"
|
|
44
44
|
},
|
|
45
|
+
"./suite": {
|
|
46
|
+
"types": "./dist/suite.d.ts",
|
|
47
|
+
"import": "./dist/suite.mjs",
|
|
48
|
+
"require": "./dist/suite.js",
|
|
49
|
+
"default": "./dist/suite.mjs"
|
|
50
|
+
},
|
|
45
51
|
"./tailwind-preset": {
|
|
46
52
|
"types": "./dist/tailwind-preset.d.ts",
|
|
47
53
|
"import": "./dist/tailwind-preset.mjs",
|
|
@@ -53,13 +59,14 @@
|
|
|
53
59
|
"dist",
|
|
54
60
|
"src/app/globals.css",
|
|
55
61
|
"src/components",
|
|
62
|
+
"src/suite",
|
|
56
63
|
"src/styles",
|
|
57
64
|
"tailwind-preset.ts"
|
|
58
65
|
],
|
|
59
66
|
"scripts": {
|
|
60
67
|
"dev": "next dev",
|
|
61
68
|
"build": "next build",
|
|
62
|
-
"build:lib": "tsup --entry.index src/index.ts --entry.ui src/components/ui/index.ts --entry.tailwind-preset tailwind-preset.ts --format cjs,esm --dts --external react,react-dom,next --clean --tsconfig ./tsconfig.lib.json",
|
|
69
|
+
"build:lib": "tsup --entry.index src/index.ts --entry.ui src/components/ui/index.ts --entry.suite src/suite/index.ts --entry.tailwind-preset tailwind-preset.ts --format cjs,esm --dts --external react,react-dom,next,iconoir-react,motion --clean --tsconfig ./tsconfig.lib.json",
|
|
63
70
|
"start": "next start",
|
|
64
71
|
"lint": "next lint",
|
|
65
72
|
"typecheck": "tsc --noEmit",
|
|
@@ -72,45 +79,57 @@
|
|
|
72
79
|
"release": "bun run check && npm publish"
|
|
73
80
|
},
|
|
74
81
|
"peerDependencies": {
|
|
75
|
-
"react": "^18.0.0",
|
|
76
|
-
"react-dom": "^18.0.0",
|
|
82
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
83
|
+
"react-dom": "^18.0.0 || ^19.0.0",
|
|
77
84
|
"next": ">=16.2.7",
|
|
78
85
|
"tailwindcss": "^3.4.0",
|
|
79
|
-
"d3-scale": "^4.0.2"
|
|
86
|
+
"d3-scale": "^4.0.2",
|
|
87
|
+
"iconoir-react": ">=7.11.1",
|
|
88
|
+
"motion": ">=12"
|
|
80
89
|
},
|
|
81
90
|
"peerDependenciesMeta": {
|
|
82
91
|
"d3-scale": {
|
|
83
92
|
"optional": true
|
|
93
|
+
},
|
|
94
|
+
"iconoir-react": {
|
|
95
|
+
"optional": true
|
|
96
|
+
},
|
|
97
|
+
"motion": {
|
|
98
|
+
"optional": true
|
|
84
99
|
}
|
|
85
100
|
},
|
|
86
101
|
"devDependencies": {
|
|
87
102
|
"@playwright/test": "1.54.1",
|
|
88
|
-
"@testing-library/dom": "10",
|
|
89
|
-
"@testing-library/jest-dom": "6",
|
|
90
|
-
"@testing-library/react": "16",
|
|
91
|
-
"@testing-library/user-event": "14",
|
|
103
|
+
"@testing-library/dom": "^10.4.1",
|
|
104
|
+
"@testing-library/jest-dom": "^6.10.0",
|
|
105
|
+
"@testing-library/react": "^16.3.2",
|
|
106
|
+
"@testing-library/user-event": "^14.6.3",
|
|
92
107
|
"@types/d3-scale": "^4.0.9",
|
|
93
|
-
"@types/node": "^20.
|
|
94
|
-
"@types/react": "^
|
|
95
|
-
"@types/react-dom": "^
|
|
96
|
-
"autoprefixer": "^10.4
|
|
108
|
+
"@types/node": "^20.19.43",
|
|
109
|
+
"@types/react": "^19.2.18",
|
|
110
|
+
"@types/react-dom": "^19.2.4",
|
|
111
|
+
"autoprefixer": "^10.5.4",
|
|
112
|
+
"iconoir-react": "^7.11.1",
|
|
113
|
+
"motion": "^12.43.0",
|
|
97
114
|
"d3-scale": "^4.0.2",
|
|
98
|
-
"jsdom": "26",
|
|
99
|
-
"next": "^16.
|
|
100
|
-
"postcss": "^8.
|
|
101
|
-
"react": "^18.
|
|
102
|
-
"react-dom": "^18.
|
|
103
|
-
"tailwindcss": "^3.4.
|
|
115
|
+
"jsdom": "^26.1.0",
|
|
116
|
+
"next": "^16.3.0",
|
|
117
|
+
"postcss": "^8.5.25",
|
|
118
|
+
"react": "^18.3.1",
|
|
119
|
+
"react-dom": "^18.3.1",
|
|
120
|
+
"tailwindcss": "^3.4.19",
|
|
104
121
|
"tsup": "^8.5.1",
|
|
105
|
-
"typescript": "^
|
|
106
|
-
"vitest": "3"
|
|
122
|
+
"typescript": "^6.0.3",
|
|
123
|
+
"vitest": "^3.2.7",
|
|
124
|
+
"typescript7": "npm:typescript@^7.0.2"
|
|
107
125
|
},
|
|
108
126
|
"publishConfig": {
|
|
109
127
|
"access": "public"
|
|
110
128
|
},
|
|
111
129
|
"dependencies": {
|
|
112
|
-
"@radix-ui/react-dialog": "^1.1.
|
|
113
|
-
"@radix-ui/react-dropdown-menu": "^2.1.
|
|
114
|
-
"
|
|
130
|
+
"@radix-ui/react-dialog": "^1.1.23",
|
|
131
|
+
"@radix-ui/react-dropdown-menu": "^2.1.24",
|
|
132
|
+
"clsx": "^2.1.1",
|
|
133
|
+
"tailwind-merge": "^3.6.0"
|
|
115
134
|
}
|
|
116
135
|
}
|
|
@@ -5,8 +5,6 @@ import { forwardRef } from "react";
|
|
|
5
5
|
import type { IconProps } from "@/components/icons/IconBase";
|
|
6
6
|
import { createIconBase, createIconBasePath } from "@/components/icons/createIconBase";
|
|
7
7
|
import { cn } from "@/lib/cn";
|
|
8
|
-
import * as LemonIcons from "@/components/icons/lemon-icons";
|
|
9
|
-
import * as LemonBrandIcons from "@/components/icons/lemon-brand-icons";
|
|
10
8
|
|
|
11
9
|
const fill = (d: string) => <path d={d} fill="currentColor" />;
|
|
12
10
|
|
|
@@ -1,6 +1,3 @@
|
|
|
1
1
|
export { IconBase, type IconProps } from "@/components/icons/IconBase";
|
|
2
2
|
export { createIconBase, createIconBasePath } from "@/components/icons/createIconBase";
|
|
3
3
|
export * from "@/components/icons/icons";
|
|
4
|
-
export * from "@/components/icons/lemon-icons";
|
|
5
|
-
export * from "@/components/icons/lemon-brand-icons";
|
|
6
|
-
export * from "@/components/icons/lemon-category-icons";
|
|
@@ -3,17 +3,6 @@ import {
|
|
|
3
3
|
CANONICAL_ICONS,
|
|
4
4
|
OLD_UI_ICONS,
|
|
5
5
|
IconAreaChart, IconDatabase, IconFlag, IconFlask, IconGridView, IconRecording, IconSurveys,
|
|
6
|
-
IconChrome, IconFirefox, IconSafari, IconFacebook, IconGoogle, IconGitlab, IconSlack, IconMicrosoftTeams,
|
|
7
|
-
IconMacOS, IconAppleIOS, IconWindows, IconLinux, IconAndroidOS,
|
|
8
|
-
IconWeb, IconMonitor, IconBold, IconItalic, IconLink, IconPreview, IconEyeHidden,
|
|
9
|
-
IconFullScreen, IconMenu, IconGhost, IconReplay, IconHeatmap, IconPauseCircle,
|
|
10
|
-
IconSkipBackward, IconSkipStart, IconSkipEnd, IconDragHandle, IconFingerprint, IconNodeJS, IconStamphog,
|
|
11
|
-
IconPalette, IconMegaphone, IconMap, IconMapPin, IconCoffee, IconBook, IconCalendar,
|
|
12
|
-
IconClock, IconGlobe, IconCloud, IconBug, IconCrown, IconConfetti, IconLightBulb,
|
|
13
|
-
IconHourglass, IconStore, IconCart, IconEye, IconPeople, IconGroups, IconDocument,
|
|
14
|
-
IconAI, IconArchive, IconAtSign, IconBinary, IconGear, IconChat, IconFolder,
|
|
15
|
-
IconHeart, IconHomeFilled, IconImage, IconLock, IconMic, IconMusic, IconPhone,
|
|
16
|
-
IconRefresh, IconReply, IconReport, IconFilter, IconPlus, IconCheck, IconClose,
|
|
17
6
|
type CanonicalIconName,
|
|
18
7
|
type IconProps,
|
|
19
8
|
} from "@/components/icons";
|
|
@@ -29,64 +18,6 @@ const originalIcons = Object.entries(OLD_UI_ICONS) as Array<[
|
|
|
29
18
|
ComponentType<IconProps>,
|
|
30
19
|
]>;
|
|
31
20
|
|
|
32
|
-
const categoryIcons = [
|
|
33
|
-
{ Icon: IconPalette, label: "Palette" }, { Icon: IconMegaphone, label: "Megaphone" },
|
|
34
|
-
{ Icon: IconMap, label: "Map" }, { Icon: IconMapPin, label: "Pin" },
|
|
35
|
-
{ Icon: IconCoffee, label: "Coffee" }, { Icon: IconBook, label: "Book" },
|
|
36
|
-
{ Icon: IconCalendar, label: "Calendar" }, { Icon: IconClock, label: "Clock" },
|
|
37
|
-
{ Icon: IconGlobe, label: "Globe" }, { Icon: IconCloud, label: "Cloud" },
|
|
38
|
-
{ Icon: IconBug, label: "Bug" }, { Icon: IconCrown, label: "Crown" },
|
|
39
|
-
{ Icon: IconConfetti, label: "Confetti" }, { Icon: IconLightBulb, label: "Bulb" },
|
|
40
|
-
{ Icon: IconHourglass, label: "Hourglass" }, { Icon: IconStore, label: "Store" },
|
|
41
|
-
{ Icon: IconCart, label: "Cart" }, { Icon: IconEye, label: "Eye" },
|
|
42
|
-
{ Icon: IconPeople, label: "People" }, { Icon: IconGroups, label: "Groups" },
|
|
43
|
-
{ Icon: IconDocument, label: "Document" }, { Icon: IconAI, label: "AI" },
|
|
44
|
-
{ Icon: IconArchive, label: "Archive" }, { Icon: IconAtSign, label: "At" },
|
|
45
|
-
{ Icon: IconBinary, label: "Binary" }, { Icon: IconGear, label: "Gear" },
|
|
46
|
-
{ Icon: IconChat, label: "Chat" }, { Icon: IconFolder, label: "Folder" },
|
|
47
|
-
{ Icon: IconHeart, label: "Heart" }, { Icon: IconImage, label: "Image" },
|
|
48
|
-
{ Icon: IconLock, label: "Lock" }, { Icon: IconMic, label: "Mic" },
|
|
49
|
-
{ Icon: IconMusic, label: "Music" }, { Icon: IconPhone, label: "Phone" },
|
|
50
|
-
{ Icon: IconRefresh, label: "Refresh" }, { Icon: IconReply, label: "Reply" },
|
|
51
|
-
{ Icon: IconReport, label: "Report" }, { Icon: IconFilter, label: "Filter" },
|
|
52
|
-
];
|
|
53
|
-
|
|
54
|
-
const lemonIcons = [
|
|
55
|
-
{ Icon: IconChrome, label: "Chrome" },
|
|
56
|
-
{ Icon: IconFirefox, label: "Firefox" },
|
|
57
|
-
{ Icon: IconSafari, label: "Safari" },
|
|
58
|
-
{ Icon: IconFacebook, label: "Facebook" },
|
|
59
|
-
{ Icon: IconGoogle, label: "Google" },
|
|
60
|
-
{ Icon: IconGitlab, label: "Gitlab" },
|
|
61
|
-
{ Icon: IconSlack, label: "Slack" },
|
|
62
|
-
{ Icon: IconMicrosoftTeams, label: "Teams" },
|
|
63
|
-
{ Icon: IconMacOS, label: "macOS" },
|
|
64
|
-
{ Icon: IconAppleIOS, label: "iOS" },
|
|
65
|
-
{ Icon: IconWindows, label: "Windows" },
|
|
66
|
-
{ Icon: IconLinux, label: "Linux" },
|
|
67
|
-
{ Icon: IconAndroidOS, label: "Android" },
|
|
68
|
-
{ Icon: IconWeb, label: "Web" },
|
|
69
|
-
{ Icon: IconMonitor, label: "Monitor" },
|
|
70
|
-
{ Icon: IconBold, label: "Bold" },
|
|
71
|
-
{ Icon: IconItalic, label: "Italic" },
|
|
72
|
-
{ Icon: IconLink, label: "Link" },
|
|
73
|
-
{ Icon: IconPreview, label: "Preview" },
|
|
74
|
-
{ Icon: IconEyeHidden, label: "EyeHidden" },
|
|
75
|
-
{ Icon: IconFullScreen, label: "FullScreen" },
|
|
76
|
-
{ Icon: IconMenu, label: "Menu" },
|
|
77
|
-
{ Icon: IconGhost, label: "Ghost" },
|
|
78
|
-
{ Icon: IconReplay, label: "Replay" },
|
|
79
|
-
{ Icon: IconHeatmap, label: "Heatmap" },
|
|
80
|
-
{ Icon: IconPauseCircle, label: "Pause" },
|
|
81
|
-
{ Icon: IconSkipBackward, label: "SkipBack" },
|
|
82
|
-
{ Icon: IconSkipStart, label: "SkipStart" },
|
|
83
|
-
{ Icon: IconSkipEnd, label: "SkipEnd" },
|
|
84
|
-
{ Icon: IconDragHandle, label: "DragHandle" },
|
|
85
|
-
{ Icon: IconFingerprint, label: "Fingerprint" },
|
|
86
|
-
{ Icon: IconNodeJS, label: "NodeJS" },
|
|
87
|
-
{ Icon: IconStamphog, label: "Stamphog" },
|
|
88
|
-
];
|
|
89
|
-
|
|
90
21
|
const productTiles = [
|
|
91
22
|
{ label: "Session replay", Icon: IconRecording, color: "--ph-product-session-replay" },
|
|
92
23
|
{ label: "Product analytics", Icon: IconAreaChart, color: "--ph-product-product-analytics" },
|
|
@@ -115,7 +46,7 @@ export default function IconShowcase() {
|
|
|
115
46
|
return (
|
|
116
47
|
<ShowcaseWrapper
|
|
117
48
|
title="Icons"
|
|
118
|
-
description="A canonical filled SVG registry with
|
|
49
|
+
description="A canonical filled SVG registry with clearly identified Old UI originals and the new suite icon system."
|
|
119
50
|
code={code}
|
|
120
51
|
filename="IconExample.tsx"
|
|
121
52
|
>
|
|
@@ -160,46 +91,6 @@ export default function IconShowcase() {
|
|
|
160
91
|
</div>
|
|
161
92
|
</section>
|
|
162
93
|
|
|
163
|
-
<section className="ph-panel space-y-4">
|
|
164
|
-
<div>
|
|
165
|
-
<h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Common icons (PostHog categories)</h3>
|
|
166
|
-
<p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
|
|
167
|
-
Everyday UI icons ported from PostHog's categories set.
|
|
168
|
-
</p>
|
|
169
|
-
</div>
|
|
170
|
-
<div className="grid grid-cols-4 gap-3 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10">
|
|
171
|
-
{categoryIcons.map(({ Icon, label }) => (
|
|
172
|
-
<div key={label} className="flex min-w-0 flex-col items-center gap-2 rounded-lg border border-ph-border-subtle bg-ph-raised p-3 text-center">
|
|
173
|
-
<div className="flex h-8 items-center gap-2 text-ph-ink">
|
|
174
|
-
<Icon size={16} />
|
|
175
|
-
<Icon size={24} />
|
|
176
|
-
</div>
|
|
177
|
-
<span className="max-w-full break-words text-[10px] font-medium tracking-wide text-ph-mutedtext">{label}</span>
|
|
178
|
-
</div>
|
|
179
|
-
))}
|
|
180
|
-
</div>
|
|
181
|
-
</section>
|
|
182
|
-
|
|
183
|
-
<section className="ph-panel space-y-4">
|
|
184
|
-
<div>
|
|
185
|
-
<h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Lemon icons (PostHog port)</h3>
|
|
186
|
-
<p className="mt-2 max-w-3xl text-sm leading-relaxed text-ph-subtle">
|
|
187
|
-
Browser, OS, brand, and UI icons ported from PostHog's lemon-ui icon set.
|
|
188
|
-
</p>
|
|
189
|
-
</div>
|
|
190
|
-
<div className="grid grid-cols-4 gap-3 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10">
|
|
191
|
-
{lemonIcons.map(({ Icon, label }) => (
|
|
192
|
-
<div key={label} className="flex min-w-0 flex-col items-center gap-2 rounded-lg border border-ph-border-subtle bg-ph-raised p-3 text-center">
|
|
193
|
-
<div className="flex h-8 items-center gap-2 text-ph-ink">
|
|
194
|
-
<Icon size={16} />
|
|
195
|
-
<Icon size={24} />
|
|
196
|
-
</div>
|
|
197
|
-
<span className="max-w-full break-words text-[10px] font-medium tracking-wide text-ph-mutedtext">{label}</span>
|
|
198
|
-
</div>
|
|
199
|
-
))}
|
|
200
|
-
</div>
|
|
201
|
-
</section>
|
|
202
|
-
|
|
203
94
|
<section className="ph-panel space-y-4">
|
|
204
95
|
<div>
|
|
205
96
|
<h3 className="text-xs font-semibold uppercase tracking-wider text-ph-mutedtext">Product hues</h3>
|
|
@@ -11,7 +11,7 @@ import {
|
|
|
11
11
|
ComponentDocs, ShowcaseWrapper,
|
|
12
12
|
Button, Card, Badge, Dialog, Input, Checkbox, Textarea, Select,
|
|
13
13
|
} from "@/components/ui";
|
|
14
|
-
import { Bell,
|
|
14
|
+
import { Bell, Settings, User, Search, Plus } from "iconoir-react";
|
|
15
15
|
|
|
16
16
|
const bannerCode = `import { Banner } from "@xenide-io/the-old-ui-theme";
|
|
17
17
|
|
|
@@ -42,10 +42,10 @@ const progressCircleCode = `import { ProgressCircle } from "@xenide-io/the-old-u
|
|
|
42
42
|
</ProgressCircle>`;
|
|
43
43
|
|
|
44
44
|
const rowCode = `import { Row } from "@xenide-io/the-old-ui-theme";
|
|
45
|
-
import { User,
|
|
45
|
+
import { User, Settings } from "iconoir-react";
|
|
46
46
|
|
|
47
47
|
<Row icon={<User className="h-4 w-4" />}>User profile</Row>
|
|
48
|
-
<Row sideIcon={<
|
|
48
|
+
<Row sideIcon={<Settings className="h-4 w-4" />}>Settings</Row>`;
|
|
49
49
|
|
|
50
50
|
const widgetCode = `import { Widget } from "@xenide-io/the-old-ui-theme";
|
|
51
51
|
|
|
@@ -251,7 +251,7 @@ export default function NewComponentsShowcase() {
|
|
|
251
251
|
>
|
|
252
252
|
<div className="space-y-3">
|
|
253
253
|
<Row icon={<User className="h-4 w-4" />}>User profile</Row>
|
|
254
|
-
<Row sideIcon={<
|
|
254
|
+
<Row sideIcon={<Settings className="h-4 w-4" />}>Settings</Row>
|
|
255
255
|
<Row icon={<Bell className="h-4 w-4" />} sideIcon={<Badge variant="danger">3</Badge>}>
|
|
256
256
|
Notifications
|
|
257
257
|
</Row>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { useState } from "react";
|
|
4
4
|
import { AppLayout, Sidebar, ShowcaseWrapper, Badge, Button } from "@/components/ui";
|
|
5
|
-
import { Home, Bell,
|
|
5
|
+
import { Home, Bell, TriangleFlag, User, Search, Flash } from "iconoir-react";
|
|
6
6
|
|
|
7
7
|
const sampleGroups = [
|
|
8
8
|
{
|
|
@@ -16,9 +16,9 @@ const sampleGroups = [
|
|
|
16
16
|
{
|
|
17
17
|
label: "Workspace",
|
|
18
18
|
items: [
|
|
19
|
-
{ label: "Projects", icon: <
|
|
19
|
+
{ label: "Projects", icon: <TriangleFlag className="h-4 w-4" /> },
|
|
20
20
|
{ label: "People", icon: <User className="h-4 w-4" /> },
|
|
21
|
-
{ label: "Automations", icon: <
|
|
21
|
+
{ label: "Automations", icon: <Flash className="h-4 w-4" /> },
|
|
22
22
|
],
|
|
23
23
|
},
|
|
24
24
|
];
|