@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/src/primitives/components/date-picker/styles.scss

@@ -0,0 +1,461 @@
+@use '../../styles/mixins' as *;
+/**
+* Date Picker Component Styles
+*
+* A preset date-range picker:
+ * - Dark theme with black backgrounds
+ * - Orange primary color (#F7931A)
+ * - Transparent white borders and text
+ * - Modal interface for range picker
+ *
+ * react-day-picker v9 class names
+ */
+
+.mdk-date-picker__modal {
+  border-radius: 0px !important;
+}
+
+/* ===== Trigger Button ===== */
+.mdk-date-picker__trigger {
+  @include inline_flex_align;
+
+  justify-content: flex-start;
+  gap: 8px;
+  max-width: 245px;
+  width: fit-content;
+  padding: 8px 12px;
+  min-height: 40px;
+  background-color: var(--mdk-popover-bg);
+  border: 1px solid var(--mdk-button-secondary-border);
+  border-radius: 0;
+  color: var(--mdk-color-white);
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: 400;
+  cursor: pointer;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    color 0.2s;
+
+  &:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--mdk-color-primary) 20%, transparent);
+    border-color: var(--mdk-color-primary);
+    color: var(--mdk-color-primary);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mdk-color-primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &[data-state='open'] {
+    background-color: color-mix(in srgb, var(--mdk-color-primary) 20%, transparent);
+    border-color: var(--mdk-color-primary);
+    color: var(--mdk-color-primary);
+  }
+}
+
+.mdk-date-picker__icon {
+  width: 16px;
+  min-width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.mdk-date-picker__text {
+  @include text_ellipsis;
+}
+
+/* ===== Calendar Content (single date popover) ===== */
+.mdk-popover__content.mdk-date-picker__content {
+  width: auto !important;
+  max-width: none !important;
+  padding: 0;
+}
+
+/* ===== Calendar Base Styles (react-day-picker v9) ===== */
+.mdk-date-picker__calendar {
+  font-family: var(--font-mono);
+  color: var(--mdk-color-white);
+
+  /* Root */
+  &.rdp-root {
+    width: 100%;
+    --rdp-accent-color: var(--mdk-color-primary);
+    --rdp-accent-background-color: color-mix(in srgb, var(--mdk-color-primary) 20%, transparent);
+  }
+
+  /* Navigation bar */
+  .rdp-nav {
+    @include flex_align;
+
+    gap: 4px;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 1;
+  }
+
+  .rdp-button_previous,
+  .rdp-button_next {
+    @include inline_flex_align;
+
+    width: 28px;
+    height: 28px;
+    justify-content: center;
+    background-color: var(--mdk-color-surface);
+    border: 1px solid var(--mdk-button-secondary-border);
+    border-radius: 0;
+    color: var(--mdk-color-white);
+    cursor: pointer;
+    padding: 0;
+    transition:
+      background-color 0.2s,
+      border-color 0.2s;
+
+    &:hover:not(:disabled) {
+      background-color: var(--mdk-color-obsidian);
+      border-color: var(--mdk-color-primary);
+    }
+
+    &:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+  }
+
+  .rdp-chevron {
+    width: 14px;
+    height: 14px;
+    fill: currentColor;
+  }
+
+  .rdp-caption_label {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--mdk-color-white);
+  }
+
+  /* Months container */
+  .rdp-months {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    /* Keep calendars side-by-side - do NOT wrap */
+    flex-wrap: nowrap;
+    gap: 16px;
+    position: relative;
+    /* Prevent shrinking */
+    flex-shrink: 0;
+  }
+
+  .rdp-month {
+    flex: 1;
+    border: 1px solid var(--mdk-button-secondary-border);
+    background-color: rgba(var(--mdk-color-black), 0.5);
+    padding: 12px;
+    border-radius: 0;
+    position: relative;
+    width: fit-content;
+    @include flex_column_align_center;
+  }
+
+  .rdp-month_caption {
+    margin-bottom: 8px;
+  }
+
+  /* Month grid - use native table layout for proper column sizing */
+  .rdp-month_grid {
+    border-collapse: separate;
+    border-spacing: 4px;
+    width: 100%;
+  }
+
+  .rdp-weekday {
+    height: 24px;
+    text-align: center;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--mdk-color-text-disabled);
+    text-transform: uppercase;
+    padding: 0;
+  }
+
+  /* Day cells - let table auto-distribute width equally across 7 columns */
+  .rdp-day {
+    height: 25px;
+    margin-right: 2px;
+    padding: 0;
+    position: relative;
+    text-align: center;
+  }
+
+  /* Day button (the actual clickable element) */
+  .rdp-day_button {
+    @include inline_flex_align;
+
+    justify-content: center;
+    width: 27px;
+    height: 100%;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0 auto;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--mdk-color-white);
+    border-radius: 0;
+    cursor: pointer;
+    transition:
+      background-color 0.15s,
+      color 0.15s;
+
+    &:hover {
+      background-color: var(--mdk-color-white-transparent);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--mdk-color-primary);
+      outline-offset: -1px;
+      z-index: 1;
+    }
+  }
+
+  /* Selected day */
+  .rdp-selected .rdp-day_button {
+    background-color: var(--mdk-color-primary);
+    color: var(--mdk-button-primary-text);
+    font-weight: 500;
+
+    &:hover {
+      background-color: var(--mdk-color-primary);
+    }
+  }
+
+  /* Today */
+  .rdp-today .rdp-day_button {
+    font-weight: 600;
+    border: 1px solid var(--mdk-color-primary);
+  }
+
+  .rdp-today.rdp-selected .rdp-day_button {
+    color: var(--mdk-button-primary-text);
+  }
+
+  /* Outside current month */
+  .rdp-outside .rdp-day_button {
+    opacity: 0.3;
+  }
+
+  /* Disabled days */
+  .rdp-disabled .rdp-day_button {
+    opacity: 0.25;
+    cursor: not-allowed;
+  }
+
+  /* Range selection styles */
+  .rdp-range_start .rdp-day_button {
+    background-color: var(--mdk-color-primary);
+    color: var(--mdk-button-primary-text);
+    font-weight: 500;
+  }
+
+  .rdp-range_end .rdp-day_button {
+    background-color: var(--mdk-color-primary);
+    color: var(--mdk-button-primary-text);
+    font-weight: 500;
+  }
+
+  .rdp-range_middle .rdp-day_button {
+    background-color: color-mix(in srgb, var(--mdk-color-primary) 20%, transparent);
+    color: var(--mdk-color-white);
+  }
+
+  /* Dropdown (year/month selectors if used) */
+  .rdp-dropdown {
+    background-color: var(--mdk-popover-bg);
+    border: 1px solid var(--mdk-button-secondary-border);
+    color: var(--mdk-color-white);
+    padding: 4px;
+    border-radius: 0;
+  }
+}
+
+/* ===== Modal Layout (DateRangePicker) ===== */
+/* Combined selector to override Popover's max-width: 500px */
+.mdk-popover__content.mdk-date-picker__modal {
+  width: auto !important;
+  max-width: none !important;
+  padding: 16px;
+  background-color: var(--mdk-color-surface);
+  border: 1px solid var(--mdk-button-secondary-border);
+}
+
+.mdk-date-picker__modal-header {
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--mdk-button-secondary-border);
+  margin-bottom: 16px;
+}
+
+.mdk-date-picker__modal-title {
+  font-family: var(--font-mono);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 18px;
+  color: var(--mdk-color-white);
+  margin: 0;
+}
+
+.mdk-date-picker__modal-body {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+.mdk-date-picker__calendar-container {
+  @include flex_justify_center;
+
+  /* Prevent the container from shrinking calendars */
+  min-width: 0;
+  width: 100%;
+}
+
+/* ===== Meta Section (Summary + Presets) ===== */
+.mdk-date-picker__meta {
+  @include flex_align;
+
+  gap: 16px;
+  min-width: 0;
+}
+
+.mdk-date-picker__summary {
+  @include flex_column;
+
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  gap: 2px;
+  padding: 8px 12px;
+  background-color: var(--mdk-color-obsidian);
+  border: 1px solid var(--mdk-button-secondary-border);
+  font-size: 14px;
+  color: var(--mdk-color-text-disabled);
+  height: 100%;
+  justify-content: center;
+}
+
+.mdk-date-picker__summary-title {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+}
+
+.mdk-date-picker__summary-dates {
+  @include flex_align;
+
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.mdk-date-picker__summary-date {
+  color: var(--mdk-color-primary);
+  font-weight: 500;
+}
+
+.mdk-date-picker__summary-count {
+  font-size: 14px;
+}
+
+.mdk-date-picker__presets {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  flex: 1;
+  min-width: 0;
+  gap: 4px;
+  padding: 12px;
+  white-space: nowrap;
+  background-color: var(--mdk-color-obsidian);
+  border: 1px solid var(--mdk-button-secondary-border);
+
+  button {
+    padding: 2px 8px;
+    height: auto;
+  }
+}
+
+/* ===== Modal Footer ===== */
+.mdk-date-picker__modal-footer {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 16px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--mdk-button-secondary-border);
+
+  button {
+    flex: 1;
+    min-width: 120px;
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}
+
+/* ===== Panel Labels (Start/End Date for range picker) ===== */
+.mdk-date-picker__calendar-container {
+  /* Adjust nav position to account for label margin */
+  .rdp-nav {
+    top: 32px;
+    @include flex_between;
+
+    width: 100%;
+
+    .rdp-button_previous {
+      margin-left: 25px;
+    }
+  }
+
+  .rdp-month {
+    position: relative;
+    margin-top: 20px;
+  }
+
+  .rdp-month::before {
+    position: absolute;
+    left: 0px;
+    top: -20px;
+    font-size: 12px;
+    font-weight: 800;
+    line-height: 14px;
+    letter-spacing: 1.32px;
+    text-transform: uppercase;
+    color: var(--mdk-color-text-disabled);
+  }
+
+  .rdp-month:not(:last-child)::before {
+    content: 'start date';
+  }
+
+  .rdp-month:last-child::before {
+    content: 'end date';
+  }
+
+  /* Single month picker - no labels */
+  .rdp-months:has(.rdp-month:only-child) .rdp-month {
+    margin-top: 0;
+
+    &::before {
+      display: none;
+    }
+  }
+}

package/src/primitives/components/detail-legend/USAGE.md

@@ -0,0 +1,59 @@
+# `DetailLegend`
+
+An enhanced chart legend that displays color swatches, current values, units, and percentage-change indicators. Each item is a clickable button for toggling dataset visibility.
+
+<!-- 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 | `DetailLegendItem[]` | - | Legend items to display |
+| `className` | Optional | `string` | - | Custom class name |
+| `onToggle` | Optional | `((label: string, index: number) => void)` | - | Callback when a legend item is toggled |
+
+### `DetailLegendItem`
+
+| Field | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `color` | Required | `string` | - | Hex color for the default swatch (border, plus 20% opacity fill) and the `color` of a custom `icon` |
+| `label` | Required | `string` | - | Display label; also passed to `onToggle` |
+| `currentValue` | Optional | `{ value: string \| number; unit?: string }` | - | Value shown below the label, numbers formatted, with optional `unit`; also the row that holds `percentChange` |
+| `hidden` | Optional | `boolean` | - | Dims the item (30% opacity) to show its dataset is hidden |
+| `icon` | Optional | `React.ReactNode` | - | Custom icon replacing the default color swatch |
+| `percentChange` | Optional | `number \| null` | - | Percentage change shown after `currentValue`: positive as a green ▲, negative as a red ▼; hidden when `0`, `null` or without `currentValue` |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+import { DetailLegend } from "@tetherto/mdk-react-devkit"
+
+const [hiddenSets, setHiddenSets] = useState<Record<number, boolean>>({})
+
+<DetailLegend
+  items={[
+    {
+      label: "Hashrate",
+      color: "#59E8E8",
+      currentValue: { value: 3590, unit: "TH/s" },
+      percentChange: 2.5,
+      hidden: hiddenSets[0],
+    },
+    {
+      label: "Power",
+      color: "#FF9500",
+      currentValue: { value: 1200, unit: "W" },
+      percentChange: -0.8,
+      hidden: hiddenSets[1],
+    },
+  ]}
+  onToggle={(label, index) =>
+    setHiddenSets((prev) => ({ ...prev, [index]: !prev[index] }))
+  }
+/>
+```
+
+## Notes
+
+- Returns `null` when `items` is empty or undefined
+- `percentChange` of `0` is treated as "no change" and the indicator is not rendered

package/src/primitives/components/detail-legend/detail-legend.example.tsx

@@ -0,0 +1,50 @@
+/**
+ * Runnable example for DetailLegend.
+ */
+import { useState } from 'react'
+import { DetailLegend } from '@tetherto/mdk-react-devkit'
+
+const ITEMS = [
+  {
+    label: 'Hashrate',
+    color: '#59E8E8',
+    currentValue: { value: 3590, unit: 'TH/s' },
+    percentChange: 2.5,
+  },
+  {
+    label: 'Power',
+    color: '#FF9500',
+    currentValue: { value: 1200, unit: 'W' },
+    percentChange: -0.8,
+  },
+  {
+    label: 'Efficiency',
+    color: '#A78BFA',
+    currentValue: { value: 28.5, unit: 'J/TH' },
+    percentChange: 0,
+  },
+]
+
+export const DetailLegendExample = () => {
+  const [hidden, setHidden] = useState<Record<number, boolean>>({})
+
+  const items = ITEMS.map((item, i) => ({ ...item, hidden: !!hidden[i] }))
+
+  return (
+    <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
+      {/* Interactive — click items to toggle visibility */}
+      <DetailLegend
+        items={items}
+        onToggle={(_, index) => setHidden((prev) => ({ ...prev, [index]: !prev[index] }))}
+      />
+
+      {/* Static — no onToggle handler */}
+      <DetailLegend
+        items={[
+          { label: 'Accepted', color: '#4ADE80', currentValue: { value: '98.7', unit: '%' } },
+          { label: 'Rejected', color: '#F87171', currentValue: { value: '1.3', unit: '%' } },
+        ]}
+      />
+    </div>
+  )
+}

package/src/primitives/components/detail-legend/styles.scss

@@ -0,0 +1,87 @@
+@use '../../styles/mixins' as *;
+
+.mdk-detail-legend {
+  @include flex_wrap;
+
+  gap: 25px;
+  row-gap: 16px;
+
+  &__item {
+    @include flex_row;
+
+    gap: 8px;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+    border: none;
+    background: none;
+    padding: 0;
+    text-align: left;
+
+    &--hidden {
+      opacity: 0.3;
+    }
+  }
+
+  &__icon {
+    @include flex_align_start;
+
+    width: 20px;
+    flex-shrink: 0;
+  }
+
+  &__color-box {
+    width: 12px;
+    height: 12px;
+    flex-shrink: 0;
+  }
+
+  &__content {
+    @include flex_column;
+  }
+
+  &__label {
+    font-size: 12px;
+    color: var(--mdk-color-white-7);
+  }
+
+  &__value-row {
+    @include flex_center;
+
+    gap: 10px;
+    margin-bottom: 1rem;
+  }
+
+  &__value {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--mdk-color-white);
+  }
+
+  &__unit {
+    @include text_ellipsis;
+
+    flex: 1;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 14px;
+    text-align: start;
+    color: var(--mdk-color-white-7);
+    min-width: 0;
+  }
+
+  &__percent-change {
+    @include inline_flex_align;
+
+    gap: 2px;
+    font-size: 12px;
+    font-weight: 600;
+
+    &--positive {
+      color: rgb(var(--mdk-color-success));
+    }
+
+    &--negative {
+      color: rgb(var(--mdk-color-error));
+    }
+  }
+}