@alpic-ai/ui 0.0.0-dev.85c8341 → 0.0.0-staging.664c983

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 (11) hide show
  1. package/dist/components/combobox.mjs +1 -1
  2. package/dist/components/dialog.mjs +2 -2
  3. package/dist/components/select.d.mts +1 -9
  4. package/dist/components/select.mjs +8 -28
  5. package/dist/components/sidebar.mjs +6 -6
  6. package/package.json +1 -1
  7. package/src/components/combobox.tsx +1 -1
  8. package/src/components/dialog.tsx +2 -2
  9. package/src/components/select.tsx +2 -35
  10. package/src/components/sidebar.tsx +8 -10
  11. package/src/stories/sidebar.stories.tsx +5 -5
package/dist/components/combobox.mjs CHANGED
@@ -187,7 +187,7 @@ function ComboboxItem({ className, children, itemValue, ...props }) {
187
187
  "data-slot": "combobox-item",
188
188
  "data-selected-item": selected || void 0,
189
189
  onSelect: () => onSelect(itemValue),
190
- className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-2.5 outline-hidden select-none", "type-text-md font-medium text-foreground mx-1.5 my-px", "data-[selected=true]:bg-background-hover", "data-[selected-item]:bg-accent", "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-disabled-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", className),
190
+ className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-hidden select-none", "type-text-md font-medium text-foreground mx-1.5 my-px", "data-[selected=true]:bg-background-hover", "data-[selected-item]:bg-accent", "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-disabled-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5", className),
191
191
  ...props,
192
192
  children: [/* @__PURE__ */ jsx("span", {
193
193
  className: "flex flex-1 items-center gap-2 truncate",
package/dist/components/dialog.mjs CHANGED
@@ -33,7 +33,7 @@ function DialogOverlay({ className, ...props }) {
33
33
  }
34
34
  const dialogContentVariants = cva([
35
35
  "bg-background fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2",
36
- "overflow-y-auto rounded-2xl px-6 shadow-lg outline-none",
36
+ "max-h-[calc(100vh-4rem)] overflow-hidden rounded-2xl px-6 shadow-lg outline-none",
37
37
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
38
38
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
39
39
  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -63,7 +63,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
63
63
  function DialogHeader({ className, ...props }) {
64
64
  return /* @__PURE__ */ jsx("div", {
65
65
  "data-slot": "dialog-header",
66
- className: cn("flex flex-col gap-0.5 pt-6 pr-10", className),
66
+ className: cn("flex flex-col gap-0.5 py-6 pr-10", className),
67
67
  ...props
68
68
  });
69
69
  }
package/dist/components/select.d.mts CHANGED
@@ -39,13 +39,5 @@ declare function SelectSeparator({
39
39
  className,
40
40
  ...props
41
41
  }: React.ComponentProps<typeof SelectPrimitive.Separator>): _$react_jsx_runtime0.JSX.Element;
42
- declare function SelectScrollUpButton({
43
- className,
44
- ...props
45
- }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): _$react_jsx_runtime0.JSX.Element;
46
- declare function SelectScrollDownButton({
47
- className,
48
- ...props
49
- }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): _$react_jsx_runtime0.JSX.Element;
50
42
  //#endregion
51
- export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
43
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
package/dist/components/select.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { cn } from "../lib/cn.mjs";
3
3
  import { selectTriggerVariants } from "./select-trigger-variants.mjs";
4
- import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
4
+ import { CheckIcon, ChevronDownIcon } from "lucide-react";
5
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
6
  import * as SelectPrimitive from "@radix-ui/react-select";
7
7
  //#region src/components/select.tsx
@@ -35,19 +35,15 @@ function SelectTrigger({ className, size = "md", children, ...props }) {
35
35
  });
36
36
  }
37
37
  function SelectContent({ className, children, position = "popper", ...props }) {
38
- return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
38
+ return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, {
39
39
  "data-slot": "select-content",
40
40
  className: cn("bg-popover text-popover-foreground", "relative z-50 max-h-[min(var(--radix-select-content-available-height),300px)] min-w-[8rem] overflow-hidden rounded-md border border-border-secondary py-1 shadow-lg", "origin-(--radix-select-content-transform-origin)", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
41
41
  position,
42
42
  ...props,
43
- children: [
44
- /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
45
- /* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
46
- className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
47
- children
48
- }),
49
- /* @__PURE__ */ jsx(SelectScrollDownButton, {})
50
- ]
43
+ children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, {
44
+ className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),
45
+ children
46
+ })
51
47
  }) });
52
48
  }
53
49
  function SelectLabel({ className, ...props }) {
@@ -60,7 +56,7 @@ function SelectLabel({ className, ...props }) {
60
56
  function SelectItem({ className, children, ...props }) {
61
57
  return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
62
58
  "data-slot": "select-item",
63
- className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-2 pr-8 pl-2.5 outline-hidden select-none", "type-text-md font-medium text-foreground mx-1 my-px", "[@media(hover:hover)]:hover:bg-background-hover", "focus:bg-background-hover", "data-[disabled]:pointer-events-none data-[disabled]:text-disabled-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
59
+ className: cn("relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none", "type-text-md font-medium text-foreground mx-1 my-px", "[@media(hover:hover)]:hover:bg-background-hover", "focus:bg-background-hover", "data-[disabled]:pointer-events-none data-[disabled]:text-disabled-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
64
60
  ...props,
65
61
  children: [/* @__PURE__ */ jsx("span", {
66
62
  className: "absolute right-2 flex size-4 items-center justify-center",
@@ -75,21 +71,5 @@ function SelectSeparator({ className, ...props }) {
75
71
  ...props
76
72
  });
77
73
  }
78
- function SelectScrollUpButton({ className, ...props }) {
79
- return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, {
80
- "data-slot": "select-scroll-up-button",
81
- className: cn("flex cursor-default items-center justify-center py-1", className),
82
- ...props,
83
- children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
84
- });
85
- }
86
- function SelectScrollDownButton({ className, ...props }) {
87
- return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, {
88
- "data-slot": "select-scroll-down-button",
89
- className: cn("flex cursor-default items-center justify-center py-1", className),
90
- ...props,
91
- children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
92
- });
93
- }
94
74
  //#endregion
95
- export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
75
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
package/dist/components/sidebar.mjs CHANGED
@@ -182,10 +182,10 @@ function SidebarHeader({ className, icon, title, children, ...props }) {
182
182
  return /* @__PURE__ */ jsxs("div", {
183
183
  "data-slot": "sidebar-header",
184
184
  "data-sidebar": "header",
185
- className: cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:items-center", className),
185
+ className: cn("flex flex-col gap-2 p-2", className),
186
186
  ...props,
187
187
  children: [/* @__PURE__ */ jsxs("div", {
188
- className: "flex h-8 items-center gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:px-0",
188
+ className: "flex h-8 items-center gap-2 px-3",
189
189
  children: [
190
190
  /* @__PURE__ */ jsxs("div", {
191
191
  className: "relative shrink-0",
@@ -194,10 +194,10 @@ function SidebarHeader({ className, icon, title, children, ...props }) {
194
194
  children: icon
195
195
  }), /* @__PURE__ */ jsx("div", {
196
196
  className: "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-data-[collapsible=icon]:group-hover:opacity-100",
197
- children: /* @__PURE__ */ jsx(SidebarTrigger, { className: "!size-4 !p-0" })
197
+ children: /* @__PURE__ */ jsx(SidebarTrigger, {})
198
198
  })]
199
199
  }),
200
- title && /* @__PURE__ */ jsx("span", {
200
+ /* @__PURE__ */ jsx("span", {
201
201
  className: "text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden",
202
202
  children: title
203
203
  }),
@@ -232,7 +232,7 @@ function SidebarGroup({ className, ...props }) {
232
232
  return /* @__PURE__ */ jsx("div", {
233
233
  "data-slot": "sidebar-group",
234
234
  "data-sidebar": "group",
235
- className: cn("relative flex w-full min-w-0 flex-col p-2", className),
235
+ className: cn("relative flex w-full min-w-0 flex-col", className),
236
236
  ...props
237
237
  });
238
238
  }
@@ -272,7 +272,7 @@ function SidebarMenuItem({ className, ...props }) {
272
272
  return /* @__PURE__ */ jsx("li", {
273
273
  "data-slot": "sidebar-menu-item",
274
274
  "data-sidebar": "menu-item",
275
- className: cn("group/menu-item relative", className),
275
+ className: cn("group/menu-item relative px-3", className),
276
276
  ...props
277
277
  });
278
278
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alpic-ai/ui",
3
- "version": "0.0.0-dev.85c8341",
3
+ "version": "0.0.0-staging.664c983",
4
4
  "description": "Alpic design system — shared UI components",
5
5
  "type": "module",
6
6
  "exports": {
package/src/components/combobox.tsx CHANGED
@@ -349,7 +349,7 @@ function ComboboxItem({ className, children, itemValue, ...props }: ComboboxItem
349
349
  data-selected-item={selected || undefined}
350
350
  onSelect={() => onSelect(itemValue)}
351
351
  className={cn(
352
- "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-2.5 outline-hidden select-none",
352
+ "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 outline-hidden select-none",
353
353
  "type-text-md font-medium text-foreground mx-1.5 my-px",
354
354
  "data-[selected=true]:bg-background-hover",
355
355
  "data-[selected-item]:bg-accent",
package/src/components/dialog.tsx CHANGED
@@ -37,7 +37,7 @@ function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dial
37
37
  const dialogContentVariants = cva(
38
38
  [
39
39
  "bg-background fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2",
40
- "overflow-y-auto rounded-2xl px-6 shadow-lg outline-none",
40
+ "max-h-[calc(100vh-4rem)] overflow-hidden rounded-2xl px-6 shadow-lg outline-none",
41
41
  "data-[state=open]:animate-in data-[state=closed]:animate-out",
42
42
  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
43
43
  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
@@ -93,7 +93,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
93
93
  }
94
94
 
95
95
  function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
96
- return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5 pt-6 pr-10", className)} {...props} />;
96
+ return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5 py-6 pr-10", className)} {...props} />;
97
97
  }
98
98
 
99
99
  const dialogFooterVariants = cva("pb-6 pt-6", {
package/src/components/select.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import * as SelectPrimitive from "@radix-ui/react-select";
4
4
  import type { VariantProps } from "class-variance-authority";
5
- import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
5
+ import { CheckIcon, ChevronDownIcon } from "lucide-react";
6
6
  import type * as React from "react";
7
7
 
8
8
  import { cn } from "../lib/cn";
@@ -75,7 +75,6 @@ function SelectContent({
75
75
  position={position}
76
76
  {...props}
77
77
  >
78
- <SelectScrollUpButton />
79
78
  <SelectPrimitive.Viewport
80
79
  className={cn(
81
80
  "p-1",
@@ -85,7 +84,6 @@ function SelectContent({
85
84
  >
86
85
  {children}
87
86
  </SelectPrimitive.Viewport>
88
- <SelectScrollDownButton />
89
87
  </SelectPrimitive.Content>
90
88
  </SelectPrimitive.Portal>
91
89
  );
@@ -110,7 +108,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
110
108
  <SelectPrimitive.Item
111
109
  data-slot="select-item"
112
110
  className={cn(
113
- "relative flex w-full cursor-default items-center gap-2 rounded-sm py-2 pr-8 pl-2.5 outline-hidden select-none",
111
+ "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none",
114
112
  "type-text-md font-medium text-foreground mx-1 my-px",
115
113
  "[@media(hover:hover)]:hover:bg-background-hover",
116
114
  "focus:bg-background-hover",
@@ -142,43 +140,12 @@ function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Se
142
140
  );
143
141
  }
144
142
 
145
- /* ── Scroll buttons ──────────────────────────────────────────────────────── */
146
-
147
- function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
148
- return (
149
- <SelectPrimitive.ScrollUpButton
150
- data-slot="select-scroll-up-button"
151
- className={cn("flex cursor-default items-center justify-center py-1", className)}
152
- {...props}
153
- >
154
- <ChevronUpIcon className="size-4" />
155
- </SelectPrimitive.ScrollUpButton>
156
- );
157
- }
158
-
159
- function SelectScrollDownButton({
160
- className,
161
- ...props
162
- }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
163
- return (
164
- <SelectPrimitive.ScrollDownButton
165
- data-slot="select-scroll-down-button"
166
- className={cn("flex cursor-default items-center justify-center py-1", className)}
167
- {...props}
168
- >
169
- <ChevronDownIcon className="size-4" />
170
- </SelectPrimitive.ScrollDownButton>
171
- );
172
- }
173
-
174
143
  export {
175
144
  Select,
176
145
  SelectContent,
177
146
  SelectGroup,
178
147
  SelectItem,
179
148
  SelectLabel,
180
- SelectScrollDownButton,
181
- SelectScrollUpButton,
182
149
  SelectSeparator,
183
150
  SelectTrigger,
184
151
  SelectValue,
package/src/components/sidebar.tsx CHANGED
@@ -316,21 +316,19 @@ function SidebarHeader({ className, icon, title, children, ...props }: SidebarHe
316
316
  <div
317
317
  data-slot="sidebar-header"
318
318
  data-sidebar="header"
319
- className={cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:items-center", className)}
319
+ className={cn("flex flex-col gap-2 p-2", className)}
320
320
  {...props}
321
321
  >
322
- <div className="flex h-8 items-center gap-2 px-2 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0 group-data-[collapsible=icon]:px-0">
322
+ <div className="flex h-8 items-center gap-2 px-3">
323
323
  <div className="relative shrink-0">
324
324
  <span className="transition-opacity group-data-[collapsible=icon]:group-hover:opacity-0">{icon}</span>
325
325
  <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-data-[collapsible=icon]:group-hover:opacity-100">
326
- <SidebarTrigger className="!size-4 !p-0" />
326
+ <SidebarTrigger />
327
327
  </div>
328
328
  </div>
329
- {title && (
330
- <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
331
- {title}
332
- </span>
333
- )}
329
+ <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
330
+ {title}
331
+ </span>
334
332
  <SidebarTrigger className="ml-auto shrink-0 group-data-[collapsible=icon]:hidden" />
335
333
  </div>
336
334
  {children}
@@ -376,7 +374,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
376
374
  <div
377
375
  data-slot="sidebar-group"
378
376
  data-sidebar="group"
379
- className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
377
+ className={cn("relative flex w-full min-w-0 flex-col", className)}
380
378
  {...props}
381
379
  />
382
380
  );
@@ -453,7 +451,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
453
451
  <li
454
452
  data-slot="sidebar-menu-item"
455
453
  data-sidebar="menu-item"
456
- className={cn("group/menu-item relative", className)}
454
+ className={cn("group/menu-item relative px-3", className)}
457
455
  {...props}
458
456
  />
459
457
  );
package/src/stories/sidebar.stories.tsx CHANGED
@@ -62,7 +62,7 @@ export const AllVariants: Story = () => (
62
62
  <Sidebar collapsible="icon">
63
63
  <TeamHeader />
64
64
  <SidebarContent>
65
- <SidebarGroup className="px-3">
65
+ <SidebarGroup>
66
66
  <SidebarGroupContent>
67
67
  <SidebarMenu>
68
68
  <SidebarMenuItem>
@@ -118,7 +118,7 @@ export const AllVariants: Story = () => (
118
118
  <Sidebar collapsible="icon">
119
119
  <TeamHeader />
120
120
  <SidebarContent>
121
- <SidebarGroup className="px-3">
121
+ <SidebarGroup>
122
122
  <SidebarGroupLabel>Workspace</SidebarGroupLabel>
123
123
  <SidebarGroupContent>
124
124
  <SidebarMenu>
@@ -146,7 +146,7 @@ export const AllVariants: Story = () => (
146
146
  </SidebarGroupContent>
147
147
  </SidebarGroup>
148
148
  <SidebarSeparator />
149
- <SidebarGroup className="px-3">
149
+ <SidebarGroup>
150
150
  <SidebarGroupLabel>Account</SidebarGroupLabel>
151
151
  <SidebarGroupContent>
152
152
  <SidebarMenu>
@@ -180,7 +180,7 @@ export const AllVariants: Story = () => (
180
180
  <Sidebar collapsible="icon">
181
181
  <TeamHeader />
182
182
  <SidebarContent>
183
- <SidebarGroup className="px-3">
183
+ <SidebarGroup>
184
184
  <SidebarGroupContent>
185
185
  <SidebarMenu>
186
186
  {["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((key) => (
@@ -214,7 +214,7 @@ export const AllVariants: Story = () => (
214
214
  </div>
215
215
  </SidebarHeader>
216
216
  <SidebarContent>
217
- <SidebarGroup className="px-3">
217
+ <SidebarGroup>
218
218
  <SidebarGroupContent>
219
219
  <SidebarMenu>
220
220
  <SidebarMenuItem>