@proyecto-viviana/ui 0.2.2 → 0.2.5

package/dist/index.js

@@ -1147,7 +1147,370 @@ import { spread as _$spread2 } from "solid-js/web";
 import { mergeProps as _$mergeProps8 } from "solid-js/web";
 import { splitProps as splitProps8, mergeProps as solidMergeProps4, Show as Show9 } from "solid-js";
 import { createTextField, createFocusRing } from "@proyecto-viviana/solidaria";
-import { createTextFieldState } from "@proyecto-viviana/solid-stately";
+
+// ../solid-stately/src/utils/reactivity.ts
+function access(value) {
+  return typeof value === "function" ? value() : value;
+}
+
+// ../solid-stately/src/textfield/createTextFieldState.ts
+import { createSignal as createSignal3 } from "solid-js";
+function createTextFieldState(props = {}) {
+  const getProps = () => access(props);
+  const initialProps = getProps();
+  const initialValue = initialProps.value ?? initialProps.defaultValue ?? "";
+  const [internalValue, setInternalValue] = createSignal3(initialValue);
+  const isControlled = () => getProps().value !== void 0;
+  const value = () => {
+    const p = getProps();
+    return isControlled() ? p.value ?? "" : internalValue();
+  };
+  function setValue(newValue) {
+    const p = getProps();
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+    p.onChange?.(newValue);
+  }
+  return {
+    value,
+    setValue
+  };
+}
+
+// ../solid-stately/src/numberfield/createNumberFieldState.ts
+import { createSignal as createSignal4, createMemo } from "solid-js";
+function handleDecimalOperation(operator, value1, value2) {
+  const getDecimals = (n) => {
+    const str = String(n);
+    const idx = str.indexOf(".");
+    return idx === -1 ? 0 : str.length - idx - 1;
+  };
+  const decimals = Math.max(getDecimals(value1), getDecimals(value2));
+  const multiplier = Math.pow(10, decimals);
+  const int1 = Math.round(value1 * multiplier);
+  const int2 = Math.round(value2 * multiplier);
+  const result = operator === "+" ? int1 + int2 : int1 - int2;
+  return result / multiplier;
+}
+function clamp(value, min, max) {
+  let result = value;
+  if (min != null && result < min) result = min;
+  if (max != null && result > max) result = max;
+  return result;
+}
+function snapToStep(value, step, min) {
+  const base = min ?? 0;
+  const diff = value - base;
+  const steps = Math.round(diff / step);
+  return handleDecimalOperation("+", base, steps * step);
+}
+function createNumberFieldState(props) {
+  const getProps = () => access(props);
+  const locale = () => getProps().locale ?? "en-US";
+  const formatOptions = () => getProps().formatOptions ?? {};
+  const formatter = createMemo(() => {
+    return new Intl.NumberFormat(locale(), formatOptions());
+  });
+  const parseNumber = (value) => {
+    if (!value || value === "" || value === "-") return NaN;
+    const opts = formatOptions();
+    const testNumber = formatter().format(1.1);
+    const decimalSeparator = testNumber.charAt(1);
+    let normalized = value;
+    if (decimalSeparator !== ".") {
+      normalized = normalized.replace(decimalSeparator, ".");
+    }
+    normalized = normalized.replace(/[^\d.\-]/g, "");
+    const parsed = parseFloat(normalized);
+    return parsed;
+  };
+  const formatNumber = (value) => {
+    if (isNaN(value)) return "";
+    return formatter().format(value);
+  };
+  const step = createMemo(() => {
+    const p = getProps();
+    if (p.step != null) return p.step;
+    if (p.formatOptions?.style === "percent") return 0.01;
+    return 1;
+  });
+  const [inputValue, setInputValueInternal] = createSignal4("");
+  const [numberValue, setNumberValue] = createSignal4(NaN);
+  const initValue = () => {
+    const p = getProps();
+    const initial = p.value ?? p.defaultValue;
+    if (initial != null) {
+      setNumberValue(initial);
+      setInputValueInternal(formatNumber(initial));
+    }
+  };
+  let initialized = false;
+  const ensureInitialized = () => {
+    if (!initialized) {
+      initialized = true;
+      initValue();
+    }
+  };
+  const actualNumberValue = createMemo(() => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.value !== void 0) {
+      return p.value;
+    }
+    return numberValue();
+  });
+  const validate = (value) => {
+    if (value === "" || value === "-") return true;
+    const opts = formatOptions();
+    const testNumber = formatter().format(1.1);
+    const decimalSeparator = testNumber.charAt(1);
+    const pattern = new RegExp(
+      `^-?\\d*${decimalSeparator === "." ? "\\." : decimalSeparator}?\\d*$`
+    );
+    return pattern.test(value);
+  };
+  const setInputValue = (value) => {
+    ensureInitialized();
+    setInputValueInternal(value);
+  };
+  const commit = () => {
+    ensureInitialized();
+    const p = getProps();
+    const input = inputValue();
+    if (input === "" || input === "-") {
+      setNumberValue(NaN);
+      setInputValueInternal("");
+      return;
+    }
+    let parsed = parseNumber(input);
+    if (isNaN(parsed)) {
+      setInputValueInternal(formatNumber(actualNumberValue()));
+      return;
+    }
+    parsed = clamp(parsed, p.minValue, p.maxValue);
+    parsed = snapToStep(parsed, step(), p.minValue);
+    setNumberValue(parsed);
+    setInputValueInternal(formatNumber(parsed));
+    if (p.value === void 0) {
+      p.onChange?.(parsed);
+    } else {
+      p.onChange?.(parsed);
+    }
+  };
+  const canIncrement = createMemo(() => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return false;
+    const current = actualNumberValue();
+    if (isNaN(current)) return true;
+    if (p.maxValue == null) return true;
+    return handleDecimalOperation("+", current, step()) <= p.maxValue;
+  });
+  const canDecrement = createMemo(() => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return false;
+    const current = actualNumberValue();
+    if (isNaN(current)) return true;
+    if (p.minValue == null) return true;
+    return handleDecimalOperation("-", current, step()) >= p.minValue;
+  });
+  const increment = () => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return;
+    let current = actualNumberValue();
+    if (isNaN(current)) {
+      current = p.minValue ?? 0;
+    } else {
+      current = snapToStep(current, step(), p.minValue);
+      current = handleDecimalOperation("+", current, step());
+    }
+    current = clamp(current, p.minValue, p.maxValue);
+    setNumberValue(current);
+    setInputValueInternal(formatNumber(current));
+    p.onChange?.(current);
+  };
+  const decrement = () => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return;
+    let current = actualNumberValue();
+    if (isNaN(current)) {
+      current = p.maxValue ?? 0;
+    } else {
+      current = snapToStep(current, step(), p.minValue);
+      current = handleDecimalOperation("-", current, step());
+    }
+    current = clamp(current, p.minValue, p.maxValue);
+    setNumberValue(current);
+    setInputValueInternal(formatNumber(current));
+    p.onChange?.(current);
+  };
+  const incrementToMax = () => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return;
+    if (p.maxValue == null) return;
+    const snapped = snapToStep(p.maxValue, step(), p.minValue);
+    setNumberValue(snapped);
+    setInputValueInternal(formatNumber(snapped));
+    p.onChange?.(snapped);
+  };
+  const decrementToMin = () => {
+    ensureInitialized();
+    const p = getProps();
+    if (p.isDisabled || p.isReadOnly) return;
+    if (p.minValue == null) return;
+    setNumberValue(p.minValue);
+    setInputValueInternal(formatNumber(p.minValue));
+    p.onChange?.(p.minValue);
+  };
+  return {
+    get inputValue() {
+      ensureInitialized();
+      return inputValue;
+    },
+    get numberValue() {
+      return actualNumberValue;
+    },
+    canIncrement,
+    canDecrement,
+    isDisabled: () => getProps().isDisabled ?? false,
+    isReadOnly: () => getProps().isReadOnly ?? false,
+    minValue: () => getProps().minValue,
+    maxValue: () => getProps().maxValue,
+    setInputValue,
+    validate,
+    commit,
+    increment,
+    decrement,
+    incrementToMax,
+    decrementToMin
+  };
+}
+
+// ../solid-stately/src/searchfield/createSearchFieldState.ts
+import { createSignal as createSignal5, createMemo as createMemo2 } from "solid-js";
+function createSearchFieldState(props) {
+  const getProps = () => access(props);
+  const isControlled = () => getProps().value !== void 0;
+  const [internalValue, setInternalValue] = createSignal5(
+    getProps().defaultValue ?? ""
+  );
+  const value = createMemo2(() => {
+    const p = getProps();
+    return isControlled() ? p.value ?? "" : internalValue();
+  });
+  const setValue = (newValue) => {
+    const p = getProps();
+    if (!isControlled()) {
+      setInternalValue(newValue);
+    }
+    p.onChange?.(newValue);
+  };
+  return {
+    value,
+    setValue
+  };
+}
+
+// ../solid-stately/src/slider/createSliderState.ts
+import { createSignal as createSignal6, createMemo as createMemo3 } from "solid-js";
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
+var DEFAULT_STEP = 1;
+function clamp2(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function snapToStep2(value, min, max, step) {
+  const snapped = Math.round((value - min) / step) * step + min;
+  const decimalPlaces = (step.toString().split(".")[1] || "").length;
+  const rounded = parseFloat(snapped.toFixed(decimalPlaces));
+  return clamp2(rounded, min, max);
+}
+function createSliderState(props) {
+  const getProps = () => access(props);
+  const minValue = getProps().minValue ?? DEFAULT_MIN;
+  const maxValue = getProps().maxValue ?? DEFAULT_MAX;
+  const step = getProps().step ?? DEFAULT_STEP;
+  const orientation = getProps().orientation ?? "horizontal";
+  const isDisabled = getProps().isDisabled ?? false;
+  const pageStep = Math.max(step, snapToStep2((maxValue - minValue) / 10, 0, maxValue - minValue, step));
+  const isControlled = () => getProps().value !== void 0;
+  const [internalValue, setInternalValue] = createSignal6(
+    snapToStep2(getProps().defaultValue ?? minValue, minValue, maxValue, step)
+  );
+  const [isDragging, setIsDragging] = createSignal6(false);
+  const [isFocused, setIsFocused] = createSignal6(false);
+  const value = createMemo3(() => {
+    const p = getProps();
+    const rawValue = isControlled() ? p.value ?? minValue : internalValue();
+    return snapToStep2(rawValue, minValue, maxValue, step);
+  });
+  const getValuePercent = createMemo3(() => {
+    return (value() - minValue) / (maxValue - minValue);
+  });
+  const getFormattedValue = createMemo3(() => {
+    const p = getProps();
+    const formatter = new Intl.NumberFormat(p.locale, p.formatOptions);
+    return formatter.format(value());
+  });
+  const setValue = (newValue) => {
+    if (isDisabled) return;
+    const p = getProps();
+    const snappedValue = snapToStep2(newValue, minValue, maxValue, step);
+    if (!isControlled()) {
+      setInternalValue(snappedValue);
+    }
+    p.onChange?.(snappedValue);
+  };
+  const setValuePercent = (percent) => {
+    const clampedPercent = clamp2(percent, 0, 1);
+    const newValue = clampedPercent * (maxValue - minValue) + minValue;
+    setValue(newValue);
+  };
+  const setDragging = (dragging) => {
+    const wasDragging = isDragging();
+    setIsDragging(dragging);
+    if (wasDragging && !dragging) {
+      getProps().onChangeEnd?.(value());
+    }
+  };
+  const increment = (stepMultiplier = 1) => {
+    if (isDisabled) return;
+    setValue(value() + step * stepMultiplier);
+  };
+  const decrement = (stepMultiplier = 1) => {
+    if (isDisabled) return;
+    setValue(value() - step * stepMultiplier);
+  };
+  const setFocused = (focused) => {
+    setIsFocused(focused);
+  };
+  return {
+    value,
+    setValue,
+    setValuePercent,
+    getValuePercent,
+    getFormattedValue,
+    isDragging,
+    setDragging,
+    isFocused,
+    setFocused,
+    increment,
+    decrement,
+    minValue,
+    maxValue,
+    step,
+    pageStep,
+    orientation,
+    isDisabled
+  };
+}
+
+// src/textfield/index.tsx
 var _tmpl$15 = /* @__PURE__ */ _$template13(`<span class="text-danger-400 ml-0.5">*`);
 var _tmpl$211 = /* @__PURE__ */ _$template13(`<label><!$><!/><!$><!/>`);
 var _tmpl$38 = /* @__PURE__ */ _$template13(`<p>`);
@@ -1405,7 +1768,7 @@ import { insert as _$insert13 } from "solid-js/web";
 import { memo as _$memo10 } from "solid-js/web";
 import { spread as _$spread3 } from "solid-js/web";
 import { mergeProps as _$mergeProps10 } from "solid-js/web";
-import { splitProps as splitProps10, Show as Show10, createMemo } from "solid-js";
+import { splitProps as splitProps10, Show as Show10, createMemo as createMemo4 } from "solid-js";
 import { createProgressBar } from "@proyecto-viviana/solidaria";
 var _tmpl$16 = /* @__PURE__ */ _$template14(`<span class="text-primary-200 font-medium">`);
 var _tmpl$212 = /* @__PURE__ */ _$template14(`<span class=text-primary-300>`);
@@ -1432,7 +1795,7 @@ var variantStyles5 = {
   warning: "bg-yellow-500",
   danger: "bg-red-500"
 };
-function clamp(value, min, max) {
+function clamp3(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function ProgressBar(props) {
@@ -1464,14 +1827,14 @@ function ProgressBar(props) {
       return ariaProps["aria-label"];
     }
   });
-  const percentage = createMemo(() => {
+  const percentage = createMemo4(() => {
     if (isIndeterminate()) {
       return void 0;
     }
     const value = ariaProps.value ?? 0;
     const minValue = ariaProps.minValue ?? 0;
     const maxValue = ariaProps.maxValue ?? 100;
-    const clampedValue = clamp(value, minValue, maxValue);
+    const clampedValue = clamp3(value, minValue, maxValue);
     return (clampedValue - minValue) / (maxValue - minValue) * 100;
   });
   const valueText = () => progressAria.progressBarProps["aria-valuetext"];
@@ -1536,7 +1899,7 @@ import { getNextElement as _$getNextElement15 } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents7 } from "solid-js/web";
 import { spread as _$spread4 } from "solid-js/web";
 import { mergeProps as _$mergeProps11 } from "solid-js/web";
-import { splitProps as splitProps11, createMemo as createMemo2, Show as Show11 } from "solid-js";
+import { splitProps as splitProps11, createMemo as createMemo5, Show as Show11 } from "solid-js";
 import { createSeparator } from "@proyecto-viviana/solidaria";
 var _tmpl$17 = /* @__PURE__ */ _$template15(`<div>`);
 var _tmpl$213 = /* @__PURE__ */ _$template15(`<hr>`);
@@ -1560,7 +1923,7 @@ function Separator(props) {
   const orientation = () => local.orientation ?? "horizontal";
   const variant = () => local.variant ?? "default";
   const size = () => local.size ?? "md";
-  const elementType = createMemo2(() => {
+  const elementType = createMemo5(() => {
     if (orientation() === "vertical") {
       return "div";
     }
@@ -1577,7 +1940,7 @@ function Separator(props) {
       return ariaProps["aria-label"];
     }
   });
-  const className = createMemo2(() => {
+  const className = createMemo5(() => {
     const isVertical = orientation() === "vertical";
     const sizeStyles33 = isVertical ? verticalSizeStyles : horizontalSizeStyles;
     const base = [
@@ -1677,7 +2040,7 @@ import { addEventListener as _$addEventListener3 } from "solid-js/web";
 import { setProperty as _$setProperty } from "solid-js/web";
 import { effect as _$effect14 } from "solid-js/web";
 import { use as _$use2 } from "solid-js/web";
-import { splitProps as splitProps13, createMemo as createMemo3, Show as Show12, For } from "solid-js";
+import { splitProps as splitProps13, createMemo as createMemo6, Show as Show12, For } from "solid-js";
 import { Autocomplete, useAutocompleteInput, useAutocompleteCollection, useAutocompleteState } from "@proyecto-viviana/solidaria-components";
 var _tmpl$18 = /* @__PURE__ */ _$template16(`<input type=text>`);
 var _tmpl$214 = /* @__PURE__ */ _$template16(`<ul role=listbox>`);
@@ -1755,7 +2118,7 @@ function AutocompleteList(props) {
   const state = useAutocompleteState();
   if (!ctx) return null;
   const styles = () => sizeStyles11[props.size];
-  const filteredItems = createMemo3(() => {
+  const filteredItems = createMemo6(() => {
     if (!ctx.filter) return props.items;
     return props.items.filter((item) => {
       const textValue = String(item[props.textKey] ?? item.name ?? "");
@@ -2727,7 +3090,6 @@ import { effect as _$effect19 } from "solid-js/web";
 import { getNextElement as _$getNextElement21 } from "solid-js/web";
 import { splitProps as splitProps19, mergeProps as solidMergeProps5, Show as Show15 } from "solid-js";
 import { createNumberField, createFocusRing as createFocusRing2, createPress, createHover } from "@proyecto-viviana/solidaria";
-import { createNumberFieldState } from "@proyecto-viviana/solid-stately";
 var _tmpl$31 = /* @__PURE__ */ _$template21(`<svg viewBox="0 0 16 16"fill=none stroke=currentColor stroke-width=2><path d="M8 3v10M3 8h10">`);
 var _tmpl$218 = /* @__PURE__ */ _$template21(`<svg viewBox="0 0 16 16"fill=none stroke=currentColor stroke-width=2><path d="M3 8h10">`);
 var _tmpl$314 = /* @__PURE__ */ _$template21(`<span class="text-danger-500 ml-1">*`);
@@ -3184,7 +3546,6 @@ import { effect as _$effect20 } from "solid-js/web";
 import { getNextElement as _$getNextElement22 } from "solid-js/web";
 import { splitProps as splitProps20, mergeProps as solidMergeProps6, Show as Show16 } from "solid-js";
 import { createSearchField, createFocusRing as createFocusRing3, createPress as createPress2, createHover as createHover2 } from "@proyecto-viviana/solidaria";
-import { createSearchFieldState } from "@proyecto-viviana/solid-stately";
 var _tmpl$40 = /* @__PURE__ */ _$template22(`<svg viewBox="0 0 20 20"fill=none stroke=currentColor stroke-width=2><circle cx=8 cy=8 r=5></circle><path d="M12 12L17 17"stroke-linecap=round>`);
 var _tmpl$219 = /* @__PURE__ */ _$template22(`<svg viewBox="0 0 16 16"fill=none stroke=currentColor stroke-width=2><path d="M4 4L12 12M12 4L4 12"stroke-linecap=round>`);
 var _tmpl$315 = /* @__PURE__ */ _$template22(`<span class="text-danger-500 ml-1">*`);
@@ -3614,7 +3975,6 @@ import { mergeProps as _$mergeProps21 } from "solid-js/web";
 import { memo as _$memo18 } from "solid-js/web";
 import { splitProps as splitProps21, mergeProps as solidMergeProps7, Show as Show17 } from "solid-js";
 import { createSlider, createFocusRing as createFocusRing4, createHover as createHover3 } from "@proyecto-viviana/solidaria";
-import { createSliderState } from "@proyecto-viviana/solid-stately";
 var _tmpl$41 = /* @__PURE__ */ _$template23(`<span>`);
 var _tmpl$220 = /* @__PURE__ */ _$template23(`<output>`);
 var _tmpl$316 = /* @__PURE__ */ _$template23(`<div><!$><!/><!$><!/>`);
@@ -4578,7 +4938,7 @@ import { insert as _$insert23 } from "solid-js/web";
 import { memo as _$memo22 } from "solid-js/web";
 import { spread as _$spread8 } from "solid-js/web";
 import { mergeProps as _$mergeProps25 } from "solid-js/web";
-import { splitProps as splitProps25, Show as Show21, createMemo as createMemo4 } from "solid-js";
+import { splitProps as splitProps25, Show as Show21, createMemo as createMemo7 } from "solid-js";
 import { createMeter } from "@proyecto-viviana/solidaria";
 var _tmpl$61 = /* @__PURE__ */ _$template27(`<span class="text-primary-200 font-medium">`);
 var _tmpl$223 = /* @__PURE__ */ _$template27(`<span class=text-primary-300>`);
@@ -4606,7 +4966,7 @@ var variantStyles12 = {
   danger: "bg-red-500",
   info: "bg-blue-500"
 };
-function clamp2(value, min, max) {
+function clamp4(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
 function Meter(props) {
@@ -4634,11 +4994,11 @@ function Meter(props) {
       return ariaProps["aria-label"];
     }
   });
-  const percentage = createMemo4(() => {
+  const percentage = createMemo7(() => {
     const value = ariaProps.value ?? 0;
     const minValue = ariaProps.minValue ?? 0;
     const maxValue = ariaProps.maxValue ?? 100;
-    const clampedValue = clamp2(value, minValue, maxValue);
+    const clampedValue = clamp4(value, minValue, maxValue);
     return (clampedValue - minValue) / (maxValue - minValue) * 100;
   });
   const valueText = () => meterAria.meterProps["aria-valuetext"];
@@ -8219,4 +8579,4 @@ export {
   useLandmarkController,
   useToastContext
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map