elij-ui-library 0.1.0 → 0.2.1

package/README.md

@@ -2,6 +2,9 @@
 
 A reusable React + TypeScript component library with Storybook documentation.
 
+The package is the runtime layer of Elij UI. Component metadata is also published
+in registry/components.json for future CLI and MCP tooling.
+
 ## Development
 
 ```bash
@@ -32,6 +35,24 @@ npm run build-storybook
 
 Every component includes TypeScript types and Storybook examples. Form controls expose native HTML attributes, and interactive components include keyboard and accessibility semantics.
 
+The Storybook Registry/Catalog story provides a searchable starting point for
+the public component inventory. Every public component has a dedicated Storybook
+story with controls or an interaction example where appropriate.
+
+## Versioning and future tooling
+
+Use the changelog for each published version and keep the registry version in
+sync with the package version. The next packages can be added separately:
+
+~~~text
+elij-ui-library       React runtime, styles, and registry
+elij-ui-cli           init, list, add, and doctor commands
+elij-ui-mcp-server    read-only component discovery for AI hosts
+~~~
+
+The CLI and MCP server should consume the registry rather than parsing source
+files or Storybook internals.
+
 ## Test
 
 ```bash
@@ -59,6 +80,38 @@ export function Example() {
 }
 ```
 
+## Install from npm
+
+~~~bash
+npm install elij-ui-library
+~~~
+
+Import the stylesheet once, then use the typed component exports:
+
+~~~tsx
+import 'elij-ui-library/styles.css';
+import { Button, SectionHeading } from 'elij-ui-library';
+
+export function Example() {
+  return (
+    <>
+      <SectionHeading eyebrow="Example" title="A typed component" />
+      <Button>Continue</Button>
+    </>
+  );
+}
+~~~
+
+The published registry can be consumed by tooling:
+
+~~~ts
+import registry from 'elij-ui-library/registry';
+~~~
+
+registry/components.json is intended for component search, documentation,
+CLI scaffolding, and MCP resources. It is not required at runtime by the
+React components.
+
 ## Locale and color themes
 
 Wrap your application, or one section of it, with `UIProvider`. English and light theme are used by default.

package/dist/index.d.ts

@@ -1,81 +1,2 @@
-export { Button } from './components/Button';
-export type { ButtonProps, ButtonSize, ButtonVariant } from './components/Button';
-export { UIProvider, useUI } from './provider';
-export type { BuiltInLocale, MessageKey, Messages, ThemeName, UIContextValue, UIProviderProps, } from './provider';
-export { Alert } from './components/Alert';
-export type { AlertProps, AlertVariant } from './components/Alert';
-export { Badge } from './components/Badge';
-export type { BadgeProps, BadgeVariant } from './components/Badge';
-export { Card, CardBody, CardFooter, CardHeader } from './components/Card';
-export type { CardProps } from './components/Card';
-export { Checkbox } from './components/Checkbox';
-export type { CheckboxProps } from './components/Checkbox';
-export { Dialog } from './components/Dialog';
-export type { DialogProps } from './components/Dialog';
-export { Divider } from './components/Divider';
-export type { DividerProps } from './components/Divider';
-export { Input } from './components/Input';
-export type { InputProps } from './components/Input';
-export { RadioGroup } from './components/RadioGroup';
-export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
-export { Select } from './components/Select';
-export type { SelectOption, SelectProps } from './components/Select';
-export { Spinner } from './components/Spinner';
-export type { SpinnerProps } from './components/Spinner';
-export { Switch } from './components/Switch';
-export type { SwitchProps } from './components/Switch';
-export { Textarea } from './components/Textarea';
-export type { TextareaProps } from './components/Textarea';
-export { Avatar } from './components/Avatar';
-export type { AvatarProps } from './components/Avatar';
-export { Breadcrumb } from './components/Breadcrumb';
-export type { BreadcrumbItem, BreadcrumbProps } from './components/Breadcrumb';
-export { Drawer } from './components/Drawer';
-export type { DrawerProps } from './components/Drawer';
-export { Dropdown } from './components/Dropdown';
-export type { DropdownProps } from './components/Dropdown';
-export { Empty } from './components/Empty';
-export type { EmptyProps } from './components/Empty';
-export { Flex } from './components/Flex';
-export type { FlexProps } from './components/Flex';
-export { Col, Row } from './components/Grid';
-export type { ColProps, RowProps } from './components/Grid';
-export { Content, Footer, Header, Layout, Sider } from './components/Layout';
-export { Menu } from './components/Menu';
-export type { MenuItem, MenuProps } from './components/Menu';
-export { Pagination } from './components/Pagination';
-export type { PaginationProps } from './components/Pagination';
-export { Progress } from './components/Progress';
-export type { ProgressProps } from './components/Progress';
-export { Result } from './components/Result';
-export type { ResultProps } from './components/Result';
-export { Skeleton } from './components/Skeleton';
-export type { SkeletonProps } from './components/Skeleton';
-export { Space } from './components/Space';
-export type { SpaceProps } from './components/Space';
-export { Steps } from './components/Steps';
-export type { StepItem, StepsProps } from './components/Steps';
-export { Table } from './components/Table';
-export type { TableColumn, TableProps } from './components/Table';
-export { Tabs } from './components/Tabs';
-export type { TabItem, TabsProps } from './components/Tabs';
-export { FilterTabs } from './components/FilterTabs';
-export type { FilterTabItem, FilterTabsProps } from './components/FilterTabs';
-export { SectionHeading } from './components/SectionHeading';
-export type { SectionHeadingProps } from './components/SectionHeading';
-export { ActionLinkButton } from './components/ActionLinkButton';
-export type { ActionLinkButtonProps } from './components/ActionLinkButton';
-export { WhatsAppButton } from './components/WhatsAppButton';
-export type { WhatsAppButtonProps } from './components/WhatsAppButton';
-export { EventCarousel } from './components/EventCarousel';
-export type { CarouselMedia, EventCarouselProps } from './components/EventCarousel';
-export { WhatsAppIcon } from './icons';
-export type { WhatsAppIconProps } from './icons';
-export { Tag } from './components/Tag';
-export type { TagProps } from './components/Tag';
-export { Tooltip } from './components/Tooltip';
-export type { TooltipProps } from './components/Tooltip';
-export { Link, Paragraph, Text, Title } from './components/Typography';
-export type { TextProps, TitleProps } from './components/Typography';
-export { AreaChart, BarChart, DonutChart, DualAxisChart, GroupedBarChart, HorizontalBarChart, LineChart, PieChart, StackedBarChart, StackedBarLineChart, VerticalBarChart } from './components/Charts';
-export type { CartesianChartProps, ChartSeries, CombinationChartProps, PieChartProps } from './components/Charts';
+export * from './src/index'
+export {}

package/dist/src/index.d.ts

@@ -0,0 +1,81 @@
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './components/Button';
+export { UIProvider, useUI } from './provider';
+export type { BuiltInLocale, MessageKey, Messages, ThemeName, UIContextValue, UIProviderProps, } from './provider';
+export { Alert } from './components/Alert';
+export type { AlertProps, AlertVariant } from './components/Alert';
+export { Badge } from './components/Badge';
+export type { BadgeProps, BadgeVariant } from './components/Badge';
+export { Card, CardBody, CardFooter, CardHeader } from './components/Card';
+export type { CardProps } from './components/Card';
+export { Checkbox } from './components/Checkbox';
+export type { CheckboxProps } from './components/Checkbox';
+export { Dialog } from './components/Dialog';
+export type { DialogProps } from './components/Dialog';
+export { Divider } from './components/Divider';
+export type { DividerProps } from './components/Divider';
+export { Input } from './components/Input';
+export type { InputProps } from './components/Input';
+export { RadioGroup } from './components/RadioGroup';
+export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
+export { Select } from './components/Select';
+export type { SelectOption, SelectProps } from './components/Select';
+export { Spinner } from './components/Spinner';
+export type { SpinnerProps } from './components/Spinner';
+export { Switch } from './components/Switch';
+export type { SwitchProps } from './components/Switch';
+export { Textarea } from './components/Textarea';
+export type { TextareaProps } from './components/Textarea';
+export { Avatar } from './components/Avatar';
+export type { AvatarProps } from './components/Avatar';
+export { Breadcrumb } from './components/Breadcrumb';
+export type { BreadcrumbItem, BreadcrumbProps } from './components/Breadcrumb';
+export { Drawer } from './components/Drawer';
+export type { DrawerProps } from './components/Drawer';
+export { Dropdown } from './components/Dropdown';
+export type { DropdownProps } from './components/Dropdown';
+export { Empty } from './components/Empty';
+export type { EmptyProps } from './components/Empty';
+export { Flex } from './components/Flex';
+export type { FlexProps } from './components/Flex';
+export { Col, Row } from './components/Grid';
+export type { ColProps, RowProps } from './components/Grid';
+export { Content, Footer, Header, Layout, Sider } from './components/Layout';
+export { Menu } from './components/Menu';
+export type { MenuItem, MenuProps } from './components/Menu';
+export { Pagination } from './components/Pagination';
+export type { PaginationProps } from './components/Pagination';
+export { Progress } from './components/Progress';
+export type { ProgressProps } from './components/Progress';
+export { Result } from './components/Result';
+export type { ResultProps } from './components/Result';
+export { Skeleton } from './components/Skeleton';
+export type { SkeletonProps } from './components/Skeleton';
+export { Space } from './components/Space';
+export type { SpaceProps } from './components/Space';
+export { Steps } from './components/Steps';
+export type { StepItem, StepsProps } from './components/Steps';
+export { Table } from './components/Table';
+export type { TableColumn, TableProps } from './components/Table';
+export { Tabs } from './components/Tabs';
+export type { TabItem, TabsProps } from './components/Tabs';
+export { FilterTabs } from './components/FilterTabs';
+export type { FilterTabItem, FilterTabsProps } from './components/FilterTabs';
+export { SectionHeading } from './components/SectionHeading';
+export type { SectionHeadingProps } from './components/SectionHeading';
+export { ActionLinkButton } from './components/ActionLinkButton';
+export type { ActionLinkButtonProps } from './components/ActionLinkButton';
+export { WhatsAppButton } from './components/WhatsAppButton';
+export type { WhatsAppButtonProps } from './components/WhatsAppButton';
+export { EventCarousel } from './components/EventCarousel';
+export type { CarouselMedia, EventCarouselProps } from './components/EventCarousel';
+export { WhatsAppIcon } from './icons';
+export type { WhatsAppIconProps } from './icons';
+export { Tag } from './components/Tag';
+export type { TagProps } from './components/Tag';
+export { Tooltip } from './components/Tooltip';
+export type { TooltipProps } from './components/Tooltip';
+export { Link, Paragraph, Text, Title } from './components/Typography';
+export type { TextProps, TitleProps } from './components/Typography';
+export { AreaChart, BarChart, DonutChart, DualAxisChart, GroupedBarChart, HorizontalBarChart, LineChart, PieChart, StackedBarChart, StackedBarLineChart, VerticalBarChart } from './components/Charts';
+export type { CartesianChartProps, ChartSeries, CombinationChartProps, PieChartProps } from './components/Charts';

package/dist/src/registry.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "elij-ui-library",
-  "version": "0.1.0",
-  "private": false,
+  "version": "0.2.1",
   "type": "module",
   "description": "Reusable React UI Components Storybook",
   "license": "MIT",
@@ -14,7 +13,8 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "registry"
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -25,7 +25,9 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
-    "./styles.css": "./dist/ui-library.css"
+    "./styles.css": "./dist/ui-library.css",
+    "./registry": "./registry/components.json",
+    "./registry/schema": "./registry/schema.json"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",

package/registry/components.json

@@ -0,0 +1,494 @@
+{
+  "schemaVersion": 1,
+  "package": "elij-ui-library",
+  "version": "0.2.0",
+  "description": "Public component metadata for Elij UI tooling, Storybook, CLI, and MCP.",
+  "components": [
+    {
+      "name": "ActionLinkButton",
+      "kind": "component",
+      "category": "actions",
+      "description": "A styled action link that combines navigation with button treatments.",
+      "import": "ActionLinkButton",
+      "story": "ActionLinkButton/Default",
+      "props": ["href", "children", "icon", "size", "variant"]
+    },
+    {
+      "name": "Alert",
+      "kind": "component",
+      "category": "feedback",
+      "description": "Dismissible status message with semantic alert or status roles.",
+      "import": "Alert",
+      "story": "Alert/Info",
+      "props": ["children", "title", "variant", "onDismiss"]
+    },
+    {
+      "name": "AreaChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Responsive area chart with shared chart controls.",
+      "import": "AreaChart",
+      "story": "Charts/Area",
+      "props": ["data", "series", "xKey", "height", "loading"]
+    },
+    {
+      "name": "Avatar",
+      "kind": "component",
+      "category": "data-display",
+      "description": "Image or fallback avatar with configurable size and shape.",
+      "import": "Avatar",
+      "story": "Avatar/Default",
+      "props": ["src", "alt", "children", "size", "shape"]
+    },
+    {
+      "name": "Badge",
+      "kind": "component",
+      "category": "data-display",
+      "description": "Compact status or label badge.",
+      "import": "Badge",
+      "story": "Badge/Default",
+      "props": ["children", "variant"]
+    },
+    {
+      "name": "BarChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Responsive vertical bar chart.",
+      "import": "BarChart",
+      "story": "Charts/Bar",
+      "props": ["data", "series", "xKey", "height", "loading"]
+    },
+    {
+      "name": "Breadcrumb",
+      "kind": "component",
+      "category": "navigation",
+      "description": "Accessible breadcrumb navigation.",
+      "import": "Breadcrumb",
+      "story": "Breadcrumb/Default",
+      "props": ["items", "separator", "ariaLabel"]
+    },
+    {
+      "name": "Button",
+      "kind": "component",
+      "category": "actions",
+      "description": "Accessible button with primary, secondary, and ghost variants.",
+      "import": "Button",
+      "story": "Button/Default",
+      "props": ["children", "variant", "size", "fullWidth", "disabled"]
+    },
+    {
+      "name": "Card",
+      "kind": "component",
+      "category": "data-display",
+      "description": "Surface container for grouped content.",
+      "import": "Card",
+      "story": "Card/Default",
+      "props": ["children", "interactive", "className"]
+    },
+    {
+      "name": "CardHeader",
+      "kind": "component",
+      "category": "data-display",
+      "description": "Header region for a Card.",
+      "import": "CardHeader",
+      "story": "Card/Composition",
+      "props": ["children"]
+    },
+    {
+      "name": "CardBody",
+      "kind": "component",
+      "category": "data-display",
+      "description": "Body region for a Card.",
+      "import": "CardBody",
+      "story": "Card/Composition",
+      "props": ["children"]
+    },
+    {
+      "name": "CardFooter",
+      "kind": "component",
+      "category": "data-display",
+      "description": "Footer region for a Card.",
+      "import": "CardFooter",
+      "story": "Card/Composition",
+      "props": ["children"]
+    },
+    {
+      "name": "Checkbox",
+      "kind": "component",
+      "category": "forms",
+      "description": "Native checkbox with an optional visible label.",
+      "import": "Checkbox",
+      "story": "Checkbox/Default",
+      "props": ["label", "indeterminate", "disabled"]
+    },
+    {
+      "name": "Dialog",
+      "kind": "component",
+      "category": "overlay",
+      "description": "Modal dialog with focus management and escape handling.",
+      "import": "Dialog",
+      "story": "Dialog/Default",
+      "props": ["open", "onOpenChange", "title", "description", "children"]
+    },
+    {
+      "name": "Divider",
+      "kind": "component",
+      "category": "layout",
+      "description": "Horizontal or vertical content divider.",
+      "import": "Divider",
+      "story": "Divider/Default",
+      "props": ["orientation", "label"]
+    },
+    {
+      "name": "DonutChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Responsive donut chart.",
+      "import": "DonutChart",
+      "story": "Charts/Donut",
+      "props": ["data", "nameKey", "valueKey", "height"]
+    },
+    {
+      "name": "Drawer",
+      "kind": "component",
+      "category": "overlay",
+      "description": "Focus-managed sliding panel.",
+      "import": "Drawer",
+      "story": "Drawer/Default",
+      "props": ["open", "onOpenChange", "title", "placement", "width"]
+    },
+    {
+      "name": "Dropdown",
+      "kind": "component",
+      "category": "navigation",
+      "description": "Dismissible menu anchored to a trigger.",
+      "import": "Dropdown",
+      "story": "Dropdown/Default",
+      "props": ["trigger", "items", "open", "onOpenChange", "onSelect"]
+    },
+    {
+      "name": "DualAxisChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Combination chart with optional second value axis.",
+      "import": "DualAxisChart",
+      "story": "Charts/Dual Axis",
+      "props": ["data", "barSeries", "lineSeries", "xKey", "dualAxis"]
+    },
+    {
+      "name": "Empty",
+      "kind": "component",
+      "category": "feedback",
+      "description": "Empty state with optional image and action content.",
+      "import": "Empty",
+      "story": "Empty/Default",
+      "props": ["description", "image", "children", "compact"]
+    },
+    {
+      "name": "EventCarousel",
+      "kind": "component",
+      "category": "content",
+      "description": "Responsive image and video carousel for event media.",
+      "import": "EventCarousel",
+      "story": "EventCarousel/Default",
+      "props": ["title", "description", "media", "className"]
+    },
+    {
+      "name": "FilterTabs",
+      "kind": "component",
+      "category": "navigation",
+      "description": "Compact filter controls for switching a visible dataset.",
+      "import": "FilterTabs",
+      "story": "FilterTabs/Default",
+      "props": ["items", "activeKey", "onChange", "ariaLabel"]
+    },
+    {
+      "name": "Flex",
+      "kind": "component",
+      "category": "layout",
+      "description": "Token-friendly flex layout primitive.",
+      "import": "Flex",
+      "story": "Flex/Default",
+      "props": ["children", "vertical", "gap", "align", "justify", "wrap"]
+    },
+    {
+      "name": "GroupedBarChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Grouped responsive bar chart.",
+      "import": "GroupedBarChart",
+      "story": "Charts/Grouped Bar",
+      "props": ["data", "series", "xKey", "height"]
+    },
+    {
+      "name": "HorizontalBarChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Responsive horizontal bar chart.",
+      "import": "HorizontalBarChart",
+      "story": "Charts/Horizontal Bar",
+      "props": ["data", "series", "xKey", "height"]
+    },
+    {
+      "name": "Input",
+      "kind": "component",
+      "category": "forms",
+      "description": "Labeled text input with helper and error semantics.",
+      "import": "Input",
+      "story": "Input/Default",
+      "props": ["label", "helperText", "error", "errorMessage", "fullWidth"]
+    },
+    {
+      "name": "LineChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Responsive line chart.",
+      "import": "LineChart",
+      "story": "Charts/Line",
+      "props": ["data", "series", "xKey", "height", "loading"]
+    },
+    {
+      "name": "Link",
+      "kind": "component",
+      "category": "typography",
+      "description": "Styled inline or standalone link.",
+      "import": "Link",
+      "story": "Typography/Link",
+      "props": ["children", "href"]
+    },
+    {
+      "name": "Menu",
+      "kind": "component",
+      "category": "navigation",
+      "description": "Keyboard-navigable menu items.",
+      "import": "Menu",
+      "story": "Menu/Default",
+      "props": ["items", "orientation", "onSelect"]
+    },
+    {
+      "name": "Pagination",
+      "kind": "component",
+      "category": "navigation",
+      "description": "Accessible page navigation control.",
+      "import": "Pagination",
+      "story": "Pagination/Default",
+      "props": ["current", "total", "pageSize", "onChange"]
+    },
+    {
+      "name": "Paragraph",
+      "kind": "component",
+      "category": "typography",
+      "description": "Styled paragraph text primitive.",
+      "import": "Paragraph",
+      "story": "Typography/Paragraph",
+      "props": ["children"]
+    },
+    {
+      "name": "PieChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Responsive pie chart.",
+      "import": "PieChart",
+      "story": "Charts/Pie",
+      "props": ["data", "nameKey", "valueKey", "height"]
+    },
+    {
+      "name": "Progress",
+      "kind": "component",
+      "category": "feedback",
+      "description": "Line or circular progress indicator.",
+      "import": "Progress",
+      "story": "Progress/Default",
+      "props": ["percent", "type", "status", "showInfo", "label"]
+    },
+    {
+      "name": "RadioGroup",
+      "kind": "component",
+      "category": "forms",
+      "description": "Accessible radio option group.",
+      "import": "RadioGroup",
+      "story": "RadioGroup/Default",
+      "props": ["name", "label", "options", "value", "onValueChange"]
+    },
+    {
+      "name": "Result",
+      "kind": "component",
+      "category": "feedback",
+      "description": "Outcome or status panel with optional actions.",
+      "import": "Result",
+      "story": "Result/Success",
+      "props": ["status", "title", "description", "actions"]
+    },
+    {
+      "name": "SectionHeading",
+      "kind": "component",
+      "category": "content",
+      "description": "Consistent eyebrow, heading, and description block.",
+      "import": "SectionHeading",
+      "story": "SectionHeading/Default",
+      "props": ["eyebrow", "title", "description"]
+    },
+    {
+      "name": "Select",
+      "kind": "component",
+      "category": "forms",
+      "description": "Labeled native select with helper and error semantics.",
+      "import": "Select",
+      "story": "Select/Default",
+      "props": ["label", "options", "placeholder", "error", "fullWidth"]
+    },
+    {
+      "name": "Skeleton",
+      "kind": "component",
+      "category": "feedback",
+      "description": "Loading placeholder for content surfaces.",
+      "import": "Skeleton",
+      "story": "Skeleton/Default",
+      "props": ["variant", "width", "height", "animated"]
+    },
+    {
+      "name": "Space",
+      "kind": "component",
+      "category": "layout",
+      "description": "Consistent spacing primitive for inline or stacked content.",
+      "import": "Space",
+      "story": "Space/Default",
+      "props": ["children", "direction", "size", "wrap", "align"]
+    },
+    {
+      "name": "Spinner",
+      "kind": "component",
+      "category": "feedback",
+      "description": "Loading status indicator.",
+      "import": "Spinner",
+      "story": "Spinner/Default",
+      "props": ["size", "label"]
+    },
+    {
+      "name": "StackedBarChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Stacked responsive bar chart.",
+      "import": "StackedBarChart",
+      "story": "Charts/Stacked Bar",
+      "props": ["data", "series", "xKey", "height"]
+    },
+    {
+      "name": "StackedBarLineChart",
+      "kind": "component",
+      "category": "charts",
+      "description": "Combined stacked bar and line chart.",
+      "import": "StackedBarLineChart",
+      "story": "Charts/Stacked Bar Line",
+      "props": ["data", "barSeries", "lineSeries", "xKey"]
+    },
+    {
+      "name": "Steps",
+      "kind": "component",
+      "category": "navigation",
+      "description": "Progressive step navigation with statuses.",
+      "import": "Steps",
+      "story": "Steps/Default",
+      "props": ["items", "current", "onChange", "direction"]
+    },
+    {
+      "name": "Switch",
+      "kind": "component",
+      "category": "forms",
+      "description": "Accessible on/off switch control.",
+      "import": "Switch",
+      "story": "Switch/Default",
+      "props": ["checked", "defaultChecked", "onCheckedChange", "label"]
+    },
+    {
+      "name": "Table",
+      "kind": "component",
+      "category": "data-display",
+      "description": "Typed data table with empty state support.",
+      "import": "Table",
+      "story": "Table/Default",
+      "props": ["columns", "data", "rowKey", "caption"]
+    },
+    {
+      "name": "Tabs",
+      "kind": "component",
+      "category": "navigation",
+      "description": "Keyboard-navigable content tabs.",
+      "import": "Tabs",
+      "story": "Tabs/Default",
+      "props": ["items", "activeKey", "onChange", "orientation"]
+    },
+    {
+      "name": "Tag",
+      "kind": "component",
+      "category": "data-display",
+      "description": "Compact label that can optionally be dismissed.",
+      "import": "Tag",
+      "story": "Tag/Default",
+      "props": ["children", "color", "closable", "onClose"]
+    },
+    {
+      "name": "Text",
+      "kind": "component",
+      "category": "typography",
+      "description": "Styled inline text primitive.",
+      "import": "Text",
+      "story": "Typography/Text",
+      "props": ["children", "tone", "strong", "code"]
+    },
+    {
+      "name": "Textarea",
+      "kind": "component",
+      "category": "forms",
+      "description": "Labeled multiline input with helper and error semantics.",
+      "import": "Textarea",
+      "story": "Textarea/Default",
+      "props": ["label", "helperText", "error", "errorMessage", "fullWidth"]
+    },
+    {
+      "name": "Title",
+      "kind": "component",
+      "category": "typography",
+      "description": "Semantic heading primitive.",
+      "import": "Title",
+      "story": "Typography/Title",
+      "props": ["level", "children"]
+    },
+    {
+      "name": "Tooltip",
+      "kind": "component",
+      "category": "feedback",
+      "description": "Accessible hover and focus tooltip.",
+      "import": "Tooltip",
+      "story": "Tooltip/Default",
+      "props": ["title", "children", "placement", "delay"]
+    },
+    {
+      "name": "UIProvider",
+      "kind": "provider",
+      "category": "foundation",
+      "description": "Locale, message, theme, and color-scheme provider.",
+      "import": "UIProvider",
+      "story": "UIProvider/Themes",
+      "props": ["children", "locale", "messages", "theme"]
+    },
+    {
+      "name": "WhatsAppButton",
+      "kind": "component",
+      "category": "actions",
+      "description": "Link-styled CTA with WhatsApp-friendly defaults.",
+      "import": "WhatsAppButton",
+      "story": "WhatsAppButton/Default",
+      "props": ["href", "children", "icon", "size", "variant"]
+    },
+    {
+      "name": "WhatsAppIcon",
+      "kind": "icon",
+      "category": "icons",
+      "description": "Brand-safe inline WhatsApp SVG icon.",
+      "import": "WhatsAppIcon",
+      "story": "WhatsAppIcon/Default",
+      "props": ["size", "title"]
+    }
+  ]
+}

package/registry/schema.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://elij-ui-library.dev/registry/components.schema.json",
+  "title": "Elij UI component registry",
+  "type": "object",
+  "required": ["schemaVersion", "package", "version", "components"],
+  "properties": {
+    "schemaVersion": { "type": "integer", "const": 1 },
+    "package": { "type": "string" },
+    "version": { "type": "string" },
+    "description": { "type": "string" },
+    "components": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "required": ["name", "kind", "category", "description", "import", "story", "props"],
+        "properties": {
+          "name": { "type": "string" },
+          "kind": { "enum": ["component", "icon", "provider"] },
+          "category": { "type": "string" },
+          "description": { "type": "string" },
+          "import": { "type": "string" },
+          "story": { "type": "string" },
+          "props": { "type": "array", "items": { "type": "string" } }
+        },
+        "additionalProperties": false
+      }
+    }
+  },
+  "additionalProperties": false
+}
+