@justanarthur/modo-ui 0.6.0-canary.9 → 0.6.0

package/components/inputs/select/variants.ts

@@ -1,32 +0,0 @@
-// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/base/select.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications: `triggerVariants`, split out of `index.tsx` unchanged
- * into a module with no JSX, hooks or contexts, so server code can build the
- * trigger's classes; `index.tsx` re-exports it. Styling reads DS tokens (see
- * `index.tsx`).
- */
-
-import { cva } from 'class-variance-authority'
-
-export const triggerVariants = cva(
-  [
-    'group inline-flex items-center justify-between outline-none cursor-pointer',
-    'transition-all duration-fast',
-    'disabled:opacity-50 disabled:pointer-events-none',
-    'focus-visible:ring-1 focus-visible:ring-focus-ring',
-  ],
-  {
-    variants: {
-      variant: {
-        bordered: 'border border-border bg-transparent text-foreground hover:bg-hover',
-        borderless: 'border border-transparent bg-transparent text-foreground hover:bg-hover',
-      },
-    },
-    defaultVariants: {
-      variant: 'bordered',
-    },
-  },
-)

package/components/inputs/slider/examples.mdx

@@ -1,153 +0,0 @@
-import Slider from './index'
-
-# Compact
-
-The dense design: a thin track with a fill, a draggable thumb and the
-value on the left.
-
-<div className="w-72">
-  <Slider size="compact" defaultValue={25} />
-</div>
-
-## Range
-
-An array value gives two thumbs that cannot cross. The dense design
-renders it whatever the ladder step.
-
-<div className="w-72">
-  <Slider defaultValue={[25, 75]} />
-</div>
-
-## Steps
-
-`step` quantizes the value; `showSteps` marks each stop on the track, and
-the marks on the filled side are masked out.
-
-<div className="w-72">
-  <Slider defaultValue={50} step={25} showSteps />
-  <Slider defaultValue={50} step={10} showSteps />
-</div>
-
-## Non-uniform Steps
-
-`steps` takes a discrete list of allowed values — positioned
-proportionally, walked by the arrow keys, with min and max taken from the
-list.
-
-<div className="w-72">
-  <Slider
-    defaultValue={0.7}
-    steps={[0.1, 0.5, 0.7, 1.1, 1.3]}
-    showSteps
-    label="Rating"
-    formatValue={(v) => `${v} A`}
-  />
-</div>
-
-## Value Display
-
-`valuePosition` moves the label: beside the track on either side, above or
-below it, or as a tooltip that rides the thumb while you interact.
-
-<div className="flex flex-col gap-6 w-72">
-  <Slider defaultValue={40} valuePosition="left" label="Volume" />
-  <Slider defaultValue={60} valuePosition="right" label="Volume" />
-  <Slider defaultValue={50} valuePosition="tooltip" />
-</div>
-
-## Format
-
-`formatValue` renders the number: units, percentages, anything.
-
-<div className="w-72">
-  <Slider
-    size="compact"
-    defaultValue={75}
-    formatValue={(v) => `${v}%`}
-    label="Opacity"
-  />
-</div>
-
-## Disabled
-
-`disabled` dims the slider and ignores pointer and keyboard input.
-
-<div className="w-72">
-  <Slider size="compact" defaultValue={50} disabled />
-</div>
-
-# Default
-
-The default step: an edge-to-edge row with a pip per step, the label on
-the left and the value on the right.
-
-<div className="w-72">
-  <Slider size="default" label="Roundness" defaultValue={2} min={0} max={4} />
-</div>
-
-## Default — Scrubber
-
-`variant="scrubber"` drops the pips for a continuous fill you can drag
-anywhere in the row, with a resize handle at the fill edge.
-
-<div className="w-72">
-  <Slider
-    size="default"
-    variant="scrubber"
-    label="Volume"
-    defaultValue={50}
-    min={0}
-    max={100}
-    formatValue={(v) => `${v}%`}
-  />
-</div>
-
-## Default — Format
-
-`formatValue` turns the steps into names, so a numeric slider reads as a
-set of choices.
-
-<div className="w-72">
-  <Slider
-    size="default"
-    label="Quality"
-    defaultValue={2}
-    min={0}
-    max={4}
-    formatValue={(v) => ['Off', 'Low', 'Medium', 'High', 'Ultra'][v]}
-  />
-</div>
-
-## Default — Disabled
-
-The same dimming and inert behaviour on the default step.
-
-<div className="w-72">
-  <Slider size="default" label="Roundness" defaultValue={2} min={0} max={4} disabled />
-</div>
-
-# Behavior
-
-## Vertical
-
-`orientation="vertical"` stands the track upright: min at the bottom, max at the top, ArrowUp or ArrowRight to raise and ArrowDown or ArrowLeft to lower. It always renders the dense design, takes its height from `className`, and puts the value on top (`valuePosition`) unless told otherwise.
-
-<div className="flex items-center gap-10">
-  <Slider orientation="vertical" aria-label="Volume" defaultValue={40} className="h-48" />
-  <Slider orientation="vertical" aria-label="Range" defaultValue={[20, 70]} className="h-48" />
-  <Slider orientation="vertical" aria-label="Level" defaultValue={50} step={25} showSteps valuePosition="bottom" className="h-48" />
-  <Slider orientation="vertical" aria-label="Gain" defaultValue={60} valuePosition="tooltip" className="h-48" />
-</div>
-
-## Commit
-
-`onValueCommit(value)` fires once when an interaction ends: the pointer lifting after a drag or click, a keyboard step, or a committed edit of the value. `onChange` reports every value on the way, so save from `onValueCommit` and preview from `onChange`.
-
-```tsx
-<Slider
-  aria-label="Volume"
-  defaultValue={40}
-  onChange={value => preview(value)}
-  onValueCommit={value => save(value)}
-/>
-```