willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-form/src/components/Radio/index.css

@@ -0,0 +1,131 @@
+.willa-radio {
+  position: relative;
+  display: inline-grid;
+  box-sizing: border-box;
+  max-width: 100%;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: 0.62rem;
+  color: var(--willa-form-text);
+  cursor: pointer;
+  font-family: var(--willa-body-font);
+  line-height: 1.4;
+}
+
+.willa-radio--sm {
+  font-size: 0.86rem;
+}
+
+.willa-radio--md {
+  font-size: 0.94rem;
+}
+
+.willa-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+.willa-radio-control {
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+}
+
+.willa-radio--sm .willa-radio-control {
+  width: 1.05rem;
+  height: 1.05rem;
+  margin-top: 0.08rem;
+}
+
+.willa-radio--md .willa-radio-control {
+  width: 1.16rem;
+  height: 1.16rem;
+  margin-top: 0.1rem;
+}
+
+.willa-radio-input {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  margin: 0;
+  cursor: inherit;
+  opacity: 0;
+}
+
+.willa-radio-dot {
+  display: inline-grid;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  border: 1px solid var(--willa-form-control-border);
+  border-radius: 50%;
+  background: var(--willa-form-control-bg);
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    box-shadow 150ms ease;
+}
+
+.willa-radio-dot::after {
+  width: 0.42em;
+  height: 0.42em;
+  border-radius: 50%;
+  background: var(--willa-form-control-mark-checked);
+  content: "";
+  opacity: 0;
+  transform: scale(0.7);
+  transition:
+    opacity 120ms ease,
+    transform 120ms ease;
+}
+
+.willa-radio-input:checked + .willa-radio-dot {
+  border-color: var(--willa-form-control-border-checked);
+  background: var(--willa-form-control-bg-checked);
+}
+
+.willa-radio-input:checked + .willa-radio-dot::after {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.willa-radio:hover:not(.willa-radio--disabled) .willa-radio-dot {
+  border-color: var(--willa-form-control-border-hover);
+}
+
+.willa-radio-input:focus-visible + .willa-radio-dot {
+  border-color: var(--willa-form-control-border-focus);
+  box-shadow: 0 0 0 3px var(--willa-form-control-ring);
+}
+
+.willa-radio--invalid .willa-radio-dot {
+  border-color: var(--willa-form-error-border);
+}
+
+.willa-radio--invalid .willa-radio-input:checked + .willa-radio-dot {
+  border-color: var(--willa-form-error-border);
+  background: var(--willa-form-error-bg);
+}
+
+.willa-radio--invalid .willa-radio-input:checked + .willa-radio-dot::after {
+  background: var(--willa-form-error-mark);
+}
+
+.willa-radio-content {
+  display: grid;
+  min-width: 0;
+  gap: 0.2rem;
+}
+
+.willa-radio-label {
+  color: var(--willa-form-label);
+  font-weight: 620;
+}
+
+.willa-radio-description {
+  color: var(--willa-form-description);
+  font-size: 0.9em;
+  line-height: 1.45;
+}

package/packages/willa-form/src/components/Radio/index.tsx

@@ -0,0 +1,70 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+import classNames from "classnames";
+
+export type RadioSize = "sm" | "md";
+
+export type RadioProps = Omit<
+  ComponentPropsWithoutRef<"input">,
+  "size" | "type"
+> & {
+  label?: ReactNode;
+  description?: ReactNode;
+  size?: RadioSize;
+  invalid?: boolean;
+  inputClassName?: string;
+};
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+  const {
+    label,
+    description,
+    size = "md",
+    invalid = false,
+    inputClassName,
+    className,
+    disabled,
+    ...inputProps
+  } = props;
+  const isInvalid =
+    invalid ||
+    inputProps["aria-invalid"] === true ||
+    inputProps["aria-invalid"] === "true";
+
+  return (
+    <label
+      className={classNames(
+        "willa-radio",
+        `willa-radio--${size}`,
+        disabled && "willa-radio--disabled",
+        isInvalid && "willa-radio--invalid",
+        className,
+      )}
+    >
+      <span className="willa-radio-control">
+        <input
+          {...inputProps}
+          ref={ref}
+          className={classNames("willa-radio-input", inputClassName)}
+          disabled={disabled}
+          type="radio"
+          aria-invalid={isInvalid || inputProps["aria-invalid"]}
+        />
+        <span className="willa-radio-dot" aria-hidden="true" />
+      </span>
+      {label || description ? (
+        <span className="willa-radio-content">
+          {label ? <span className="willa-radio-label">{label}</span> : null}
+          {description ? (
+            <span className="willa-radio-description">{description}</span>
+          ) : null}
+        </span>
+      ) : null}
+    </label>
+  );
+});
+
+Radio.displayName = "Radio";

package/packages/willa-form/src/components/RangeInput/index.css

@@ -0,0 +1,224 @@
+.willa-range-input {
+  --willa-range-input-resolved-height: var(
+    --willa-range-input-custom-height,
+    var(--willa-range-input-size-height, var(--willa-range-input-height))
+  );
+  --willa-range-input-resolved-thumb-size: max(
+    1rem,
+    var(
+      --willa-range-input-custom-thumb-size,
+      calc(var(--willa-range-input-resolved-height) * 2.6)
+    )
+  );
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: var(--willa-range-input-resolved-thumb-size);
+  min-width: var(--willa-range-input-custom-min-width, 10rem);
+  padding: 0;
+  border: 0;
+  appearance: none;
+  accent-color: var(
+    --willa-range-input-custom-color,
+    var(--willa-range-input-accent)
+  );
+  background: transparent;
+  color: var(--willa-range-input-custom-color, var(--willa-range-input-accent));
+  cursor: pointer;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+
+.willa-range-input--sm {
+  --willa-range-input-size-height: var(--willa-range-input-height-sm);
+}
+
+.willa-range-input--md {
+  --willa-range-input-size-height: var(--willa-range-input-height);
+}
+
+.willa-range-input--lg {
+  --willa-range-input-size-height: var(--willa-range-input-height-lg);
+}
+
+.willa-range-input:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 0.25rem;
+}
+
+.willa-range-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.willa-range-input::-webkit-slider-runnable-track {
+  height: var(--willa-range-input-resolved-height);
+  border-radius: 999px;
+  background:
+    linear-gradient(
+      90deg,
+      var(--willa-range-input-custom-color, var(--willa-range-input-accent)) 0%,
+      var(--willa-range-input-custom-color, var(--willa-range-input-accent))
+        var(--willa-range-input-progress, 0%),
+      transparent var(--willa-range-input-progress, 0%)
+    ),
+    var(--willa-range-input-custom-track, var(--willa-range-input-track));
+  background-blend-mode: normal;
+}
+
+.willa-range-input[style*="--willa-range-input-custom-track"]::-webkit-slider-runnable-track {
+  background: var(
+    --willa-range-input-custom-track,
+    var(--willa-range-input-track)
+  );
+}
+
+.willa-range-input::-webkit-slider-thumb {
+  width: var(--willa-range-input-resolved-thumb-size);
+  height: var(--willa-range-input-resolved-thumb-size);
+  margin-top: calc(
+    (
+        var(--willa-range-input-resolved-height) -
+          var(--willa-range-input-resolved-thumb-size)
+      ) /
+      2
+  );
+  border: 2px solid
+    var(
+      --willa-range-input-custom-thumb-border,
+      var(
+        --willa-range-input-custom-color,
+        var(--willa-range-input-thumb-border)
+      )
+    );
+  border-radius: 50%;
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(
+    --willa-range-input-custom-thumb,
+    var(--willa-range-input-thumb)
+  );
+  box-shadow: 0 1px 4px var(--willa-range-input-thumb-shadow);
+  cursor: grab;
+}
+
+.willa-range-input:active::-webkit-slider-thumb {
+  cursor: grabbing;
+}
+
+.willa-range-input::-moz-range-track {
+  height: var(--willa-range-input-resolved-height);
+  border-radius: 999px;
+  background: var(
+    --willa-range-input-custom-track,
+    var(--willa-range-input-track)
+  );
+}
+
+.willa-range-input::-moz-range-thumb {
+  width: calc(var(--willa-range-input-resolved-thumb-size) - 0.2rem);
+  height: calc(var(--willa-range-input-resolved-thumb-size) - 0.2rem);
+  border: 2px solid
+    var(
+      --willa-range-input-custom-thumb-border,
+      var(
+        --willa-range-input-custom-color,
+        var(--willa-range-input-thumb-border)
+      )
+    );
+  border-radius: 50%;
+  background: var(
+    --willa-range-input-custom-thumb,
+    var(--willa-range-input-thumb)
+  );
+  box-shadow: 0 1px 4px var(--willa-range-input-thumb-shadow);
+  cursor: grab;
+}
+
+.willa-range-input:active::-moz-range-thumb {
+  cursor: grabbing;
+}
+
+.willa-range-input::-moz-range-progress {
+  height: var(--willa-range-input-resolved-height);
+  border-radius: 999px;
+  background: var(
+    --willa-range-input-custom-color,
+    var(--willa-range-input-accent)
+  );
+}
+
+.willa-range-input-field {
+  display: grid;
+  width: 100%;
+  max-width: 100%;
+  min-width: 10rem;
+  gap: 0.42rem;
+}
+
+.willa-range-input-row {
+  display: flex;
+  align-items: center;
+  gap: 0.72rem;
+  min-width: 0;
+}
+
+.willa-range-input-value {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.4rem;
+  height: var(--willa-range-input-value-height);
+  padding: 0 0.55rem;
+  border: 1px solid var(--willa-range-input-value-border);
+  border-radius: 999px;
+  background: var(--willa-range-input-value-bg);
+  color: var(--willa-range-input-value-text);
+  font-size: var(--willa-range-input-value-font-size);
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.willa-range-input-field--sm .willa-range-input-value {
+  min-width: 2rem;
+  height: calc(var(--willa-range-input-value-height) - 0.2rem);
+  padding-inline: 0.45rem;
+  font-size: 0.72rem;
+}
+
+.willa-range-input-field--lg .willa-range-input-value {
+  min-width: 2.8rem;
+  height: calc(var(--willa-range-input-value-height) + 0.2rem);
+  padding-inline: 0.65rem;
+  font-size: 0.84rem;
+}
+
+.willa-range-input-marks {
+  position: relative;
+  display: block;
+  height: 1.45rem;
+  margin-inline: 0.65rem;
+}
+
+.willa-range-input-mark {
+  position: absolute;
+  top: 0;
+  display: inline-grid;
+  justify-items: center;
+  gap: 0.28rem;
+  color: var(--willa-range-input-mark-text);
+  font-size: 0.72rem;
+  line-height: 1;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+.willa-range-input-mark-tick {
+  width: 1px;
+  height: 0.34rem;
+  border-radius: 999px;
+  background: var(--willa-range-input-mark-tick);
+}

package/packages/willa-form/src/components/RangeInput/index.tsx

@@ -0,0 +1,288 @@
+import {
+  forwardRef,
+  useMemo,
+  type ChangeEvent,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  type InputEvent,
+  type ReactNode,
+} from "react";
+import { useControllableState } from "@willa-ui/shared";
+import classNames from "classnames";
+
+export type RangeInputSize = "sm" | "md" | "lg";
+export type RangeInputMark =
+  | number
+  | {
+      value: number;
+      label?: ReactNode;
+    };
+
+export type RangeInputProps = Omit<
+  ComponentPropsWithoutRef<"input">,
+  "children" | "size" | "type" | "width"
+> & {
+  size?: RangeInputSize;
+  width?: CSSProperties["width"];
+  height?: CSSProperties["height"];
+  color?: string;
+  formatValue?: (value: number) => ReactNode;
+  marks?: Array<RangeInputMark>;
+  minWidth?: CSSProperties["minWidth"];
+  showValue?: boolean;
+  thumbColor?: string;
+  thumbBorderColor?: string;
+  thumbSize?: CSSProperties["width"];
+  trackColor?: string;
+};
+
+export const RangeInput = forwardRef<HTMLInputElement, RangeInputProps>(
+  (props, ref) => {
+    const {
+      width,
+      height,
+      color,
+      formatValue,
+      marks,
+      minWidth,
+      showValue = false,
+      thumbBorderColor,
+      thumbColor,
+      thumbSize,
+      trackColor,
+      className,
+      defaultValue,
+      max,
+      min,
+      onChange,
+      onInput,
+      size = "md",
+      style,
+      value,
+      ...inputProps
+    } = props;
+    const numericMin = getRangeNumber(min, 0);
+    const numericMax = getRangeNumber(max, 100);
+    const fallbackValue = getDefaultRangeValue(numericMin, numericMax);
+    const normalizedMarks = useMemo(
+      () => normalizeRangeMarks(marks, numericMin, numericMax),
+      [marks, numericMax, numericMin],
+    );
+    const controlledValue =
+      value === undefined ? undefined : getRangeNumber(value, fallbackValue);
+    const [currentValue, setCurrentValue] = useControllableState({
+      value: controlledValue,
+      defaultValue: () => getRangeNumber(defaultValue, fallbackValue),
+    });
+    const progress = getRangeProgress(currentValue, numericMin, numericMax);
+    const withMeta = showValue || normalizedMarks.length > 0;
+    const rangeStyle = getRangeInputStyle({
+      color,
+      height,
+      minWidth: withMeta ? 0 : minWidth,
+      thumbBorderColor,
+      thumbColor,
+      thumbSize,
+      trackColor,
+      width: withMeta ? "100%" : width,
+      style: withMeta ? undefined : style,
+      progress,
+    });
+    const containerStyle = withMeta
+      ? getRangeInputFieldStyle({ minWidth, style, width })
+      : undefined;
+    const formattedValue = formatValue
+      ? formatValue(currentValue)
+      : currentValue;
+
+    const handleInput = (event: InputEvent<HTMLInputElement>) => {
+      setCurrentValue(getRangeNumber(event.currentTarget.value, fallbackValue));
+      onInput?.(event);
+    };
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+      setCurrentValue(getRangeNumber(event.currentTarget.value, fallbackValue));
+      onChange?.(event);
+    };
+
+    const input = (
+      <input
+        {...inputProps}
+        ref={ref}
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={handleChange}
+        onInput={handleInput}
+        className={classNames(
+          "willa-range-input",
+          `willa-range-input--${size}`,
+          className,
+        )}
+        style={rangeStyle}
+      />
+    );
+
+    if (!withMeta) {
+      return input;
+    }
+
+    return (
+      <span
+        className={classNames(
+          "willa-range-input-field",
+          `willa-range-input-field--${size}`,
+        )}
+        style={containerStyle}
+      >
+        <span className="willa-range-input-row">
+          {input}
+          {showValue ? (
+            <output className="willa-range-input-value">
+              {formattedValue}
+            </output>
+          ) : null}
+        </span>
+        {normalizedMarks.length > 0 ? (
+          <span className="willa-range-input-marks" aria-hidden="true">
+            {normalizedMarks.map((mark) => (
+              <span
+                key={mark.value}
+                className="willa-range-input-mark"
+                style={{ insetInlineStart: `${mark.position}%` }}
+              >
+                <span className="willa-range-input-mark-tick" />
+                {mark.label !== undefined && mark.label !== null ? (
+                  <span className="willa-range-input-mark-label">
+                    {mark.label}
+                  </span>
+                ) : null}
+              </span>
+            ))}
+          </span>
+        ) : null}
+      </span>
+    );
+  },
+);
+
+RangeInput.displayName = "RangeInput";
+
+const getRangeInputStyle = (options: {
+  color?: string;
+  height?: CSSProperties["height"];
+  minWidth?: CSSProperties["minWidth"];
+  thumbBorderColor?: string;
+  thumbColor?: string;
+  thumbSize?: CSSProperties["width"];
+  trackColor?: string;
+  width?: CSSProperties["width"];
+  style?: CSSProperties;
+  progress?: number;
+}) => {
+  const {
+    color,
+    height,
+    minWidth,
+    thumbBorderColor,
+    thumbColor,
+    thumbSize,
+    trackColor,
+    width,
+    style,
+    progress,
+  } = options;
+
+  return {
+    ...style,
+    ...(width === undefined ? undefined : { width }),
+    ...(minWidth === undefined
+      ? undefined
+      : { "--willa-range-input-custom-min-width": minWidth }),
+    ...(color ? { "--willa-range-input-custom-color": color } : undefined),
+    ...(height ? { "--willa-range-input-custom-height": height } : undefined),
+    ...(thumbBorderColor
+      ? { "--willa-range-input-custom-thumb-border": thumbBorderColor }
+      : undefined),
+    ...(thumbColor
+      ? { "--willa-range-input-custom-thumb": thumbColor }
+      : undefined),
+    ...(thumbSize
+      ? { "--willa-range-input-custom-thumb-size": thumbSize }
+      : undefined),
+    ...(trackColor
+      ? { "--willa-range-input-custom-track": trackColor }
+      : undefined),
+    ...(progress === undefined
+      ? undefined
+      : { "--willa-range-input-progress": `${progress}%` }),
+  } as CSSProperties;
+};
+
+const getRangeInputFieldStyle = (options: {
+  minWidth?: CSSProperties["minWidth"];
+  style?: CSSProperties;
+  width?: CSSProperties["width"];
+}) => {
+  const { minWidth, style, width } = options;
+
+  return {
+    ...style,
+    ...(width === undefined ? undefined : { width }),
+    ...(minWidth === undefined ? undefined : { minWidth }),
+  } as CSSProperties;
+};
+
+const getRangeNumber = (
+  value: ComponentPropsWithoutRef<"input">["value"],
+  fallback: number,
+) => {
+  if (Array.isArray(value)) {
+    return fallback;
+  }
+
+  const numericValue = Number(value);
+
+  return Number.isFinite(numericValue) ? numericValue : fallback;
+};
+
+const getRangeProgress = (value: number, min: number, max: number) => {
+  const span = max - min;
+
+  if (span <= 0) {
+    return 0;
+  }
+
+  return Math.min(100, Math.max(0, ((value - min) / span) * 100));
+};
+
+const getDefaultRangeValue = (min: number, max: number) => {
+  if (max < min) {
+    return min;
+  }
+
+  return min + (max - min) / 2;
+};
+
+const normalizeRangeMarks = (
+  marks: Array<RangeInputMark> | undefined,
+  min: number,
+  max: number,
+) => {
+  if (!marks?.length) {
+    return [];
+  }
+
+  return marks.map((mark) => {
+    const value = typeof mark === "number" ? mark : mark.value;
+    const label = typeof mark === "number" ? String(mark) : mark.label;
+
+    return {
+      label,
+      value,
+      position: getRangeProgress(value, min, max),
+    };
+  });
+};