@proyecto-viviana/solid-stately 0.1.5 → 0.2.1

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.
Files changed (217) hide show
  1. package/{src → dist}/autocomplete/createAutocompleteState.d.ts +0 -1
  2. package/{src → dist}/autocomplete/index.d.ts +0 -1
  3. package/{src → dist}/calendar/createCalendarState.d.ts +0 -1
  4. package/{src → dist}/calendar/createDateFieldState.d.ts +0 -1
  5. package/{src → dist}/calendar/createRangeCalendarState.d.ts +0 -1
  6. package/{src → dist}/calendar/createTimeFieldState.d.ts +0 -1
  7. package/{src → dist}/calendar/index.d.ts +0 -1
  8. package/{src → dist}/checkbox/createCheckboxGroupState.d.ts +0 -1
  9. package/{src → dist}/checkbox/index.d.ts +0 -1
  10. package/{src → dist}/collections/ListCollection.d.ts +0 -1
  11. package/{src → dist}/collections/createListState.d.ts +0 -1
  12. package/{src → dist}/collections/createMenuState.d.ts +0 -1
  13. package/{src → dist}/collections/createSelectionState.d.ts +0 -1
  14. package/{src → dist}/collections/index.d.ts +0 -1
  15. package/{src → dist}/collections/types.d.ts +0 -1
  16. package/{src → dist}/color/Color.d.ts +0 -1
  17. package/{src → dist}/color/createColorAreaState.d.ts +0 -1
  18. package/{src → dist}/color/createColorFieldState.d.ts +0 -1
  19. package/{src → dist}/color/createColorSliderState.d.ts +0 -1
  20. package/{src → dist}/color/createColorWheelState.d.ts +0 -1
  21. package/{src → dist}/color/index.d.ts +0 -1
  22. package/{src → dist}/color/types.d.ts +0 -1
  23. package/{src → dist}/combobox/createComboBoxState.d.ts +0 -1
  24. package/{src → dist}/combobox/index.d.ts +0 -1
  25. package/{src → dist}/disclosure/createDisclosureState.d.ts +0 -1
  26. package/{src → dist}/disclosure/index.d.ts +0 -1
  27. package/{src → dist}/dnd/createDragState.d.ts +0 -1
  28. package/{src → dist}/dnd/createDraggableCollectionState.d.ts +0 -1
  29. package/{src → dist}/dnd/createDropState.d.ts +0 -1
  30. package/{src → dist}/dnd/createDroppableCollectionState.d.ts +0 -1
  31. package/{src → dist}/dnd/index.d.ts +0 -1
  32. package/{src → dist}/dnd/types.d.ts +0 -1
  33. package/{src → dist}/form/createFormValidationState.d.ts +0 -1
  34. package/{src → dist}/form/index.d.ts +0 -1
  35. package/{src → dist}/grid/createGridState.d.ts +0 -1
  36. package/{src → dist}/grid/index.d.ts +0 -1
  37. package/{src → dist}/grid/types.d.ts +0 -1
  38. package/dist/index.d.ts +25 -3363
  39. package/dist/index.js +2 -2
  40. package/dist/index.js.map +7 -1
  41. package/{src → dist}/numberfield/createNumberFieldState.d.ts +0 -1
  42. package/{src → dist}/numberfield/index.d.ts +0 -1
  43. package/{src → dist}/overlays/createOverlayTriggerState.d.ts +0 -1
  44. package/{src → dist}/overlays/index.d.ts +0 -1
  45. package/{src → dist}/radio/createRadioGroupState.d.ts +0 -1
  46. package/{src → dist}/radio/index.d.ts +0 -1
  47. package/{src → dist}/searchfield/createSearchFieldState.d.ts +0 -1
  48. package/{src → dist}/searchfield/index.d.ts +0 -1
  49. package/{src → dist}/select/createSelectState.d.ts +0 -1
  50. package/{src → dist}/select/index.d.ts +0 -1
  51. package/{src → dist}/slider/createSliderState.d.ts +0 -1
  52. package/{src → dist}/slider/index.d.ts +0 -1
  53. package/{src → dist}/ssr/index.d.ts +0 -1
  54. package/{src → dist}/table/TableCollection.d.ts +0 -1
  55. package/{src → dist}/table/createTableState.d.ts +0 -1
  56. package/{src → dist}/table/index.d.ts +0 -1
  57. package/{src → dist}/table/types.d.ts +0 -1
  58. package/{src → dist}/tabs/createTabListState.d.ts +0 -1
  59. package/{src → dist}/tabs/index.d.ts +0 -1
  60. package/{src → dist}/textfield/createTextFieldState.d.ts +0 -1
  61. package/{src → dist}/textfield/index.d.ts +0 -1
  62. package/{src → dist}/toast/createToastState.d.ts +0 -1
  63. package/{src → dist}/toast/index.d.ts +0 -1
  64. package/{src → dist}/toggle/createToggleState.d.ts +0 -1
  65. package/{src → dist}/toggle/index.d.ts +0 -1
  66. package/{src → dist}/tooltip/createTooltipTriggerState.d.ts +0 -1
  67. package/{src → dist}/tooltip/index.d.ts +0 -1
  68. package/{src → dist}/tree/TreeCollection.d.ts +0 -1
  69. package/{src → dist}/tree/createTreeState.d.ts +0 -1
  70. package/{src → dist}/tree/index.d.ts +0 -1
  71. package/{src → dist}/tree/types.d.ts +0 -1
  72. package/{src → dist}/utils/reactivity.d.ts +0 -1
  73. package/package.json +5 -7
  74. package/src/autocomplete/createAutocompleteState.d.ts.map +0 -1
  75. package/src/autocomplete/createAutocompleteState.ts +0 -90
  76. package/src/autocomplete/index.d.ts.map +0 -1
  77. package/src/autocomplete/index.ts +0 -5
  78. package/src/calendar/createCalendarState.d.ts.map +0 -1
  79. package/src/calendar/createCalendarState.ts +0 -461
  80. package/src/calendar/createDateFieldState.d.ts.map +0 -1
  81. package/src/calendar/createDateFieldState.ts +0 -562
  82. package/src/calendar/createRangeCalendarState.d.ts.map +0 -1
  83. package/src/calendar/createRangeCalendarState.ts +0 -535
  84. package/src/calendar/createTimeFieldState.d.ts.map +0 -1
  85. package/src/calendar/createTimeFieldState.ts +0 -483
  86. package/src/calendar/index.d.ts.map +0 -1
  87. package/src/calendar/index.ts +0 -81
  88. package/src/checkbox/createCheckboxGroupState.d.ts.map +0 -1
  89. package/src/checkbox/createCheckboxGroupState.ts +0 -193
  90. package/src/checkbox/index.d.ts.map +0 -1
  91. package/src/checkbox/index.ts +0 -5
  92. package/src/collections/ListCollection.d.ts.map +0 -1
  93. package/src/collections/ListCollection.ts +0 -146
  94. package/src/collections/createListState.d.ts.map +0 -1
  95. package/src/collections/createListState.ts +0 -264
  96. package/src/collections/createMenuState.d.ts.map +0 -1
  97. package/src/collections/createMenuState.ts +0 -106
  98. package/src/collections/createSelectionState.d.ts.map +0 -1
  99. package/src/collections/createSelectionState.ts +0 -336
  100. package/src/collections/index.d.ts.map +0 -1
  101. package/src/collections/index.ts +0 -46
  102. package/src/collections/types.d.ts.map +0 -1
  103. package/src/collections/types.ts +0 -169
  104. package/src/color/Color.d.ts.map +0 -1
  105. package/src/color/Color.ts +0 -951
  106. package/src/color/createColorAreaState.d.ts.map +0 -1
  107. package/src/color/createColorAreaState.ts +0 -293
  108. package/src/color/createColorFieldState.d.ts.map +0 -1
  109. package/src/color/createColorFieldState.ts +0 -292
  110. package/src/color/createColorSliderState.d.ts.map +0 -1
  111. package/src/color/createColorSliderState.ts +0 -241
  112. package/src/color/createColorWheelState.d.ts.map +0 -1
  113. package/src/color/createColorWheelState.ts +0 -211
  114. package/src/color/index.d.ts.map +0 -1
  115. package/src/color/index.ts +0 -47
  116. package/src/color/types.d.ts.map +0 -1
  117. package/src/color/types.ts +0 -127
  118. package/src/combobox/createComboBoxState.d.ts.map +0 -1
  119. package/src/combobox/createComboBoxState.ts +0 -703
  120. package/src/combobox/index.d.ts.map +0 -1
  121. package/src/combobox/index.ts +0 -13
  122. package/src/disclosure/createDisclosureState.d.ts.map +0 -1
  123. package/src/disclosure/createDisclosureState.ts +0 -193
  124. package/src/disclosure/index.d.ts.map +0 -1
  125. package/src/disclosure/index.ts +0 -9
  126. package/src/dnd/createDragState.d.ts.map +0 -1
  127. package/src/dnd/createDragState.ts +0 -153
  128. package/src/dnd/createDraggableCollectionState.d.ts.map +0 -1
  129. package/src/dnd/createDraggableCollectionState.ts +0 -165
  130. package/src/dnd/createDropState.d.ts.map +0 -1
  131. package/src/dnd/createDropState.ts +0 -212
  132. package/src/dnd/createDroppableCollectionState.d.ts.map +0 -1
  133. package/src/dnd/createDroppableCollectionState.ts +0 -357
  134. package/src/dnd/index.d.ts.map +0 -1
  135. package/src/dnd/index.ts +0 -76
  136. package/src/dnd/types.d.ts.map +0 -1
  137. package/src/dnd/types.ts +0 -317
  138. package/src/form/createFormValidationState.d.ts.map +0 -1
  139. package/src/form/createFormValidationState.ts +0 -389
  140. package/src/form/index.d.ts.map +0 -1
  141. package/src/form/index.ts +0 -15
  142. package/src/grid/createGridState.d.ts.map +0 -1
  143. package/src/grid/createGridState.ts +0 -327
  144. package/src/grid/index.d.ts.map +0 -1
  145. package/src/grid/index.ts +0 -13
  146. package/src/grid/types.d.ts.map +0 -1
  147. package/src/grid/types.ts +0 -179
  148. package/src/index.d.ts +0 -26
  149. package/src/index.d.ts.map +0 -1
  150. package/src/index.ts +0 -383
  151. package/src/numberfield/createNumberFieldState.d.ts.map +0 -1
  152. package/src/numberfield/createNumberFieldState.ts +0 -383
  153. package/src/numberfield/index.d.ts.map +0 -1
  154. package/src/numberfield/index.ts +0 -5
  155. package/src/overlays/createOverlayTriggerState.d.ts.map +0 -1
  156. package/src/overlays/createOverlayTriggerState.ts +0 -67
  157. package/src/overlays/index.d.ts.map +0 -1
  158. package/src/overlays/index.ts +0 -5
  159. package/src/radio/createRadioGroupState.d.ts.map +0 -1
  160. package/src/radio/createRadioGroupState.ts +0 -201
  161. package/src/radio/index.d.ts.map +0 -1
  162. package/src/radio/index.ts +0 -6
  163. package/src/searchfield/createSearchFieldState.d.ts.map +0 -1
  164. package/src/searchfield/createSearchFieldState.ts +0 -62
  165. package/src/searchfield/index.d.ts.map +0 -1
  166. package/src/searchfield/index.ts +0 -5
  167. package/src/select/createSelectState.d.ts.map +0 -1
  168. package/src/select/createSelectState.ts +0 -181
  169. package/src/select/index.d.ts.map +0 -1
  170. package/src/select/index.ts +0 -5
  171. package/src/slider/createSliderState.d.ts.map +0 -1
  172. package/src/slider/createSliderState.ts +0 -211
  173. package/src/slider/index.d.ts.map +0 -1
  174. package/src/slider/index.ts +0 -6
  175. package/src/ssr/index.d.ts.map +0 -1
  176. package/src/ssr/index.ts +0 -41
  177. package/src/table/TableCollection.d.ts.map +0 -1
  178. package/src/table/TableCollection.ts +0 -388
  179. package/src/table/createTableState.d.ts.map +0 -1
  180. package/src/table/createTableState.ts +0 -127
  181. package/src/table/index.d.ts.map +0 -1
  182. package/src/table/index.ts +0 -18
  183. package/src/table/types.d.ts.map +0 -1
  184. package/src/table/types.ts +0 -150
  185. package/src/tabs/createTabListState.d.ts.map +0 -1
  186. package/src/tabs/createTabListState.ts +0 -240
  187. package/src/tabs/index.d.ts.map +0 -1
  188. package/src/tabs/index.ts +0 -7
  189. package/src/textfield/createTextFieldState.d.ts.map +0 -1
  190. package/src/textfield/createTextFieldState.ts +0 -75
  191. package/src/textfield/index.d.ts.map +0 -1
  192. package/src/textfield/index.ts +0 -5
  193. package/src/toast/createToastState.d.ts.map +0 -1
  194. package/src/toast/createToastState.ts +0 -316
  195. package/src/toast/index.d.ts.map +0 -1
  196. package/src/toast/index.ts +0 -11
  197. package/src/toggle/createToggleState.d.ts.map +0 -1
  198. package/src/toggle/createToggleState.ts +0 -94
  199. package/src/toggle/index.d.ts.map +0 -1
  200. package/src/toggle/index.ts +0 -5
  201. package/src/tooltip/createTooltipTriggerState.d.ts.map +0 -1
  202. package/src/tooltip/createTooltipTriggerState.ts +0 -183
  203. package/src/tooltip/index.d.ts.map +0 -1
  204. package/src/tooltip/index.ts +0 -6
  205. package/src/tree/TreeCollection.d.ts.map +0 -1
  206. package/src/tree/TreeCollection.ts +0 -175
  207. package/src/tree/createTreeState.d.ts.map +0 -1
  208. package/src/tree/createTreeState.ts +0 -392
  209. package/src/tree/index.d.ts.map +0 -1
  210. package/src/tree/index.ts +0 -13
  211. package/src/tree/types.d.ts.map +0 -1
  212. package/src/tree/types.ts +0 -174
  213. package/src/utils/index.d.ts +0 -2
  214. package/src/utils/index.d.ts.map +0 -1
  215. package/src/utils/reactivity.d.ts.map +0 -1
  216. package/src/utils/reactivity.ts +0 -36
  217. /package/{src/utils/index.ts → dist/utils/index.d.ts} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"file":"createColorAreaState.d.ts","sourceRoot":"","sources":["createColorAreaState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAA4B,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAa,MAAM,SAAS,CAAC;AAG9D,MAAM,WAAW,qBAAqB;IACpC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC9B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,yCAAyC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,wCAAwC;IACxC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,0BAA0B;IAC1B,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,0BAA0B;IAC1B,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,8CAA8C;IAC9C,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,yCAAyC;IACzC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,oCAAoC;IACpC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,0BAA0B;IAC1B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,0BAA0B;IAC1B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,+BAA+B;IAC/B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAElC,+BAA+B;IAC/B,SAAS,IAAI,MAAM,CAAC;IACpB,+BAA+B;IAC/B,SAAS,IAAI,MAAM,CAAC;IACpB,+BAA+B;IAC/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,+BAA+B;IAC/B,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,yCAAyC;IACzC,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9C,6CAA6C;IAC7C,gBAAgB,IAAI;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,yBAAyB;IACzB,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,yBAAyB;IACzB,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,yBAAyB;IACzB,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,yBAAyB;IACzB,UAAU,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,8BAA8B;IAC9B,WAAW,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC,8CAA8C;IAC9C,eAAe,IAAI,KAAK,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GACvC,cAAc,CAqNhB"}
@@ -1,293 +0,0 @@
1
- /**
2
- * ColorArea state management.
3
- * Based on @react-stately/color useColorAreaState.
4
- */
5
-
6
- import { createSignal, createMemo, type Accessor } from 'solid-js';
7
- import type { Color, ColorChannel, ColorAxes } from './types';
8
- import { normalizeColor } from './Color';
9
-
10
- export interface ColorAreaStateOptions {
11
- /** The current color value (controlled). */
12
- value?: Color | string;
13
- /** The default color value (uncontrolled). */
14
- defaultValue?: Color | string;
15
- /** Handler called when the color changes. */
16
- onChange?: (color: Color) => void;
17
- /** Handler called when dragging ends. */
18
- onChangeEnd?: (color: Color) => void;
19
- /** The color channel for the X axis. */
20
- xChannel?: ColorChannel;
21
- /** The color channel for the Y axis. */
22
- yChannel?: ColorChannel;
23
- /** Whether the area is disabled. */
24
- isDisabled?: boolean;
25
- }
26
-
27
- export interface ColorAreaState {
28
- /** The current color value. */
29
- readonly value: Color;
30
- /** The X axis channel. */
31
- readonly xChannel: ColorChannel;
32
- /** The Y axis channel. */
33
- readonly yChannel: ColorChannel;
34
- /** The Z axis channel (the third channel). */
35
- readonly zChannel: ColorChannel;
36
- /** Whether the area is being dragged. */
37
- readonly isDragging: boolean;
38
- /** Whether the area is disabled. */
39
- readonly isDisabled: boolean;
40
- /** Step for X channel. */
41
- readonly xChannelStep: number;
42
- /** Step for Y channel. */
43
- readonly yChannelStep: number;
44
- /** Page step for X channel. */
45
- readonly xChannelPageStep: number;
46
- /** Page step for Y channel. */
47
- readonly yChannelPageStep: number;
48
-
49
- /** Get the X channel value. */
50
- getXValue(): number;
51
- /** Get the Y channel value. */
52
- getYValue(): number;
53
- /** Set the X channel value. */
54
- setXValue(value: number): void;
55
- /** Set the Y channel value. */
56
- setYValue(value: number): void;
57
- /** Set color from a point (0-1, 0-1). */
58
- setColorFromPoint(x: number, y: number): void;
59
- /** Get the thumb position as percentages. */
60
- getThumbPosition(): { x: number; y: number };
61
- /** Increment X value. */
62
- incrementX(stepSize?: number): void;
63
- /** Decrement X value. */
64
- decrementX(stepSize?: number): void;
65
- /** Increment Y value. */
66
- incrementY(stepSize?: number): void;
67
- /** Decrement Y value. */
68
- decrementY(stepSize?: number): void;
69
- /** Set the dragging state. */
70
- setDragging(isDragging: boolean): void;
71
- /** Get the display color (with alpha = 1). */
72
- getDisplayColor(): Color;
73
- }
74
-
75
- /**
76
- * Creates state for a color area (2D color picker).
77
- */
78
- export function createColorAreaState(
79
- options: Accessor<ColorAreaStateOptions>
80
- ): ColorAreaState {
81
- const getOptions = () => options();
82
-
83
- // Internal value state
84
- const [internalValue, setInternalValue] = createSignal<Color | null>(null);
85
- const [isDragging, setIsDragging] = createSignal(false);
86
-
87
- // Initialize internal value
88
- const initValue = () => {
89
- const opts = getOptions();
90
- if (opts.defaultValue) {
91
- return normalizeColor(opts.defaultValue);
92
- }
93
- return null;
94
- };
95
-
96
- // Set initial value
97
- if (internalValue() === null) {
98
- const init = initValue();
99
- if (init) {
100
- setInternalValue(init);
101
- }
102
- }
103
-
104
- // Controlled vs uncontrolled value
105
- const value = createMemo(() => {
106
- const opts = getOptions();
107
- if (opts.value !== undefined) {
108
- return normalizeColor(opts.value);
109
- }
110
- return internalValue() ?? normalizeColor('#ff0000');
111
- });
112
-
113
- const isDisabled = createMemo(() => getOptions().isDisabled ?? false);
114
-
115
- // Get color axes
116
- const axes = createMemo<ColorAxes>(() => {
117
- const opts = getOptions();
118
- return value().getColorSpaceAxes({
119
- xChannel: opts.xChannel,
120
- yChannel: opts.yChannel,
121
- });
122
- });
123
-
124
- const xChannel = createMemo(() => axes().xChannel);
125
- const yChannel = createMemo(() => axes().yChannel);
126
- const zChannel = createMemo(() => axes().zChannel);
127
-
128
- // Get channel ranges
129
- const xRange = createMemo(() => value().getChannelRange(xChannel()));
130
- const yRange = createMemo(() => value().getChannelRange(yChannel()));
131
-
132
- const xChannelStep = createMemo(() => xRange().step);
133
- const yChannelStep = createMemo(() => yRange().step);
134
- const xChannelPageStep = createMemo(() => xRange().pageSize);
135
- const yChannelPageStep = createMemo(() => yRange().pageSize);
136
-
137
- // Update value
138
- const updateValue = (newColor: Color) => {
139
- const opts = getOptions();
140
-
141
- // Controlled mode
142
- if (opts.value !== undefined) {
143
- opts.onChange?.(newColor);
144
- return;
145
- }
146
-
147
- // Uncontrolled mode
148
- setInternalValue(newColor);
149
- opts.onChange?.(newColor);
150
- };
151
-
152
- // Get X value
153
- const getXValue = () => value().getChannelValue(xChannel());
154
-
155
- // Get Y value
156
- const getYValue = () => value().getChannelValue(yChannel());
157
-
158
- // Set X value
159
- const setXValue = (newValue: number) => {
160
- const range = xRange();
161
- const clamped = Math.max(range.minValue, Math.min(range.maxValue, newValue));
162
- const rounded = Math.round(clamped / range.step) * range.step;
163
- const newColor = value().withChannelValue(xChannel(), rounded);
164
- updateValue(newColor);
165
- };
166
-
167
- // Set Y value
168
- const setYValue = (newValue: number) => {
169
- const range = yRange();
170
- const clamped = Math.max(range.minValue, Math.min(range.maxValue, newValue));
171
- const rounded = Math.round(clamped / range.step) * range.step;
172
- const newColor = value().withChannelValue(yChannel(), rounded);
173
- updateValue(newColor);
174
- };
175
-
176
- // Set color from point (x: 0-1, y: 0-1)
177
- const setColorFromPoint = (x: number, y: number) => {
178
- const xR = xRange();
179
- const yR = yRange();
180
-
181
- const xVal = xR.minValue + (xR.maxValue - xR.minValue) * x;
182
- const yVal = yR.minValue + (yR.maxValue - yR.minValue) * (1 - y); // Y is inverted
183
-
184
- const xClamped = Math.max(xR.minValue, Math.min(xR.maxValue, xVal));
185
- const yClamped = Math.max(yR.minValue, Math.min(yR.maxValue, yVal));
186
-
187
- const xRounded = Math.round(xClamped / xR.step) * xR.step;
188
- const yRounded = Math.round(yClamped / yR.step) * yR.step;
189
-
190
- const newColor = value()
191
- .withChannelValue(xChannel(), xRounded)
192
- .withChannelValue(yChannel(), yRounded);
193
- updateValue(newColor);
194
- };
195
-
196
- // Get thumb position as percentages
197
- const getThumbPosition = () => {
198
- const xR = xRange();
199
- const yR = yRange();
200
- const xVal = getXValue();
201
- const yVal = getYValue();
202
-
203
- return {
204
- x: (xVal - xR.minValue) / (xR.maxValue - xR.minValue),
205
- y: 1 - (yVal - yR.minValue) / (yR.maxValue - yR.minValue), // Y is inverted
206
- };
207
- };
208
-
209
- // Increment X
210
- const incrementX = (stepSize?: number) => {
211
- const s = stepSize ?? xChannelStep();
212
- setXValue(getXValue() + s);
213
- };
214
-
215
- // Decrement X
216
- const decrementX = (stepSize?: number) => {
217
- const s = stepSize ?? xChannelStep();
218
- setXValue(getXValue() - s);
219
- };
220
-
221
- // Increment Y
222
- const incrementY = (stepSize?: number) => {
223
- const s = stepSize ?? yChannelStep();
224
- setYValue(getYValue() + s);
225
- };
226
-
227
- // Decrement Y
228
- const decrementY = (stepSize?: number) => {
229
- const s = stepSize ?? yChannelStep();
230
- setYValue(getYValue() - s);
231
- };
232
-
233
- // Set dragging
234
- const setDraggingState = (dragging: boolean) => {
235
- const wasDragging = isDragging();
236
- setIsDragging(dragging);
237
-
238
- // Call onChangeEnd when dragging ends
239
- if (wasDragging && !dragging) {
240
- getOptions().onChangeEnd?.(value());
241
- }
242
- };
243
-
244
- // Get display color (alpha = 1)
245
- const getDisplayColor = () => {
246
- return value().withChannelValue('alpha', 1);
247
- };
248
-
249
- return {
250
- get value() {
251
- return value();
252
- },
253
- get xChannel() {
254
- return xChannel();
255
- },
256
- get yChannel() {
257
- return yChannel();
258
- },
259
- get zChannel() {
260
- return zChannel();
261
- },
262
- get isDragging() {
263
- return isDragging();
264
- },
265
- get isDisabled() {
266
- return isDisabled();
267
- },
268
- get xChannelStep() {
269
- return xChannelStep();
270
- },
271
- get yChannelStep() {
272
- return yChannelStep();
273
- },
274
- get xChannelPageStep() {
275
- return xChannelPageStep();
276
- },
277
- get yChannelPageStep() {
278
- return yChannelPageStep();
279
- },
280
- getXValue,
281
- getYValue,
282
- setXValue,
283
- setYValue,
284
- setColorFromPoint,
285
- getThumbPosition,
286
- incrementX,
287
- decrementX,
288
- incrementY,
289
- decrementY,
290
- setDragging: setDraggingState,
291
- getDisplayColor,
292
- };
293
- }
@@ -1 +0,0 @@
1
- {"version":3,"file":"createColorFieldState.d.ts","sourceRoot":"","sources":["createColorFieldState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAA4B,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGhE,MAAM,WAAW,sBAAsB;IACrC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAC;IAC9B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC9B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,2DAA2D;IAC3D,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,iDAAiD;IACjD,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAC7B,8BAA8B;IAC9B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,oCAAoC;IACpC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,qCAAqC;IACrC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,sCAAsC;IACtC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,+DAA+D;IAC/D,QAAQ,CAAC,OAAO,EAAE,YAAY,GAAG,SAAS,CAAC;IAE3C,gCAAgC;IAChC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,sCAAsC;IACtC,MAAM,IAAI,IAAI,CAAC;IACf,yCAAyC;IACzC,SAAS,IAAI,IAAI,CAAC;IAClB,yCAAyC;IACzC,SAAS,IAAI,IAAI,CAAC;IAClB,8BAA8B;IAC9B,cAAc,IAAI,IAAI,CAAC;IACvB,4BAA4B;IAC5B,cAAc,IAAI,IAAI,CAAC;IACvB,kCAAkC;IAClC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,QAAQ,CAAC,sBAAsB,CAAC,GACxC,eAAe,CAsOjB"}
@@ -1,292 +0,0 @@
1
- /**
2
- * ColorField state management.
3
- * Based on @react-stately/color useColorFieldState.
4
- */
5
-
6
- import { createSignal, createMemo, type Accessor } from 'solid-js';
7
- import type { Color, ColorChannel, ColorFormat } from './types';
8
- import { normalizeColor, parseColor } from './Color';
9
-
10
- export interface ColorFieldStateOptions {
11
- /** The current color value (controlled). */
12
- value?: Color | string | null;
13
- /** The default color value (uncontrolled). */
14
- defaultValue?: Color | string;
15
- /** Handler called when the color changes. */
16
- onChange?: (color: Color | null) => void;
17
- /** The color channel to edit (for single channel mode). */
18
- channel?: ColorChannel;
19
- /** The color format for parsing/displaying. */
20
- colorFormat?: ColorFormat;
21
- /** Whether the field is disabled. */
22
- isDisabled?: boolean;
23
- /** Whether the field is read-only. */
24
- isReadOnly?: boolean;
25
- }
26
-
27
- export interface ColorFieldState {
28
- /** The current color value (null if invalid). */
29
- readonly value: Color | null;
30
- /** The current input text. */
31
- readonly inputValue: string;
32
- /** Whether the input is invalid. */
33
- readonly isInvalid: boolean;
34
- /** Whether the field is disabled. */
35
- readonly isDisabled: boolean;
36
- /** Whether the field is read-only. */
37
- readonly isReadOnly: boolean;
38
- /** The color channel being edited (if single channel mode). */
39
- readonly channel: ColorChannel | undefined;
40
-
41
- /** Set the input text value. */
42
- setInputValue(value: string): void;
43
- /** Commit the current input value. */
44
- commit(): void;
45
- /** Increment the color channel value. */
46
- increment(): void;
47
- /** Decrement the color channel value. */
48
- decrement(): void;
49
- /** Increment by page size. */
50
- incrementToMax(): void;
51
- /** Decrement to minimum. */
52
- decrementToMin(): void;
53
- /** Validate the current input. */
54
- validate(): boolean;
55
- }
56
-
57
- /**
58
- * Creates state for a color field (text input for color values).
59
- */
60
- export function createColorFieldState(
61
- options: Accessor<ColorFieldStateOptions>
62
- ): ColorFieldState {
63
- const getOptions = () => options();
64
-
65
- // Internal value state
66
- const [internalValue, setInternalValue] = createSignal<Color | null>(null);
67
- const [inputValue, setInputValueInternal] = createSignal('');
68
- const [isInvalid, setIsInvalid] = createSignal(false);
69
-
70
- // Initialize internal value
71
- const initValue = () => {
72
- const opts = getOptions();
73
- if (opts.defaultValue) {
74
- const color = normalizeColor(opts.defaultValue);
75
- return color;
76
- }
77
- return null;
78
- };
79
-
80
- // Set initial value
81
- if (internalValue() === null) {
82
- const init = initValue();
83
- if (init) {
84
- setInternalValue(init);
85
- setInputValueInternal(formatColorValue(init, getOptions().channel, getOptions().colorFormat));
86
- }
87
- }
88
-
89
- // Controlled vs uncontrolled value
90
- const value = createMemo(() => {
91
- const opts = getOptions();
92
- if (opts.value !== undefined) {
93
- if (opts.value === null) return null;
94
- return normalizeColor(opts.value);
95
- }
96
- return internalValue();
97
- });
98
-
99
- const channel = createMemo(() => getOptions().channel);
100
- const isDisabled = createMemo(() => getOptions().isDisabled ?? false);
101
- const isReadOnly = createMemo(() => getOptions().isReadOnly ?? false);
102
-
103
- // Format color value for display
104
- function formatColorValue(
105
- color: Color | null,
106
- chan?: ColorChannel,
107
- format?: ColorFormat
108
- ): string {
109
- if (!color) return '';
110
-
111
- // Single channel mode
112
- if (chan) {
113
- return String(color.getChannelValue(chan));
114
- }
115
-
116
- // Full color mode
117
- return color.toString(format ?? 'hex');
118
- }
119
-
120
- // Update value
121
- const updateValue = (newColor: Color | null) => {
122
- const opts = getOptions();
123
-
124
- // Controlled mode
125
- if (opts.value !== undefined) {
126
- opts.onChange?.(newColor);
127
- return;
128
- }
129
-
130
- // Uncontrolled mode
131
- setInternalValue(newColor);
132
- opts.onChange?.(newColor);
133
- };
134
-
135
- // Set input value
136
- const setInputValue = (text: string) => {
137
- setInputValueInternal(text);
138
- setIsInvalid(false);
139
- };
140
-
141
- // Commit the input value
142
- const commit = () => {
143
- const text = inputValue().trim();
144
- const opts = getOptions();
145
- const chan = channel();
146
-
147
- if (!text) {
148
- updateValue(null);
149
- setIsInvalid(false);
150
- return;
151
- }
152
-
153
- try {
154
- let newColor: Color;
155
-
156
- if (chan) {
157
- // Single channel mode - parse as number and update channel
158
- const numValue = parseFloat(text);
159
- if (isNaN(numValue)) {
160
- setIsInvalid(true);
161
- return;
162
- }
163
-
164
- const currentColor = value();
165
- if (!currentColor) {
166
- setIsInvalid(true);
167
- return;
168
- }
169
-
170
- const range = currentColor.getChannelRange(chan);
171
- const clamped = Math.max(range.minValue, Math.min(range.maxValue, numValue));
172
- newColor = currentColor.withChannelValue(chan, clamped);
173
- } else {
174
- // Full color mode - parse the color string
175
- newColor = parseColor(text);
176
- if (opts.colorFormat) {
177
- newColor = newColor.toFormat(opts.colorFormat);
178
- }
179
- }
180
-
181
- updateValue(newColor);
182
- setInputValueInternal(formatColorValue(newColor, chan, opts.colorFormat));
183
- setIsInvalid(false);
184
- } catch {
185
- setIsInvalid(true);
186
- }
187
- };
188
-
189
- // Increment channel value
190
- const increment = () => {
191
- const chan = channel();
192
- const currentColor = value();
193
- if (!currentColor || !chan) return;
194
-
195
- const currentVal = currentColor.getChannelValue(chan);
196
- const range = currentColor.getChannelRange(chan);
197
- const newVal = Math.min(range.maxValue, currentVal + range.step);
198
- const newColor = currentColor.withChannelValue(chan, newVal);
199
-
200
- updateValue(newColor);
201
- setInputValueInternal(formatColorValue(newColor, chan, getOptions().colorFormat));
202
- };
203
-
204
- // Decrement channel value
205
- const decrement = () => {
206
- const chan = channel();
207
- const currentColor = value();
208
- if (!currentColor || !chan) return;
209
-
210
- const currentVal = currentColor.getChannelValue(chan);
211
- const range = currentColor.getChannelRange(chan);
212
- const newVal = Math.max(range.minValue, currentVal - range.step);
213
- const newColor = currentColor.withChannelValue(chan, newVal);
214
-
215
- updateValue(newColor);
216
- setInputValueInternal(formatColorValue(newColor, chan, getOptions().colorFormat));
217
- };
218
-
219
- // Increment to max
220
- const incrementToMax = () => {
221
- const chan = channel();
222
- const currentColor = value();
223
- if (!currentColor || !chan) return;
224
-
225
- const range = currentColor.getChannelRange(chan);
226
- const newColor = currentColor.withChannelValue(chan, range.maxValue);
227
-
228
- updateValue(newColor);
229
- setInputValueInternal(formatColorValue(newColor, chan, getOptions().colorFormat));
230
- };
231
-
232
- // Decrement to min
233
- const decrementToMin = () => {
234
- const chan = channel();
235
- const currentColor = value();
236
- if (!currentColor || !chan) return;
237
-
238
- const range = currentColor.getChannelRange(chan);
239
- const newColor = currentColor.withChannelValue(chan, range.minValue);
240
-
241
- updateValue(newColor);
242
- setInputValueInternal(formatColorValue(newColor, chan, getOptions().colorFormat));
243
- };
244
-
245
- // Validate input
246
- const validate = () => {
247
- const text = inputValue().trim();
248
- const chan = channel();
249
-
250
- if (!text) return true;
251
-
252
- try {
253
- if (chan) {
254
- const numValue = parseFloat(text);
255
- return !isNaN(numValue);
256
- } else {
257
- parseColor(text);
258
- return true;
259
- }
260
- } catch {
261
- return false;
262
- }
263
- };
264
-
265
- return {
266
- get value() {
267
- return value();
268
- },
269
- get inputValue() {
270
- return inputValue();
271
- },
272
- get isInvalid() {
273
- return isInvalid();
274
- },
275
- get isDisabled() {
276
- return isDisabled();
277
- },
278
- get isReadOnly() {
279
- return isReadOnly();
280
- },
281
- get channel() {
282
- return channel();
283
- },
284
- setInputValue,
285
- commit,
286
- increment,
287
- decrement,
288
- incrementToMax,
289
- decrementToMin,
290
- validate,
291
- };
292
- }
@@ -1 +0,0 @@
1
- {"version":3,"file":"createColorSliderState.d.ts","sourceRoot":"","sources":["createColorSliderState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAA4B,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGnD,MAAM,WAAW,uBAAuB;IACtC,4CAA4C;IAC5C,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC9B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,yCAAyC;IACzC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACrC,8CAA8C;IAC9C,OAAO,EAAE,YAAY,CAAC;IACtB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iCAAiC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAC7B,0CAA0C;IAC1C,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC;IAC/B,sCAAsC;IACtC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,yCAAyC;IACzC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAC;IAE7B,qCAAqC;IACrC,aAAa,IAAI,MAAM,CAAC;IACxB,+BAA+B;IAC/B,gBAAgB,IAAI,MAAM,CAAC;IAC3B,+BAA+B;IAC/B,gBAAgB,IAAI,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,eAAe,IAAI,MAAM,CAAC;IAC1B,6BAA6B;IAC7B,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,mDAAmD;IACnD,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,mCAAmC;IACnC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,mCAAmC;IACnC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,8BAA8B;IAC9B,WAAW,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI,CAAC;IACvC,8CAA8C;IAC9C,eAAe,IAAI,KAAK,CAAC;IACzB,qCAAqC;IACrC,kBAAkB,IAAI,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,QAAQ,CAAC,uBAAuB,CAAC,GACzC,gBAAgB,CAuKlB"}