@jcsoftdev/ui 0.0.0-stage → 0.1.0

package/dist/forms/radio-button-group/radio-button-group.d.ts

@@ -0,0 +1,19 @@
+import { type ButtonOption } from "../internal/button-option.js";
+export type RadioButtonOption = ButtonOption;
+export interface RadioButtonGroupProps {
+    options: RadioButtonOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+    disabled?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: string;
+}
+/**
+ * Exclusive choice where each option is a button-like card. Native radios underneath, so arrow
+ * keys, form submission and the `radiogroup` semantics come from the browser. Distinct from
+ * `RadioGroup` (dot indicator) and `Segmented` (2-4 compact options).
+ */
+export declare function RadioButtonGroup({ options, value: valueProp, defaultValue, onValueChange, name, disabled, className, ...aria }: RadioButtonGroupProps): import("react").JSX.Element;

package/dist/forms/radio-button-group/radio-button-group.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useId, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { OptionShell, optionGridClass } from "../internal/button-option.js";
+function RadioButtonGroup({
+  options,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  name,
+  disabled,
+  className,
+  ...aria
+}) {
+  const generated = useId();
+  const [inner, setInner] = useState(defaultValue);
+  const value = valueProp ?? inner;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      className: cn("@container/options", optionGridClass, className),
+      ...aria,
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        OptionShell,
+        {
+          option,
+          input: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: name ?? generated,
+              value: option.value,
+              checked: value === option.value,
+              disabled: disabled || option.disabled,
+              onChange: () => {
+                if (valueProp === void 0) setInner(option.value);
+                onValueChange?.(option.value);
+              },
+              className: "sr-only"
+            }
+          )
+        },
+        option.value
+      ))
+    }
+  );
+}
+export {
+  RadioButtonGroup
+};

package/dist/forms/rating/index.d.ts

@@ -0,0 +1,2 @@
+export { ratingFromPointer, ratingKey, roundRating, starFill } from "./model.js";
+export { Rating, type RatingProps } from "./rating.js";

package/dist/forms/rating/index.js

@@ -0,0 +1,9 @@
+import { ratingFromPointer, ratingKey, roundRating, starFill } from "./model.js";
+import { Rating } from "./rating.js";
+export {
+  Rating,
+  ratingFromPointer,
+  ratingKey,
+  roundRating,
+  starFill
+};

package/dist/forms/rating/model.d.ts

@@ -0,0 +1,8 @@
+/** Rounds a value to the nearest `precision` (1 = whole stars, 0.5 = halves) inside [0, max]. */
+export declare function roundRating(value: number, max: number, precision?: 0.5 | 1): number;
+/** Rating under the pointer: the left half of a star counts as .5 when halves are allowed. */
+export declare function ratingFromPointer(index: number, offsetRatio: number, max: number, precision?: 0.5 | 1): number;
+/** Fill of star `index` (0-based) for a rating: 0, 0.5 or 1. */
+export declare function starFill(index: number, rating: number): 0 | 0.5 | 1;
+/** Next rating for a keyboard key, or null when the key is not handled. */
+export declare function ratingKey(key: string, current: number, max: number, precision?: 0.5 | 1): number | null;

package/dist/forms/rating/model.js

@@ -0,0 +1,37 @@
+function roundRating(value, max, precision = 1) {
+  if (!Number.isFinite(value)) return 0;
+  const rounded = Math.round(value / precision) * precision;
+  return Math.min(max, Math.max(0, rounded));
+}
+function ratingFromPointer(index, offsetRatio, max, precision = 1) {
+  const half = precision === 0.5 && offsetRatio < 0.5;
+  return Math.min(max, index + (half ? 0.5 : 1));
+}
+function starFill(index, rating) {
+  const diff = rating - index;
+  if (diff >= 1) return 1;
+  if (diff >= 0.5) return 0.5;
+  return 0;
+}
+function ratingKey(key, current, max, precision = 1) {
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowUp":
+      return Math.min(max, current + precision);
+    case "ArrowLeft":
+    case "ArrowDown":
+      return Math.max(0, current - precision);
+    case "Home":
+      return 0;
+    case "End":
+      return max;
+    default:
+      return null;
+  }
+}
+export {
+  ratingFromPointer,
+  ratingKey,
+  roundRating,
+  starFill
+};

package/dist/forms/rating/rating.d.ts

@@ -0,0 +1,20 @@
+export interface RatingProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    max?: number;
+    /** 0.5 allows half stars. */
+    precision?: 0.5 | 1;
+    readOnly?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    /** Shows the numeric value after the stars. */
+    showValue?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+/**
+ * Star rating. Editable ratings are a single `role="slider"` (arrows, Home/End); read-only ones
+ * are an `img` with the value as its label. Half values render as a half-filled star.
+ */
+export declare function Rating({ value: valueProp, defaultValue, onValueChange, max, precision, readOnly, disabled, size, showValue, className, ...aria }: RatingProps): import("react").JSX.Element;

package/dist/forms/rating/rating.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Star } from "lucide-react";
+import { useState } from "react";
+import { cn } from "../../utils/cn.js";
+import { ratingFromPointer, ratingKey, roundRating, starFill } from "./model.js";
+const sizes = { sm: "size-4", md: "size-5", lg: "size-7" };
+function Rating({
+  value: valueProp,
+  defaultValue = 0,
+  onValueChange,
+  max = 5,
+  precision = 1,
+  readOnly,
+  disabled,
+  size = "md",
+  showValue,
+  className,
+  ...aria
+}) {
+  const [inner, setInner] = useState(defaultValue);
+  const [hover, setHover] = useState(null);
+  const value = roundRating(valueProp ?? inner, max, precision);
+  const shown = hover ?? value;
+  const interactive = !readOnly && !disabled;
+  const label = aria["aria-label"] ?? "Valoraci\xF3n";
+  const set = (next) => {
+    if (valueProp === void 0) setInner(next);
+    if (next !== value) onValueChange?.(next);
+  };
+  const pointerValue = (event, index) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    return ratingFromPointer(
+      index,
+      (event.clientX - rect.left) / (rect.width || 1),
+      max,
+      precision
+    );
+  };
+  const onKeyDown = (event) => {
+    const next = ratingKey(event.key, value, max, precision);
+    if (next === null) return;
+    event.preventDefault();
+    set(next);
+  };
+  const stars = Array.from({ length: max }, (_, index) => {
+    const fill = starFill(index, shown);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn("relative inline-flex", interactive && "pressable cursor-pointer"),
+        onPointerMove: interactive ? (event) => setHover(pointerValue(event, index)) : void 0,
+        onPointerUp: interactive ? (event) => {
+          const next = pointerValue(event, index);
+          set(next === value ? 0 : next);
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsx(Star, { "aria-hidden": "true", className: cn(sizes[size], "text-line-strong") }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-y-0 left-0 overflow-hidden",
+              style: { width: `${fill * 100}%` },
+              children: /* @__PURE__ */ jsx(Star, { className: cn(sizes[size], "fill-warning text-warning") })
+            }
+          )
+        ]
+      },
+      index
+    );
+  });
+  const text = `${value} de ${max}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "@container/rating inline-flex max-w-full items-center gap-density-sm",
+        className
+      ),
+      children: [
+        interactive ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": label,
+            "aria-valuemin": 0,
+            "aria-valuemax": max,
+            "aria-valuenow": value,
+            "aria-valuetext": text,
+            onKeyDown,
+            onPointerLeave: () => setHover(null),
+            className: "inline-flex gap-0.5 rounded-chip outline-none focus-visible:focus-ring",
+            children: stars
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "img",
+            "aria-label": `${label}: ${text}`,
+            "aria-disabled": disabled || void 0,
+            className: cn("inline-flex gap-0.5", disabled && "opacity-50"),
+            children: stars
+          }
+        ),
+        showValue ? /* @__PURE__ */ jsx("span", { className: "text-ink-2 text-meta tabular-nums", children: value }) : null
+      ]
+    }
+  );
+}
+export {
+  Rating
+};

package/dist/forms/select/index.d.ts

@@ -0,0 +1 @@
+export { Select, type SelectProps } from "./select.js";

package/dist/forms/select/index.js

@@ -0,0 +1,4 @@
+import { Select } from "./select.js";
+export {
+  Select
+};

package/dist/forms/select/select.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from "react";
+export interface SelectProps extends ComponentPropsWithoutRef<"select"> {
+}
+/**
+ * Wraps the native `<select>` (keeps the system picker on mobile) and draws
+ * the chevron with an icon.
+ */
+export declare function Select({ className, children, ...props }: SelectProps): import("react").JSX.Element;

package/dist/forms/select/select.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../utils/cn.js";
+function Select({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs("span", { className: "relative flex w-full items-center", children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: cn(
+          "h-input w-full min-w-0 appearance-none rounded-input border-control bg-surface-control py-0 pr-7 pl-3 text-control text-ink focus:border-transparent focus:outline-2 focus:outline-accent-ink focus:-outline-offset-1 aria-[invalid=true]:border-danger",
+          className
+        ),
+        ...props,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute right-2.5 size-3.5 text-ink-3"
+      }
+    )
+  ] });
+}
+export {
+  Select
+};

package/dist/forms/slider/index.d.ts

@@ -0,0 +1,2 @@
+export { clampValue, keyboardValue, nearestThumb, type RangeValue, ratioOf, setRangeThumb, snapToStep, valueFromRatio, } from "./model.js";
+export { type RangeSliderProps, type SingleSliderProps, Slider, type SliderMark, type SliderProps, } from "./slider.js";

package/dist/forms/slider/index.js

@@ -0,0 +1,22 @@
+import {
+  clampValue,
+  keyboardValue,
+  nearestThumb,
+  ratioOf,
+  setRangeThumb,
+  snapToStep,
+  valueFromRatio
+} from "./model.js";
+import {
+  Slider
+} from "./slider.js";
+export {
+  Slider,
+  clampValue,
+  keyboardValue,
+  nearestThumb,
+  ratioOf,
+  setRangeThumb,
+  snapToStep,
+  valueFromRatio
+};

package/dist/forms/slider/model.d.ts

@@ -0,0 +1,16 @@
+export type RangeValue = [number, number];
+export declare function clampValue(value: number, min: number, max: number): number;
+/**
+ * Snaps to the nearest multiple of `step` counted from `min` (or from 0 when `min` is not
+ * finite), kept inside [min, max]. Either bound may be infinite.
+ */
+export declare function snapToStep(value: number, min: number, max: number, step: number): number;
+/** Position of a value along the track, 0..1. */
+export declare function ratioOf(value: number, min: number, max: number): number;
+export declare function valueFromRatio(ratio: number, min: number, max: number, step: number): number;
+/** Moves one thumb of a range, never crossing the other one and keeping `minGap` between them. */
+export declare function setRangeThumb(values: RangeValue, index: 0 | 1, next: number, min: number, max: number, step: number, minGap?: number): RangeValue;
+/** Thumb a pointer press should grab: the closest one; on a tie, the one the press is outside of. */
+export declare function nearestThumb(values: RangeValue, target: number): 0 | 1;
+/** Next value for a slider key, or null when the key is not handled. */
+export declare function keyboardValue(key: string, current: number, min: number, max: number, step: number, page: number): number | null;

package/dist/forms/slider/model.js

@@ -0,0 +1,65 @@
+function decimals(step) {
+  const text = String(step);
+  const dot = text.indexOf(".");
+  return dot === -1 ? 0 : text.length - dot - 1;
+}
+function clampValue(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function snapToStep(value, min, max, step) {
+  if (!(step > 0)) return clampValue(value, min, max);
+  const base = Number.isFinite(min) ? min : 0;
+  const places = Math.max(decimals(step), decimals(base));
+  const snapped = Number((base + Math.round((value - base) / step) * step).toFixed(places));
+  if (snapped > max) {
+    return Number((base + Math.floor((max - base) / step) * step).toFixed(places));
+  }
+  return clampValue(snapped, min, max);
+}
+function ratioOf(value, min, max) {
+  if (max <= min) return 0;
+  return clampValue((value - min) / (max - min), 0, 1);
+}
+function valueFromRatio(ratio, min, max, step) {
+  return snapToStep(min + clampValue(ratio, 0, 1) * (max - min), min, max, step);
+}
+function setRangeThumb(values, index, next, min, max, step, minGap = 0) {
+  const snapped = snapToStep(next, min, max, step);
+  if (index === 0) return [Math.min(snapped, values[1] - minGap), values[1]];
+  return [values[0], Math.max(snapped, values[0] + minGap)];
+}
+function nearestThumb(values, target) {
+  const d0 = Math.abs(values[0] - target);
+  const d1 = Math.abs(values[1] - target);
+  if (d0 === d1) return target < values[0] ? 0 : 1;
+  return d0 < d1 ? 0 : 1;
+}
+function keyboardValue(key, current, min, max, step, page) {
+  switch (key) {
+    case "ArrowRight":
+    case "ArrowUp":
+      return current + step;
+    case "ArrowLeft":
+    case "ArrowDown":
+      return current - step;
+    case "PageUp":
+      return current + page;
+    case "PageDown":
+      return current - page;
+    case "Home":
+      return min;
+    case "End":
+      return max;
+    default:
+      return null;
+  }
+}
+export {
+  clampValue,
+  keyboardValue,
+  nearestThumb,
+  ratioOf,
+  setRangeThumb,
+  snapToStep,
+  valueFromRatio
+};

package/dist/forms/slider/slider.d.ts

@@ -0,0 +1,43 @@
+import { type RangeValue } from "./model.js";
+export interface SliderMark {
+    value: number;
+    label?: string;
+}
+interface SliderBaseProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Step used by PageUp/PageDown. Defaults to 10 steps. */
+    pageStep?: number;
+    /** Minimum distance between the two thumbs of a range. */
+    minGap?: number;
+    disabled?: boolean;
+    /** Ticks on the track; a `label` renders as a caption under it. */
+    marks?: SliderMark[];
+    /** Shows the current value above each thumb; it is emphasized while dragged or focused. */
+    showValue?: boolean;
+    formatValue?: (value: number) => string;
+    /** Accessible name; thumbs of a range get "mínimo"/"máximo" appended. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Form field name; a range submits `${name}-min` and `${name}-max`. */
+    name?: string;
+    className?: string;
+}
+export interface SingleSliderProps extends SliderBaseProps {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+}
+export interface RangeSliderProps extends SliderBaseProps {
+    value?: RangeValue;
+    defaultValue?: RangeValue;
+    onValueChange?: (value: RangeValue) => void;
+}
+export type SliderProps = SingleSliderProps | RangeSliderProps;
+/**
+ * Single or range slider. The value shape decides the mode: a number gives one thumb and a
+ * `[from, to]` tuple gives two. Each thumb is a `role="slider"` with arrow, Page and Home/End keys.
+ */
+export declare function Slider(props: SliderProps): import("react").JSX.Element;
+export {};

package/dist/forms/slider/slider.js

@@ -0,0 +1,180 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { cn } from "../../utils/cn.js";
+import {
+  clampValue,
+  keyboardValue,
+  nearestThumb,
+  ratioOf,
+  setRangeThumb,
+  snapToStep,
+  valueFromRatio
+} from "./model.js";
+function Slider(props) {
+  const {
+    min = 0,
+    max = 100,
+    step = 1,
+    pageStep,
+    minGap = 0,
+    disabled,
+    marks,
+    showValue,
+    formatValue = String,
+    name,
+    className
+  } = props;
+  const seed = props.value ?? props.defaultValue;
+  const range = Array.isArray(seed);
+  const page = pageStep ?? step * 10;
+  const trackRef = useRef(null);
+  const dragging = useRef(null);
+  const [active, setActive] = useState(null);
+  const toPair = (v) => Array.isArray(v) ? [snapToStep(v[0], min, max, step), snapToStep(v[1], min, max, step)] : [min, snapToStep(v ?? min, min, max, step)];
+  const [inner, setInner] = useState(() => toPair(props.defaultValue));
+  const controlled = props.value !== void 0;
+  const current = controlled ? toPair(props.value) : inner;
+  const onValueChange = props.onValueChange;
+  const commit = useCallback(
+    (next) => {
+      if (!controlled) setInner(next);
+      if (range) onValueChange?.(next);
+      else onValueChange?.(next[1]);
+    },
+    [controlled, range, onValueChange]
+  );
+  const move = (index, raw) => {
+    const next = range ? setRangeThumb(current, index, raw, min, max, step, minGap) : [min, snapToStep(raw, min, max, step)];
+    if (next[0] !== current[0] || next[1] !== current[1]) commit(next);
+  };
+  const valueAt = (clientX) => {
+    const rect = trackRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0) return current[1];
+    return valueFromRatio((clientX - rect.left) / rect.width, min, max, step);
+  };
+  const onPointerDown = (event) => {
+    if (disabled || event.button !== 0) return;
+    const target = valueAt(event.clientX);
+    const index = range ? nearestThumb(current, target) : 1;
+    dragging.current = index;
+    setActive(index);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    move(index, target);
+    trackRef.current?.querySelector(`[data-thumb="${index}"]`)?.focus();
+  };
+  const onPointerMove = (event) => {
+    if (dragging.current !== null) move(dragging.current, valueAt(event.clientX));
+  };
+  const endDrag = () => {
+    dragging.current = null;
+    setActive(null);
+  };
+  const onKeyDown = (index) => (event) => {
+    if (disabled) return;
+    const next = keyboardValue(event.key, current[index], min, max, step, page);
+    if (next === null) return;
+    event.preventDefault();
+    move(index, clampValue(next, min, max));
+  };
+  const start = range ? ratioOf(current[0], min, max) : 0;
+  const end = ratioOf(current[1], min, max);
+  const baseLabel = props["aria-label"];
+  const thumb = (index) => {
+    const label = range && baseLabel ? `${baseLabel} (${index === 0 ? "m\xEDnimo" : "m\xE1ximo"})` : baseLabel;
+    const lo = range && index === 1 ? current[0] + minGap : min;
+    const hi = range && index === 0 ? current[1] - minGap : max;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-thumb": index,
+        "data-active": active === index,
+        role: "slider",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": label,
+        "aria-labelledby": baseLabel ? void 0 : props["aria-labelledby"],
+        "aria-valuemin": lo,
+        "aria-valuemax": hi,
+        "aria-valuenow": current[index],
+        "aria-valuetext": formatValue(current[index]),
+        "aria-orientation": "horizontal",
+        "aria-disabled": disabled || void 0,
+        onKeyDown: onKeyDown(index),
+        onFocus: () => setActive(index),
+        onBlur: () => {
+          if (dragging.current === null) setActive(null);
+        },
+        style: { left: `${ratioOf(current[index], min, max) * 100}%` },
+        className: "group/thumb -translate-x-1/2 -translate-y-1/2 absolute top-1/2 size-5 touch-none rounded-pill border-control bg-surface-control shadow-control outline-none focus-visible:focus-ring data-[active=true]:shadow-selected",
+        children: showValue ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "-translate-x-1/2 pointer-events-none absolute bottom-full left-1/2 mb-1.5 whitespace-nowrap rounded-badge bg-surface-sunken px-1.5 py-0.5 text-chip-text text-ink-2 tabular-nums group-data-[active=true]/thumb:bg-ink group-data-[active=true]/thumb:text-surface",
+            children: formatValue(current[index])
+          }
+        ) : null
+      },
+      index
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "@container/slider w-full min-w-0 py-2",
+        showValue && "pt-8",
+        marks?.some((m) => m.label) && "pb-7",
+        disabled && "opacity-50",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: trackRef,
+            className: cn(
+              "relative h-5 w-full touch-none select-none",
+              disabled ? "cursor-not-allowed" : "cursor-pointer"
+            ),
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "-translate-y-1/2 absolute inset-x-0 top-1/2 h-1.5 rounded-pill bg-line-strong" }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "-translate-y-1/2 absolute top-1/2 h-1.5 rounded-pill bg-accent",
+                  style: { left: `${start * 100}%`, width: `${(end - start) * 100}%` }
+                }
+              ),
+              marks?.map((mark) => /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "absolute top-1/2",
+                  style: { left: `${ratioOf(mark.value, min, max) * 100}%` },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "-translate-x-1/2 -translate-y-1/2 absolute size-1 rounded-pill bg-surface" }),
+                    mark.label ? /* @__PURE__ */ jsx("span", { className: "-translate-x-1/2 absolute top-3.5 whitespace-nowrap text-ink-3 text-meta", children: mark.label }) : null
+                  ]
+                },
+                mark.value
+              )),
+              range ? [thumb(0), thumb(1)] : thumb(1)
+            ]
+          }
+        ),
+        name ? range ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}-min`, value: current[0] }),
+          /* @__PURE__ */ jsx("input", { type: "hidden", name: `${name}-max`, value: current[1] })
+        ] }) : /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current[1] }) : null
+      ]
+    }
+  );
+}
+export {
+  Slider
+};

package/dist/forms/textarea/index.d.ts

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps } from "./textarea.js";

package/dist/forms/textarea/index.js

@@ -0,0 +1,4 @@
+import { Textarea } from "./textarea.js";
+export {
+  Textarea
+};

package/dist/forms/textarea/textarea.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentPropsWithoutRef } from "react";
+export interface TextareaProps extends ComponentPropsWithoutRef<"textarea"> {
+}
+export declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;