@alpic-ai/ui 0.0.0-staging.664c983 → 0.0.0-staging.dcd2ccb

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 (4) hide show
  1. package/dist/components/sidebar.mjs +6 -6
  2. package/package.json +1 -1
  3. package/src/components/sidebar.tsx +10 -8
  4. package/src/stories/sidebar.stories.tsx +5 -5
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-staging.664c983",
3
+ "version": "0.0.0-staging.dcd2ccb",
4
4
  "description": "Alpic design system — shared UI components",
5
5
  "type": "module",
6
6
  "exports": {
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>