@tachui/forms 0.7.0-alpha1 → 0.8.0-alpha

package/dist/Slider-0-oal5YR.js

@@ -0,0 +1,644 @@
+import { withModifiers as g, isSignal as m, getSignalImpl as x, h as l, createEffect as b, createSignal as y, text as d } from "@tachui/core";
+const v = {
+  colors: {
+    background: "#FFFFFF",
+    border: "#D1D1D6",
+    buttonBackground: "#F2F2F7",
+    buttonHover: "#E5E5EA",
+    buttonPress: "#D1D1D6",
+    buttonDisabled: "#F2F2F7",
+    text: "#000000",
+    buttonText: "#007AFF",
+    disabledText: "#8E8E93",
+    focusRing: "#007AFF"
+  },
+  spacing: {
+    padding: 12,
+    gap: 8,
+    borderRadius: 8,
+    buttonSize: 32
+  },
+  typography: {
+    labelSize: 16,
+    buttonSize: 18,
+    labelWeight: "400",
+    buttonWeight: "600",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+  },
+  transitions: {
+    duration: 150,
+    easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
+  }
+};
+class S {
+  type = "component";
+  id;
+  props;
+  theme = v;
+  incrementButton = null;
+  decrementButton = null;
+  isEditing = !1;
+  longPressTimer = null;
+  longPressInterval = null;
+  constructor(t) {
+    this.props = t, this.id = `stepper-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  resolveValue(t) {
+    return m(t) ? t() : t;
+  }
+  getValue() {
+    return this.resolveValue(this.props.value);
+  }
+  setValue(t) {
+    const e = this.constrainValue(t);
+    if (m(this.props.value)) {
+      const i = x(this.props.value);
+      i && i.set(e);
+    }
+    this.props.onChange && this.props.onChange(e);
+  }
+  getMinimumValue() {
+    return this.props.minimumValue ?? -1 / 0;
+  }
+  getMaximumValue() {
+    return this.props.maximumValue ?? 1 / 0;
+  }
+  getStep() {
+    return this.props.step ?? 1;
+  }
+  isDisabled() {
+    return this.resolveValue(this.props.disabled ?? !1);
+  }
+  constrainValue(t) {
+    const e = this.getMinimumValue(), i = this.getMaximumValue();
+    return Math.min(Math.max(t, e), i);
+  }
+  canIncrement() {
+    if (this.isDisabled()) return !1;
+    const t = this.getValue(), e = this.getMaximumValue();
+    return t < e;
+  }
+  canDecrement() {
+    if (this.isDisabled()) return !1;
+    const t = this.getValue(), e = this.getMinimumValue();
+    return t > e;
+  }
+  increment() {
+    if (this.canIncrement())
+      if (this.props.onIncrement)
+        this.props.onIncrement();
+      else {
+        const t = this.getValue(), e = this.getStep();
+        this.setValue(t + e);
+      }
+  }
+  decrement() {
+    if (this.canDecrement())
+      if (this.props.onDecrement)
+        this.props.onDecrement();
+      else {
+        const t = this.getValue(), e = this.getStep();
+        this.setValue(t - e);
+      }
+  }
+  formatValue(t) {
+    return this.props.valueFormatter ? this.props.valueFormatter(t) : Number.isInteger(t) ? t.toString() : parseFloat(t.toFixed(2)).toString();
+  }
+  startLongPress(t) {
+    this.stopLongPress(), this.setEditing(!0), this.longPressTimer = setTimeout(() => {
+      this.longPressInterval = setInterval(() => {
+        t();
+      }, 100);
+    }, 500);
+  }
+  stopLongPress() {
+    this.longPressTimer && (clearTimeout(this.longPressTimer), this.longPressTimer = null), this.longPressInterval && (clearInterval(this.longPressInterval), this.longPressInterval = null), this.setEditing(!1);
+  }
+  setEditing(t) {
+    this.isEditing !== t && (this.isEditing = t, this.props.onEditingChanged && this.props.onEditingChanged(t));
+  }
+  createButton(t, e, i, s) {
+    const n = l("button", {
+      type: "button",
+      disabled: !s,
+      "aria-label": t === "increment" ? this.props.incrementAccessibilityLabel || "Increment" : this.props.decrementAccessibilityLabel || "Decrement",
+      style: {
+        width: `${this.theme.spacing.buttonSize}px`,
+        height: `${this.theme.spacing.buttonSize}px`,
+        border: `1px solid ${this.theme.colors.border}`,
+        borderRadius: `${this.theme.spacing.borderRadius}px`,
+        backgroundColor: s ? this.theme.colors.buttonBackground : this.theme.colors.buttonDisabled,
+        color: s ? this.theme.colors.buttonText : this.theme.colors.disabledText,
+        fontSize: `${this.theme.typography.buttonSize}px`,
+        fontWeight: this.theme.typography.buttonWeight,
+        fontFamily: this.theme.typography.fontFamily,
+        cursor: s ? "pointer" : "not-allowed",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        userSelect: "none",
+        outline: "none",
+        transition: `all ${this.theme.transitions.duration}ms ${this.theme.transitions.easing}`,
+        touchAction: "manipulation"
+        // Prevent double-tap zoom on mobile
+      },
+      onclick: (r) => {
+        r.preventDefault(), s && i();
+      },
+      onmousedown: (r) => {
+        r.preventDefault(), s && this.startLongPress(i);
+      },
+      onmouseup: () => {
+        this.stopLongPress();
+      },
+      ontouchstart: (r) => {
+        r.preventDefault(), s && this.startLongPress(i);
+      },
+      ontouchend: (r) => {
+        r.preventDefault(), this.stopLongPress();
+      },
+      onmouseenter: (r) => {
+        if (s) {
+          const a = r.target;
+          a.style.backgroundColor = this.theme.colors.buttonHover;
+        }
+      },
+      onmouseleave: (r) => {
+        const a = r.target;
+        a.style.backgroundColor = s ? this.theme.colors.buttonBackground : this.theme.colors.buttonDisabled, this.stopLongPress();
+      },
+      onkeydown: (r) => {
+        (r.key === "Enter" || r.key === " ") && (r.preventDefault(), s && i());
+      },
+      onfocus: (r) => {
+        const a = r.target;
+        a.style.boxShadow = `0 0 0 2px ${this.theme.colors.focusRing}40`;
+      },
+      onblur: (r) => {
+        const a = r.target;
+        a.style.boxShadow = "none", this.stopLongPress();
+      }
+    }), o = n.element;
+    return o && (o.textContent = e, o.setAttribute("tabindex", "0"), t === "increment" ? this.incrementButton = o : this.decrementButton = o), n;
+  }
+  createLabel() {
+    const t = this.getValue(), e = this.formatValue(t);
+    let i = this.props.title || "";
+    this.props.displayValueInLabel !== !1 && this.props.title ? i = `${this.props.title}: ${e}` : !this.props.title && this.props.displayValueInLabel !== !1 && (i = e);
+    const s = l("span", {
+      style: {
+        fontSize: `${this.theme.typography.labelSize}px`,
+        fontWeight: this.theme.typography.labelWeight,
+        fontFamily: this.theme.typography.fontFamily,
+        color: this.isDisabled() ? this.theme.colors.disabledText : this.theme.colors.text,
+        userSelect: "none",
+        display: "flex",
+        alignItems: "center",
+        minHeight: `${this.theme.spacing.buttonSize}px`
+      }
+    }), n = s.element;
+    return n && (n.textContent = i), s;
+  }
+  render() {
+    const t = l("div", {
+      id: this.id,
+      "data-component": "stepper",
+      role: "group",
+      "aria-label": this.props.accessibilityLabel || this.props.title || "Numeric stepper",
+      "aria-describedby": this.props.accessibilityHint ? `${this.id}-hint` : void 0,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: `${this.theme.spacing.gap}px`,
+        padding: `${this.theme.spacing.padding}px`,
+        backgroundColor: this.theme.colors.background,
+        border: `1px solid ${this.theme.colors.border}`,
+        borderRadius: `${this.theme.spacing.borderRadius}px`,
+        fontFamily: this.theme.typography.fontFamily
+      }
+    }), e = this.createButton(
+      "decrement",
+      "−",
+      // Using minus sign (U+2212) instead of hyphen for better visual appearance
+      () => this.decrement(),
+      this.canDecrement()
+    ), i = this.createLabel(), s = this.createButton(
+      "increment",
+      "+",
+      () => this.increment(),
+      this.canIncrement()
+    ), n = t.element;
+    if (n) {
+      const o = e.element, r = i.element, a = s.element;
+      if (o && n.appendChild(o), r && n.appendChild(r), a && n.appendChild(a), this.props.accessibilityHint) {
+        const c = l("span", {
+          id: `${this.id}-hint`,
+          style: {
+            position: "absolute",
+            width: "1px",
+            height: "1px",
+            padding: "0",
+            margin: "-1px",
+            overflow: "hidden",
+            clip: "rect(0, 0, 0, 0)",
+            whiteSpace: "nowrap",
+            border: "0"
+          }
+        }).element;
+        c && (c.textContent = this.props.accessibilityHint, n.appendChild(c));
+      }
+    }
+    return b(() => {
+      if (this.incrementButton) {
+        const r = this.canIncrement();
+        this.incrementButton.disabled = !r, this.incrementButton.style.backgroundColor = r ? this.theme.colors.buttonBackground : this.theme.colors.buttonDisabled, this.incrementButton.style.color = r ? this.theme.colors.buttonText : this.theme.colors.disabledText, this.incrementButton.style.cursor = r ? "pointer" : "not-allowed";
+      }
+      if (this.decrementButton) {
+        const r = this.canDecrement();
+        this.decrementButton.disabled = !r, this.decrementButton.style.backgroundColor = r ? this.theme.colors.buttonBackground : this.theme.colors.buttonDisabled, this.decrementButton.style.color = r ? this.theme.colors.buttonText : this.theme.colors.disabledText, this.decrementButton.style.cursor = r ? "pointer" : "not-allowed";
+      }
+      const o = n?.querySelector(
+        'span:not([id$="-hint"])'
+      );
+      if (o) {
+        const r = this.getValue(), a = this.formatValue(r);
+        let u = this.props.title || "";
+        this.props.displayValueInLabel !== !1 && this.props.title ? u = `${this.props.title}: ${a}` : !this.props.title && this.props.displayValueInLabel !== !1 && (u = a), o.textContent = u, o.style.color = this.isDisabled() ? this.theme.colors.disabledText : this.theme.colors.text;
+      }
+    }), t;
+  }
+}
+function k(p) {
+  return g(new S(p));
+}
+class V {
+  constructor(t) {
+    this.props = t, this.id = `slider-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const [e, i] = y(!1);
+    this.isDragging = e, this.setIsDragging = i, b(() => {
+      const s = this.getValue();
+      this.sliderElement && !this.isDragging() && (this.sliderElement.value = String(s), this.updateTrackFill());
+    });
+  }
+  type = "component";
+  id;
+  mounted = !1;
+  cleanup = [];
+  sliderElement = null;
+  isDragging;
+  setIsDragging;
+  /**
+   * Get current value
+   */
+  getValue() {
+    const { value: t } = this.props;
+    return m(t) ? t() : t;
+  }
+  /**
+   * Check if slider is disabled
+   */
+  isDisabled() {
+    const { disabled: t } = this.props;
+    return typeof t == "boolean" ? t : m(t) ? t() : !1;
+  }
+  /**
+   * Format value for display
+   */
+  formatValue(t) {
+    const { formatter: e } = this.props;
+    if (e)
+      return e(t);
+    const i = this.props.step || 1;
+    if (i < 1) {
+      const s = String(i).split(".")[1]?.length || 0;
+      return t.toFixed(s);
+    }
+    return String(Math.round(t));
+  }
+  /**
+   * Handle value change
+   */
+  handleValueChange = (t) => {
+    const { min: e = 0, max: i = 100, step: s = 1 } = this.props;
+    let n = Math.max(e, Math.min(i, t));
+    s > 0 && (n = Math.round((n - e) / s) * s + e), this.props.onValueChange && this.props.onValueChange(n), this.updateTrackFill();
+  };
+  /**
+   * Update track fill visual
+   */
+  updateTrackFill() {
+    if (!this.sliderElement) return;
+    const { min: t = 0, max: e = 100 } = this.props, s = (this.getValue() - t) / (e - t) * 100;
+    this.sliderElement.style.setProperty("--slider-progress", `${s}%`);
+  }
+  /**
+   * Handle input events
+   */
+  handleInput = (t) => {
+    const e = t.target, i = parseFloat(e.value);
+    Number.isNaN(i) || this.handleValueChange(i);
+  };
+  /**
+   * Handle mouse/touch start
+   */
+  handleStart = () => {
+    this.isDisabled() || this.setIsDragging(!0);
+  };
+  /**
+   * Handle mouse/touch end
+   */
+  handleEnd = () => {
+    this.setIsDragging(!1);
+  };
+  /**
+   * Get slider size styles
+   */
+  getSizeStyles() {
+    const { size: t = "medium" } = this.props;
+    switch (t) {
+      case "small":
+        return {
+          height: "4px",
+          thumbSize: "16px"
+        };
+      case "large":
+        return {
+          height: "8px",
+          thumbSize: "24px"
+        };
+      default:
+        return {
+          height: "6px",
+          thumbSize: "20px"
+        };
+    }
+  }
+  /**
+   * Get slider variant styles
+   */
+  getVariantStyles() {
+    const {
+      variant: t = "default",
+      trackColor: e = "#e2e8f0",
+      activeTrackColor: i = "#007AFF",
+      thumbColor: s = "#ffffff"
+    } = this.props, n = this.getSizeStyles(), o = {
+      "--slider-track-color": e,
+      "--slider-active-track-color": i,
+      "--slider-thumb-color": s,
+      "--slider-height": n.height,
+      "--slider-thumb-size": n.thumbSize
+    };
+    switch (t) {
+      case "filled":
+        return {
+          ...o,
+          "--slider-track-color": "#f1f5f9",
+          "--slider-active-track-color": i,
+          backgroundColor: "#f8fafc",
+          borderRadius: "12px",
+          padding: "8px"
+        };
+      case "minimal":
+        return {
+          ...o,
+          "--slider-track-color": "transparent",
+          "--slider-active-track-color": i,
+          border: `1px solid ${e}`
+        };
+      default:
+        return o;
+    }
+  }
+  /**
+   * Render slider marks
+   */
+  renderMarks() {
+    const { marks: t, min: e = 0, max: i = 100 } = this.props;
+    return !t || t.length === 0 ? [] : t.map((s) => {
+      const n = (s.value - e) / (i - e) * 100;
+      return l(
+        "div",
+        {
+          key: String(s.value),
+          style: {
+            position: "absolute",
+            left: `${n}%`,
+            top: "50%",
+            transform: "translate(-50%, -50%)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            pointerEvents: "none"
+          }
+        },
+        // Mark indicator
+        l("div", {
+          style: {
+            width: "2px",
+            height: "12px",
+            backgroundColor: s.color || "#666",
+            marginBottom: "4px"
+          }
+        }),
+        ...s.label ? [
+          l(
+            "span",
+            {
+              style: {
+                fontSize: "12px",
+                color: "#666",
+                whiteSpace: "nowrap"
+              }
+            },
+            d(s.label)
+          )
+        ] : []
+      );
+    });
+  }
+  /**
+   * Render value labels
+   */
+  renderLabels() {
+    const {
+      showLabels: t,
+      min: e = 0,
+      max: i = 100,
+      minimumValueLabel: s,
+      maximumValueLabel: n
+    } = this.props;
+    return t ? [
+      l(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "space-between",
+            marginTop: "8px",
+            fontSize: "12px",
+            color: "#666"
+          }
+        },
+        l("span", {}, d(s || this.formatValue(e))),
+        l("span", {}, d(n || this.formatValue(i)))
+      )
+    ] : [];
+  }
+  /**
+   * Render value display
+   */
+  renderValueDisplay() {
+    const { showValue: t } = this.props;
+    if (!t) return [];
+    const e = this.getValue();
+    return [
+      l(
+        "div",
+        {
+          style: {
+            display: "flex",
+            justifyContent: "center",
+            marginBottom: "8px",
+            fontSize: "14px",
+            fontWeight: "600",
+            color: "#1a1a1a"
+          }
+        },
+        d(this.formatValue(e))
+      )
+    ];
+  }
+  render() {
+    const {
+      min: t = 0,
+      max: e = 100,
+      step: i = 1,
+      vertical: s = !1,
+      accessibilityLabel: n,
+      accessibilityHint: o,
+      accessibilityValueDescription: r
+    } = this.props, a = this.getValue(), u = this.getVariantStyles(), c = this.isDisabled(), f = {
+      appearance: "none",
+      width: s ? "6px" : "100%",
+      height: s ? "200px" : "var(--slider-height)",
+      background: `linear-gradient(to ${s ? "top" : "right"}, var(--slider-active-track-color) 0%, var(--slider-active-track-color) var(--slider-progress, 0%), var(--slider-track-color) var(--slider-progress, 0%), var(--slider-track-color) 100%)`,
+      borderRadius: "calc(var(--slider-height) / 2)",
+      outline: "none",
+      cursor: c ? "not-allowed" : "pointer",
+      opacity: c ? 0.5 : 1,
+      transition: "all 0.2s ease",
+      // Webkit styles
+      WebkitAppearance: "none",
+      // Thumb styles
+      "&::-webkit-slider-thumb": {
+        appearance: "none",
+        width: "var(--slider-thumb-size)",
+        height: "var(--slider-thumb-size)",
+        borderRadius: "50%",
+        background: "var(--slider-thumb-color)",
+        border: "2px solid var(--slider-active-track-color)",
+        cursor: c ? "not-allowed" : "grab",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+        transition: "all 0.2s ease"
+      },
+      "&::-webkit-slider-thumb:hover": c ? {} : {
+        transform: "scale(1.1)",
+        boxShadow: "0 4px 8px rgba(0,0,0,0.15)"
+      },
+      "&::-webkit-slider-thumb:active": c ? {} : {
+        cursor: "grabbing",
+        transform: "scale(1.05)"
+      },
+      // Firefox styles
+      "&::-moz-range-thumb": {
+        width: "var(--slider-thumb-size)",
+        height: "var(--slider-thumb-size)",
+        borderRadius: "50%",
+        background: "var(--slider-thumb-color)",
+        border: "2px solid var(--slider-active-track-color)",
+        cursor: c ? "not-allowed" : "pointer",
+        boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+      },
+      "&::-moz-range-track": {
+        height: "var(--slider-height)",
+        borderRadius: "calc(var(--slider-height) / 2)",
+        background: "var(--slider-track-color)",
+        border: "none"
+      }
+    };
+    return l(
+      "div",
+      {
+        style: {
+          ...u,
+          position: "relative",
+          display: "flex",
+          flexDirection: s ? "row" : "column",
+          alignItems: s ? "center" : "stretch",
+          gap: s ? "12px" : "0"
+        },
+        "aria-label": n,
+        "aria-describedby": o ? `${this.id}-hint` : void 0
+      },
+      ...this.renderValueDisplay(),
+      // Slider container
+      l(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: s ? "auto" : "100%",
+            height: s ? "200px" : "auto"
+          }
+        },
+        // Slider input
+        l("input", {
+          ref: (h) => {
+            this.sliderElement = h, h && !this.mounted && (h.addEventListener("input", this.handleInput), h.addEventListener("mousedown", this.handleStart), h.addEventListener("mouseup", this.handleEnd), h.addEventListener("touchstart", this.handleStart), h.addEventListener("touchend", this.handleEnd), this.cleanup.push(() => {
+              h.removeEventListener("input", this.handleInput), h.removeEventListener("mousedown", this.handleStart), h.removeEventListener("mouseup", this.handleEnd), h.removeEventListener("touchstart", this.handleStart), h.removeEventListener("touchend", this.handleEnd);
+            }), this.updateTrackFill(), this.mounted = !0);
+          },
+          type: "range",
+          min: String(t),
+          max: String(e),
+          step: String(i),
+          value: String(a),
+          disabled: c,
+          orient: s ? "vertical" : void 0,
+          style: f,
+          "aria-label": n,
+          "aria-valuemin": t,
+          "aria-valuemax": e,
+          "aria-valuenow": a,
+          "aria-valuetext": r ? r(a) : this.formatValue(a)
+        }),
+        ...this.renderMarks()
+      ),
+      ...this.renderLabels(),
+      ...o ? [
+        l(
+          "div",
+          {
+            id: `${this.id}-hint`,
+            style: {
+              fontSize: "12px",
+              color: "#666",
+              marginTop: "4px"
+            }
+          },
+          d(o)
+        )
+      ] : []
+    );
+  }
+}
+function w(p, t = {}) {
+  const e = { ...t, value: p }, i = new V(e);
+  return g(i);
+}
+export {
+  k as S,
+  w as a
+};
+//# sourceMappingURL=Slider-0-oal5YR.js.map