@nucleux/item 0.0.0-stage → 0.6.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nucleux
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,44 @@
-# Temporary Holding Version
+# @nucleux/item
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Flexible list row with media, content and actions — Nucleux agentic UI for React.
+
+Part of **[Nucleux](https://github.com/intelligaia-open-labs/nucleux)** — agentic UI components for React. Install a single component, or the full kit via [`@nucleux/react`](https://www.npmjs.com/package/@nucleux/react).
+
+
+## Exports
+
+- **`Item`** — the row (`variant`: `default` | `outline` | `muted`; `size`: `default` | `sm`; `asChild` for links)
+- **`ItemMedia`** (`variant`: `default` | `icon` | `image`), **`ItemContent`**, **`ItemTitle`**, **`ItemDescription`**, **`ItemActions`**
+- **`ItemHeader`**, **`ItemFooter`** — full-width rows above / below
+- **`ItemGroup`** — `role="list"` wrapper; **`ItemSeparator`** — rule between items
+- **`itemVariants`**, **`itemMediaVariants`** — the class strings
+
+## Install
+
+```bash
+pnpm add @nucleux/item @nucleux/tokens
+```
+
+`react` / `react-dom` are peer dependencies.
+
+## Usage
+
+```tsx
+import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from "@nucleux/item";
+
+<Item variant="outline">
+  <ItemMedia variant="icon"><ShieldAlert /></ItemMedia>
+  <ItemContent>
+    <ItemTitle>Security alert</ItemTitle>
+    <ItemDescription>New sign-in from Chrome on macOS.</ItemDescription>
+  </ItemContent>
+  <ItemActions><Button variant="secondary" size="sm">Review</Button></ItemActions>
+</Item>
+```
+
+Requires the theme once in your app: `import "@nucleux/tokens/styles.css";`
+and the Tailwind preset from `@nucleux/tokens/preset`.
+
+## License
+
+MIT © Nucleux

package/dist/index.cjs

@@ -0,0 +1,166 @@
+"use client";
+'use strict';
+
+var React = require('react');
+var utils = require('@nucleux/utils');
+var separator = require('@nucleux/separator');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/index.tsx
+var ItemGroupContext = React__namespace.createContext(false);
+var ItemGroup = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(ItemGroupContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "list", "data-slot": "item-group", className: utils.cn("group/item-group flex flex-col", className), ...props }) }));
+ItemGroup.displayName = "ItemGroup";
+var ItemSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(separator.Separator, { ref, "data-slot": "item-separator", orientation: "horizontal", className: utils.cn("my-0", className), ...props }));
+ItemSeparator.displayName = "ItemSeparator";
+var itemBase = "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a&]:transition-colors hover:[a&]:bg-accent/50";
+var itemVariantClasses = {
+  default: "bg-transparent",
+  outline: "border-border",
+  muted: "bg-muted/50"
+};
+var itemSizeClasses = {
+  default: "gap-4 p-4",
+  sm: "gap-2.5 px-4 py-3"
+};
+function itemVariants({
+  variant = "default",
+  size = "default",
+  className
+} = {}) {
+  return utils.cn(itemBase, itemVariantClasses[variant ?? "default"], itemSizeClasses[size ?? "default"], className);
+}
+var Item = React__namespace.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+    const inGroup = React__namespace.useContext(ItemGroupContext);
+    const shared = {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: itemVariants({ variant, size, className })
+    };
+    if (asChild) {
+      const el = /* @__PURE__ */ jsxRuntime.jsx(utils.Slot, { ref, ...shared, ...props });
+      return inGroup ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listitem", "data-slot": "item-listitem", className: "contents", children: el }) : el;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: inGroup ? "listitem" : void 0, ...shared, ...props });
+  }
+);
+Item.displayName = "Item";
+var itemMediaBase = "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none";
+var itemMediaVariantClasses = {
+  default: "bg-transparent",
+  icon: "size-8 rounded-sm border border-border bg-muted [&_svg:not([class*='size-'])]:size-4",
+  image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
+};
+function itemMediaVariants({
+  variant = "default",
+  className
+} = {}) {
+  return utils.cn(itemMediaBase, itemMediaVariantClasses[variant ?? "default"], className);
+}
+var ItemMedia = React__namespace.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: itemMediaVariants({ variant, className }),
+      ...props
+    }
+  )
+);
+ItemMedia.displayName = "ItemMedia";
+var ItemContent = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "item-content",
+    className: utils.cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className),
+    ...props
+  }
+));
+ItemContent.displayName = "ItemContent";
+var ItemTitle = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "item-title",
+    className: utils.cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug", className),
+    ...props
+  }
+));
+ItemTitle.displayName = "ItemTitle";
+var ItemDescription = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      "data-slot": "item-description",
+      className: utils.cn(
+        "line-clamp-2 text-balance text-sm font-normal leading-normal text-muted-foreground",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ItemDescription.displayName = "ItemDescription";
+var ItemActions = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-slot": "item-actions", className: utils.cn("flex items-center gap-2", className), ...props }));
+ItemActions.displayName = "ItemActions";
+var ItemHeader = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "item-header",
+    className: utils.cn("flex basis-full items-center justify-between gap-2", className),
+    ...props
+  }
+));
+ItemHeader.displayName = "ItemHeader";
+var ItemFooter = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "item-footer",
+    className: utils.cn("flex basis-full items-center justify-between gap-2", className),
+    ...props
+  }
+));
+ItemFooter.displayName = "ItemFooter";
+
+exports.Item = Item;
+exports.ItemActions = ItemActions;
+exports.ItemContent = ItemContent;
+exports.ItemDescription = ItemDescription;
+exports.ItemFooter = ItemFooter;
+exports.ItemGroup = ItemGroup;
+exports.ItemHeader = ItemHeader;
+exports.ItemMedia = ItemMedia;
+exports.ItemSeparator = ItemSeparator;
+exports.ItemTitle = ItemTitle;
+exports.itemMediaVariants = itemMediaVariants;
+exports.itemVariants = itemVariants;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":["React","jsx","cn","Separator","Slot"],"mappings":"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","file":"index.cjs","sourcesContent":["import * as React from \"react\";\nimport { cn, Slot } from \"@nucleux/utils\";\nimport { Separator, type SeparatorProps } from \"@nucleux/separator\";\n\nexport type ItemVariant = \"default\" | \"outline\" | \"muted\";\nexport type ItemSize = \"default\" | \"sm\";\nexport type ItemMediaVariant = \"default\" | \"icon\" | \"image\";\n\nconst ItemGroupContext = React.createContext(false);\n\nexport type ItemGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * A vertical list of Items, exposed to assistive tech as a list\n * (`role=\"list\"`). Items rendered inside get `role=\"listitem\"`; an Item\n * using `asChild` (e.g. a link) keeps its child's role and is wrapped in a\n * layout-neutral (`display: contents`) listitem.\n * Put an ItemSeparator between Items for dividing rules.\n */\nexport const ItemGroup = React.forwardRef<HTMLDivElement, ItemGroupProps>(({ className, ...props }, ref) => (\n  <ItemGroupContext.Provider value={true}>\n    <div ref={ref} role=\"list\" data-slot=\"item-group\" className={cn(\"group/item-group flex flex-col\", className)} {...props} />\n  </ItemGroupContext.Provider>\n));\nItemGroup.displayName = \"ItemGroup\";\n\nexport type ItemSeparatorProps = SeparatorProps;\n\n/** A horizontal rule between Items in an ItemGroup. */\nexport const ItemSeparator = React.forwardRef<HTMLDivElement, ItemSeparatorProps>(({ className, ...props }, ref) => (\n  <Separator ref={ref} data-slot=\"item-separator\" orientation=\"horizontal\" className={cn(\"my-0\", className)} {...props} />\n));\nItemSeparator.displayName = \"ItemSeparator\";\n\nconst itemBase =\n  \"group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a&]:transition-colors hover:[a&]:bg-accent/50\";\n\nconst itemVariantClasses: Record<ItemVariant, string> = {\n  default: \"bg-transparent\",\n  outline: \"border-border\",\n  muted: \"bg-muted/50\",\n};\n\nconst itemSizeClasses: Record<ItemSize, string> = {\n  default: \"gap-4 p-4\",\n  sm: \"gap-2.5 px-4 py-3\",\n};\n\n/** Returns the Item class string for a variant and size (shadcn's `itemVariants` cva helper). */\nexport function itemVariants({\n  variant = \"default\",\n  size = \"default\",\n  className,\n}: { variant?: ItemVariant | null; size?: ItemSize | null; className?: string } = {}) {\n  return cn(itemBase, itemVariantClasses[variant ?? \"default\"], itemSizeClasses[size ?? \"default\"], className);\n}\n\nexport interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \"default\" (transparent), \"outline\" (bordered) or \"muted\" (soft fill). */\n  variant?: ItemVariant;\n  /** \"default\" (roomy) or \"sm\" (compact). */\n  size?: ItemSize;\n  /** Render the single child (e.g. an `<a>` or router Link) as the row, making it clickable with a hover tint. */\n  asChild?: boolean;\n}\n\n/**\n * A flexible row for lists, settings and search results: media on the\n * left, title and description in the middle, actions on the right.\n * Compose ItemMedia, ItemContent (ItemTitle, ItemDescription), ItemActions,\n * and optionally ItemHeader / ItemFooter spanning the full width. Use\n * `asChild` with an `<a>` to make the whole row a link; group rows in an\n * ItemGroup.\n */\nexport const Item = React.forwardRef<HTMLDivElement, ItemProps>(\n  ({ className, variant = \"default\", size = \"default\", asChild = false, ...props }, ref) => {\n    const inGroup = React.useContext(ItemGroupContext);\n    const shared = {\n      \"data-slot\": \"item\",\n      \"data-variant\": variant,\n      \"data-size\": size,\n      className: itemVariants({ variant, size, className }),\n    };\n    if (asChild) {\n      const el = <Slot ref={ref} {...shared} {...props} />;\n      // A link or button can't also be a listitem, so inside an ItemGroup it\n      // gets a layout-neutral listitem wrapper to keep the list valid.\n      return inGroup ? (\n        <div role=\"listitem\" data-slot=\"item-listitem\" className=\"contents\">\n          {el}\n        </div>\n      ) : (\n        el\n      );\n    }\n    return <div ref={ref} role={inGroup ? \"listitem\" : undefined} {...shared} {...props} />;\n  },\n);\nItem.displayName = \"Item\";\n\nconst itemMediaBase =\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\";\n\nconst itemMediaVariantClasses: Record<ItemMediaVariant, string> = {\n  default: \"bg-transparent\",\n  icon: \"size-8 rounded-sm border border-border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n  image: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n};\n\n/** Returns the ItemMedia class string for a variant. */\nexport function itemMediaVariants({\n  variant = \"default\",\n  className,\n}: { variant?: ItemMediaVariant | null; className?: string } = {}) {\n  return cn(itemMediaBase, itemMediaVariantClasses[variant ?? \"default\"], className);\n}\n\nexport interface ItemMediaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \"default\" (as-is, e.g. an Avatar), \"icon\" (icon in a bordered muted tile) or \"image\" (40px cover thumbnail). */\n  variant?: ItemMediaVariant;\n}\n\n/** The leading icon, avatar or thumbnail; aligns to the top when the Item has a description. */\nexport const ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(\n  ({ className, variant = \"default\", ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={itemMediaVariants({ variant, className })}\n      {...props}\n    />\n  ),\n);\nItemMedia.displayName = \"ItemMedia\";\n\nexport type ItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** The flexible middle column holding ItemTitle and ItemDescription. */\nexport const ItemContent = React.forwardRef<HTMLDivElement, ItemContentProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"item-content\"\n    className={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", className)}\n    {...props}\n  />\n));\nItemContent.displayName = \"ItemContent\";\n\nexport type ItemTitleProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** The row's primary label; can hold an inline Badge or icon. */\nexport const ItemTitle = React.forwardRef<HTMLDivElement, ItemTitleProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"item-title\"\n    className={cn(\"flex w-fit items-center gap-2 text-sm font-medium leading-snug\", className)}\n    {...props}\n  />\n));\nItemTitle.displayName = \"ItemTitle\";\n\nexport type ItemDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\n\n/** Secondary muted text under the title, clamped to two lines; links inside are underlined. */\nexport const ItemDescription = React.forwardRef<HTMLParagraphElement, ItemDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p\n      ref={ref}\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-balance text-sm font-normal leading-normal text-muted-foreground\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nItemDescription.displayName = \"ItemDescription\";\n\nexport type ItemActionsProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** Trailing buttons or controls for the row. */\nexport const ItemActions = React.forwardRef<HTMLDivElement, ItemActionsProps>(({ className, ...props }, ref) => (\n  <div ref={ref} data-slot=\"item-actions\" className={cn(\"flex items-center gap-2\", className)} {...props} />\n));\nItemActions.displayName = \"ItemActions\";\n\nexport type ItemHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** A full-width row above the main content (e.g. a cover image or a title with a menu). */\nexport const ItemHeader = React.forwardRef<HTMLDivElement, ItemHeaderProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"item-header\"\n    className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n    {...props}\n  />\n));\nItemHeader.displayName = \"ItemHeader\";\n\nexport type ItemFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** A full-width row below the main content (e.g. metadata or secondary actions). */\nexport const ItemFooter = React.forwardRef<HTMLDivElement, ItemFooterProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"item-footer\"\n    className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n    {...props}\n  />\n));\nItemFooter.displayName = \"ItemFooter\";\n"]}

package/dist/index.d.cts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { SeparatorProps } from '@nucleux/separator';
+
+type ItemVariant = "default" | "outline" | "muted";
+type ItemSize = "default" | "sm";
+type ItemMediaVariant = "default" | "icon" | "image";
+type ItemGroupProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * A vertical list of Items, exposed to assistive tech as a list
+ * (`role="list"`). Items rendered inside get `role="listitem"`; an Item
+ * using `asChild` (e.g. a link) keeps its child's role and is wrapped in a
+ * layout-neutral (`display: contents`) listitem.
+ * Put an ItemSeparator between Items for dividing rules.
+ */
+declare const ItemGroup: React.ForwardRefExoticComponent<ItemGroupProps & React.RefAttributes<HTMLDivElement>>;
+type ItemSeparatorProps = SeparatorProps;
+/** A horizontal rule between Items in an ItemGroup. */
+declare const ItemSeparator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/** Returns the Item class string for a variant and size (shadcn's `itemVariants` cva helper). */
+declare function itemVariants({ variant, size, className, }?: {
+    variant?: ItemVariant | null;
+    size?: ItemSize | null;
+    className?: string;
+}): string;
+interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "default" (transparent), "outline" (bordered) or "muted" (soft fill). */
+    variant?: ItemVariant;
+    /** "default" (roomy) or "sm" (compact). */
+    size?: ItemSize;
+    /** Render the single child (e.g. an `<a>` or router Link) as the row, making it clickable with a hover tint. */
+    asChild?: boolean;
+}
+/**
+ * A flexible row for lists, settings and search results: media on the
+ * left, title and description in the middle, actions on the right.
+ * Compose ItemMedia, ItemContent (ItemTitle, ItemDescription), ItemActions,
+ * and optionally ItemHeader / ItemFooter spanning the full width. Use
+ * `asChild` with an `<a>` to make the whole row a link; group rows in an
+ * ItemGroup.
+ */
+declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLDivElement>>;
+/** Returns the ItemMedia class string for a variant. */
+declare function itemMediaVariants({ variant, className, }?: {
+    variant?: ItemMediaVariant | null;
+    className?: string;
+}): string;
+interface ItemMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "default" (as-is, e.g. an Avatar), "icon" (icon in a bordered muted tile) or "image" (40px cover thumbnail). */
+    variant?: ItemMediaVariant;
+}
+/** The leading icon, avatar or thumbnail; aligns to the top when the Item has a description. */
+declare const ItemMedia: React.ForwardRefExoticComponent<ItemMediaProps & React.RefAttributes<HTMLDivElement>>;
+type ItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+/** The flexible middle column holding ItemTitle and ItemDescription. */
+declare const ItemContent: React.ForwardRefExoticComponent<ItemContentProps & React.RefAttributes<HTMLDivElement>>;
+type ItemTitleProps = React.HTMLAttributes<HTMLDivElement>;
+/** The row's primary label; can hold an inline Badge or icon. */
+declare const ItemTitle: React.ForwardRefExoticComponent<ItemTitleProps & React.RefAttributes<HTMLDivElement>>;
+type ItemDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+/** Secondary muted text under the title, clamped to two lines; links inside are underlined. */
+declare const ItemDescription: React.ForwardRefExoticComponent<ItemDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+type ItemActionsProps = React.HTMLAttributes<HTMLDivElement>;
+/** Trailing buttons or controls for the row. */
+declare const ItemActions: React.ForwardRefExoticComponent<ItemActionsProps & React.RefAttributes<HTMLDivElement>>;
+type ItemHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+/** A full-width row above the main content (e.g. a cover image or a title with a menu). */
+declare const ItemHeader: React.ForwardRefExoticComponent<ItemHeaderProps & React.RefAttributes<HTMLDivElement>>;
+type ItemFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/** A full-width row below the main content (e.g. metadata or secondary actions). */
+declare const ItemFooter: React.ForwardRefExoticComponent<ItemFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSeparatorProps, type ItemSize, ItemTitle, type ItemTitleProps, type ItemVariant, itemMediaVariants, itemVariants };

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { SeparatorProps } from '@nucleux/separator';
+
+type ItemVariant = "default" | "outline" | "muted";
+type ItemSize = "default" | "sm";
+type ItemMediaVariant = "default" | "icon" | "image";
+type ItemGroupProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * A vertical list of Items, exposed to assistive tech as a list
+ * (`role="list"`). Items rendered inside get `role="listitem"`; an Item
+ * using `asChild` (e.g. a link) keeps its child's role and is wrapped in a
+ * layout-neutral (`display: contents`) listitem.
+ * Put an ItemSeparator between Items for dividing rules.
+ */
+declare const ItemGroup: React.ForwardRefExoticComponent<ItemGroupProps & React.RefAttributes<HTMLDivElement>>;
+type ItemSeparatorProps = SeparatorProps;
+/** A horizontal rule between Items in an ItemGroup. */
+declare const ItemSeparator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+/** Returns the Item class string for a variant and size (shadcn's `itemVariants` cva helper). */
+declare function itemVariants({ variant, size, className, }?: {
+    variant?: ItemVariant | null;
+    size?: ItemSize | null;
+    className?: string;
+}): string;
+interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "default" (transparent), "outline" (bordered) or "muted" (soft fill). */
+    variant?: ItemVariant;
+    /** "default" (roomy) or "sm" (compact). */
+    size?: ItemSize;
+    /** Render the single child (e.g. an `<a>` or router Link) as the row, making it clickable with a hover tint. */
+    asChild?: boolean;
+}
+/**
+ * A flexible row for lists, settings and search results: media on the
+ * left, title and description in the middle, actions on the right.
+ * Compose ItemMedia, ItemContent (ItemTitle, ItemDescription), ItemActions,
+ * and optionally ItemHeader / ItemFooter spanning the full width. Use
+ * `asChild` with an `<a>` to make the whole row a link; group rows in an
+ * ItemGroup.
+ */
+declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLDivElement>>;
+/** Returns the ItemMedia class string for a variant. */
+declare function itemMediaVariants({ variant, className, }?: {
+    variant?: ItemMediaVariant | null;
+    className?: string;
+}): string;
+interface ItemMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** "default" (as-is, e.g. an Avatar), "icon" (icon in a bordered muted tile) or "image" (40px cover thumbnail). */
+    variant?: ItemMediaVariant;
+}
+/** The leading icon, avatar or thumbnail; aligns to the top when the Item has a description. */
+declare const ItemMedia: React.ForwardRefExoticComponent<ItemMediaProps & React.RefAttributes<HTMLDivElement>>;
+type ItemContentProps = React.HTMLAttributes<HTMLDivElement>;
+/** The flexible middle column holding ItemTitle and ItemDescription. */
+declare const ItemContent: React.ForwardRefExoticComponent<ItemContentProps & React.RefAttributes<HTMLDivElement>>;
+type ItemTitleProps = React.HTMLAttributes<HTMLDivElement>;
+/** The row's primary label; can hold an inline Badge or icon. */
+declare const ItemTitle: React.ForwardRefExoticComponent<ItemTitleProps & React.RefAttributes<HTMLDivElement>>;
+type ItemDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+/** Secondary muted text under the title, clamped to two lines; links inside are underlined. */
+declare const ItemDescription: React.ForwardRefExoticComponent<ItemDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+type ItemActionsProps = React.HTMLAttributes<HTMLDivElement>;
+/** Trailing buttons or controls for the row. */
+declare const ItemActions: React.ForwardRefExoticComponent<ItemActionsProps & React.RefAttributes<HTMLDivElement>>;
+type ItemHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+/** A full-width row above the main content (e.g. a cover image or a title with a menu). */
+declare const ItemHeader: React.ForwardRefExoticComponent<ItemHeaderProps & React.RefAttributes<HTMLDivElement>>;
+type ItemFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/** A full-width row below the main content (e.g. metadata or secondary actions). */
+declare const ItemFooter: React.ForwardRefExoticComponent<ItemFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSeparatorProps, type ItemSize, ItemTitle, type ItemTitleProps, type ItemVariant, itemMediaVariants, itemVariants };

package/dist/index.js

@@ -0,0 +1,133 @@
+"use client";
+import * as React from 'react';
+import { cn, Slot } from '@nucleux/utils';
+import { Separator } from '@nucleux/separator';
+import { jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var ItemGroupContext = React.createContext(false);
+var ItemGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ItemGroupContext.Provider, { value: true, children: /* @__PURE__ */ jsx("div", { ref, role: "list", "data-slot": "item-group", className: cn("group/item-group flex flex-col", className), ...props }) }));
+ItemGroup.displayName = "ItemGroup";
+var ItemSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Separator, { ref, "data-slot": "item-separator", orientation: "horizontal", className: cn("my-0", className), ...props }));
+ItemSeparator.displayName = "ItemSeparator";
+var itemBase = "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a&]:transition-colors hover:[a&]:bg-accent/50";
+var itemVariantClasses = {
+  default: "bg-transparent",
+  outline: "border-border",
+  muted: "bg-muted/50"
+};
+var itemSizeClasses = {
+  default: "gap-4 p-4",
+  sm: "gap-2.5 px-4 py-3"
+};
+function itemVariants({
+  variant = "default",
+  size = "default",
+  className
+} = {}) {
+  return cn(itemBase, itemVariantClasses[variant ?? "default"], itemSizeClasses[size ?? "default"], className);
+}
+var Item = React.forwardRef(
+  ({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+    const inGroup = React.useContext(ItemGroupContext);
+    const shared = {
+      "data-slot": "item",
+      "data-variant": variant,
+      "data-size": size,
+      className: itemVariants({ variant, size, className })
+    };
+    if (asChild) {
+      const el = /* @__PURE__ */ jsx(Slot, { ref, ...shared, ...props });
+      return inGroup ? /* @__PURE__ */ jsx("div", { role: "listitem", "data-slot": "item-listitem", className: "contents", children: el }) : el;
+    }
+    return /* @__PURE__ */ jsx("div", { ref, role: inGroup ? "listitem" : void 0, ...shared, ...props });
+  }
+);
+Item.displayName = "Item";
+var itemMediaBase = "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none";
+var itemMediaVariantClasses = {
+  default: "bg-transparent",
+  icon: "size-8 rounded-sm border border-border bg-muted [&_svg:not([class*='size-'])]:size-4",
+  image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover"
+};
+function itemMediaVariants({
+  variant = "default",
+  className
+} = {}) {
+  return cn(itemMediaBase, itemMediaVariantClasses[variant ?? "default"], className);
+}
+var ItemMedia = React.forwardRef(
+  ({ className, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "item-media",
+      "data-variant": variant,
+      className: itemMediaVariants({ variant, className }),
+      ...props
+    }
+  )
+);
+ItemMedia.displayName = "ItemMedia";
+var ItemContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "item-content",
+    className: cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className),
+    ...props
+  }
+));
+ItemContent.displayName = "ItemContent";
+var ItemTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "item-title",
+    className: cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug", className),
+    ...props
+  }
+));
+ItemTitle.displayName = "ItemTitle";
+var ItemDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      "data-slot": "item-description",
+      className: cn(
+        "line-clamp-2 text-balance text-sm font-normal leading-normal text-muted-foreground",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ItemDescription.displayName = "ItemDescription";
+var ItemActions = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "item-actions", className: cn("flex items-center gap-2", className), ...props }));
+ItemActions.displayName = "ItemActions";
+var ItemHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "item-header",
+    className: cn("flex basis-full items-center justify-between gap-2", className),
+    ...props
+  }
+));
+ItemHeader.displayName = "ItemHeader";
+var ItemFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "item-footer",
+    className: cn("flex basis-full items-center justify-between gap-2", className),
+    ...props
+  }
+));
+ItemFooter.displayName = "ItemFooter";
+
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, itemMediaVariants, itemVariants };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import * as React from \"react\";\nimport { cn, Slot } from \"@nucleux/utils\";\nimport { Separator, type SeparatorProps } from \"@nucleux/separator\";\n\nexport type ItemVariant = \"default\" | \"outline\" | \"muted\";\nexport type ItemSize = \"default\" | \"sm\";\nexport type ItemMediaVariant = \"default\" | \"icon\" | \"image\";\n\nconst ItemGroupContext = React.createContext(false);\n\nexport type ItemGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * A vertical list of Items, exposed to assistive tech as a list\n * (`role=\"list\"`). Items rendered inside get `role=\"listitem\"`; an Item\n * using `asChild` (e.g. a link) keeps its child's role and is wrapped in a\n * layout-neutral (`display: contents`) listitem.\n * Put an ItemSeparator between Items for dividing rules.\n */\nexport const ItemGroup = React.forwardRef<HTMLDivElement, ItemGroupProps>(({ className, ...props }, ref) => (\n  <ItemGroupContext.Provider value={true}>\n    <div ref={ref} role=\"list\" data-slot=\"item-group\" className={cn(\"group/item-group flex flex-col\", className)} {...props} />\n  </ItemGroupContext.Provider>\n));\nItemGroup.displayName = \"ItemGroup\";\n\nexport type ItemSeparatorProps = SeparatorProps;\n\n/** A horizontal rule between Items in an ItemGroup. */\nexport const ItemSeparator = React.forwardRef<HTMLDivElement, ItemSeparatorProps>(({ className, ...props }, ref) => (\n  <Separator ref={ref} data-slot=\"item-separator\" orientation=\"horizontal\" className={cn(\"my-0\", className)} {...props} />\n));\nItemSeparator.displayName = \"ItemSeparator\";\n\nconst itemBase =\n  \"group/item flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a&]:transition-colors hover:[a&]:bg-accent/50\";\n\nconst itemVariantClasses: Record<ItemVariant, string> = {\n  default: \"bg-transparent\",\n  outline: \"border-border\",\n  muted: \"bg-muted/50\",\n};\n\nconst itemSizeClasses: Record<ItemSize, string> = {\n  default: \"gap-4 p-4\",\n  sm: \"gap-2.5 px-4 py-3\",\n};\n\n/** Returns the Item class string for a variant and size (shadcn's `itemVariants` cva helper). */\nexport function itemVariants({\n  variant = \"default\",\n  size = \"default\",\n  className,\n}: { variant?: ItemVariant | null; size?: ItemSize | null; className?: string } = {}) {\n  return cn(itemBase, itemVariantClasses[variant ?? \"default\"], itemSizeClasses[size ?? \"default\"], className);\n}\n\nexport interface ItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \"default\" (transparent), \"outline\" (bordered) or \"muted\" (soft fill). */\n  variant?: ItemVariant;\n  /** \"default\" (roomy) or \"sm\" (compact). */\n  size?: ItemSize;\n  /** Render the single child (e.g. an `<a>` or router Link) as the row, making it clickable with a hover tint. */\n  asChild?: boolean;\n}\n\n/**\n * A flexible row for lists, settings and search results: media on the\n * left, title and description in the middle, actions on the right.\n * Compose ItemMedia, ItemContent (ItemTitle, ItemDescription), ItemActions,\n * and optionally ItemHeader / ItemFooter spanning the full width. Use\n * `asChild` with an `<a>` to make the whole row a link; group rows in an\n * ItemGroup.\n */\nexport const Item = React.forwardRef<HTMLDivElement, ItemProps>(\n  ({ className, variant = \"default\", size = \"default\", asChild = false, ...props }, ref) => {\n    const inGroup = React.useContext(ItemGroupContext);\n    const shared = {\n      \"data-slot\": \"item\",\n      \"data-variant\": variant,\n      \"data-size\": size,\n      className: itemVariants({ variant, size, className }),\n    };\n    if (asChild) {\n      const el = <Slot ref={ref} {...shared} {...props} />;\n      // A link or button can't also be a listitem, so inside an ItemGroup it\n      // gets a layout-neutral listitem wrapper to keep the list valid.\n      return inGroup ? (\n        <div role=\"listitem\" data-slot=\"item-listitem\" className=\"contents\">\n          {el}\n        </div>\n      ) : (\n        el\n      );\n    }\n    return <div ref={ref} role={inGroup ? \"listitem\" : undefined} {...shared} {...props} />;\n  },\n);\nItem.displayName = \"Item\";\n\nconst itemMediaBase =\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\";\n\nconst itemMediaVariantClasses: Record<ItemMediaVariant, string> = {\n  default: \"bg-transparent\",\n  icon: \"size-8 rounded-sm border border-border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n  image: \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n};\n\n/** Returns the ItemMedia class string for a variant. */\nexport function itemMediaVariants({\n  variant = \"default\",\n  className,\n}: { variant?: ItemMediaVariant | null; className?: string } = {}) {\n  return cn(itemMediaBase, itemMediaVariantClasses[variant ?? \"default\"], className);\n}\n\nexport interface ItemMediaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** \"default\" (as-is, e.g. an Avatar), \"icon\" (icon in a bordered muted tile) or \"image\" (40px cover thumbnail). */\n  variant?: ItemMediaVariant;\n}\n\n/** The leading icon, avatar or thumbnail; aligns to the top when the Item has a description. */\nexport const ItemMedia = React.forwardRef<HTMLDivElement, ItemMediaProps>(\n  ({ className, variant = \"default\", ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={itemMediaVariants({ variant, className })}\n      {...props}\n    />\n  ),\n);\nItemMedia.displayName = \"ItemMedia\";\n\nexport type ItemContentProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** The flexible middle column holding ItemTitle and ItemDescription. */\nexport const ItemContent = React.forwardRef<HTMLDivElement, ItemContentProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"item-content\"\n    className={cn(\"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\", className)}\n    {...props}\n  />\n));\nItemContent.displayName = \"ItemContent\";\n\nexport type ItemTitleProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** The row's primary label; can hold an inline Badge or icon. */\nexport const ItemTitle = React.forwardRef<HTMLDivElement, ItemTitleProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"item-title\"\n    className={cn(\"flex w-fit items-center gap-2 text-sm font-medium leading-snug\", className)}\n    {...props}\n  />\n));\nItemTitle.displayName = \"ItemTitle\";\n\nexport type ItemDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;\n\n/** Secondary muted text under the title, clamped to two lines; links inside are underlined. */\nexport const ItemDescription = React.forwardRef<HTMLParagraphElement, ItemDescriptionProps>(\n  ({ className, ...props }, ref) => (\n    <p\n      ref={ref}\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-balance text-sm font-normal leading-normal text-muted-foreground\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nItemDescription.displayName = \"ItemDescription\";\n\nexport type ItemActionsProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** Trailing buttons or controls for the row. */\nexport const ItemActions = React.forwardRef<HTMLDivElement, ItemActionsProps>(({ className, ...props }, ref) => (\n  <div ref={ref} data-slot=\"item-actions\" className={cn(\"flex items-center gap-2\", className)} {...props} />\n));\nItemActions.displayName = \"ItemActions\";\n\nexport type ItemHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** A full-width row above the main content (e.g. a cover image or a title with a menu). */\nexport const ItemHeader = React.forwardRef<HTMLDivElement, ItemHeaderProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"item-header\"\n    className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n    {...props}\n  />\n));\nItemHeader.displayName = \"ItemHeader\";\n\nexport type ItemFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\n/** A full-width row below the main content (e.g. metadata or secondary actions). */\nexport const ItemFooter = React.forwardRef<HTMLDivElement, ItemFooterProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"item-footer\"\n    className={cn(\"flex basis-full items-center justify-between gap-2\", className)}\n    {...props}\n  />\n));\nItemFooter.displayName = \"ItemFooter\";\n"]}

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@nucleux/item",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.6.0",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@nucleux/utils": "0.6.0",
+    "@nucleux/separator": "0.6.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "@types/react": "^18.3.18",
+    "react": "^18.3.1",
+    "lucide-react": "^0.469.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/intelligaia-open-labs/nucleux.git",
+    "directory": "packages/item"
+  },
+  "homepage": "https://github.com/intelligaia-open-labs/nucleux#readme",
+  "description": "Flexible list row with media, content and actions — Nucleux agentic UI for React.",
+  "keywords": [
+    "nucleux",
+    "react",
+    "ui",
+    "components",
+    "agentic",
+    "ai",
+    "tailwind",
+    "item"
+  ],
+  "scripts": {
+    "build": "tsup"
+  }
 }