@rokkit/forms 1.0.0-next.122 → 1.0.0-next.124

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rokkit/forms",
3
- "version": "1.0.0-next.122",
3
+ "version": "1.0.0-next.124",
4
4
  "module": "src/index.js",
5
5
  "author": "Jerry Thomas <me@jerrythomas.name>",
6
6
  "license": "MIT",
@@ -32,7 +32,7 @@
32
32
  "@rokkit/states": "latest",
33
33
  "@rokkit/ui": "latest",
34
34
  "@rokkit/bits-ui": "latest",
35
- "ramda": "^0.30.1",
35
+ "ramda": "^0.31.3",
36
36
  "valibot": "^1.1.0"
37
37
  }
38
38
  }
@@ -48,7 +48,7 @@
48
48
  </script>
49
49
 
50
50
  <container class="flex h-full w-full flex-row">
51
- <aside class="border-r-neutral-subtle flex h-full w-80 border-r">
51
+ <aside class="border-r-surface-z2 flex h-full w-80 border-r">
52
52
  <Tree items={schema} {fields} class="h-full w-full" on:move={handleMove} />
53
53
  </aside>
54
54
  <content class="flex h-full w-full flex-col gap-4 overflow-hidden p-8">
@@ -56,7 +56,7 @@
56
56
  {#each elements as element (element.scope)}
57
57
  <div class="form-element">
58
58
  {#if element.type === 'range'}
59
- <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
59
+ <label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
60
60
  {element.label}: {element.value}
61
61
  <input
62
62
  type="range"
@@ -65,11 +65,11 @@
65
65
  max={element.constraints?.max}
66
66
  step={element.constraints?.step}
67
67
  oninput={(e) => handleRangeChange(element.scope, e)}
68
- class="mt-1 h-2 w-full cursor-pointer appearance-none rounded-lg bg-neutral-200 dark:bg-neutral-700"
68
+ class="bg-surface-200 dark:bg-surface-700 mt-1 h-2 w-full cursor-pointer appearance-none rounded-lg"
69
69
  />
70
70
  </label>
71
71
  {:else if element.type === 'number'}
72
- <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
72
+ <label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
73
73
  {element.label}
74
74
  <input
75
75
  type="number"
@@ -78,26 +78,26 @@
78
78
  max={element.constraints?.max}
79
79
  step={element.constraints?.step}
80
80
  oninput={(e) => handleNumberChange(element.scope, e)}
81
- class="focus:border-primary-500 focus:ring-primary-500 mt-1 block w-full rounded-md border border-neutral-300 px-3 py-2 shadow-sm focus:outline-none dark:border-neutral-600 dark:bg-neutral-700 dark:text-white"
81
+ class="focus:border-primary-500 focus:ring-primary-500 border-surface-300 dark:border-surface-600 dark:bg-surface-700 mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none dark:text-white"
82
82
  />
83
83
  </label>
84
84
  {:else if element.type === 'checkbox'}
85
- <label class="flex items-center text-sm font-medium text-neutral-700 dark:text-neutral-300">
85
+ <label class="text-surface-700 dark:text-surface-300 flex items-center text-sm font-medium">
86
86
  <input
87
87
  type="checkbox"
88
88
  checked={element.value}
89
89
  onchange={(e) => handleCheckboxChange(element.scope, e)}
90
- class="text-primary-600 focus:ring-primary-500 mr-2 h-4 w-4 rounded border-neutral-300 dark:border-neutral-600"
90
+ class="text-primary-600 focus:ring-primary-500 border-surface-300 dark:border-surface-600 mr-2 h-4 w-4 rounded"
91
91
  />
92
92
  {element.label}
93
93
  </label>
94
94
  {:else if element.type === 'select'}
95
- <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
95
+ <label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
96
96
  {element.label}
97
97
  <select
98
98
  value={element.value}
99
99
  onchange={(e) => handleTextChange(element.scope, e)}
100
- class="focus:border-primary-500 focus:ring-primary-500 mt-1 block w-full rounded-md border border-neutral-300 px-3 py-2 shadow-sm focus:outline-none dark:border-neutral-600 dark:bg-neutral-700 dark:text-white"
100
+ class="focus:border-primary-500 focus:ring-primary-500 border-surface-300 dark:border-surface-600 dark:bg-surface-700 mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none dark:text-white"
101
101
  >
102
102
  {#each element.constraints?.options || [] as option, index (index)}
103
103
  <option value={option}>{option}</option>
@@ -106,13 +106,13 @@
106
106
  </label>
107
107
  {:else}
108
108
  <!-- Default text input -->
109
- <label class="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
109
+ <label class="text-surface-700 dark:text-surface-300 block text-sm font-medium">
110
110
  {element.label}
111
111
  <input
112
112
  type="text"
113
113
  value={element.value || ''}
114
114
  oninput={(e) => handleTextChange(element.scope, e)}
115
- class="focus:border-primary-500 focus:ring-primary-500 mt-1 block w-full rounded-md border border-neutral-300 px-3 py-2 shadow-sm focus:outline-none dark:border-neutral-600 dark:bg-neutral-700 dark:text-white"
115
+ class="focus:border-primary-500 focus:ring-primary-500 border-surface-300 dark:border-surface-600 dark:bg-surface-700 mt-1 block w-full rounded-md border px-3 py-2 shadow-sm focus:outline-none dark:text-white"
116
116
  />
117
117
  </label>
118
118
  {/if}