@bioturing/components 0.14.1 → 0.15.0

package/dist/metadata.d.ts

@@ -0,0 +1,363 @@
+/**
+ * Component metadata for the BioTuring Design System
+ * This file provides information about all components including:
+ * - name: Component name
+ * - link: Documentation link
+ * - base: What the component is based on (antd, base-ui, or custom)
+ * - refinements: Whether the component has been refined beyond its base
+ * - category: Component category for organization
+ * - packages: Additional packages used by the component
+ */
+export type ComponentMetadata = {
+    name: string;
+    link: string;
+    base: "antd" | "base-ui" | "custom";
+    refinements: string[];
+    category: ComponentCategory;
+    packages?: string[];
+    originalDocUrl?: string;
+    description?: string;
+};
+export type ComponentCategory = "Actions" | "General" | "Layout" | "Navigation" | "Data Entry" | "Data Display" | "Feedback" | "Overlay" | "Utility";
+export declare const componentMetadata: {
+    Badge: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Display";
+        originalDocUrl: string;
+        description: string;
+    };
+    Breadcrumb: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Navigation";
+        originalDocUrl: string;
+        description: string;
+    };
+    Button: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: any[];
+        category: "Actions";
+        originalDocUrl: string;
+        description: string;
+    };
+    Checkbox: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: any[];
+        category: "Data Entry";
+        originalDocUrl: string;
+        description: string;
+    };
+    CodeBlock: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Data Display";
+        packages: string[];
+        description: string;
+    };
+    Collapse: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: any[];
+        category: "Data Display";
+        originalDocUrl: string;
+        description: string;
+    };
+    DropdownMenu: {
+        name: string;
+        link: string;
+        base: "base-ui";
+        refinements: string[];
+        category: "Navigation";
+        packages: string[];
+        originalDocUrl: string;
+        description: string;
+    };
+    Empty: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Display";
+        originalDocUrl: string;
+        description: string;
+    };
+    Field: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Data Entry";
+        description: string;
+    };
+    Form: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: any[];
+        category: "Data Entry";
+        originalDocUrl: string;
+        description: string;
+    };
+    IconButton: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Actions";
+        description: string;
+    };
+    Input: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: any[];
+        category: "Data Entry";
+        originalDocUrl: string;
+        description: string;
+    };
+    Message: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: any[];
+        category: "Feedback";
+        originalDocUrl: string;
+        description: string;
+    };
+    Modal: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Overlay";
+        originalDocUrl: string;
+        description: string;
+    };
+    Popover: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Overlay";
+        originalDocUrl: string;
+        description: string;
+    };
+    PopupPanel: {
+        name: string;
+        link: string;
+        base: "base-ui";
+        refinements: string[];
+        category: "Overlay";
+        packages: string[];
+        originalDocUrl: string;
+        description: string;
+    };
+    Radio: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: any[];
+        category: "Data Entry";
+        originalDocUrl: string;
+        description: string;
+    };
+    ScrollArea: {
+        name: string;
+        link: string;
+        base: "base-ui";
+        refinements: string[];
+        category: "Layout";
+        packages: string[];
+        originalDocUrl: string;
+        description: string;
+    };
+    Segmented: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Entry";
+        originalDocUrl: string;
+        description: string;
+    };
+    Select: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Entry";
+        packages: string[];
+        originalDocUrl: string;
+        description: string;
+    };
+    Slider: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Entry";
+        originalDocUrl: string;
+        description: string;
+    };
+    Spin: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: any[];
+        category: "Feedback";
+        originalDocUrl: string;
+        description: string;
+    };
+    Splitter: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Layout";
+        description: string;
+    };
+    Stack: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Layout";
+        description: string;
+    };
+    Switch: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Entry";
+        originalDocUrl: string;
+        description: string;
+    };
+    Table: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Display";
+        packages: string[];
+        originalDocUrl: string;
+        description: string;
+    };
+    Tag: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Display";
+        originalDocUrl: string;
+        description: string;
+    };
+    ThemeProvider: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Utility";
+        description: string;
+    };
+    Toast: {
+        name: string;
+        link: string;
+        base: "base-ui";
+        refinements: string[];
+        category: "Feedback";
+        packages: string[];
+        originalDocUrl: string;
+        description: string;
+    };
+    Tooltip: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Overlay";
+        originalDocUrl: string;
+        description: string;
+    };
+    Tour: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Feedback";
+        originalDocUrl: string;
+        description: string;
+    };
+    Transition: {
+        name: string;
+        link: string;
+        base: "base-ui";
+        refinements: string[];
+        category: "Utility";
+        packages: string[];
+        originalDocUrl: string;
+        description: string;
+    };
+    Typography: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Display";
+        originalDocUrl: string;
+        description: string;
+    };
+    Tree: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Display";
+        packages: string[];
+        originalDocUrl: string;
+        description: string;
+    };
+    Truncate: {
+        name: string;
+        link: string;
+        base: "custom";
+        refinements: string[];
+        category: "Data Display";
+        description: string;
+    };
+    Upload: {
+        name: string;
+        link: string;
+        base: "antd";
+        refinements: string[];
+        category: "Data Entry";
+        originalDocUrl: string;
+        description: string;
+    };
+    VerticalCollapsiblePanel: {
+        name: string;
+        link: string;
+        base: "base-ui";
+        refinements: string[];
+        category: "Layout";
+        packages: string[];
+        originalDocUrl: string;
+        description: string;
+    };
+};
+/**
+ * Get all components by category
+ */
+export declare const getComponentsByCategory: () => Record<ComponentCategory, ComponentMetadata[]>;

package/dist/tailwind.css

@@ -1,4 +1,121 @@
 @theme inline {
-  --color-ds-color-primary: var(--ds-color-primary) ; --color-ds-color-primary-hover: var(--ds-color-primary-hover) ; --color-ds-color-primary-active: var(--ds-color-primary-active) ; --color-ds-color-primary-text: var(--ds-color-primary-text) ; --color-ds-color-primary-text-hover: var(--ds-color-primary-text-hover) ; --color-ds-color-primary-text-active: var(--ds-color-primary-text-active) ; --color-ds-color-primary-bg: var(--ds-color-primary-bg) ; --color-ds-color-primary-bg-hover: var(--ds-color-primary-bg-hover) ; --color-ds-color-primary-border: var(--ds-color-primary-border) ; --color-ds-color-primary-border-hover: var(--ds-color-primary-border-hover) ; --color-ds-color-warning: var(--ds-color-warning) ; --color-ds-color-warning-hover: var(--ds-color-warning-hover) ; --color-ds-color-warning-active: var(--ds-color-warning-active) ; --color-ds-color-warning-text: var(--ds-color-warning-text) ; --color-ds-color-warning-text-hover: var(--ds-color-warning-text-hover) ; --color-ds-color-warning-text-active: var(--ds-color-warning-text-active) ; --color-ds-color-warning-bg: var(--ds-color-warning-bg) ; --color-ds-color-warning-bg-hover: var(--ds-color-warning-bg-hover) ; --color-ds-color-warning-border: var(--ds-color-warning-border) ; --color-ds-color-warning-border-hover: var(--ds-color-warning-border-hover) ; --color-ds-color-success: var(--ds-color-success) ; --color-ds-color-success-hover: var(--ds-color-success-hover) ; --color-ds-color-success-active: var(--ds-color-success-active) ; --color-ds-color-success-text: var(--ds-color-success-text) ; --color-ds-color-success-text-hover: var(--ds-color-success-text-hover) ; --color-ds-color-success-text-active: var(--ds-color-success-text-active) ; --color-ds-color-success-bg: var(--ds-color-success-bg) ; --color-ds-color-success-bg-hover: var(--ds-color-success-bg-hover) ; --color-ds-color-success-border: var(--ds-color-success-border) ; --color-ds-color-success-border-hover: var(--ds-color-success-border-hover) ; --color-ds-color-error: var(--ds-color-error) ; --color-ds-color-error-hover: var(--ds-color-error-hover) ; --color-ds-color-error-active: var(--ds-color-error-active) ; --color-ds-color-error-text: var(--ds-color-error-text) ; --color-ds-color-error-text-hover: var(--ds-color-error-text-hover) ; --color-ds-color-error-text-active: var(--ds-color-error-text-active) ; --color-ds-color-error-bg: var(--ds-color-error-bg) ; --color-ds-color-error-bg-hover: var(--ds-color-error-bg-hover) ; --color-ds-color-error-border: var(--ds-color-error-border) ; --color-ds-color-error-border-hover: var(--ds-color-error-border-hover) ; --color-ds-color-text: var(--ds-color-text) ; --color-ds-color-text-secondary: var(--ds-color-text-secondary) ; --color-ds-color-text-tertiary: var(--ds-color-text-tertiary) ; --color-ds-color-text-quaternary: var(--ds-color-text-quaternary) ; --color-ds-color-bg-container: var(--ds-color-bg-container) ; --color-ds-color-bg-elevated: var(--ds-color-bg-elevated) ; --color-ds-color-bg-layout: var(--ds-color-bg-layout) ; --color-ds-color-bg-spotlight: var(--ds-color-bg-spotlight) ; --color-ds-color-bg-mask: var(--ds-color-bg-mask) ; --color-ds-color-fill: var(--ds-color-fill) ; --color-ds-color-fill-secondary: var(--ds-color-fill-secondary) ; --color-ds-color-fill-tertiary: var(--ds-color-fill-tertiary) ; --color-ds-color-fill-quaternary: var(--ds-color-fill-quaternary) ; --color-ds-color-fill-alter: var(--ds-color-fill-alter) ; --color-ds-color-border: var(--ds-color-border) ; --color-ds-color-border-secondary: var(--ds-color-border-secondary) ; --color-ds-color-split: var(--ds-color-split) ; --color-ds-color-text-placeholder: var(--ds-color-text-placeholder) ; --color-ds-color-text-disabled: var(--ds-color-text-disabled) ; --color-ds-color-text-heading: var(--ds-color-text-heading) ; --color-ds-color-text-label: var(--ds-color-text-label) ; --color-ds-color-text-description: var(--ds-color-text-description) ; --color-ds-color-text-light-solid: var(--ds-color-text-light-solid) ; --color-ds-color-highlight: var(--ds-color-highlight) ; --color-ds-color-bg-text-hover: var(--ds-color-bg-text-hover) ; --color-ds-color-bg-text-active: var(--ds-color-bg-text-active) ; --color-ds-color-icon: var(--ds-color-icon) ; --color-ds-color-icon-hover: var(--ds-color-icon-hover) ; --color-ds-color-bg-segment-active: var(--ds-color-bg-segment-active) ; --text-ds-sm: var(--ds-font-size-sm) ; --text-ds-md: var(--ds-font-size) ; --text-ds-lg: var(--ds-font-size-lg) ; --text-ds-xl: var(--ds-font-size-xl) ; --text-ds-sm--line-height: var(--ds-font-height-sm) ; --text-ds-md--line-height: var(--ds-font-height) ; --text-ds-lg--line-height: var(--ds-font-height-lg) ; --text-ds-xl--line-height: var(--ds-font-height-xl) ; --text-ds-h1: var(--ds-font-size-heading-1) ; --text-ds-h2: var(--ds-font-size-heading-2) ; --text-ds-h3: var(--ds-font-size-heading-3) ; --text-ds-h4: var(--ds-font-size-heading-4) ; --text-ds-h5: var(--ds-font-size-heading-5) ; --text-ds-h1--line-height: var(--ds-line-height-heading-1) ; --text-ds-h2--line-height: var(--ds-line-height-heading-2) ; --text-ds-h3--line-height: var(--ds-line-height-heading-3) ; --text-ds-h4--line-height: var(--ds-line-height-heading-4) ; --text-ds-h5--line-height: var(--ds-line-height-heading-5) ; --text-ds-h1--font-weight: 600; --text-ds-h2--font-weight: 600; --text-ds-h3--font-weight: 600; --text-ds-h4--font-weight: 600; --text-ds-h5--font-weight: 600; --font-sans: var(--ds-inter) ; --font-mono: var(--ds-roboto-mono) ;
+  --color-ds-color-primary: var(--ds-color-primary);
+  --color-ds-color-primary-hover: var(--ds-color-primary-hover);
+  --color-ds-color-primary-active: var(--ds-color-primary-active);
+  --color-ds-color-primary-text: var(--ds-color-primary-text);
+  --color-ds-color-primary-text-hover: var(--ds-color-primary-text-hover);
+  --color-ds-color-primary-text-active: var(--ds-color-primary-text-active);
+  --color-ds-color-primary-bg: var(--ds-color-primary-bg);
+  --color-ds-color-primary-bg-hover: var(--ds-color-primary-bg-hover);
+  --color-ds-color-primary-border: var(--ds-color-primary-border);
+  --color-ds-color-primary-border-hover: var(--ds-color-primary-border-hover);
+
+  --color-ds-color-warning: var(--ds-color-warning);
+  --color-ds-color-warning-hover: var(--ds-color-warning-hover);
+  --color-ds-color-warning-active: var(--ds-color-warning-active);
+  --color-ds-color-warning-text: var(--ds-color-warning-text);
+  --color-ds-color-warning-text-hover: var(--ds-color-warning-text-hover);
+  --color-ds-color-warning-text-active: var(--ds-color-warning-text-active);
+  --color-ds-color-warning-bg: var(--ds-color-warning-bg);
+  --color-ds-color-warning-bg-hover: var(--ds-color-warning-bg-hover);
+  --color-ds-color-warning-border: var(--ds-color-warning-border);
+  --color-ds-color-warning-border-hover: var(--ds-color-warning-border-hover);
+
+  --color-ds-color-success: var(--ds-color-success);
+  --color-ds-color-success-hover: var(--ds-color-success-hover);
+  --color-ds-color-success-active: var(--ds-color-success-active);
+  --color-ds-color-success-text: var(--ds-color-success-text);
+  --color-ds-color-success-text-hover: var(--ds-color-success-text-hover);
+  --color-ds-color-success-text-active: var(--ds-color-success-text-active);
+  --color-ds-color-success-bg: var(--ds-color-success-bg);
+  --color-ds-color-success-bg-hover: var(--ds-color-success-bg-hover);
+  --color-ds-color-success-border: var(--ds-color-success-border);
+  --color-ds-color-success-border-hover: var(--ds-color-success-border-hover);
+
+  --color-ds-color-error: var(--ds-color-error);
+  --color-ds-color-error-hover: var(--ds-color-error-hover);
+  --color-ds-color-error-active: var(--ds-color-error-active);
+  --color-ds-color-error-text: var(--ds-color-error-text);
+  --color-ds-color-error-text-hover: var(--ds-color-error-text-hover);
+  --color-ds-color-error-text-active: var(--ds-color-error-text-active);
+  --color-ds-color-error-bg: var(--ds-color-error-bg);
+  --color-ds-color-error-bg-hover: var(--ds-color-error-bg-hover);
+  --color-ds-color-error-border: var(--ds-color-error-border);
+  --color-ds-color-error-border-hover: var(--ds-color-error-border-hover);
+
+  --color-ds-color-text: var(--ds-color-text);
+  --color-ds-color-text-secondary: var(--ds-color-text-secondary);
+  --color-ds-color-text-tertiary: var(--ds-color-text-tertiary);
+  --color-ds-color-text-quaternary: var(--ds-color-text-quaternary);
+  --color-ds-color-bg-container: var(--ds-color-bg-container);
+  --color-ds-color-bg-elevated: var(--ds-color-bg-elevated);
+  --color-ds-color-bg-layout: var(--ds-color-bg-layout);
+  --color-ds-color-bg-spotlight: var(--ds-color-bg-spotlight);
+  --color-ds-color-bg-mask: var(--ds-color-bg-mask);
+  --color-ds-color-fill: var(--ds-color-fill);
+  --color-ds-color-fill-secondary: var(--ds-color-fill-secondary);
+  --color-ds-color-fill-tertiary: var(--ds-color-fill-tertiary);
+  --color-ds-color-fill-quaternary: var(--ds-color-fill-quaternary);
+  --color-ds-color-fill-alter: var(--ds-color-fill-alter);
+  --color-ds-color-border: var(--ds-color-border);
+  --color-ds-color-border-secondary: var(--ds-color-border-secondary);
+  --color-ds-color-split: var(--ds-color-split);
+  --color-ds-color-text-placeholder: var(--ds-color-text-placeholder);
+  --color-ds-color-text-disabled: var(--ds-color-text-disabled);
+  --color-ds-color-text-heading: var(--ds-color-text-heading);
+  --color-ds-color-text-label: var(--ds-color-text-label);
+  --color-ds-color-text-description: var(--ds-color-text-description);
+  --color-ds-color-text-light-solid: var(--ds-color-text-light-solid);
+  --color-ds-color-highlight: var(--ds-color-highlight);
+  --color-ds-color-bg-text-hover: var(--ds-color-bg-text-hover);
+  --color-ds-color-bg-text-active: var(--ds-color-bg-text-active);
+  --color-ds-color-icon: var(--ds-color-icon);
+  --color-ds-color-icon-hover: var(--ds-color-icon-hover);
+  --color-ds-color-bg-segment-active: var(--ds-color-bg-segment-active);
+
+  --text-ds-sm: var(--ds-font-size-sm);
+  --text-ds-md: var(--ds-font-size);
+  --text-ds-lg: var(--ds-font-size-lg);
+  --text-ds-xl: var(--ds-font-size-xl);
+
+  --text-ds-sm--line-height: var(--ds-font-height-sm);
+  --text-ds-md--line-height: var(--ds-font-height);
+  --text-ds-lg--line-height: var(--ds-font-height-lg);
+  --text-ds-xl--line-height: var(--ds-font-height-xl);
+
+  --text-ds-h1: var(--ds-font-size-heading-1);
+  --text-ds-h2: var(--ds-font-size-heading-2);
+  --text-ds-h3: var(--ds-font-size-heading-3);
+  --text-ds-h4: var(--ds-font-size-heading-4);
+  --text-ds-h5: var(--ds-font-size-heading-5);
+
+  --text-ds-h1--line-height: var(--ds-line-height-heading-1);
+  --text-ds-h2--line-height: var(--ds-line-height-heading-2);
+  --text-ds-h3--line-height: var(--ds-line-height-heading-3);
+  --text-ds-h4--line-height: var(--ds-line-height-heading-4);
+  --text-ds-h5--line-height: var(--ds-line-height-heading-5);
+
+  --text-ds-h1--font-weight: 600;
+  --text-ds-h2--font-weight: 600;
+  --text-ds-h3--font-weight: 600;
+  --text-ds-h4--font-weight: 600;
+  --text-ds-h5--font-weight: 600;
+
+  --text-ds-subheading: 0.75rem;
+  --text-ds-subheading--line-height: 1rem;
+  --text-ds-subheading--letter-spacing: 0.002em;
+  --text-ds-subheading--font-weight: 500;
+
+  --text-ds-subheading2: 0.625rem;
+  --text-ds-subheading2--line-height: 1.4;
+  --text-ds-subheading2--letter-spacing: 0.002em;
+  --text-ds-subheading2--font-weight: 500;
+
+  --font-sans: var(--ds-inter);
+  --font-mono: var(--ds-roboto-mono);
 }
 
+.text-ds-subheading,
+.text-ds-subheading2 {
+  text-transform: uppercase;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bioturing/components",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -123,7 +123,7 @@
     "rc-tree": "^5.13.1",
     "react-use-resizable": "^0.2.0",
     "tailwind-merge": "^3.2.0",
-    "@bioturing/assets": "0.14.0"
+    "@bioturing/assets": "0.15.0"
   },
   "peerDependencies": {
     "antd": "^5.25.0",