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

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

@@ -0,0 +1,355 @@
+@use '../../styles/mixins' as *;
+/* ========================================
+   Radio Component Styles
+   ======================================== */
+
+/* Base Radio */
+.mdk-radio {
+  @include inline_flex_align;
+
+  all: unset;
+  justify-content: center;
+  border: 2px solid var(--mdk-color-background-light);
+  background-color: transparent;
+  cursor: pointer;
+  transition: all 200ms ease;
+  flex-shrink: 0;
+  position: relative;
+
+  &:hover {
+    border-color: currentColor;
+    opacity: 0.8;
+  }
+
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &[data-state='checked'] {
+    border-color: currentColor;
+  }
+}
+
+/* Indicator (Inner dot) */
+.mdk-radio__indicator {
+  @include flex_center;
+
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+}
+
+/* ========================================
+   SIZE VARIANTS
+   ======================================== */
+
+/* Small */
+.mdk-radio--sm {
+  width: 16px;
+  height: 16px;
+
+  .mdk-radio__indicator::after {
+    width: 8px;
+    height: 8px;
+  }
+}
+
+/* Medium (Default) */
+.mdk-radio--md {
+  width: 20px;
+  height: 20px;
+
+  .mdk-radio__indicator::after {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+/* Large */
+.mdk-radio--lg {
+  width: 24px;
+  height: 24px;
+
+  .mdk-radio__indicator::after {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+/* ========================================
+   RADIUS VARIANTS
+   ======================================== */
+
+/* None (Square corners) */
+.mdk-radio--radius-none {
+  border-radius: 0;
+}
+
+/* Small (Slightly rounded) */
+.mdk-radio--radius-small {
+  border-radius: 4px;
+}
+
+/* Medium (Moderately rounded) */
+.mdk-radio--radius-medium {
+  border-radius: 6px;
+}
+
+/* Large (Very rounded) */
+.mdk-radio--radius-large {
+  border-radius: 8px;
+}
+
+/* Full (Circular - default for radio) */
+.mdk-radio--radius-full {
+  border-radius: 9999px;
+}
+
+/* ========================================
+   COLOR VARIANTS
+   ======================================== */
+
+/* Default */
+.mdk-radio--default {
+  color: var(--mdk-color-gray-400);
+}
+
+/* Primary  */
+.mdk-radio--primary {
+  color: var(--mdk-color-primary);
+
+  &[data-state='checked'] {
+    background-color: transparent;
+  }
+}
+
+/* Success */
+.mdk-radio--success {
+  color: rgb(var(--mdk-color-success));
+
+  &[data-state='checked'] {
+    background-color: transparent;
+  }
+}
+
+/* Warning  */
+.mdk-radio--warning {
+  color: var(--mdk-color-warning);
+
+  &[data-state='checked'] {
+    background-color: transparent;
+  }
+}
+
+/* Error/Danger  */
+.mdk-radio--error {
+  color: rgb(var(--mdk-color-error));
+
+  &[data-state='checked'] {
+    background-color: transparent;
+  }
+}
+
+/* ========================================
+   RadioGroup Styles
+   ======================================== */
+
+.mdk-radio-group {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.mdk-radio-group--horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+
+.mdk-radio-group--vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.mdk-radio-group--no-gap {
+  gap: 0;
+
+  :hover {
+    opacity: 1;
+    border-color: var(--mdk-border-default-color);
+  }
+  button:not(:first-child) {
+    border-left: 0;
+  }
+}
+
+/* ========================================
+   RadioCard Component Styles
+   ======================================== */
+
+/* Base RadioCard */
+.mdk-radio-card {
+  @include inline_flex_align;
+
+  all: unset;
+  text-align: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 200ms ease;
+  border: 2px solid var(--mdk-border-default-color);
+  background-color: transparent;
+  color: var(--mdk-color-text-secondary);
+  white-space: nowrap;
+  user-select: none;
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+/* ========================================
+   SIZE VARIANTS
+   ======================================== */
+
+/* Small */
+.mdk-radio-card--sm {
+  padding-inline: 0.5rem;
+  font-size: 12px;
+  height: 24px;
+}
+
+/* Medium (Default) */
+.mdk-radio-card--md {
+  padding: 0.375rem 1rem;
+  font-size: 14px;
+  line-height: 1.5;
+  min-width: 60px;
+  height: 32px;
+}
+
+/* Large */
+.mdk-radio-card--lg {
+  padding: 0.5rem 1.25rem;
+  font-size: 16px;
+  line-height: 1.5;
+  min-width: 72px;
+  height: 40px;
+}
+
+/* ========================================
+   RADIUS VARIANTS
+   ======================================== */
+
+/* None (Square corners) */
+.mdk-radio-card--radius-none {
+  border-radius: 0;
+}
+
+/* Small (Slightly rounded) */
+.mdk-radio-card--radius-small {
+  border-radius: 4px;
+}
+
+/* Medium (Moderately rounded) */
+.mdk-radio-card--radius-medium {
+  border-radius: 6px;
+}
+
+/* Large (Very rounded) */
+.mdk-radio-card--radius-large {
+  border-radius: 8px;
+}
+
+/* Full (Pill-shaped) */
+.mdk-radio-card--radius-full {
+  border-radius: 9999px;
+}
+
+/* ========================================
+   COLOR VARIANTS
+   ======================================== */
+
+/* Default (Gray/Neutral) */
+.mdk-radio-card--default {
+  color: var(--mdk-color-text-disabled);
+  background: transparent;
+
+  &[data-state='checked'] {
+    border-color: var(--mdk-border-default-color);
+    color: var(--mdk-color-white);
+  }
+}
+
+/* Primary (Orange) */
+.mdk-radio-card--primary {
+  color: var(--mdk-color-text-secondary);
+
+  &[data-state='checked'] {
+    background-color: var(--mdk-color-primary);
+    border-color: var(--mdk-color-primary);
+    color: var(--mdk-button-primary-text);
+  }
+
+  &:hover {
+    border-color: var(--mdk-color-primary);
+  }
+}
+
+/* Success (Green) */
+.mdk-radio-card--success {
+  color: var(--mdk-color-text-secondary);
+
+  &[data-state='checked'] {
+    background-color: rgb(var(--mdk-color-success));
+    border-color: rgb(var(--mdk-color-success));
+    color: var(--mdk-button-primary-text);
+  }
+
+  &:hover {
+    border-color: rgb(var(--mdk-color-success));
+  }
+}
+
+/* Warning (Yellow) */
+.mdk-radio-card--warning {
+  color: var(--mdk-color-text-secondary);
+
+  &[data-state='checked'] {
+    background-color: var(--mdk-color-warning);
+    border-color: var(--mdk-color-warning);
+    color: var(--mdk-button-primary-text);
+  }
+
+  &:hover {
+    border-color: var(--mdk-color-warning);
+  }
+}
+
+/* Error/Danger (Red) */
+.mdk-radio-card--error {
+  color: var(--mdk-color-text-secondary);
+
+  &[data-state='checked'] {
+    background-color: rgb(var(--mdk-color-error));
+    border-color: rgb(var(--mdk-color-error));
+    color: var(--mdk-color-white);
+  }
+
+  &:hover {
+    border-color: rgb(var(--mdk-color-error));
+  }
+}

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

@@ -0,0 +1,29 @@
+# Select
+
+Compound Radix-based select with `Select`, `SelectTrigger`, `SelectContent`,
+`SelectItem`, `SelectValue`, and `SelectGroup` pieces.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `allowClear` | Optional | `boolean` | `false` | Show a clear button when a value is selected |
+| `defaultValue` | Optional | `string` | - | Uncontrolled initial value |
+| `onValueChange` | Optional | `((value: string) => void)` | - | Setter for the value |
+| `value` | Optional | `string` | - | Controlled value |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+<Select value={value} onValueChange={setValue}>
+  <SelectTrigger>
+    <SelectValue placeholder="Select a container" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="cont-A">Container A</SelectItem>
+    <SelectItem value="cont-B">Container B</SelectItem>
+  </SelectContent>
+</Select>
+```

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

@@ -0,0 +1,27 @@
+/**
+ * Runnable example for Select.
+ */
+import { useState } from 'react'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tetherto/mdk-react-devkit'
+
+export const SelectExample = () => {
+  const [value, setValue] = useState<string>()
+  return (
+    <Select value={value} onValueChange={setValue}>
+      <SelectTrigger style={{ width: 240 }}>
+        <SelectValue placeholder="Select a container" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="cont-A">Container A</SelectItem>
+        <SelectItem value="cont-B">Container B</SelectItem>
+        <SelectItem value="cont-C">Container C</SelectItem>
+      </SelectContent>
+    </Select>
+  )
+}

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

@@ -0,0 +1,215 @@
+@use '../../styles/mixins' as *;
+
+// Size variant variables
+$select-lg-padding: 8px 8px 8px 14px;
+$select-lg-font-size: 14px;
+$select-lg-gap: 8px;
+$select-lg-height: 40px;
+
+$select-md-padding: 4px 4px 4px 12px;
+$select-md-font-size: 12px;
+$select-md-gap: 8px;
+$select-md-height: 32px;
+
+$select-sm-padding: 4px 4px 4px 8px;
+$select-sm-font-size: 12px;
+$select-sm-gap: 10px;
+$select-sm-height: 24px;
+
+$select-colored-gap: 12px;
+
+.mdk-select__trigger {
+  @include inline_flex_align;
+
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: 400;
+  border-radius: 0;
+  user-select: none;
+  line-height: normal;
+  font-family: var(--font-mono);
+  justify-content: space-between;
+  color: var(--mdk-color-white-7);
+  border: 1px solid var(--mdk-color-white-2);
+  background: var(--mdk-color-background-dark);
+  transition:
+    border-color 0.3s,
+    color 0.3s;
+
+  &[aria-invalid='true'] {
+    border-color: rgb(var(--mdk-color-error));
+  }
+  &:hover {
+    border-color: var(--mdk-color-primary);
+  }
+
+  &[data-state='open'] {
+    border-color: var(--mdk-color-primary);
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
+
+  &[data-placeholder] {
+    color: var(--mdk-color-white-7);
+  }
+
+  &[data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  // Size variants
+  &--lg {
+    gap: $select-lg-gap;
+    min-height: $select-lg-height;
+    padding: $select-lg-padding;
+    font-size: $select-lg-font-size;
+  }
+
+  &--md {
+    gap: $select-md-gap;
+    min-height: $select-md-height;
+    padding: $select-md-padding;
+    font-size: $select-md-font-size;
+  }
+
+  &--sm {
+    gap: $select-sm-gap;
+    min-height: $select-sm-height;
+    padding: $select-sm-padding;
+    font-size: $select-sm-font-size;
+
+    .mdk-select__icon {
+      width: 18px;
+      height: 18px;
+    }
+  }
+
+  // Colored variant
+  &--colored {
+    min-height: $select-sm-height;
+    gap: $select-colored-gap;
+    border: 1px solid transparent;
+    background: var(--select-bg, var(--mdk-color-primary-10));
+    color: var(--select-color, var(--mdk-color-primary));
+
+    &:hover,
+    &[data-state='open'] {
+      border-color: var(--select-color, var(--mdk-color-primary));
+    }
+
+    &[data-placeholder] {
+      color: var(--select-color, var(--mdk-color-primary));
+    }
+
+    .mdk-select__icon {
+      width: 18px;
+      height: 18px;
+      color: var(--select-color, var(--mdk-color-primary));
+    }
+  }
+}
+
+.mdk-select__icon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: var(--mdk-color-white-7);
+  transition:
+    transform 0.3s ease,
+    color 0.3s ease;
+}
+
+.mdk-select__trigger[data-state='open'] .mdk-select__icon {
+  transform: rotate(180deg);
+}
+
+.mdk-select__content {
+  z-index: 10000;
+  overflow: hidden;
+  border-radius: 0;
+  color: var(--mdk-popover-text);
+  box-shadow: var(--mdk-shadow-md);
+  border: 1px solid var(--mdk-color-white-2);
+  background-color: var(--mdk-color-background-dark);
+}
+
+.mdk-select__viewport {
+  &--popper {
+    width: var(--radix-select-trigger-width);
+    max-height: min(320px, var(--radix-select-content-available-height));
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+}
+
+.mdk-select__item {
+  @include flex_align;
+
+  position: relative;
+  padding: 8px 16px;
+  padding-right: 2rem;
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 0;
+  color: var(--mdk-color-white-7);
+  transition:
+    background-color 0.3s,
+    color 0.3s;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid var(--mdk-color-white-transparent);
+  }
+
+  &:hover:not([data-state='checked']) {
+    color: var(--mdk-color-primary);
+    background-color: var(--mdk-color-primary-10);
+  }
+
+  &[data-state='checked'] {
+    color: var(--select-item-color, var(--mdk-color-primary)) !important;
+    background-color: var(--select-item-bg, var(--mdk-color-primary-10)) !important;
+  }
+
+  &[data-highlighted]:not(:hover):not([data-state='checked']) {
+    outline: none;
+    background-color: transparent !important;
+    color: var(--mdk-select-item-text) !important;
+  }
+
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+.mdk-select__item-indicator {
+  @include flex_center;
+
+  position: absolute;
+  right: 0.75rem;
+  color: var(--mdk-color-primary);
+}
+
+.mdk-select__label {
+  padding: 0.5rem 0.75rem;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--mdk-color-text-secondary);
+}
+
+.mdk-select__separator {
+  height: 1px;
+  margin: 4px 0;
+  background-color: var(--mdk-popover-border);
+}

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

@@ -0,0 +1,47 @@
+# Sidebar
+
+Application sidebar with collapsible state (persisted via `localStorage`),
+optional overlay mode, and item-click + active-item highlighting.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `items` | Required | `SidebarMenuItem[]` | - | Menu items (supports nested `items`) |
+| `activeId` | Optional | `string` | - | Currently active item id |
+| `className` | Optional | `string` | - | Additional class names |
+| `defaultExpanded` | Optional | `boolean` | `false` | Initial expanded state |
+| `expanded` | Optional | `boolean` | - | Controlled expanded state |
+| `header` | Optional | `React.ReactNode` | - | Header content (e.g. logo, app name) |
+| `onClose` | Optional | `VoidFunction` | - | Called when the backdrop or ESC closes |
+| `onExpandedChange` | Optional | `((expanded: boolean) => void)` | - | Setter for the expanded state |
+| `onItemClick` | Optional | `((item: SidebarMenuItem) => void)` | - | Item-click handler |
+| `overlay` | Optional | `boolean` | `false` | Show as fixed overlay with backdrop |
+| `visible` | Optional | `boolean` | `true` | Hide entirely without unmounting |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+<Sidebar
+  items={[
+    { id: "/dashboard", label: "Dashboard" },
+    { id: "/alerts", label: "Alerts" },
+  ]}
+  activeId={location.pathname}
+  onItemClick={({ id }) => navigate(id)}
+/>
+```
+
+## Data contracts
+
+```ts
+type SidebarMenuItem = {
+  id: string;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  items?: SidebarMenuItem[];
+};
+```

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

@@ -0,0 +1,24 @@
+/**
+ * Runnable example for Sidebar.
+ */
+import { useState } from 'react'
+import { Sidebar } from '@tetherto/mdk-react-devkit'
+
+const items = [
+  { id: '/dashboard', label: 'Dashboard' },
+  { id: '/alerts', label: 'Alerts' },
+  { id: '/devices', label: 'Devices' },
+  { id: '/settings', label: 'Settings' },
+]
+
+export const SidebarExample = () => {
+  const [active, setActive] = useState('/dashboard')
+  return (
+    <Sidebar
+      items={items}
+      activeId={active}
+      onItemClick={(item) => setActive(item.id)}
+      defaultExpanded
+    />
+  )
+}