@kb-labs/studio-ui-kit 0.2.0

package/README.md

@@ -0,0 +1,270 @@
+# @kb-labs/studio-ui-kit
+
+Professional React UI components using Ant Design and design tokens from `@kb-labs/studio-ui-core`.
+
+## 🎯 Key Principles
+
+- ✅ **NO hardcoded colors** - All colors from Ant Design tokens via `theme.useToken()`
+- ✅ **NO inline styles** - All spacing/typography from design tokens
+- ✅ **Type-safe** - Full TypeScript support
+- ✅ **Composable** - Build complex components from primitives
+
+## 📦 Installation
+
+```bash
+pnpm add @kb-labs/studio-ui-kit
+```
+
+## 🚀 Usage
+
+```tsx
+import { UIText, UIBox, UIFlex, UIMetricCard, UIBadge } from '@kb-labs/studio-ui-kit';
+
+function MyComponent() {
+  return (
+    <UIBox p={4}>
+      <UIText size="2xl" weight="bold">Hello World</UIText>
+
+      <UIFlex gap={2} align="center">
+        <UIBadge variant="success">Active</UIBadge>
+        <UIText size="sm" color="secondary">User is online</UIText>
+      </UIFlex>
+
+      <UIMetricCard
+        label="Active Users"
+        value={1234}
+        trend="up"
+        delta={15.3}
+        unit="users"
+      />
+    </UIBox>
+  );
+}
+```
+
+<!-- AUTO-GENERATED:START -->
+
+## 📊 Component Stats
+
+- **Total Components:** 51
+- **With Tests:** 4/51 (8%)
+
+**By Category:**
+
+- Primitives: 4
+- Core: 8
+- Layout: 4
+- Form: 10
+- Navigation: 7
+- Composite: 4
+- Feedback: 6
+- Overlay: 5
+- Content: 3
+
+## 📚 Component Reference
+
+### Primitives
+
+Foundation components for layout and typography
+
+| Component | Description | Tests |
+|-----------|-------------|-------|
+| **UIBox** | Box component - Layout primitive with spacing tokens | ❌ |
+| **UIFlex** | Flex component - Flexbox layout primitive | ❌ |
+| **UIText** | Text component - Typography primitive with design tokens | ✅ |
+| **UITypography** | UITypography components - Rich text display | ❌ |
+
+### Core
+
+Essential UI components
+
+| Component | Description | Tests |
+|-----------|-------------|-------|
+| **UIAvatar** | UIAvatar component - User avatar | ❌ |
+| **UIBadge** | Badge component - Status indicator with semantic colors | ❌ |
+| **UIButton** | UIButton component - Action button with semantic variants | ✅ |
+| **UICard** | UICard component - Card container with header/footer | ❌ |
+| **UIIcon** | UIIcon component - Icon wrapper with proper theming | ❌ |
+| **UIShimmerText** | UIShimmerText - Animated gradient shimmer on text | ❌ |
+| **UITag** | UITag component - Label/category tag with semantic colors | ❌ |
+| **UITitle** | UITitle component - Page/section titles with hierarchy | ❌ |
+
+### Layout
+
+Layout and container components
+
+| Component | Description | Tests |
+|-----------|-------------|-------|
+| **UIDivider** | UIDivider component - Visual separator | ❌ |
+| **UIGrid** | UIRow / UICol components - Grid layout | ❌ |
+| **UISpace** | UISpace component - Spacing container | ❌ |
+| **UIStack** | UIStack component - Vertical/horizontal spacing layout | ❌ |
+
+### Form
+
+Form controls and inputs
+
+| Component | Description | Tests |
+|-----------|-------------|-------|
+| **UICheckbox** | UICheckbox component - Checkbox input | ❌ |
+| **UIDatePicker** | UIDatePicker component - Date/time picker | ❌ |
+| **UIForm** | UIForm component - Form wrapper with validation | ❌ |
+| **UIInput** | UIInput component - Text input with variants | ✅ |
+| **UIInputNumber** | UIInputNumber component - Numeric input | ❌ |
+| **UIRadio** | UIRadio component - Radio button | ❌ |
+| **UISelect** | UISelect component - Dropdown select with icon support | ❌ |
+| **UISlider** | UISlider component - Slider input | ❌ |
+| **UISwitch** | UISwitch component - Toggle switch | ❌ |
+| **UIUpload** | UIUpload component - File upload | ❌ |
+
+### Navigation
+
+Navigation and menu components
+
+| Component | Description | Tests |
+|-----------|-------------|-------|
+| **UIAccordion** | UIAccordion component - Collapsible panels | ❌ |
+| **UIBreadcrumb** | UIBreadcrumb component - Navigation breadcrumb trail | ❌ |
+| **UIDropdown** | UIDropdown component - Dropdown menu | ❌ |
+| **UIMenu** | UIMenu component - Navigation menu | ❌ |
+| **UISegmented** | UISegmented component - Segmented control | ❌ |
+| **UISteps** | UISteps component - Step indicator | ❌ |
+| **UITabs** | UITabs component - Tabbed navigation | ❌ |
+
+### Composite
+
+Complex composed components
+
+| Component | Description | Tests |
+|-----------|-------------|-------|
+| **UIHeader** | UIHeader component - Page header with title, subtitle, and breadcrumbs | ✅ |
+| **UIPage** | UIPage component - Page container with padding and max-width | ❌ |
+| **UIPageHeader** | UIPageHeader component - Standard page header | ❌ |
+| **UIPageSection** | UIPageSection component - Section within a page | ❌ |
+
+### Feedback
+
+Feedback and notification components
+
+| Component | Description | Tests |
+|-----------|-------------|-------|
+| **UIAlert** | UIAlert component - Alert messages and notifications | ❌ |
+| **UIEmptyState** | UIEmptyState component - Empty state placeholder | ❌ |
+| **UIErrorState** | UIErrorState component - Error state display | ❌ |
+| **UIResult** | UIResult component - Result page | ❌ |
+| **UISkeleton** | UISkeleton component - Loading skeleton | ❌ |
+| **UISpin** | UISpin component - Loading spinner | ❌ |
+
+### Overlay
+
+Modal and overlay components
+
+| Component | Description | Tests |
+|-----------|-------------|-------|
+| **UIDrawer** | UIDrawer component - Side panel overlay | ❌ |
+| **UIModal** | UIModal component - Modal dialog | ❌ |
+| **UIPopconfirm** | UIPopconfirm component - Confirmation popover | ❌ |
+| **UIPopover** | UIPopover component - Popover overlay | ❌ |
+| **UITooltip** | UITooltip component - Tooltip overlay | ❌ |
+
+### Content
+
+Content display components
+
+| Component | Description | Tests |
+|-----------|-------------|-------|
+| **UIDiffViewer** | UIDiffViewer | ❌ |
+| **UIJsonViewer** | UIJsonViewer component - JSON content viewer | ❌ |
+| **UIMarkdownViewer** | UIMarkdownViewer component - Markdown content viewer | ❌ |
+
+<!-- AUTO-GENERATED:END -->
+
+## 🎨 Design Tokens
+
+All components use design tokens from `@kb-labs/studio-ui-core`:
+
+### Typography
+```tsx
+<UIText size="xs">Extra small text</UIText>
+<UIText size="sm">Small text</UIText>
+<UIText size="base">Base text</UIText>
+<UIText size="lg">Large text</UIText>
+<UIText size="xl">Extra large text</UIText>
+<UIText size="2xl">2X large text</UIText>
+```
+
+### Colors
+```tsx
+<UIText color="primary">Primary text</UIText>
+<UIText color="secondary">Secondary text</UIText>
+<UIText color="success">Success text</UIText>
+<UIText color="warning">Warning text</UIText>
+<UIText color="error">Error text</UIText>
+<UIText color="info">Info text</UIText>
+```
+
+### Spacing
+```tsx
+<UIBox p={2}>Padding 0.5rem</UIBox>
+<UIBox p={4}>Padding 1rem</UIBox>
+<UIBox p={6}>Padding 1.5rem</UIBox>
+<UIBox m={2}>Margin 0.5rem</UIBox>
+```
+
+## 🏗️ Component Hierarchy
+
+```
+Primitives (Tier 1)
+  ├── UIText - Typography
+  ├── UIBox - Spacing
+  └── UIFlex - Layout
+
+Components (Tier 2)
+  ├── UIBadge - Status indicators
+  └── UIMetricCard - Metric displays
+```
+
+## 📖 Examples
+
+### Metric Display
+```tsx
+<UIMetricCard
+  label="Revenue"
+  value={45230}
+  unit="USD"
+  trend="up"
+  delta={12.5}
+  showDelta={true}
+  size="default"
+/>
+```
+
+### Badge Variants
+```tsx
+<UIBadge variant="success">Success</UIBadge>
+<UIBadge variant="warning">Warning</UIBadge>
+<UIBadge variant="error">Error</UIBadge>
+<UIBadge variant="info">Info</UIBadge>
+<UIBadge variant="default">Default</UIBadge>
+```
+
+### Layout Composition
+```tsx
+<UIBox p={4} mb={3}>
+  <UIFlex direction="column" gap={2}>
+    <UIText size="lg" weight="bold">Header</UIText>
+    <UIText size="sm" color="secondary">Description</UIText>
+  </UIFlex>
+</UIBox>
+```
+
+## 🔗 Dependencies
+
+- `react` (peer) - ^18.3.1
+- `react-dom` (peer) - ^18.3.1
+- `antd` (peer) - ^5.22.5
+- `@kb-labs/studio-ui-core` - Design tokens
+
+## 📝 License
+
+Private - KB Labs

package/dist/index.css

@@ -0,0 +1,169 @@
+/* src/core/UIButton.module.css */
+.uiButton {
+}
+.uiButton svg {
+  color: inherit !important;
+  stroke: currentColor !important;
+  fill: currentColor !important;
+}
+.uiButton:disabled svg,
+.uiButton.ant-btn-disabled svg {
+  opacity: 0.4;
+}
+.uiButton.ant-btn-sm svg {
+  width: 14px;
+  height: 14px;
+}
+.uiButton svg {
+  width: 16px;
+  height: 16px;
+}
+.uiButton.ant-btn-lg svg {
+  width: 18px;
+  height: 18px;
+}
+.uiButton .ant-btn-icon {
+  color: inherit !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.uiButton .ant-btn-icon svg {
+  vertical-align: middle;
+  display: block;
+}
+.uiButton.ant-btn-primary {
+  transition: transform 150ms ease, box-shadow 150ms ease;
+}
+.uiButton.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);
+}
+.uiButton.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {
+  transform: translateY(0);
+}
+[dir=rtl] .uiButton .ant-btn-icon {
+  transform: scaleX(-1);
+}
+
+/* src/core/UIIcon.module.css */
+.uiIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+}
+.uiIcon svg {
+  color: currentColor;
+  stroke: currentColor;
+  fill: none;
+  display: block;
+}
+.uiIcon .anticon {
+  color: currentColor;
+}
+.uiIcon.clickable {
+  cursor: pointer;
+  transition: opacity 0.2s ease, transform 0.1s ease;
+}
+.uiIcon.clickable:hover {
+  opacity: 0.8;
+}
+.uiIcon.clickable:active {
+  transform: scale(0.95);
+}
+.uiIcon.size-xs {
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+}
+.uiIcon.size-sm {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+}
+.uiIcon.size-base {
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+.uiIcon.size-lg {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+.uiIcon.size-xl {
+  font-size: 24px;
+  width: 24px;
+  height: 24px;
+}
+.uiIcon.size-2xl {
+  font-size: 32px;
+  width: 32px;
+  height: 32px;
+}
+.uiIcon.color-primary {
+  color: var(--link, #2563EB);
+}
+.uiIcon.color-secondary {
+  color: var(--text-secondary, #6B7280);
+}
+.uiIcon.color-success {
+  color: var(--success, #16A34A);
+}
+.uiIcon.color-warning {
+  color: var(--warning, #F59E0B);
+}
+.uiIcon.color-error {
+  color: var(--error, #DC2626);
+}
+.uiIcon.color-info {
+  color: var(--info, #0EA5E9);
+}
+.uiIcon.color-inherit {
+  color: inherit;
+}
+.uiIcon.spin {
+  animation: uiIconSpin 1s linear infinite;
+}
+@keyframes uiIconSpin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.uiIcon.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* src/core/UIShimmerText.module.css */
+.shimmer {
+  background:
+    linear-gradient(
+      90deg,
+      var(--shimmer-color-1, #888) 0%,
+      var(--shimmer-color-2, #888) 25%,
+      var(--shimmer-highlight, #fff) 50%,
+      var(--shimmer-color-2, #888) 75%,
+      var(--shimmer-color-1, #888) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  animation: shimmerMove var(--shimmer-duration, 2s) linear infinite;
+  display: inline-block;
+}
+@keyframes shimmerMove {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/core/UIButton.module.css","../src/core/UIIcon.module.css","../src/core/UIShimmerText.module.css"],"sourcesContent":["/**\n * UIButton styles - Proper SVG icon theming\n *\n * This ensures all SVG icons (lucide-react, etc.) inherit colors from CSS variables\n * and work correctly in both light and dark themes.\n */\n\n.uiButton {\n  /* Button inherits theme colors from Ant Design tokens */\n}\n\n/*\n * CRITICAL: SVG icon color inheritance\n *\n * Force all SVG icons to inherit button text color automatically\n * Works for lucide-react, heroicons, and any other icon libraries\n */\n.uiButton svg {\n  color: inherit !important;\n  stroke: currentColor !important;\n  fill: currentColor !important;\n}\n\n/*\n * Disabled state - reduce opacity\n */\n.uiButton:disabled svg,\n.uiButton.ant-btn-disabled svg {\n  opacity: 0.4;\n}\n\n/*\n * Size variants - ensure SVG scales properly\n */\n.uiButton.ant-btn-sm svg {\n  /* Small button icons */\n  width: 14px;\n  height: 14px;\n}\n\n.uiButton svg {\n  /* Default (middle) button icons */\n  width: 16px;\n  height: 16px;\n}\n\n.uiButton.ant-btn-lg svg {\n  /* Large button icons */\n  width: 18px;\n  height: 18px;\n}\n\n/*\n * Icon positioning within button\n * Ensures proper spacing between icon and text\n */\n.uiButton .ant-btn-icon {\n  /* Icon wrapper - CRITICAL: must inherit color for SVG to get correct color */\n  color: inherit !important;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.uiButton .ant-btn-icon svg {\n  /* SVG inside icon wrapper */\n  vertical-align: middle;\n  display: block; /* Remove inline spacing */\n}\n\n/*\n * Primary button — subtle lift effect\n */\n.uiButton.ant-btn-primary {\n  transition: transform 150ms ease, box-shadow 150ms ease;\n}\n\n.uiButton.ant-btn-primary:hover:not(:disabled):not(.ant-btn-disabled) {\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(12, 102, 255, 0.3);\n}\n\n.uiButton.ant-btn-primary:active:not(:disabled):not(.ant-btn-disabled) {\n  transform: translateY(0);\n}\n\n/*\n * RTL (Right-to-Left) support\n */\n[dir='rtl'] .uiButton .ant-btn-icon {\n  /* Mirror icon position in RTL */\n  transform: scaleX(-1);\n}\n","/**\n * UIIcon styles - Proper SVG and icon font theming\n *\n * Ensures all icons (Ant Design icons, lucide-react, custom SVG)\n * inherit colors from CSS variables and work in both light and dark themes.\n */\n\n.uiIcon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n}\n\n/*\n * SVG icons (lucide-react, custom SVG)\n * Use currentColor to inherit from parent color\n */\n.uiIcon svg {\n  color: currentColor;\n  stroke: currentColor;\n  fill: none; /* Most icon libraries use stroke, not fill */\n  display: block; /* Remove inline spacing */\n}\n\n/*\n * Ant Design icons (icon fonts)\n * Already use currentColor by default, but ensure it's explicit\n */\n.uiIcon .anticon {\n  color: currentColor;\n}\n\n/*\n * Clickable icons (icon buttons)\n */\n.uiIcon.clickable {\n  cursor: pointer;\n  transition: opacity 0.2s ease, transform 0.1s ease;\n}\n\n.uiIcon.clickable:hover {\n  opacity: 0.8;\n}\n\n.uiIcon.clickable:active {\n  transform: scale(0.95);\n}\n\n/*\n * Size variants\n */\n.uiIcon.size-xs {\n  font-size: 12px;\n  width: 12px;\n  height: 12px;\n}\n\n.uiIcon.size-sm {\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n}\n\n.uiIcon.size-base {\n  font-size: 16px;\n  width: 16px;\n  height: 16px;\n}\n\n.uiIcon.size-lg {\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n}\n\n.uiIcon.size-xl {\n  font-size: 24px;\n  width: 24px;\n  height: 24px;\n}\n\n.uiIcon.size-2xl {\n  font-size: 32px;\n  width: 32px;\n  height: 32px;\n}\n\n/*\n * Color variants using CSS variables\n */\n.uiIcon.color-primary {\n  color: var(--link, #2563EB);\n}\n\n.uiIcon.color-secondary {\n  color: var(--text-secondary, #6B7280);\n}\n\n.uiIcon.color-success {\n  color: var(--success, #16A34A);\n}\n\n.uiIcon.color-warning {\n  color: var(--warning, #F59E0B);\n}\n\n.uiIcon.color-error {\n  color: var(--error, #DC2626);\n}\n\n.uiIcon.color-info {\n  color: var(--info, #0EA5E9);\n}\n\n.uiIcon.color-inherit {\n  color: inherit;\n}\n\n/*\n * Spin animation\n */\n.uiIcon.spin {\n  animation: uiIconSpin 1s linear infinite;\n}\n\n@keyframes uiIconSpin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/*\n * Disabled state\n */\n.uiIcon.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n","/**\n * UIShimmerText - Animated gradient shimmer on text\n * Classic \"Cursor / ClickUp\" loading text effect.\n */\n\n.shimmer {\n  background: linear-gradient(\n    90deg,\n    var(--shimmer-color-1, #888) 0%,\n    var(--shimmer-color-2, #888) 25%,\n    var(--shimmer-highlight, #fff) 50%,\n    var(--shimmer-color-2, #888) 75%,\n    var(--shimmer-color-1, #888) 100%\n  );\n  background-size: 200% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  color: transparent;\n  animation: shimmerMove var(--shimmer-duration, 2s) linear infinite;\n  display: inline-block;\n}\n\n@keyframes shimmerMove {\n  0%   { background-position: 100% 0; }\n  100% { background-position: -100% 0; }\n}\n"],"mappings":"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","names":[]}