@ai-matrx/design-system 0.86.328 → 0.86.330

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.
@@ -94,3 +94,32 @@ a.cm-item { text-decoration: none; }
94
94
  .cm-menu[data-size="large"] :is(.cm-icon-slot) { width: 18px; }
95
95
  .cm-menu[data-size="large"] :is(.cm-icon, .cm-icon-slot > svg) { width: 18px; height: 18px; }
96
96
  .cm-menu[data-size="large"] :is(.cm-section-label, .cm-hint, .cm-trail) { font-size: 13px; }
97
+
98
+ /* ONE LEFT EDGE, NO GUTTER (Arman, 2026-10-23: "get rid of the HORRIBLE and ugly indentation"): a row
99
+ with no glyph draws no icon column (MenuLookRowBody omits it), so its text starts on the row's own
100
+ 8px inset — never a reserved 16px gutter for a check that only one row wears. */
101
+ /* THE CURRENT ROW: medium weight and a check at the END of the row (Linear / Vercel switchers) — it
102
+ marks itself without pushing any other row's text in. */
103
+ .cm-menu .cm-item[data-current] .cm-label { font-weight: 500; }
104
+ .cm-current { flex: none; width: 16px; height: 16px; margin-left: auto; color: hsl(var(--primary)); }
105
+ .cm-trail + .cm-current { margin-left: 0; }
106
+
107
+ /* THE MENU'S SEARCH (MenuLookSearch): the menu's own header row, not a capsule inside it — full-bleed
108
+ with a hairline under it, its text on the rows' left edge (panel 4px + row 8px = 12px), held at
109
+ the top while the list scrolls under it. */
110
+ .cm-menu .cm-search {
111
+ position: sticky; top: -4px; z-index: 1;
112
+ display: flex; align-items: center; flex: none;
113
+ height: 36px; margin: -4px -4px 4px; padding: 0 12px;
114
+ border-bottom: 1px solid hsl(var(--border));
115
+ border-radius: 10px 10px 0 0;
116
+ background: hsl(var(--popover));
117
+ }
118
+ .cm-menu .cm-search > input {
119
+ all: unset; box-sizing: border-box; flex: 1; min-width: 0; height: 100%;
120
+ font: inherit; font-size: 13px; line-height: 1.25; color: hsl(var(--popover-foreground)); cursor: text;
121
+ }
122
+ .cm-menu .cm-search > input::placeholder { color: hsl(var(--muted-foreground)); opacity: 1; }
123
+ .cm-menu .cm-search > input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
124
+ .cm-menu[data-size="large"] .cm-search { height: 42px; padding: 0 16px; }
125
+ .cm-menu[data-size="large"] .cm-search > input { font-size: 15px; }
@@ -67,11 +67,15 @@ declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuC
67
67
  * - `MENU_LOOK_CLASS` / `MenuLookRowBody` / `MenuLookIconSlot`: the class names and the inside of a row,
68
68
  * used by @ai-matrx/context-menu's MenuPanel (its own non-Radix renderer, the right-click menu);
69
69
  * - `MenuLookContent` / `MenuLookSubContent` / `MenuLookItem` / `MenuLookSubTrigger` /
70
- * `MenuLookCheckboxItem` / `MenuLookLabel` / `MenuLookSeparator`: the same panel and rows on the Radix
70
+ * `MenuLookCheckboxItem` / `MenuLookLabel` / `MenuLookSeparator` / `MenuLookSearch`: the same panel and rows on the Radix
71
71
  * dropdown (keyboard, typeahead, focus return, collision padding), used by Alchemy's dropdowns and the
72
72
  * frame's "…" and crumb menus.
73
73
  * Every measurement lives once, in `menu-look.css` (shipped inside `styles.css`): 280px panel, 30px rows,
74
74
  * 13px text on a 1.25 line, 16px icons, 4px/8px row padding, 10px corners. No part takes a `className`.
75
+ *
76
+ * ONE LEFT EDGE (Arman, 2026-10-23: "get rid of the HORRIBLE and ugly indentation"): a row without a
77
+ * glyph draws no icon column, the current row is marked with a check at its END (`current`), and the
78
+ * search is the menu's own header row whose text starts where every row's text starts.
75
79
  */
76
80
 
77
81
  /** The look's measurements (what `menu-look.css` draws), for tests and hosts that size around a menu. */
@@ -95,6 +99,8 @@ declare const MENU_LOOK_CLASS: {
95
99
  readonly text: "cm-text";
96
100
  readonly label: "cm-label";
97
101
  readonly hint: "cm-hint";
102
+ readonly current: "cm-current";
103
+ readonly search: "cm-search";
98
104
  readonly trail: "cm-trail";
99
105
  readonly shortcut: "cm-shortcut";
100
106
  readonly divider: "cm-divider";
@@ -104,21 +110,23 @@ declare const MENU_LOOK_CLASS: {
104
110
  };
105
111
  type MenuLookSize = "standard" | "large";
106
112
  type MenuLookDensity = "comfortable" | "compact";
107
- /** The 16px icon column every row keeps (an empty slot keeps the labels aligned). */
113
+ /** The 16px icon column of a row that has a glyph (an empty slot draws nothing: no reserved gutter). */
108
114
  declare function MenuLookIconSlot({ children }: {
109
115
  children?: React.ReactNode;
110
116
  }): React.ReactElement;
111
117
  interface MenuLookRowBodyProps {
112
- /** The glyph (any 16px svg; the slot sizes it). Omitted → an empty slot. */
118
+ /** The glyph (any 16px svg; the slot sizes it). Omitted → no icon column; the text starts the row. */
113
119
  icon?: React.ReactNode | undefined;
114
120
  label: React.ReactNode;
115
121
  /** A muted second line under the label. */
116
122
  description?: React.ReactNode | undefined;
117
123
  /** A muted end-of-row hint (a trail, a shortcut word). */
118
124
  trail?: React.ReactNode | undefined;
125
+ /** The row the person is on now: medium weight and a check at the row's end (never a left gutter). */
126
+ current?: boolean | undefined;
119
127
  }
120
- /** The inside of a row: icon slot, label (with an optional second line), an optional end hint. */
121
- declare function MenuLookRowBody({ icon, label, description, trail }: MenuLookRowBodyProps): React.ReactElement;
128
+ /** The inside of a row: icon (when given), label (with an optional second line), end hint, current check. */
129
+ declare function MenuLookRowBody({ icon, label, description, trail, current }: MenuLookRowBodyProps): React.ReactElement;
122
130
  /** A row's classes: the look's row, plus its danger / dimmed marks. */
123
131
  declare function menuLookItemClass({ destructive, dimmed }?: {
124
132
  destructive?: boolean | undefined;
@@ -165,11 +173,21 @@ type CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrim
165
173
  interface MenuLookCheckboxItemProps extends CheckboxProps, MenuLookRowBodyProps {
166
174
  [dataAttribute: `data-${string}`]: string | undefined;
167
175
  }
168
- /** A toggle row: a check in the icon slot while on (the right-click menu's toggle), else its icon. */
176
+ /** A toggle row: a check in the icon slot while on (the right-click menu's toggle), else its icon — a
177
+ * toggle keeps its column either way, so switching it never moves its label. */
169
178
  declare const MenuLookCheckboxItem: React.ForwardRefExoticComponent<MenuLookCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
170
179
  /** A section heading ("Copy", "Brands", "Pages"). */
171
180
  declare const MenuLookLabel: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref">, "className"> & React.RefAttributes<HTMLDivElement>>;
172
181
  /** The line between sections. */
173
182
  declare const MenuLookSeparator: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "className"> & React.RefAttributes<HTMLDivElement>>;
183
+ interface MenuLookSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "size" | "type"> {
184
+ [dataAttribute: `data-${string}`]: string | undefined;
185
+ }
186
+ /**
187
+ * The menu's search: its own header row (full-bleed, a hairline under it, held at the top while the
188
+ * list scrolls) whose text starts on the rows' left edge. The host owns the value and its keys (stop
189
+ * propagation on letters so the menu's type-ahead never takes them).
190
+ */
191
+ declare const MenuLookSearch: React.ForwardRefExoticComponent<MenuLookSearchProps & React.RefAttributes<HTMLInputElement>>;
174
192
 
175
- export { MENU_LOOK, MENU_LOOK_CLASS, MenuLookCheckboxItem, type MenuLookCheckboxItemProps, MenuLookContent, type MenuLookContentProps, type MenuLookDensity, MenuLookIconSlot, MenuLookItem, type MenuLookItemProps, MenuLookLabel, MenuLookRowBody, type MenuLookRowBodyProps, MenuLookSeparator, type MenuLookSize, MenuLookSubContent, type MenuLookSubContentProps, MenuLookSubTrigger, type MenuLookSubTriggerProps, menuLookItemClass };
193
+ export { MENU_LOOK, MENU_LOOK_CLASS, MenuLookCheckboxItem, type MenuLookCheckboxItemProps, MenuLookContent, type MenuLookContentProps, type MenuLookDensity, MenuLookIconSlot, MenuLookItem, type MenuLookItemProps, MenuLookLabel, MenuLookRowBody, type MenuLookRowBodyProps, MenuLookSearch, type MenuLookSearchProps, MenuLookSeparator, type MenuLookSize, MenuLookSubContent, type MenuLookSubContentProps, MenuLookSubTrigger, type MenuLookSubTriggerProps, menuLookItemClass };
@@ -67,11 +67,15 @@ declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuC
67
67
  * - `MENU_LOOK_CLASS` / `MenuLookRowBody` / `MenuLookIconSlot`: the class names and the inside of a row,
68
68
  * used by @ai-matrx/context-menu's MenuPanel (its own non-Radix renderer, the right-click menu);
69
69
  * - `MenuLookContent` / `MenuLookSubContent` / `MenuLookItem` / `MenuLookSubTrigger` /
70
- * `MenuLookCheckboxItem` / `MenuLookLabel` / `MenuLookSeparator`: the same panel and rows on the Radix
70
+ * `MenuLookCheckboxItem` / `MenuLookLabel` / `MenuLookSeparator` / `MenuLookSearch`: the same panel and rows on the Radix
71
71
  * dropdown (keyboard, typeahead, focus return, collision padding), used by Alchemy's dropdowns and the
72
72
  * frame's "…" and crumb menus.
73
73
  * Every measurement lives once, in `menu-look.css` (shipped inside `styles.css`): 280px panel, 30px rows,
74
74
  * 13px text on a 1.25 line, 16px icons, 4px/8px row padding, 10px corners. No part takes a `className`.
75
+ *
76
+ * ONE LEFT EDGE (Arman, 2026-10-23: "get rid of the HORRIBLE and ugly indentation"): a row without a
77
+ * glyph draws no icon column, the current row is marked with a check at its END (`current`), and the
78
+ * search is the menu's own header row whose text starts where every row's text starts.
75
79
  */
76
80
 
77
81
  /** The look's measurements (what `menu-look.css` draws), for tests and hosts that size around a menu. */
@@ -95,6 +99,8 @@ declare const MENU_LOOK_CLASS: {
95
99
  readonly text: "cm-text";
96
100
  readonly label: "cm-label";
97
101
  readonly hint: "cm-hint";
102
+ readonly current: "cm-current";
103
+ readonly search: "cm-search";
98
104
  readonly trail: "cm-trail";
99
105
  readonly shortcut: "cm-shortcut";
100
106
  readonly divider: "cm-divider";
@@ -104,21 +110,23 @@ declare const MENU_LOOK_CLASS: {
104
110
  };
105
111
  type MenuLookSize = "standard" | "large";
106
112
  type MenuLookDensity = "comfortable" | "compact";
107
- /** The 16px icon column every row keeps (an empty slot keeps the labels aligned). */
113
+ /** The 16px icon column of a row that has a glyph (an empty slot draws nothing: no reserved gutter). */
108
114
  declare function MenuLookIconSlot({ children }: {
109
115
  children?: React.ReactNode;
110
116
  }): React.ReactElement;
111
117
  interface MenuLookRowBodyProps {
112
- /** The glyph (any 16px svg; the slot sizes it). Omitted → an empty slot. */
118
+ /** The glyph (any 16px svg; the slot sizes it). Omitted → no icon column; the text starts the row. */
113
119
  icon?: React.ReactNode | undefined;
114
120
  label: React.ReactNode;
115
121
  /** A muted second line under the label. */
116
122
  description?: React.ReactNode | undefined;
117
123
  /** A muted end-of-row hint (a trail, a shortcut word). */
118
124
  trail?: React.ReactNode | undefined;
125
+ /** The row the person is on now: medium weight and a check at the row's end (never a left gutter). */
126
+ current?: boolean | undefined;
119
127
  }
120
- /** The inside of a row: icon slot, label (with an optional second line), an optional end hint. */
121
- declare function MenuLookRowBody({ icon, label, description, trail }: MenuLookRowBodyProps): React.ReactElement;
128
+ /** The inside of a row: icon (when given), label (with an optional second line), end hint, current check. */
129
+ declare function MenuLookRowBody({ icon, label, description, trail, current }: MenuLookRowBodyProps): React.ReactElement;
122
130
  /** A row's classes: the look's row, plus its danger / dimmed marks. */
123
131
  declare function menuLookItemClass({ destructive, dimmed }?: {
124
132
  destructive?: boolean | undefined;
@@ -165,11 +173,21 @@ type CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrim
165
173
  interface MenuLookCheckboxItemProps extends CheckboxProps, MenuLookRowBodyProps {
166
174
  [dataAttribute: `data-${string}`]: string | undefined;
167
175
  }
168
- /** A toggle row: a check in the icon slot while on (the right-click menu's toggle), else its icon. */
176
+ /** A toggle row: a check in the icon slot while on (the right-click menu's toggle), else its icon — a
177
+ * toggle keeps its column either way, so switching it never moves its label. */
169
178
  declare const MenuLookCheckboxItem: React.ForwardRefExoticComponent<MenuLookCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
170
179
  /** A section heading ("Copy", "Brands", "Pages"). */
171
180
  declare const MenuLookLabel: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref">, "className"> & React.RefAttributes<HTMLDivElement>>;
172
181
  /** The line between sections. */
173
182
  declare const MenuLookSeparator: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref">, "className"> & React.RefAttributes<HTMLDivElement>>;
183
+ interface MenuLookSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "size" | "type"> {
184
+ [dataAttribute: `data-${string}`]: string | undefined;
185
+ }
186
+ /**
187
+ * The menu's search: its own header row (full-bleed, a hairline under it, held at the top while the
188
+ * list scrolls) whose text starts on the rows' left edge. The host owns the value and its keys (stop
189
+ * propagation on letters so the menu's type-ahead never takes them).
190
+ */
191
+ declare const MenuLookSearch: React.ForwardRefExoticComponent<MenuLookSearchProps & React.RefAttributes<HTMLInputElement>>;
174
192
 
175
- export { MENU_LOOK, MENU_LOOK_CLASS, MenuLookCheckboxItem, type MenuLookCheckboxItemProps, MenuLookContent, type MenuLookContentProps, type MenuLookDensity, MenuLookIconSlot, MenuLookItem, type MenuLookItemProps, MenuLookLabel, MenuLookRowBody, type MenuLookRowBodyProps, MenuLookSeparator, type MenuLookSize, MenuLookSubContent, type MenuLookSubContentProps, MenuLookSubTrigger, type MenuLookSubTriggerProps, menuLookItemClass };
193
+ export { MENU_LOOK, MENU_LOOK_CLASS, MenuLookCheckboxItem, type MenuLookCheckboxItemProps, MenuLookContent, type MenuLookContentProps, type MenuLookDensity, MenuLookIconSlot, MenuLookItem, type MenuLookItemProps, MenuLookLabel, MenuLookRowBody, type MenuLookRowBodyProps, MenuLookSearch, type MenuLookSearchProps, MenuLookSeparator, type MenuLookSize, MenuLookSubContent, type MenuLookSubContentProps, MenuLookSubTrigger, type MenuLookSubTriggerProps, menuLookItemClass };
package/dist/menu-look.js CHANGED
@@ -37,6 +37,8 @@ var MENU_LOOK_CLASS = {
37
37
  text: "cm-text",
38
38
  label: "cm-label",
39
39
  hint: "cm-hint",
40
+ current: "cm-current",
41
+ search: "cm-search",
40
42
  trail: "cm-trail",
41
43
  shortcut: "cm-shortcut",
42
44
  divider: "cm-divider",
@@ -47,14 +49,15 @@ var MENU_LOOK_CLASS = {
47
49
  function MenuLookIconSlot({ children }) {
48
50
  return /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.iconSlot, children });
49
51
  }
50
- function MenuLookRowBody({ icon, label, description, trail }) {
52
+ function MenuLookRowBody({ icon, label, description, trail, current }) {
51
53
  return /* @__PURE__ */ jsxs(Fragment, { children: [
52
- /* @__PURE__ */ jsx(MenuLookIconSlot, { children: icon }),
54
+ icon ? /* @__PURE__ */ jsx(MenuLookIconSlot, { children: icon }) : null,
53
55
  /* @__PURE__ */ jsxs("span", { className: MENU_LOOK_CLASS.text, children: [
54
56
  /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.label, children: label }),
55
57
  description ? /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.hint, children: description }) : null
56
58
  ] }),
57
- trail ? /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.trail, children: trail }) : null
59
+ trail ? /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.trail, children: trail }) : null,
60
+ current ? /* @__PURE__ */ jsx(RadixCheckIcon, { className: MENU_LOOK_CLASS.current, "aria-hidden": "true", "data-menu-current-mark": "" }) : null
58
61
  ] });
59
62
  }
60
63
  function menuLookItemClass({ destructive, dimmed } = {}) {
@@ -88,20 +91,21 @@ var MenuLookSubContent = React.forwardRef(function MenuLookSubContent2({ size =
88
91
  }
89
92
  );
90
93
  });
91
- var MenuLookItem = React.forwardRef(function MenuLookItem2({ icon, label, description, trail, destructive, dimmed, href, target, linkProps, ...props }, ref) {
94
+ var MenuLookItem = React.forwardRef(function MenuLookItem2({ icon, label, description, trail, current, destructive, dimmed, href, target, linkProps, ...props }, ref) {
92
95
  const className = menuLookItemClass({ destructive, dimmed });
93
- const body = /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label, description, trail });
96
+ const body = /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label, description, trail, current });
97
+ const mark = current ? { "data-current": "" } : {};
94
98
  if (href) {
95
- return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, asChild: true, ...props, className, children: /* @__PURE__ */ jsx("a", { href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, ...linkProps, children: body }) });
99
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, asChild: true, ...props, ...mark, className, children: /* @__PURE__ */ jsx("a", { href, target, rel: target === "_blank" ? "noopener noreferrer" : void 0, ...linkProps, children: body }) });
96
100
  }
97
- return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, ...props, className, children: body });
101
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, { ref, ...props, ...mark, className, children: body });
98
102
  });
99
103
  var MenuLookSubTrigger = React.forwardRef(function MenuLookSubTrigger2({ icon, label, description, trail, ...props }, ref) {
100
104
  return /* @__PURE__ */ jsx(DropdownMenuSubTrigger, { ref, ...props, className: MENU_LOOK_CLASS.item, children: /* @__PURE__ */ jsx(MenuLookRowBody, { icon, label, description, trail }) });
101
105
  });
102
106
  var MenuLookCheckboxItem = React.forwardRef(function MenuLookCheckboxItem2({ icon, label, description, trail, checked, ...props }, ref) {
103
107
  const on = checked === true;
104
- return /* @__PURE__ */ jsx(DropdownMenuPrimitive.CheckboxItem, { ref, ...checked === void 0 ? {} : { checked }, ...props, className: MENU_LOOK_CLASS.item, children: /* @__PURE__ */ jsx(MenuLookRowBody, { icon: on ? /* @__PURE__ */ jsx(RadixCheckIcon, { className: MENU_LOOK_CLASS.icon }) : icon, label, description, trail }) });
108
+ return /* @__PURE__ */ jsx(DropdownMenuPrimitive.CheckboxItem, { ref, ...checked === void 0 ? {} : { checked }, ...props, className: MENU_LOOK_CLASS.item, children: /* @__PURE__ */ jsx(MenuLookRowBody, { icon: on ? /* @__PURE__ */ jsx(RadixCheckIcon, { className: MENU_LOOK_CLASS.icon }) : icon ?? /* @__PURE__ */ jsx("span", { className: MENU_LOOK_CLASS.icon, "aria-hidden": "true" }), label, description, trail }) });
105
109
  });
106
110
  var MenuLookLabel = React.forwardRef(function MenuLookLabel2(props, ref) {
107
111
  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, { ref, ...props, className: MENU_LOOK_CLASS.sectionLabel });
@@ -109,6 +113,20 @@ var MenuLookLabel = React.forwardRef(function MenuLookLabel2(props, ref) {
109
113
  var MenuLookSeparator = React.forwardRef(function MenuLookSeparator2(props, ref) {
110
114
  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, { ref, ...props, className: MENU_LOOK_CLASS.divider });
111
115
  });
116
+ var MenuLookSearch = React.forwardRef(function MenuLookSearch2({ placeholder = "Search", ...props }, ref) {
117
+ return /* @__PURE__ */ jsx("div", { className: MENU_LOOK_CLASS.search, "data-menu-look-search": "", children: /* @__PURE__ */ jsx(
118
+ "input",
119
+ {
120
+ ref,
121
+ type: "search",
122
+ autoComplete: "off",
123
+ spellCheck: false,
124
+ placeholder,
125
+ "aria-label": props["aria-label"] ?? placeholder,
126
+ ...props
127
+ }
128
+ ) });
129
+ });
112
130
  export {
113
131
  MENU_LOOK,
114
132
  MENU_LOOK_CLASS,
@@ -118,6 +136,7 @@ export {
118
136
  MenuLookItem,
119
137
  MenuLookLabel,
120
138
  MenuLookRowBody,
139
+ MenuLookSearch,
121
140
  MenuLookSeparator,
122
141
  MenuLookSubContent,
123
142
  MenuLookSubTrigger,
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/menu-look.tsx"],"sourcesContent":["\"use client\";\n/**\n * `@ai-matrx/design-system/menu-look` — THE ONE MENU LOOK (Arman, 2026-10-23: the header \"…\", every\n * crumb dropdown and every Alchemy dropdown are \"the IDENTICAL dropdown that I use for Alchemy for size\n * and style\" — the right-click menu).\n *\n * Two halves, one look:\n * - `MENU_LOOK_CLASS` / `MenuLookRowBody` / `MenuLookIconSlot`: the class names and the inside of a row,\n * used by @ai-matrx/context-menu's MenuPanel (its own non-Radix renderer, the right-click menu);\n * - `MenuLookContent` / `MenuLookSubContent` / `MenuLookItem` / `MenuLookSubTrigger` /\n * `MenuLookCheckboxItem` / `MenuLookLabel` / `MenuLookSeparator`: the same panel and rows on the Radix\n * dropdown (keyboard, typeahead, focus return, collision padding), used by Alchemy's dropdowns and the\n * frame's \"…\" and crumb menus.\n * Every measurement lives once, in `menu-look.css` (shipped inside `styles.css`): 280px panel, 30px rows,\n * 13px text on a 1.25 line, 16px icons, 4px/8px row padding, 10px corners. No part takes a `className`.\n */\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { DropdownMenuContent, DropdownMenuSubContent, DropdownMenuSubTrigger } from \"./dropdown-menu\";\nimport { RadixCheckIcon } from \"./icons\";\n\n/** The look's measurements (what `menu-look.css` draws), for tests and hosts that size around a menu. */\nexport const MENU_LOOK = {\n width: 280,\n largeWidth: 360,\n rowHeight: 30,\n fontSize: 13,\n lineHeight: 1.25,\n icon: 16,\n rowPaddingY: 4,\n rowPaddingX: 8,\n radius: 10,\n} as const;\n\n/** The look's class names — the ONLY classes a menu part wears. */\nexport const MENU_LOOK_CLASS = {\n panel: \"cm-menu\",\n item: \"cm-item\",\n iconSlot: \"cm-icon-slot\",\n icon: \"cm-icon\",\n text: \"cm-text\",\n label: \"cm-label\",\n hint: \"cm-hint\",\n trail: \"cm-trail\",\n shortcut: \"cm-shortcut\",\n divider: \"cm-divider\",\n sectionLabel: \"cm-section-label\",\n danger: \"cm-danger\",\n dimmed: \"cm-dimmed\",\n} as const;\n\nexport type MenuLookSize = \"standard\" | \"large\";\nexport type MenuLookDensity = \"comfortable\" | \"compact\";\n\n/** The 16px icon column every row keeps (an empty slot keeps the labels aligned). */\nexport function MenuLookIconSlot({ children }: { children?: React.ReactNode }): React.ReactElement {\n return <span className={MENU_LOOK_CLASS.iconSlot}>{children}</span>;\n}\n\nexport interface MenuLookRowBodyProps {\n /** The glyph (any 16px svg; the slot sizes it). Omitted → an empty slot. */\n icon?: React.ReactNode | undefined;\n label: React.ReactNode;\n /** A muted second line under the label. */\n description?: React.ReactNode | undefined;\n /** A muted end-of-row hint (a trail, a shortcut word). */\n trail?: React.ReactNode | undefined;\n}\n\n/** The inside of a row: icon slot, label (with an optional second line), an optional end hint. */\nexport function MenuLookRowBody({ icon, label, description, trail }: MenuLookRowBodyProps): React.ReactElement {\n return (\n <>\n <MenuLookIconSlot>{icon}</MenuLookIconSlot>\n <span className={MENU_LOOK_CLASS.text}>\n <span className={MENU_LOOK_CLASS.label}>{label}</span>\n {description ? <span className={MENU_LOOK_CLASS.hint}>{description}</span> : null}\n </span>\n {trail ? <span className={MENU_LOOK_CLASS.trail}>{trail}</span> : null}\n </>\n );\n}\n\n/** A row's classes: the look's row, plus its danger / dimmed marks. */\nexport function menuLookItemClass({ destructive, dimmed }: { destructive?: boolean | undefined; dimmed?: boolean | undefined } = {}): string {\n return `${MENU_LOOK_CLASS.item}${destructive ? ` ${MENU_LOOK_CLASS.danger}` : \"\"}${dimmed ? ` ${MENU_LOOK_CLASS.dimmed}` : \"\"}`;\n}\n\ntype ContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuContent>, \"className\" | \"surface\">;\n\nexport interface MenuLookContentProps extends ContentProps {\n /** \"standard\" (280px, the right-click menu) or \"large\" (360px, 36px rows). */\n size?: MenuLookSize | undefined;\n density?: MenuLookDensity | undefined;\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** The menu's panel on the Radix dropdown (portalled, capped at the room Radix measured, scrolls past it). */\nexport const MenuLookContent = React.forwardRef<HTMLDivElement, MenuLookContentProps>(function MenuLookContent(\n { size = \"standard\", density = \"comfortable\", ...props },\n ref,\n) {\n return (\n <DropdownMenuContent\n ref={ref}\n surface=\"solid\"\n data-menu-look=\"\"\n data-size={size}\n data-density={density}\n {...props}\n className={MENU_LOOK_CLASS.panel}\n />\n );\n});\n\ntype SubContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubContent>, \"className\" | \"surface\">;\n\nexport interface MenuLookSubContentProps extends SubContentProps {\n size?: MenuLookSize | undefined;\n density?: MenuLookDensity | undefined;\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** A submenu's panel: the same panel, as wide as the menu it opens from. */\nexport const MenuLookSubContent = React.forwardRef<HTMLDivElement, MenuLookSubContentProps>(function MenuLookSubContent(\n { size = \"standard\", density = \"comfortable\", ...props },\n ref,\n) {\n return (\n <DropdownMenuSubContent\n ref={ref}\n surface=\"solid\"\n data-menu-look=\"\"\n data-size={size}\n data-density={density}\n {...props}\n className={MENU_LOOK_CLASS.panel}\n />\n );\n});\n\ntype ItemProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookItemProps extends ItemProps, MenuLookRowBodyProps {\n destructive?: boolean | undefined;\n /** Drawn dimmed (a greyed verb whose reason is the row's tooltip); still focusable. */\n dimmed?: boolean | undefined;\n /** A real link: the row is an `<a>` (a modified click keeps the browser's link behaviour). */\n href?: string | undefined;\n target?: string | undefined;\n /** Props for the `<a>` (aria-current, title, onClick). */\n linkProps?: undefined | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\" | \"target\" | \"className\" | \"children\">;\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** One row: icon, label (+ optional second line), optional end hint; a link when given `href`. */\nexport const MenuLookItem = React.forwardRef<HTMLDivElement, MenuLookItemProps>(function MenuLookItem(\n { icon, label, description, trail, destructive, dimmed, href, target, linkProps, ...props },\n ref,\n) {\n const className = menuLookItemClass({ destructive, dimmed });\n const body = <MenuLookRowBody icon={icon} label={label} description={description} trail={trail} />;\n if (href) {\n return (\n <DropdownMenuPrimitive.Item ref={ref} asChild {...props} className={className}>\n <a href={href} target={target} rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined} {...linkProps}>\n {body}\n </a>\n </DropdownMenuPrimitive.Item>\n );\n }\n return (\n <DropdownMenuPrimitive.Item ref={ref} {...props} className={className}>\n {body}\n </DropdownMenuPrimitive.Item>\n );\n});\n\ntype SubTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubTrigger>, \"className\" | \"children\" | \"inset\">;\n\nexport interface MenuLookSubTriggerProps extends SubTriggerProps, MenuLookRowBodyProps {\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** A row that opens a submenu (the chevron is the dropdown's own). */\nexport const MenuLookSubTrigger = React.forwardRef<HTMLDivElement, MenuLookSubTriggerProps>(function MenuLookSubTrigger(\n { icon, label, description, trail, ...props },\n ref,\n) {\n return (\n <DropdownMenuSubTrigger ref={ref} {...props} className={MENU_LOOK_CLASS.item}>\n <MenuLookRowBody icon={icon} label={label} description={description} trail={trail} />\n </DropdownMenuSubTrigger>\n );\n});\n\ntype CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookCheckboxItemProps extends CheckboxProps, MenuLookRowBodyProps {\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** A toggle row: a check in the icon slot while on (the right-click menu's toggle), else its icon. */\nexport const MenuLookCheckboxItem = React.forwardRef<HTMLDivElement, MenuLookCheckboxItemProps>(function MenuLookCheckboxItem(\n { icon, label, description, trail, checked, ...props },\n ref,\n) {\n const on = checked === true;\n return (\n <DropdownMenuPrimitive.CheckboxItem ref={ref} {...(checked === undefined ? {} : { checked })} {...props} className={MENU_LOOK_CLASS.item}>\n <MenuLookRowBody icon={on ? <RadixCheckIcon className={MENU_LOOK_CLASS.icon} /> : icon} label={label} description={description} trail={trail} />\n </DropdownMenuPrimitive.CheckboxItem>\n );\n});\n\n/** A section heading (\"Copy\", \"Brands\", \"Pages\"). */\nexport const MenuLookLabel = React.forwardRef<\n HTMLDivElement,\n Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>, \"className\">\n>(function MenuLookLabel(props, ref) {\n return <DropdownMenuPrimitive.Label ref={ref} {...props} className={MENU_LOOK_CLASS.sectionLabel} />;\n});\n\n/** The line between sections. */\nexport const MenuLookSeparator = React.forwardRef<\n HTMLDivElement,\n Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>, \"className\">\n>(function MenuLookSeparator(props, ref) {\n return <DropdownMenuPrimitive.Separator ref={ref} {...props} className={MENU_LOOK_CLASS.divider} />;\n});\n"],"mappings":"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","names":["MenuLookContent","MenuLookSubContent","MenuLookItem","MenuLookSubTrigger","MenuLookCheckboxItem","MenuLookLabel","MenuLookSeparator"]}
1
+ {"version":3,"sources":["../src/menu-look.tsx"],"sourcesContent":["\"use client\";\n/**\n * `@ai-matrx/design-system/menu-look` — THE ONE MENU LOOK (Arman, 2026-10-23: the header \"…\", every\n * crumb dropdown and every Alchemy dropdown are \"the IDENTICAL dropdown that I use for Alchemy for size\n * and style\" — the right-click menu).\n *\n * Two halves, one look:\n * - `MENU_LOOK_CLASS` / `MenuLookRowBody` / `MenuLookIconSlot`: the class names and the inside of a row,\n * used by @ai-matrx/context-menu's MenuPanel (its own non-Radix renderer, the right-click menu);\n * - `MenuLookContent` / `MenuLookSubContent` / `MenuLookItem` / `MenuLookSubTrigger` /\n * `MenuLookCheckboxItem` / `MenuLookLabel` / `MenuLookSeparator` / `MenuLookSearch`: the same panel and rows on the Radix\n * dropdown (keyboard, typeahead, focus return, collision padding), used by Alchemy's dropdowns and the\n * frame's \"…\" and crumb menus.\n * Every measurement lives once, in `menu-look.css` (shipped inside `styles.css`): 280px panel, 30px rows,\n * 13px text on a 1.25 line, 16px icons, 4px/8px row padding, 10px corners. No part takes a `className`.\n *\n * ONE LEFT EDGE (Arman, 2026-10-23: \"get rid of the HORRIBLE and ugly indentation\"): a row without a\n * glyph draws no icon column, the current row is marked with a check at its END (`current`), and the\n * search is the menu's own header row whose text starts where every row's text starts.\n */\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { DropdownMenuContent, DropdownMenuSubContent, DropdownMenuSubTrigger } from \"./dropdown-menu\";\nimport { RadixCheckIcon } from \"./icons\";\n\n/** The look's measurements (what `menu-look.css` draws), for tests and hosts that size around a menu. */\nexport const MENU_LOOK = {\n width: 280,\n largeWidth: 360,\n rowHeight: 30,\n fontSize: 13,\n lineHeight: 1.25,\n icon: 16,\n rowPaddingY: 4,\n rowPaddingX: 8,\n radius: 10,\n} as const;\n\n/** The look's class names — the ONLY classes a menu part wears. */\nexport const MENU_LOOK_CLASS = {\n panel: \"cm-menu\",\n item: \"cm-item\",\n iconSlot: \"cm-icon-slot\",\n icon: \"cm-icon\",\n text: \"cm-text\",\n label: \"cm-label\",\n hint: \"cm-hint\",\n current: \"cm-current\",\n search: \"cm-search\",\n trail: \"cm-trail\",\n shortcut: \"cm-shortcut\",\n divider: \"cm-divider\",\n sectionLabel: \"cm-section-label\",\n danger: \"cm-danger\",\n dimmed: \"cm-dimmed\",\n} as const;\n\nexport type MenuLookSize = \"standard\" | \"large\";\nexport type MenuLookDensity = \"comfortable\" | \"compact\";\n\n/** The 16px icon column of a row that has a glyph (an empty slot draws nothing: no reserved gutter). */\nexport function MenuLookIconSlot({ children }: { children?: React.ReactNode }): React.ReactElement {\n return <span className={MENU_LOOK_CLASS.iconSlot}>{children}</span>;\n}\n\nexport interface MenuLookRowBodyProps {\n /** The glyph (any 16px svg; the slot sizes it). Omitted → no icon column; the text starts the row. */\n icon?: React.ReactNode | undefined;\n label: React.ReactNode;\n /** A muted second line under the label. */\n description?: React.ReactNode | undefined;\n /** A muted end-of-row hint (a trail, a shortcut word). */\n trail?: React.ReactNode | undefined;\n /** The row the person is on now: medium weight and a check at the row's end (never a left gutter). */\n current?: boolean | undefined;\n}\n\n/** The inside of a row: icon (when given), label (with an optional second line), end hint, current check. */\nexport function MenuLookRowBody({ icon, label, description, trail, current }: MenuLookRowBodyProps): React.ReactElement {\n return (\n <>\n {icon ? <MenuLookIconSlot>{icon}</MenuLookIconSlot> : null}\n <span className={MENU_LOOK_CLASS.text}>\n <span className={MENU_LOOK_CLASS.label}>{label}</span>\n {description ? <span className={MENU_LOOK_CLASS.hint}>{description}</span> : null}\n </span>\n {trail ? <span className={MENU_LOOK_CLASS.trail}>{trail}</span> : null}\n {current ? <RadixCheckIcon className={MENU_LOOK_CLASS.current} aria-hidden=\"true\" data-menu-current-mark=\"\" /> : null}\n </>\n );\n}\n\n/** A row's classes: the look's row, plus its danger / dimmed marks. */\nexport function menuLookItemClass({ destructive, dimmed }: { destructive?: boolean | undefined; dimmed?: boolean | undefined } = {}): string {\n return `${MENU_LOOK_CLASS.item}${destructive ? ` ${MENU_LOOK_CLASS.danger}` : \"\"}${dimmed ? ` ${MENU_LOOK_CLASS.dimmed}` : \"\"}`;\n}\n\ntype ContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuContent>, \"className\" | \"surface\">;\n\nexport interface MenuLookContentProps extends ContentProps {\n /** \"standard\" (280px, the right-click menu) or \"large\" (360px, 36px rows). */\n size?: MenuLookSize | undefined;\n density?: MenuLookDensity | undefined;\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** The menu's panel on the Radix dropdown (portalled, capped at the room Radix measured, scrolls past it). */\nexport const MenuLookContent = React.forwardRef<HTMLDivElement, MenuLookContentProps>(function MenuLookContent(\n { size = \"standard\", density = \"comfortable\", ...props },\n ref,\n) {\n return (\n <DropdownMenuContent\n ref={ref}\n surface=\"solid\"\n data-menu-look=\"\"\n data-size={size}\n data-density={density}\n {...props}\n className={MENU_LOOK_CLASS.panel}\n />\n );\n});\n\ntype SubContentProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubContent>, \"className\" | \"surface\">;\n\nexport interface MenuLookSubContentProps extends SubContentProps {\n size?: MenuLookSize | undefined;\n density?: MenuLookDensity | undefined;\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** A submenu's panel: the same panel, as wide as the menu it opens from. */\nexport const MenuLookSubContent = React.forwardRef<HTMLDivElement, MenuLookSubContentProps>(function MenuLookSubContent(\n { size = \"standard\", density = \"comfortable\", ...props },\n ref,\n) {\n return (\n <DropdownMenuSubContent\n ref={ref}\n surface=\"solid\"\n data-menu-look=\"\"\n data-size={size}\n data-density={density}\n {...props}\n className={MENU_LOOK_CLASS.panel}\n />\n );\n});\n\ntype ItemProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookItemProps extends ItemProps, MenuLookRowBodyProps {\n destructive?: boolean | undefined;\n /** Drawn dimmed (a greyed verb whose reason is the row's tooltip); still focusable. */\n dimmed?: boolean | undefined;\n /** A real link: the row is an `<a>` (a modified click keeps the browser's link behaviour). */\n href?: string | undefined;\n target?: string | undefined;\n /** Props for the `<a>` (aria-current, title, onClick). */\n linkProps?: undefined | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, \"href\" | \"target\" | \"className\" | \"children\">;\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** One row: icon, label (+ optional second line), optional end hint; a link when given `href`. */\nexport const MenuLookItem = React.forwardRef<HTMLDivElement, MenuLookItemProps>(function MenuLookItem(\n { icon, label, description, trail, current, destructive, dimmed, href, target, linkProps, ...props },\n ref,\n) {\n const className = menuLookItemClass({ destructive, dimmed });\n const body = <MenuLookRowBody icon={icon} label={label} description={description} trail={trail} current={current} />;\n const mark = current ? { \"data-current\": \"\" } : {};\n if (href) {\n return (\n <DropdownMenuPrimitive.Item ref={ref} asChild {...props} {...mark} className={className}>\n <a href={href} target={target} rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined} {...linkProps}>\n {body}\n </a>\n </DropdownMenuPrimitive.Item>\n );\n }\n return (\n <DropdownMenuPrimitive.Item ref={ref} {...props} {...mark} className={className}>\n {body}\n </DropdownMenuPrimitive.Item>\n );\n});\n\ntype SubTriggerProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuSubTrigger>, \"className\" | \"children\" | \"inset\">;\n\nexport interface MenuLookSubTriggerProps extends SubTriggerProps, MenuLookRowBodyProps {\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** A row that opens a submenu (the chevron is the dropdown's own). */\nexport const MenuLookSubTrigger = React.forwardRef<HTMLDivElement, MenuLookSubTriggerProps>(function MenuLookSubTrigger(\n { icon, label, description, trail, ...props },\n ref,\n) {\n return (\n <DropdownMenuSubTrigger ref={ref} {...props} className={MENU_LOOK_CLASS.item}>\n <MenuLookRowBody icon={icon} label={label} description={description} trail={trail} />\n </DropdownMenuSubTrigger>\n );\n});\n\ntype CheckboxProps = Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, \"className\" | \"children\" | \"asChild\">;\n\nexport interface MenuLookCheckboxItemProps extends CheckboxProps, MenuLookRowBodyProps {\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/** A toggle row: a check in the icon slot while on (the right-click menu's toggle), else its icon — a\n * toggle keeps its column either way, so switching it never moves its label. */\nexport const MenuLookCheckboxItem = React.forwardRef<HTMLDivElement, MenuLookCheckboxItemProps>(function MenuLookCheckboxItem(\n { icon, label, description, trail, checked, ...props },\n ref,\n) {\n const on = checked === true;\n return (\n <DropdownMenuPrimitive.CheckboxItem ref={ref} {...(checked === undefined ? {} : { checked })} {...props} className={MENU_LOOK_CLASS.item}>\n <MenuLookRowBody icon={on ? <RadixCheckIcon className={MENU_LOOK_CLASS.icon} /> : (icon ?? <span className={MENU_LOOK_CLASS.icon} aria-hidden=\"true\" />)} label={label} description={description} trail={trail} />\n </DropdownMenuPrimitive.CheckboxItem>\n );\n});\n\n/** A section heading (\"Copy\", \"Brands\", \"Pages\"). */\nexport const MenuLookLabel = React.forwardRef<\n HTMLDivElement,\n Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>, \"className\">\n>(function MenuLookLabel(props, ref) {\n return <DropdownMenuPrimitive.Label ref={ref} {...props} className={MENU_LOOK_CLASS.sectionLabel} />;\n});\n\n/** The line between sections. */\nexport const MenuLookSeparator = React.forwardRef<\n HTMLDivElement,\n Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>, \"className\">\n>(function MenuLookSeparator(props, ref) {\n return <DropdownMenuPrimitive.Separator ref={ref} {...props} className={MENU_LOOK_CLASS.divider} />;\n});\n\nexport interface MenuLookSearchProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"className\" | \"style\" | \"size\" | \"type\"> {\n [dataAttribute: `data-${string}`]: string | undefined;\n}\n\n/**\n * The menu's search: its own header row (full-bleed, a hairline under it, held at the top while the\n * list scrolls) whose text starts on the rows' left edge. The host owns the value and its keys (stop\n * propagation on letters so the menu's type-ahead never takes them).\n */\nexport const MenuLookSearch = React.forwardRef<HTMLInputElement, MenuLookSearchProps>(function MenuLookSearch(\n { placeholder = \"Search\", ...props },\n ref,\n) {\n return (\n <div className={MENU_LOOK_CLASS.search} data-menu-look-search=\"\">\n <input\n ref={ref}\n type=\"search\"\n autoComplete=\"off\"\n spellCheck={false}\n placeholder={placeholder}\n aria-label={props[\"aria-label\"] ?? placeholder}\n {...props}\n />\n </div>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,YAAY,WAAW;AACvB,YAAY,2BAA2B;AAyC9B,SAkBL,UAlBK,KAoBH,YApBG;AApCF,IAAM,YAAY;AAAA,EACvB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,aAAa;AAAA,EACb,QAAQ;AACV;AAGO,IAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AAAA,EACT,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,QAAQ;AACV;AAMO,SAAS,iBAAiB,EAAE,SAAS,GAAuD;AACjG,SAAO,oBAAC,UAAK,WAAW,gBAAgB,UAAW,UAAS;AAC9D;AAeO,SAAS,gBAAgB,EAAE,MAAM,OAAO,aAAa,OAAO,QAAQ,GAA6C;AACtH,SACE,iCACG;AAAA,WAAO,oBAAC,oBAAkB,gBAAK,IAAsB;AAAA,IACtD,qBAAC,UAAK,WAAW,gBAAgB,MAC/B;AAAA,0BAAC,UAAK,WAAW,gBAAgB,OAAQ,iBAAM;AAAA,MAC9C,cAAc,oBAAC,UAAK,WAAW,gBAAgB,MAAO,uBAAY,IAAU;AAAA,OAC/E;AAAA,IACC,QAAQ,oBAAC,UAAK,WAAW,gBAAgB,OAAQ,iBAAM,IAAU;AAAA,IACjE,UAAU,oBAAC,kBAAe,WAAW,gBAAgB,SAAS,eAAY,QAAO,0BAAuB,IAAG,IAAK;AAAA,KACnH;AAEJ;AAGO,SAAS,kBAAkB,EAAE,aAAa,OAAO,IAAyE,CAAC,GAAW;AAC3I,SAAO,GAAG,gBAAgB,IAAI,GAAG,cAAc,IAAI,gBAAgB,MAAM,KAAK,EAAE,GAAG,SAAS,IAAI,gBAAgB,MAAM,KAAK,EAAE;AAC/H;AAYO,IAAM,kBAAwB,iBAAiD,SAASA,iBAC7F,EAAE,OAAO,YAAY,UAAU,eAAe,GAAG,MAAM,GACvD,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,kBAAe;AAAA,MACf,aAAW;AAAA,MACX,gBAAc;AAAA,MACb,GAAG;AAAA,MACJ,WAAW,gBAAgB;AAAA;AAAA,EAC7B;AAEJ,CAAC;AAWM,IAAM,qBAA2B,iBAAoD,SAASC,oBACnG,EAAE,OAAO,YAAY,UAAU,eAAe,GAAG,MAAM,GACvD,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,kBAAe;AAAA,MACf,aAAW;AAAA,MACX,gBAAc;AAAA,MACb,GAAG;AAAA,MACJ,WAAW,gBAAgB;AAAA;AAAA,EAC7B;AAEJ,CAAC;AAiBM,IAAM,eAAqB,iBAA8C,SAASC,cACvF,EAAE,MAAM,OAAO,aAAa,OAAO,SAAS,aAAa,QAAQ,MAAM,QAAQ,WAAW,GAAG,MAAM,GACnG,KACA;AACA,QAAM,YAAY,kBAAkB,EAAE,aAAa,OAAO,CAAC;AAC3D,QAAM,OAAO,oBAAC,mBAAgB,MAAY,OAAc,aAA0B,OAAc,SAAkB;AAClH,QAAM,OAAO,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAC;AACjD,MAAI,MAAM;AACR,WACE,oBAAuB,4BAAtB,EAA2B,KAAU,SAAO,MAAE,GAAG,OAAQ,GAAG,MAAM,WACjE,8BAAC,OAAE,MAAY,QAAgB,KAAK,WAAW,WAAW,wBAAwB,QAAY,GAAG,WAC9F,gBACH,GACF;AAAA,EAEJ;AACA,SACE,oBAAuB,4BAAtB,EAA2B,KAAW,GAAG,OAAQ,GAAG,MAAM,WACxD,gBACH;AAEJ,CAAC;AASM,IAAM,qBAA2B,iBAAoD,SAASC,oBACnG,EAAE,MAAM,OAAO,aAAa,OAAO,GAAG,MAAM,GAC5C,KACA;AACA,SACE,oBAAC,0BAAuB,KAAW,GAAG,OAAO,WAAW,gBAAgB,MACtE,8BAAC,mBAAgB,MAAY,OAAc,aAA0B,OAAc,GACrF;AAEJ,CAAC;AAUM,IAAM,uBAA6B,iBAAsD,SAASC,sBACvG,EAAE,MAAM,OAAO,aAAa,OAAO,SAAS,GAAG,MAAM,GACrD,KACA;AACA,QAAM,KAAK,YAAY;AACvB,SACE,oBAAuB,oCAAtB,EAAmC,KAAW,GAAI,YAAY,SAAY,CAAC,IAAI,EAAE,QAAQ,GAAK,GAAG,OAAO,WAAW,gBAAgB,MAClI,8BAAC,mBAAgB,MAAM,KAAK,oBAAC,kBAAe,WAAW,gBAAgB,MAAM,IAAM,QAAQ,oBAAC,UAAK,WAAW,gBAAgB,MAAM,eAAY,QAAO,GAAK,OAAc,aAA0B,OAAc,GAClN;AAEJ,CAAC;AAGM,IAAM,gBAAsB,iBAGjC,SAASC,eAAc,OAAO,KAAK;AACnC,SAAO,oBAAuB,6BAAtB,EAA4B,KAAW,GAAG,OAAO,WAAW,gBAAgB,cAAc;AACpG,CAAC;AAGM,IAAM,oBAA0B,iBAGrC,SAASC,mBAAkB,OAAO,KAAK;AACvC,SAAO,oBAAuB,iCAAtB,EAAgC,KAAW,GAAG,OAAO,WAAW,gBAAgB,SAAS;AACnG,CAAC;AAYM,IAAM,iBAAuB,iBAAkD,SAASC,gBAC7F,EAAE,cAAc,UAAU,GAAG,MAAM,GACnC,KACA;AACA,SACE,oBAAC,SAAI,WAAW,gBAAgB,QAAQ,yBAAsB,IAC5D;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,cAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACA,cAAY,MAAM,YAAY,KAAK;AAAA,MAClC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;","names":["MenuLookContent","MenuLookSubContent","MenuLookItem","MenuLookSubTrigger","MenuLookCheckboxItem","MenuLookLabel","MenuLookSeparator","MenuLookSearch"]}