@kb-labs/studio-ui-kit 2.94.0 → 2.98.0

package/README.md

@@ -46,13 +46,13 @@ function MyComponent() {
 
 ## 📊 Component Stats
 
-- **Total Components:** 51
-- **With Tests:** 4/51 (8%)
+- **Total Components:** 52
+- **With Tests:** 4/52 (8%)
 
 **By Category:**
 
 - Primitives: 4
-- Core: 8
+- Core: 9
 - Layout: 4
 - Form: 10
 - Navigation: 7
@@ -84,6 +84,7 @@ Essential UI components
 | **UIBadge** | Badge component - Status indicator with semantic colors | ❌ |
 | **UIButton** | UIButton component - Action button with semantic variants | ✅ |
 | **UICard** | UICard component - Card container with header/footer | ❌ |
+| **UICopyButton** | UICopyButton — one-click copy with built-in visual feedback. | ❌ |
 | **UIIcon** | UIIcon component - Icon wrapper with proper theming | ❌ |
 | **UIShimmerText** | UIShimmerText - Animated gradient shimmer on text | ❌ |
 | **UITag** | UITag component - Label/category tag with semantic colors | ❌ |
@@ -175,7 +176,7 @@ Content display components
 |-----------|-------------|-------|
 | **UIDiffViewer** | UIDiffViewer | ❌ |
 | **UIJsonViewer** | UIJsonViewer component - JSON content viewer | ❌ |
-| **UIMarkdownViewer** | UIMarkdownViewer component - Markdown content viewer | ❌ |
+| **UIMarkdownViewer** | UIMarkdownViewer | ❌ |
 
 <!-- AUTO-GENERATED:END -->
 

package/dist/index.css

@@ -32,6 +32,16 @@
   vertical-align: middle;
   display: block;
 }
+.uiButton {
+  transition:
+    transform 100ms ease,
+    box-shadow 150ms ease,
+    opacity 100ms ease;
+}
+.uiButton:active:not(:disabled):not(.ant-btn-disabled) {
+  transform: scale(0.96);
+  transition: transform 60ms ease;
+}
 .uiButton.ant-btn-primary {
   transition: transform 150ms ease, box-shadow 150ms ease;
 }
@@ -40,12 +50,33 @@
   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);
+  transform: scale(0.97);
+  box-shadow: none;
+  transition: transform 60ms ease;
+}
+.uiButton.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),
+.uiButton.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {
+  opacity: 0.75;
+}
+.uiButton.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),
+.uiButton.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {
+  background: rgba(0, 0, 0, 0.06) !important;
+  transform: scale(0.95);
 }
 [dir=rtl] .uiButton .ant-btn-icon {
   transform: scaleX(-1);
 }
 
+/* src/core/UITag.module.css */
+.kb-ui-tag {
+  transition: opacity 100ms ease, transform 100ms ease;
+}
+.kb-ui-tag:not([disabled]):active {
+  opacity: 0.7;
+  transform: scale(0.94);
+  transition: opacity 50ms ease, transform 50ms ease;
+}
+
 /* src/core/UIIcon.module.css */
 .uiIcon {
   display: inline-flex;
@@ -166,4 +197,17 @@
     background-position: -100% 0;
   }
 }
+
+/* src/feedback/UISkeleton.module.css */
+@keyframes skeletonLoading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.skeletonText {
+  animation: skeletonLoading 1.4s ease infinite;
+}
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +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":[]}
+{"version":3,"sources":["../src/core/UIButton.module.css","../src/core/UITag.module.css","../src/core/UIIcon.module.css","../src/core/UIShimmerText.module.css","../src/feedback/UISkeleton.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 * All buttons — base transition and press feedback\n */\n.uiButton {\n  transition: transform 100ms ease, box-shadow 150ms ease, opacity 100ms ease;\n}\n\n.uiButton:active:not(:disabled):not(.ant-btn-disabled) {\n  transform: scale(0.96);\n  transition: transform 60ms ease;\n}\n\n/*\n * Primary button — subtle lift on hover, snap back on press\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: scale(0.97);\n  box-shadow: none;\n  transition: transform 60ms ease;\n}\n\n/*\n * Default / dashed — dim on press\n */\n.uiButton.ant-btn-default:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-dashed:active:not(:disabled):not(.ant-btn-disabled) {\n  opacity: 0.75;\n}\n\n/*\n * Text / link — background flash on press for clear tactile signal\n */\n.uiButton.ant-btn-text:active:not(:disabled):not(.ant-btn-disabled),\n.uiButton.ant-btn-link:active:not(:disabled):not(.ant-btn-disabled) {\n  background: rgba(0, 0, 0, 0.06) !important;\n  transform: scale(0.95);\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 * UITag styles — interactive feedback for clickable tags\n *\n * Class name is hardcoded ('kb-ui-tag') because tsup doesn't map\n * CSS module class names in the dist bundle — styles.className is always {}.\n */\n\n.kb-ui-tag {\n  transition: opacity 100ms ease, transform 100ms ease;\n}\n\n.kb-ui-tag:not([disabled]):active {\n  opacity: 0.7;\n  transform: scale(0.94);\n  transition: opacity 50ms ease, transform 50ms ease;\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","@keyframes skeletonLoading {\n  0%   { background-position: 100% 50%; }\n  100% { background-position: 0%   50%; }\n}\n\n.skeletonText {\n  animation: skeletonLoading 1.4s ease infinite;\n}\n"],"mappings":";AAOA,CAAC;AAED;AAQA,CAVC,SAUS;AACR,SAAO;AACP,UAAQ;AACR,QAAM;AACR;AAKA,CAnBC,QAmBQ,UAAU;AACnB,CApBC,QAoBQ,CAAC,iBAAiB;AACzB,WAAS;AACX;AAKA,CA3BC,QA2BQ,CAAC,WAAW;AAEnB,SAAO;AACP,UAAQ;AACV;AAEA,CAjCC,SAiCS;AAER,SAAO;AACP,UAAQ;AACV;AAEA,CAvCC,QAuCQ,CAAC,WAAW;AAEnB,SAAO;AACP,UAAQ;AACV;AAMA,CAjDC,SAiDS,CAAC;AAET,SAAO;AACP,WAAS;AACT,eAAa;AACb,mBAAiB;AACnB;AAEA,CAzDC,SAyDS,CARC,aAQa;AAEtB,kBAAgB;AAChB,WAAS;AACX;AAKA,CAlEC;AAmEC;AAAA,IAAY,UAAU,MAAM,IAAI;AAAA,IAAE,WAAW,MAAM,IAAI;AAAA,IAAE,QAAQ,MAAM;AACzE;AAEA,CAtEC,QAsEQ,OAAO,KAAK,UAAU,KAAK,CAlD1B;AAmDR,aAAW,MAAM;AACjB,cAAY,UAAU,KAAK;AAC7B;AAKA,CA9EC,QA8EQ,CAAC;AACR,cAAY,UAAU,MAAM,IAAI,EAAE,WAAW,MAAM;AACrD;AAEA,CAlFC,QAkFQ,CAJC,eAIe,MAAM,KAAK,UAAU,KAAK,CA9DzC;AA+DR,aAAW,WAAW;AACtB,cAAY,EAAE,IAAI,KAAK,KAAK,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;AAC5C;AAEA,CAvFC,QAuFQ,CATC,eASe,OAAO,KAAK,UAAU,KAAK,CAnE1C;AAoER,aAAW,MAAM;AACjB,cAAY;AACZ,cAAY,UAAU,KAAK;AAC7B;AAKA,CAhGC,QAgGQ,CAAC,eAAe,OAAO,KAAK,UAAU,KAAK,CA5E1C;AA6EV,CAjGC,QAiGQ,CAAC,cAAc,OAAO,KAAK,UAAU,KAAK,CA7EzC;AA8ER,WAAS;AACX;AAKA,CAxGC,QAwGQ,CAAC,YAAY,OAAO,KAAK,UAAU,KAAK,CApFvC;AAqFV,CAzGC,QAyGQ,CAAC,YAAY,OAAO,KAAK,UAAU,KAAK,CArFvC;AAsFR,cAAY,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAC1B,aAAW,MAAM;AACnB;AAKA,CAAC,SAAW,CAjHX,SAiHqB,CAhEX;AAkET,aAAW,OAAO;AACpB;;;ACpHA,CAAC;AACC,cAAY,QAAQ,MAAM,IAAI,EAAE,UAAU,MAAM;AAClD;AAEA,CAJC,SAIS,KAAK,CAAC,UAAU;AACxB,WAAS;AACT,aAAW,MAAM;AACjB,cAAY,QAAQ,KAAK,IAAI,EAAE,UAAU,KAAK;AAChD;;;ACRA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,kBAAgB;AAClB;AAMA,CAXC,OAWO;AACN,SAAO;AACP,UAAQ;AACR,QAAM;AACN,WAAS;AACX;AAMA,CAtBC,OAsBO,CAAC;AACP,SAAO;AACT;AAKA,CA7BC,MA6BM,CAAC;AACN,UAAQ;AACR,cAAY,QAAQ,KAAK,IAAI,EAAE,UAAU,KAAK;AAChD;AAEA,CAlCC,MAkCM,CALC,SAKS;AACf,WAAS;AACX;AAEA,CAtCC,MAsCM,CATC,SASS;AACf,aAAW,MAAM;AACnB;AAKA,CA7CC,MA6CM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CAnDC,MAmDM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CAzDC,MAyDM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CA/DC,MA+DM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CArEC,MAqEM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAEA,CA3EC,MA2EM,CAAC;AACN,aAAW;AACX,SAAO;AACP,UAAQ;AACV;AAKA,CApFC,MAoFM,CAAC;AACN,SAAO,IAAI,MAAM,EAAE;AACrB;AAEA,CAxFC,MAwFM,CAAC;AACN,SAAO,IAAI,gBAAgB,EAAE;AAC/B;AAEA,CA5FC,MA4FM,CAAC;AACN,SAAO,IAAI,SAAS,EAAE;AACxB;AAEA,CAhGC,MAgGM,CAAC;AACN,SAAO,IAAI,SAAS,EAAE;AACxB;AAEA,CApGC,MAoGM,CAAC;AACN,SAAO,IAAI,OAAO,EAAE;AACtB;AAEA,CAxGC,MAwGM,CAAC;AACN,SAAO,IAAI,MAAM,EAAE;AACrB;AAEA,CA5GC,MA4GM,CAAC;AACN,SAAO;AACT;AAKA,CAnHC,MAmHM,CAAC;AACN,aAAW,WAAW,GAAG,OAAO;AAClC;AAEA,WAHa;AAIX;AACE,eAAW,OAAO;AACpB;AACA;AACE,eAAW,OAAO;AACpB;AACF;AAKA,CAnIC,MAmIM,CAAC;AACN,WAAS;AACT,UAAQ;AACR,kBAAgB;AAClB;;;ACzIA,CAAC;AACC;AAAA,IAAY;AAAA,MACV,KAAK;AAAA,MACL,IAAI,iBAAiB,EAAE,MAAM,EAAE;AAAA,MAC/B,IAAI,iBAAiB,EAAE,MAAM,GAAG;AAAA,MAChC,IAAI,mBAAmB,EAAE,MAAM,GAAG;AAAA,MAClC,IAAI,iBAAiB,EAAE,MAAM,GAAG;AAAA,MAChC,IAAI,iBAAiB,EAAE,MAAM;AAE/B,mBAAiB,KAAK;AACtB,2BAAyB;AACzB,mBAAiB;AACjB,2BAAyB;AACzB,SAAO;AACP,aAAW,YAAY,IAAI,kBAAkB,EAAE,IAAI,OAAO;AAC1D,WAAS;AACX;AAEA,WAJa;AAKX;AAAO,yBAAqB,KAAK;AAAG;AACpC;AAAO,yBAAqB,MAAM;AAAG;AACvC;;;AC1BA,WAAW;AACT;AAAO,yBAAqB,KAAK;AAAK;AACtC;AAAO,yBAAqB,GAAK;AAAK;AACxC;AAEA,CAAC;AACC,aAAW,gBAAgB,KAAK,KAAK;AACvC;","names":[]}

package/dist/index.d.ts

@@ -303,7 +303,7 @@ interface UITagProps extends Omit<TagProps, 'color'> {
  * <UITag variant="info" icon={<InfoIcon />}>Info</UITag>
  * ```
  */
-declare function UITag({ variant, color, children, closable, onClose, icon, ...rest }: UITagProps): react_jsx_runtime.JSX.Element;
+declare function UITag({ variant, color, children, closable, onClose, icon, className, onClick, ...rest }: UITagProps): react_jsx_runtime.JSX.Element;
 
 type UITitleLevel = 1 | 2 | 3 | 4 | 5;
 interface UITitleProps {
@@ -458,20 +458,28 @@ interface UIShimmerTextProps {
  */
 declare function UIShimmerText({ children, color, highlight, duration, className, style, }: UIShimmerTextProps): react_jsx_runtime.JSX.Element;
 
-/**
- * MetricCard component - Display metric with trend
- *
- * Professional UI component using design tokens.
- * NO inline styles, NO hardcoded colors.
- */
+interface UICopyButtonProps extends Omit<UIButtonProps, 'onClick' | 'icon' | 'children' | 'variant'> {
+    /** Text to copy */
+    value: string;
+    /** Button size */
+    size?: 'small' | 'middle' | 'large';
+    /** Show label next to icon */
+    label?: string;
+}
+declare function UICopyButton({ value, size, label, style, ...rest }: UICopyButtonProps): react_jsx_runtime.JSX.Element;
+
 interface UIMetricCardProps {
     /** Metric label */
     label: string;
     /** Metric value */
     value: string | number;
+    /** Icon shown in colored badge */
+    icon?: React$1.ReactNode;
+    /** Color theme for the icon badge */
+    status?: 'default' | 'info' | 'success' | 'warning' | 'error';
     /** Trend direction */
     trend?: 'up' | 'down' | 'neutral';
-    /** Change delta (percentage or absolute) */
+    /** Change delta (percentage) */
     delta?: number;
     /** Value unit (e.g., '%', 'ms', '$') */
     unit?: string;
@@ -482,23 +490,7 @@ interface UIMetricCardProps {
     /** Loading state */
     loading?: boolean;
 }
-/**
- * MetricCard - Display single metric with optional trend indicator
- *
- * Uses Ant Design tokens for all colors.
- *
- * @example
- * ```tsx
- * <MetricCard
- *   label="Active Users"
- *   value={1234}
- *   trend="up"
- *   delta={15.3}
- *   unit="users"
- * />
- * ```
- */
-declare function UIMetricCard({ label, value, trend, delta, unit, size, showDelta, loading, }: UIMetricCardProps): react_jsx_runtime.JSX.Element;
+declare function UIMetricCard({ label, value, icon, status, trend, delta, unit, size, showDelta, loading, }: UIMetricCardProps): react_jsx_runtime.JSX.Element;
 
 interface UITableColumn<T = any> extends ColumnType<T> {
     /** Column key */
@@ -2116,31 +2108,11 @@ interface UIPopoverProps extends PopoverProps {
 declare function UIPopover(props: UIPopoverProps): react_jsx_runtime.JSX.Element;
 
 interface UIMarkdownViewerProps {
-    /** Markdown content */
     content: string;
-    /** Additional CSS class */
     className?: string;
-    /** Additional styles */
     style?: React$1.CSSProperties;
 }
-/**
- * UIMarkdownViewer - Markdown content viewer
- *
- * Note: This is a basic implementation. For production use, consider:
- * - react-markdown for full markdown parsing
- * - rehype-highlight for syntax highlighting
- * - rehype-sanitize for XSS protection
- *
- * @example
- * ```tsx
- * <UIMarkdownViewer content={markdownText} />
- *
- * <UIMarkdownViewer
- *   content="# Hello World\n\nThis is **bold** text"
- * />
- * ```
- */
-declare function UIMarkdownViewer({ content, className, style: customStyle, }: UIMarkdownViewerProps): react_jsx_runtime.JSX.Element;
+declare function UIMarkdownViewer({ content, className, style: customStyle }: UIMarkdownViewerProps): react_jsx_runtime.JSX.Element;
 
 interface UIJsonViewerProps {
     /** JSON data to display */
@@ -2247,4 +2219,4 @@ interface ListData {
     total?: number;
 }
 
-export { type ChartColorPalette, type ChartMetricConfig, type ListData, type ListItem, type MetricData, type SelectData, type SelectOptionItem, type TableData, type TableRow, UIAccordion, type UIAccordionItem, type UIAccordionProps, UIAlert, type UIAlertProps, type UIAlertVariant, UIAreaChart, type UIAreaChartProps, UIAvatar, UIAvatarGroup, type UIAvatarProps, UIBadge, type UIBadgeProps, type UIBadgeVariant, UIBarChart, type UIBarChartProps, UIBox, type UIBoxProps, type UIBoxSpacingValue, UIBreadcrumb, type UIBreadcrumbItem, type UIBreadcrumbProps, UIButton, type UIButtonProps, type UIButtonVariant, UICard, type UICardProps, type UICardVariant, UICheckbox, UICheckboxGroup, type UICheckboxGroupProps, type UICheckboxOption, type UICheckboxProps, UICol, type UIColProps, UIColumnChart, type UIColumnChartProps, UIDatePicker, type UIDatePickerProps, UIDescriptions, UIDescriptionsItem, type UIDescriptionsProps, UIDiffViewer, type UIDiffViewerProps, UIDivider, type UIDividerProps, UIDrawer, type UIDrawerProps, UIDropdown, UIDropdownButton, type UIDropdownProps, UIEmptyState, type UIEmptyStateProps, UIErrorState, type UIErrorStateProps, UIFlex, type UIFlexProps, type UIFlexSpacingValue, UIForm, UIFormItem, type UIFormLayout, UIFormList, type UIFormProps, UIHeader, type UIHeaderProps, UIIcon, UIIconButton, type UIIconColor, type UIIconProps, type UIIconSize, UIInput, UIInputNumber, type UIInputNumberProps, UIInputPassword, type UIInputProps, UIInputSearch, UIInputTextArea, UIJsonViewer, type UIJsonViewerProps, UILineChart, type UILineChartProps, UIList, UIListItem, UIListItemMeta, type UIListProps, UIMarkdownViewer, type UIMarkdownViewerProps, UIMenu, type UIMenuProps, UIMessage, type UIMessageAPI, UIMetricCard, type UIMetricCardProps, UIModal, UIModalConfirm, UIModalError, UIModalInfo, type UIModalProps, UIModalSuccess, UIModalWarning, type UIModalWidth, UINotification, type UINotificationAPI, type UINotificationArgs, UIPage, type UIPageBreadcrumbItem, UIPageHeader, type UIPageHeaderProps, type UIPageProps, UIPageSection, type UIPageSectionProps, type UIPageWidth, UIPieChart, type UIPieChartProps, UIPopconfirm, type UIPopconfirmProps, UIPopover, type UIPopoverProps, UIProgress, type UIProgressProps, UIRadio, UIRadioGroup, type UIRadioGroupProps, type UIRadioProps, UIRangePicker, UIResult, type UIResultProps, UIRow, type UIRowProps, UISegmented, type UISegmentedProps, UISelect, type UISelectOption, type UISelectProps, UIShimmerText, type UIShimmerTextProps, UISkeleton, UISkeletonButton, UISkeletonImage, UISkeletonInput, UISkeletonNode, type UISkeletonProps, UISkeletonText, type UISkeletonTextProps, UISlider, type UISliderProps, UISpace, UISpaceCompact, type UISpaceProps, UISpin, type UISpinProps, UIStack, type UIStackAlign, type UIStackDirection, type UIStackProps, type UIStackSpacing, UIStatistic, UIStatisticCountdown, type UIStatisticProps, UIStatisticsChart, type UIStatisticsChartProps, UISteps, type UIStepsProps, UISwitch, type UISwitchLabelPosition, type UISwitchProps, type UISwitchSize, type UITabItem, UITable, type UITableColumn, type UITableProps, UITabs, type UITabsProps, UITag, type UITagProps, type UITagVariant, UIText, type UITextColor, type UITextProps, type UITextSize, type UITextWeight, type UIThemeResult, UITimePicker, type UITimePickerProps, UITimeline, UITimelineItem, type UITimelineProps, UITitle, type UITitleLevel, type UITitleProps, UITooltip, type UITooltipPlacement, type UITooltipProps, UITree, UITreeDirectoryTree, UITreeNode, type UITreeProps, UITypographyLink, type UITypographyLinkProps, UITypographyParagraph, type UITypographyParagraphProps, UITypographyText, type UITypographyTextProps, UIUpload, UIUploadDragger, type UIUploadProps, createFillFunction, registerIconRenderer, useChartColors, useUIForm, useUIMessage, useUINotification, useUITheme };
+export { type ChartColorPalette, type ChartMetricConfig, type ListData, type ListItem, type MetricData, type SelectData, type SelectOptionItem, type TableData, type TableRow, UIAccordion, type UIAccordionItem, type UIAccordionProps, UIAlert, type UIAlertProps, type UIAlertVariant, UIAreaChart, type UIAreaChartProps, UIAvatar, UIAvatarGroup, type UIAvatarProps, UIBadge, type UIBadgeProps, type UIBadgeVariant, UIBarChart, type UIBarChartProps, UIBox, type UIBoxProps, type UIBoxSpacingValue, UIBreadcrumb, type UIBreadcrumbItem, type UIBreadcrumbProps, UIButton, type UIButtonProps, type UIButtonVariant, UICard, type UICardProps, type UICardVariant, UICheckbox, UICheckboxGroup, type UICheckboxGroupProps, type UICheckboxOption, type UICheckboxProps, UICol, type UIColProps, UIColumnChart, type UIColumnChartProps, UICopyButton, type UICopyButtonProps, UIDatePicker, type UIDatePickerProps, UIDescriptions, UIDescriptionsItem, type UIDescriptionsProps, UIDiffViewer, type UIDiffViewerProps, UIDivider, type UIDividerProps, UIDrawer, type UIDrawerProps, UIDropdown, UIDropdownButton, type UIDropdownProps, UIEmptyState, type UIEmptyStateProps, UIErrorState, type UIErrorStateProps, UIFlex, type UIFlexProps, type UIFlexSpacingValue, UIForm, UIFormItem, type UIFormLayout, UIFormList, type UIFormProps, UIHeader, type UIHeaderProps, UIIcon, UIIconButton, type UIIconColor, type UIIconProps, type UIIconSize, UIInput, UIInputNumber, type UIInputNumberProps, UIInputPassword, type UIInputProps, UIInputSearch, UIInputTextArea, UIJsonViewer, type UIJsonViewerProps, UILineChart, type UILineChartProps, UIList, UIListItem, UIListItemMeta, type UIListProps, UIMarkdownViewer, type UIMarkdownViewerProps, UIMenu, type UIMenuProps, UIMessage, type UIMessageAPI, UIMetricCard, type UIMetricCardProps, UIModal, UIModalConfirm, UIModalError, UIModalInfo, type UIModalProps, UIModalSuccess, UIModalWarning, type UIModalWidth, UINotification, type UINotificationAPI, type UINotificationArgs, UIPage, type UIPageBreadcrumbItem, UIPageHeader, type UIPageHeaderProps, type UIPageProps, UIPageSection, type UIPageSectionProps, type UIPageWidth, UIPieChart, type UIPieChartProps, UIPopconfirm, type UIPopconfirmProps, UIPopover, type UIPopoverProps, UIProgress, type UIProgressProps, UIRadio, UIRadioGroup, type UIRadioGroupProps, type UIRadioProps, UIRangePicker, UIResult, type UIResultProps, UIRow, type UIRowProps, UISegmented, type UISegmentedProps, UISelect, type UISelectOption, type UISelectProps, UIShimmerText, type UIShimmerTextProps, UISkeleton, UISkeletonButton, UISkeletonImage, UISkeletonInput, UISkeletonNode, type UISkeletonProps, UISkeletonText, type UISkeletonTextProps, UISlider, type UISliderProps, UISpace, UISpaceCompact, type UISpaceProps, UISpin, type UISpinProps, UIStack, type UIStackAlign, type UIStackDirection, type UIStackProps, type UIStackSpacing, UIStatistic, UIStatisticCountdown, type UIStatisticProps, UIStatisticsChart, type UIStatisticsChartProps, UISteps, type UIStepsProps, UISwitch, type UISwitchLabelPosition, type UISwitchProps, type UISwitchSize, type UITabItem, UITable, type UITableColumn, type UITableProps, UITabs, type UITabsProps, UITag, type UITagProps, type UITagVariant, UIText, type UITextColor, type UITextProps, type UITextSize, type UITextWeight, type UIThemeResult, UITimePicker, type UITimePickerProps, UITimeline, UITimelineItem, type UITimelineProps, UITitle, type UITitleLevel, type UITitleProps, UITooltip, type UITooltipPlacement, type UITooltipProps, UITree, UITreeDirectoryTree, UITreeNode, type UITreeProps, UITypographyLink, type UITypographyLinkProps, UITypographyParagraph, type UITypographyParagraphProps, UITypographyText, type UITypographyTextProps, UIUpload, UIUploadDragger, type UIUploadProps, createFillFunction, registerIconRenderer, useChartColors, useUIForm, useUIMessage, useUINotification, useUITheme };