npm - @ds-mo/ui - Versions diffs - 0.1.0 - Mend

@ds-mo/ui 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (213) hide show

package/LICENSE +21 -0
package/README.md +81 -0
package/dist/index.css +1 -0
package/dist/index.d.ts +969 -0
package/dist/index.js +2623 -0
package/dist/index.js.map +1 -0
package/dist/r/accordion.json +79 -0
package/dist/r/badge.json +69 -0
package/dist/r/banner.json +90 -0
package/dist/r/breadcrumb.json +70 -0
package/dist/r/button-group.json +65 -0
package/dist/r/button.json +137 -0
package/dist/r/card.json +82 -0
package/dist/r/checkbox.json +91 -0
package/dist/r/divider.json +57 -0
package/dist/r/empty-state.json +69 -0
package/dist/r/error-boundary.json +66 -0
package/dist/r/fade.json +65 -0
package/dist/r/field.json +71 -0
package/dist/r/header.json +67 -0
package/dist/r/input.json +77 -0
package/dist/r/loader.json +54 -0
package/dist/r/menu.json +130 -0
package/dist/r/modal.json +93 -0
package/dist/r/pagination.json +80 -0
package/dist/r/radio.json +85 -0
package/dist/r/registry.json +1600 -0
package/dist/r/scrollbar.json +68 -0
package/dist/r/select.json +93 -0
package/dist/r/sidebar.json +105 -0
package/dist/r/skeleton.json +72 -0
package/dist/r/slider.json +87 -0
package/dist/r/surface.json +97 -0
package/dist/r/tab-group.json +72 -0
package/dist/r/tab.json +71 -0
package/dist/r/table.json +110 -0
package/dist/r/tag.json +110 -0
package/dist/r/text.json +94 -0
package/dist/r/toast.json +77 -0
package/dist/r/toggle-button-group.json +65 -0
package/dist/r/toggle-button.json +94 -0
package/dist/r/toggle.json +65 -0
package/dist/r/tooltip.json +86 -0
package/package.json +80 -0
package/src/components/Accordion/Accordion.module.css +66 -0
package/src/components/Accordion/Accordion.stories.tsx +95 -0
package/src/components/Accordion/Accordion.tsx +122 -0
package/src/components/Accordion/index.ts +2 -0
package/src/components/Badge/Badge.module.css +6 -0
package/src/components/Badge/Badge.stories.tsx +99 -0
package/src/components/Badge/Badge.tsx +23 -0
package/src/components/Badge/index.ts +2 -0
package/src/components/Banner/Banner.module.css +67 -0
package/src/components/Banner/Banner.stories.tsx +81 -0
package/src/components/Banner/Banner.tsx +109 -0
package/src/components/Banner/index.ts +2 -0
package/src/components/Breadcrumb/Breadcrumb.module.css +46 -0
package/src/components/Breadcrumb/Breadcrumb.stories.tsx +72 -0
package/src/components/Breadcrumb/Breadcrumb.tsx +68 -0
package/src/components/Breadcrumb/index.ts +2 -0
package/src/components/Button/Button.module.css +343 -0
package/src/components/Button/Button.stories.tsx +575 -0
package/src/components/Button/Button.tsx +201 -0
package/src/components/Button/index.ts +10 -0
package/src/components/ButtonGroup/ButtonGroup.module.css +157 -0
package/src/components/ButtonGroup/ButtonGroup.stories.tsx +384 -0
package/src/components/ButtonGroup/ButtonGroup.tsx +122 -0
package/src/components/ButtonGroup/index.ts +2 -0
package/src/components/Card/Card.module.css +36 -0
package/src/components/Card/Card.stories.tsx +78 -0
package/src/components/Card/Card.tsx +53 -0
package/src/components/Card/index.ts +2 -0
package/src/components/Checkbox/Checkbox.module.css +47 -0
package/src/components/Checkbox/Checkbox.stories.tsx +129 -0
package/src/components/Checkbox/Checkbox.tsx +68 -0
package/src/components/Checkbox/index.ts +2 -0
package/src/components/Divider/Divider.module.css +19 -0
package/src/components/Divider/Divider.stories.tsx +55 -0
package/src/components/Divider/Divider.tsx +28 -0
package/src/components/Divider/index.ts +2 -0
package/src/components/EmptyState/EmptyState.module.css +8 -0
package/src/components/EmptyState/EmptyState.stories.tsx +53 -0
package/src/components/EmptyState/EmptyState.tsx +31 -0
package/src/components/EmptyState/index.ts +2 -0
package/src/components/ErrorBoundary/ErrorBoundary.module.css +18 -0
package/src/components/ErrorBoundary/ErrorBoundary.stories.tsx +38 -0
package/src/components/ErrorBoundary/ErrorBoundary.tsx +50 -0
package/src/components/ErrorBoundary/index.ts +2 -0
package/src/components/Fade/Fade.module.css +31 -0
package/src/components/Fade/Fade.stories.tsx +35 -0
package/src/components/Fade/Fade.tsx +33 -0
package/src/components/Fade/index.ts +2 -0
package/src/components/Field/Field.module.css +5 -0
package/src/components/Field/Field.stories.tsx +111 -0
package/src/components/Field/Field.tsx +22 -0
package/src/components/Field/index.ts +2 -0
package/src/components/Header/Header.module.css +33 -0
package/src/components/Header/Header.stories.tsx +52 -0
package/src/components/Header/Header.tsx +42 -0
package/src/components/Header/index.ts +2 -0
package/src/components/Input/Input.module.css +71 -0
package/src/components/Input/Input.stories.tsx +135 -0
package/src/components/Input/Input.tsx +76 -0
package/src/components/Input/index.ts +2 -0
package/src/components/LabelWrap/LabelWrap.module.css +34 -0
package/src/components/LabelWrap/LabelWrap.tsx +32 -0
package/src/components/LabelWrap/index.ts +1 -0
package/src/components/Loader/Loader.module.css +9 -0
package/src/components/Loader/Loader.stories.tsx +44 -0
package/src/components/Loader/Loader.tsx +43 -0
package/src/components/Loader/index.ts +2 -0
package/src/components/Menu/DestructiveMenuItem.module.css +57 -0
package/src/components/Menu/DestructiveMenuItem.tsx +64 -0
package/src/components/Menu/Menu.module.css +49 -0
package/src/components/Menu/Menu.stories.tsx +129 -0
package/src/components/Menu/Menu.tsx +269 -0
package/src/components/Menu/MenuItem.module.css +84 -0
package/src/components/Menu/MenuItem.tsx +101 -0
package/src/components/Menu/index.ts +6 -0
package/src/components/Modal/Modal.module.css +67 -0
package/src/components/Modal/Modal.stories.tsx +71 -0
package/src/components/Modal/Modal.tsx +122 -0
package/src/components/Modal/index.ts +2 -0
package/src/components/Pagination/Pagination.module.css +64 -0
package/src/components/Pagination/Pagination.stories.tsx +51 -0
package/src/components/Pagination/Pagination.tsx +103 -0
package/src/components/Pagination/index.ts +2 -0
package/src/components/Radio/Radio.module.css +61 -0
package/src/components/Radio/Radio.stories.tsx +101 -0
package/src/components/Radio/Radio.tsx +108 -0
package/src/components/Radio/index.ts +2 -0
package/src/components/Scrollbar/Scrollbar.module.css +81 -0
package/src/components/Scrollbar/Scrollbar.stories.tsx +46 -0
package/src/components/Scrollbar/Scrollbar.tsx +187 -0
package/src/components/Scrollbar/index.ts +2 -0
package/src/components/Select/Select.module.css +31 -0
package/src/components/Select/Select.stories.tsx +59 -0
package/src/components/Select/Select.tsx +92 -0
package/src/components/Select/index.ts +2 -0
package/src/components/Sidebar/Sidebar.module.css +161 -0
package/src/components/Sidebar/Sidebar.stories.tsx +125 -0
package/src/components/Sidebar/Sidebar.tsx +129 -0
package/src/components/Sidebar/SidebarItem.tsx +57 -0
package/src/components/Sidebar/SidebarSection.tsx +42 -0
package/src/components/Sidebar/index.ts +6 -0
package/src/components/Skeleton/Skeleton.module.css +53 -0
package/src/components/Skeleton/Skeleton.stories.tsx +89 -0
package/src/components/Skeleton/Skeleton.tsx +66 -0
package/src/components/Skeleton/index.ts +2 -0
package/src/components/Slider/Slider.module.css +62 -0
package/src/components/Slider/Slider.stories.tsx +120 -0
package/src/components/Slider/Slider.tsx +74 -0
package/src/components/Slider/index.ts +2 -0
package/src/components/Surface/Surface.module.css +222 -0
package/src/components/Surface/Surface.stories.tsx +213 -0
package/src/components/Surface/Surface.tsx +219 -0
package/src/components/Surface/index.ts +12 -0
package/src/components/Tab/Tab.module.css +66 -0
package/src/components/Tab/Tab.stories.tsx +103 -0
package/src/components/Tab/Tab.tsx +41 -0
package/src/components/Tab/index.ts +2 -0
package/src/components/TabGroup/TabGroup.module.css +26 -0
package/src/components/TabGroup/TabGroup.stories.tsx +60 -0
package/src/components/TabGroup/TabGroup.tsx +83 -0
package/src/components/TabGroup/index.ts +2 -0
package/src/components/Table/Table.module.css +130 -0
package/src/components/Table/Table.stories.tsx +111 -0
package/src/components/Table/Table.tsx +226 -0
package/src/components/Table/index.ts +11 -0
package/src/components/Tag/Tag.module.css +270 -0
package/src/components/Tag/Tag.stories.tsx +399 -0
package/src/components/Tag/Tag.tsx +162 -0
package/src/components/Tag/index.ts +2 -0
package/src/components/Text/Text.module.css +166 -0
package/src/components/Text/Text.stories.tsx +212 -0
package/src/components/Text/Text.tsx +181 -0
package/src/components/Text/index.ts +13 -0
package/src/components/Toast/Toast.module.css +91 -0
package/src/components/Toast/Toast.stories.tsx +66 -0
package/src/components/Toast/Toast.tsx +182 -0
package/src/components/Toast/index.ts +8 -0
package/src/components/Toggle/Toggle.module.css +87 -0
package/src/components/Toggle/Toggle.stories.tsx +85 -0
package/src/components/Toggle/Toggle.tsx +52 -0
package/src/components/Toggle/index.ts +2 -0
package/src/components/ToggleButton/ToggleButton.module.css +172 -0
package/src/components/ToggleButton/ToggleButton.stories.tsx +299 -0
package/src/components/ToggleButton/ToggleButton.tsx +118 -0
package/src/components/ToggleButton/index.ts +2 -0
package/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css +163 -0
package/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx +341 -0
package/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx +111 -0
package/src/components/ToggleButtonGroup/index.ts +2 -0
package/src/components/Tooltip/Tooltip.module.css +45 -0
package/src/components/Tooltip/Tooltip.stories.tsx +46 -0
package/src/components/Tooltip/Tooltip.tsx +224 -0
package/src/components/Tooltip/index.ts +2 -0
package/src/css-modules.d.ts +4 -0
package/src/docs/ColorUsage.mdx +195 -0
package/src/docs/ElevationUsage.mdx +95 -0
package/src/docs/Introduction.mdx +97 -0
package/src/docs/OpticalSizing.mdx +178 -0
package/src/docs/TypographyUsage.mdx +121 -0
package/src/index.ts +154 -0
package/src/stories/Colors.stories.tsx +528 -0
package/src/stories/Dimensions.stories.tsx +200 -0
package/src/stories/Effects.stories.tsx +231 -0
package/src/stories/Icons.stories.tsx +159 -0
package/src/stories/Typography.stories.tsx +157 -0
package/src/types/icons.ts +15 -0
package/src/types/index.ts +1 -0
package/src/utils/cn.ts +6 -0
package/src/utils/css-tokens.ts +22 -0

package/dist/r/card.json ADDED Viewed

@@ -0,0 +1,82 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "card",
+  "title": "Card",
+  "description": "Content container with header, body, and footer sections. Supports elevation and radius presets.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@compomo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/card",
+    "consumption": {
+      "install": "npm install @compomo/ui @ds-mo/tokens",
+      "cssSetup": "Import tokens CSS at your app entry point: import '@ds-mo/tokens/css';\nThis provides all var(--color-*), var(--dimension-*), var(--effect-*), and var(--typography-*) custom properties.\nFor dark mode, set data-theme=\"dark\" on <html>.",
+      "import": "import { Card } from '@compomo/ui';",
+      "cssImport": "import '@compomo/ui/css';",
+      "typeImport": "import type { CardProps, CardElevation, CardRadius } from '@compomo/ui';",
+      "internalDependencies": [
+        {
+          "component": "Surface",
+          "note": "Used internally by Card. No action needed — it's bundled in @compomo/ui."
+        }
+      ],
+      "peerDependencies": {
+        "required": [
+          "react >=17",
+          "react-dom >=17",
+          "@ds-mo/tokens >=0.1.0"
+        ],
+        "optional": []
+      }
+    },
+    "props": {
+      "children": {
+        "type": "React.ReactNode",
+        "required": true
+      },
+      "header": {
+        "type": "React.ReactNode",
+        "description": "Rendered with a bottom divider."
+      },
+      "footer": {
+        "type": "React.ReactNode",
+        "description": "Rendered with a top divider."
+      },
+      "elevation": {
+        "type": "'flat' | 'elevated' | 'floating'",
+        "default": "'elevated'"
+      },
+      "radius": {
+        "type": "'sm' | 'md' | 'lg' | 'xl'",
+        "default": "'lg'"
+      }
+    },
+    "exports": [
+      "Card"
+    ],
+    "types": [
+      "CardProps",
+      "CardElevation",
+      "CardRadius"
+    ]
+  },
+  "dependencies": [
+    "@compomo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "surface"
+  ],
+  "files": [
+    {
+      "path": "src/components/Card/Card.module.css",
+      "content": "/**\n * Card — structured container with optional header/footer.\n * Uses TokoMo tokens directly (not built on Surface).\n */\n\n.card {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  overflow: hidden;\n}\n\n/* Elevation */\n.elevationFlat { box-shadow: var(--effect-elevation-elevated-none); }\n.elevationElevated { box-shadow: var(--effect-elevation-elevated-sm); }\n.elevationFloating { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n.radiusSm { border-radius: var(--dimension-radius-075); }\n.radiusMd { border-radius: var(--dimension-radius-100); }\n.radiusLg { border-radius: var(--dimension-radius-125); }\n.radiusXl { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n.header {\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n  padding: var(--dimension-space-200);\n}\n\n.footer {\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/Card/Card.tsx",
+      "content": "import React, { forwardRef } from 'react';\nimport styles from './Card.module.css';\nimport { cn } from '@/utils/cn';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface CardProps {\n  children: React.ReactNode;\n  /** Optional header content — rendered with a bottom divider. */\n  header?: React.ReactNode;\n  /** Optional footer content — rendered with a top divider. */\n  footer?: React.ReactNode;\n  /** Elevation level. Defaults to 'elevated'. */\n  elevation?: CardElevation;\n  /** Corner radius. Defaults to 'lg'. */\n  radius?: CardRadius;\n  /** Additional CSS classes. */\n  className?: string;\n  /** Inline styles. */\n  style?: React.CSSProperties;\n}\n\nconst elevationClassMap: Record<CardElevation, string> = {\n  flat: styles.elevationFlat,\n  elevated: styles.elevationElevated,\n  floating: styles.elevationFloating,\n};\n\nconst radiusClassMap: Record<CardRadius, string> = {\n  sm: styles.radiusSm,\n  md: styles.radiusMd,\n  lg: styles.radiusLg,\n  xl: styles.radiusXl,\n};\n\nexport const Card = forwardRef<HTMLDivElement, CardProps>(\n  ({ children, header, footer, elevation = 'elevated', radius = 'lg', className, style }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(styles.card, elevationClassMap[elevation], radiusClassMap[radius], className)}\n        style={style}\n      >\n        {header && <div className={styles.header}>{header}</div>}\n        <div className={styles.body}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/checkbox.json ADDED Viewed

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "checkbox",
+  "title": "Checkbox",
+  "description": "Three-state checkbox (checked, unchecked, indeterminate) with keyboard support and custom icon slots.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@compomo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/checkbox",
+    "consumption": {
+      "install": "npm install @compomo/ui @ds-mo/tokens @ds-mo/icons",
+      "cssSetup": "Import tokens CSS at your app entry point: import '@ds-mo/tokens/css';\nThis provides all var(--color-*), var(--dimension-*), var(--effect-*), and var(--typography-*) custom properties.\nFor dark mode, set data-theme=\"dark\" on <html>.",
+      "import": "import { Checkbox } from '@compomo/ui';",
+      "cssImport": "import '@compomo/ui/css';",
+      "typeImport": "import type { CheckboxProps } from '@compomo/ui';",
+      "iconImport": "import { IconName } from '@ds-mo/icons';  // Tree-shakeable, import only what you need",
+      "internalDependencies": [
+        {
+          "component": "Text",
+          "note": "Used internally by Checkbox. No action needed — it's bundled in @compomo/ui."
+        }
+      ],
+      "peerDependencies": {
+        "required": [
+          "react >=17",
+          "react-dom >=17",
+          "@ds-mo/tokens >=0.1.0"
+        ],
+        "optional": [
+          "@ds-mo/icons >=0.1.0 (for icon props)"
+        ]
+      }
+    },
+    "props": {
+      "label": {
+        "type": "string",
+        "required": true
+      },
+      "checked": {
+        "type": "boolean",
+        "default": "false"
+      },
+      "indeterminate": {
+        "type": "boolean",
+        "default": "false"
+      },
+      "onChange": {
+        "type": "(checked: boolean) => void"
+      },
+      "inactive": {
+        "type": "boolean"
+      },
+      "checkedIcon": {
+        "type": "IconComponent"
+      },
+      "uncheckedIcon": {
+        "type": "IconComponent"
+      },
+      "indeterminateIcon": {
+        "type": "IconComponent"
+      }
+    },
+    "exports": [
+      "Checkbox"
+    ],
+    "types": [
+      "CheckboxProps"
+    ]
+  },
+  "dependencies": [
+    "@compomo/ui",
+    "@ds-mo/tokens",
+    "@ds-mo/icons"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/components/Checkbox/Checkbox.module.css",
+      "content": ".checkbox {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  border-radius: var(--dimension-radius-075);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.checkbox:hover { background-color: var(--color-interaction-hover); }\n.checkbox:active { background-color: var(--color-interaction-pressed); }\n\n.inactive {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Fallback checkbox box (when no icon components provided) */\n.box {\n  width: 20px;\n  height: 20px;\n  border: 1.5px solid var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-050);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: all var(--effect-motion-short-2);\n}\n\n.boxChecked {\n  background-color: var(--color-foreground-primary);\n  border-color: var(--color-foreground-primary);\n}\n\n.checkmark {\n  color: var(--color-foreground-on-bold-background-primary);\n  font-size: 14px;\n  line-height: 1;\n  font-weight: 700;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/Checkbox/Checkbox.tsx",
+      "content": "import React, { forwardRef } from 'react';\nimport { cn } from '@/utils/cn';\nimport { Text } from '@/components/Text';\nimport type { IconComponent } from '@/types/icons';\nimport styles from './Checkbox.module.css';\n\nexport interface CheckboxProps {\n  label: string;\n  checked?: boolean;\n  indeterminate?: boolean;\n  onChange?: (checked: boolean) => void;\n  inactive?: boolean;\n  className?: string;\n  /** Icon for checked state. */\n  checkedIcon?: IconComponent;\n  /** Icon for unchecked state. */\n  uncheckedIcon?: IconComponent;\n  /** Icon for indeterminate state. */\n  indeterminateIcon?: IconComponent;\n}\n\nexport const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(\n  (\n    {\n      label,\n      checked = false,\n      indeterminate = false,\n      onChange,\n      inactive = false,\n      className,\n      checkedIcon: CheckedIcon,\n      uncheckedIcon: UncheckedIcon,\n      indeterminateIcon: IndeterminateIcon,\n    },\n    ref\n  ) => {\n    const handleClick = () => {\n      if (!inactive) onChange?.(!checked);\n    };\n\n    const iconColor = indeterminate || checked ? 'var(--color-foreground-primary)' : 'var(--color-foreground-secondary)';\n    const Icon = indeterminate ? IndeterminateIcon : checked ? CheckedIcon : UncheckedIcon;\n\n    return (\n      <div\n        ref={ref}\n        role=\"checkbox\"\n        aria-checked={indeterminate ? 'mixed' : checked}\n        aria-inactive={inactive}\n        tabIndex={inactive ? -1 : 0}\n        className={cn(styles.checkbox, inactive && styles.inactive, className)}\n        onClick={handleClick}\n        onKeyDown={e => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); handleClick(); } }}\n      >\n        {Icon ? <Icon size={20} color={iconColor} /> : (\n          <span className={cn(styles.box, (checked || indeterminate) && styles.boxChecked)}>\n            {(checked || indeterminate) && <span className={styles.checkmark}>{indeterminate ? '−' : '✓'}</span>}\n          </span>\n        )}\n        <Text variant=\"text-body-medium\" as=\"span\" color=\"inherit\">\n          {label}\n        </Text>\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/divider.json ADDED Viewed

@@ -0,0 +1,57 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "divider",
+  "title": "Divider",
+  "description": "Horizontal or vertical separator line using design tokens.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@compomo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/divider",
+    "consumption": {
+      "install": "npm install @compomo/ui @ds-mo/tokens",
+      "cssSetup": "Import tokens CSS at your app entry point: import '@ds-mo/tokens/css';\nThis provides all var(--color-*), var(--dimension-*), var(--effect-*), and var(--typography-*) custom properties.\nFor dark mode, set data-theme=\"dark\" on <html>.",
+      "import": "import { Divider } from '@compomo/ui';",
+      "cssImport": "import '@compomo/ui/css';",
+      "typeImport": "import type { DividerProps, DividerOrientation } from '@compomo/ui';",
+      "peerDependencies": {
+        "required": [
+          "react >=17",
+          "react-dom >=17",
+          "@ds-mo/tokens >=0.1.0"
+        ],
+        "optional": []
+      }
+    },
+    "props": {
+      "orientation": {
+        "type": "'horizontal' | 'vertical'",
+        "default": "'horizontal'"
+      }
+    },
+    "exports": [
+      "Divider"
+    ],
+    "types": [
+      "DividerProps",
+      "DividerOrientation"
+    ]
+  },
+  "dependencies": [
+    "@compomo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "src/components/Divider/Divider.module.css",
+      "content": ".divider {\n  border: none;\n  margin: 0;\n  flex-shrink: 0;\n  background-color: var(--color-border-secondary);\n}\n\n/* Horizontal (default) */\n.divider:not(.vertical) {\n  width: 100%;\n  height: 1px;\n}\n\n/* Vertical */\n.vertical {\n  width: 1px;\n  height: 100%;\n  align-self: stretch;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/Divider/Divider.tsx",
+      "content": "import React, { forwardRef } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Divider.module.css';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\n\nexport interface DividerProps {\n  /** Direction of the divider line. */\n  orientation?: DividerOrientation;\n  className?: string;\n}\n\nexport const Divider = forwardRef<HTMLHRElement, DividerProps>(\n  ({ orientation = 'horizontal', className }, ref) => (\n    <hr\n      ref={ref}\n      role=\"separator\"\n      aria-orientation={orientation}\n      className={cn(\n        styles.divider,\n        orientation === 'vertical' && styles.vertical,\n        className\n      )}\n    />\n  )\n);\n\nDivider.displayName = 'Divider';\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/empty-state.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "empty-state",
+  "title": "EmptyState",
+  "description": "Centered placeholder for empty content, no results, or no access states.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@compomo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/empty-state",
+    "consumption": {
+      "install": "npm install @compomo/ui @ds-mo/tokens",
+      "cssSetup": "Import tokens CSS at your app entry point: import '@ds-mo/tokens/css';\nThis provides all var(--color-*), var(--dimension-*), var(--effect-*), and var(--typography-*) custom properties.\nFor dark mode, set data-theme=\"dark\" on <html>.",
+      "import": "import { EmptyState } from '@compomo/ui';",
+      "cssImport": "import '@compomo/ui/css';",
+      "typeImport": "import type { EmptyStateProps, EmptyStateType } from '@compomo/ui';",
+      "internalDependencies": [
+        {
+          "component": "Text",
+          "note": "Used internally by EmptyState. No action needed — it's bundled in @compomo/ui."
+        }
+      ],
+      "peerDependencies": {
+        "required": [
+          "react >=17",
+          "react-dom >=17",
+          "@ds-mo/tokens >=0.1.0"
+        ],
+        "optional": []
+      }
+    },
+    "props": {
+      "type": {
+        "type": "'no-content' | 'no-results' | 'no-results-filter' | 'no-access'",
+        "default": "'no-content'"
+      },
+      "message": {
+        "type": "string",
+        "description": "Overrides default message."
+      }
+    },
+    "exports": [
+      "EmptyState"
+    ],
+    "types": [
+      "EmptyStateProps",
+      "EmptyStateType"
+    ]
+  },
+  "dependencies": [
+    "@compomo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/components/EmptyState/EmptyState.module.css",
+      "content": ".emptyState {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n  width: 100%;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/EmptyState/EmptyState.tsx",
+      "content": "import React, { forwardRef } from 'react';\nimport { cn } from '@/utils/cn';\nimport { Text } from '@/components/Text';\nimport styles from './EmptyState.module.css';\n\nexport type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';\n\nconst defaultMessages: Record<EmptyStateType, string> = {\n  'no-content': 'No page contents to display.',\n  'no-results': 'No results found.',\n  'no-results-filter': 'No results found. Please update search criteria.',\n  'no-access': \"You don't have access to this page.\",\n};\n\nexport interface EmptyStateProps {\n  type?: EmptyStateType;\n  message?: string;\n  className?: string;\n}\n\nexport const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(\n  ({ type = 'no-content', message, className }, ref) => (\n    <div ref={ref} className={cn(styles.emptyState, className)}>\n      <Text variant=\"text-body-medium\" as=\"p\" color=\"secondary\">\n        {message || defaultMessages[type]}\n      </Text>\n    </div>\n  )\n);\n\nEmptyState.displayName = 'EmptyState';\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/error-boundary.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "error-boundary",
+  "title": "ErrorBoundary",
+  "description": "React error boundary with fallback UI and console logging.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@compomo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/error-boundary",
+    "consumption": {
+      "install": "npm install @compomo/ui",
+      "import": "import { ErrorBoundary } from '@compomo/ui';",
+      "cssImport": "import '@compomo/ui/css';",
+      "typeImport": "import type { ErrorBoundaryProps } from '@compomo/ui';",
+      "internalDependencies": [
+        {
+          "component": "EmptyState",
+          "note": "Used internally by ErrorBoundary. No action needed — it's bundled in @compomo/ui."
+        }
+      ],
+      "peerDependencies": {
+        "required": [
+          "react >=17",
+          "react-dom >=17",
+          "@ds-mo/tokens >=0.1.0"
+        ],
+        "optional": []
+      }
+    },
+    "props": {
+      "children": {
+        "type": "React.ReactNode",
+        "required": true
+      },
+      "fallback": {
+        "type": "React.ReactNode",
+        "description": "Custom error UI."
+      }
+    },
+    "exports": [
+      "ErrorBoundary"
+    ],
+    "types": [
+      "ErrorBoundaryProps"
+    ]
+  },
+  "dependencies": [
+    "@compomo/ui"
+  ],
+  "registryDependencies": [
+    "empty-state"
+  ],
+  "files": [
+    {
+      "path": "src/components/ErrorBoundary/ErrorBoundary.module.css",
+      "content": ".errorBoundary {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 400px;\n  padding: var(--dimension-space-400);\n  gap: var(--dimension-space-200);\n}\n\n.errorDetails {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--dimension-space-200);\n  max-width: 600px;\n  text-align: center;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ErrorBoundary/ErrorBoundary.tsx",
+      "content": "import React, { Component, ReactNode } from 'react';\nimport { EmptyState } from '@/components/EmptyState';\nimport { Text } from '@/components/Text';\nimport styles from './ErrorBoundary.module.css';\n\nexport interface ErrorBoundaryProps {\n  children: ReactNode;\n  fallback?: ReactNode;\n}\n\ninterface ErrorBoundaryState {\n  hasError: boolean;\n  error: Error | null;\n}\n\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error: Error): ErrorBoundaryState {\n    return { hasError: true, error };\n  }\n\n  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n    console.error('ErrorBoundary caught an error:', error, errorInfo);\n  }\n\n  handleReset = () => {\n    this.setState({ hasError: false, error: null });\n  };\n\n  override render() {\n    if (this.state.hasError) {\n      if (this.props.fallback) return this.props.fallback;\n      return (\n        <div className={styles.errorBoundary}>\n          <EmptyState type=\"no-content\" />\n          <div className={styles.errorDetails}>\n            <Text variant=\"text-body-small\" as=\"p\" color=\"secondary\">\n              Something went wrong. Please refresh the page.\n            </Text>\n          </div>\n        </div>\n      );\n    }\n    return this.props.children;\n  }\n}\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/fade.json ADDED Viewed

@@ -0,0 +1,65 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "fade",
+  "title": "Fade",
+  "description": "Decorative gradient overlay for scroll edges.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@compomo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/fade",
+    "consumption": {
+      "install": "npm install @compomo/ui @ds-mo/tokens",
+      "cssSetup": "Import tokens CSS at your app entry point: import '@ds-mo/tokens/css';\nThis provides all var(--color-*), var(--dimension-*), var(--effect-*), and var(--typography-*) custom properties.\nFor dark mode, set data-theme=\"dark\" on <html>.",
+      "import": "import { Fade } from '@compomo/ui';",
+      "cssImport": "import '@compomo/ui/css';",
+      "typeImport": "import type { FadeProps, FadeSide } from '@compomo/ui';",
+      "peerDependencies": {
+        "required": [
+          "react >=17",
+          "react-dom >=17",
+          "@ds-mo/tokens >=0.1.0"
+        ],
+        "optional": []
+      }
+    },
+    "props": {
+      "side": {
+        "type": "'top' | 'bottom' | 'left' | 'right'",
+        "required": true
+      },
+      "height": {
+        "type": "string",
+        "required": true
+      },
+      "background": {
+        "type": "string",
+        "default": "'var(--color-background-secondary)'"
+      }
+    },
+    "exports": [
+      "Fade"
+    ],
+    "types": [
+      "FadeProps",
+      "FadeSide"
+    ]
+  },
+  "dependencies": [
+    "@compomo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "path": "src/components/Fade/Fade.module.css",
+      "content": ".fade {\n  position: absolute;\n  pointer-events: none;\n  z-index: 10;\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fade { transition: none; }\n}\n\n.fadeTop {\n  top: 0; left: 0; right: 0;\n  background: linear-gradient(to bottom, var(--background) 0%, var(--background) 50%, transparent 100%);\n}\n\n.fadeBottom {\n  bottom: 0; left: 0; right: 0;\n  background: linear-gradient(to top, var(--background) 0%, transparent 100%);\n}\n\n.fadeLeft {\n  top: 0; bottom: 0; left: 0;\n  background: linear-gradient(to right, var(--background) 0%, transparent 100%);\n}\n\n.fadeRight {\n  top: 0; bottom: 0; right: 0;\n  background: linear-gradient(to left, var(--background) 0%, transparent 100%);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/Fade/Fade.tsx",
+      "content": "import React, { forwardRef } from 'react';\nimport { cn } from '@/utils/cn';\nimport styles from './Fade.module.css';\n\nexport type FadeSide = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface FadeProps {\n  side: FadeSide;\n  height: string;\n  background?: string;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nconst sideClassMap: Record<FadeSide, string> = {\n  top: 'fadeTop',\n  bottom: 'fadeBottom',\n  left: 'fadeLeft',\n  right: 'fadeRight',\n};\n\nexport const Fade = forwardRef<HTMLDivElement, FadeProps>(\n  ({ side, height, background = 'var(--color-background-secondary)', className, style = {} }, ref) => (\n    <div\n      ref={ref}\n      className={cn(styles.fade, styles[sideClassMap[side]], className)}\n      style={{ ...style, height, '--background': background } as React.CSSProperties}\n      aria-hidden=\"true\"\n    />\n  )\n);\n\nFade.displayName = 'Fade';\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/field.json ADDED Viewed

@@ -0,0 +1,71 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "field",
+  "title": "Field",
+  "description": "Simple label wrapper that links to child input via htmlFor.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@compomo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/field",
+    "consumption": {
+      "install": "npm install @compomo/ui @ds-mo/tokens",
+      "cssSetup": "Import tokens CSS at your app entry point: import '@ds-mo/tokens/css';\nThis provides all var(--color-*), var(--dimension-*), var(--effect-*), and var(--typography-*) custom properties.\nFor dark mode, set data-theme=\"dark\" on <html>.",
+      "import": "import { Field } from '@compomo/ui';",
+      "cssImport": "import '@compomo/ui/css';",
+      "typeImport": "import type { FieldProps } from '@compomo/ui';",
+      "internalDependencies": [
+        {
+          "component": "Text",
+          "note": "Used internally by Field. No action needed — it's bundled in @compomo/ui."
+        }
+      ],
+      "peerDependencies": {
+        "required": [
+          "react >=17",
+          "react-dom >=17",
+          "@ds-mo/tokens >=0.1.0"
+        ],
+        "optional": []
+      }
+    },
+    "props": {
+      "label": {
+        "type": "string",
+        "required": true
+      },
+      "children": {
+        "type": "React.ReactNode",
+        "required": true
+      },
+      "id": {
+        "type": "string"
+      }
+    },
+    "exports": [
+      "Field"
+    ],
+    "types": [
+      "FieldProps"
+    ]
+  },
+  "dependencies": [
+    "@compomo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "text"
+  ],
+  "files": [
+    {
+      "path": "src/components/Field/Field.module.css",
+      "content": ".field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/Field/Field.tsx",
+      "content": "import React, { forwardRef } from 'react';\nimport { cn } from '@/utils/cn';\nimport { Text } from '@/components/Text';\nimport styles from './Field.module.css';\n\nexport interface FieldProps {\n  label: string;\n  children: React.ReactNode;\n  id?: string;\n  className?: string;\n}\n\nexport const Field = forwardRef<HTMLDivElement, FieldProps>(\n  ({ label, children, id, className }, ref) => (\n    <div ref={ref} className={cn(styles.field, className)}>\n      <Text variant=\"text-body-small-emphasis\" as=\"label\" htmlFor={id}>{label}</Text>\n      {children}\n    </div>\n  )\n);\n\nField.displayName = 'Field';\n",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/header.json ADDED Viewed

@@ -0,0 +1,67 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "header",
+  "title": "Header",
+  "description": "App header bar with background variants.",
+  "type": "registry:ui",
+  "meta": {
+    "library": "@compomo/ui",
+    "distribution": "npm",
+    "storybook": "https://zainadeel.github.io/CompoMo/?path=/story/header",
+    "consumption": {
+      "install": "npm install @compomo/ui @ds-mo/tokens",
+      "cssSetup": "Import tokens CSS at your app entry point: import '@ds-mo/tokens/css';\nThis provides all var(--color-*), var(--dimension-*), var(--effect-*), and var(--typography-*) custom properties.\nFor dark mode, set data-theme=\"dark\" on <html>.",
+      "import": "import { Header } from '@compomo/ui';",
+      "cssImport": "import '@compomo/ui/css';",
+      "typeImport": "import type { HeaderProps, HeaderBackground } from '@compomo/ui';",
+      "internalDependencies": [
+        {
+          "component": "Surface",
+          "note": "Used internally by Header. No action needed — it's bundled in @compomo/ui."
+        }
+      ],
+      "peerDependencies": {
+        "required": [
+          "react >=17",
+          "react-dom >=17",
+          "@ds-mo/tokens >=0.1.0"
+        ],
+        "optional": []
+      }
+    },
+    "props": {
+      "children": {
+        "type": "React.ReactNode"
+      },
+      "background": {
+        "type": "HeaderBackground"
+      }
+    },
+    "exports": [
+      "Header"
+    ],
+    "types": [
+      "HeaderProps",
+      "HeaderBackground"
+    ]
+  },
+  "dependencies": [
+    "@compomo/ui",
+    "@ds-mo/tokens"
+  ],
+  "registryDependencies": [
+    "surface"
+  ],
+  "files": [
+    {
+      "path": "src/components/Header/Header.module.css",
+      "content": ".header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--dimension-size-600, 48px);\n  padding: 0 var(--dimension-space-100);\n  flex-shrink: 0;\n  gap: var(--dimension-space-100);\n}\n\n.left {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  flex: 1;\n  min-width: 0;\n}\n\n.right {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/Header/Header.tsx",
+      "content": "import React, { forwardRef } from 'react';\nimport { cn } from '@/utils/cn';\nimport { Surface } from '@/components/Surface';\nimport { Text } from '@/components/Text';\nimport styles from './Header.module.css';\n\nexport type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\nexport interface HeaderProps {\n  title?: string;\n  left?: React.ReactNode;\n  center?: React.ReactNode;\n  right?: React.ReactNode;\n  background?: HeaderBackground;\n  className?: string;\n}\n\nexport const Header = forwardRef<HTMLElement, HeaderProps>(\n  ({ title, left, center, right, background = 'secondary', className }, ref) => (\n    <Surface\n      ref={ref}\n      as=\"header\"\n      background={background}\n      elevation=\"none\"\n      edge=\"bottom\"\n      className={cn(styles.header, className)}\n    >\n      <div className={styles.left}>\n        {left}\n        {title && !center && (\n          <Text variant=\"text-title-small\" as=\"h1\" lineTruncation={1}>\n            {title}\n          </Text>\n        )}\n      </div>\n      {center && <div className={styles.center}>{center}</div>}\n      <div className={styles.right}>{right}</div>\n    </Surface>\n  )\n);\n\nHeader.displayName = 'Header';\n",
+      "type": "registry:ui"
+    }
+  ]
+}