@alpic-ai/ui 0.0.0-dev.3ee7a61 → 0.0.0-dev.85c8341

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 +9 -1
  4. package/dist/components/select.mjs +28 -8
  5. package/dist/components/sidebar.mjs +6 -6
  6. package/package.json +7 -7
  7. package/src/components/combobox.tsx +1 -1
  8. package/src/components/dialog.tsx +2 -2
  9. package/src/components/select.tsx +35 -2
  10. package/src/components/sidebar.tsx +10 -8
  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-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),
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),
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
- "max-h-[calc(100vh-4rem)] overflow-hidden rounded-2xl px-6 shadow-lg outline-none",
36
+ "overflow-y-auto 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 py-6 pr-10", className),
66
+ className: cn("flex flex-col gap-0.5 pt-6 pr-10", className),
67
67
  ...props
68
68
  });
69
69
  }
package/dist/components/select.d.mts CHANGED
@@ -39,5 +39,13 @@ 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;
42
50
  //#endregion
43
- export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
51
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, 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 } from "lucide-react";
4
+ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } 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,15 +35,19 @@ 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__ */ jsx(SelectPrimitive.Content, {
38
+ return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(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: /* @__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
- })
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
+ ]
47
51
  }) });
48
52
  }
49
53
  function SelectLabel({ className, ...props }) {
@@ -56,7 +60,7 @@ function SelectLabel({ className, ...props }) {
56
60
  function SelectItem({ className, children, ...props }) {
57
61
  return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
58
62
  "data-slot": "select-item",
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),
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),
60
64
  ...props,
61
65
  children: [/* @__PURE__ */ jsx("span", {
62
66
  className: "absolute right-2 flex size-4 items-center justify-center",
@@ -71,5 +75,21 @@ function SelectSeparator({ className, ...props }) {
71
75
  ...props
72
76
  });
73
77
  }
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
+ }
74
94
  //#endregion
75
- export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, selectTriggerVariants };
95
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, 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", className),
185
+ className: cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:items-center", className),
186
186
  ...props,
187
187
  children: [/* @__PURE__ */ jsxs("div", {
188
- className: "flex h-8 items-center gap-2 px-3",
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",
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, {})
197
+ children: /* @__PURE__ */ jsx(SidebarTrigger, { className: "!size-4 !p-0" })
198
198
  })]
199
199
  }),
200
- /* @__PURE__ */ jsx("span", {
200
+ title && /* @__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", className),
235
+ className: cn("relative flex w-full min-w-0 flex-col p-2", 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 px-3", className),
275
+ className: cn("group/menu-item relative", 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.3ee7a61",
3
+ "version": "0.0.0-dev.85c8341",
4
4
  "description": "Alpic design system — shared UI components",
5
5
  "type": "module",
6
6
  "exports": {
@@ -23,13 +23,13 @@
23
23
  "src"
24
24
  ],
25
25
  "peerDependencies": {
26
- "lucide-react": "^1.7.0",
27
- "react": "^19.2.4",
28
- "react-dom": "^19.2.4",
26
+ "lucide-react": "^1.0.0",
27
+ "react": "^19.0.0",
28
+ "react-dom": "^19.0.0",
29
29
  "react-hook-form": "^7.72.1",
30
- "sonner": "^2.0.7",
31
- "tailwindcss": "^4.2.2",
32
- "tw-animate-css": "^1.4.0"
30
+ "sonner": "^2.0.0",
31
+ "tailwindcss": "^4.0.0",
32
+ "tw-animate-css": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@radix-ui/react-accordion": "^1.2.12",
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-1.5 outline-hidden select-none",
352
+ "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-2.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
- "max-h-[calc(100vh-4rem)] overflow-hidden rounded-2xl px-6 shadow-lg outline-none",
40
+ "overflow-y-auto 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 py-6 pr-10", className)} {...props} />;
96
+ return <div data-slot="dialog-header" className={cn("flex flex-col gap-0.5 pt-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 } from "lucide-react";
5
+ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
6
6
  import type * as React from "react";
7
7
 
8
8
  import { cn } from "../lib/cn";
@@ -75,6 +75,7 @@ function SelectContent({
75
75
  position={position}
76
76
  {...props}
77
77
  >
78
+ <SelectScrollUpButton />
78
79
  <SelectPrimitive.Viewport
79
80
  className={cn(
80
81
  "p-1",
@@ -84,6 +85,7 @@ function SelectContent({
84
85
  >
85
86
  {children}
86
87
  </SelectPrimitive.Viewport>
88
+ <SelectScrollDownButton />
87
89
  </SelectPrimitive.Content>
88
90
  </SelectPrimitive.Portal>
89
91
  );
@@ -108,7 +110,7 @@ function SelectItem({ className, children, ...props }: React.ComponentProps<type
108
110
  <SelectPrimitive.Item
109
111
  data-slot="select-item"
110
112
  className={cn(
111
- "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pl-2 outline-hidden select-none",
113
+ "relative flex w-full cursor-default items-center gap-2 rounded-sm py-2 pr-8 pl-2.5 outline-hidden select-none",
112
114
  "type-text-md font-medium text-foreground mx-1 my-px",
113
115
  "[@media(hover:hover)]:hover:bg-background-hover",
114
116
  "focus:bg-background-hover",
@@ -140,12 +142,43 @@ function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Se
140
142
  );
141
143
  }
142
144
 
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
+
143
174
  export {
144
175
  Select,
145
176
  SelectContent,
146
177
  SelectGroup,
147
178
  SelectItem,
148
179
  SelectLabel,
180
+ SelectScrollDownButton,
181
+ SelectScrollUpButton,
149
182
  SelectSeparator,
150
183
  SelectTrigger,
151
184
  SelectValue,
package/src/components/sidebar.tsx CHANGED
@@ -316,19 +316,21 @@ 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", className)}
319
+ className={cn("flex flex-col gap-2 p-2 group-data-[collapsible=icon]:items-center", className)}
320
320
  {...props}
321
321
  >
322
- <div className="flex h-8 items-center gap-2 px-3">
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">
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 />
326
+ <SidebarTrigger className="!size-4 !p-0" />
327
327
  </div>
328
328
  </div>
329
- <span className="text-foreground text-md min-w-0 truncate font-medium group-data-[collapsible=icon]:hidden">
330
- {title}
331
- </span>
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
+ )}
332
334
  <SidebarTrigger className="ml-auto shrink-0 group-data-[collapsible=icon]:hidden" />
333
335
  </div>
334
336
  {children}
@@ -374,7 +376,7 @@ function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
374
376
  <div
375
377
  data-slot="sidebar-group"
376
378
  data-sidebar="group"
377
- className={cn("relative flex w-full min-w-0 flex-col", className)}
379
+ className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
378
380
  {...props}
379
381
  />
380
382
  );
@@ -451,7 +453,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
451
453
  <li
452
454
  data-slot="sidebar-menu-item"
453
455
  data-sidebar="menu-item"
454
- className={cn("group/menu-item relative px-3", className)}
456
+ className={cn("group/menu-item relative", className)}
455
457
  {...props}
456
458
  />
457
459
  );
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>
65
+ <SidebarGroup className="px-3">
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>
121
+ <SidebarGroup className="px-3">
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>
149
+ <SidebarGroup className="px-3">
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>
183
+ <SidebarGroup className="px-3">
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>
217
+ <SidebarGroup className="px-3">
218
218
  <SidebarGroupContent>
219
219
  <SidebarMenu>
220
220
  <SidebarMenuItem>