@krizaka/ui 3.38.0 → 3.40.0

package/dist/chunk-RE5WJ4QP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/slider/slider.tsx"],"sourcesContent":["// Client. Radix Slider: role=\"slider\" on each thumb, arrows / Page Up / Page Down / Home / End, a range with two\n// thumbs, horizontal or vertical. The words arrive as props: `label` names the thumb(s), `formatValue` gives the\n// aria-valuetext and the value shown (above the track, or floating over the thumb while it is touched). `ticks` draws the\n// graduations of the steps (and `marks` their words under the track); `tone` fills with the brand's gradient or its\n// accent alone.\nimport { Slider as SliderPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { tv } from \"../tv\";\n\nexport const slider = tv({\n  slots: {\n    root: \"flex flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:items-center\",\n    header: \"flex items-baseline justify-between gap-3 text-xs font-semibold text-fg-secondary\",\n    value: \"font-mono text-[11px] tabular-nums text-fg-secondary\",\n    control:\n      \"relative flex touch-none select-none items-center data-disabled:cursor-not-allowed data-disabled:opacity-40 \" +\n      \"data-[orientation=horizontal]:h-6 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:flex-col\",\n    track:\n      \"relative grow overflow-hidden rounded-full bg-surface-3 inset-shadow-well \" +\n      \"data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\",\n    range: \"absolute rounded-full data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n    thumb:\n      \"group/thumb relative block h-5 w-5 cursor-grab rounded-full border-2 border-accent bg-fg-on-media shadow-raised transition-[box-shadow,scale] duration-150 \" +\n      \"hover:ring-4 hover:ring-accent/15 focus-visible:outline-hidden focus-visible:focus-ring active:scale-110 active:cursor-grabbing motion-reduce:transition-none motion-reduce:active:scale-100\",\n    // The value over the thumb: shown while the thumb is hovered, focused or held.\n    bubble:\n      \"pointer-events-none absolute bottom-full left-1/2 mb-2.5 -translate-x-1/2 whitespace-nowrap rounded-lg bg-fg px-2 py-1 font-mono text-[11px] font-semibold tabular-nums text-surface-0 opacity-0 shadow-floating \" +\n      \"transition-opacity duration-150 after:absolute after:left-1/2 after:top-full after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-fg \" +\n      \"group-hover/thumb:opacity-100 group-focus-visible/thumb:opacity-100 group-active/thumb:opacity-100 data-[always]:opacity-100 motion-reduce:transition-none\",\n    bubbleVertical: \"bottom-auto left-full top-1/2 mb-0 ml-3 -translate-x-0 -translate-y-1/2 after:hidden\",\n    ticks: \"pointer-events-none absolute inset-0\",\n    tick: \"absolute rounded-full bg-border-strong data-[on]:bg-on-accent/70 data-[orientation=horizontal]:top-1/2 data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-px data-[orientation=horizontal]:-translate-x-1/2 data-[orientation=horizontal]:-translate-y-1/2 data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-1 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:translate-y-1/2\",\n    marks: \"relative h-4 w-full text-[11px] font-medium tabular-nums text-fg-secondary\",\n    mark: \"absolute top-0 -translate-x-1/2 whitespace-nowrap first:translate-x-0 last:-translate-x-full\",\n  },\n  variants: {\n    tone: {\n      /** The brand's signature: accent → accent-2, a glow under it. */\n      gradient: { range: \"bg-linear-to-r from-accent to-accent-2 shadow-glow data-[orientation=vertical]:bg-linear-to-t\" },\n      /** The accent alone. */\n      solid: { range: \"bg-accent\" },\n    },\n    size: {\n      md: {},\n      lg: {\n        track: \"data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5\",\n        thumb: \"h-6 w-6\",\n        control: \"data-[orientation=horizontal]:h-8 data-[orientation=vertical]:w-8\",\n      },\n    },\n  },\n  defaultVariants: { tone: \"gradient\", size: \"md\" },\n});\n\nexport type SliderValue = number | [number, number];\n\nexport type SliderMark = {\n  /** Where the mark stands. */\n  value: number;\n  /** Its words under the track (\"0\", \"50 %\", \"Max\"), passed translated. */\n  label: string;\n};\n\nexport type SliderProps<V extends SliderValue = number> = Omit<\n  React.ComponentProps<typeof SliderPrimitive.Root>,\n  \"value\" | \"defaultValue\" | \"onValueChange\" | \"onValueCommit\" | \"children\"\n> & {\n  /** One number (a thumb) or two (a range). Controlled with `onValueChange`. */\n  value?: V;\n  /** The value at first, uncontrolled: one number, or two for a range. */\n  defaultValue?: V;\n  /** Called on every move, with one number or two. */\n  onValueChange?: (value: V) => void;\n  /** Called once the drag or the key press ends. */\n  onValueCommit?: (value: V) => void;\n  /** The accessible name — of the thumb, or of both thumbs of a range — passed translated. */\n  label: string;\n  /** For a range: each thumb's own name ([\"Minimum\", \"Maximum\"]), passed translated. */\n  thumbLabels?: [string, string];\n  /** The value as words (aria-valuetext) and as shown: \"1.5×\", \"−12 %\", \"3 min\". */\n  formatValue?: (value: number) => string;\n  /** Shows the label and the value above the track. Without it, `label` only names the thumb. */\n  showLabel?: boolean;\n  /** Shows the value floating over the thumb while it is hovered, focused or held (`\"always\"`: at all times). */\n  floatingValue?: boolean | \"always\";\n  /** Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One horizontal thumb only. */\n  origin?: number;\n  /** Draws a graduation at every step (`true`, up to 40 of them) or at the values given. */\n  ticks?: boolean | readonly number[];\n  /** Words under the track at some values (`[{ value: 0, label: \"0\" }, { value: 100, label: \"100\" }]`). Horizontal only. */\n  marks?: readonly SliderMark[];\n  /**\n   * `gradient` (the brand's accent → accent-2, a glow) or `solid` (the accent alone).\n   * @default \"gradient\"\n   */\n  tone?: \"gradient\" | \"solid\";\n  /**\n   * md · lg (a thicker track and thumb: a hero control, a touch screen).\n   * @default \"md\"\n   */\n  size?: \"md\" | \"lg\";\n};\n\nconst toArray = (v: SliderValue | undefined) => (v === undefined ? undefined : typeof v === \"number\" ? [v] : v);\n\n/** A slider on one value or a range: `value`/`defaultValue` + `onValueChange`, `min`, `max`, `step`, `orientation`. */\nexport function Slider<V extends SliderValue = number>({\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  label,\n  thumbLabels,\n  formatValue = String,\n  showLabel,\n  floatingValue,\n  origin,\n  ticks,\n  marks,\n  tone,\n  size,\n  min = 0,\n  max = 100,\n  step = 1,\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: SliderProps<V>) {\n  const s = slider({ tone, size });\n  const range = Array.isArray(value ?? defaultValue);\n  const vertical = orientation === \"vertical\";\n  const [inner, setInner] = React.useState(() => toArray(defaultValue) ?? [min]);\n  const current = toArray(value) ?? inner;\n  const out = (next: number[]) => (range ? next : next[0]) as V;\n  const pct = (v: number) => ((v - min) / (max - min || 1)) * 100;\n  const fill =\n    origin !== undefined && !range && !vertical\n      ? { left: `${Math.min(pct(origin), pct(current[0]!))}%`, right: `${100 - Math.max(pct(origin), pct(current[0]!))}%` }\n      : undefined;\n  const lo = range ? Math.min(...current) : (origin ?? min);\n  const hi = range ? Math.max(...current) : current[0]!;\n  const tickValues = ticks === true ? (max - min) / step <= 40 ? Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => min + i * step) : [] : ticks ? [...ticks] : [];\n  const id = React.useId();\n  return (\n    <div className={s.root({ className })} data-range={range ? \"\" : undefined} data-orientation={orientation}>\n      {showLabel && (\n        <div className={s.header()}>\n          <span id={`${id}-label`}>{label}</span>\n          <span className={s.value()} aria-hidden>\n            {current.map(formatValue).join(\" – \")}\n          </span>\n        </div>\n      )}\n      <SliderPrimitive.Root\n        min={min}\n        max={max}\n        step={step}\n        orientation={orientation}\n        value={current}\n        onValueChange={(next) => {\n          if (value === undefined) setInner(next);\n          onValueChange?.(out(next));\n        }}\n        onValueCommit={onValueCommit && ((next) => onValueCommit(out(next)))}\n        className={s.control()}\n        {...props}\n      >\n        <SliderPrimitive.Track className={s.track()}>\n          {fill ? <span data-origin=\"\" data-orientation={orientation} className={s.range()} style={fill} /> : <SliderPrimitive.Range className={s.range()} />}\n          {tickValues.length ? (\n            <span aria-hidden className={s.ticks()}>\n              {tickValues.map((t) => (\n                <span\n                  key={t}\n                  data-orientation={orientation}\n                  data-on={t > lo && t < hi ? \"\" : undefined}\n                  className={s.tick()}\n                  style={vertical ? { bottom: `${pct(t)}%` } : { left: `${pct(t)}%` }}\n                />\n              ))}\n            </span>\n          ) : null}\n        </SliderPrimitive.Track>\n        {current.map((v, i) => (\n          <SliderPrimitive.Thumb\n            key={i}\n            aria-label={range ? (thumbLabels?.[i] ?? label) : showLabel ? undefined : label}\n            aria-labelledby={!range && showLabel ? `${id}-label` : undefined}\n            aria-valuetext={formatValue(v)}\n            className={s.thumb()}\n          >\n            {floatingValue ? (\n              <span aria-hidden data-always={floatingValue === \"always\" ? \"\" : undefined} className={s.bubble({ className: vertical ? s.bubbleVertical() : undefined })}>\n                {formatValue(v)}\n              </span>\n            ) : null}\n          </SliderPrimitive.Thumb>\n        ))}\n      </SliderPrimitive.Root>\n      {marks?.length && !vertical ? (\n        <div aria-hidden className={s.marks()}>\n          {marks.map((m) => (\n            <span key={m.value} className={s.mark()} style={{ left: `${pct(m.value)}%` }}>\n              {m.label}\n            </span>\n          ))}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}