@nadicodeai/ui 0.11.0 → 0.12.0

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.
@@ -163,7 +163,7 @@ function SidebarMenu({ className, ...props }) {
163
163
  function SidebarMenuItem({ className, ...props }) {
164
164
  return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
165
165
  }
166
- const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex min-h-touch-target min-w-touch-target w-full items-center gap-2 overflow-hidden rounded-md border border-transparent p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-control-height! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:border-sidebar-ring focus-visible:ring-focus active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
166
+ const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex min-h-touch-target min-w-touch-target w-full items-center gap-2 overflow-hidden rounded-md border border-transparent p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding,background-color,color] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-control-height! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:border-sidebar-ring focus-visible:ring-focus active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-primary data-active:font-medium data-active:text-sidebar-primary-foreground data-active:hover:bg-sidebar-primary-hover data-active:hover:text-sidebar-primary-foreground data-active:focus-visible:border-sidebar-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
167
167
  variants: {
168
168
  variant: {
169
169
  default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
@@ -209,8 +209,8 @@ function SidebarMenuAction({ className, render, showOnHover = false, ...props })
209
209
  return useRender({
210
210
  defaultTagName: "button",
211
211
  props: mergeProps({
212
- className: cn("absolute top-3 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-focus [@media(hover:hover)_and_(pointer:fine)]:peer-data-[size=default]/menu-button:top-1.5 [@media(hover:hover)_and_(pointer:fine)]:peer-data-[size=lg]/menu-button:top-2.5 [@media(hover:hover)_and_(pointer:fine)]:peer-data-[size=sm]/menu-button:top-1 [@media(hover:hover)_and_(pointer:fine)]:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover &&
213
- "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className),
212
+ className: cn("absolute top-3 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-primary-foreground peer-data-active/menu-button:focus-visible:ring-sidebar-primary-foreground after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-focus [@media(hover:hover)_and_(pointer:fine)]:peer-data-[size=default]/menu-button:top-1.5 [@media(hover:hover)_and_(pointer:fine)]:peer-data-[size=lg]/menu-button:top-2.5 [@media(hover:hover)_and_(pointer:fine)]:peer-data-[size=sm]/menu-button:top-1 [@media(hover:hover)_and_(pointer:fine)]:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover &&
213
+ "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0", className),
214
214
  }, props),
215
215
  render,
216
216
  state: {
@@ -220,7 +220,7 @@ function SidebarMenuAction({ className, render, showOnHover = false, ...props })
220
220
  });
221
221
  }
222
222
  function SidebarMenuBadge({ className, ...props }) {
223
- return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className), ...props }));
223
+ return (_jsx("div", { "data-slot": "sidebar-menu-badge", "data-sidebar": "menu-badge", className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-primary-foreground", className), ...props }));
224
224
  }
225
225
  function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
226
226
  // Random width between 50 to 90%.
@@ -241,7 +241,7 @@ function SidebarMenuSubButton({ render, size = "md", isActive = false, className
241
241
  return useRender({
242
242
  defaultTagName: "a",
243
243
  props: mergeProps({
244
- className: cn("flex h-7 min-h-touch-target min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-focus active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className),
244
+ className: cn("flex h-7 min-h-touch-target min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md border border-transparent px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-colors group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-focus active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-primary data-active:text-sidebar-primary-foreground data-active:hover:bg-sidebar-primary-hover data-active:hover:text-sidebar-primary-foreground data-active:focus-visible:border-sidebar-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", className),
245
245
  }, props),
246
246
  render,
247
247
  state: {
@@ -39,6 +39,17 @@
39
39
  body {
40
40
  @apply bg-background text-foreground;
41
41
  }
42
+
43
+ /*
44
+ * lucide-react supplies glyph geometry; the shared house render owns only
45
+ * presentation. Keep this in the package stylesheet so every React consumer
46
+ * matches the generated static SVG set without per-component stroke props.
47
+ */
48
+ svg.lucide {
49
+ stroke-width: var(--nc-icon-stroke);
50
+ stroke-linecap: round;
51
+ stroke-linejoin: round;
52
+ }
42
53
  }
43
54
 
44
55
  /*
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nadicodeai/ui",
3
- "version": "0.11.0",
3
+ "version": "0.12.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -62,7 +62,7 @@
62
62
  },
63
63
  "dependencies": {
64
64
  "@base-ui/react": "^1.6.0",
65
- "@nadicodeai/design-system": "0.11.0",
65
+ "@nadicodeai/design-system": "0.12.0",
66
66
  "@rive-app/react-webgl2": "^4.29.1",
67
67
  "@streamdown/cjk": "^1.0.3",
68
68
  "@streamdown/code": "^1.1.1",
@@ -76,7 +76,7 @@
76
76
  "cmdk": "^1.1.1",
77
77
  "embla-carousel-react": "^8.6.0",
78
78
  "input-otp": "^1.4.2",
79
- "lucide-react": "^1.21.0",
79
+ "lucide-react": "1.21.0",
80
80
  "media-chrome": "^4.19.2",
81
81
  "motion": "^12.40.0",
82
82
  "nanoid": "^5.1.15",