@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/src/primitives/components/typography/USAGE.md

@@ -0,0 +1,50 @@
+# Typography
+
+Single component for all text rendering. Pick a semantic `variant` to get the
+right element + base style; override `size` / `weight` / `color` ad hoc when
+needed.
+
+<!-- BEGIN GENERATED: props — do not edit; npm run generate:usage-proptables (source: component JSDoc/types via registry.json) -->
+## Props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `align` | Optional | `"center" \| "left" \| "right" \| "justify"` | - | Text alignment |
+| `className` | Optional | `string` | - | Custom className |
+| `color` | Optional | `"success" \| "warning" \| "error" \| "primary" \| "default" \| "muted"` | `"default"` | Token-based text color |
+| `size` | Optional | `"sm" \| "md" \| "lg" \| "xs" \| "xl" \| "2xl" \| "3xl" \| "4xl"` | - | Text size; defaults to the variant's size when unset |
+| `truncate` | Optional | `boolean` | `false` | Truncate text with ellipsis |
+| `variant` | Optional | `"body" \| "caption" \| "secondary" \| "heading1" \| "heading2" \| "heading3"` | `"body"` | Determines the rendered HTML element and base style |
+| `weight` | Optional | `"medium" \| "normal" \| "light" \| "semibold" \| "bold"` | - | Font weight; defaults to the variant's weight when unset |
+<!-- END GENERATED: props -->
+
+## Props detail
+
+> **Props and the object shapes they reference are generated from this component's TypeScript types, the source of truth.** The following is supplementary (sub-component props, allowed values, `ref` methods, or passthrough props), not the full prop list.
+
+All other native HTML attributes are forwarded onto the underlying element.
+
+### Variant → element mapping
+
+| Variant     | Element  |
+| ----------- | -------- |
+| `heading1`  | `<h1>`   |
+| `heading2`  | `<h2>`   |
+| `heading3`  | `<h3>`   |
+| `body`      | `<p>`    |
+| `secondary` | `<p>`    |
+| `caption`   | `<span>` |
+
+## Example
+
+```tsx
+<Typography variant="heading1">Operations dashboard</Typography>
+<Typography variant="body">A high-level summary of your sites.</Typography>
+<Typography variant="caption" color="muted">Updated 12s ago</Typography>
+```
+
+## Notes
+
+- Use `variant` over raw `<h1>`/`<p>` tags so headings stay on-token
+- For numeric labels in cards, prefer `<Typography variant="heading3">` with
+  `color="muted"` instead of inventing inline styles

package/src/primitives/components/typography/styles.scss

@@ -0,0 +1,174 @@
+@use '../../styles/mixins' as *;
+
+/* ========================================
+   Typography Component Styles
+   ======================================== */
+
+.mdk-typography {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-mono);
+}
+
+/* ========================================
+   VARIANT STYLES
+   ======================================== */
+
+/* Heading 1 */
+.mdk-typography--heading1 {
+  font-size: 2.5rem; // 40px
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+/* Heading 2 */
+.mdk-typography--heading2 {
+  font-size: 2rem; // 32px
+  line-height: 1.3;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+/* Heading 3 */
+.mdk-typography--heading3 {
+  font-size: 1.5rem; // 24px
+  line-height: 1.4;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+/* Body Text */
+.mdk-typography--body {
+  font-size: 1rem; // 16px
+  line-height: 1.6;
+  font-weight: 400;
+}
+
+/* Secondary Text */
+.mdk-typography--secondary {
+  font-size: 0.875rem; // 14px
+  line-height: 1.5;
+  font-weight: 400;
+}
+
+/* Caption Text */
+.mdk-typography--caption {
+  font-size: 0.75rem; // 12px
+  line-height: 1.4;
+  font-weight: 400;
+  letter-spacing: 0.01em;
+}
+
+/* ========================================
+   SIZE OVERRIDES
+   ======================================== */
+
+.mdk-typography--size-xs {
+  font-size: 0.75rem; // 12px
+}
+
+.mdk-typography--size-sm {
+  font-size: 0.875rem; // 14px
+}
+
+.mdk-typography--size-md {
+  font-size: 1rem; // 16px
+}
+
+.mdk-typography--size-lg {
+  font-size: 1.125rem; // 18px
+}
+
+.mdk-typography--size-xl {
+  font-size: 1.25rem; // 20px
+}
+
+.mdk-typography--size-2xl {
+  font-size: 1.5rem; // 24px
+}
+
+.mdk-typography--size-3xl {
+  font-size: 2rem; // 32px
+}
+
+.mdk-typography--size-4xl {
+  font-size: 2.5rem; // 40px
+}
+
+/* ========================================
+   WEIGHT OVERRIDES
+   ======================================== */
+
+.mdk-typography--weight-light {
+  font-weight: 300;
+}
+
+.mdk-typography--weight-normal {
+  font-weight: 400;
+}
+
+.mdk-typography--weight-medium {
+  font-weight: 500;
+}
+
+.mdk-typography--weight-semibold {
+  font-weight: 600;
+}
+
+.mdk-typography--weight-bold {
+  font-weight: 700;
+}
+
+/* ========================================
+   ALIGNMENT
+   ======================================== */
+
+.mdk-typography--align-left {
+  text-align: left;
+}
+
+.mdk-typography--align-center {
+  text-align: center;
+}
+
+.mdk-typography--align-right {
+  text-align: right;
+}
+
+.mdk-typography--align-justify {
+  text-align: justify;
+}
+
+/* ========================================
+   COLOR VARIANTS
+   ======================================== */
+
+.mdk-typography--color-default {
+  color: inherit;
+}
+
+.mdk-typography--color-primary {
+  color: var(--mdk-color-primary);
+}
+
+.mdk-typography--color-success {
+  color: rgb(var(--mdk-color-success));
+}
+
+.mdk-typography--color-warning {
+  color: var(--mdk-color-warning);
+}
+
+.mdk-typography--color-error {
+  color: rgb(var(--mdk-color-error));
+}
+
+.mdk-typography--color-muted {
+  color: var(--mdk-color-grey-idle);
+  opacity: 0.8;
+}
+
+.mdk-typography--truncate {
+  @include text_ellipsis;
+}

package/src/primitives/components/typography/typography.example.tsx

@@ -0,0 +1,21 @@
+/**
+ * Runnable example for Typography.
+ */
+import { Typography } from '@tetherto/mdk-react-devkit'
+
+export const TypographyExample = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <Typography variant="heading1">Operations dashboard</Typography>
+      <Typography variant="heading2">Sites</Typography>
+      <Typography variant="heading3">Site #1</Typography>
+      <Typography variant="body">
+        A high-level summary of your sites, devices, and active alerts.
+      </Typography>
+      <Typography variant="secondary">Last refreshed 12 seconds ago.</Typography>
+      <Typography variant="caption" color="muted">
+        Updated 12s ago
+      </Typography>
+    </div>
+  )
+}

package/src/primitives/styles/_animations.scss

@@ -0,0 +1,8 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/primitives/styles/_base.scss

@@ -0,0 +1,11 @@
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    color: hsl(var(--foreground));
+    font-family: var(--font-mono);
+    background: var(--mdk-color-dark-bg);
+  }
+}

package/src/primitives/styles/_colors.scss

@@ -0,0 +1,286 @@
+// CSS Variables
+@layer base {
+  :root {
+    --background: 0 0% 6%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 6%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 6%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14%;
+    --muted-foreground: 0 0% 64%;
+    --accent: 0 0% 14%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 17.5%;
+    --input: 0 0% 17.5%;
+    --ring: 0 0% 83.9%;
+
+    /* Brand Colors */
+    --mdk-color-primary: #f7931a;
+    --mdk-color-success: 114, 245, 158; /* #1db954 in Hex */
+    --mdk-color-error: 239, 68, 68; /* #ef4444 in Hex */
+    --mdk-color-warning: #ffc107;
+    --mdk-color-warning-rgb: 255, 193, 7; /* #ffc107 in Hex */
+
+    --mdk-color-primary-hover: color-mix(in srgb, var(--mdk-color-primary) 80%, transparent);
+    --mdk-color-primary-button-hover: #f8a348;
+    --mdk-color-primary-hover-light: #e8a140;
+
+    /* Loader/Spinner Colors */
+    --mdk-color-soft-apricot: 255, 236, 186; /* #ffecba in Hex */
+    --mdk-color-soft-red: 254, 202, 202; /* #fecaca in Hex */
+    --mdk-color-soft-gray: 229, 231, 235; /* #e5e7eb in Hex */
+    --mdk-color-soft-blue: 219, 234, 254; /* #dbeafe in Hex */
+    --mdk-color-soft-yellow: 254, 243, 199; /* #fef3c7 in Hex */
+    --mdk-color-soft-green: 209, 250, 229; /* #d1fae5 in Hex */
+    --mdk-color-soft-purple: 243, 232, 255; /* #f3e8ff in Hex */
+    --mdk-color-soft-amber: 254, 243, 199; /* #fef3c7 in Hex */
+
+    /* Backgrounds */
+    --mdk-color-surface: #0f0f0f;
+    --mdk-color-surface-elevated: #191714;
+    --mdk-color-background-dark: #17130f;
+    --mdk-color-background-light: #e5e7eb;
+
+    /* Common Component Colors */
+    --mdk-color-white: #ffffff;
+    --mdk-color-white-alpha-026: #ffffff26;
+    --mdk-color-white-alpha-04d: #ffffff4d;
+    --mdk-color-white-alpha-04: #ffffff40;
+    --mdk-color-white-alpha-024: #ffffff24;
+    --mdk-color-white-alpha-08c: #ffffff8c;
+    --mdk-color-white-transparent: #ffffff1a;
+    --mdk-color-text-secondary: #ffffffd9;
+    --mdk-color-text-disabled: #ffffff80;
+    --mdk-color-dark-black: #10100f;
+    --mdk-black-alpha-03: #0000004d;
+    --mdk-border-default-color: #424242;
+    --mdk-color-green: #72f59e;
+    --mdk-color-socket-on-green: #2c5b3c;
+    --mdk-color-brick-red: #ff3b30;
+    --mdk-color-brick-green: #34c759;
+    --mdk-color-brick-green-rgb: 52, 199, 89; /*  #34c759 in Hex  */
+    --mdk-color-dark-green: #18251c;
+    --mdk-color-strong-green: #03c04a;
+    --mdk-color-mint-green: #6ee7b7;
+    --mdk-color-obsidian: #161514;
+    --mdk-color-medium-blue: #4289c1;
+    --mdk-color-green-rgb: 114, 245, 158; /* #72f59e in Hex */
+    --mdk-color-black: 0, 0, 0; /* #000000 in Hex */
+    --mdk-color-grey-idle: 107, 114, 128; /* #6b7280 in Hex */
+    --mdk-color-white-rgb: 255, 255, 255; /* #ffffff in Hex */
+    --mdk-color-orange-warning: 245, 158, 11; /* #f59e0b in Hex */
+    --mdk-color-low-yellow: 246, 238, 92; /* #f6ee5c in Hex */
+    --mdk-color-gold: 255, 215, 0; /* #ffd700 in Hex */
+    --mdk-color-sleep-blue: 59, 130, 246; /* #3b82f6 in Hex */
+    --mdk-color-dark-grey: 159, 166, 172; /* #9fa6ac in Hex */
+    --mdk-color-purple-high: 139, 92, 246; /* #8b5cf6 in Hex */
+    /* Deprecated — kept for backward compatibility with external consumers.
+       Plain CSS can't extract RGB components from --mdk-color-primary, so this
+       triplet won't follow theme overrides. New callsites should use
+       var(--mdk-color-primary) directly, or color-mix() for alpha variants. */
+    --mdk-color-primary-rgb: 247, 147, 26; /* #f7931a in RGB */
+    --mdk-color-light-blue: #22afff;
+    --mdk-color-blue: #357af6;
+    --mdk-color-blue-rgb: 53, 122, 246; /* #357AF6 in RGB */
+
+    /* Neutral / Gray scale — warm browns, per the Figma canon
+       (DARK_BACK #1a1815, BLACK #17130f, DARK_ORANGE_BG #3b2b20). */
+    --mdk-color-gray-900: #1a1815;
+    --mdk-color-gray-500: #777777;
+    --mdk-color-gray-450: #87888c;
+    --mdk-color-gray-400: #8e8e8e;
+    --mdk-color-gray-300: #e1e0e0;
+    --mdk-color-gray-stone: #898887;
+    --mdk-color-black-bg: #000000;
+    --mdk-color-dark-bg: #1a1815;
+    --mdk-color-brown-selected: #6b5a3d;
+    --mdk-color-light-grey: #d9d9d9;
+    --mdk-color-darker-grey: #3b2b20;
+    --mdk-color-onyx: #1a1410;
+    --mdk-color-dark: #17130f;
+
+    /* Overlays */
+    --mdk-overlay-bg: rgba(0, 0, 0, 0.45);
+    --mdk-color-white-60: rgba(255, 255, 255, 0.6);
+    --mdk-color-white-12: #ffffff1f;
+    --mdk-color-white-8: #ffffff14;
+    --mdk-color-white-7: #ffffffb3;
+    --mdk-color-white-5: #ffffff80;
+    --mdk-color-white-2: #ffffff33;
+    --mdk-color-white-4: #ffffff0d;
+    --mdk-color-white-05: #ffffff05;
+
+    /* Shadows */
+    --mdk-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
+    --mdk-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
+    --mdk-shadow-lg:
+      0 6px 16px 0 rgba(0, 0, 0, 0.3), 0 3px 6px -4px rgba(0, 0, 0, 0.2),
+      0 9px 28px 8px rgba(0, 0, 0, 0.15);
+    --mdk-shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+
+    /* Breadcrumbs specific colors */
+    --mdk-breadcrumbs-separator-color: var(--mdk-color-primary);
+    --mdk-breadcrumbs-link-color: var(--mdk-color-grey-idle);
+    --mdk-breadcrumbs-link-hover-color: var(--mdk-color-primary);
+    --mdk-breadcrumbs-link-current-color: var(--mdk-color-grey-idle);
+    --mdk-breadcrumbs-back-button-color: var(--mdk-color-primary);
+
+    /* Switch specific colors */
+    --mdk-switch-unchecked-bg: #343434;
+    --mdk-switch-thumb-shadow: rgba(0, 0, 0, 0.2);
+    --mdk-switch-thumb-shadow-checked: rgba(0, 0, 0, 0.3);
+
+    /* Dialog specific colors */
+    --mdk-dialog-box-shadow-color: rgb(0 0 0 / 0.1);
+    --mdk-dialog-border-color: rgba(255, 255, 255, 0.1);
+
+    /* Popover specific colors */
+    --mdk-popover-bg: #000000;
+    --mdk-popover-text: #ffffff;
+    --mdk-popover-border: #ffffff1a;
+
+    /* Input specific colors */
+    --mdk-input-bg: #3b2b20;
+    --mdk-input-placeholder-color: #999999;
+    --mdk-input-border-hover: var(--mdk-color-gray-500);
+
+    /* TagInput specific colors */
+    --mdk-tag-input-bg: transparent;
+    --mdk-tag-input-border: var(--mdk-color-white-transparent);
+    --mdk-tag-input-border-hover: var(--mdk-color-white-transparent);
+    --mdk-tag-input-text: var(--mdk-color-text-secondary);
+    --mdk-tag-input-placeholder: var(--mdk-color-text-disabled);
+    --mdk-tag-input-icon: var(--mdk-color-text-disabled);
+    --mdk-tag-input-icon-focus: var(--mdk-color-white-60);
+    --mdk-tag-input-tag-bg: var(--mdk-color-white-transparent);
+    --mdk-tag-input-dropdown-bg: #1a1815;
+    --mdk-tag-input-dropdown-border: var(--mdk-color-white-transparent);
+    --mdk-tag-input-option-hover-bg: var(--mdk-color-white-transparent);
+    --mdk-tag-input-option-selected-bg: #543b29;
+
+    /* Select specific colors */
+    --mdk-select-content-bg: #1a1815;
+    --mdk-select-item-text: #e1e0e0;
+    --mdk-select-item-highlighted-text: #1a1815;
+
+    /* Dropdown Menu specific colors */
+    --mdk-dropdown-menu-content-bg: #1a1815;
+    --mdk-dropdown-menu-item-text: #e1e0e0;
+    --mdk-dropdown-menu-item-highlighted-text: #1a1815;
+
+    /* Data Table specific colors */
+    --mdk-table-border: #ffffff1a;
+    --mdk-table-row-border: #303030;
+
+    --mdk-table-loader-overlay-bg: #00000033;
+    --mdk-table-header-bg: #17130f;
+    --mdk-table-header-hover-bg: #303030;
+    --mdk-table-body-hover-bg: #1d1d1d;
+    --mdk-table-selected-row-bg: #583a16;
+    --mdk-table-selected-row-hover-bg: #7a4d17;
+    --mdk-table-header-sorted-bg: #2e2e2e;
+
+    --mdk-table-text-primary: #ffffff80;
+    --mdk-table-text-secondary: #ffffffb3;
+
+    /* mdk button tokens */
+    --mdk-radius: 0px;
+    --mdk-font-size: 14px;
+    --mdk-line-height: 22px;
+    --mdk-font-weight: 600;
+    --mdk-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.04);
+    --mdk-shadow-light: 0 2px 0 0 rgba(255, 255, 255, 0.04);
+
+    --mdk-button-primary-bg: var(--mdk-color-primary);
+    --mdk-button-primary-bg-hover: #c4730f;
+    --mdk-button-primary-text: #000000;
+    --mdk-button-primary-text-hover: #ffffff;
+    --mdk-button-primary-bg-hover-overlay: rgba(255, 255, 255, 0.15);
+    --mdk-color-primary-10: color-mix(in srgb, var(--mdk-color-primary) 10%, transparent);
+
+    --mdk-button-secondary-text: #ffffffcc;
+    --mdk-button-secondary-border: #ffffff33;
+    --mdk-button-secondary-border-visible: rgba(255, 255, 255, 0.65);
+    --mdk-button-secondary-border-hover: color-mix(in srgb, var(--mdk-color-primary) 50%, transparent);
+    --mdk-button-secondary-bg: #17130f;
+
+    --mdk-button-danger-bg: #ef4444;
+    --mdk-button-danger-bg-hover: #f36060;
+    --mdk-button-danger-text: #ffffff;
+    --mdk-button-danger-border: #ef4444;
+
+    --mdk-orange-dimmer: #1d1914;
+
+    /* Accordion specific colors */
+    --mdk-accordion-item-bg: #0e0e0e80;
+
+    /* Chart Container specific colors */
+    --mdk-chart-container-bg: rgba(0, 0, 0, 0.5);
+    --mdk-chart-container-legend-label: rgba(255, 255, 255, 0.7);
+    --mdk-chart-container-title: rgba(255, 255, 255, 0.5);
+
+    /* Cascader specific colors */
+    --mdk-cascader-active-bg: #583a16;
+    --mdk-cascader-checkbox-bg: #141414;
+    --mdk-cascader-box-shadow-color: color-mix(in srgb, var(--mdk-color-primary) 29%, transparent);
+    --mdk-cascader-color-highlight: #dc4446;
+
+    /* Status colors */
+    --mdk-color-severity-critical: #ff0000;
+    --mdk-color-severity-high: #ffa500;
+    --mdk-color-severity-medium: #ffff00;
+
+    /* Text muted variants */
+    --mdk-color-text-muted: #9f9e9e;
+    --mdk-color-text-muted-warm: #deb7b7;
+
+    /* Sidebar specific colors */
+    --mdk-sidebar-bg: var(--mdk-color-dark-bg);
+    --mdk-sidebar-item-hover-bg: rgba(255, 255, 255, 0.05);
+    --mdk-sidebar-overlay-bg: var(--mdk-color-dark-bg);
+    --mdk-sidebar-border-color: var(--mdk-color-primary);
+    --mdk-sidebar-item-color: var(--mdk-color-gray-stone);
+    --mdk-sidebar-overlay-border: var(--mdk-color-primary);
+    --mdk-sidebar-item-active-color: var(--mdk-color-primary);
+    --mdk-sidebar-toggle-bg: var(--mdk-color-background-dark);
+
+    /* Demo App specific colors */
+    --color-primary: #f7931a;
+    --color-primary-light: #ffb347;
+    --color-primary-transparent: rgba(247, 147, 26, 0.1);
+    --color-primary-transparent-20: rgba(247, 147, 26, 0.2);
+    --color-text-primary: #ffffff;
+    --color-text-secondary: rgba(255, 255, 255, 0.7);
+    --color-background-elevated: #1a1a1a;
+    --color-border: rgba(255, 255, 255, 0.1);
+  }
+
+  .dark {
+    --background: 0 0% 6%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 6%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 6%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14%;
+    --muted-foreground: 0 0% 64%;
+    --accent: 0 0% 14%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 17.5%;
+    --input: 0 0% 17.5%;
+    --ring: 0 0% 83.9%;
+  }
+}

package/src/primitives/styles/_example.scss

@@ -0,0 +1,34 @@
+// Layout utility classes used exclusively in *.example.tsx runnable examples.
+@layer mdk {
+  .mdk-example-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .mdk-example-col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .mdk-example-mosaic-cell {
+    display: flex;
+    flex-direction: column;
+    min-height: 360px;
+    min-width: 0;
+  }
+
+  .mdk-example-inline {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .mdk-example-grid-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+}

package/src/primitives/styles/_fonts.scss

@@ -0,0 +1,5 @@
+/* System Font Stack - No external fonts needed */
+:root {
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}