npm - @lessly/ui - Versions diffs - 0.4.1 → 0.6.0 - Mend

@lessly/ui 0.4.1 → 0.6.0

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.

Files changed (7) hide show

package/README.md +29 -12
package/dist/index.d.ts +119 -5
package/dist/index.js +356 -93
package/dist/styles.css +690 -106
package/dist/tailwind-preset.d.ts +4 -394
package/dist/tailwind-preset.js +4 -425
package/package.json +9 -2

package/README.md CHANGED Viewed

@@ -6,20 +6,25 @@ Module Federation host provides to federation extension remotes at runtime, and
 it is published to the public npm registry (npmjs.com).
 > **Contract:** the package name (`@lessly/ui`), its exports (`.`,
-> `./tailwind-preset`, `./styles.css`), and its React 19 peer dependencies are a
-> cross-project contract. Do not change them without coordinating the workspace
-> host and every federation remote.
+> `./tailwind-preset`, `./styles.css`), and its peer dependencies (React 19,
+> react-router 7, optional `tailwindcss >=3.4`) are a cross-project contract. Do
+> not change them without coordinating the workspace host and every federation
+> remote.
 ## What's inside
-- **Components:** Button, Card, Dialog, DropdownMenu, Input, Label, SectionIntro,
-  Select, Switch.
+- **Components:** shadcn/radix primitives themed by Lessly tokens (Button,
+  Dialog, Select, Tabs, …) plus layout: `Grid` / `Col` (the adaptive 4 / 8 / 12
+  column grid) and `GridOverlay` (a design-aid overlay). The full catalog lives
+  in Storybook at [ui.lessly.com](https://ui.lessly.com).
 - **Theme:** `useTheme` hook + `ThemeToggle` (toggles the `light` class on
   `<html>`; `:root` is dark, `.light` is light).
-- **Tokens:** `tailwind-preset` (spacing, colors, typography, radii, …) and
-  `styles.css` (CSS variables, fonts, `.light` overrides). Token values are
-  generated upstream in `lessly-hub/design-system` and vendored here — do not
-  hand-edit them.
+- **Tokens:** the `tailwind-preset` re-exports the token vocabulary from
+  [`@lessly/tokens`](https://www.npmjs.com/package/@lessly/tokens) (generated
+  upstream in `lessly-hub/design-system`) with `darkMode: 'class'` added, and
+  `styles.css` bundles the package's `theme.css` (CSS variables, `.light`
+  overrides, typography classes) plus this library's fonts and base layer.
+  Token values are never edited here — they change by bumping `@lessly/tokens`.
 ## Install
@@ -37,13 +42,25 @@ import { Button, useTheme } from '@lessly/ui';
 import '@lessly/ui/styles.css';
 ```
-Your app's Tailwind config must use the preset so token utilities resolve:
+Your app's Tailwind config must use the preset so token utilities resolve. The
+preset needs Tailwind CSS >= 3.4 (declared as an optional peer dependency —
+only required if you consume the preset):
 ```ts
 import { lesslyPreset } from '@lessly/ui/tailwind-preset';
-export default { presets: [lesslyPreset], content: ['./src/**/*.{ts,tsx}'] };
+export default {
+  presets: [lesslyPreset],
+  // Scan the library too — its components (Grid, Col, …) use literal token
+  // utilities (`md:col-span-5`, `gap-gutter`) that Tailwind must see to generate.
+  content: ['./src/**/*.{ts,tsx}', './node_modules/@lessly/ui/dist/**/*.js'],
+};
 ```
+CSS variables use the upstream unprefixed names (`--bg-primary`,
+`--text-primary`, …). The old `--color-*` names still resolve through a
+deprecated alias layer in `styles.css` and will be removed in the next major —
+migrate any direct `var(--color-*)` reads.
 ## Storybook
 ```bash
@@ -65,7 +82,7 @@ npm package published to npmjs always contains the package, never the Storybook
 | Script | Description |
 | --- | --- |
-| `pnpm build` | tsup package build → `dist/` (+ copies `styles.css`) — the npm package published to npmjs |
+| `pnpm build` | tsup package build → `dist/` (+ assembles `styles.css` from the @lessly/tokens theme, deprecated `--color-*` aliases, ui-local pieces, and the animation layer) — the npm package published to npmjs |
 | `pnpm build-storybook` | Storybook static site → `storybook-static/` — what the static-service pipeline deploys to `ui.lessly.com` |
 | `pnpm storybook` | Storybook dev server on `http://localhost:6006` |
 | `pnpm test` | Vitest |

package/dist/index.d.ts CHANGED Viewed

@@ -652,6 +652,8 @@ declare function ConfirmDialog({ open, onOpenChange, trigger, title, description
 interface UserMenuUser {
     name: string;
+    /** Second line of the row. The shipped rail shows the org name here. */
+    subtitle?: string;
     email?: string;
     avatarUrl?: string;
 }
@@ -822,10 +824,22 @@ declare function SidebarNav({ items, collapsed, basePath, LinkComponent, isItemA
 interface AppSidebarProps {
     items: NavItem[];
+    /** Expanded-slot mark/wordmark, rendered when `header` is absent. Also the collapsed-rail
+     *  fallback when `logoCollapsed` isn't given — see `logoCollapsed`. */
     logo?: React$1.ReactNode;
+    /** Collapsed-rail identity — a small mark, shown overlaid by the pin on hover/focus when
+     *  `collapsible`. A collapsible rail should supply this (or `logo`): `header` is expanded-only
+     *  and is never read while collapsed, so without a mark the collapsed rail shows just the pin. */
     logoCollapsed?: React$1.ReactNode;
+    /** Identity slot above the rail — e.g. a <SidebarProductHeader/>. Falls back to `logo`.
+     *  Expanded-only: rendering it in the 52px collapsed rail would overflow, so the collapsed
+     *  branch never reads it — supply `logoCollapsed` (or `logo`) for that state instead. */
     header?: React$1.ReactNode;
+    /** Account slot below the rail — e.g. a <UserMenu/>. Its divider renders only with it. */
     footer?: React$1.ReactNode;
+    /** Render the built-in collapse pin. Off by default: the shipped rail has none.
+     *  `collapsed` is still honoured without it, for consumers driving collapse themselves. */
+    collapsible?: boolean;
     collapsed?: boolean;
     defaultCollapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
@@ -834,7 +848,38 @@ interface AppSidebarProps {
     isItemActive?: (item: NavItem, pathname: string) => boolean;
     className?: string;
 }
-declare function AppSidebar({ items, logo, logoCollapsed, header, footer, collapsed: controlled, defaultCollapsed, onCollapsedChange, basePath, LinkComponent, isItemActive, className, }: AppSidebarProps): React$1.JSX.Element;
+declare function AppSidebar({ items, logo, logoCollapsed, header, footer, collapsible, collapsed: controlled, defaultCollapsed, onCollapsedChange, basePath, LinkComponent, isItemActive, className, }: AppSidebarProps): React$1.JSX.Element;
+interface SidebarProductHeaderOwnProps {
+    /** Product name. Rendered at 13/600, truncated. */
+    name: string;
+    /** Leading mark, rendered in a fixed 28px box (the shipped tile). */
+    icon?: React$1.ReactNode;
+    /** Right-aligned adornment. Defaults to the 14px ChevronsUpDown of the shipped header;
+     *  pass `null` for none. */
+    trailing?: React$1.ReactNode;
+    className?: string;
+}
+/** Render the single child element instead of a button — e.g. a MenuPopup trigger.
+ *  The header composes its content from props, so the child's own children are replaced. */
+type SidebarProductHeaderProps = SidebarProductHeaderOwnProps & Omit<React$1.ComponentPropsWithoutRef<'button'>, 'children' | 'name'> & ({
+    asChild: true;
+    children: React$1.ReactElement;
+} | {
+    asChild?: false;
+    children?: never;
+});
+/** Identity row for the sidebar header slot: product tile + name, opening the product menu.
+ *
+ *  Deliberately inert on hover — no background, no transition — unlike the rail rows below
+ *  it. `rounded-xl` is not dead weight despite nothing tinting the box: this declares no
+ *  focus-visible ring, so the UA default ring is the only focus affordance, and that ring
+ *  follows border-radius.
+ *
+ *  Pair with `AppSidebar`'s `header` slot: the slot's 12px sides plus this trigger's own 6px
+ *  land the tile at 18px, while the trigger's box stays flush with the rail rows at 12px —
+ *  which anchors a `MenuPopup` at left:12 with the default sideOffset, no alignOffset. */
+declare const SidebarProductHeader: React$1.ForwardRefExoticComponent<SidebarProductHeaderProps & React$1.RefAttributes<HTMLButtonElement>>;
 interface AppShellProps {
     /** The sidebar, typically an <AppSidebar/>. Rendered in the desktop rail and,
@@ -848,6 +893,73 @@ declare function AppShell({ sidebar, topBar, children, className }: AppShellProp
 /** Alias of AppShell — reads better in app router files. */
 declare const AuthenticatedLayout: typeof AppShell;
+/**
+ * Grid — the adaptive 4 / 8 / 12 column container. Column count switches at the
+ * token breakpoints (4 below md, 8 at md/768, 12 at xl/1280). Gutter, side
+ * margins and the max-width are tokenised: `gap-gutter`, `px-grid-*` and
+ * `max-w-container` are var-backed by @lessly/tokens theme.css (--grid-*).
+ * Place <Col> children inside.
+ *
+ * The grid owns the container — it centres and caps content at the container
+ * token (1440) by default. Set `fluid` for a full-bleed row that keeps the
+ * gutter and side margins but drops the max-width cap.
+ *
+ * Note: the token utilities are custom theme keys tailwind-merge doesn't
+ * classify, so a `className` like `px-6` or `gap-2` does NOT replace them —
+ * both classes are emitted and CSS source order decides. Don't override the
+ * grid's spacing via className; use `fluid` or wrap the grid instead.
+ */
+interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Drop the max-width cap for a full-bleed row (gutter + margins stay). */
+    fluid?: boolean;
+    /** Render as the child element via Radix Slot instead of a div. */
+    asChild?: boolean;
+}
+declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Col — a child of <Grid>. Spans columns of the adaptive 4 / 8 / 12 track using
+ * literal `col-span-*` / `col-start-*` classes. Pure CSS: no context, no
+ * measurement.
+ *
+ * Spans and offsets are expressed as literal Tailwind classes (never CSS
+ * variables), so the values are visible to Tailwind's content scanner. The
+ * lookup maps below hold every class as a verbatim string for that reason — do
+ * NOT rebuild them with template literals (`col-span-${n}`), which the JIT would
+ * never see and so would never generate.
+ */
+/** Constant across tiers (number) or set per breakpoint ({ base, md, xl }). */
+type Responsive = number | {
+    base?: number;
+    md?: number;
+    xl?: number;
+};
+interface ColProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Columns to span. Number = same on every tier, clamped to each tier's column
+     * count (with a dev warning past a tier's max — express full width as
+     * `{ base: 4, md: 8, xl: 12 }` instead of `12`); object = per breakpoint.
+     */
+    span?: Responsive;
+    /**
+     * Leading empty columns (→ col-start). Number or per-breakpoint object.
+     * Clamped per tier (with a dev warning) so offset + span stay inside the
+     * tier's track instead of forcing an implicit column.
+     */
+    offset?: Responsive;
+    /** Render as the child element via Radix Slot instead of a div. */
+    asChild?: boolean;
+}
+declare const Col: React$1.ForwardRefExoticComponent<ColProps & React$1.RefAttributes<HTMLDivElement>>;
+interface GridOverlayProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /** Number of columns to paint (e.g. 4, 8 or 12). Fixed, viewport-independent. */
+    columns: number;
+    /** Also paint the baseline rhythm (horizontal lines) behind the columns. */
+    baseline?: boolean;
+}
+declare const GridOverlay: React$1.ForwardRefExoticComponent<GridOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const segmentChipVariants: (props?: ({
     kind?: "granted" | "own" | "pending" | "available" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -880,9 +992,11 @@ interface ConnectionCardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     action?: React$1.ReactNode;
     /**
      * Blast-radius disclosure. Some providers (GitHub, ClickUp) grant all-or-nothing
-     * access to the whole external org — there is no per-repo/per-space permission, so
-     * a product's segment is enforced by Lessly's gateway, not the provider. When set,
-     * a warning notice is shown, e.g. "Full org access — all repositories."
+     * access to the whole external org — there is no per-repo/per-space permission,
+     * and the vended credential genuinely reaches the whole external org. Copy passed
+     * here must state that blast radius honestly (e.g. "Full org access — any product
+     * granted this connection can reach every repository"); do NOT claim the segment
+     * is enforced by Lessly — for these providers it is not.
      */
     access?: React$1.ReactNode;
     /**
@@ -919,4 +1033,4 @@ interface RequestRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, '
 }
 declare const RequestRow: React$1.ForwardRefExoticComponent<RequestRowProps & React$1.RefAttributes<HTMLDivElement>>;
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConnectionAuth, ConnectionCard, type ConnectionCardProps, type ConnectionScope, type ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, isKnownExtensionIcon, navigationMenuTriggerStyle, segmentChipVariants, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, type AppShellProps, AppSidebar, type AppSidebarProps, AspectRatio, AuthenticatedLayout, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, Checkbox, Col, type ColProps, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ConfirmDialog, type ConfirmDialogProps, type ConnectionAuth, ConnectionCard, type ConnectionCardProps, type ConnectionScope, type ConnectionStatus, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, type CopyButtonProps, DatePicker, type DatePickerProps, type DeltaDirection, type DeltaTone, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DocsLink, type DocsLinkProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExtensionIcon, type ExtensionIconProps, ExtensionLink, type ExtensionLinkProps, type ExtensionLinkUiMode, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, GridOverlay, type GridOverlayProps, type GridProps, HoverCard, HoverCardContent, HoverCardTrigger, InlineError, type InlineErrorProps, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, type InputProps, Label, MenuDivider, MenuPopup, type MenuPopupProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, type NavItem, type NavLinkComponent, NavRow, type NavRowProps, type NavRowVariant, NavSectionLabel, type NavSectionLabelProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, RequestRow, type RequestRowProps, type RequestState, type RequestSurface, type ResolvedTheme, type Responsive, ScrollArea, ScrollBar, SectionIntro, type SectionIntroProps, SegmentChip, type SegmentChipProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarNav, SidebarNavLink, type SidebarNavLinkProps, type SidebarNavProps, SidebarProductHeader, type SidebarProductHeaderProps, Skeleton, Slider, StatCard, type StatCardProps, StatusDot, type StatusDotProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSidebarOptions, type UseSidebarResult, UserMenu, type UserMenuItem, type UserMenuProps, type UserMenuUser, alertVariants, badgeVariants, buttonVariants, cn, isKnownExtensionIcon, navigationMenuTriggerStyle, segmentChipVariants, statusDotVariants, toggleVariants, useCarousel, useFormField, useIsMobile, useSidebar, useTheme };