@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

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

@@ -0,0 +1,178 @@
+@use '../../styles/mixins' as *;
+.mdk-pagination {
+  @include flex_center_justify_end;
+
+  flex-wrap: wrap;
+  gap: 12px;
+  font-family: var(--font-mono);
+
+  &__total {
+    font-size: 14px;
+    color: rgb(var(--mdk-color-primary));
+    margin-right: auto;
+  }
+
+  &__controls,
+  &__pages {
+    @include flex_align;
+
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  &__ellipsis {
+    @include flex_center;
+    position: relative;
+    min-width: 32px;
+    height: 32px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    overflow: hidden;
+
+    &--dot,
+    &--arrow {
+      position: absolute;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      color: rgba(var(--mdk-color-white-rgb), 0.25);
+    }
+
+    &--dot {
+      font-size: 14px;
+      opacity: 1;
+      transform: scale(1) translateY(0);
+      letter-spacing: 0.2rem;
+    }
+
+    &--arrow {
+      font-size: 16px;
+      color: var(--mdk-color-primary);
+      opacity: 0;
+      transform: scale(0.5) translateY(10px);
+    }
+
+    &:hover:not(:disabled) {
+      .mdk-pagination__ellipsis--dot {
+        opacity: 0;
+        transform: scale(0.5) translateY(-10px);
+      }
+
+      .mdk-pagination__ellipsis--arrow {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+    }
+  }
+
+  &__size-changer {
+    @include flex_align;
+
+    &--trigger {
+      height: 32px;
+      outline: none;
+      padding: 0 8px;
+      min-width: 32px;
+      font-size: 14px;
+      min-height: unset;
+      font-family: var(--font-mono);
+      background: var(--mdk-color-surface);
+      color: rgba(var(--mdk-color-white-rgb), 0.8);
+      border: 1px solid var(--mdk-border-default-color);
+
+      &[data-state='open'] {
+        border-color: var(--mdk-color-primary);
+        color: rgba(var(--mdk-color-white-rgb), 0.4);
+
+        .mdk-select__icon {
+          color: rgba(var(--mdk-color-white-rgb), 0.4);
+        }
+        box-shadow: 0 0 0 2px var(--mdk-cascader-box-shadow-color);
+      }
+
+      &:focus {
+        box-shadow: unset;
+      }
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    &--item {
+      font-size: 14px;
+      color: rgba(var(--mdk-color-white-rgb), 0.8);
+      padding: 4px 8px;
+      border-radius: 0;
+
+      .mdk-select__item-indicator {
+        display: none;
+      }
+
+      &:hover,
+      &[data-highlighted] {
+        background: var(--mdk-cascader-active-bg);
+        color: var(--mdk-color-primary);
+      }
+    }
+  }
+
+  &__button {
+    min-width: 32px;
+    min-height: 32px;
+    height: 32px;
+    font-size: 14px;
+    color: var(--mdk-color-primary);
+    transition:
+      background-color 0.2s,
+      color 0.2s;
+
+    &--prev,
+    &--next {
+      width: 32px;
+      min-width: 32px;
+      height: 32px;
+      min-height: 32px;
+      padding: 0;
+      color: rgba(var(--mdk-color-white-rgb), 0.8);
+
+      .mdk-button__content {
+        padding: 0;
+      }
+
+      &:hover {
+        border-color: var(--mdk-button-secondary-border);
+        color: rgba(var(--mdk-color-white-rgb), 0.8);
+        background: var(--mdk-button-primary-bg-hover-overlay);
+      }
+    }
+
+    &--page {
+      height: 32px;
+      min-width: 32px;
+      min-height: 32px;
+      padding: 0 8px;
+
+      .mdk-button__content {
+        padding: 0;
+      }
+    }
+
+    &--active {
+      border: none;
+      background: color-mix(in srgb, var(--mdk-color-primary) 20%, transparent);
+    }
+
+    &:not(&--prev):not(&--next):hover {
+      border-color: transparent;
+      color: rgba(var(--mdk-color-white-rgb), 0.7);
+      background: var(--mdk-color-primary);
+    }
+  }
+
+  // Disabled state
+  &--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,78 @@
+# Popover
+
+Floating panel anchored to a trigger element. Built on Radix UI; use the
+composable parts for full control, or `SimplePopover` for the common case.
+
+<!-- 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 |
+|------|--------|----------------|---------|-------------|
+| `content` | Required | `React.ReactNode` | - | Popover content |
+| `trigger` | Required | `React.ReactNode` | - | Element that triggers the popover |
+| `align` | Optional | `"center" \| "start" \| "end"` | `"center"` | Alignment of the popover |
+| `className` | Optional | `string` | - | Additional class for content |
+| `onOpenChange` | Optional | `((open: boolean) => void)` | - | Callback when open state changes |
+| `open` | Optional | `boolean` | - | Controlled open state |
+| `showArrow` | Optional | `boolean` | `false` | Whether to show the arrow |
+| `showClose` | Optional | `boolean` | `false` | Whether to show a close button |
+| `side` | Optional | `"left" \| "right" \| "top" \| "bottom"` | `"bottom"` | Position of the popover relative to trigger |
+| `sideOffset` | Optional | `number` | `8` | Distance from the trigger in pixels |
+<!-- END GENERATED: props -->
+
+## Composition
+
+```tsx
+<Popover>
+  <PopoverTrigger asChild><Button>Open</Button></PopoverTrigger>
+  <PopoverContent side="bottom" align="start" showArrow showClose>
+    <p>Hello!</p>
+  </PopoverContent>
+</Popover>
+```
+
+## `Popover` (root) 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.
+
+| Prop           | Status   | Type / Options | Default | Description                 |
+| -------------- | -------- | --------- | ------- | --------------------------- |
+| `open`         | Optional | `boolean` | —       | Controlled open state       |
+| `defaultOpen`  | Optional | `boolean` | `false` | Uncontrolled initial state  |
+| `onOpenChange` | Optional | `(open: boolean) => void` | —       | Open-state change handler   |
+| `modal`        | Optional | `boolean` | `false` | Trap focus inside the panel |
+
+## `PopoverContent` Props detail
+
+| Prop         | Status   | Type / Options | Default    | Description                    |
+| ------------ | -------- | ---------------------------------------- | ---------- | ------------------------------ |
+| `side`       | Optional | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"` | Side relative to the trigger   |
+| `align`      | Optional | `"start" \| "center" \| "end"`           | `"center"` | Alignment along the side       |
+| `sideOffset` | Optional | `number`                                 | `8`        | Distance from the trigger (px) |
+| `showArrow`  | Optional | `boolean`                                | `false`    | Render a directional arrow     |
+| `showClose`  | Optional | `boolean`                                | `false`    | Render a close (×) button      |
+| `className`  | Optional | `string`                                 | —          | Content class names            |
+
+## Example
+
+```tsx
+<Popover>
+  <PopoverTrigger asChild>
+    <Button>Filters</Button>
+  </PopoverTrigger>
+  <PopoverContent side="bottom" align="end" showArrow>
+    <FilterForm />
+  </PopoverContent>
+</Popover>
+```
+
+For the common trigger-plus-panel case, prefer `SimplePopover`:
+
+```tsx
+<SimplePopover trigger={<Button>Open</Button>} content={<p>Hello</p>} />
+```
+
+## Notes
+
+- `PopoverContent` automatically portals to `document.body`
+- For tooltips that appear on hover, use `<Tooltip>` instead

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

@@ -0,0 +1,20 @@
+/**
+ * Runnable example for Popover.
+ */
+import { Button, Popover, PopoverContent, PopoverTrigger } from '@tetherto/mdk-react-devkit'
+
+export const PopoverExample = () => {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>Filters</Button>
+      </PopoverTrigger>
+      <PopoverContent side="bottom" align="start" showArrow showClose>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 220 }}>
+          <strong>Filter by</strong>
+          <p style={{ margin: 0 }}>Place your filter form here.</p>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,162 @@
+@use '../../styles/mixins' as *;
+/**
+* Popover Component Styles
+*
+ * - Dark background (SIMPLE_BLACK #000000)
+ * - Smooth animations
+ * - Responsive width constraints
+ */
+
+.mdk-popover__content {
+  /* Layout */
+  width: 100%;
+  max-width: 500px;
+  padding: 16px;
+  z-index: 10001;
+
+  /* Typography */
+  font-family: var(--font-mono);
+
+  /* Colors */
+  background-color: var(--mdk-popover-bg, #000000);
+  color: var(--mdk-popover-text, var(--mdk-color-white, #ffffff));
+  border: 1px solid
+    var(--mdk-popover-border, var(--mdk-color-white-transparent, #ffffff1a));
+
+  /* Effects */
+  box-shadow: var(--mdk-shadow-md);
+  border-radius: 4px;
+
+  /* Position relative for close button */
+  position: relative;
+
+  /* Animations */
+  animation-duration: 0.2s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-fill-mode: forwards;
+
+  /* Entry animations based on side */
+  &[data-state='open'][data-side='top'] {
+    animation-name: mdk-popover-slide-down-fade;
+  }
+
+  &[data-state='open'][data-side='right'] {
+    animation-name: mdk-popover-slide-left-fade;
+  }
+
+  &[data-state='open'][data-side='bottom'] {
+    animation-name: mdk-popover-slide-up-fade;
+  }
+
+  &[data-state='open'][data-side='left'] {
+    animation-name: mdk-popover-slide-right-fade;
+  }
+
+  /* Exit animations */
+  &[data-state='closed'] {
+    animation-name: mdk-popover-fade-out;
+    animation-duration: 0.15s;
+  }
+
+  /* Responsive: Mobile adjustments */
+  @media (max-width: 768px) {
+    max-width: calc(100vw - 32px);
+    min-width: 250px;
+  }
+}
+
+/* Arrow styling */
+.mdk-popover__arrow {
+  fill: var(--mdk-popover-bg, #000000);
+  filter: drop-shadow(0 0 1px var(--mdk-popover-border, #ffffff1a));
+}
+
+/* Close button */
+.mdk-popover__close {
+  @include inline_flex_align;
+  
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  border-radius: 4px;
+  background: transparent;
+  border: none;
+  color: var(--mdk-popover-text, var(--mdk-color-white, #ffffff));
+  opacity: 0.7;
+  cursor: pointer;
+  transition:
+    opacity 0.2s,
+    background-color 0.2s;
+
+  &:hover {
+    opacity: 1;
+    background-color: var(--mdk-color-white-transparent, #ffffff1a);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mdk-color-primary, #f7931a);
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+/* Animations */
+@keyframes mdk-popover-slide-up-fade {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes mdk-popover-slide-down-fade {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes mdk-popover-slide-left-fade {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mdk-popover-slide-right-fade {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes mdk-popover-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,34 @@
+# Progress
+
+A thin re-export of `@radix-ui/react-progress`. Use it to render an accessible progress bar.
+
+## Exports
+
+All Radix UI `@radix-ui/react-progress` named exports are re-exported as-is:
+
+| Name        | Description                                                |
+| ----------- | ---------------------------------------------------------- |
+| `Root`      | Container element with ARIA `role="progressbar"`           |
+| `Indicator` | Inner element whose transform/width drives the visual fill |
+
+For the full prop reference see the [Radix UI Progress docs](https://www.radix-ui.com/primitives/docs/components/progress).
+
+## Example
+
+```tsx
+import * as Progress from "@tetherto/mdk-react-devkit/progress"
+// or named imports:
+import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@tetherto/mdk-react-devkit"
+
+<ProgressRoot value={60} max={100} className="mdk-progress">
+  <ProgressIndicator
+    className="mdk-progress__indicator"
+    style={{ transform: `translateX(-${100 - 60}%)` }}
+  />
+</ProgressRoot>
+```
+
+## Notes
+
+- Style the bar by overriding `mdk-progress` and `mdk-progress__indicator` in your SCSS, or add your own class names
+- Pass `value={null}` for an indeterminate state

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

@@ -0,0 +1,22 @@
+/**
+ * Runnable example for Progress (Radix Progress primitives re-exported as namespace).
+ * Progress.Root and Progress.Indicator are unstyled — consumers supply their own classes.
+ */
+import { Progress } from '@tetherto/mdk-react-devkit'
+
+export const ProgressExample = () => (
+  <div className="mdk-example-col">
+    <Progress.Root className="mdk-progress" value={65} max={100}>
+      {/* transform is the Radix-standard way to drive the fill width */}
+      <Progress.Indicator style={{ transform: 'translateX(-35%)' }} />
+    </Progress.Root>
+
+    <Progress.Root className="mdk-progress mdk-progress--thin" value={30} max={100}>
+      <Progress.Indicator style={{ transform: 'translateX(-70%)' }} />
+    </Progress.Root>
+
+    <Progress.Root className="mdk-progress" value={100} max={100}>
+      <Progress.Indicator style={{ transform: 'translateX(0%)' }} />
+    </Progress.Root>
+  </div>
+)

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

@@ -0,0 +1,66 @@
+# Radio
+
+Accessible radio buttons built on Radix UI `@radix-ui/react-radio-group`. Provides three components: `Radio` (individual item), `RadioGroup` (container), and `RadioCard` (button-style radio).
+
+<!-- BEGIN GENERATED: props — do not edit; npm run generate:usage-proptables (source: component JSDoc/types via registry.json) -->
+## Props
+
+### `Radio` props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `value` | Required | `string` | - | Value associated with this option |
+| `children` | Optional | `React.ReactNode` | - | Children content (takes precedence over label) |
+| `className` | Optional | `string` | - | Custom className for the root element |
+| `color` | Optional | `"success" \| "warning" \| "error" \| "primary" \| "default"` | `"primary"` | Color variant when checked |
+| `indicatorClassName` | Optional | `string` | - | Custom className for the indicator element |
+| `label` | Optional | `string` | - | Label text (or use children for custom content) |
+| `radius` | Optional | `"small" \| "none" \| "medium" \| "large" \| "full"` | `"full"` | Border radius variant (full makes it circular) |
+| `size` | Optional | `"sm" \| "md" \| "lg"` | `"md"` | Size variant of the radio |
+
+### `RadioCard` props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `value` | Required | `string` | - | Value associated with this option |
+| `children` | Optional | `React.ReactNode` | - | Children content (takes precedence over label) |
+| `className` | Optional | `string` | - | Custom className for the root element |
+| `color` | Optional | `"success" \| "warning" \| "error" \| "primary" \| "default"` | `"primary"` | Color variant when checked |
+| `indicatorClassName` | Optional | `string` | - | Custom className for the indicator element |
+| `label` | Optional | `string` | - | Label text (or use children for custom content) |
+| `radius` | Optional | `"small" \| "none" \| "medium" \| "large" \| "full"` | `"full"` | Border radius variant (full makes it circular) |
+| `size` | Optional | `"sm" \| "md" \| "lg"` | `"md"` | Size variant of the radio |
+
+### `RadioGroup` props
+
+| Prop | Status | Type / Options | Default | Description |
+|------|--------|----------------|---------|-------------|
+| `className` | Optional | `string` | - | Custom className for the group |
+| `noGap` | Optional | `boolean` | `false` | Remove gap between radio items |
+| `orientation` | Optional | `"horizontal" \| "vertical"` | `"vertical"` | Layout orientation |
+<!-- END GENERATED: props -->
+
+## Example
+
+```tsx
+import { Radio, RadioCard, RadioGroup } from "@tetherto/mdk-react-devkit"
+
+// Basic radio group
+<RadioGroup defaultValue="option1" onValueChange={setValue}>
+  <Radio value="option1" label="Option 1" />
+  <Radio value="option2" label="Option 2" />
+  <Radio value="option3" label="Option 3" disabled />
+</RadioGroup>
+
+// Horizontal radio cards (e.g. time range selector)
+<RadioGroup
+  value={range}
+  onValueChange={setRange}
+  orientation="horizontal"
+  noGap
+>
+  <RadioCard value="1h" label="1H" />
+  <RadioCard value="24h" label="24H" />
+  <RadioCard value="7d" label="7D" />
+</RadioGroup>
+```

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

@@ -0,0 +1,36 @@
+/**
+ * Runnable example for Radio and RadioGroup.
+ */
+import { useState } from 'react'
+import { Radio, RadioCard, RadioGroup } from '@tetherto/mdk-react-devkit'
+
+export const RadioExample = () => {
+  const [plan, setPlan] = useState('standard')
+  const [interval, setInterval] = useState('5min')
+
+  return (
+    <div className="mdk-example-col">
+      <RadioGroup value={plan} onValueChange={setPlan} orientation="vertical">
+        <div className="mdk-example-inline">
+          <Radio value="basic" color="primary" />
+          <span>Basic</span>
+        </div>
+        <div className="mdk-example-inline">
+          <Radio value="standard" color="primary" />
+          <span>Standard</span>
+        </div>
+        <div className="mdk-example-inline">
+          <Radio value="pro" color="primary" disabled />
+          <span>Pro (unavailable)</span>
+        </div>
+      </RadioGroup>
+
+      <RadioGroup value={interval} onValueChange={setInterval} orientation="horizontal">
+        <RadioCard value="5min" label="5 Min" />
+        <RadioCard value="15min" label="15 Min" />
+        <RadioCard value="30min" label="30 Min" />
+        <RadioCard value="1h" label="1 Hour" />
+      </RadioGroup>
+    </div>
+  )
+}