@bearmenu/ui 0.8.50 → 0.8.51

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 (15) hide show
  1. package/dist/components/avatar.d.ts +2 -2
  2. package/dist/components/badge.d.ts +1 -1
  3. package/dist/components/button.d.ts +2 -2
  4. package/dist/components/card.d.ts +2 -2
  5. package/dist/components/command.d.ts +15 -15
  6. package/dist/components/item.d.ts +2 -2
  7. package/dist/components/sliding-panels.d.ts +6 -0
  8. package/dist/components/sliding-panels.js +13 -3
  9. package/dist/components/spinner.d.ts +2 -2
  10. package/dist/components/tag.d.ts +2 -2
  11. package/dist/components/text.d.ts +3 -3
  12. package/dist/components/toggle.d.ts +1 -1
  13. package/package.json +23 -217
  14. package/src/components/sliding-panels.test.tsx +26 -4
  15. package/src/components/sliding-panels.tsx +15 -4
package/dist/components/avatar.d.ts CHANGED
@@ -5,13 +5,13 @@ import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const avatarVariants: (props?: ({
7
7
  size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
8
- tone?: "muted" | "brown" | "teal" | "green" | "blue" | "violet" | "rose" | null | undefined;
8
+ tone?: "brown" | "muted" | "teal" | "green" | "blue" | "violet" | "rose" | null | undefined;
9
9
  } & class_variance_authority_types.ClassProp) | undefined) => string;
10
10
  type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
11
11
  type AvatarTone = NonNullable<VariantProps<typeof avatarVariants>["tone"]>;
12
12
  declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
13
13
  size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
14
- tone?: "muted" | "brown" | "teal" | "green" | "blue" | "violet" | "rose" | null | undefined;
14
+ tone?: "brown" | "muted" | "teal" | "green" | "blue" | "violet" | "rose" | null | undefined;
15
15
  } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
16
16
  declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
17
17
  declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
package/dist/components/badge.d.ts CHANGED
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const badgeVariants: (props?: ({
7
- variant?: "default" | "destructive" | "warning" | "success" | "secondary" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
7
+ variant?: "code" | "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "warning" | "success" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
8
8
  size?: "status" | "chip" | null | undefined;
9
9
  live?: boolean | null | undefined;
10
10
  } & class_variance_authority_types.ClassProp) | undefined) => string;
package/dist/components/button.d.ts CHANGED
@@ -3,8 +3,8 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const buttonVariants: (props?: ({
6
- variant?: "default" | "destructive" | "warning" | "link" | "secondary" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
7
- size?: "default" | "icon" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
6
+ variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "warning" | "cta" | null | undefined;
7
+ size?: "default" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
8
8
  fullWidth?: boolean | null | undefined;
9
9
  } & class_variance_authority_types.ClassProp) | undefined) => string;
10
10
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
package/dist/components/card.d.ts CHANGED
@@ -3,12 +3,12 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const cardVariants: (props?: ({
6
- variant?: "muted" | "outline" | "glass" | "section" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
6
+ variant?: "section" | "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
7
7
  size?: "default" | "sm" | "lg" | null | undefined;
8
8
  interactive?: boolean | null | undefined;
9
9
  } & class_variance_authority_types.ClassProp) | undefined) => string;
10
10
  declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
11
- variant?: "muted" | "outline" | "glass" | "section" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
11
+ variant?: "section" | "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
12
12
  size?: "default" | "sm" | "lg" | null | undefined;
13
13
  interactive?: boolean | null | undefined;
14
14
  } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
package/dist/components/command.d.ts CHANGED
@@ -4,11 +4,11 @@ import { DialogProps } from '@radix-ui/react-dialog';
4
4
 
5
5
  declare const Command: React.ForwardRefExoticComponent<Omit<{
6
6
  children?: React.ReactNode;
7
- } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
7
+ } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
8
8
  ref?: React.Ref<HTMLDivElement>;
9
9
  } & {
10
10
  asChild?: boolean;
11
- }, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
11
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
12
12
  label?: string;
13
13
  shouldFilter?: boolean;
14
14
  filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -28,61 +28,61 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
28
28
  ref?: React.Ref<HTMLInputElement>;
29
29
  } & {
30
30
  asChild?: boolean;
31
- }, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
31
+ }, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
32
32
  value?: string;
33
33
  onValueChange?: (search: string) => void;
34
34
  } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
35
35
  declare const CommandList: React.ForwardRefExoticComponent<Omit<{
36
36
  children?: React.ReactNode;
37
- } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
37
+ } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
38
38
  ref?: React.Ref<HTMLDivElement>;
39
39
  } & {
40
40
  asChild?: boolean;
41
- }, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
41
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
42
42
  label?: string;
43
43
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
44
44
  declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
45
45
  children?: React.ReactNode;
46
- } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
46
+ } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
47
47
  ref?: React.Ref<HTMLDivElement>;
48
48
  } & {
49
49
  asChild?: boolean;
50
- }, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
50
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
51
51
  declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
52
52
  children?: React.ReactNode;
53
- } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
53
+ } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
54
54
  ref?: React.Ref<HTMLDivElement>;
55
55
  } & {
56
56
  asChild?: boolean;
57
- }, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
57
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
58
58
  progress?: number;
59
59
  label?: string;
60
60
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
61
61
  declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
62
62
  children?: React.ReactNode;
63
- } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
63
+ } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
64
64
  ref?: React.Ref<HTMLDivElement>;
65
65
  } & {
66
66
  asChild?: boolean;
67
- }, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
67
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
68
68
  heading?: React.ReactNode;
69
69
  value?: string;
70
70
  forceMount?: boolean;
71
71
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
72
- declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
72
+ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
73
73
  ref?: React.Ref<HTMLDivElement>;
74
74
  } & {
75
75
  asChild?: boolean;
76
- }, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
76
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
77
77
  alwaysRender?: boolean;
78
78
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
79
79
  declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
80
80
  children?: React.ReactNode;
81
- } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
81
+ } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
82
82
  ref?: React.Ref<HTMLDivElement>;
83
83
  } & {
84
84
  asChild?: boolean;
85
- }, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "value" | "disabled"> & {
85
+ }, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
86
86
  disabled?: boolean;
87
87
  onSelect?: (value: string) => void;
88
88
  value?: string;
package/dist/components/item.d.ts CHANGED
@@ -3,12 +3,12 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const itemVariants: (props?: ({
6
- variant?: "default" | "muted" | "outline" | null | undefined;
6
+ variant?: "default" | "outline" | "muted" | null | undefined;
7
7
  size?: "default" | "sm" | "lg" | null | undefined;
8
8
  interactive?: boolean | null | undefined;
9
9
  } & class_variance_authority_types.ClassProp) | undefined) => string;
10
10
  declare const Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
11
- variant?: "default" | "muted" | "outline" | null | undefined;
11
+ variant?: "default" | "outline" | "muted" | null | undefined;
12
12
  size?: "default" | "sm" | "lg" | null | undefined;
13
13
  interactive?: boolean | null | undefined;
14
14
  } & class_variance_authority_types.ClassProp) | undefined) => string> & {
package/dist/components/sliding-panels.d.ts CHANGED
@@ -5,7 +5,13 @@ interface Panel {
5
5
  id: string;
6
6
  content: React.ReactNode;
7
7
  showBackButton?: boolean;
8
+ /** Heading shown next to the back button (the panel's title, not the button's name). */
8
9
  backButtonLabel?: string;
10
+ /**
11
+ * Accessible name of the icon-only back button, localized by the caller.
12
+ * Falls back to "Back"; without a name screen readers announce only "button".
13
+ */
14
+ backAriaLabel?: string;
9
15
  onBack?: () => void;
10
16
  parentId?: string;
11
17
  }
package/dist/components/sliding-panels.js CHANGED
@@ -56,11 +56,12 @@ var SlidingPanels = ({
56
56
  {
57
57
  "data-slot": "sliding-panels",
58
58
  className: cn(
59
- "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
59
+ "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
60
60
  className
61
61
  ),
62
62
  style: { height: containerHeight, overflowClipMargin: "8px" },
63
63
  children: panels.map((panel, index) => {
64
+ var _a;
64
65
  const isActive = panel.id === currentPanel;
65
66
  const isLeft = usesTreeModel ? activeAncestors.has(panel.id) : index < currentIndex;
66
67
  const isRight = !isActive && !isLeft;
@@ -73,7 +74,7 @@ var SlidingPanels = ({
73
74
  "data-slot": "sliding-panel",
74
75
  "data-state": isActive ? "active" : "inactive",
75
76
  className: cn(
76
- "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
77
+ "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
77
78
  isActive && "translate-x-0",
78
79
  isLeft && "-translate-x-[calc(100%+8px)]",
79
80
  isRight && "translate-x-[calc(100%+8px)]"
@@ -82,7 +83,16 @@ var SlidingPanels = ({
82
83
  "aria-hidden": !isActive,
83
84
  children: [
84
85
  panel.showBackButton && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
85
- /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: handleBack, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
86
+ /* @__PURE__ */ jsx(
87
+ Button,
88
+ {
89
+ variant: "ghost",
90
+ size: "icon",
91
+ onClick: handleBack,
92
+ "aria-label": (_a = panel.backAriaLabel) != null ? _a : "Back",
93
+ children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true })
94
+ }
95
+ ),
86
96
  panel.backButtonLabel && /* @__PURE__ */ jsx("h3", { className: "font-semibold", children: panel.backButtonLabel })
87
97
  ] }),
88
98
  panel.content
package/dist/components/spinner.d.ts CHANGED
@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const spinnerVariants: (props?: ({
6
6
  size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
7
- tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
7
+ tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
10
10
  size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
11
- tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
11
+ tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
12
12
  } & class_variance_authority_types.ClassProp) | undefined) => string> & {
13
13
  /** Visually-hidden label for screen readers. Defaults to "Loading". */
14
14
  label?: string;
package/dist/components/tag.d.ts CHANGED
@@ -3,11 +3,11 @@ import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
4
 
5
5
  declare const tagVariants: (props?: ({
6
- variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | "quiet" | null | undefined;
6
+ variant?: "default" | "destructive" | "outline" | "warning" | "primary" | "success" | "quiet" | null | undefined;
7
7
  size?: "default" | "sm" | "lg" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
10
- variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | "quiet" | null | undefined;
10
+ variant?: "default" | "destructive" | "outline" | "warning" | "primary" | "success" | "quiet" | null | undefined;
11
11
  size?: "default" | "sm" | "lg" | null | undefined;
12
12
  } & class_variance_authority_types.ClassProp) | undefined) => string> & {
13
13
  onRemove?: () => void;
package/dist/components/text.d.ts CHANGED
@@ -22,9 +22,9 @@ import { VariantProps } from 'class-variance-authority';
22
22
  * Weights are 400 / 600 / 700. 500 is not in the system.
23
23
  */
24
24
  declare const textVariants: (props?: ({
25
- variant?: "small" | "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "label" | "overline" | null | undefined;
26
- color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
27
- weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
25
+ variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
26
+ color?: "inherit" | "default" | "destructive" | "primary" | "muted" | "primary-foreground" | null | undefined;
27
+ weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
28
28
  leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
29
29
  tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
30
30
  wrap?: "balance" | "pretty" | "nowrap" | null | undefined;
package/dist/components/toggle.d.ts CHANGED
@@ -11,7 +11,7 @@ import { VariantProps } from 'class-variance-authority';
11
11
  * `data-[state=on]:` utilities sort after `hover:` and still win while on.
12
12
  */
13
13
  declare const toggleVariants: (props?: ({
14
- variant?: "default" | "tab" | "outline" | "chip" | "segmented" | null | undefined;
14
+ variant?: "tab" | "default" | "outline" | "chip" | "segmented" | null | undefined;
15
15
  size?: "default" | "sm" | "lg" | null | undefined;
16
16
  } & class_variance_authority_types.ClassProp) | undefined) => string;
17
17
  /**
package/package.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "name": "@bearmenu/ui",
3
- "version": "0.8.50",
4
- "packageManager": "pnpm@10.28.1",
3
+ "version": "0.8.51",
5
4
  "description": "BearMenu design system — shared UI tokens, primitives, and components",
6
5
  "license": "UNLICENSED",
7
6
  "repository": {
@@ -17,223 +16,20 @@
17
16
  "src"
18
17
  ],
19
18
  "exports": {
20
- "./components/accordion": "./src/components/accordion.tsx",
21
- "./components/action-bar": "./src/components/action-bar.tsx",
22
- "./components/activity-row": "./src/components/activity-row.tsx",
23
- "./components/alert": "./src/components/alert.tsx",
24
- "./components/alert-dialog": "./src/components/alert-dialog.tsx",
25
- "./components/aspect-ratio": "./src/components/aspect-ratio.tsx",
26
- "./components/avatar": "./src/components/avatar.tsx",
27
- "./components/badge": "./src/components/badge.tsx",
28
- "./components/banner": "./src/components/banner.tsx",
29
- "./components/booking-row": "./src/components/booking-row.tsx",
30
- "./components/booking-summary-card": "./src/components/booking-summary-card.tsx",
31
- "./components/breadcrumb": "./src/components/breadcrumb.tsx",
32
- "./components/button": "./src/components/button.tsx",
33
- "./components/button-group": "./src/components/button-group.tsx",
34
- "./components/calendar": "./src/components/calendar.tsx",
35
- "./components/card": "./src/components/card.tsx",
36
- "./components/carousel": "./src/components/carousel.tsx",
37
- "./components/category-deck": "./src/components/category-deck.tsx",
38
- "./components/checkbox": "./src/components/checkbox.tsx",
39
- "./components/circular-progress": "./src/components/circular-progress.tsx",
40
- "./components/coach-marks": "./src/components/coach-marks.tsx",
41
- "./components/collapsible": "./src/components/collapsible.tsx",
42
- "./components/combobox": "./src/components/combobox.tsx",
43
- "./components/command": "./src/components/command.tsx",
44
- "./components/concept-card": "./src/components/concept-card.tsx",
45
- "./components/concept-compare": "./src/components/concept-compare.tsx",
46
- "./components/concept-compare-rail": "./src/components/concept-compare-rail.tsx",
47
- "./components/concept-convergence": "./src/components/concept-convergence.tsx",
48
- "./components/convergence": "./src/components/convergence.tsx",
49
- "./components/coverflow": "./src/components/coverflow.tsx",
50
- "./components/currency-input": "./src/components/currency-input.tsx",
51
- "./components/date-input": "./src/components/date-input.tsx",
52
- "./components/day-rail-chip": "./src/components/day-rail-chip.tsx",
53
- "./components/description-list": "./src/components/description-list.tsx",
54
- "./components/dialog": "./src/components/dialog.tsx",
55
- "./components/doorway-tiles": "./src/components/doorway-tiles.tsx",
56
- "./components/drawer": "./src/components/drawer.tsx",
57
- "./components/drift-rail": "./src/components/drift-rail.tsx",
58
- "./components/dropdown-menu": "./src/components/dropdown-menu.tsx",
59
- "./components/empty-state": "./src/components/empty-state.tsx",
60
- "./components/event-card": "./src/components/event-card.tsx",
61
- "./components/event-compact-row": "./src/components/event-compact-row.tsx",
62
- "./components/event-day-header": "./src/components/event-day-header.tsx",
63
- "./components/event-day-separator": "./src/components/event-day-separator.tsx",
64
- "./components/event-detail-panel": "./src/components/event-detail-panel.tsx",
65
- "./components/event-hub-hero": "./src/components/event-hub-hero.tsx",
66
- "./components/event-index-row": "./src/components/event-index-row.tsx",
67
- "./components/event-list-row": "./src/components/event-list-row.tsx",
68
- "./components/event-list-row-wide": "./src/components/event-list-row-wide.tsx",
69
- "./components/event-poster-fallback": "./src/components/event-poster-fallback.tsx",
70
- "./components/event-tonight-strip": "./src/components/event-tonight-strip.tsx",
71
- "./components/event-types": "./src/components/event-types.ts",
72
- "./components/events-empty-state": "./src/components/events-empty-state.tsx",
73
- "./components/explainer-steps": "./src/components/explainer-steps.tsx",
74
- "./components/facet-group": "./src/components/facet-group.tsx",
75
- "./components/featured-rail-item": "./src/components/featured-rail-item.tsx",
76
- "./components/field": "./src/components/field.tsx",
77
- "./components/filter-category-row": "./src/components/filter-category-row.tsx",
78
- "./components/form": "./src/components/form.tsx",
79
- "./components/glass-ground": "./src/components/glass-ground.tsx",
80
- "./components/grade-atom": "./src/components/grade-atom.tsx",
81
- "./components/haptic-switch": "./src/components/haptic-switch.tsx",
82
- "./components/hold-countdown": "./src/components/hold-countdown.tsx",
83
- "./components/hub-surface": "./src/components/hub-surface.tsx",
84
- "./components/hue-chip": "./src/components/hue-chip.tsx",
85
- "./components/icon": "./src/components/icon.tsx",
86
- "./components/input": "./src/components/input.tsx",
87
- "./components/input-group": "./src/components/input-group.tsx",
88
- "./components/input-otp": "./src/components/input-otp.tsx",
89
- "./components/item": "./src/components/item.tsx",
90
- "./components/kbd": "./src/components/kbd.tsx",
91
- "./components/label": "./src/components/label.tsx",
92
- "./components/kitchen-dossier": "./src/components/kitchen-dossier.tsx",
93
- "./components/lazy-markdown": "./src/components/lazy-markdown.tsx",
94
- "./components/link-button": "./src/components/link-button.tsx",
95
- "./components/markdown-renderer": "./src/components/markdown-renderer.tsx",
96
- "./components/menu-dead-end": "./src/components/menu-dead-end.tsx",
97
- "./components/menu-family-block": "./src/components/menu-family-block.tsx",
98
- "./components/menu-family-card": "./src/components/menu-family-card.tsx",
99
- "./components/menu-field": "./src/components/menu-field.tsx",
100
- "./components/menu-filter-chips": "./src/components/menu-filter-chips.tsx",
101
- "./components/menu-group-rows": "./src/components/menu-group-rows.tsx",
102
- "./components/menu-hub-hero": "./src/components/menu-hub-hero.tsx",
103
- "./components/menu-index-header": "./src/components/menu-index-header.tsx",
104
- "./components/menu-index-list": "./src/components/menu-index-list.tsx",
105
- "./components/menu-intent-hero": "./src/components/menu-intent-hero.tsx",
106
- "./components/menu-item": "./src/components/menu-item.tsx",
107
- "./components/menu-pick-row": "./src/components/menu-pick-row.tsx",
108
- "./components/menu-kitchen-list": "./src/components/menu-kitchen-list.tsx",
109
- "./components/menu-mocks": "./src/components/menu-mocks.ts",
110
- "./components/menu-types": "./src/components/menu-types.ts",
111
- "./components/motion-icon": "./src/components/motion-icon.tsx",
112
- "./components/motion-icon-actions": "./src/components/motion-icon-actions.tsx",
113
- "./components/motion-icon-controls": "./src/components/motion-icon-controls.tsx",
114
- "./components/motion-icon-set": "./src/components/motion-icon-set.tsx",
115
- "./components/multi-select-combobox": "./src/components/multi-select-combobox.tsx",
116
- "./components/multi-select-menu": "./src/components/multi-select-menu.tsx",
117
- "./components/native-select": "./src/components/native-select.tsx",
118
- "./components/open-now-list": "./src/components/open-now-list.tsx",
119
- "./components/pagination": "./src/components/pagination.tsx",
120
- "./components/pan-zoom-viewport": "./src/components/pan-zoom-viewport.tsx",
121
- "./components/party-counter": "./src/components/party-counter.tsx",
122
- "./components/phone-frame": "./src/components/phone-frame.tsx",
123
- "./components/photo-ground": "./src/components/photo-ground.tsx",
124
- "./components/place-about-tab": "./src/components/place-about-tab.tsx",
125
- "./components/place-card": "./src/components/place-card.tsx",
126
- "./components/place-details-mobile": "./src/components/place-details-mobile.tsx",
127
- "./components/place-schedule-week": "./src/components/place-schedule-week.tsx",
128
- "./components/place-types": "./src/components/place-types.ts",
129
- "./components/popover": "./src/components/popover.tsx",
130
- "./components/poster-stack": "./src/components/poster-stack.tsx",
131
- "./components/poster-tape": "./src/components/poster-tape.tsx",
132
- "./components/poster-wall": "./src/components/poster-wall.tsx",
133
- "./components/progress": "./src/components/progress.tsx",
134
- "./components/qa-block": "./src/components/qa-block.tsx",
135
- "./components/qr-panel": "./src/components/qr-panel.tsx",
136
- "./components/quiet-stretch": "./src/components/quiet-stretch.tsx",
137
- "./components/radio-group": "./src/components/radio-group.tsx",
138
- "./components/reconcile-bar": "./src/components/reconcile-bar.tsx",
139
- "./components/responsive-overlay": "./src/components/responsive-overlay.tsx",
140
- "./components/rating": "./src/components/rating.tsx",
141
- "./components/scroll-area": "./src/components/scroll-area.tsx",
142
- "./components/scroll-fade": "./src/components/scroll-fade.tsx",
143
- "./components/search-bar": "./src/components/search-bar.tsx",
144
- "./components/searchable-select": "./src/components/searchable-select.tsx",
145
- "./components/section-header": "./src/components/section-header.tsx",
146
- "./components/segmented-nav": "./src/components/segmented-nav.tsx",
147
- "./components/select": "./src/components/select.tsx",
148
- "./components/selection-bar": "./src/components/selection-bar.tsx",
149
- "./components/separator": "./src/components/separator.tsx",
150
- "./components/sheet": "./src/components/sheet.tsx",
151
- "./components/signature-chip": "./src/components/signature-chip.tsx",
152
- "./components/skeleton": "./src/components/skeleton.tsx",
153
- "./components/skeleton-card": "./src/components/skeleton-card.tsx",
154
- "./components/slider": "./src/components/slider.tsx",
155
- "./components/sliding-panels": "./src/components/sliding-panels.tsx",
156
- "./components/sonner": "./src/components/sonner.tsx",
157
- "./components/sort-option-list": "./src/components/sort-option-list.tsx",
158
- "./components/spinner": "./src/components/spinner.tsx",
159
- "./components/split-share-row": "./src/components/split-share-row.tsx",
160
- "./components/stat-banner": "./src/components/stat-banner.tsx",
161
- "./components/stepper": "./src/components/stepper.tsx",
162
- "./components/sticky-container": "./src/components/sticky-container.tsx",
163
- "./components/story": "./src/components/story.tsx",
164
- "./components/switch": "./src/components/switch.tsx",
165
- "./components/table": "./src/components/table.tsx",
166
- "./components/table-ledger-card": "./src/components/table-ledger-card.tsx",
167
- "./components/table-trigger-band": "./src/components/table-trigger-band.tsx",
168
- "./components/tabs": "./src/components/tabs.tsx",
169
- "./components/tag": "./src/components/tag.tsx",
170
- "./components/tag-group": "./src/components/tag-group.tsx",
171
- "./components/text": "./src/components/text.tsx",
172
- "./components/textarea": "./src/components/textarea.tsx",
173
- "./components/time-slot": "./src/components/time-slot.tsx",
174
- "./components/timeline-day": "./src/components/timeline-day.tsx",
175
- "./components/timeline-hour": "./src/components/timeline-hour.tsx",
176
- "./components/timeline-hour-puck": "./src/components/timeline-hour-puck.tsx",
177
- "./components/toggle": "./src/components/toggle.tsx",
178
- "./components/toggle-group": "./src/components/toggle-group.tsx",
179
- "./components/tooltip": "./src/components/tooltip.tsx",
180
- "./components/top-comparison": "./src/components/top-comparison.tsx",
181
- "./components/top-cross-link": "./src/components/top-cross-link.tsx",
182
- "./components/top-ranking-entry": "./src/components/top-ranking-entry.tsx",
183
- "./components/top-ranking-hero": "./src/components/top-ranking-hero.tsx",
184
- "./components/top-ranking-legend": "./src/components/top-ranking-legend.tsx",
185
- "./components/top-types": "./src/components/top-types.ts",
186
- "./components/use-mobile": "./src/components/use-mobile.tsx",
187
- "./components/venue-events-block": "./src/components/venue-events-block.tsx",
188
- "./components/venue-grade-dimensions": "./src/components/venue-grade-dimensions.tsx",
189
- "./components/venue-quotes": "./src/components/venue-quotes.tsx",
190
- "./components/venue-wall": "./src/components/venue-wall.tsx",
191
- "./components/weekday-chip": "./src/components/weekday-chip.tsx",
192
- "./components/weekday-theme-banner": "./src/components/weekday-theme-banner.tsx",
193
- "./components/weekend-panel": "./src/components/weekend-panel.tsx",
194
19
  "./globals.css": "./src/globals.css",
195
- "./hooks/use-drag-swipe": "./src/hooks/use-drag-swipe.ts",
196
- "./hooks/use-haptic": "./src/hooks/use-haptic.ts",
197
- "./hooks/use-media-query": "./src/hooks/use-media-query.ts",
198
- "./hooks/use-mobile": "./src/hooks/use-mobile.ts",
199
- "./hooks/use-mounted-theme": "./src/hooks/use-mounted-theme.ts",
200
- "./hooks/use-sticky": "./src/hooks/use-sticky.ts",
201
- "./lib/card-hover": "./src/lib/card-hover.ts",
202
- "./lib/grade": "./src/lib/grade.ts",
203
- "./lib/icon-depth": "./src/lib/icon-depth.ts",
204
- "./lib/icon-registry": "./src/lib/icon-registry.ts",
205
- "./lib/motion": "./src/lib/motion.ts",
206
- "./lib/overlay-pill": "./src/lib/overlay-pill.ts",
207
- "./lib/utils": "./src/lib/utils.ts"
208
- },
209
- "publishConfig": {
210
- "exports": {
211
- "./globals.css": "./src/globals.css",
212
- "./components/*": {
213
- "types": "./dist/components/*.d.ts",
214
- "import": "./dist/components/*.js"
215
- },
216
- "./hooks/*": {
217
- "types": "./dist/hooks/*.d.ts",
218
- "import": "./dist/hooks/*.js"
219
- },
220
- "./lib/*": {
221
- "types": "./dist/lib/*.d.ts",
222
- "import": "./dist/lib/*.js"
223
- }
20
+ "./components/*": {
21
+ "types": "./dist/components/*.d.ts",
22
+ "import": "./dist/components/*.js"
23
+ },
24
+ "./hooks/*": {
25
+ "types": "./dist/hooks/*.d.ts",
26
+ "import": "./dist/hooks/*.js"
27
+ },
28
+ "./lib/*": {
29
+ "types": "./dist/lib/*.d.ts",
30
+ "import": "./dist/lib/*.js"
224
31
  }
225
32
  },
226
- "scripts": {
227
- "storybook": "storybook dev -p 6006",
228
- "build-storybook": "storybook build",
229
- "build": "tsup",
230
- "dev": "tsup --watch",
231
- "typecheck": "tsc --noEmit",
232
- "test": "vitest run",
233
- "test:watch": "vitest",
234
- "clean": "rm -rf dist",
235
- "prepublishOnly": "pnpm run build"
236
- },
237
33
  "peerDependencies": {
238
34
  "@hookform/resolvers": "^3.0.0 || ^5.0.0",
239
35
  "@radix-ui/react-accordion": "*",
@@ -342,5 +138,15 @@
342
138
  "vaul": "^1.1.2",
343
139
  "vitest": "^4.1.5",
344
140
  "zod": "^3.25.67"
141
+ },
142
+ "scripts": {
143
+ "storybook": "storybook dev -p 6006",
144
+ "build-storybook": "storybook build",
145
+ "build": "tsup",
146
+ "dev": "tsup --watch",
147
+ "typecheck": "tsc --noEmit",
148
+ "test": "vitest run",
149
+ "test:watch": "vitest",
150
+ "clean": "rm -rf dist"
345
151
  }
346
- }
152
+ }
package/src/components/sliding-panels.test.tsx CHANGED
@@ -18,10 +18,7 @@ const basePanels: Panel[] = [
18
18
  const panelWrappers = () =>
19
19
  Array.from(document.querySelectorAll<HTMLElement>('[data-slot="sliding-panel"]'));
20
20
 
21
- // The back button is icon-only, so it is the one button in the active panel
22
- // with no text content.
23
- const backButton = () =>
24
- screen.getAllByRole("button").filter((button) => button.textContent === "")[0];
21
+ const backButton = () => screen.getByRole("button", { name: "Back" });
25
22
 
26
23
  function Controlled({ initial = "one" }: { initial?: string }) {
27
24
  const [current, setCurrent] = useState(initial);
@@ -113,4 +110,29 @@ describe("SlidingPanels", () => {
113
110
  await user.click(backButton());
114
111
  expect(onPanelChange).toHaveBeenCalledWith("root");
115
112
  });
113
+
114
+ it("names the icon-only back button with backAriaLabel", () => {
115
+ const panels: Panel[] = [
116
+ { id: "root", content: <button type="button">Root</button> },
117
+ {
118
+ id: "child",
119
+ showBackButton: true,
120
+ backButtonLabel: "Categorii",
121
+ backAriaLabel: "Înapoi",
122
+ content: <button type="button">Child</button>,
123
+ },
124
+ ];
125
+ render(<SlidingPanels panels={panels} currentPanel="child" onPanelChange={vi.fn()} />);
126
+ // The heading beside it is the panel title, not the button's name
127
+ expect(screen.getByRole("button", { name: "Înapoi" })).toBeInTheDocument();
128
+ });
129
+
130
+ it("drops the slide and height transitions under reduced motion", () => {
131
+ render(<Controlled initial="two" />);
132
+ const container = document.querySelector<HTMLElement>('[data-slot="sliding-panels"]');
133
+ expect(container?.className).toContain("motion-reduce:transition-none");
134
+ for (const panel of panelWrappers()) {
135
+ expect(panel.className).toContain("motion-reduce:transition-none");
136
+ }
137
+ });
116
138
  });
package/src/components/sliding-panels.tsx CHANGED
@@ -10,7 +10,13 @@ export interface Panel {
10
10
  id: string;
11
11
  content: React.ReactNode;
12
12
  showBackButton?: boolean;
13
+ /** Heading shown next to the back button (the panel's title, not the button's name). */
13
14
  backButtonLabel?: string;
15
+ /**
16
+ * Accessible name of the icon-only back button, localized by the caller.
17
+ * Falls back to "Back"; without a name screen readers announce only "button".
18
+ */
19
+ backAriaLabel?: string;
14
20
  onBack?: () => void;
15
21
  // When set, the panel is treated as a child of `parentId`. Siblings (panels
16
22
  // sharing the same parent) stay off-screen on the right when not active —
@@ -84,7 +90,7 @@ export const SlidingPanels = ({
84
90
  <div
85
91
  data-slot="sliding-panels"
86
92
  className={cn(
87
- "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
93
+ "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
88
94
  className
89
95
  )}
90
96
  style={{ height: containerHeight, overflowClipMargin: "8px" }}
@@ -105,7 +111,7 @@ export const SlidingPanels = ({
105
111
  data-slot="sliding-panel"
106
112
  data-state={isActive ? "active" : "inactive"}
107
113
  className={cn(
108
- "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
114
+ "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
109
115
  isActive && "translate-x-0",
110
116
  isLeft && "-translate-x-[calc(100%+8px)]",
111
117
  isRight && "translate-x-[calc(100%+8px)]"
@@ -125,8 +131,13 @@ export const SlidingPanels = ({
125
131
  >
126
132
  {panel.showBackButton && (
127
133
  <div className="flex items-center gap-2 mb-4">
128
- <Button variant="ghost" size="icon" onClick={handleBack}>
129
- <ChevronLeft className="h-4 w-4" />
134
+ <Button
135
+ variant="ghost"
136
+ size="icon"
137
+ onClick={handleBack}
138
+ aria-label={panel.backAriaLabel ?? "Back"}
139
+ >
140
+ <ChevronLeft className="h-4 w-4" aria-hidden />
130
141
  </Button>
131
142
  {panel.backButtonLabel && (
132
143
  <h3 className="font-semibold">{panel.backButtonLabel}</h3>