@reforma/components 0.0.0-stage → 0.1.0

package/dist/GradientStopRange/GradientStopRange.js

@@ -0,0 +1,136 @@
+import { cn as Z } from "@reforma/lib";
+import { useRef as T, useState as I, useMemo as d, useCallback as s, useLayoutEffect as C } from "react";
+import { usePress as ee } from "react-aria";
+import { For as te } from "../For/For.js";
+import { Show as re } from "../Show/Show.js";
+import k from "./GradientStopRange.module.css.js";
+import { GradientStopThumb as ne } from "./GradientStopThumb.js";
+import { visibleGradientStops as oe, gradientStopRangeBackground as se, hasGradientStopNearPosition as ae, positionFromTrackOffset as L, formatGradientStopTrackPosition as de } from "./utils.js";
+import { jsxs as ie, jsx as i } from "react/jsx-runtime";
+const ce = 0, ue = 1, le = 0.01, fe = 0.1;
+function me({
+  ref: _,
+  stops: c,
+  activeStopId: y,
+  min: g = ce,
+  max: F = ue,
+  step: M = le,
+  shiftStep: R = fe,
+  isDisabled: p,
+  isReadOnly: h,
+  ariaLabel: S = "Gradient stops",
+  onActiveStopChange: u,
+  onStopPreview: E,
+  onStopCommit: w,
+  onStopCancel: A,
+  onStopAdd: B,
+  onStopRemove: G,
+  onStopDraggingChange: N,
+  className: D,
+  onPointerLeave: x,
+  ...U
+}) {
+  const l = T(null), b = T(/* @__PURE__ */ new Map()), f = T(null), [v, a] = I(null), [m, j] = I(!1), r = d(() => ({
+    min: g,
+    max: F
+  }), [F, g]), H = d(() => ({
+    ...r,
+    step: M,
+    shiftStep: R
+  }), [r, R, M]), X = d(() => ({
+    onActiveStopChange: u,
+    onStopPreview: E,
+    onStopCommit: w,
+    onStopCancel: A,
+    onStopRemove: G
+  }), [u, A, w, E, G]), o = d(() => oe(c, r), [r, c]), q = d(() => se(c, r), [r, c]), n = !!B && !(p || h), O = n && !m && v != null && !ae(o, v), $ = s(() => {
+    a(null);
+  }, []), z = s((e) => {
+    j(e), N?.(e), e && a(null);
+  }, [N]), J = s(() => {
+    f.current = new Set(o.map((e) => e.id));
+  }, [o]), K = s((e, t) => {
+    t ? b.current.set(e, t) : b.current.delete(e);
+  }, []), Q = s((e) => {
+    if (n && !m) {
+      const t = e.currentTarget.getBoundingClientRect();
+      a(L(e.clientX - t.left, t.width, r));
+    }
+  }, [r, n, m]), V = s((e) => {
+    a(null), x?.(e);
+  }, [x]), {
+    pressProps: W,
+    isPressed: Y
+  } = ee({
+    isDisabled: !n,
+    preventFocusOnPress: !0,
+    onPress(e) {
+      const t = l.current?.getBoundingClientRect().width ?? 0;
+      a(null), J(), l.current?.focus(), B?.(L(e.x, t, r));
+    }
+  });
+  return C(() => {
+    const e = f.current;
+    if (!e)
+      return;
+    const t = o.find((P) => !e.has(P.id));
+    if (!t) {
+      f.current = null;
+      return;
+    }
+    f.current = null, u?.(t.id), b.current.get(t.id)?.focus();
+  }, [u, o]), /* @__PURE__ */ ie("div", {
+    ...U,
+    ref: _,
+    className: Z(k.range, D),
+    "data-disabled": p || void 0,
+    "data-dragging": m || void 0,
+    "data-readonly": h || void 0,
+    "data-modal-drag-exclude": !0,
+    onPointerLeave: V,
+    children: [/* @__PURE__ */ i("div", {
+      ...W,
+      ref: l,
+      className: k.track,
+      "data-addable": n || void 0,
+      "data-pressed": Y || void 0,
+      role: n ? "button" : void 0,
+      tabIndex: n ? 0 : void 0,
+      "aria-label": n ? `${S} add stop` : void 0,
+      style: {
+        "--reforma-gradient-stop-range-background": q
+      },
+      onPointerMove: Q
+    }), /* @__PURE__ */ i(te, {
+      each: o,
+      children: (e, t) => /* @__PURE__ */ i(ne, {
+        ref: (P) => K(e.id, P),
+        stop: e,
+        index: t,
+        activeStopId: y,
+        ariaLabel: S,
+        trackRef: l,
+        options: H,
+        isDisabled: p,
+        isReadOnly: h,
+        actions: X,
+        onDraggingChange: z,
+        onPointerEnter: $
+      }, e.id)
+    }), /* @__PURE__ */ i(re, {
+      when: O,
+      children: /* @__PURE__ */ i("span", {
+        className: k.addMarker,
+        style: {
+          "--reforma-gradient-stop-position": de(v ?? g, r)
+        },
+        "aria-hidden": !0
+      })
+    })]
+  });
+}
+me.displayName = "GradientStopRange";
+export {
+  me as GradientStopRange
+};
+//# sourceMappingURL=GradientStopRange.js.map

package/dist/GradientStopRange/GradientStopRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientStopRange.js","sources":["../../src/GradientStopRange/GradientStopRange.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { usePress } from 'react-aria';\n\nimport { For } from '../For';\nimport { Show } from '../Show';\nimport styles from './GradientStopRange.module.css';\nimport { GradientStopThumb } from './GradientStopThumb';\nimport {\n    formatGradientStopTrackPosition,\n    gradientStopRangeBackground,\n    hasGradientStopNearPosition,\n    positionFromTrackOffset,\n    visibleGradientStops,\n} from './utils';\n\nimport type { CSSProperties, HTMLAttributes, PointerEvent, Ref } from 'react';\n\nexport interface GradientStopRangeStop {\n    id: string;\n    color: string;\n    position: number;\n    isDisabled?: boolean;\n}\n\nexport interface GradientStopRangeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n    ref?: Ref<HTMLDivElement | null>;\n    stops: readonly GradientStopRangeStop[];\n    activeStopId?: string;\n    min?: number;\n    max?: number;\n    step?: number;\n    shiftStep?: number;\n    isDisabled?: boolean;\n    isReadOnly?: boolean;\n    ariaLabel?: string;\n    onActiveStopChange?: (stopId: string) => void;\n    onStopPreview?: (stopId: string, position: number) => void;\n    onStopCommit?: (stopId: string, position: number) => void;\n    onStopCancel?: (stopId: string) => void;\n    onStopAdd?: (position: number) => void;\n    onStopRemove?: (stopId: string) => void;\n    onStopDraggingChange?: (isDragging: boolean) => void;\n}\n\nconst DEFAULT_MIN = 0;\nconst DEFAULT_MAX = 1;\nconst DEFAULT_STEP = 0.01;\nconst DEFAULT_SHIFT_STEP = 0.1;\n\nexport function GradientStopRange({\n    ref,\n    stops,\n    activeStopId,\n    min = DEFAULT_MIN,\n    max = DEFAULT_MAX,\n    step = DEFAULT_STEP,\n    shiftStep = DEFAULT_SHIFT_STEP,\n    isDisabled,\n    isReadOnly,\n    ariaLabel = 'Gradient stops',\n    onActiveStopChange,\n    onStopPreview,\n    onStopCommit,\n    onStopCancel,\n    onStopAdd,\n    onStopRemove,\n    onStopDraggingChange,\n    className,\n    onPointerLeave,\n    ...props\n}: GradientStopRangeProps) {\n    const trackRef = useRef<HTMLDivElement | null>(null);\n    const thumbRefsRef = useRef(new Map<string, HTMLDivElement>());\n    const addFocusRequestRef = useRef<Set<string> | null>(null);\n    const [hoverPosition, setHoverPosition] = useState<number | null>(null);\n    const [isDraggingStop, setIsDraggingStop] = useState(false);\n    const bounds = useMemo(() => ({ min, max }), [max, min]);\n    const stepOptions = useMemo(() => ({ ...bounds, step, shiftStep }), [bounds, shiftStep, step]);\n    const thumbActions = useMemo(() => ({\n        onActiveStopChange,\n        onStopPreview,\n        onStopCommit,\n        onStopCancel,\n        onStopRemove,\n    }), [onActiveStopChange, onStopCancel, onStopCommit, onStopPreview, onStopRemove]);\n    const visibleStops = useMemo(\n        () => visibleGradientStops(stops, bounds),\n        [bounds, stops]\n    );\n    const gradientBackground = useMemo(\n        () => gradientStopRangeBackground(stops, bounds),\n        [bounds, stops]\n    );\n    const isInactive = isDisabled || isReadOnly;\n    const canAddStop = Boolean(onStopAdd) && !isInactive;\n    const showAddMarker = canAddStop\n      && !isDraggingStop\n      && hoverPosition != null\n      && !hasGradientStopNearPosition(visibleStops, hoverPosition);\n\n    const hideAddMarker = useCallback(() => {\n        setHoverPosition(null);\n    }, []);\n\n    const handleThumbDraggingChange = useCallback((isDragging: boolean) => {\n        setIsDraggingStop(isDragging);\n        onStopDraggingChange?.(isDragging);\n\n        if (isDragging) {\n            setHoverPosition(null);\n        }\n    }, [onStopDraggingChange]);\n\n    const rememberStopsBeforeAdd = useCallback(() => {\n        addFocusRequestRef.current = new Set(visibleStops.map(stop => stop.id));\n    }, [visibleStops]);\n\n    const setThumbRef = useCallback((stopId: string, node: HTMLDivElement | null) => {\n        if (node) {\n            thumbRefsRef.current.set(stopId, node);\n        }\n        else {\n            thumbRefsRef.current.delete(stopId);\n        }\n    }, []);\n\n    const handleTrackPointerMove = useCallback((event: PointerEvent<HTMLDivElement>) => {\n        if (canAddStop && !isDraggingStop) {\n            const rect = event.currentTarget.getBoundingClientRect();\n\n            setHoverPosition(positionFromTrackOffset(event.clientX - rect.left, rect.width, bounds));\n        }\n    }, [bounds, canAddStop, isDraggingStop]);\n\n    const handlePointerLeave = useCallback((event: PointerEvent<HTMLDivElement>) => {\n        setHoverPosition(null);\n        onPointerLeave?.(event);\n    }, [onPointerLeave]);\n\n    const { pressProps, isPressed } = usePress({\n        isDisabled: !canAddStop,\n        preventFocusOnPress: true,\n        onPress(event) {\n            const width = trackRef.current?.getBoundingClientRect().width ?? 0;\n\n            setHoverPosition(null);\n            rememberStopsBeforeAdd();\n            trackRef.current?.focus();\n            onStopAdd?.(positionFromTrackOffset(event.x, width, bounds));\n        },\n    });\n\n    useLayoutEffect(() => {\n        const idsBeforeAdd = addFocusRequestRef.current;\n\n        if (!idsBeforeAdd) {\n            return;\n        }\n\n        const addedStop = visibleStops.find(stop => !idsBeforeAdd.has(stop.id));\n\n        if (!addedStop) {\n            addFocusRequestRef.current = null;\n\n            return;\n        }\n\n        addFocusRequestRef.current = null;\n        onActiveStopChange?.(addedStop.id);\n        thumbRefsRef.current.get(addedStop.id)?.focus();\n    }, [onActiveStopChange, visibleStops]);\n\n    return (\n        <div\n            { ...props }\n            ref={ ref }\n            className={ cn(styles.range, className) }\n            data-disabled={ isDisabled || undefined }\n            data-dragging={ isDraggingStop || undefined }\n            data-readonly={ isReadOnly || undefined }\n            data-modal-drag-exclude\n            onPointerLeave={ handlePointerLeave }\n        >\n            <div\n                { ...pressProps }\n                ref={ trackRef }\n                className={ styles.track }\n                data-addable={ canAddStop || undefined }\n                data-pressed={ isPressed || undefined }\n                role={ canAddStop ? 'button' : undefined }\n                tabIndex={ canAddStop ? 0 : undefined }\n                aria-label={ canAddStop ? `${ ariaLabel } add stop` : undefined }\n                style={ { '--reforma-gradient-stop-range-background': gradientBackground } as CSSProperties }\n                onPointerMove={ handleTrackPointerMove }\n            />\n\n            <For each={ visibleStops }>\n                { (stop, index) => (\n                    <GradientStopThumb\n                        key={ stop.id }\n                        ref={ node => setThumbRef(stop.id, node) }\n                        stop={ stop }\n                        index={ index }\n                        activeStopId={ activeStopId }\n                        ariaLabel={ ariaLabel }\n                        trackRef={ trackRef }\n                        options={ stepOptions }\n                        isDisabled={ isDisabled }\n                        isReadOnly={ isReadOnly }\n                        actions={ thumbActions }\n                        onDraggingChange={ handleThumbDraggingChange }\n                        onPointerEnter={ hideAddMarker }\n                    />\n                ) }\n            </For>\n\n            <Show when={ showAddMarker }>\n                <span\n                    className={ styles.addMarker }\n                    style={ {\n                        '--reforma-gradient-stop-position': formatGradientStopTrackPosition(hoverPosition ?? min, bounds),\n                    } as CSSProperties }\n                    aria-hidden\n                />\n            </Show>\n        </div>\n    );\n}\n\nGradientStopRange.displayName = 'GradientStopRange';\n"],"names":["DEFAULT_MIN","DEFAULT_MAX","DEFAULT_STEP","DEFAULT_SHIFT_STEP","GradientStopRange","ref","stops","activeStopId","min","max","step","shiftStep","isDisabled","isReadOnly","ariaLabel","onActiveStopChange","onStopPreview","onStopCommit","onStopCancel","onStopAdd","onStopRemove","onStopDraggingChange","className","onPointerLeave","props","trackRef","useRef","thumbRefsRef","addFocusRequestRef","hoverPosition","setHoverPosition","useState","isDraggingStop","setIsDraggingStop","bounds","useMemo","stepOptions","thumbActions","visibleStops","visibleGradientStops","gradientBackground","gradientStopRangeBackground","canAddStop","showAddMarker","hasGradientStopNearPosition","hideAddMarker","useCallback","handleThumbDraggingChange","isDragging","rememberStopsBeforeAdd","stop","setThumbRef","stopId","node","handleTrackPointerMove","event","rect","positionFromTrackOffset","handlePointerLeave","pressProps","isPressed","usePress","width","useLayoutEffect","idsBeforeAdd","addedStop","cn","styles","_jsx","For","index","GradientStopThumb","Show","formatGradientStopTrackPosition"],"mappings":"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"}

package/dist/GradientStopRange/GradientStopRange.module.css

@@ -0,0 +1 @@
+@layer components{.GradientStopRange_range_AzfdMQ{--reforma-gradient-stop-range-size: var(--spacing-16);--reforma-gradient-stop-range-thumb-size: var(--spacing-10);--reforma-gradient-stop-range-thumb-border: var(--spacing-2);--reforma-gradient-stop-range-track-radius: var(--radius-full);--reforma-gradient-stop-range-background: linear-gradient(to right, var(--color-secondary), var(--color-secondary));--reforma-gradient-stop-range-thumb-shadow: var(--color-secondary-muted-border);--reforma-gradient-stop-range-checker-size: var(--spacing-4);--reforma-gradient-stop-range-checker-bg: repeating-conic-gradient(var(--color-dark-a15) 0% 25%, transparent 0% 50%) 0 0 / var(--reforma-gradient-stop-range-checker-size) var(--reforma-gradient-stop-range-checker-size), var(--color-white);position:relative;width:100%;min-width:var(--spacing-56);height:var(--reforma-gradient-stop-range-size);touch-action:none}.GradientStopRange_range_AzfdMQ[data-disabled]{opacity:var(--opacity-disabled);pointer-events:none}.GradientStopRange_range_AzfdMQ[data-readonly] .GradientStopRange_track_Qsx29l,.GradientStopRange_range_AzfdMQ[data-readonly] .GradientStopRange_thumb_Sa3ObQ{cursor:default}.GradientStopRange_track_Qsx29l{position:absolute;cursor:default;inset:0;outline:none;border-radius:var(--reforma-gradient-stop-range-track-radius);background:var(--reforma-gradient-stop-range-background),var(--reforma-gradient-stop-range-checker-bg);overflow:hidden}.GradientStopRange_track_Qsx29l[data-addable]{cursor:copy}.GradientStopRange_range_AzfdMQ[data-dragging] .GradientStopRange_track_Qsx29l,.GradientStopRange_range_AzfdMQ[data-dragging] .GradientStopRange_thumb_Sa3ObQ{cursor:grabbing}.GradientStopRange_range_AzfdMQ[data-dragging] .GradientStopRange_addMarker_F36ZtE{display:none}.GradientStopRange_track_Qsx29l:focus-visible{box-shadow:0 0 0 var(--spacing-2) var(--color-primary-muted-border)}.GradientStopRange_track_Qsx29l:after{position:absolute;box-sizing:border-box;inset:0;border:var(--spacing-1) solid var(--color-secondary-muted-border);border-radius:inherit;pointer-events:none;content:""}.GradientStopRange_thumb_Sa3ObQ,.GradientStopRange_addMarker_F36ZtE{position:absolute;top:50%;left:var(--reforma-gradient-stop-position);transform:translate(-50%,-50%);z-index:1;box-sizing:border-box;border-radius:var(--radius-full);width:var(--reforma-gradient-stop-range-thumb-size);height:var(--reforma-gradient-stop-range-thumb-size)}.GradientStopRange_thumb_Sa3ObQ{position:absolute;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;margin:0;outline:none;box-shadow:0 0 0 var(--spacing-1) var(--reforma-gradient-stop-range-thumb-shadow);border:var(--reforma-gradient-stop-range-thumb-border) solid var(--color-white);background:var(--reforma-gradient-stop-color, transparent);padding:0}.GradientStopRange_thumb_Sa3ObQ:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);scale:0;box-shadow:0 0 var(--spacing-2) var(--spacing-1) var(--color-secondary-muted);border-radius:var(--radius-full);background:var(--color-white);width:var(--spacing-4);height:var(--spacing-4);content:""}.GradientStopRange_thumb_Sa3ObQ[data-disabled]{opacity:var(--opacity-disabled);cursor:default}.GradientStopRange_thumb_Sa3ObQ[data-active]{--reforma-gradient-stop-range-thumb-size: var(--reforma-gradient-stop-range-size);--reforma-gradient-stop-range-thumb-shadow: var(--color-primary);z-index:2}.GradientStopRange_thumb_Sa3ObQ[data-active]:after{scale:1}.GradientStopRange_thumb_Sa3ObQ[data-dragging]{cursor:grabbing}.GradientStopRange_thumb_Sa3ObQ[data-focus-visible]{box-shadow:0 0 0 var(--spacing-1) var(--reforma-gradient-stop-range-thumb-shadow),0 0 0 var(--spacing-4) var(--color-primary-muted-border)}.GradientStopRange_addMarker_F36ZtE{display:flex;justify-content:center;align-items:center;transform:translate(-50%,-50%) scale(.5);z-index:3;box-shadow:0 0 0 var(--spacing-1) var(--reforma-gradient-stop-range-thumb-shadow);border:var(--spacing-1) solid var(--color-secondary-border);background:var(--color-white);pointer-events:none}}

package/dist/GradientStopRange/GradientStopRange.module.css.js

@@ -0,0 +1,14 @@
+const a = "GradientStopRange_range_AzfdMQ", t = "GradientStopRange_track_Qsx29l", e = "GradientStopRange_thumb_Sa3ObQ", r = "GradientStopRange_addMarker_F36ZtE", n = {
+  range: a,
+  track: t,
+  thumb: e,
+  addMarker: r
+};
+export {
+  r as addMarker,
+  n as default,
+  a as range,
+  e as thumb,
+  t as track
+};
+//# sourceMappingURL=GradientStopRange.module.css.js.map

package/dist/GradientStopRange/GradientStopRange.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientStopRange.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/GradientStopRange/GradientStopThumb.d.ts

@@ -0,0 +1,29 @@
+import type { Ref, RefObject } from 'react';
+import type { GradientStopRangeStop } from './GradientStopRange';
+import type { GradientStopRangeStepOptions } from './utils';
+export interface GradientStopThumbProps {
+    ref?: Ref<HTMLDivElement | null>;
+    stop: GradientStopRangeStop;
+    index: number;
+    activeStopId?: string;
+    ariaLabel: string;
+    trackRef: RefObject<HTMLDivElement | null>;
+    options: GradientStopRangeStepOptions;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    actions: GradientStopThumbActions;
+    onDraggingChange?: (isDragging: boolean) => void;
+    onPointerEnter?: () => void;
+}
+export interface GradientStopThumbActions {
+    onActiveStopChange?: (stopId: string) => void;
+    onStopPreview?: (stopId: string, position: number) => void;
+    onStopCommit?: (stopId: string, position: number) => void;
+    onStopCancel?: (stopId: string) => void;
+    onStopRemove?: (stopId: string) => void;
+}
+export declare function GradientStopThumb({ ref, stop, index, activeStopId, ariaLabel, trackRef, options, isDisabled, isReadOnly, actions, onDraggingChange, onPointerEnter, }: GradientStopThumbProps): import("react").JSX.Element;
+export declare namespace GradientStopThumb {
+    var displayName: string;
+}
+//# sourceMappingURL=GradientStopThumb.d.ts.map

package/dist/GradientStopRange/GradientStopThumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientStopThumb.d.ts","sourceRoot":"","sources":["../../src/GradientStopRange/GradientStopThumb.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAA8C,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAE5D,MAAM,WAAW,sBAAsB;IACnC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjC,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C,OAAO,EAAE,4BAA4B,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,wBAAwB,CAAC;IAClC,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED,MAAM,WAAW,wBAAwB;IACrC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,iBAAiB,CAAC,EAC9B,GAAG,EACH,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,OAAO,EACP,UAAU,EACV,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,cAAc,GACjB,EAAE,sBAAsB,+BAsKxB;yBAnLe,iBAAiB"}

package/dist/GradientStopRange/GradientStopThumb.js

@@ -0,0 +1,106 @@
+import { useRef as S, useState as $, useCallback as d } from "react";
+import { useFocusRing as j, useHover as V, useMove as Y, mergeProps as q } from "react-aria";
+import z from "./GradientStopRange.module.css.js";
+import { positionFromKeyboardMove as J, positionFromMoveDelta as L, positionFromKeyboardCommand as Q, formatGradientStopTrackPosition as U, formatGradientStopPercent as W } from "./utils.js";
+import { jsx as Z } from "react/jsx-runtime";
+function _({
+  ref: w,
+  stop: e,
+  index: k,
+  activeStopId: P,
+  ariaLabel: x,
+  trackRef: g,
+  options: r,
+  isDisabled: F,
+  isReadOnly: s,
+  actions: M,
+  onDraggingChange: c,
+  onPointerEnter: T
+}) {
+  const {
+    onActiveStopChange: t,
+    onStopPreview: u,
+    onStopCommit: f,
+    onStopCancel: h,
+    onStopRemove: v
+  } = M, l = S(e.position), m = S(e.position), [K, b] = $(!1), o = F || e.isDisabled, n = !o && !s, p = e.id === P, y = P == null || p, {
+    focusProps: G,
+    isFocusVisible: R
+  } = j(), {
+    hoverProps: C,
+    isHovered: A
+  } = V({
+    isDisabled: !n
+  }), B = d((i) => {
+    m.current = i, u?.(e.id, i);
+  }, [u, e.id]), D = d((i) => {
+    m.current = i, u?.(e.id, i), f?.(e.id, i);
+  }, [f, u, e.id]), {
+    moveProps: E
+  } = Y({
+    onMoveStart() {
+      n && (l.current = e.position, m.current = e.position, b(!0), c?.(!0), t?.(e.id));
+    },
+    onMove(i) {
+      if (!n)
+        return;
+      const a = i.pointerType === "keyboard" ? J(l.current, i.deltaX, i.deltaY, r, i.shiftKey) : L(l.current, i.deltaX, g.current?.getBoundingClientRect().width ?? 0, r);
+      l.current = a, B(a);
+    },
+    onMoveEnd() {
+      b(!1), c?.(!1), n && f?.(e.id, m.current);
+    }
+  }), H = d((i) => {
+    n && (i.currentTarget.focus(), t?.(e.id));
+  }, [n, t, e.id]), I = d(() => {
+    o || t?.(e.id);
+  }, [o, t, e.id]), N = d((i) => {
+    if (o)
+      return;
+    if (i.key === "Escape") {
+      i.preventDefault(), b(!1), c?.(!1), h?.(e.id);
+      return;
+    }
+    if (s)
+      return;
+    const a = Q(i.key, e.position, r);
+    if (a != null) {
+      i.preventDefault(), t?.(e.id), D(a);
+      return;
+    }
+    (i.key === "Delete" || i.key === "Backspace") && v && y && (i.preventDefault(), v(e.id));
+  }, [y, D, s, o, t, c, h, v, r, e.id, e.position]), X = q(E, G, C, {
+    onFocus: I,
+    onPointerDown: H,
+    onPointerEnter: T,
+    onKeyDown: N
+  });
+  return /* @__PURE__ */ Z("div", {
+    ...X,
+    ref: w,
+    className: z.thumb,
+    "data-active": p || void 0,
+    "data-disabled": o || void 0,
+    "data-dragging": K || void 0,
+    "data-focus-visible": R || void 0,
+    "data-gradient-stop-thumb": !0,
+    "data-hovered": A || void 0,
+    role: "slider",
+    tabIndex: o ? void 0 : 0,
+    "aria-label": `${x} stop ${k + 1}`,
+    "aria-valuemin": r.min * 100,
+    "aria-valuemax": r.max * 100,
+    "aria-valuenow": Math.round(e.position * 1e3) / 10,
+    "aria-valuetext": W(e.position),
+    "aria-disabled": s || o || void 0,
+    style: {
+      "--reforma-gradient-stop-position": U(e.position, r),
+      "--reforma-gradient-stop-color": e.color
+    }
+  });
+}
+_.displayName = "GradientStopThumb";
+export {
+  _ as GradientStopThumb
+};
+//# sourceMappingURL=GradientStopThumb.js.map

package/dist/GradientStopRange/GradientStopThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientStopThumb.js","sources":["../../src/GradientStopRange/GradientStopThumb.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { mergeProps, useFocusRing, useHover, useMove } from 'react-aria';\n\nimport styles from './GradientStopRange.module.css';\nimport {\n    formatGradientStopPercent,\n    formatGradientStopTrackPosition,\n    positionFromKeyboardCommand,\n    positionFromKeyboardMove,\n    positionFromMoveDelta,\n} from './utils';\n\nimport type { CSSProperties, KeyboardEvent, PointerEvent, Ref, RefObject } from 'react';\nimport type { GradientStopRangeStop } from './GradientStopRange';\nimport type { GradientStopRangeStepOptions } from './utils';\n\nexport interface GradientStopThumbProps {\n    ref?: Ref<HTMLDivElement | null>;\n    stop: GradientStopRangeStop;\n    index: number;\n    activeStopId?: string;\n    ariaLabel: string;\n    trackRef: RefObject<HTMLDivElement | null>;\n    options: GradientStopRangeStepOptions;\n    isDisabled?: boolean;\n    isReadOnly?: boolean;\n    actions: GradientStopThumbActions;\n    onDraggingChange?: (isDragging: boolean) => void;\n    onPointerEnter?: () => void;\n}\n\nexport interface GradientStopThumbActions {\n    onActiveStopChange?: (stopId: string) => void;\n    onStopPreview?: (stopId: string, position: number) => void;\n    onStopCommit?: (stopId: string, position: number) => void;\n    onStopCancel?: (stopId: string) => void;\n    onStopRemove?: (stopId: string) => void;\n}\n\nexport function GradientStopThumb({\n    ref,\n    stop,\n    index,\n    activeStopId,\n    ariaLabel,\n    trackRef,\n    options,\n    isDisabled,\n    isReadOnly,\n    actions,\n    onDraggingChange,\n    onPointerEnter,\n}: GradientStopThumbProps) {\n    const {\n        onActiveStopChange,\n        onStopPreview,\n        onStopCommit,\n        onStopCancel,\n        onStopRemove,\n    } = actions;\n    const dragPositionRef = useRef(stop.position);\n    const lastPreviewPositionRef = useRef(stop.position);\n    const [isDragging, setIsDragging] = useState(false);\n    const isThumbDisabled = isDisabled || stop.isDisabled;\n    const isInteractive = !isThumbDisabled && !isReadOnly;\n    const isActive = stop.id === activeStopId;\n    const canRemoveStop = activeStopId == null || isActive;\n    const { focusProps, isFocusVisible } = useFocusRing();\n    const { hoverProps, isHovered } = useHover({ isDisabled: !isInteractive });\n\n    const previewPosition = useCallback((position: number) => {\n        lastPreviewPositionRef.current = position;\n        onStopPreview?.(stop.id, position);\n    }, [onStopPreview, stop.id]);\n\n    const commitPosition = useCallback((position: number) => {\n        lastPreviewPositionRef.current = position;\n        onStopPreview?.(stop.id, position);\n        onStopCommit?.(stop.id, position);\n    }, [onStopCommit, onStopPreview, stop.id]);\n\n    const { moveProps } = useMove({\n        onMoveStart() {\n            if (!isInteractive) {\n                return;\n            }\n\n            dragPositionRef.current = stop.position;\n            lastPreviewPositionRef.current = stop.position;\n            setIsDragging(true);\n            onDraggingChange?.(true);\n            onActiveStopChange?.(stop.id);\n        },\n        onMove(event) {\n            if (!isInteractive) {\n                return;\n            }\n\n            const nextPosition = event.pointerType === 'keyboard'\n                ? positionFromKeyboardMove(\n                    dragPositionRef.current,\n                    event.deltaX,\n                    event.deltaY,\n                    options,\n                    event.shiftKey\n                )\n                : positionFromMoveDelta(\n                    dragPositionRef.current,\n                    event.deltaX,\n                    trackRef.current?.getBoundingClientRect().width ?? 0,\n                    options\n                );\n\n            dragPositionRef.current = nextPosition;\n            previewPosition(nextPosition);\n        },\n        onMoveEnd() {\n            setIsDragging(false);\n            onDraggingChange?.(false);\n\n            if (isInteractive) {\n                onStopCommit?.(stop.id, lastPreviewPositionRef.current);\n            }\n        },\n    });\n\n    const handlePointerDown = useCallback((event: PointerEvent<HTMLDivElement>) => {\n        if (!isInteractive) {\n            return;\n        }\n\n        event.currentTarget.focus();\n        onActiveStopChange?.(stop.id);\n    }, [isInteractive, onActiveStopChange, stop.id]);\n\n    const handleFocus = useCallback(() => {\n        if (!isThumbDisabled) {\n            onActiveStopChange?.(stop.id);\n        }\n    }, [isThumbDisabled, onActiveStopChange, stop.id]);\n\n    const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n        if (isThumbDisabled) {\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            event.preventDefault();\n            setIsDragging(false);\n            onDraggingChange?.(false);\n            onStopCancel?.(stop.id);\n\n            return;\n        }\n\n        if (isReadOnly) {\n            return;\n        }\n\n        const nextPosition = positionFromKeyboardCommand(event.key, stop.position, options);\n\n        if (nextPosition != null) {\n            event.preventDefault();\n            onActiveStopChange?.(stop.id);\n            commitPosition(nextPosition);\n\n            return;\n        }\n\n        if ((event.key === 'Delete' || event.key === 'Backspace') && onStopRemove && canRemoveStop) {\n            event.preventDefault();\n            onStopRemove(stop.id);\n        }\n    }, [\n        canRemoveStop,\n        commitPosition,\n        isReadOnly,\n        isThumbDisabled,\n        onActiveStopChange,\n        onDraggingChange,\n        onStopCancel,\n        onStopRemove,\n        options,\n        stop.id,\n        stop.position,\n    ]);\n    const thumbProps = mergeProps(moveProps, focusProps, hoverProps, {\n        onFocus: handleFocus,\n        onPointerDown: handlePointerDown,\n        onPointerEnter,\n        onKeyDown: handleKeyDown,\n    });\n\n    return (\n        <div\n            { ...thumbProps }\n            ref={ ref }\n            className={ styles.thumb }\n            data-active={ isActive || undefined }\n            data-disabled={ isThumbDisabled || undefined }\n            data-dragging={ isDragging || undefined }\n            data-focus-visible={ isFocusVisible || undefined }\n            data-gradient-stop-thumb\n            data-hovered={ isHovered || undefined }\n            role=\"slider\"\n            tabIndex={ isThumbDisabled ? undefined : 0 }\n            aria-label={ `${ ariaLabel } stop ${ index + 1 }` }\n            aria-valuemin={ options.min * 100 }\n            aria-valuemax={ options.max * 100 }\n            aria-valuenow={ Math.round(stop.position * 1000) / 10 }\n            aria-valuetext={ formatGradientStopPercent(stop.position) }\n            aria-disabled={ isReadOnly || isThumbDisabled || undefined }\n            style={ {\n                '--reforma-gradient-stop-position': formatGradientStopTrackPosition(stop.position, options),\n                '--reforma-gradient-stop-color': stop.color,\n            } as CSSProperties }\n        />\n    );\n}\n\nGradientStopThumb.displayName = 'GradientStopThumb';\n"],"names":["GradientStopThumb","ref","stop","index","activeStopId","ariaLabel","trackRef","options","isDisabled","isReadOnly","actions","onDraggingChange","onPointerEnter","onActiveStopChange","onStopPreview","onStopCommit","onStopCancel","onStopRemove","dragPositionRef","useRef","lastPreviewPositionRef","isDragging","setIsDragging","useState","isThumbDisabled","isInteractive","isActive","canRemoveStop","focusProps","isFocusVisible","useFocusRing","hoverProps","isHovered","useHover","previewPosition","useCallback","position","commitPosition","moveProps","useMove","event","nextPosition","positionFromKeyboardMove","positionFromMoveDelta","handlePointerDown","handleFocus","handleKeyDown","positionFromKeyboardCommand","thumbProps","mergeProps","styles","formatGradientStopPercent","formatGradientStopTrackPosition"],"mappings":"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"}

package/dist/GradientStopRange/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GradientStopRange';
+//# sourceMappingURL=index.d.ts.map

package/dist/GradientStopRange/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/GradientStopRange/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/GradientStopRange/index.js

@@ -0,0 +1,5 @@
+import { GradientStopRange as r } from "./GradientStopRange.js";
+export {
+  r as GradientStopRange
+};
+//# sourceMappingURL=index.js.map

package/dist/GradientStopRange/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/GradientStopRange/utils.d.ts

@@ -0,0 +1,26 @@
+export interface GradientStopRangeBounds {
+    min: number;
+    max: number;
+}
+export interface GradientStopRangeStepOptions extends GradientStopRangeBounds {
+    step: number;
+    shiftStep: number;
+}
+interface GradientStopRangePosition {
+    position: number;
+}
+interface GradientStopRangeColorStop extends GradientStopRangePosition {
+    color: string;
+}
+export declare function sortedGradientStops<T extends GradientStopRangePosition>(stops: readonly T[]): T[];
+export declare function visibleGradientStops<T extends GradientStopRangePosition>(stops: readonly T[], bounds: GradientStopRangeBounds): T[];
+export declare function gradientStopRangeBackground(stops: readonly GradientStopRangeColorStop[], bounds: GradientStopRangeBounds): string;
+export declare function formatGradientStopTrackPosition(position: number, bounds: GradientStopRangeBounds): string;
+export declare function formatGradientStopPercent(position: number): string;
+export declare function hasGradientStopNearPosition(stops: readonly GradientStopRangePosition[], position: number): boolean;
+export declare function positionFromTrackOffset(offset: number, trackSize: number, bounds: GradientStopRangeBounds): number;
+export declare function positionFromMoveDelta(position: number, delta: number, trackSize: number, bounds: GradientStopRangeBounds): number;
+export declare function positionFromKeyboardMove(position: number, deltaX: number, deltaY: number, options: GradientStopRangeStepOptions, isShiftKey: boolean): number;
+export declare function positionFromKeyboardCommand(key: string, position: number, options: GradientStopRangeStepOptions): number | null;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/GradientStopRange/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/GradientStopRange/utils.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,uBAAuB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,4BAA6B,SAAQ,uBAAuB;IACzE,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACrB;AAID,UAAU,yBAAyB;IAC/B,QAAQ,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,0BAA2B,SAAQ,yBAAyB;IAClE,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,yBAAyB,EAAE,KAAK,EAAE,SAAS,CAAC,EAAE,GAAG,CAAC,EAAE,CAEjG;AAED,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,yBAAyB,EACpE,KAAK,EAAE,SAAS,CAAC,EAAE,EACnB,MAAM,EAAE,uBAAuB,GAChC,CAAC,EAAE,CAML;AAED,wBAAgB,2BAA2B,CACvC,KAAK,EAAE,SAAS,0BAA0B,EAAE,EAC5C,MAAM,EAAE,uBAAuB,GAChC,MAAM,CAgBR;AAED,wBAAgB,+BAA+B,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,uBAAuB,GAAG,MAAM,CAMzG;AAED,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAElE;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,SAAS,yBAAyB,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAElH;AAED,wBAAgB,uBAAuB,CACnC,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,uBAAuB,GAChC,MAAM,CASR;AAED,wBAAgB,qBAAqB,CACjC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,uBAAuB,GAChC,MAAM,CAQR;AAED,wBAAgB,wBAAwB,CACpC,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,4BAA4B,EACrC,UAAU,EAAE,OAAO,GACpB,MAAM,CAMR;AAED,wBAAgB,2BAA2B,CACvC,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,4BAA4B,GACtC,MAAM,GAAG,IAAI,CAkBf"}

package/dist/GradientStopRange/utils.js

@@ -0,0 +1,53 @@
+import { clamp as e } from "@reforma/lib";
+const f = 0.015;
+function a(i) {
+  return [...i].sort((t, r) => t.position - r.position);
+}
+function p(i, t) {
+  return a(i).filter((r) => Number.isFinite(r.position) && r.position >= t.min && r.position <= t.max);
+}
+function g(i, t) {
+  const r = a(i).filter((o) => Number.isFinite(o.position) && o.color.trim());
+  return r.length === 0 ? "linear-gradient(to right, var(--color-secondary), var(--color-secondary))" : r.length === 1 ? `linear-gradient(to right, ${r[0].color} 0%, ${r[0].color} 100%)` : `linear-gradient(to right, ${r.map((o) => `${o.color} ${l(o.position, t)}`).join(", ")})`;
+}
+function l(i, t) {
+  return t.max === t.min ? "0%" : `${(i - t.min) / (t.max - t.min) * 100}%`;
+}
+function x(i) {
+  return `${Math.round(i * 1e3) / 10}%`;
+}
+function h(i, t) {
+  return i.some((r) => Math.abs(r.position - t) < f);
+}
+function d(i, t, r) {
+  if (t <= 0)
+    return r.min;
+  const n = i / t, o = r.min + n * (r.max - r.min);
+  return e(r.min, o, r.max);
+}
+function S(i, t, r, n) {
+  if (r <= 0)
+    return i;
+  const o = t / r * (n.max - n.min);
+  return e(n.min, i + o, n.max);
+}
+function v(i, t, r, n, o) {
+  const m = o ? n.shiftStep : n.step, c = t < 0 || r > 0 ? -1 : 1;
+  return e(n.min, i + c * m, n.max);
+}
+function P(i, t, r) {
+  return i === "Home" ? r.min : i === "End" ? r.max : i === "PageDown" ? e(r.min, t - r.shiftStep, r.max) : i === "PageUp" ? e(r.min, t + r.shiftStep, r.max) : null;
+}
+export {
+  x as formatGradientStopPercent,
+  l as formatGradientStopTrackPosition,
+  g as gradientStopRangeBackground,
+  h as hasGradientStopNearPosition,
+  P as positionFromKeyboardCommand,
+  v as positionFromKeyboardMove,
+  S as positionFromMoveDelta,
+  d as positionFromTrackOffset,
+  a as sortedGradientStops,
+  p as visibleGradientStops
+};
+//# sourceMappingURL=utils.js.map

package/dist/GradientStopRange/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/GradientStopRange/utils.ts"],"sourcesContent":["import { clamp } from '@reforma/lib';\n\nexport interface GradientStopRangeBounds {\n    min: number;\n    max: number;\n}\n\nexport interface GradientStopRangeStepOptions extends GradientStopRangeBounds {\n    step: number;\n    shiftStep: number;\n}\n\nconst STOP_HIT_TOLERANCE = 0.015;\n\ninterface GradientStopRangePosition {\n    position: number;\n}\n\ninterface GradientStopRangeColorStop extends GradientStopRangePosition {\n    color: string;\n}\n\nexport function sortedGradientStops<T extends GradientStopRangePosition>(stops: readonly T[]): T[] {\n    return [...stops].sort((first, second) => first.position - second.position);\n}\n\nexport function visibleGradientStops<T extends GradientStopRangePosition>(\n    stops: readonly T[],\n    bounds: GradientStopRangeBounds\n): T[] {\n    return sortedGradientStops(stops).filter(stop => (\n        Number.isFinite(stop.position)\n        && stop.position >= bounds.min\n        && stop.position <= bounds.max\n    ));\n}\n\nexport function gradientStopRangeBackground(\n    stops: readonly GradientStopRangeColorStop[],\n    bounds: GradientStopRangeBounds\n): string {\n    const sorted = sortedGradientStops(stops).filter(stop => Number.isFinite(stop.position) && stop.color.trim());\n\n    if (sorted.length === 0) {\n        return 'linear-gradient(to right, var(--color-secondary), var(--color-secondary))';\n    }\n\n    if (sorted.length === 1) {\n        return `linear-gradient(to right, ${ sorted[0].color } 0%, ${ sorted[0].color } 100%)`;\n    }\n\n    const colorStops = sorted\n        .map(stop => `${ stop.color } ${ formatGradientStopTrackPosition(stop.position, bounds) }`)\n        .join(', ');\n\n    return `linear-gradient(to right, ${ colorStops })`;\n}\n\nexport function formatGradientStopTrackPosition(position: number, bounds: GradientStopRangeBounds): string {\n    if (bounds.max === bounds.min) {\n        return '0%';\n    }\n\n    return `${ ((position - bounds.min) / (bounds.max - bounds.min)) * 100 }%`;\n}\n\nexport function formatGradientStopPercent(position: number): string {\n    return `${ Math.round(position * 1000) / 10 }%`;\n}\n\nexport function hasGradientStopNearPosition(stops: readonly GradientStopRangePosition[], position: number): boolean {\n    return stops.some(stop => Math.abs(stop.position - position) < STOP_HIT_TOLERANCE);\n}\n\nexport function positionFromTrackOffset(\n    offset: number,\n    trackSize: number,\n    bounds: GradientStopRangeBounds\n): number {\n    if (trackSize <= 0) {\n        return bounds.min;\n    }\n\n    const ratio = offset / trackSize;\n    const position = bounds.min + (ratio * (bounds.max - bounds.min));\n\n    return clamp(bounds.min, position, bounds.max);\n}\n\nexport function positionFromMoveDelta(\n    position: number,\n    delta: number,\n    trackSize: number,\n    bounds: GradientStopRangeBounds\n): number {\n    if (trackSize <= 0) {\n        return position;\n    }\n\n    const deltaPosition = (delta / trackSize) * (bounds.max - bounds.min);\n\n    return clamp(bounds.min, position + deltaPosition, bounds.max);\n}\n\nexport function positionFromKeyboardMove(\n    position: number,\n    deltaX: number,\n    deltaY: number,\n    options: GradientStopRangeStepOptions,\n    isShiftKey: boolean\n): number {\n    const step = isShiftKey ? options.shiftStep : options.step;\n    const isBackwardMove = deltaX < 0 || deltaY > 0;\n    const direction = isBackwardMove ? -1 : 1;\n\n    return clamp(options.min, position + (direction * step), options.max);\n}\n\nexport function positionFromKeyboardCommand(\n    key: string,\n    position: number,\n    options: GradientStopRangeStepOptions\n): number | null {\n    if (key === 'Home') {\n        return options.min;\n    }\n\n    if (key === 'End') {\n        return options.max;\n    }\n\n    if (key === 'PageDown') {\n        return clamp(options.min, position - options.shiftStep, options.max);\n    }\n\n    if (key === 'PageUp') {\n        return clamp(options.min, position + options.shiftStep, options.max);\n    }\n\n    return null;\n}\n"],"names":["STOP_HIT_TOLERANCE","sortedGradientStops","stops","first","second","visibleGradientStops","bounds","stop","gradientStopRangeBackground","sorted","formatGradientStopTrackPosition","position","formatGradientStopPercent","hasGradientStopNearPosition","positionFromTrackOffset","offset","trackSize","ratio","clamp","positionFromMoveDelta","delta","deltaPosition","positionFromKeyboardMove","deltaX","deltaY","options","isShiftKey","step","direction","positionFromKeyboardCommand","key"],"mappings":";AACA,MAAMA,IAAqB;AACpB,SAASC,EAAoBC,GAAO;AACzC,SAAO,CAAC,GAAGA,CAAK,EAAE,KAAK,CAACC,GAAOC,MAAWD,EAAM,WAAWC,EAAO,QAAQ;AAC5E;AACO,SAASC,EAAqBH,GAAOI,GAAQ;AAClD,SAAOL,EAAoBC,CAAK,EAAE,OAAO,CAAAK,MAAQ,OAAO,SAASA,EAAK,QAAQ,KAAKA,EAAK,YAAYD,EAAO,OAAOC,EAAK,YAAYD,EAAO,GAAG;AAC/I;AACO,SAASE,EAA4BN,GAAOI,GAAQ;AACzD,QAAMG,IAASR,EAAoBC,CAAK,EAAE,OAAO,CAAAK,MAAQ,OAAO,SAASA,EAAK,QAAQ,KAAKA,EAAK,MAAM,MAAM;AAC5G,SAAIE,EAAO,WAAW,IACb,8EAELA,EAAO,WAAW,IACb,6BAA6BA,EAAO,CAAC,EAAE,KAAK,QAAQA,EAAO,CAAC,EAAE,KAAK,WAGrE,6BADYA,EAAO,IAAI,CAAAF,MAAQ,GAAGA,EAAK,KAAK,IAAIG,EAAgCH,EAAK,UAAUD,CAAM,CAAC,EAAE,EAAE,KAAK,IAAI,CAC5E;AAChD;AACO,SAASI,EAAgCC,GAAUL,GAAQ;AAChE,SAAIA,EAAO,QAAQA,EAAO,MACjB,OAEF,IAAIK,IAAWL,EAAO,QAAQA,EAAO,MAAMA,EAAO,OAAO,GAAG;AACrE;AACO,SAASM,EAA0BD,GAAU;AAClD,SAAO,GAAG,KAAK,MAAMA,IAAW,GAAI,IAAI,EAAE;AAC5C;AACO,SAASE,EAA4BX,GAAOS,GAAU;AAC3D,SAAOT,EAAM,KAAK,CAAAK,MAAQ,KAAK,IAAIA,EAAK,WAAWI,CAAQ,IAAIX,CAAkB;AACnF;AACO,SAASc,EAAwBC,GAAQC,GAAWV,GAAQ;AACjE,MAAIU,KAAa;AACf,WAAOV,EAAO;AAEhB,QAAMW,IAAQF,IAASC,GACjBL,IAAWL,EAAO,MAAMW,KAASX,EAAO,MAAMA,EAAO;AAC3D,SAAOY,EAAMZ,EAAO,KAAKK,GAAUL,EAAO,GAAG;AAC/C;AACO,SAASa,EAAsBR,GAAUS,GAAOJ,GAAWV,GAAQ;AACxE,MAAIU,KAAa;AACf,WAAOL;AAET,QAAMU,IAAgBD,IAAQJ,KAAaV,EAAO,MAAMA,EAAO;AAC/D,SAAOY,EAAMZ,EAAO,KAAKK,IAAWU,GAAef,EAAO,GAAG;AAC/D;AACO,SAASgB,EAAyBX,GAAUY,GAAQC,GAAQC,GAASC,GAAY;AACtF,QAAMC,IAAOD,IAAaD,EAAQ,YAAYA,EAAQ,MAEhDG,IADiBL,IAAS,KAAKC,IAAS,IACX,KAAK;AACxC,SAAON,EAAMO,EAAQ,KAAKd,IAAWiB,IAAYD,GAAMF,EAAQ,GAAG;AACpE;AACO,SAASI,EAA4BC,GAAKnB,GAAUc,GAAS;AAClE,SAAIK,MAAQ,SACHL,EAAQ,MAEbK,MAAQ,QACHL,EAAQ,MAEbK,MAAQ,aACHZ,EAAMO,EAAQ,KAAKd,IAAWc,EAAQ,WAAWA,EAAQ,GAAG,IAEjEK,MAAQ,WACHZ,EAAMO,EAAQ,KAAKd,IAAWc,EAAQ,WAAWA,EAAQ,GAAG,IAE9D;AACT;"}

package/dist/Hotkey/Hotkey.d.ts

@@ -0,0 +1,24 @@
+import { Keyboard as AriaKeyboard } from 'react-aria-components';
+import { type HotkeyValue } from './hotkeysToSymbols';
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
+import type { TextVariant } from '../types';
+type AriaKeyboardProps = ComponentPropsWithoutRef<typeof AriaKeyboard>;
+export type HotkeySize = 'xs' | 'sm' | 'md';
+export interface HotkeyProps extends Omit<AriaKeyboardProps, 'children' | 'className'> {
+    ref?: Ref<HTMLElement>;
+    className?: string;
+    hotkey?: HotkeyValue;
+    /** Capsule scale. Drives default type size; override with `textVariant`. */
+    size?: HotkeySize;
+    /** Type size. Omit to follow `size`; pass `false` to inherit ambient typography. */
+    textVariant?: TextVariant | false;
+    children?: ReactNode;
+}
+export declare function Hotkey({ ref, className, hotkey, size, textVariant, children, ...props }: HotkeyProps): import("react").JSX.Element;
+export declare namespace Hotkey {
+    var displayName: string;
+}
+/** Label + shortcut for Button / ToggleButton tooltips. */
+export declare function tooltipWithHotkey(label: string, hotkey: HotkeyValue): ReactNode;
+export {};
+//# sourceMappingURL=Hotkey.d.ts.map

package/dist/Hotkey/Hotkey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hotkey.d.ts","sourceRoot":"","sources":["../../src/Hotkey/Hotkey.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAIjE,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAExE,OAAO,KAAK,EAAE,wBAAwB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,KAAK,iBAAiB,GAAG,wBAAwB,CAAC,OAAO,YAAY,CAAC,CAAC;AAEvE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAQ5C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,CAAC;IAClF,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oFAAoF;IACpF,WAAW,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EACnB,GAAG,EACH,SAAS,EACT,MAAM,EACN,IAAW,EACX,WAAW,EACX,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,WAAW,+BAwBb;yBAhCe,MAAM;;;AAoCtB,2DAA2D;AAC3D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,SAAS,CAQ/E"}

package/dist/Hotkey/Hotkey.js

@@ -0,0 +1,50 @@
+import { cn as p } from "@reforma/lib";
+import { Keyboard as d } from "react-aria-components";
+import { Text as f } from "../Text/Text.js";
+import y from "./Hotkey.module.css.js";
+import { hotkeysToSymbols as h } from "./hotkeysToSymbols.js";
+import { jsx as r, jsxs as x, Fragment as k } from "react/jsx-runtime";
+const u = {
+  xs: "xs",
+  sm: "sm",
+  md: "md"
+};
+function n({
+  ref: o,
+  className: t,
+  hotkey: s,
+  size: e = "xs",
+  textVariant: i,
+  children: m,
+  ...a
+}) {
+  const c = m ?? (s != null ? h(s).join(" ") : void 0), l = i === !1 ? void 0 : i ?? u[e];
+  return /* @__PURE__ */ r(d, {
+    ...a,
+    ref: o,
+    "data-hotkey": "",
+    "data-size": e,
+    className: p(y.hotkey, t),
+    children: /* @__PURE__ */ r(f, {
+      as: "span",
+      variant: l,
+      color: "inherit",
+      whitespace: "nowrap",
+      children: c
+    })
+  });
+}
+n.displayName = "Hotkey";
+function w(o, t) {
+  return /* @__PURE__ */ x(k, {
+    children: [o, " ", /* @__PURE__ */ r(n, {
+      hotkey: t,
+      size: "xs"
+    })]
+  });
+}
+export {
+  n as Hotkey,
+  w as tooltipWithHotkey
+};
+//# sourceMappingURL=Hotkey.js.map

package/dist/Hotkey/Hotkey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hotkey.js","sources":["../../src/Hotkey/Hotkey.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport { Keyboard as AriaKeyboard } from 'react-aria-components';\n\nimport { Text } from '../Text';\nimport styles from './Hotkey.module.css';\nimport { hotkeysToSymbols, type HotkeyValue } from './hotkeysToSymbols';\n\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';\nimport type { TextVariant } from '../types';\n\ntype AriaKeyboardProps = ComponentPropsWithoutRef<typeof AriaKeyboard>;\n\nexport type HotkeySize = 'xs' | 'sm' | 'md';\n\nconst SIZE_TEXT_VARIANT: Record<HotkeySize, TextVariant> = {\n    xs: 'xs',\n    sm: 'sm',\n    md: 'md',\n};\n\nexport interface HotkeyProps extends Omit<AriaKeyboardProps, 'children' | 'className'> {\n    ref?: Ref<HTMLElement>;\n    className?: string;\n    hotkey?: HotkeyValue;\n    /** Capsule scale. Drives default type size; override with `textVariant`. */\n    size?: HotkeySize;\n    /** Type size. Omit to follow `size`; pass `false` to inherit ambient typography. */\n    textVariant?: TextVariant | false;\n    children?: ReactNode;\n}\n\nexport function Hotkey({\n    ref,\n    className,\n    hotkey,\n    size = 'xs',\n    textVariant,\n    children,\n    ...props\n}: HotkeyProps) {\n    const content = children ?? (hotkey != null ? hotkeysToSymbols(hotkey).join(' ') : undefined);\n    const variant = textVariant === false\n        ? undefined\n        : (textVariant ?? SIZE_TEXT_VARIANT[size]);\n\n    return (\n        <AriaKeyboard\n            { ...props }\n            ref={ ref }\n            data-hotkey=\"\"\n            data-size={ size }\n            className={ cn(styles.hotkey, className) }\n        >\n            <Text\n                as=\"span\"\n                variant={ variant }\n                color=\"inherit\"\n                whitespace=\"nowrap\"\n            >\n                {content}\n            </Text>\n        </AriaKeyboard>\n    );\n}\n\nHotkey.displayName = 'Hotkey';\n\n/** Label + shortcut for Button / ToggleButton tooltips. */\nexport function tooltipWithHotkey(label: string, hotkey: HotkeyValue): ReactNode {\n    return (\n        <>\n            { label }\n            { ' ' }\n            <Hotkey hotkey={ hotkey } size=\"xs\" />\n        </>\n    );\n}\n"],"names":["SIZE_TEXT_VARIANT","Hotkey","ref","className","hotkey","size","textVariant","children","props","content","hotkeysToSymbols","variant","AriaKeyboard","cn","styles","Text","tooltipWithHotkey","label","_Fragment"],"mappings":";;;;;;AAMA,MAAMA,IAAoB;AAAA,EACxB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACO,SAASC,EAAO;AAAA,EACrB,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAAUF,MAAaH,KAAU,OAAOM,EAAiBN,CAAM,EAAE,KAAK,GAAG,IAAI,SAC7EO,IAAUL,MAAgB,KAAQ,SAAYA,KAAeN,EAAkBK,CAAI;AACzF,2BAAyBO,GAAc;AAAA,IACrC,GAAGJ;AAAA,IACH,KAAAN;AAAA,IACA,eAAe;AAAA,IACf,aAAaG;AAAA,IACb,WAAWQ,EAAGC,EAAO,QAAQX,CAAS;AAAA,IACtC,4BAA4BY,GAAM;AAAA,MAChC,IAAI;AAAA,MACJ,SAAAJ;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,MACZ,UAAUF;AAAA,IAAA,CACX;AAAA,EAAA,CACF;AACH;AACAR,EAAO,cAAc;AAGd,SAASe,EAAkBC,GAAOb,GAAQ;AAC/C,2BAA0Bc,GAAW;AAAA,IACnC,UAAU,CAACD,GAAO,uBAAuBhB,GAAQ;AAAA,MAC/C,QAAAG;AAAA,MACA,MAAM;AAAA,IAAA,CACP,CAAC;AAAA,EAAA,CACH;AACH;"}

package/dist/Hotkey/Hotkey.module.css

@@ -0,0 +1 @@
+@layer components{:root{--hotkey-background: color-mix(in oklab, currentColor 5%, transparent)}.dark{--hotkey-background: color-mix(in oklab, currentColor 20%, transparent)}.Hotkey_hotkey_pr780G{--reforma-hotkey-radius: var(--radius-sm);display:inline-flex;justify-content:center;align-items:center;vertical-align:baseline;box-sizing:border-box;border-radius:calc(var(--reforma-hotkey-radius) * var(--squircle-radius-factor));background:var(--hotkey-background);color:inherit;white-space:nowrap;corner-shape:superellipse(var(--squircle-value))}.Hotkey_hotkey_pr780G[data-size=xs]{--reforma-hotkey-radius: var(--radius-xs);padding:var(--spacing-2) var(--spacing-4);min-width:calc(1em + var(--spacing-6));min-height:calc(1em + var(--spacing-4))}.Hotkey_hotkey_pr780G[data-size=sm]{--reforma-hotkey-radius: var(--radius-sm);padding:var(--spacing-4) var(--spacing-6);min-width:calc(1em + var(--spacing-8));min-height:calc(1em + var(--spacing-6))}.Hotkey_hotkey_pr780G[data-size=md]{--reforma-hotkey-radius: var(--radius-sm);padding:var(--spacing-6) var(--spacing-8);min-width:calc(1em + var(--spacing-10));min-height:calc(1em + var(--spacing-8))}}

package/dist/Hotkey/Hotkey.module.css.js

@@ -0,0 +1,8 @@
+const t = "Hotkey_hotkey_pr780G", e = {
+  hotkey: t
+};
+export {
+  e as default,
+  t as hotkey
+};
+//# sourceMappingURL=Hotkey.module.css.js.map

package/dist/Hotkey/Hotkey.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hotkey.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Hotkey/hotkeysToSymbols.d.ts

@@ -0,0 +1,4 @@
+export type HotkeyValue = string | readonly string[];
+/** Transforms a hotkey identifier into readable key labels. */
+export declare function hotkeysToSymbols(hotkey: HotkeyValue): string[];
+//# sourceMappingURL=hotkeysToSymbols.d.ts.map

package/dist/Hotkey/hotkeysToSymbols.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotkeysToSymbols.d.ts","sourceRoot":"","sources":["../../src/Hotkey/hotkeysToSymbols.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,CAAC;AA4CrD,+DAA+D;AAC/D,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,EAAE,CAY9D"}