willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-form/src/internal/useSelectionModel.ts

@@ -0,0 +1,115 @@
+import { type ReactNode } from "react";
+import { useControllableState } from "@willa-ui/shared";
+
+export type SelectionModelMode = "single" | "multiple";
+export type SelectionModelValue = string | Array<string>;
+
+export type SelectionModelItem = {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+};
+
+export type UseSelectionModelOptions<Item extends SelectionModelItem> = {
+  items: Array<Item>;
+  mode: SelectionModelMode;
+  placeholder: ReactNode;
+  value?: SelectionModelValue;
+  defaultValue?: SelectionModelValue;
+  renderValue?: (items: Array<Item>) => ReactNode;
+  onValueChange?: (value: SelectionModelValue, items: Array<Item>) => void;
+};
+
+export function useSelectionModel<Item extends SelectionModelItem>(
+  options: UseSelectionModelOptions<Item>,
+) {
+  const {
+    items,
+    mode,
+    placeholder,
+    value,
+    defaultValue,
+    renderValue,
+    onValueChange,
+  } = options;
+  const [currentValue, setCurrentValue] =
+    useControllableState<SelectionModelValue>({
+      value,
+      defaultValue: defaultValue ?? getEmptySelectionValue(mode),
+    });
+  const selectedValues = normalizeSelectionValue(currentValue, mode);
+  const selectedItems = items.filter((item) =>
+    selectedValues.includes(item.value),
+  );
+  const hasValue = selectedItems.length > 0;
+  const displayValue = hasValue
+    ? (renderValue?.(selectedItems) ??
+      selectedItems.map((item) => item.label).join("、"))
+    : placeholder;
+
+  const commitItem = (item: Item) => {
+    if (item.disabled) {
+      return false;
+    }
+
+    const nextValues =
+      mode === "multiple"
+        ? toggleSelectionValue(selectedValues, item.value)
+        : [item.value];
+    const nextValue = getSelectionValue(nextValues, mode);
+    const nextItems = items.filter((option) =>
+      nextValues.includes(option.value),
+    );
+
+    setCurrentValue(nextValue);
+    onValueChange?.(nextValue, nextItems);
+
+    return true;
+  };
+
+  const clearValue = () => {
+    const nextValue = getEmptySelectionValue(mode);
+
+    setCurrentValue(nextValue);
+    onValueChange?.(nextValue, []);
+  };
+
+  return {
+    clearValue,
+    commitItem,
+    displayValue,
+    hasValue,
+    selectedItems,
+    selectedValues,
+    hiddenValue: selectedValues.join(","),
+  };
+}
+
+export const normalizeSelectionValue = (
+  value: SelectionModelValue,
+  mode: SelectionModelMode,
+) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  if (!value) {
+    return [];
+  }
+
+  return mode === "multiple" ? value.split(",").filter(Boolean) : [value];
+};
+
+const getEmptySelectionValue = (mode: SelectionModelMode) =>
+  mode === "multiple" ? [] : "";
+
+const getSelectionValue = (values: Array<string>, mode: SelectionModelMode) =>
+  mode === "multiple" ? values : (values[0] ?? "");
+
+const toggleSelectionValue = (values: Array<string>, value: string) => {
+  if (values.includes(value)) {
+    return values.filter((item) => item !== value);
+  }
+
+  return [...values, value];
+};

package/packages/willa-form/src/themes/dark.css

@@ -0,0 +1,197 @@
+:root[data-wk-theme="dark"] .willa-shell,
+:root[data-wk-theme="dark"] .willa-color-picker-panel,
+:root[data-wk-theme="dark"] .willa-date-picker-panel,
+:root[data-wk-theme="dark"] .willa-time-picker-panel,
+:root[data-wk-theme="dark"] .willa-picker-panel,
+:root[data-wk-theme="dark"] .willa-tree-select-panel {
+  --willa-upload-bg: rgba(255, 255, 255, 0.055);
+  --willa-upload-bg-hover: rgba(125, 211, 252, 0.09);
+  --willa-upload-border: rgba(255, 255, 255, 0.12);
+  --willa-upload-border-active: rgba(125, 211, 252, 0.28);
+  --willa-upload-shadow-hover: none;
+  --willa-upload-text: var(--willa-text-strong);
+  --willa-upload-muted: var(--willa-text-soft);
+  --willa-upload-icon: #bae6fd;
+  --willa-upload-icon-bg: rgba(125, 211, 252, 0.14);
+  --willa-upload-action-bg: rgba(255, 255, 255, 0.08);
+  --willa-upload-action-border: rgba(125, 211, 252, 0.22);
+  --willa-upload-action-text: #bae6fd;
+  --willa-upload-preview-bg: rgba(255, 255, 255, 0.055);
+  --willa-upload-preview-border: rgba(255, 255, 255, 0.1);
+  --willa-upload-media-bg: rgba(255, 255, 255, 0.06);
+  --willa-upload-progress-bg: rgba(125, 211, 252, 0.14);
+  --willa-upload-progress-bar: linear-gradient(90deg, #38bdf8, #67e8f9);
+  --willa-upload-remove-bg: rgba(255, 255, 255, 0.08);
+  --willa-upload-remove-bg-hover: rgba(255, 255, 255, 0.12);
+  --willa-upload-remove-border: rgba(255, 255, 255, 0.12);
+  --willa-upload-remove-border-hover: rgba(125, 211, 252, 0.22);
+  --willa-upload-remove-text: var(--willa-text-soft);
+  --willa-upload-remove-text-hover: var(--willa-text-strong);
+  --willa-input-bg: rgba(255, 255, 255, 0.06);
+  --willa-input-bg-hover: rgba(255, 255, 255, 0.08);
+  --willa-input-bg-focus: rgba(255, 255, 255, 0.075);
+  --willa-input-soft-bg: rgba(255, 255, 255, 0.045);
+  --willa-input-border: rgba(255, 255, 255, 0.12);
+  --willa-input-border-hover: rgba(125, 211, 252, 0.22);
+  --willa-input-border-focus: rgba(125, 211, 252, 0.34);
+  --willa-input-ring: rgba(125, 211, 252, 0.14);
+  --willa-input-text: var(--willa-text-strong);
+  --willa-input-placeholder: var(--willa-text-faint);
+  --willa-input-addon-text: var(--willa-text-soft);
+  --willa-input-disabled-bg: rgba(255, 255, 255, 0.035);
+  --willa-input-disabled-text: var(--willa-text-faint);
+  --willa-input-invalid-border: rgba(252, 165, 165, 0.42);
+  --willa-input-invalid-ring: rgba(252, 165, 165, 0.13);
+  --willa-input-warning-border: rgba(251, 191, 36, 0.44);
+  --willa-input-warning-ring: rgba(251, 191, 36, 0.14);
+  --willa-number-input-controls-bg: #252b34;
+  --willa-number-input-control-bg-hover: #2d3540;
+  --willa-number-input-control-bg-active: #33404d;
+  --willa-tag-input-bg: rgba(255, 255, 255, 0.06);
+  --willa-tag-input-bg-hover: rgba(255, 255, 255, 0.08);
+  --willa-tag-input-bg-focus: rgba(255, 255, 255, 0.075);
+  --willa-tag-input-soft-bg: rgba(255, 255, 255, 0.045);
+  --willa-tag-input-border: rgba(255, 255, 255, 0.12);
+  --willa-tag-input-border-hover: rgba(125, 211, 252, 0.22);
+  --willa-tag-input-border-focus: rgba(125, 211, 252, 0.34);
+  --willa-tag-input-ring: rgba(125, 211, 252, 0.14);
+  --willa-tag-input-text: var(--willa-text-strong);
+  --willa-tag-input-placeholder: var(--willa-text-faint);
+  --willa-tag-input-disabled-bg: rgba(255, 255, 255, 0.035);
+  --willa-tag-input-disabled-text: var(--willa-text-faint);
+  --willa-tag-input-invalid-border: rgba(252, 165, 165, 0.42);
+  --willa-tag-input-invalid-ring: rgba(252, 165, 165, 0.13);
+  --willa-tag-input-action-text: var(--willa-text-soft);
+  --willa-tag-input-action-text-hover: var(--willa-text-strong);
+  --willa-tag-input-action-bg-hover: rgba(255, 255, 255, 0.09);
+  --willa-tag-input-panel-bg: #20242b;
+  --willa-tag-input-panel-border: rgba(255, 255, 255, 0.14);
+  --willa-tag-input-panel-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
+  --willa-tag-input-option-bg-hover: rgba(125, 211, 252, 0.1);
+  --willa-search-input-clear-bg: rgba(255, 255, 255, 0.07);
+  --willa-search-input-clear-bg-hover: rgba(255, 255, 255, 0.11);
+  --willa-search-input-clear-text: var(--willa-text-soft);
+  --willa-search-input-clear-text-hover: var(--willa-text-strong);
+  --willa-color-picker-panel-bg: #20242b;
+  --willa-color-picker-panel-border: rgba(255, 255, 255, 0.14);
+  --willa-color-picker-panel-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
+  --willa-color-picker-text: var(--willa-text-strong);
+  --willa-color-picker-muted: var(--willa-text-soft);
+  --willa-color-picker-divider: rgba(255, 255, 255, 0.1);
+  --willa-color-picker-control-bg: rgba(255, 255, 255, 0.055);
+  --willa-color-picker-control-bg-hover: rgba(255, 255, 255, 0.08);
+  --willa-color-picker-control-border: rgba(255, 255, 255, 0.12);
+  --willa-color-picker-control-border-hover: rgba(125, 211, 252, 0.28);
+  --willa-color-picker-ring: rgba(125, 211, 252, 0.14);
+  --willa-color-picker-swatch-border: rgba(255, 255, 255, 0.18);
+  --willa-color-picker-thumb-border: #ffffff;
+  --willa-color-picker-thumb-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.28);
+  --willa-color-picker-checker: rgba(148, 163, 184, 0.24);
+  --willa-color-picker-checker-bg: rgba(255, 255, 255, 0.08);
+  --willa-rate-color: var(--willa-text-strong);
+  --willa-rate-color-empty: rgba(148, 163, 184, 0.34);
+  --willa-rate-color-active: #fbbf24;
+  --willa-rate-ring: rgba(251, 191, 36, 0.17);
+  --willa-date-picker-panel-bg: #20242b;
+  --willa-date-picker-panel-border: rgba(255, 255, 255, 0.14);
+  --willa-date-picker-panel-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
+  --willa-date-picker-text: var(--willa-text);
+  --willa-date-picker-title: var(--willa-text-strong);
+  --willa-date-picker-control-border: rgba(255, 255, 255, 0.1);
+  --willa-date-picker-control-border-hover: rgba(125, 211, 252, 0.24);
+  --willa-date-picker-day-bg-hover: rgba(125, 211, 252, 0.1);
+  --willa-date-picker-wheel-column-bg: rgba(255, 255, 255, 0.032);
+  --willa-date-picker-wheel-header-bg: rgba(255, 255, 255, 0.055);
+  --willa-form-scrollbar-thumb: var(
+    --willa-scrollbar-thumb,
+    color-mix(in srgb, var(--willa-text-soft) 56%, transparent)
+  );
+  --willa-date-picker-selected-bg: rgba(125, 211, 252, 0.18);
+  --willa-date-picker-selected-border: rgba(125, 211, 252, 0.42);
+  --willa-date-picker-selected-text: var(--willa-text-strong);
+  --willa-calendar-text: var(--willa-text);
+  --willa-calendar-title: var(--willa-text-strong);
+  --willa-calendar-muted: var(--willa-text-faint);
+  --willa-calendar-control-bg-hover: rgba(255, 255, 255, 0.08);
+  --willa-calendar-control-border-hover: rgba(148, 163, 184, 0.28);
+  --willa-calendar-day-bg-hover: #202634;
+  --willa-calendar-range-bg: #1f2940;
+  --willa-calendar-week-line: rgba(148, 163, 184, 0.24);
+  --willa-calendar-weekend-header-bg: rgba(255, 255, 255, 0.075);
+  --willa-calendar-today-border: rgba(130, 163, 236, 0.42);
+  --willa-calendar-selected-bg: #263756;
+  --willa-calendar-selected-border: rgba(130, 163, 236, 0.48);
+  --willa-calendar-selected-text: var(--willa-text-strong);
+  --willa-calendar-marker-bg: #25344f;
+  --willa-calendar-marker-text: #d8e2ff;
+  --willa-calendar-marker-neutral-bg: #30343b;
+  --willa-calendar-marker-neutral-text: #cbd5e1;
+  --willa-calendar-marker-success-bg: #183c2b;
+  --willa-calendar-marker-success-text: #b7e8c4;
+  --willa-calendar-marker-warning-bg: #3d341d;
+  --willa-calendar-marker-warning-text: #ead28a;
+  --willa-calendar-marker-danger-bg: #432628;
+  --willa-calendar-marker-danger-text: #efc2c2;
+  --willa-picker-bg: rgba(255, 255, 255, 0.06);
+  --willa-picker-bg-hover: rgba(255, 255, 255, 0.08);
+  --willa-picker-soft-bg: rgba(255, 255, 255, 0.045);
+  --willa-picker-border: rgba(255, 255, 255, 0.12);
+  --willa-picker-border-hover: rgba(125, 211, 252, 0.24);
+  --willa-picker-border-focus: rgba(125, 211, 252, 0.36);
+  --willa-picker-ring: rgba(125, 211, 252, 0.14);
+  --willa-picker-text: var(--willa-text-strong);
+  --willa-picker-muted: var(--willa-text-soft);
+  --willa-picker-placeholder: var(--willa-text-faint);
+  --willa-picker-panel-bg: #20242b;
+  --willa-picker-panel-border: rgba(255, 255, 255, 0.14);
+  --willa-picker-panel-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
+  --willa-picker-divider: rgba(255, 255, 255, 0.1);
+  --willa-picker-clear-bg-hover: rgba(255, 255, 255, 0.1);
+  --willa-picker-option-bg-hover: rgba(125, 211, 252, 0.1);
+  --willa-picker-option-bg-selected: rgba(125, 211, 252, 0.18);
+  --willa-picker-selected-text: var(--willa-text-strong);
+  --willa-picker-selected-mark: #bae6fd;
+  --willa-form-text: var(--willa-text);
+  --willa-form-label: var(--willa-text-strong);
+  --willa-form-description: var(--willa-text-soft);
+  --willa-form-required: #fca5a5;
+  --willa-form-error: #fca5a5;
+  --willa-form-error-border: rgba(252, 165, 165, 0.42);
+  --willa-form-error-bg: rgba(252, 165, 165, 0.13);
+  --willa-form-error-mark: #fecaca;
+  --willa-form-actions-bg: rgba(28, 31, 36, 0.96);
+  --willa-form-actions-border: rgba(255, 255, 255, 0.1);
+  --willa-form-control-bg: rgba(255, 255, 255, 0.055);
+  --willa-form-control-border: rgba(255, 255, 255, 0.18);
+  --willa-form-control-border-hover: rgba(125, 211, 252, 0.32);
+  --willa-form-control-border-focus: rgba(125, 211, 252, 0.42);
+  --willa-form-control-border-checked: rgba(125, 211, 252, 0.48);
+  --willa-form-control-bg-checked: rgba(125, 211, 252, 0.18);
+  --willa-form-control-mark: var(--willa-text-faint);
+  --willa-form-control-mark-checked: #bae6fd;
+  --willa-form-control-ring: rgba(125, 211, 252, 0.14);
+  --willa-filter-bar-bg: rgba(255, 255, 255, 0.055);
+  --willa-filter-bar-border: rgba(255, 255, 255, 0.1);
+  --willa-filter-bar-text: var(--willa-text);
+  --willa-filter-bar-label: var(--willa-text-soft);
+  --willa-filter-bar-summary: var(--willa-text-soft);
+  --willa-form-switch-bg: rgba(255, 255, 255, 0.1);
+  --willa-form-switch-thumb: rgba(255, 255, 255, 0.72);
+  --willa-form-switch-thumb-shadow: rgba(0, 0, 0, 0.36);
+  --willa-range-input-accent: var(--willa-accent);
+  --willa-range-input-height-sm: 0.28rem;
+  --willa-range-input-height: 0.36rem;
+  --willa-range-input-height-lg: 0.46rem;
+  --willa-range-input-track: rgba(125, 211, 252, 0.16);
+  --willa-range-input-thumb: #1f2937;
+  --willa-range-input-thumb-border: rgba(125, 211, 252, 0.48);
+  --willa-range-input-thumb-shadow: rgba(0, 0, 0, 0.34);
+  --willa-range-input-value-height: 1.55rem;
+  --willa-range-input-value-bg: rgba(15, 23, 42, 0.78);
+  --willa-range-input-value-border: rgba(148, 163, 184, 0.24);
+  --willa-range-input-value-text: #dbeafe;
+  --willa-range-input-value-font-size: 0.78rem;
+  --willa-range-input-mark-text: #94a3b8;
+  --willa-range-input-mark-tick: rgba(148, 163, 184, 0.36);
+}

package/packages/willa-form/src/themes/light.css

@@ -0,0 +1,201 @@
+.willa-shell,
+.willa-color-picker-panel,
+.willa-date-picker-panel,
+.willa-time-picker-panel,
+.willa-picker-panel,
+.willa-tree-select-panel {
+  --willa-upload-bg: rgba(248, 250, 252, 0.92);
+  --willa-upload-bg-hover: rgba(239, 246, 255, 0.92);
+  --willa-upload-border: rgba(15, 23, 42, 0.14);
+  --willa-upload-border-active: rgba(37, 99, 235, 0.34);
+  --willa-upload-shadow-hover: 0 12px 28px rgba(15, 23, 42, 0.06);
+  --willa-upload-text: var(--willa-text-strong);
+  --willa-upload-muted: var(--willa-text-soft);
+  --willa-upload-icon: #2563eb;
+  --willa-upload-icon-bg: rgba(37, 99, 235, 0.1);
+  --willa-upload-action-bg: rgba(255, 255, 255, 0.92);
+  --willa-upload-action-border: rgba(37, 99, 235, 0.22);
+  --willa-upload-action-text: var(--willa-accent);
+  --willa-upload-preview-bg: rgba(255, 255, 255, 0.92);
+  --willa-upload-preview-border: rgba(15, 23, 42, 0.09);
+  --willa-upload-media-bg: rgba(15, 23, 42, 0.04);
+  --willa-upload-progress-bg: rgba(37, 99, 235, 0.12);
+  --willa-upload-progress-bar: linear-gradient(90deg, #60a5fa, #22d3ee);
+  --willa-upload-remove-bg: rgba(255, 255, 255, 0.92);
+  --willa-upload-remove-bg-hover: rgba(15, 23, 42, 0.06);
+  --willa-upload-remove-border: rgba(15, 23, 42, 0.1);
+  --willa-upload-remove-border-hover: rgba(15, 23, 42, 0.18);
+  --willa-upload-remove-text: var(--willa-text-soft);
+  --willa-upload-remove-text-hover: var(--willa-text-strong);
+  --willa-input-bg: rgba(255, 255, 255, 0.9);
+  --willa-input-bg-hover: rgba(255, 255, 255, 0.96);
+  --willa-input-bg-focus: #ffffff;
+  --willa-input-soft-bg: rgba(15, 23, 42, 0.045);
+  --willa-input-border: rgba(15, 23, 42, 0.12);
+  --willa-input-border-hover: rgba(37, 99, 235, 0.22);
+  --willa-input-border-focus: rgba(37, 99, 235, 0.38);
+  --willa-input-ring: rgba(37, 99, 235, 0.14);
+  --willa-input-text: var(--willa-text-strong);
+  --willa-input-placeholder: var(--willa-text-faint);
+  --willa-input-addon-text: var(--willa-text-soft);
+  --willa-input-disabled-bg: rgba(15, 23, 42, 0.035);
+  --willa-input-disabled-text: var(--willa-text-faint);
+  --willa-input-invalid-border: rgba(220, 38, 38, 0.42);
+  --willa-input-invalid-ring: rgba(220, 38, 38, 0.12);
+  --willa-input-warning-border: rgba(217, 119, 6, 0.46);
+  --willa-input-warning-ring: rgba(217, 119, 6, 0.13);
+  --willa-number-input-controls-bg: #ffffff;
+  --willa-number-input-control-bg-hover: #f1f5f9;
+  --willa-number-input-control-bg-active: #e8eef7;
+  --willa-tag-input-bg: rgba(255, 255, 255, 0.9);
+  --willa-tag-input-bg-hover: rgba(255, 255, 255, 0.96);
+  --willa-tag-input-bg-focus: #ffffff;
+  --willa-tag-input-soft-bg: rgba(15, 23, 42, 0.045);
+  --willa-tag-input-border: rgba(15, 23, 42, 0.12);
+  --willa-tag-input-border-hover: rgba(37, 99, 235, 0.22);
+  --willa-tag-input-border-focus: rgba(37, 99, 235, 0.38);
+  --willa-tag-input-ring: rgba(37, 99, 235, 0.14);
+  --willa-tag-input-text: var(--willa-text-strong);
+  --willa-tag-input-placeholder: var(--willa-text-faint);
+  --willa-tag-input-disabled-bg: rgba(15, 23, 42, 0.035);
+  --willa-tag-input-disabled-text: var(--willa-text-faint);
+  --willa-tag-input-invalid-border: rgba(220, 38, 38, 0.42);
+  --willa-tag-input-invalid-ring: rgba(220, 38, 38, 0.12);
+  --willa-tag-input-action-text: var(--willa-text-soft);
+  --willa-tag-input-action-text-hover: var(--willa-text-strong);
+  --willa-tag-input-action-bg-hover: rgba(15, 23, 42, 0.07);
+  --willa-tag-input-panel-bg: #ffffff;
+  --willa-tag-input-panel-border: rgba(15, 23, 42, 0.12);
+  --willa-tag-input-panel-shadow:
+    0 18px 44px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.08);
+  --willa-tag-input-option-bg-hover: rgba(37, 99, 235, 0.07);
+  --willa-search-input-clear-bg: rgba(15, 23, 42, 0.045);
+  --willa-search-input-clear-bg-hover: rgba(15, 23, 42, 0.08);
+  --willa-search-input-clear-text: var(--willa-text-soft);
+  --willa-search-input-clear-text-hover: var(--willa-text-strong);
+  --willa-color-picker-panel-bg: #ffffff;
+  --willa-color-picker-panel-border: rgba(15, 23, 42, 0.12);
+  --willa-color-picker-panel-shadow:
+    0 18px 44px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.08);
+  --willa-color-picker-text: var(--willa-text-strong);
+  --willa-color-picker-muted: var(--willa-text-soft);
+  --willa-color-picker-divider: rgba(15, 23, 42, 0.08);
+  --willa-color-picker-control-bg: rgba(15, 23, 42, 0.035);
+  --willa-color-picker-control-bg-hover: rgba(37, 99, 235, 0.07);
+  --willa-color-picker-control-border: rgba(15, 23, 42, 0.1);
+  --willa-color-picker-control-border-hover: rgba(37, 99, 235, 0.28);
+  --willa-color-picker-ring: rgba(37, 99, 235, 0.14);
+  --willa-color-picker-swatch-border: rgba(15, 23, 42, 0.16);
+  --willa-color-picker-thumb-border: #ffffff;
+  --willa-color-picker-thumb-shadow:
+    0 0 0 1px rgba(15, 23, 42, 0.24), 0 2px 8px rgba(15, 23, 42, 0.2);
+  --willa-color-picker-checker: rgba(100, 116, 139, 0.16);
+  --willa-color-picker-checker-bg: #ffffff;
+  --willa-rate-color: var(--willa-text-strong);
+  --willa-rate-color-empty: rgba(148, 163, 184, 0.36);
+  --willa-rate-color-active: #f5a524;
+  --willa-rate-ring: rgba(245, 158, 11, 0.18);
+  --willa-date-picker-panel-bg: #ffffff;
+  --willa-date-picker-panel-border: rgba(15, 23, 42, 0.12);
+  --willa-date-picker-panel-shadow:
+    0 18px 44px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.08);
+  --willa-date-picker-text: var(--willa-text);
+  --willa-date-picker-title: var(--willa-text-strong);
+  --willa-date-picker-control-border: rgba(15, 23, 42, 0.08);
+  --willa-date-picker-control-border-hover: rgba(37, 99, 235, 0.22);
+  --willa-date-picker-day-bg-hover: rgba(37, 99, 235, 0.07);
+  --willa-date-picker-wheel-column-bg: rgba(15, 23, 42, 0.024);
+  --willa-date-picker-wheel-header-bg: rgba(15, 23, 42, 0.045);
+  --willa-form-scrollbar-thumb: var(
+    --willa-scrollbar-thumb,
+    color-mix(in srgb, var(--willa-text-soft) 56%, transparent)
+  );
+  --willa-date-picker-selected-bg: #dbeafe;
+  --willa-date-picker-selected-border: rgba(37, 99, 235, 0.46);
+  --willa-date-picker-selected-text: var(--willa-text-strong);
+  --willa-calendar-text: var(--willa-text);
+  --willa-calendar-title: var(--willa-text-strong);
+  --willa-calendar-muted: var(--willa-text-faint);
+  --willa-calendar-control-bg-hover: #f5f7fb;
+  --willa-calendar-control-border-hover: rgba(130, 163, 236, 0.34);
+  --willa-calendar-day-bg-hover: #f6f8fc;
+  --willa-calendar-range-bg: #edf3ff;
+  --willa-calendar-week-line: rgba(130, 163, 236, 0.24);
+  --willa-calendar-weekend-header-bg: #f5f7fb;
+  --willa-calendar-today-border: rgba(130, 163, 236, 0.44);
+  --willa-calendar-selected-bg: #dfe8ff;
+  --willa-calendar-selected-border: rgba(130, 163, 236, 0.74);
+  --willa-calendar-selected-text: var(--willa-text-strong);
+  --willa-calendar-marker-bg: #e8efff;
+  --willa-calendar-marker-text: #315da8;
+  --willa-calendar-marker-neutral-bg: #eef1f5;
+  --willa-calendar-marker-neutral-text: #334155;
+  --willa-calendar-marker-success-bg: #e4f5ea;
+  --willa-calendar-marker-success-text: #2f7448;
+  --willa-calendar-marker-warning-bg: #f7eed8;
+  --willa-calendar-marker-warning-text: #8b6723;
+  --willa-calendar-marker-danger-bg: #f8e5e5;
+  --willa-calendar-marker-danger-text: #9d3636;
+  --willa-picker-bg: rgba(255, 255, 255, 0.94);
+  --willa-picker-bg-hover: rgba(248, 250, 252, 0.98);
+  --willa-picker-soft-bg: rgba(15, 23, 42, 0.045);
+  --willa-picker-border: rgba(15, 23, 42, 0.12);
+  --willa-picker-border-hover: rgba(37, 99, 235, 0.24);
+  --willa-picker-border-focus: rgba(37, 99, 235, 0.4);
+  --willa-picker-ring: rgba(37, 99, 235, 0.13);
+  --willa-picker-text: var(--willa-text-strong);
+  --willa-picker-muted: var(--willa-text-soft);
+  --willa-picker-placeholder: var(--willa-text-faint);
+  --willa-picker-panel-bg: #ffffff;
+  --willa-picker-panel-border: rgba(15, 23, 42, 0.12);
+  --willa-picker-panel-shadow:
+    0 18px 44px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.08);
+  --willa-picker-divider: rgba(15, 23, 42, 0.08);
+  --willa-picker-clear-bg-hover: rgba(15, 23, 42, 0.06);
+  --willa-picker-option-bg-hover: rgba(37, 99, 235, 0.07);
+  --willa-picker-option-bg-selected: #dbeafe;
+  --willa-picker-selected-text: var(--willa-text-strong);
+  --willa-picker-selected-mark: #2563eb;
+  --willa-form-text: var(--willa-text);
+  --willa-form-label: var(--willa-text-strong);
+  --willa-form-description: var(--willa-text-soft);
+  --willa-form-required: #dc2626;
+  --willa-form-error: #dc2626;
+  --willa-form-error-border: rgba(220, 38, 38, 0.42);
+  --willa-form-error-bg: rgba(220, 38, 38, 0.1);
+  --willa-form-error-mark: #dc2626;
+  --willa-form-actions-bg: rgba(255, 255, 255, 0.94);
+  --willa-form-actions-border: rgba(15, 23, 42, 0.09);
+  --willa-form-control-bg: rgba(255, 255, 255, 0.92);
+  --willa-form-control-border: rgba(15, 23, 42, 0.18);
+  --willa-form-control-border-hover: rgba(37, 99, 235, 0.32);
+  --willa-form-control-border-focus: rgba(37, 99, 235, 0.42);
+  --willa-form-control-border-checked: rgba(37, 99, 235, 0.54);
+  --willa-form-control-bg-checked: #dbeafe;
+  --willa-form-control-mark: var(--willa-text-faint);
+  --willa-form-control-mark-checked: #1d4ed8;
+  --willa-form-control-ring: rgba(37, 99, 235, 0.14);
+  --willa-filter-bar-bg: rgba(255, 255, 255, 0.96);
+  --willa-filter-bar-border: rgba(15, 23, 42, 0.1);
+  --willa-filter-bar-text: var(--willa-text);
+  --willa-filter-bar-label: var(--willa-text-soft);
+  --willa-filter-bar-summary: var(--willa-text-soft);
+  --willa-form-switch-bg: rgba(15, 23, 42, 0.09);
+  --willa-form-switch-thumb: #ffffff;
+  --willa-form-switch-thumb-shadow: rgba(15, 23, 42, 0.22);
+  --willa-range-input-accent: var(--willa-accent);
+  --willa-range-input-height-sm: 0.28rem;
+  --willa-range-input-height: 0.36rem;
+  --willa-range-input-height-lg: 0.46rem;
+  --willa-range-input-track: rgba(37, 99, 235, 0.14);
+  --willa-range-input-thumb: #ffffff;
+  --willa-range-input-thumb-border: rgba(37, 99, 235, 0.46);
+  --willa-range-input-thumb-shadow: rgba(15, 23, 42, 0.16);
+  --willa-range-input-value-height: 1.55rem;
+  --willa-range-input-value-bg: rgba(248, 250, 252, 0.94);
+  --willa-range-input-value-border: rgba(148, 163, 184, 0.3);
+  --willa-range-input-value-text: #334155;
+  --willa-range-input-value-font-size: 0.78rem;
+  --willa-range-input-mark-text: #64748b;
+  --willa-range-input-mark-tick: rgba(100, 116, 139, 0.42);
+}

package/packages/willa-form/vitest.config.ts

@@ -0,0 +1,15 @@
+import path from "node:path";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  define: {
+    __DEV__: "true",
+    __TEST__: "true",
+    __VERSION__: `'unknown'`,
+  },
+  resolve: {
+    alias: {
+      "#form": path.resolve(__dirname, "./src"),
+    },
+  },
+});

package/packages/willa-layout/README.md

@@ -0,0 +1,33 @@
+# @willa-ui/layout
+
+Layout primitives and base visual tokens for Willa UI.
+
+Use this package for page shells, responsive containers, groups, stacks, grids,
+cards, panels, section headers, separators, masonry layouts, and split panes.
+The layout theme also owns shared visual tokens such as fonts, text colors,
+line colors, surfaces, and focus rings.
+
+## Import
+
+Full styles:
+
+```tsx
+import { Card, Stack } from "@willa-ui/layout";
+import "@willa-ui/layout/style.css";
+```
+
+Single-component styles:
+
+```tsx
+import "@willa-ui/layout/external.css";
+import "@willa-ui/layout/themes/light.css";
+import "@willa-ui/layout/themes/dark.css";
+
+import { Card } from "@willa-ui/layout/components/Card";
+import "@willa-ui/layout/components/Card.css";
+```
+
+## Boundaries
+
+Layout components can use shared utilities. They should not depend on content,
+form, AI, or widgets components.

package/packages/willa-layout/auklet.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from "auklet";
+
+export const config = defineConfig({
+  modules: true,
+  styles: {
+    themes: {
+      dark: "./src/themes/dark.css",
+      light: "./src/themes/light.css",
+    },
+  },
+});

package/packages/willa-layout/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@willa-ui/layout",
+  "version": "0.0.3-alpha.2739b3e",
+  "description": "Willa UI layout components.",
+  "author": "chentao.arthur",
+  "license": "MIT",
+  "scripts": {
+    "dev": "auk dev",
+    "build": "auk build",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/es/index.d.ts",
+        "default": "./dist/es/index.js"
+      },
+      "require": {
+        "types": "./dist/lib/index.d.ts",
+        "default": "./dist/lib/index.js"
+      }
+    },
+    "./*": {
+      "import": {
+        "types": "./dist/es/*/index.d.ts",
+        "default": "./dist/es/*/index.js"
+      },
+      "require": {
+        "types": "./dist/lib/*/index.d.ts",
+        "default": "./dist/lib/*/index.js"
+      }
+    },
+    "./*.css": {
+      "import": "./dist/es/*/style/index.css",
+      "require": "./dist/lib/*/style/index.css",
+      "default": "./dist/es/*/style/index.css"
+    },
+    "./style.css": {
+      "import": "./dist/es/style/index.css",
+      "require": "./dist/lib/style/index.css",
+      "default": "./dist/es/style/index.css"
+    },
+    "./themes/*.css": {
+      "import": "./dist/es/themes/*.css",
+      "require": "./dist/lib/themes/*.css",
+      "default": "./dist/es/themes/*.css"
+    },
+    "./external.css": {
+      "import": "./dist/es/style/external.css",
+      "require": "./dist/lib/style/external.css",
+      "default": "./dist/es/style/external.css"
+    }
+  },
+  "main": "./dist/lib/index.js",
+  "module": "./dist/es/index.js",
+  "unpkg": "./dist/index.global.js",
+  "types": "./dist/es/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@willa-ui/shared": "workspace:*",
+    "@radix-ui/react-icons": "catalog:",
+    "aidly": "catalog:",
+    "classnames": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitest/coverage-v8": "catalog:",
+    "auklet": "catalog:",
+    "vitest": "catalog:",
+    "typescript": "catalog:"
+  }
+}