@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

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

@@ -0,0 +1,245 @@
+@use '../../styles/mixins' as *;
+/* Base spinner container */
+.mdk-spinner {
+  @include flex_center;
+  pointer-events: none;
+}
+
+.mdk-spinner--fullscreen {
+  position: fixed;
+  width: 100dvw;
+  height: 100dvh;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  padding: 24px;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+/* Spinner content wrapper */
+.mdk-spinner__content {
+  @include flex_column_center;
+  gap: 1rem;
+}
+
+.mdk-spinner__circle--sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 2px;
+}
+
+.mdk-spinner__circle--md {
+  width: 2rem;
+  height: 2rem;
+  border-width: 3px;
+}
+
+.mdk-spinner__circle--lg {
+  width: 3rem;
+  height: 3rem;
+  border-width: 4px;
+}
+
+/* Spinner circle */
+.mdk-spinner__circle {
+  border-radius: 50%;
+  border-style: solid;
+  border-top-color: transparent;
+  animation: mdk-spinner-spin 1s linear infinite;
+}
+
+.mdk-spinner__circle--secondary {
+  border-color: var(--mdk-color-white);
+  border-top-color: transparent;
+}
+
+.mdk-spinner__circle--primary {
+  border-color: var(--mdk-color-primary);
+  border-top-color: transparent;
+}
+
+/* Speed variants */
+.mdk-spinner__circle--slow {
+  animation-duration: 1.5s;
+}
+
+.mdk-spinner__circle--normal {
+  animation-duration: 1s;
+}
+
+.mdk-spinner__circle--fast {
+  animation-duration: 0.6s;
+}
+
+/* Label */
+.mdk-spinner__label {
+  color: var(--mdk-switch-unchecked-bg);
+  font-weight: 500;
+}
+
+.mdk-spinner__label--sm {
+  font-size: 0.875rem;
+}
+
+.mdk-spinner__label--md {
+  font-size: 1rem;
+}
+
+.mdk-spinner__label--lg {
+  font-size: 1.125rem;
+}
+
+/* Keyframe animation */
+@keyframes mdk-spinner-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Spinning dot container - matches ant-spin-dot */
+.mdk-spinner__dot {
+  position: relative;
+  display: inline-block;
+  animation: mdk-spinner-rotate 1.2s linear infinite;
+  font-size: 44px;
+  width: 1em;
+  height: 1em;
+}
+
+/* Size variants */
+.mdk-spinner__dot--sm {
+  font-size: 24px;
+}
+
+.mdk-spinner__dot--md {
+  font-size: 44px;
+}
+
+.mdk-spinner__dot--lg {
+  font-size: 64px;
+}
+
+/* Speed variants */
+.mdk-spinner__dot--slow {
+  animation-duration: 1.5s;
+}
+
+.mdk-spinner__dot--normal {
+  animation-duration: 1s;
+}
+
+.mdk-spinner__dot--fast {
+  animation-duration: 0.6s;
+}
+
+/* Individual dot items - matches ant-spin-dot-item positioning */
+.mdk-spinner__dot-item {
+  position: absolute;
+  display: block;
+  width: 9px;
+  height: 9px;
+  border-radius: 0; /* Sharp edges for cyber style */
+  transform: scale(0.75);
+  transform-origin: 50% 50%;
+  opacity: 0.3;
+}
+
+/* Position each dot in 2x2 grid */
+.mdk-spinner__dot-item:nth-child(1) {
+  top: 0;
+  left: 0;
+}
+
+.mdk-spinner__dot-item:nth-child(2) {
+  top: 0;
+  right: 0;
+}
+
+.mdk-spinner__dot-item:nth-child(3) {
+  bottom: 0;
+  right: 0;
+}
+
+.mdk-spinner__dot-item:nth-child(4) {
+  bottom: 0;
+  left: 0;
+}
+
+/* Pulsing animation for each dot */
+.mdk-spinner__dot-item:nth-child(1) {
+  animation: mdk-spinner-scale 1.2s 0s infinite ease-in-out;
+}
+
+.mdk-spinner__dot-item:nth-child(2) {
+  animation: mdk-spinner-scale 1.2s 0.4s infinite ease-in-out;
+}
+
+.mdk-spinner__dot-item:nth-child(3) {
+  animation: mdk-spinner-scale 1.2s 0.8s infinite ease-in-out;
+}
+
+.mdk-spinner__dot-item:nth-child(4) {
+  animation: mdk-spinner-scale 1.2s 1.2s infinite ease-in-out;
+}
+
+/* Color variants with glow effect */
+.mdk-spinner__dot-item--primary {
+  background-color: var(--mdk-color-primary);
+  box-shadow:
+    0 0 4px var(--mdk-color-primary),
+    0 0 12px color-mix(in srgb, var(--mdk-color-primary) 60%, transparent);
+}
+
+/* Label */
+.mdk-spinner__label {
+  font-weight: 500;
+  color: rgb(var(--mdk-color-orange-warning));
+}
+
+.mdk-spinner__label--sm {
+  font-size: 0.875rem;
+}
+
+.mdk-spinner__label--md {
+  font-size: 1rem;
+}
+
+.mdk-spinner__label--lg {
+  font-size: 1.125rem;
+}
+
+/* Keyframe animations */
+@keyframes mdk-spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes mdk-spinner-scale {
+  0%,
+  100% {
+    transform: scale(2);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Keyframe animation */
+@keyframes mdk-spinner-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,36 @@
+# Switch
+
+Toggle switch built on Radix UI. Controlled or uncontrolled.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `checked` | Optional | `boolean` | - | Controlled checked state |
+| `className` | Optional | `string` | - | Custom className for the root element |
+| `color` | Optional | `"success" \| "warning" \| "error" \| "primary" \| "default"` | `"default"` | Color variant when checked |
+| `defaultChecked` | Optional | `boolean` | - | Uncontrolled initial checked state |
+| `disabled` | Optional | `boolean` | `false` | Disable the switch |
+| `onCheckedChange` | Optional | `((checked: boolean) => void)` | - | Change handler |
+| `radius` | Optional | `"small" \| "none" \| "medium" \| "large" \| "full"` | `"none"` | Border radius variant |
+| `size` | Optional | `"sm" \| "md" \| "lg"` | `"md"` | Size variant of the switch |
+| `thumbClassName` | Optional | `string` | - | Custom className for the thumb element |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+const [enabled, setEnabled] = useState(false);
+
+<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+  <Switch id="notify" checked={enabled} onCheckedChange={setEnabled} />
+  <Label htmlFor="notify">Enable notifications</Label>
+</div>
+```
+
+## Notes
+
+- Pair with a `Label` (via `htmlFor` / `id`) for accessibility
+- Prefer `Switch` for boolean state where the change applies immediately;
+  use `Checkbox` for selections inside a form

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

@@ -0,0 +1,212 @@
+@use '../../styles/mixins' as *;
+/* Base Switch (Track/Background) */
+
+.mdk-switch {
+  @include inline_flex_align;
+
+  all: unset;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 200ms ease;
+  box-shadow: var(--mdk-shadow-inset);
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+}
+
+/* Thumb (Sliding Circle) */
+.mdk-switch__thumb {
+  display: block;
+  background-color: var(--mdk-color-white);
+  box-shadow: 0 2px 4px var(--mdk-switch-thumb-shadow);
+  transition: transform 200ms ease;
+  will-change: transform;
+}
+
+/* ========================================
+   SIZE VARIANTS
+   ======================================== */
+
+/* Small */
+.mdk-switch--sm {
+  width: 32px;
+  height: 18px;
+
+  .mdk-switch__thumb {
+    width: 14px;
+    height: 14px;
+    transform: translateX(2px);
+  }
+
+  &[data-state='checked'] .mdk-switch__thumb {
+    transform: translateX(16px);
+  }
+}
+
+/* Medium (Default) */
+.mdk-switch--md {
+  width: 42px;
+  height: 24px;
+
+  .mdk-switch__thumb {
+    width: 20px;
+    height: 20px;
+    transform: translateX(2px);
+  }
+
+  &[data-state='checked'] .mdk-switch__thumb {
+    transform: translateX(20px);
+  }
+}
+
+/* Large */
+.mdk-switch--lg {
+  width: 52px;
+  height: 30px;
+
+  .mdk-switch__thumb {
+    width: 26px;
+    height: 26px;
+    transform: translateX(2px);
+  }
+
+  &[data-state='checked'] .mdk-switch__thumb {
+    transform: translateX(24px);
+  }
+}
+
+/* ========================================
+   RADIUS VARIANTS
+   ======================================== */
+
+/* None (Square corners) */
+.mdk-switch--radius-none {
+  border-radius: 0;
+
+  .mdk-switch__thumb {
+    border-radius: 0;
+  }
+}
+
+/* Small (Slightly rounded) */
+.mdk-switch--radius-small {
+  border-radius: 4px;
+
+  .mdk-switch__thumb {
+    border-radius: 2px;
+  }
+}
+
+/* Medium (Moderately rounded) */
+.mdk-switch--radius-medium {
+  border-radius: 8px;
+
+  .mdk-switch__thumb {
+    border-radius: 6px;
+  }
+}
+
+/* Large (Very rounded) */
+.mdk-switch--radius-large {
+  border-radius: 12px;
+
+  .mdk-switch__thumb {
+    border-radius: 10px;
+  }
+}
+
+/* Full (Pill-shaped, fully rounded) */
+.mdk-switch--radius-full {
+  border-radius: 9999px;
+
+  .mdk-switch__thumb {
+    border-radius: 9999px;
+  }
+}
+
+/* ========================================
+   COLOR VARIANTS
+   ======================================== */
+
+/* Default (Gray/Neutral) */
+.mdk-switch--default {
+  background-color: var(--mdk-switch-unchecked-bg);
+
+  &[data-state='checked'] {
+    background-color: var(--mdk-color-gray-400);
+  }
+
+  &:focus-visible {
+    outline-color: var(--mdk-color-gray-400);
+  }
+}
+
+/* Primary (Orange) */
+.mdk-switch--primary {
+  background-color: var(--mdk-switch-unchecked-bg);
+
+  &[data-state='checked'] {
+    background-color: var(--mdk-color-primary);
+  }
+
+  &:focus-visible {
+    outline-color: var(--mdk-color-primary);
+  }
+}
+
+/* Success (Green) */
+.mdk-switch--success {
+  background-color: var(--mdk-switch-unchecked-bg);
+
+  &[data-state='checked'] {
+    background-color: rgb(var(--mdk-color-success));
+  }
+
+  &:focus-visible {
+    outline-color: rgb(var(--mdk-color-success));
+  }
+}
+
+/* Warning (Yellow) */
+.mdk-switch--warning {
+  background-color: var(--mdk-switch-unchecked-bg);
+
+  &[data-state='checked'] {
+    background-color: var(--mdk-color-warning);
+  }
+
+  &:focus-visible {
+    outline-color: var(--mdk-color-warning);
+  }
+}
+
+/* Error/Danger (Red) */
+.mdk-switch--error,
+.mdk-switch--danger {
+  background-color: var(--mdk-switch-unchecked-bg);
+
+  &[data-state='checked'] {
+    background-color: rgb(var(--mdk-color-error));
+  }
+
+  &:focus-visible {
+    outline-color: rgb(var(--mdk-color-error));
+  }
+}
+
+/* Hover effect */
+.mdk-switch:not(:disabled):hover {
+  opacity: 0.9;
+}
+
+/* Enhanced thumb shadow when checked */
+.mdk-switch[data-state='checked'] .mdk-switch__thumb {
+  box-shadow: 0 3px 6px var(--mdk-switch-thumb-shadow-checked);
+}

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

@@ -0,0 +1,21 @@
+/**
+ * Runnable example for Switch.
+ */
+import { useState } from 'react'
+import { Label, Switch } from '@tetherto/mdk-react-devkit'
+
+export const SwitchExample = () => {
+  const [enabled, setEnabled] = useState(true)
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Switch id="notify" checked={enabled} onCheckedChange={setEnabled} />
+        <Label htmlFor="notify">Enable notifications</Label>
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <Switch id="disabled" disabled />
+        <Label htmlFor="disabled">Disabled</Label>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,54 @@
+# Tabs
+
+Tabbed content panels built on Radix UI. Compose with `TabsList`,
+`TabsTrigger`, and `TabsContent`.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `defaultValue` | Optional | `string` | - | Uncontrolled initial active value |
+| `onValueChange` | Optional | `((value: string) => void)` | - | Fired when the active tab changes |
+| `orientation` | Optional | `"horizontal" \| "vertical"` | `"horizontal"` | Keyboard navigation orientation |
+| `value` | Optional | `string` | - | Controlled active tab value |
+| `variant` | Optional | `"default" \| "side" \| "underline"` | - | - |
+<!-- END GENERATED: props -->
+
+## `TabsList` / `TabsTrigger` 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.
+
+Both accept a `variant` prop that has no effect on `Tabs` itself. `TabsList` and
+`TabsTrigger` are internal sub-components not emitted to the registry, so this
+table is the source of truth for their `variant` until they are surfaced there.
+
+| Prop      | Status   | Type / Options | Default     | Description |
+| --------- | -------- | ---- | ----------- | ----------- |
+| `variant` | Optional | `"default" \| "side" \| "underline"` | `"default"` | `default` (baseline), `side` (left rail), or `underline` (per-tab underline indicator, white active label) |
+
+## Example
+
+```tsx
+<Tabs defaultValue="overview">
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="alerts">Alerts</TabsTrigger>
+    <TabsTrigger value="settings" disabled>Settings</TabsTrigger>
+  </TabsList>
+
+  <TabsContent value="overview">
+    <p>Operational metrics…</p>
+  </TabsContent>
+  <TabsContent value="alerts">
+    <CurrentAlerts data={[]} />
+  </TabsContent>
+</Tabs>
+```
+
+## Notes
+
+- Each `TabsContent` is matched to its `TabsTrigger` by `value`
+- Set `variant="side"` on `TabsList` and each `TabsTrigger` for a left-side tab rail layout
+- Set `variant="underline"` on `TabsList` and each `TabsTrigger` for a top tab bar with a per-tab underline
+  indicator and a white active label

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

@@ -0,0 +1,119 @@
+@use '../../styles/mixins' as *;
+.mdk_tabs {
+  &__list {
+    width: 100%;
+    position: relative;
+    display: inline-flex;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 0;
+      height: 1px;
+      background: var(--mdk-color-white-transparent);
+    }
+
+    &--side {
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  &__trigger {
+    @include inline_flex_align;
+
+    position: relative;
+    z-index: 1;
+    border: none;
+    cursor: pointer;
+    font-weight: 400;
+    padding: 0.875rem 0;
+    font-size: 0.875rem;
+    background: transparent;
+    justify-content: center;
+    transition: color 0.3s ease-in-out;
+    font-family: var(--font-mono);
+    color: var(--mdk-color-text-secondary);
+
+    &:not(:first-child) {
+      margin-left: 2rem;
+    }
+
+    &:hover:not([data-disabled]) {
+      color: var(--mdk-color-primary);
+    }
+
+    &[data-state='active'] {
+      text-shadow: 0 0 0.25px currentcolor;
+      color: var(--mdk-color-primary);
+    }
+
+    &[data-disabled] {
+      color: var(--mdk-color-text-disabled);
+      cursor: not-allowed;
+    }
+
+    &--side {
+      padding: 0.5rem 1.063rem;
+      height: 40px;
+      font-size: 14px;
+      color: var(--mdk-color-text-secondary);
+      border: 1px solid var(--mdk-button-secondary-border);
+      background: transparent;
+      transition:
+        color 0.3s ease-in-out,
+        background 0.3s ease-in-out,
+        border-color 0.3s ease-in-out;
+
+      &:not(:first-child) {
+        margin-left: 10px;
+      }
+
+      &[data-disabled] {
+        color: var(--mdk-color-gray-450);
+        background: var(--mdk-color-white-8);
+      }
+
+      &[data-state='active'],
+      &.active {
+        border-color: transparent;
+        background: var(--color-primary-transparent-20);
+        color: var(--mdk-color-primary);
+      }
+    }
+
+    // Underline variant: per-tab bottom-border indicator, white active label.
+    &--underline {
+      padding: 0.5rem 1rem;
+      font-family: inherit;
+      border-bottom: 2px solid transparent;
+      color: var(--mdk-color-text-disabled);
+      transition:
+        color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out;
+
+      &:not(:first-child) {
+        margin-left: 0;
+      }
+
+      &:hover:not([data-disabled]):not([data-state='active']) {
+        color: var(--mdk-color-text-secondary);
+      }
+
+      &[data-state='active'] {
+        text-shadow: none;
+        color: var(--mdk-color-white);
+        border-bottom-color: var(--mdk-color-primary);
+      }
+    }
+  }
+
+  &__content {
+    color: var(--mdk-color-text-secondary);
+    margin-top: 0.5rem;
+  }
+}

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

@@ -0,0 +1,25 @@
+/**
+ * Runnable example for Tabs.
+ */
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tetherto/mdk-react-devkit'
+
+export const TabsExample = () => {
+  return (
+    <Tabs defaultValue="overview">
+      <TabsList>
+        <TabsTrigger value="overview">Overview</TabsTrigger>
+        <TabsTrigger value="alerts">Alerts</TabsTrigger>
+        <TabsTrigger value="settings" disabled>
+          Settings
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="overview">
+        <p>Operational metrics will appear here.</p>
+      </TabsContent>
+      <TabsContent value="alerts">
+        <p>No active alerts.</p>
+      </TabsContent>
+    </Tabs>
+  )
+}