@uselets/ui 1.15.0 → 1.16.0

package/README.md

@@ -406,6 +406,8 @@ Each module exports its public composition parts and prop types from the same im
 
 Layout primitives follow the same pattern: `Stack`, `Group`, and `Flex` support `gap: 'xs' | 'sm' | 'md' | 'lg' | 'xl'`, mapping to `4/8/16/24/32px`, plus typed `align: 'start' | 'end' | 'center' | 'baseline' | 'stretch'` and `justify: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'` props; `Group` also supports `wrap` (and defaults `align` to `center`); `Flex` additionally supports typed `direction` and `wrap`; `Center` supports `size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'` and `direction: 'horizontal' | 'vertical'`; and `Container` supports `size: 'sm' | 'md' | 'lg' | 'full'`. `SimpleGrid`, `Grid`, and `GridItem` accept direct layout values; use `useBreakpointValue` to derive responsive values when needed. `HiddenFrom` and `VisibleFrom` provide breakpoint-based visibility wrappers.
 
+`Pagination` highlights the current page and keeps the other links neutral. Its `color` prop (`UIColor`, default `primary`) controls only the current page's color. `PaginationLink`/`PaginationPrevious`/`PaginationNext` also accept `color` individually, but the value set on `Pagination` wins whenever it's provided.
+
 Public hooks are exported from the package root and from the `@uselets/ui/hooks/*` namespace:
 
 - `useBreakpoint` from `@uselets/ui/hooks/use-breakpoint`

package/dist/components/pagination.d.ts

@@ -2,7 +2,7 @@ import { n as __name } from "../rolldown-runtime-Bdj-bS2b.js";
 import { Button } from "./button.js";
 import * as React from "react";
 //#region src/components/pagination.d.ts
-type PaginationProps = React.ComponentProps<'nav'>;
+type PaginationProps = React.ComponentProps<'nav'> & Pick<React.ComponentProps<typeof Button>, 'color'>;
 type PaginationContentProps = React.ComponentProps<'ul'>;
 type PaginationItemProps = React.ComponentProps<'li'>;
 type PaginationLinkProps = {
@@ -15,7 +15,7 @@ type PaginationNextProps = React.ComponentProps<typeof PaginationLink> & {
   text?: string;
 };
 type PaginationEllipsisProps = React.ComponentProps<'span'>;
-declare function Pagination({ className, ...props }: PaginationProps): React.JSX.Element;
+declare function Pagination({ className, color, children, ...props }: PaginationProps): React.JSX.Element;
 declare function PaginationContent({ className, ...props }: PaginationContentProps): React.JSX.Element;
 declare function PaginationItem({ ...props }: PaginationItemProps): React.JSX.Element;
 declare function PaginationLink({ className, isActive, size, color, ...props }: PaginationLinkProps): React.JSX.Element;

package/dist/components/pagination.js

@@ -1,2 +1,2 @@
-import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{IconChevronLeft as n,IconChevronRight as r,IconDots as i}from"@tabler/icons-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";function Pagination({className:t,...n}){return a(`nav`,{"aria-label":`pagination`,"data-slot":`pagination`,className:e(`mx-auto flex w-full justify-center`,t),...n})}function PaginationContent({className:t,...n}){return a(`ul`,{"data-slot":`pagination-content`,className:e(`flex items-center gap-0.5`,t),...n})}function PaginationItem({...e}){return a(`li`,{"data-slot":`pagination-item`,...e})}function PaginationLink({className:n,isActive:r,size:i=`icon`,color:o=`zinc`,...s}){return a(t,{asChild:!0,variant:r?`outline`:`ghost`,color:o,size:i,className:e(n),children:a(`a`,{"aria-current":r?`page`:void 0,"data-slot":`pagination-link`,"data-active":r,...s})})}function PaginationPrevious({className:t,text:r=`Previous`,...i}){return o(PaginationLink,{"aria-label":`Go to previous page`,size:`md`,className:e(`pl-1.5!`,t),...i,children:[a(n,{"data-icon":`inline-start`}),a(`span`,{className:`hidden sm:block`,children:r})]})}function PaginationNext({className:t,text:n=`Next`,...i}){return o(PaginationLink,{"aria-label":`Go to next page`,size:`md`,className:e(`pr-1.5!`,t),...i,children:[a(`span`,{className:`hidden sm:block`,children:n}),a(r,{"data-icon":`inline-end`})]})}function PaginationEllipsis({className:t,...n}){return o(`span`,{"aria-hidden":!0,"data-slot":`pagination-ellipsis`,className:e(`flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4`,t),...n,children:[a(i,{}),a(`span`,{className:`sr-only`,children:`More pages`})]})}export{Pagination,PaginationContent,PaginationEllipsis,PaginationItem,PaginationLink,PaginationNext,PaginationPrevious};
+import"../rolldown-runtime-Bdj-bS2b.js";import{cn as e}from"../lib/utils.js";import{Button as t}from"./button.js";import{IconChevronLeft as n,IconChevronRight as r,IconDots as i}from"@tabler/icons-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import*as s from"react";const c=s.createContext({color:`primary`});function Pagination({className:t,color:n,children:r,...i}){return a(c.Provider,{value:{color:n},children:a(`nav`,{"aria-label":`pagination`,"data-slot":`pagination`,"data-color":n,className:e(`mx-auto flex w-full justify-center`,t),...i,children:r})})}function PaginationContent({className:t,...n}){return a(`ul`,{"data-slot":`pagination-content`,className:e(`flex items-center gap-0.5`,t),...n})}function PaginationItem({...e}){return a(`li`,{"data-slot":`pagination-item`,...e})}function PaginationLink({className:n,isActive:r,size:i=`icon`,color:o=`primary`,...l}){let u=s.useContext(c);return a(t,{asChild:!0,variant:r?`solid`:`secondary`,color:u.color||o,size:i,className:e(n),children:a(`a`,{"aria-current":r?`page`:void 0,"data-slot":`pagination-link`,"data-active":r,...l})})}function PaginationPrevious({className:t,text:r=``,...i}){return o(PaginationLink,{"aria-label":`Go to previous page`,size:r?`md`:`icon`,className:e(r&&`pl-1.5!`,t),...i,children:[a(n,{"data-icon":`inline-start`}),r&&a(`span`,{className:`hidden sm:block`,children:r})]})}function PaginationNext({className:t,text:n=``,...i}){return o(PaginationLink,{"aria-label":`Go to next page`,size:n?`md`:`icon`,className:e(n&&`pr-1.5!`,t),...i,children:[n&&a(`span`,{className:`hidden sm:block`,children:n}),a(r,{"data-icon":`inline-end`})]})}function PaginationEllipsis({className:t,...n}){return o(`span`,{"aria-hidden":!0,"data-slot":`pagination-ellipsis`,className:e(`flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4`,t),...n,children:[a(i,{}),a(`span`,{className:`sr-only`,children:`More pages`})]})}export{Pagination,PaginationContent,PaginationEllipsis,PaginationItem,PaginationLink,PaginationNext,PaginationPrevious};
 //# sourceMappingURL=pagination.js.map

package/dist/components/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","names":[],"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import type * as React from 'react'\n\nimport { IconChevronLeft, IconChevronRight, IconDots } from '@tabler/icons-react'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nexport type PaginationProps = React.ComponentProps<'nav'>\n\nexport type PaginationContentProps = React.ComponentProps<'ul'>\n\nexport type PaginationItemProps = React.ComponentProps<'li'>\n\nexport type PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, 'size' | 'color'> &\n  React.ComponentProps<'a'>\n\nexport type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink> & {\n  text?: string\n}\n\nexport type PaginationNextProps = React.ComponentProps<typeof PaginationLink> & {\n  text?: string\n}\n\nexport type PaginationEllipsisProps = React.ComponentProps<'span'>\n\nfunction Pagination({ className, ...props }: PaginationProps) {\n  return (\n    <nav\n      aria-label=\"pagination\"\n      data-slot=\"pagination\"\n      className={cn('mx-auto flex w-full justify-center', className)}\n      {...props}\n    />\n  )\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n  return <ul data-slot=\"pagination-content\" className={cn('flex items-center gap-0.5', className)} {...props} />\n}\n\nfunction PaginationItem({ ...props }: PaginationItemProps) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\nfunction PaginationLink({ className, isActive, size = 'icon', color = 'zinc', ...props }: PaginationLinkProps) {\n  return (\n    <Button asChild variant={isActive ? 'outline' : 'ghost'} color={color} size={size} className={cn(className)}>\n      <a aria-current={isActive ? 'page' : undefined} data-slot=\"pagination-link\" data-active={isActive} {...props} />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({ className, text = 'Previous', ...props }: PaginationPreviousProps) {\n  return (\n    <PaginationLink aria-label=\"Go to previous page\" size=\"md\" className={cn('pl-1.5!', className)} {...props}>\n      <IconChevronLeft data-icon=\"inline-start\" />\n      <span className=\"hidden sm:block\">{text}</span>\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({ className, text = 'Next', ...props }: PaginationNextProps) {\n  return (\n    <PaginationLink aria-label=\"Go to next page\" size=\"md\" className={cn('pr-1.5!', className)} {...props}>\n      <span className=\"hidden sm:block\">{text}</span>\n      <IconChevronRight data-icon=\"inline-end\" />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({ className, ...props }: PaginationEllipsisProps) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconDots />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious\n}\n"],"mappings":"8PA4BA,SAAS,WAAW,CAAE,YAAW,GAAG,GAA0B,CAC5D,OACE,EAAC,MAAD,CACE,aAAW,aACX,YAAU,aACV,UAAW,EAAG,qCAAsC,CAAS,EAC7D,GAAI,CACL,CAAA,CAEL,CAEA,SAAS,kBAAkB,CAAE,YAAW,GAAG,GAAiC,CAC1E,OAAO,EAAC,KAAD,CAAI,YAAU,qBAAqB,UAAW,EAAG,4BAA6B,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC/G,CAEA,SAAS,eAAe,CAAE,GAAG,GAA8B,CACzD,OAAO,EAAC,KAAD,CAAI,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CACrD,CAEA,SAAS,eAAe,CAAE,YAAW,WAAU,OAAO,OAAQ,QAAQ,OAAQ,GAAG,GAA8B,CAC7G,OACE,EAAC,EAAD,CAAQ,QAAA,GAAQ,QAAS,EAAW,UAAY,QAAgB,QAAa,OAAM,UAAW,EAAG,CAAS,EACxG,SAAA,EAAC,IAAD,CAAG,eAAc,EAAW,OAAS,IAAA,GAAW,YAAU,kBAAkB,cAAa,EAAU,GAAI,CAAQ,CAAA,CACzG,CAAA,CAEZ,CAEA,SAAS,mBAAmB,CAAE,YAAW,OAAO,WAAY,GAAG,GAAkC,CAC/F,OACE,EAAC,eAAD,CAAgB,aAAW,sBAAsB,KAAK,KAAK,UAAW,EAAG,UAAW,CAAS,EAAG,GAAI,EAApG,SAAA,CACE,EAAC,EAAD,CAAiB,YAAU,cAAgB,CAAA,EAC3C,EAAC,OAAD,CAAM,UAAU,kBAAmB,SAAA,CAAW,CAAA,CAChC,GAEpB,CAEA,SAAS,eAAe,CAAE,YAAW,OAAO,OAAQ,GAAG,GAA8B,CACnF,OACE,EAAC,eAAD,CAAgB,aAAW,kBAAkB,KAAK,KAAK,UAAW,EAAG,UAAW,CAAS,EAAG,GAAI,EAAhG,SAAA,CACE,EAAC,OAAD,CAAM,UAAU,kBAAmB,SAAA,CAAW,CAAA,EAC9C,EAAC,EAAD,CAAkB,YAAU,YAAc,CAAA,CAC5B,GAEpB,CAEA,SAAS,mBAAmB,CAAE,YAAW,GAAG,GAAkC,CAC5E,OACE,EAAC,OAAD,CACE,cAAA,GACA,YAAU,sBACV,UAAW,EAAG,+EAAgF,CAAS,EACvG,GAAI,EAJN,SAAA,CAME,EAAC,EAAD,CAAW,CAAA,EACX,EAAC,OAAD,CAAM,UAAU,UAAU,SAAA,YAAgB,CAAA,CACtC,GAEV"}
+{"version":3,"file":"pagination.js","names":[],"sources":["../../src/components/pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { IconChevronLeft, IconChevronRight, IconDots } from '@tabler/icons-react'\n\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\nconst PaginationContext = React.createContext<Pick<React.ComponentProps<typeof Button>, 'color'>>({\n  color: 'primary'\n})\n\nexport type PaginationProps = React.ComponentProps<'nav'> & Pick<React.ComponentProps<typeof Button>, 'color'>\n\nexport type PaginationContentProps = React.ComponentProps<'ul'>\n\nexport type PaginationItemProps = React.ComponentProps<'li'>\n\nexport type PaginationLinkProps = {\n  isActive?: boolean\n} & Pick<React.ComponentProps<typeof Button>, 'size' | 'color'> &\n  React.ComponentProps<'a'>\n\nexport type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink> & {\n  text?: string\n}\n\nexport type PaginationNextProps = React.ComponentProps<typeof PaginationLink> & {\n  text?: string\n}\n\nexport type PaginationEllipsisProps = React.ComponentProps<'span'>\n\nfunction Pagination({ className, color, children, ...props }: PaginationProps) {\n  return (\n    <PaginationContext.Provider value={{ color }}>\n      <nav\n        aria-label=\"pagination\"\n        data-slot=\"pagination\"\n        data-color={color}\n        className={cn('mx-auto flex w-full justify-center', className)}\n        {...props}\n      >\n        {children}\n      </nav>\n    </PaginationContext.Provider>\n  )\n}\n\nfunction PaginationContent({ className, ...props }: PaginationContentProps) {\n  return <ul data-slot=\"pagination-content\" className={cn('flex items-center gap-0.5', className)} {...props} />\n}\n\nfunction PaginationItem({ ...props }: PaginationItemProps) {\n  return <li data-slot=\"pagination-item\" {...props} />\n}\n\nfunction PaginationLink({ className, isActive, size = 'icon', color = 'primary', ...props }: PaginationLinkProps) {\n  const context = React.useContext(PaginationContext)\n\n  return (\n    <Button\n      asChild\n      variant={isActive ? 'solid' : 'secondary'}\n      color={context.color || color}\n      size={size}\n      className={cn(className)}\n    >\n      <a aria-current={isActive ? 'page' : undefined} data-slot=\"pagination-link\" data-active={isActive} {...props} />\n    </Button>\n  )\n}\n\nfunction PaginationPrevious({ className, text = '', ...props }: PaginationPreviousProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to previous page\"\n      size={text ? 'md' : 'icon'}\n      className={cn(text && 'pl-1.5!', className)}\n      {...props}\n    >\n      <IconChevronLeft data-icon=\"inline-start\" />\n      {text && <span className=\"hidden sm:block\">{text}</span>}\n    </PaginationLink>\n  )\n}\n\nfunction PaginationNext({ className, text = '', ...props }: PaginationNextProps) {\n  return (\n    <PaginationLink\n      aria-label=\"Go to next page\"\n      size={text ? 'md' : 'icon'}\n      className={cn(text && 'pr-1.5!', className)}\n      {...props}\n    >\n      {text && <span className=\"hidden sm:block\">{text}</span>}\n      <IconChevronRight data-icon=\"inline-end\" />\n    </PaginationLink>\n  )\n}\n\nfunction PaginationEllipsis({ className, ...props }: PaginationEllipsisProps) {\n  return (\n    <span\n      aria-hidden\n      data-slot=\"pagination-ellipsis\"\n      className={cn(\"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      <IconDots />\n      <span className=\"sr-only\">More pages</span>\n    </span>\n  )\n}\n\nexport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious\n}\n"],"mappings":"sRAOA,MAAM,EAAoB,EAAM,cAAkE,CAChG,MAAO,SACT,CAAC,EAuBD,SAAS,WAAW,CAAE,YAAW,QAAO,WAAU,GAAG,GAA0B,CAC7E,OACE,EAAC,EAAkB,SAAnB,CAA4B,MAAO,CAAE,OAAM,EACzC,SAAA,EAAC,MAAD,CACE,aAAW,aACX,YAAU,aACV,aAAY,EACZ,UAAW,EAAG,qCAAsC,CAAS,EAC7D,GAAI,EAEH,UACE,CAAA,CACqB,CAAA,CAEhC,CAEA,SAAS,kBAAkB,CAAE,YAAW,GAAG,GAAiC,CAC1E,OAAO,EAAC,KAAD,CAAI,YAAU,qBAAqB,UAAW,EAAG,4BAA6B,CAAS,EAAG,GAAI,CAAQ,CAAA,CAC/G,CAEA,SAAS,eAAe,CAAE,GAAG,GAA8B,CACzD,OAAO,EAAC,KAAD,CAAI,YAAU,kBAAkB,GAAI,CAAQ,CAAA,CACrD,CAEA,SAAS,eAAe,CAAE,YAAW,WAAU,OAAO,OAAQ,QAAQ,UAAW,GAAG,GAA8B,CAChH,IAAM,EAAU,EAAM,WAAW,CAAiB,EAElD,OACE,EAAC,EAAD,CACE,QAAA,GACA,QAAS,EAAW,QAAU,YAC9B,MAAO,EAAQ,OAAS,EAClB,OACN,UAAW,EAAG,CAAS,EAEvB,SAAA,EAAC,IAAD,CAAG,eAAc,EAAW,OAAS,IAAA,GAAW,YAAU,kBAAkB,cAAa,EAAU,GAAI,CAAQ,CAAA,CACzG,CAAA,CAEZ,CAEA,SAAS,mBAAmB,CAAE,YAAW,OAAO,GAAI,GAAG,GAAkC,CACvF,OACE,EAAC,eAAD,CACE,aAAW,sBACX,KAAM,EAAO,KAAO,OACpB,UAAW,EAAG,GAAQ,UAAW,CAAS,EAC1C,GAAI,EAJN,SAAA,CAME,EAAC,EAAD,CAAiB,YAAU,cAAgB,CAAA,EAC1C,GAAQ,EAAC,OAAD,CAAM,UAAU,kBAAmB,SAAA,CAAW,CAAA,CACzC,GAEpB,CAEA,SAAS,eAAe,CAAE,YAAW,OAAO,GAAI,GAAG,GAA8B,CAC/E,OACE,EAAC,eAAD,CACE,aAAW,kBACX,KAAM,EAAO,KAAO,OACpB,UAAW,EAAG,GAAQ,UAAW,CAAS,EAC1C,GAAI,EAJN,SAAA,CAMG,GAAQ,EAAC,OAAD,CAAM,UAAU,kBAAmB,SAAA,CAAW,CAAA,EACvD,EAAC,EAAD,CAAkB,YAAU,YAAc,CAAA,CAC5B,GAEpB,CAEA,SAAS,mBAAmB,CAAE,YAAW,GAAG,GAAkC,CAC5E,OACE,EAAC,OAAD,CACE,cAAA,GACA,YAAU,sBACV,UAAW,EAAG,+EAAgF,CAAS,EACvG,GAAI,EAJN,SAAA,CAME,EAAC,EAAD,CAAW,CAAA,EACX,EAAC,OAAD,CAAM,UAAU,UAAU,SAAA,YAAgB,CAAA,CACtC,GAEV"}

package/dist/skills/uselets-ui/references/component-catalog.md

@@ -222,6 +222,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuContent`, `NavigationMenuTrigger`, `NavigationMenuLink`, `NavigationMenuIndicator`, `NavigationMenuViewport`, `navigationMenuTriggerStyle`
 - `pagination`
   - Exports: `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationLink`, `PaginationNext`, `PaginationPrevious`
+  - Notes: `Pagination` highlights the current page and keeps other links neutral. `Pagination.color` (a `UIColor`, default `primary`) controls only the current page's color. Each `PaginationLink`/`PaginationPrevious`/`PaginationNext` can still pass its own `color`, but `Pagination`'s wins when set.
 - `sidebar`
   - Exports: `Sidebar`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupAction`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarInput`, `SidebarInset`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSkeleton`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarRail`, `SidebarSeparator`, `SidebarTrigger`, `useSidebar`
 - `stepper`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uselets/ui",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "type": "module",
   "private": false,
   "description": "React component library for the LET'S design system.",

package/skills/uselets-ui/references/component-catalog.md

@@ -222,6 +222,7 @@ Unless noted otherwise, each module also exports its public `*Props` types from
   - Exports: `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuContent`, `NavigationMenuTrigger`, `NavigationMenuLink`, `NavigationMenuIndicator`, `NavigationMenuViewport`, `navigationMenuTriggerStyle`
 - `pagination`
   - Exports: `Pagination`, `PaginationContent`, `PaginationEllipsis`, `PaginationItem`, `PaginationLink`, `PaginationNext`, `PaginationPrevious`
+  - Notes: `Pagination` highlights the current page and keeps other links neutral. `Pagination.color` (a `UIColor`, default `primary`) controls only the current page's color. Each `PaginationLink`/`PaginationPrevious`/`PaginationNext` can still pass its own `color`, but `Pagination`'s wins when set.
 - `sidebar`
   - Exports: `Sidebar`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupAction`, `SidebarGroupContent`, `SidebarGroupLabel`, `SidebarHeader`, `SidebarInput`, `SidebarInset`, `SidebarMenu`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuButton`, `SidebarMenuItem`, `SidebarMenuSkeleton`, `SidebarMenuSub`, `SidebarMenuSubButton`, `SidebarMenuSubItem`, `SidebarProvider`, `SidebarRail`, `SidebarSeparator`, `SidebarTrigger`, `useSidebar`
 - `stepper`