noecosystem-design 0.1.3 → 0.2.1

package/packages/icons/src/iconsax.tsx

@@ -0,0 +1,233 @@
+import type * as React from 'react';
+import {
+  Add as IconsaxAdd,
+  ArchiveBook as IconsaxArchiveBook,
+  ArrowDown as IconsaxArrowDown,
+  ArrowDown2 as IconsaxArrowDown2,
+  ArrowLeft2 as IconsaxArrowLeft2,
+  ArrowRight2 as IconsaxArrowRight2,
+  ArrowUp as IconsaxArrowUp,
+  ArrowUp2 as IconsaxArrowUp2,
+  AttachCircle as IconsaxAttachCircle,
+  BoxSearch as IconsaxBoxSearch,
+  Briefcase as IconsaxBriefcase,
+  Calendar as IconsaxCalendar,
+  Call as IconsaxCall,
+  CallCalling as IconsaxCallCalling,
+  CallRemove as IconsaxCallRemove,
+  ChartSquare as IconsaxChartSquare,
+  CloseCircle as IconsaxCloseCircle,
+  Copy as IconsaxCopy,
+  Cpu as IconsaxCpu,
+  Dislike as IconsaxDislike,
+  DocumentText as IconsaxDocumentText,
+  DocumentUpload as IconsaxDocumentUpload,
+  Edit2 as IconsaxEdit2,
+  HambergerMenu as IconsaxHambergerMenu,
+  Judge as IconsaxJudge,
+  Like1 as IconsaxLike1,
+  Link2 as IconsaxLink2,
+  Lock as IconsaxLock,
+  LogoutCurve as IconsaxLogoutCurve,
+  MagicStar as IconsaxMagicStar,
+  MessageText as IconsaxMessageText,
+  Messages3 as IconsaxMessages3,
+  MoneyRecive as IconsaxMoneyRecive,
+  More as IconsaxMore,
+  Paperclip2 as IconsaxPaperclip2,
+  Profile2User as IconsaxProfile2User,
+  ProfileCircle as IconsaxProfileCircle,
+  ReceiptSearch as IconsaxReceiptSearch,
+  SecurityUser as IconsaxSecurityUser,
+  Setting2 as IconsaxSetting2,
+  Star1 as IconsaxStar1,
+  StopCircle as IconsaxStopCircle,
+  TickCircle as IconsaxTickCircle,
+  TicketDiscount as IconsaxTicketDiscount,
+  Trash as IconsaxTrash,
+  User as IconsaxUser,
+  UserSearch as IconsaxUserSearch,
+  Verify as IconsaxVerify,
+  Wallet3 as IconsaxWallet3,
+  WalletMoney as IconsaxWalletMoney,
+  Warning2 as IconsaxWarning2,
+  type Icon as IconsaxIcon,
+  type IconProps as IconsaxIconProps,
+} from 'iconsax-react';
+
+export type LogicalIconDirection = 'forward' | 'backward';
+
+/**
+ * The only product icon provider. Iconsax Free is MIT licensed; consuming
+ * applications import from @noe/icons, never from the provider directly.
+ */
+export const iconsaxFreeSource = Object.freeze({
+  provider: 'Iconsax Free',
+  package: 'iconsax-react',
+  version: '0.0.8',
+  license: 'MIT',
+  url: 'https://github.com/rendinjast/iconsax-react',
+});
+
+export type NoeIconProps = IconsaxIconProps & {
+  /** Makes a meaningful icon available to assistive technology. */
+  label?: string;
+  /** Applies NOE's scoped, logical RTL mirroring policy. */
+  direction?: LogicalIconDirection;
+};
+
+type NoeSvgProps = Omit<React.SVGProps<SVGSVGElement>, 'ref'>;
+
+function createNoeIcon(Icon: IconsaxIcon, defaultDirection?: LogicalIconDirection) {
+  function NoeIcon({ label, direction = defaultDirection, className, ...props }: NoeIconProps) {
+    const directionalClass = direction ? 'noe-logical-icon' : undefined;
+    const resolvedClassName = [directionalClass, className].filter(Boolean).join(' ') || undefined;
+    const accessibilityProps = label
+      ? { role: 'img' as const, 'aria-label': label }
+      : { 'aria-hidden': true as const, focusable: false };
+
+    return (
+      <Icon
+        {...props}
+        {...accessibilityProps}
+        className={resolvedClassName}
+        data-icon-source="iconsax-free"
+        data-logical-direction={direction}
+      />
+    );
+  }
+
+  return NoeIcon;
+}
+
+/** Semantic navigation icons. Prefer these over physical arrow aliases. */
+export const ForwardIcon = createNoeIcon(IconsaxArrowRight2, 'forward');
+export const BackwardIcon = createNoeIcon(IconsaxArrowRight2, 'backward');
+export const ChevronIcon = ForwardIcon;
+
+/**
+ * Application icon catalog. These compatibility names are provider-free at the
+ * call site; new code should use semantic names such as ForwardIcon/BackwardIcon
+ * whenever the meaning is navigation rather than a physical direction.
+ */
+export const Add = createNoeIcon(IconsaxAdd);
+export const ArchiveBook = createNoeIcon(IconsaxArchiveBook);
+export const ArrowDown = createNoeIcon(IconsaxArrowDown);
+export const ArrowDown2 = createNoeIcon(IconsaxArrowDown2);
+export const ArrowLeft2 = createNoeIcon(IconsaxArrowLeft2);
+export const ArrowRight2 = createNoeIcon(IconsaxArrowRight2);
+export const ArrowUp = createNoeIcon(IconsaxArrowUp);
+export const ArrowUp2 = createNoeIcon(IconsaxArrowUp2);
+export const AttachCircle = createNoeIcon(IconsaxAttachCircle);
+export const BoxSearch = createNoeIcon(IconsaxBoxSearch);
+export const Briefcase = createNoeIcon(IconsaxBriefcase);
+export const Calendar = createNoeIcon(IconsaxCalendar);
+export const Call = createNoeIcon(IconsaxCall);
+export const CallCalling = createNoeIcon(IconsaxCallCalling);
+export const CallRemove = createNoeIcon(IconsaxCallRemove);
+export const ChartSquare = createNoeIcon(IconsaxChartSquare);
+export const CloseCircle = createNoeIcon(IconsaxCloseCircle);
+export const Copy = createNoeIcon(IconsaxCopy);
+export const Cpu = createNoeIcon(IconsaxCpu);
+export const Dislike = createNoeIcon(IconsaxDislike);
+export const DocumentText = createNoeIcon(IconsaxDocumentText);
+export const DocumentUpload = createNoeIcon(IconsaxDocumentUpload);
+export const Edit2 = createNoeIcon(IconsaxEdit2);
+export const HambergerMenu = createNoeIcon(IconsaxHambergerMenu);
+export const Judge = createNoeIcon(IconsaxJudge);
+export const Like1 = createNoeIcon(IconsaxLike1);
+export const Link2 = createNoeIcon(IconsaxLink2);
+export const Lock = createNoeIcon(IconsaxLock);
+export const LogoutCurve = createNoeIcon(IconsaxLogoutCurve);
+export const MagicStar = createNoeIcon(IconsaxMagicStar);
+export const MessageText = createNoeIcon(IconsaxMessageText);
+export const Messages3 = createNoeIcon(IconsaxMessages3);
+export const MoneyRecive = createNoeIcon(IconsaxMoneyRecive);
+export const More = createNoeIcon(IconsaxMore);
+export const Paperclip2 = createNoeIcon(IconsaxPaperclip2);
+export const Profile2User = createNoeIcon(IconsaxProfile2User);
+export const ProfileCircle = createNoeIcon(IconsaxProfileCircle);
+export const ReceiptSearch = createNoeIcon(IconsaxReceiptSearch);
+export const SecurityUser = createNoeIcon(IconsaxSecurityUser);
+export const Setting2 = createNoeIcon(IconsaxSetting2);
+export const Star1 = createNoeIcon(IconsaxStar1);
+export const StopCircle = createNoeIcon(IconsaxStopCircle);
+export const TickCircle = createNoeIcon(IconsaxTickCircle);
+export const TicketDiscount = createNoeIcon(IconsaxTicketDiscount);
+export const Trash = createNoeIcon(IconsaxTrash);
+export const User = createNoeIcon(IconsaxUser);
+export const UserSearch = createNoeIcon(IconsaxUserSearch);
+export const Verify = createNoeIcon(IconsaxVerify);
+export const Wallet3 = createNoeIcon(IconsaxWallet3);
+export const WalletMoney = createNoeIcon(IconsaxWalletMoney);
+export const Warning2 = createNoeIcon(IconsaxWarning2);
+
+export function NoeMark(props: NoeSvgProps) {
+  return (
+    <svg viewBox="0 0 32 32" role="img" aria-label="NOEcosystem" {...props}>
+      <circle cx="16" cy="16" r="12" fill="none" stroke="currentColor" strokeWidth="2" />
+      <circle cx="16" cy="16" r="3" fill="currentColor" />
+      <path d="M4 16h9M19 16h9M16 4v9M16 19v9" stroke="currentColor" strokeWidth="2" />
+    </svg>
+  );
+}
+
+export function SunIcon(props: NoeSvgProps) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" {...props}>
+      <g className="noe-theme-toggle__sun">
+        <circle
+          cx="12"
+          cy="12"
+          r="3.75"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12 2.25v2.1M12 19.65v2.1M2.25 12h2.1M19.65 12h2.1M5.1 5.1l1.48 1.48M17.42 17.42l1.48 1.48M18.9 5.1l-1.48 1.48M6.58 17.42 5.1 18.9"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export function MoonIcon(props: NoeSvgProps) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" {...props}>
+      <path
+        className="noe-theme-toggle__moon"
+        d="M20.2 15.25A8.25 8.25 0 0 1 8.75 3.8a8.26 8.26 0 1 0 11.45 11.45Z"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const iconDirectionPolicy = Object.freeze({
+  mirror: ['forward', 'backward', 'next', 'previous', 'indent', 'outdent', 'panel-open'],
+  neverMirror: [
+    'brand',
+    'play',
+    'pause',
+    'download',
+    'upload',
+    'search',
+    'settings',
+    'check',
+    'close',
+    'chart',
+    'code',
+  ],
+});

package/packages/icons/src/index.tsx

@@ -1,103 +1 @@
-import type * as React from 'react';
-
-export type LogicalIconDirection = 'forward' | 'backward';
-
-export const icons8Source = Object.freeze({
-  provider: 'Icons8',
-  asset: 'chevronRight.svg',
-  url: 'https://maxst.icons8.com/vue-static/icon/svg/chevronRight.svg',
-});
-
-export function NoeMark(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 32 32" role="img" aria-label="NOEcosystem" {...props}>
-      <circle cx="16" cy="16" r="12" fill="none" stroke="currentColor" strokeWidth="2" />
-      <circle cx="16" cy="16" r="3" fill="currentColor" />
-      <path d="M4 16h9M19 16h9M16 4v9M16 19v9" stroke="currentColor" strokeWidth="2" />
-    </svg>
-  );
-}
-
-export function ChevronIcon({
-  direction = 'forward',
-  className,
-  ...props
-}: React.SVGProps<SVGSVGElement> & { direction?: LogicalIconDirection }) {
-  return (
-    <svg
-      aria-hidden="true"
-      className={['noe-logical-icon', className].filter(Boolean).join(' ')}
-      data-icon-source="icons8"
-      data-logical-direction={direction}
-      viewBox="0 0 16 16"
-      {...props}
-    >
-      <path
-        d="M6.71875 3.5L6 4.20312L9.66016 7.97656L6 11.7539L6.71875 12.4492L11.0586 7.97656L6.71875 3.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
-export function SunIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" {...props}>
-      <g className="noe-theme-toggle__sun">
-        <circle
-          cx="12"
-          cy="12"
-          r="3.75"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M12 2.25v2.1M12 19.65v2.1M2.25 12h2.1M19.65 12h2.1M5.1 5.1l1.48 1.48M17.42 17.42l1.48 1.48M18.9 5.1l-1.48 1.48M6.58 17.42 5.1 18.9"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.6"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-    </svg>
-  );
-}
-
-export function MoonIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" {...props}>
-      <path
-        className="noe-theme-toggle__moon"
-        d="M20.2 15.25A8.25 8.25 0 0 1 8.75 3.8a8.26 8.26 0 1 0 11.45 11.45Z"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.6"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-export const iconDirectionPolicy = Object.freeze({
-  mirror: ['forward', 'backward', 'next', 'previous', 'indent', 'outdent', 'panel-open'],
-  neverMirror: [
-    'brand',
-    'play',
-    'pause',
-    'download',
-    'upload',
-    'search',
-    'settings',
-    'check',
-    'close',
-    'chart',
-    'code',
-    'theme-sun',
-    'theme-moon',
-  ],
-});
+export * from './iconsax';

package/packages/registry/catalog-index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-29T07:21:18.551Z",
+  "generatedAt": "2026-08-29T09:30:43.936Z",
   "items": [
     {
       "id": "bidi-text",
@@ -88,7 +88,7 @@
       "package": "@noe/ui",
       "status": "available",
       "maturity": "beta",
-      "description": "Card — Primitives / Layout component. card provides primitives / layout behavior with RTL, i18n and accessibility built-in.",
+      "description": "Flat raised section primitive. It separates content from its page canvas through semantic surface tone, spacing and radius—not decorative borders or shadows. Use outlined only where a boundary conveys selection or data-entry state.",
       "registryItem": "card"
     },
     {

package/packages/registry/component-audit.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://noecosystem.com/schema/component-audit.json",
-  "generatedNote": "Canonical NOE public-component inventory. status=available requires a public export, a Storybook story at storyId, and (where distributable) a registry entry. Do not mark an item available without all three. (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json) (derived from manifest.json)",
+  "generatedNote": "Canonical NOE public-component inventory. status=available requires a public export, a Storybook story at storyId, and (where distributable) a registry entry. Do not mark an item available without all three. (derived from manifest.json)",
   "items": [
     {
       "id": "bidi-text",

package/packages/registry/docs-index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-29T07:21:18.552Z",
+  "generatedAt": "2026-08-29T08:49:53.291Z",
   "items": [
     {
       "id": "bidi-text",

package/packages/registry/manifest.json

@@ -1,6 +1,6 @@
 {
   "manifestVersion": "1.0.0",
-  "generatedAt": "2026-08-29T07:21:18.542Z",
+  "generatedAt": "2026-08-29T09:30:43.923Z",
   "generatedNote": "Canonical NOE manifest — single source of truth for catalog, audit, registry, stories, docs and agent search. Generated by pnpm gen:manifest; do not edit by hand for automated fields.",
   "items": [
     {
@@ -428,12 +428,25 @@
       "status": "available",
       "maturity": "beta",
       "category": "Primitives / Layout",
-      "description": "Card — Primitives / Layout component. card provides primitives / layout behavior with RTL, i18n and accessibility built-in.",
-      "capabilityAliases": ["card", "card"],
-      "searchTerms": ["card", "card", "layout"],
-      "useWhen": ["using card in Primitives / Layout"],
-      "doNotUseWhen": ["when card semantics do not match"],
-      "alternatives": [],
+      "description": "Flat raised section primitive. It separates content from its page canvas through semantic surface tone, spacing and radius—not decorative borders or shadows. Use outlined only where a boundary conveys selection or data-entry state.",
+      "capabilityAliases": ["flat card", "raised surface", "borderless section", "outlined card"],
+      "searchTerms": [
+        "card",
+        "raised surface",
+        "flat section",
+        "borderless panel",
+        "outlined boundary"
+      ],
+      "useWhen": [
+        "grouping a top-level application region with a semantic raised surface",
+        "separating sections by color tone rather than elevation or decorative chrome",
+        "using appearance=\"outlined\" only for selection, data-entry or comparison boundaries"
+      ],
+      "doNotUseWhen": [
+        "adding a nested card solely to create visual depth",
+        "using an outlined boundary when spacing and surface tone already express grouping"
+      ],
+      "alternatives": ["SectionHeader", "Field"],
       "dependencies": [],
       "registryDependencies": [],
       "peerDependencies": ["react"],
@@ -441,20 +454,20 @@
         "label": "string | ReactNode",
         "children": "ReactNode"
       },
-      "variants": ["default"],
+      "variants": ["raised", "outlined"],
       "sizes": [],
       "slots": [],
-      "states": ["default", "hover", "focus-visible", "disabled"],
-      "tokenContracts": ["color.foreground", "color.border"],
+      "states": ["default"],
+      "tokenContracts": ["color.background", "color.surface", "color.surfaceRaised", "radius.lg"],
       "accessibility": {
-        "keyboard": ["Tab to focus", "Enter/Space activate"],
+        "keyboard": [],
         "announcements": [],
-        "focusBehavior": ["visible ring 2px"]
+        "focusBehavior": ["not focusable unless its content contains an interactive control"]
       },
       "internationalization": {
         "messageKeys": [],
         "rtl": "required",
-        "bidiNotes": ["logical properties", "no global mirror"]
+        "bidiNotes": ["logical spacing; no directional layout override"]
       },
       "examples": [
         {
@@ -463,7 +476,7 @@
           "files": ["apps/storybook/stories/catalog/card.stories.tsx"]
         }
       ],
-      "relatedPatterns": [],
+      "relatedPatterns": ["app-frame", "dashboard-shell", "section-header"],
       "untitledMapping": null,
       "storyId": "catalog-primitives-card--default",
       "registryItem": "card"

package/packages/registry/r/calendar.json

@@ -5,13 +5,24 @@
   "title": "Calendar",
   "description": "Calendar — Base / Pickers component. calendar provides base / pickers behavior with RTL, i18n and accessibility built-in.",
   "registryDependencies": [],
-  "dependencies": ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+  "dependencies": [
+    "@base-ui/react",
+    "class-variance-authority",
+    "clsx",
+    "iconsax-react",
+    "tailwind-merge"
+  ],
   "files": [
     {
       "path": "packages/icons/src/index.tsx",
       "type": "registry:component",
       "target": "packages/icons/src/index.tsx"
     },
+    {
+      "path": "packages/icons/src/iconsax.tsx",
+      "type": "registry:component",
+      "target": "packages/icons/src/iconsax.tsx"
+    },
     {
       "path": "packages/ui/src/button.tsx",
       "type": "registry:component",

package/packages/registry/r/card.json

@@ -3,7 +3,7 @@
   "name": "card",
   "type": "registry:ui",
   "title": "Card",
-  "description": "Card — Primitives / Layout component. card provides primitives / layout behavior with RTL, i18n and accessibility built-in.",
+  "description": "Flat raised section primitive. It separates content through semantic surface tone, spacing and radius—not decorative borders or shadows. Use an outlined boundary only for selection or data-entry state.",
   "files": [
     {
       "path": "packages/ui/src/card.tsx",
@@ -37,8 +37,14 @@
     "announcements": [],
     "focusBehavior": ["visible ring 2px"]
   },
-  "tokenContracts": ["color.foreground", "color.border"],
-  "capabilityAliases": ["card", "card"],
-  "useWhen": ["using card in Primitives / Layout"],
-  "doNotUseWhen": ["when card semantics do not match"]
+  "tokenContracts": ["color.background", "color.surface", "color.surfaceRaised", "radius.lg"],
+  "capabilityAliases": ["flat card", "raised surface", "borderless section", "outlined card"],
+  "useWhen": [
+    "grouping a top-level application region with a semantic raised surface",
+    "using an outlined boundary only for selection, data-entry or comparison state"
+  ],
+  "doNotUseWhen": [
+    "adding a nested card solely to create visual depth",
+    "using a decorative stroke when spacing and surface tone already express grouping"
+  ]
 }

package/packages/registry/r/date-picker.json

@@ -5,13 +5,24 @@
   "title": "Date Picker",
   "description": "Date Picker — Base / Pickers component. date-picker provides base / pickers behavior with RTL, i18n and accessibility built-in.",
   "registryDependencies": [],
-  "dependencies": ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+  "dependencies": [
+    "@base-ui/react",
+    "class-variance-authority",
+    "clsx",
+    "iconsax-react",
+    "tailwind-merge"
+  ],
   "files": [
     {
       "path": "packages/icons/src/index.tsx",
       "type": "registry:component",
       "target": "packages/icons/src/index.tsx"
     },
+    {
+      "path": "packages/icons/src/iconsax.tsx",
+      "type": "registry:component",
+      "target": "packages/icons/src/iconsax.tsx"
+    },
     {
       "path": "packages/ui/src/button.tsx",
       "type": "registry:component",

package/packages/registry/r/icon-system.json

@@ -9,6 +9,11 @@
       "path": "packages/icons/src/index.tsx",
       "type": "registry:component",
       "target": "packages/icons/src/index.tsx"
+    },
+    {
+      "path": "packages/icons/src/iconsax.tsx",
+      "type": "registry:component",
+      "target": "packages/icons/src/iconsax.tsx"
     }
   ],
   "registryDependencies": [],
@@ -20,7 +25,7 @@
   "install": "pnpm dlx shadcn@latest add @noe/icon-system",
   "import": "import { ChevronIcon } from '@noe/icons'",
   "requiredProviders": [],
-  "dependencies": [],
+  "dependencies": ["iconsax-react"],
   "peerDependencies": ["react"],
   "rtl": "required",
   "i18n": {

package/packages/registry/r/inline-cta.json

@@ -10,6 +10,11 @@
       "type": "registry:component",
       "target": "packages/icons/src/index.tsx"
     },
+    {
+      "path": "packages/icons/src/iconsax.tsx",
+      "type": "registry:component",
+      "target": "packages/icons/src/iconsax.tsx"
+    },
     {
       "path": "packages/ui/src/inline-cta.tsx",
       "type": "registry:component",
@@ -22,7 +27,7 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["clsx", "tailwind-merge"],
+  "dependencies": ["clsx", "iconsax-react", "tailwind-merge"],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/ui",

package/packages/registry/r/pagination.json

@@ -15,6 +15,11 @@
       "type": "registry:component",
       "target": "packages/icons/src/index.tsx"
     },
+    {
+      "path": "packages/icons/src/iconsax.tsx",
+      "type": "registry:component",
+      "target": "packages/icons/src/iconsax.tsx"
+    },
     {
       "path": "packages/ui/src/button.tsx",
       "type": "registry:component",
@@ -32,7 +37,13 @@
     }
   ],
   "registryDependencies": [],
-  "dependencies": ["@base-ui/react", "class-variance-authority", "clsx", "tailwind-merge"],
+  "dependencies": [
+    "@base-ui/react",
+    "class-variance-authority",
+    "clsx",
+    "iconsax-react",
+    "tailwind-merge"
+  ],
   "status": "available",
   "maturity": "beta",
   "package": "@noe/data-ui",

package/packages/registry/registry.json

@@ -1040,8 +1040,14 @@
       "dependencies": ["clsx", "tailwind-merge"],
       "peerDependencies": ["react"],
       "manifestId": "card",
-      "capabilityAliases": ["card", "card"],
-      "searchTerms": ["card", "card", "layout"]
+      "capabilityAliases": ["flat card", "raised surface", "borderless section", "outlined card"],
+      "searchTerms": [
+        "card",
+        "raised surface",
+        "flat section",
+        "borderless panel",
+        "outlined boundary"
+      ]
     },
     {
       "name": "alert",

package/packages/registry/search-index.json

@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2026-08-29T07:21:18.549Z",
+  "generatedAt": "2026-08-29T09:30:43.933Z",
   "items": [
     {
       "id": "bidi-text",
@@ -160,15 +160,28 @@
       "id": "card",
       "package": "@noe/ui",
       "title": "Card",
-      "description": "Card — Primitives / Layout component. card provides primitives / layout behavior with RTL, i18n and accessibility built-in.",
+      "description": "Flat raised section primitive. It separates content from its page canvas through semantic surface tone, spacing and radius—not decorative borders or shadows. Use outlined only where a boundary conveys selection or data-entry state.",
       "category": "Primitives / Layout",
       "status": "available",
-      "capabilityAliases": ["card", "card"],
-      "searchTerms": ["card", "card", "layout"],
-      "useWhen": ["using card in Primitives / Layout"],
-      "doNotUseWhen": ["when card semantics do not match"],
-      "alternatives": [],
-      "relatedPatterns": [],
+      "capabilityAliases": ["flat card", "raised surface", "borderless section", "outlined card"],
+      "searchTerms": [
+        "card",
+        "raised surface",
+        "flat section",
+        "borderless panel",
+        "outlined boundary"
+      ],
+      "useWhen": [
+        "grouping a top-level application region with a semantic raised surface",
+        "separating sections by color tone rather than elevation or decorative chrome",
+        "using appearance=\"outlined\" only for selection, data-entry or comparison boundaries"
+      ],
+      "doNotUseWhen": [
+        "adding a nested card solely to create visual depth",
+        "using an outlined boundary when spacing and surface tone already express grouping"
+      ],
+      "alternatives": ["SectionHeader", "Field"],
+      "relatedPatterns": ["app-frame", "dashboard-shell", "section-header"],
       "exportName": "Card",
       "registryItem": "card",
       "maturity": "beta"