@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.0b5b49f

package/dist/Link/useLinkComponent.js

@@ -0,0 +1,82 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useLinkComponent.ts
+ * @input React use, useMemo, createElement, forwardRef, LinkContext, LinkComponentType
+ * @output Exports useLinkComponent hook
+ * @position Hook for resolving the link component in Astryx components
+ *
+ * Resolution order: per-component `as` prop > LinkProvider context > native `<a>`.
+ *
+ * When the resolved component is a custom component (not native `<a>`),
+ * wraps it to pass `to={href}` alongside `href`. This enables compatibility
+ * with routers that use `to` (React Router, TanStack Router)
+ * without requiring an adapter component.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Link/index.ts
+ * - /packages/core/src/Link/Link.doc.mjs
+ */
+import { use, useMemo, createElement } from 'react';
+import { LinkContext } from "./LinkContext.js";
+/**
+ * Creates a wrapper component that passes both `href` and `to` props
+ * to the underlying link component. This enables routers that use `to`
+ * (React Router, TanStack Router) to work without an adapter.
+ *
+ * The wrapper is transparent: it forwards refs and all other props unchanged.
+ * Native `<a>` elements ignore the unknown `to` prop harmlessly.
+ */
+function createLinkWithTo(Component) {
+  function LinkWithTo({
+    href,
+    ref,
+    ...rest
+  }) {
+    return /*#__PURE__*/createElement(Component, {
+      ref,
+      href,
+      to: href,
+      ...rest
+    });
+  }
+  LinkWithTo.displayName = `LinkWithTo(${typeof Component === 'string' ? Component : Component.displayName || Component.name || 'Component'})`;
+  return LinkWithTo;
+}
+
+/**
+ * Resolves the link component to use.
+ *
+ * Priority: `as` prop > `LinkProvider` context > native `<a>`.
+ *
+ * When the resolved component is a custom component (not the native `<a>`),
+ * it is wrapped to receive both `href` and `to` props set to the same value.
+ * This allows `to`-based routers (React Router, TanStack Router) to work
+ * out of the box without a manual adapter.
+ *
+ * @param as - Per-component override. If provided, takes highest priority.
+ * @returns The resolved link component (with `to` injection for custom components).
+ *
+ * @example
+ * ```
+ * function MyComponent({ as }: { as?: LinkComponentType }) {
+ *   const LinkComponent = useLinkComponent(as);
+ *   return <LinkComponent href="/foo">Click me</LinkComponent>;
+ * }
+ * ```
+ */
+export function useLinkComponent(as) {
+  const ctx = use(LinkContext);
+  const resolved = as ?? ctx?.component ?? 'a';
+
+  // Memoize the wrapper to maintain referential stability.
+  // The wrapper is only created for custom components (not native <a>).
+  return useMemo(() => {
+    if (resolved === 'a') {
+      return 'a';
+    }
+    return createLinkWithTo(resolved);
+  }, [resolved]);
+}

package/dist/Link/useLinkify.d.ts

@@ -0,0 +1,65 @@
+/**
+ * @file useLinkify.tsx
+ * @input Uses React, Link, useLinkComponent
+ * @output Exports useLinkify hook for auto-detecting links in plain text
+ * @position Link utility hook; turns plain text into a mix of strings and Link elements
+ *
+ * Detects URLs, email addresses, and custom patterns (e.g. T1234, D5678)
+ * in plain text and renders them as Link elements that respect
+ * LinkProvider for client-side routing.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Link/index.ts (exports)
+ * - /packages/core/src/Link/useLinkify.test.tsx (tests)
+ */
+import { type ReactNode } from 'react';
+/**
+ * A custom pattern for detecting linkable text.
+ */
+export interface LinkifyPattern {
+    /**
+     * Regex pattern to match. Must use the global flag (g).
+     * Capture groups can be used in `href` and `label` functions.
+     */
+    pattern: RegExp;
+    /**
+     * Build the link URL from a regex match.
+     */
+    href: (match: RegExpMatchArray) => string;
+    /**
+     * Optional: custom display text for the link.
+     * Defaults to the full matched string (match[0]).
+     */
+    label?: (match: RegExpMatchArray) => string;
+    /**
+     * Whether the link should open in a new tab.
+     * @default false
+     */
+    isExternal?: boolean;
+}
+export interface UseLinkifyOptions {
+    /**
+     * Custom patterns to detect, in addition to (or replacing) built-in patterns.
+     * Patterns are matched in order; first match wins for overlapping ranges.
+     */
+    patterns?: LinkifyPattern[];
+    /**
+     * Whether to include built-in URL and email detection.
+     * @default true
+     */
+    hasBuiltins?: boolean;
+}
+/**
+ * Detects URLs, emails, and custom patterns in plain text and returns
+ * a ReactNode array with Link elements for each match.
+ *
+ * Links render via Link, respecting LinkProvider for client-side routing.
+ *
+ * @example
+ * ```
+ * const nodes = useLinkify('Visit https://example.com or email hi@example.com');
+ * return <p>{nodes}</p>;
+ * ```
+ */
+export declare function useLinkify(text: string, options?: UseLinkifyOptions): ReactNode[];
+//# sourceMappingURL=useLinkify.d.ts.map

package/dist/Link/useLinkify.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLinkify.d.ts","sourceRoot":"","sources":["../../src/Link/useLinkify.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAU,MAAM,OAAO,CAAC;AAO9C;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,IAAI,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,MAAM,CAAC;IAE1C;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,MAAM,CAAC;IAE5C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAE5B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAgFD;;;;;;;;;;;GAWG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,iBAAiB,GAC1B,SAAS,EAAE,CAyDb"}

package/dist/Link/useLinkify.js

@@ -0,0 +1,155 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useLinkify.tsx
+ * @input Uses React, Link, useLinkComponent
+ * @output Exports useLinkify hook for auto-detecting links in plain text
+ * @position Link utility hook; turns plain text into a mix of strings and Link elements
+ *
+ * Detects URLs, email addresses, and custom patterns (e.g. T1234, D5678)
+ * in plain text and renders them as Link elements that respect
+ * LinkProvider for client-side routing.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Link/index.ts (exports)
+ * - /packages/core/src/Link/useLinkify.test.tsx (tests)
+ */
+import { useMemo } from 'react';
+import { Link } from "./Link.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * A custom pattern for detecting linkable text.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+// =============================================================================
+// Built-in patterns
+// =============================================================================
+
+// URL pattern: matches http(s) URLs
+const URL_PATTERN = {
+  pattern: /https?:\/\/[^\s<>'")\]},]+/g,
+  href: match => match[0],
+  isExternal: true
+};
+
+// Email pattern: matches email addresses
+const EMAIL_PATTERN = {
+  pattern: /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g,
+  href: match => `mailto:${match[0]}`
+};
+const BUILTIN_PATTERNS = [URL_PATTERN, EMAIL_PATTERN];
+
+// =============================================================================
+// Match processing
+// =============================================================================
+
+/**
+ * Find all non-overlapping matches across all patterns.
+ * Custom patterns are checked first (higher priority), then builtins.
+ * First match wins for overlapping ranges.
+ */
+function findMatches(text, patterns) {
+  const allMatches = [];
+  for (const p of patterns) {
+    // Clone the regex to reset lastIndex
+    const re = new RegExp(p.pattern.source, p.pattern.flags);
+    let match;
+    while ((match = re.exec(text)) !== null) {
+      allMatches.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        href: p.href(match),
+        label: p.label ? p.label(match) : match[0],
+        isExternal: p.isExternal ?? false
+      });
+    }
+  }
+
+  // Sort by start position, then by earlier pattern priority (stable sort)
+  allMatches.sort((a, b) => a.start - b.start);
+
+  // Remove overlapping matches (first wins)
+  const result = [];
+  let lastEnd = 0;
+  for (const m of allMatches) {
+    if (m.start >= lastEnd) {
+      result.push(m);
+      lastEnd = m.end;
+    }
+  }
+  return result;
+}
+
+// =============================================================================
+// Hook
+// =============================================================================
+
+/**
+ * Detects URLs, emails, and custom patterns in plain text and returns
+ * a ReactNode array with Link elements for each match.
+ *
+ * Links render via Link, respecting LinkProvider for client-side routing.
+ *
+ * @example
+ * ```
+ * const nodes = useLinkify('Visit https://example.com or email hi@example.com');
+ * return <p>{nodes}</p>;
+ * ```
+ */
+export function useLinkify(text, options) {
+  const {
+    patterns: customPatterns,
+    hasBuiltins = true
+  } = options ?? {};
+
+  // Build the pattern list: custom first (higher priority), then builtins
+  const allPatterns = useMemo(() => {
+    const result = [];
+    if (customPatterns) {
+      result.push(...customPatterns);
+    }
+    if (hasBuiltins) {
+      result.push(...BUILTIN_PATTERNS);
+    }
+    return result;
+  }, [customPatterns, hasBuiltins]);
+  return useMemo(() => {
+    if (allPatterns.length === 0 || text.length === 0) {
+      return [text];
+    }
+    const matches = findMatches(text, allPatterns);
+    if (matches.length === 0) {
+      return [text];
+    }
+    const nodes = [];
+    let lastIndex = 0;
+    for (let i = 0; i < matches.length; i++) {
+      const m = matches[i];
+
+      // Text before this match
+      if (m.start > lastIndex) {
+        nodes.push(text.slice(lastIndex, m.start));
+      }
+
+      // The link
+      nodes.push(/*#__PURE__*/_jsx(Link, {
+        href: m.href,
+        isExternalLink: m.isExternal,
+        children: m.label
+      }, `linkify-${i}`));
+      lastIndex = m.end;
+    }
+
+    // Remaining text after the last match
+    if (lastIndex < text.length) {
+      nodes.push(text.slice(lastIndex));
+    }
+    return nodes;
+  }, [text, allPatterns]);
+}

package/dist/List/List.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @file List.tsx
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
+ * @output Exports List component, ListProps, ListDensity, ListStyle types
+ * @position Core implementation; consumed by index.ts, tested by List.test.tsx
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/List/List.doc.mjs
+ * - /packages/core/src/List/List.test.tsx
+ * - /packages/core/src/List/index.ts
+ * - /apps/storybook/stories/List.stories.tsx
+ * - /packages/cli/templates/blocks/components/List/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import { type ListDensity, type ListMarkerStyle } from './ListContext';
+export { type ListDensity, type ListMarkerStyle as ListStyle, } from './ListContext';
+export interface ListProps extends BaseProps<HTMLUListElement | HTMLOListElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLUListElement | HTMLOListElement>;
+    /**
+     * List items. Should be ListItem components.
+     */
+    children: ReactNode;
+    /**
+     * Spacing density for list items.
+     * - 'compact': Tighter spacing for dense UIs
+     * - 'balanced': Standard spacing
+     * - 'spacious': Extra spacing for readability
+     * @default 'balanced'
+     */
+    density?: ListDensity;
+    /**
+     * Whether to show dividers between list items.
+     * @default false
+     */
+    hasDividers?: boolean;
+    /**
+     * Header content rendered above the list.
+     * Semantically associated via aria-labelledby.
+     */
+    header?: ReactNode;
+    /**
+     * List marker style.
+     * When 'decimal', renders an `<ol>`. Otherwise renders a `<ul>`.
+     * @default 'none'
+     */
+    listStyle?: ListMarkerStyle;
+    /**
+     * Starting number for ordered lists (listStyle='decimal').
+     * Sets the CSS counter to begin at this value.
+     * @default 1
+     */
+    start?: number;
+    /**
+     * Test ID for testing frameworks.
+     */
+    'data-testid'?: string;
+}
+/**
+ * A vertical list component for rendering collections of items.
+ *
+ * Renders semantic `<ul>` or `<ol>` elements with configurable density,
+ * dividers, marker styles, and an optional header.
+ *
+ * @example
+ * ```
+ * <List>
+ *   <ListItem label="Notifications" description="Manage your alerts" />
+ *   <ListItem label="Privacy" description="Control your data" />
+ * </List>
+ * <List listStyle="decimal" density="compact">
+ *   <ListItem label="First step" />
+ *   <ListItem label="Second step" />
+ * </List>
+ * ```
+ */
+export declare function List({ children, density, hasDividers, header, listStyle, start, xstyle, className, style, 'data-testid': testId, ref, }: ListProps): import("react").JSX.Element;
+export declare namespace List {
+    var displayName: string;
+}
+//# sourceMappingURL=List.d.ts.map

package/dist/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/List/List.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,eAAe,CAAC;AAIvB,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,eAAe,IAAI,SAAS,GAClC,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,SAAU,SAAQ,SAAS,CAC1C,gBAAgB,GAAG,gBAAgB,CACpC;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,CAAC,CAAC;IACrD;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwCD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,OAAoB,EACpB,WAAmB,EACnB,MAAM,EACN,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,GACJ,EAAE,SAAS,+BAiDX;yBA7De,IAAI"}

package/dist/List/List.js

@@ -0,0 +1,140 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file List.tsx
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens, ListContext
+ * @output Exports List component, ListProps, ListDensity, ListStyle types
+ * @position Core implementation; consumed by index.ts, tested by List.test.tsx
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/List/List.doc.mjs
+ * - /packages/core/src/List/List.test.tsx
+ * - /packages/core/src/List/index.ts
+ * - /apps/storybook/stories/List.stories.tsx
+ * - /packages/cli/templates/blocks/components/List/ (showcase blocks)
+ */
+import { useId, useMemo } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { spacingVars } from "../theme/tokens.stylex.js";
+import { ListContext } from "./ListContext.js";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = {
+  list: {
+    kogj98: "x1ghz6dp",
+    kZCmMZ: "x1c1uobl",
+    kH6xsr: "x3ct3a4",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1lsbc85",
+    $$css: true
+  },
+  withDividers: {
+    kOIVth: "xxhr3t",
+    $$css: true
+  },
+  withCounter: {
+    kt6KFK: "xif0320",
+    $$css: true
+  }
+};
+const _temp = {
+  kt6KFK: "x1khind5",
+  "$$css": true
+};
+const dynamicStyles = {
+  counterStart: value => [_temp, {
+    "--x-counterReset": `astryx-list ${value}` != null ? `astryx-list ${value}` : undefined
+  }]
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * A vertical list component for rendering collections of items.
+ *
+ * Renders semantic `<ul>` or `<ol>` elements with configurable density,
+ * dividers, marker styles, and an optional header.
+ *
+ * @example
+ * ```
+ * <List>
+ *   <ListItem label="Notifications" description="Manage your alerts" />
+ *   <ListItem label="Privacy" description="Control your data" />
+ * </List>
+ * <List listStyle="decimal" density="compact">
+ *   <ListItem label="First step" />
+ *   <ListItem label="Second step" />
+ * </List>
+ * ```
+ */
+export function List({
+  children,
+  density = 'balanced',
+  hasDividers = false,
+  header,
+  listStyle = 'none',
+  start,
+  xstyle,
+  className,
+  style,
+  'data-testid': testId,
+  ref
+}) {
+  const headerId = useId();
+  const isOrdered = listStyle === 'decimal';
+  const Tag = isOrdered ? 'ol' : 'ul';
+  const contextValue = useMemo(() => ({
+    density,
+    hasDividers,
+    listStyle
+  }), [density, hasDividers, listStyle]);
+  const listElement = /*#__PURE__*/_jsx(Tag, {
+    ref: ref,
+    "data-testid": testId,
+    "aria-labelledby": header != null ? headerId : undefined,
+    ...(isOrdered && start != null && start !== 1 ? {
+      start
+    } : {}),
+    ...(listStyle === 'none' && !isOrdered ? {
+      role: 'list'
+    } : {}),
+    ...mergeProps(themeProps('list', {
+      density,
+      listStyle
+    }), stylex.props(styles.list, hasDividers && styles.withDividers, listStyle !== 'none' && (start != null && start !== 1 ? dynamicStyles.counterStart(start - 1) : styles.withCounter), xstyle), className, style),
+    children: children
+  });
+  if (header == null) {
+    return /*#__PURE__*/_jsx(ListContext, {
+      value: contextValue,
+      children: listElement
+    });
+  }
+  return /*#__PURE__*/_jsx(ListContext, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x78zum5 xdt5ytf"
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        id: headerId,
+        ...{
+          className: "x1p37lm5"
+        },
+        children: header
+      }), listElement]
+    })
+  });
+}
+List.displayName = 'List';

package/dist/List/ListContext.d.ts

@@ -0,0 +1,9 @@
+export type ListDensity = 'compact' | 'balanced' | 'spacious';
+export type ListMarkerStyle = 'none' | 'disc' | 'decimal' | 'circle';
+export interface ListContextValue {
+    density: ListDensity;
+    hasDividers: boolean;
+    listStyle: ListMarkerStyle;
+}
+export declare const ListContext: import("react").Context<ListContextValue | null>;
+//# sourceMappingURL=ListContext.d.ts.map

package/dist/List/ListContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListContext.d.ts","sourceRoot":"","sources":["../../src/List/ListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;AAC9D,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,eAAe,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,kDAA+C,CAAC"}

package/dist/List/ListContext.js

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file ListContext.tsx
+ * @input Uses React createContext
+ * @output Exports ListContext for sharing density between List and ListItem
+ * @position Internal context; consumed by List.tsx and ListItem.tsx
+ */
+import { createContext } from 'react';
+export const ListContext = /*#__PURE__*/createContext(null);
+ListContext.displayName = 'ListContext';

package/dist/List/ListItem.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @file ListItem.tsx
+ * @input Uses React, ReactNode, StyleXStyles, theme tokens
+ * @output Exports ListItem component, ListItemProps type
+ * @position Core implementation; consumed by List, index.ts, tested by List.test.tsx
+ *
+ * Composes Item for the shared start content + label + description + end content layout
+ * and the invisible button/anchor interactive pattern.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/List/List.doc.mjs
+ * - /packages/core/src/List/List.test.tsx
+ * - /packages/core/src/List/index.ts
+ * - /apps/storybook/stories/List.stories.tsx
+ * - /packages/cli/templates/blocks/components/List/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+export interface ListItemProps extends BaseProps<HTMLLIElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLLIElement>;
+    /**
+     * Primary text label for the item.
+     *
+     * Accepts a plain string (single-line truncation applied automatically)
+     * or a ReactNode for rich content (no truncation constraints —
+     * child components control their own text behavior).
+     */
+    label: ReactNode;
+    /**
+     * Secondary description below the label.
+     *
+     * Accepts a plain string (single-line truncation applied automatically)
+     * or a ReactNode for rich/multi-line content (no wrapping constraints
+     * applied — child components control their own text behavior).
+     */
+    description?: ReactNode;
+    /**
+     * Content rendered before the item (icon, avatar, checkbox).
+     * Uses start/end naming for RTL support.
+     */
+    startContent?: ReactNode;
+    /**
+     * Content rendered after the item (badge, action button, chevron).
+     */
+    endContent?: ReactNode;
+    /**
+     * Click handler for interactive items.
+     * Automatically enables hover/press styles when provided.
+     */
+    onClick?: (e: React.MouseEvent) => void;
+    /**
+     * URL for link items. Renders an invisible anchor element.
+     * Automatically enables hover/press styles when provided.
+     */
+    href?: string;
+    /**
+     * Link target (e.g., '_blank'). Only used with href.
+     */
+    target?: string;
+    /**
+     * Link relationship. Automatically includes noopener noreferrer when
+     * target is "_blank".
+     */
+    rel?: string;
+    /**
+     * Whether the item is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the item is currently selected.
+     * @default false
+     */
+    isSelected?: boolean;
+}
+/**
+ * A list item component for use within List.
+ *
+ * Renders structured content with label, description, start/end content areas.
+ * When `onClick` is provided, uses the invisible button pattern for accessibility.
+ * When `href` is provided, uses an invisible anchor pattern.
+ *
+ * @example
+ * ```
+ * <ListItem label="Settings" description="Manage your preferences" />
+ * <ListItem label="Profile" onClick={() => navigate('/profile')} />
+ * <ListItem label="Docs" href="/docs" target="_blank" rel="noreferrer" />
+ * ```
+ */
+export declare function ListItem({ label, description, startContent, endContent, onClick, href, target, rel, isDisabled, isSelected, xstyle, className, style, ref, ...restProps }: ListItemProps): import("react").JSX.Element;
+export declare namespace ListItem {
+    var displayName: string;
+}
+//# sourceMappingURL=ListItem.d.ts.map

package/dist/List/ListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/List/ListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAM,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAQ1C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAU5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA4ED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,UAAkB,EAClB,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,SAAS,EACb,EAAE,aAAa,+BA8Cf;yBA9De,QAAQ"}