@tenphi/tasty 0.0.0-snapshot.09c74e2

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 (243) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +539 -0
  3. package/dist/_virtual/_rolldown/runtime.js +8 -0
  4. package/dist/chunks/cacheKey.js +70 -0
  5. package/dist/chunks/cacheKey.js.map +1 -0
  6. package/dist/chunks/definitions.d.ts +37 -0
  7. package/dist/chunks/definitions.js +260 -0
  8. package/dist/chunks/definitions.js.map +1 -0
  9. package/dist/chunks/renderChunk.js +61 -0
  10. package/dist/chunks/renderChunk.js.map +1 -0
  11. package/dist/config.d.ts +280 -0
  12. package/dist/config.js +403 -0
  13. package/dist/config.js.map +1 -0
  14. package/dist/core/index.d.ts +33 -0
  15. package/dist/core/index.js +26 -0
  16. package/dist/debug.d.ts +204 -0
  17. package/dist/debug.js +733 -0
  18. package/dist/debug.js.map +1 -0
  19. package/dist/hooks/useGlobalStyles.d.ts +27 -0
  20. package/dist/hooks/useGlobalStyles.js +56 -0
  21. package/dist/hooks/useGlobalStyles.js.map +1 -0
  22. package/dist/hooks/useKeyframes.d.ts +56 -0
  23. package/dist/hooks/useKeyframes.js +54 -0
  24. package/dist/hooks/useKeyframes.js.map +1 -0
  25. package/dist/hooks/useProperty.d.ts +79 -0
  26. package/dist/hooks/useProperty.js +91 -0
  27. package/dist/hooks/useProperty.js.map +1 -0
  28. package/dist/hooks/useRawCSS.d.ts +53 -0
  29. package/dist/hooks/useRawCSS.js +28 -0
  30. package/dist/hooks/useRawCSS.js.map +1 -0
  31. package/dist/hooks/useStyles.d.ts +40 -0
  32. package/dist/hooks/useStyles.js +169 -0
  33. package/dist/hooks/useStyles.js.map +1 -0
  34. package/dist/index.d.ts +48 -0
  35. package/dist/index.js +33 -0
  36. package/dist/injector/index.d.ts +157 -0
  37. package/dist/injector/index.js +154 -0
  38. package/dist/injector/index.js.map +1 -0
  39. package/dist/injector/injector.d.ts +139 -0
  40. package/dist/injector/injector.js +404 -0
  41. package/dist/injector/injector.js.map +1 -0
  42. package/dist/injector/sheet-manager.d.ts +127 -0
  43. package/dist/injector/sheet-manager.js +714 -0
  44. package/dist/injector/sheet-manager.js.map +1 -0
  45. package/dist/injector/types.d.ts +135 -0
  46. package/dist/keyframes/index.js +206 -0
  47. package/dist/keyframes/index.js.map +1 -0
  48. package/dist/parser/classify.js +319 -0
  49. package/dist/parser/classify.js.map +1 -0
  50. package/dist/parser/const.js +33 -0
  51. package/dist/parser/const.js.map +1 -0
  52. package/dist/parser/lru.js +109 -0
  53. package/dist/parser/lru.js.map +1 -0
  54. package/dist/parser/parser.d.ts +25 -0
  55. package/dist/parser/parser.js +116 -0
  56. package/dist/parser/parser.js.map +1 -0
  57. package/dist/parser/tokenizer.js +69 -0
  58. package/dist/parser/tokenizer.js.map +1 -0
  59. package/dist/parser/types.d.ts +51 -0
  60. package/dist/parser/types.js +46 -0
  61. package/dist/parser/types.js.map +1 -0
  62. package/dist/pipeline/conditions.d.ts +134 -0
  63. package/dist/pipeline/conditions.js +406 -0
  64. package/dist/pipeline/conditions.js.map +1 -0
  65. package/dist/pipeline/exclusive.js +231 -0
  66. package/dist/pipeline/exclusive.js.map +1 -0
  67. package/dist/pipeline/index.d.ts +53 -0
  68. package/dist/pipeline/index.js +660 -0
  69. package/dist/pipeline/index.js.map +1 -0
  70. package/dist/pipeline/materialize.js +844 -0
  71. package/dist/pipeline/materialize.js.map +1 -0
  72. package/dist/pipeline/parseStateKey.d.ts +15 -0
  73. package/dist/pipeline/parseStateKey.js +438 -0
  74. package/dist/pipeline/parseStateKey.js.map +1 -0
  75. package/dist/pipeline/simplify.js +516 -0
  76. package/dist/pipeline/simplify.js.map +1 -0
  77. package/dist/pipeline/warnings.js +18 -0
  78. package/dist/pipeline/warnings.js.map +1 -0
  79. package/dist/plugins/okhsl-plugin.d.ts +35 -0
  80. package/dist/plugins/okhsl-plugin.js +371 -0
  81. package/dist/plugins/okhsl-plugin.js.map +1 -0
  82. package/dist/plugins/types.d.ts +69 -0
  83. package/dist/properties/index.js +158 -0
  84. package/dist/properties/index.js.map +1 -0
  85. package/dist/states/index.d.ts +49 -0
  86. package/dist/states/index.js +416 -0
  87. package/dist/states/index.js.map +1 -0
  88. package/dist/static/index.d.ts +5 -0
  89. package/dist/static/index.js +5 -0
  90. package/dist/static/tastyStatic.d.ts +46 -0
  91. package/dist/static/tastyStatic.js +31 -0
  92. package/dist/static/tastyStatic.js.map +1 -0
  93. package/dist/static/types.d.ts +49 -0
  94. package/dist/static/types.js +24 -0
  95. package/dist/static/types.js.map +1 -0
  96. package/dist/styles/align.d.ts +15 -0
  97. package/dist/styles/align.js +14 -0
  98. package/dist/styles/align.js.map +1 -0
  99. package/dist/styles/border.d.ts +25 -0
  100. package/dist/styles/border.js +114 -0
  101. package/dist/styles/border.js.map +1 -0
  102. package/dist/styles/color.d.ts +14 -0
  103. package/dist/styles/color.js +23 -0
  104. package/dist/styles/color.js.map +1 -0
  105. package/dist/styles/createStyle.js +77 -0
  106. package/dist/styles/createStyle.js.map +1 -0
  107. package/dist/styles/dimension.js +97 -0
  108. package/dist/styles/dimension.js.map +1 -0
  109. package/dist/styles/display.d.ts +37 -0
  110. package/dist/styles/display.js +67 -0
  111. package/dist/styles/display.js.map +1 -0
  112. package/dist/styles/fade.d.ts +15 -0
  113. package/dist/styles/fade.js +58 -0
  114. package/dist/styles/fade.js.map +1 -0
  115. package/dist/styles/fill.d.ts +42 -0
  116. package/dist/styles/fill.js +52 -0
  117. package/dist/styles/fill.js.map +1 -0
  118. package/dist/styles/flow.d.ts +16 -0
  119. package/dist/styles/flow.js +12 -0
  120. package/dist/styles/flow.js.map +1 -0
  121. package/dist/styles/gap.d.ts +31 -0
  122. package/dist/styles/gap.js +37 -0
  123. package/dist/styles/gap.js.map +1 -0
  124. package/dist/styles/height.d.ts +17 -0
  125. package/dist/styles/height.js +20 -0
  126. package/dist/styles/height.js.map +1 -0
  127. package/dist/styles/index.d.ts +2 -0
  128. package/dist/styles/index.js +9 -0
  129. package/dist/styles/index.js.map +1 -0
  130. package/dist/styles/inset.d.ts +52 -0
  131. package/dist/styles/inset.js +150 -0
  132. package/dist/styles/inset.js.map +1 -0
  133. package/dist/styles/justify.d.ts +15 -0
  134. package/dist/styles/justify.js +14 -0
  135. package/dist/styles/justify.js.map +1 -0
  136. package/dist/styles/list.d.ts +16 -0
  137. package/dist/styles/list.js +98 -0
  138. package/dist/styles/list.js.map +1 -0
  139. package/dist/styles/margin.d.ts +24 -0
  140. package/dist/styles/margin.js +104 -0
  141. package/dist/styles/margin.js.map +1 -0
  142. package/dist/styles/outline.d.ts +29 -0
  143. package/dist/styles/outline.js +65 -0
  144. package/dist/styles/outline.js.map +1 -0
  145. package/dist/styles/padding.d.ts +24 -0
  146. package/dist/styles/padding.js +104 -0
  147. package/dist/styles/padding.js.map +1 -0
  148. package/dist/styles/predefined.d.ts +73 -0
  149. package/dist/styles/predefined.js +241 -0
  150. package/dist/styles/predefined.js.map +1 -0
  151. package/dist/styles/preset.d.ts +47 -0
  152. package/dist/styles/preset.js +126 -0
  153. package/dist/styles/preset.js.map +1 -0
  154. package/dist/styles/radius.d.ts +14 -0
  155. package/dist/styles/radius.js +51 -0
  156. package/dist/styles/radius.js.map +1 -0
  157. package/dist/styles/scrollbar.d.ts +21 -0
  158. package/dist/styles/scrollbar.js +112 -0
  159. package/dist/styles/scrollbar.js.map +1 -0
  160. package/dist/styles/shadow.d.ts +14 -0
  161. package/dist/styles/shadow.js +24 -0
  162. package/dist/styles/shadow.js.map +1 -0
  163. package/dist/styles/styledScrollbar.d.ts +47 -0
  164. package/dist/styles/styledScrollbar.js +38 -0
  165. package/dist/styles/styledScrollbar.js.map +1 -0
  166. package/dist/styles/transition.d.ts +14 -0
  167. package/dist/styles/transition.js +158 -0
  168. package/dist/styles/transition.js.map +1 -0
  169. package/dist/styles/types.d.ts +498 -0
  170. package/dist/styles/width.d.ts +17 -0
  171. package/dist/styles/width.js +20 -0
  172. package/dist/styles/width.js.map +1 -0
  173. package/dist/tasty.d.ts +982 -0
  174. package/dist/tasty.js +206 -0
  175. package/dist/tasty.js.map +1 -0
  176. package/dist/tokens/typography.d.ts +19 -0
  177. package/dist/tokens/typography.js +237 -0
  178. package/dist/tokens/typography.js.map +1 -0
  179. package/dist/types.d.ts +184 -0
  180. package/dist/utils/cache-wrapper.js +26 -0
  181. package/dist/utils/cache-wrapper.js.map +1 -0
  182. package/dist/utils/case-converter.js +8 -0
  183. package/dist/utils/case-converter.js.map +1 -0
  184. package/dist/utils/colors.d.ts +5 -0
  185. package/dist/utils/colors.js +9 -0
  186. package/dist/utils/colors.js.map +1 -0
  187. package/dist/utils/css-types.d.ts +7 -0
  188. package/dist/utils/dotize.d.ts +26 -0
  189. package/dist/utils/dotize.js +122 -0
  190. package/dist/utils/dotize.js.map +1 -0
  191. package/dist/utils/filter-base-props.d.ts +15 -0
  192. package/dist/utils/filter-base-props.js +45 -0
  193. package/dist/utils/filter-base-props.js.map +1 -0
  194. package/dist/utils/get-display-name.d.ts +7 -0
  195. package/dist/utils/get-display-name.js +10 -0
  196. package/dist/utils/get-display-name.js.map +1 -0
  197. package/dist/utils/hsl-to-rgb.js +38 -0
  198. package/dist/utils/hsl-to-rgb.js.map +1 -0
  199. package/dist/utils/is-dev-env.js +19 -0
  200. package/dist/utils/is-dev-env.js.map +1 -0
  201. package/dist/utils/is-valid-element-type.js +15 -0
  202. package/dist/utils/is-valid-element-type.js.map +1 -0
  203. package/dist/utils/merge-styles.d.ts +7 -0
  204. package/dist/utils/merge-styles.js +146 -0
  205. package/dist/utils/merge-styles.js.map +1 -0
  206. package/dist/utils/mod-attrs.d.ts +8 -0
  207. package/dist/utils/mod-attrs.js +21 -0
  208. package/dist/utils/mod-attrs.js.map +1 -0
  209. package/dist/utils/okhsl-to-rgb.js +296 -0
  210. package/dist/utils/okhsl-to-rgb.js.map +1 -0
  211. package/dist/utils/process-tokens.d.ts +31 -0
  212. package/dist/utils/process-tokens.js +171 -0
  213. package/dist/utils/process-tokens.js.map +1 -0
  214. package/dist/utils/resolve-recipes.d.ts +17 -0
  215. package/dist/utils/resolve-recipes.js +147 -0
  216. package/dist/utils/resolve-recipes.js.map +1 -0
  217. package/dist/utils/string.js +8 -0
  218. package/dist/utils/string.js.map +1 -0
  219. package/dist/utils/styles.d.ts +178 -0
  220. package/dist/utils/styles.js +590 -0
  221. package/dist/utils/styles.js.map +1 -0
  222. package/dist/utils/typography.d.ts +36 -0
  223. package/dist/utils/typography.js +53 -0
  224. package/dist/utils/typography.js.map +1 -0
  225. package/dist/utils/warnings.d.ts +16 -0
  226. package/dist/utils/warnings.js +16 -0
  227. package/dist/utils/warnings.js.map +1 -0
  228. package/dist/zero/babel.d.ts +108 -0
  229. package/dist/zero/babel.js +282 -0
  230. package/dist/zero/babel.js.map +1 -0
  231. package/dist/zero/css-writer.d.ts +45 -0
  232. package/dist/zero/css-writer.js +74 -0
  233. package/dist/zero/css-writer.js.map +1 -0
  234. package/dist/zero/extractor.d.ts +24 -0
  235. package/dist/zero/extractor.js +150 -0
  236. package/dist/zero/extractor.js.map +1 -0
  237. package/dist/zero/index.d.ts +3 -0
  238. package/dist/zero/index.js +4 -0
  239. package/dist/zero/next.d.ts +60 -0
  240. package/dist/zero/next.js +78 -0
  241. package/dist/zero/next.js.map +1 -0
  242. package/package.json +189 -0
  243. package/tasty.config.ts +14 -0
@@ -0,0 +1,150 @@
1
+ import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
2
+
3
+ //#region src/styles/inset.ts
4
+ /**
5
+ * Parse an inset value and return the first processed value
6
+ */
7
+ function parseInsetValue(value) {
8
+ if (typeof value === "number") return `${value}px`;
9
+ if (!value) return null;
10
+ if (value === true) value = "0";
11
+ const { values } = parseStyle(value).groups[0] ?? { values: [] };
12
+ return values[0] || "0";
13
+ }
14
+ /**
15
+ * Extract values and directions from a single parsed group.
16
+ */
17
+ function extractGroupData(group) {
18
+ const { values = [], mods = [] } = group;
19
+ return {
20
+ values: values.length ? values : ["0"],
21
+ directions: filterMods(mods, DIRECTIONS)
22
+ };
23
+ }
24
+ /**
25
+ * Apply a single group's values and directions onto a direction map.
26
+ */
27
+ function applyGroup(dirs, values, directions) {
28
+ if (!values.length) return;
29
+ if (directions.length === 0) {
30
+ dirs.top = values[0];
31
+ dirs.right = values[1] || values[0];
32
+ dirs.bottom = values[2] || values[0];
33
+ dirs.left = values[3] || values[1] || values[0];
34
+ } else directions.forEach((dir, i) => {
35
+ dirs[dir] = values[i] ?? values[0];
36
+ });
37
+ }
38
+ /**
39
+ * Optimize inset output shorthand.
40
+ */
41
+ function optimizeInset(dirs) {
42
+ const { top, right, bottom, left } = dirs;
43
+ if (top === right && right === bottom && bottom === left) return { inset: top };
44
+ if (top === bottom && left === right) return { inset: `${top} ${left}` };
45
+ return { inset: `${top} ${right} ${bottom} ${left}` };
46
+ }
47
+ /**
48
+ * Inset style handler.
49
+ *
50
+ * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)
51
+ * when only individual direction props are specified. This allows CSS cascade to work
52
+ * correctly when modifiers override only some directions.
53
+ *
54
+ * Example problem with using `inset` shorthand everywhere:
55
+ * styles: {
56
+ * top: { '': 0, 'side=bottom': 'initial' },
57
+ * right: { '': 0, 'side=left': 'initial' },
58
+ * bottom: { '': 0, 'side=top': 'initial' },
59
+ * left: { '': 0, 'side=right': 'initial' },
60
+ * }
61
+ *
62
+ * If we output `inset` for both cases:
63
+ * - Default: inset: 0 0 0 0
64
+ * - side=bottom: inset: initial auto auto auto ← WRONG! Overrides all 4 directions
65
+ *
66
+ * With individual properties:
67
+ * - Default: top: 0; right: 0; bottom: 0; left: 0
68
+ * - side=bottom: top: initial ← CORRECT! Only overrides top
69
+ *
70
+ * The `inset` shorthand is only used when the base `inset` prop is specified
71
+ * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).
72
+ */
73
+ function insetStyle({ inset, insetBlock, insetInline, top, right, bottom, left }) {
74
+ if (inset == null && insetBlock == null && insetInline == null && top == null && right == null && bottom == null && left == null) return {};
75
+ if (inset == null && insetBlock == null && insetInline == null) {
76
+ const result = {};
77
+ if (top != null) {
78
+ const val = parseInsetValue(top);
79
+ if (val) result["top"] = val;
80
+ }
81
+ if (right != null) {
82
+ const val = parseInsetValue(right);
83
+ if (val) result["right"] = val;
84
+ }
85
+ if (bottom != null) {
86
+ const val = parseInsetValue(bottom);
87
+ if (val) result["bottom"] = val;
88
+ }
89
+ if (left != null) {
90
+ const val = parseInsetValue(left);
91
+ if (val) result["left"] = val;
92
+ }
93
+ return result;
94
+ }
95
+ const dirs = {
96
+ top: "auto",
97
+ right: "auto",
98
+ bottom: "auto",
99
+ left: "auto"
100
+ };
101
+ if (inset != null) {
102
+ if (typeof inset === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${inset}px`;
103
+ else if (inset === true) inset = "0";
104
+ if (typeof inset === "string" && inset) {
105
+ const groups = parseStyle(inset).groups ?? [];
106
+ for (const group of groups) {
107
+ const { values, directions } = extractGroupData(group);
108
+ applyGroup(dirs, values, directions);
109
+ }
110
+ }
111
+ }
112
+ if (insetBlock != null) {
113
+ const val = parseInsetValue(insetBlock);
114
+ if (val) dirs.top = dirs.bottom = val;
115
+ }
116
+ if (insetInline != null) {
117
+ const val = parseInsetValue(insetInline);
118
+ if (val) dirs.left = dirs.right = val;
119
+ }
120
+ if (top != null) {
121
+ const val = parseInsetValue(top);
122
+ if (val) dirs.top = val;
123
+ }
124
+ if (right != null) {
125
+ const val = parseInsetValue(right);
126
+ if (val) dirs.right = val;
127
+ }
128
+ if (bottom != null) {
129
+ const val = parseInsetValue(bottom);
130
+ if (val) dirs.bottom = val;
131
+ }
132
+ if (left != null) {
133
+ const val = parseInsetValue(left);
134
+ if (val) dirs.left = val;
135
+ }
136
+ return optimizeInset(dirs);
137
+ }
138
+ insetStyle.__lookupStyles = [
139
+ "inset",
140
+ "insetBlock",
141
+ "insetInline",
142
+ "top",
143
+ "right",
144
+ "bottom",
145
+ "left"
146
+ ];
147
+
148
+ //#endregion
149
+ export { insetStyle };
150
+ //# sourceMappingURL=inset.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"inset.js","names":[],"sources":["../../src/styles/inset.ts"],"sourcesContent":["import type { StyleDetails } from '../parser/types';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\n/**\n * Parse an inset value and return the first processed value\n */\nfunction parseInsetValue(value: string | number | boolean): string | null {\n if (typeof value === 'number') return `${value}px`;\n if (!value) return null;\n if (value === true) value = '0';\n\n const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n return values[0] || '0';\n}\n\n/**\n * Extract values and directions from a single parsed group.\n */\nfunction extractGroupData(group: StyleDetails): {\n values: string[];\n directions: Direction[];\n} {\n const { values = [], mods = [] } = group;\n return {\n values: values.length ? values : ['0'],\n directions: filterMods(mods, DIRECTIONS) as Direction[],\n };\n}\n\n/**\n * Apply a single group's values and directions onto a direction map.\n */\nfunction applyGroup(\n dirs: Record<Direction, string>,\n values: string[],\n directions: Direction[],\n): void {\n if (!values.length) return;\n\n if (directions.length === 0) {\n dirs.top = values[0];\n dirs.right = values[1] || values[0];\n dirs.bottom = values[2] || values[0];\n dirs.left = values[3] || values[1] || values[0];\n } else {\n directions.forEach((dir, i) => {\n dirs[dir] = values[i] ?? values[0];\n });\n }\n}\n\n/**\n * Optimize inset output shorthand.\n */\nfunction optimizeInset(dirs: Record<Direction, string>): { inset: string } {\n const { top, right, bottom, left } = dirs;\n if (top === right && right === bottom && bottom === left) {\n return { inset: top };\n }\n if (top === bottom && left === right) {\n return { inset: `${top} ${left}` };\n }\n return { inset: `${top} ${right} ${bottom} ${left}` };\n}\n\n/**\n * Inset style handler.\n *\n * IMPORTANT: This handler uses individual CSS properties (top, right, bottom, left)\n * when only individual direction props are specified. This allows CSS cascade to work\n * correctly when modifiers override only some directions.\n *\n * Example problem with using `inset` shorthand everywhere:\n * styles: {\n * top: { '': 0, 'side=bottom': 'initial' },\n * right: { '': 0, 'side=left': 'initial' },\n * bottom: { '': 0, 'side=top': 'initial' },\n * left: { '': 0, 'side=right': 'initial' },\n * }\n *\n * If we output `inset` for both cases:\n * - Default: inset: 0 0 0 0\n * - side=bottom: inset: initial auto auto auto ← WRONG! Overrides all 4 directions\n *\n * With individual properties:\n * - Default: top: 0; right: 0; bottom: 0; left: 0\n * - side=bottom: top: initial ← CORRECT! Only overrides top\n *\n * The `inset` shorthand is only used when the base `inset` prop is specified\n * OR when `insetBlock`/`insetInline` are used (which imply setting pairs).\n */\nexport function insetStyle({\n inset,\n insetBlock,\n insetInline,\n top,\n right,\n bottom,\n left,\n}: {\n inset?: string | number | boolean;\n insetBlock?: string | number | boolean;\n insetInline?: string | number | boolean;\n top?: string | number | boolean;\n right?: string | number | boolean;\n bottom?: string | number | boolean;\n left?: string | number | boolean;\n}) {\n if (\n inset == null &&\n insetBlock == null &&\n insetInline == null &&\n top == null &&\n right == null &&\n bottom == null &&\n left == null\n ) {\n return {};\n }\n\n // When only individual direction props are used (no inset, insetBlock, insetInline),\n // output individual CSS properties to allow proper CSS cascade with modifiers\n const onlyIndividualProps =\n inset == null && insetBlock == null && insetInline == null;\n\n if (onlyIndividualProps) {\n const result: Record<string, string> = {};\n\n if (top != null) {\n const val = parseInsetValue(top);\n if (val) result['top'] = val;\n }\n if (right != null) {\n const val = parseInsetValue(right);\n if (val) result['right'] = val;\n }\n if (bottom != null) {\n const val = parseInsetValue(bottom);\n if (val) result['bottom'] = val;\n }\n if (left != null) {\n const val = parseInsetValue(left);\n if (val) result['left'] = val;\n }\n\n return result;\n }\n\n const dirs: Record<Direction, string> = {\n top: 'auto',\n right: 'auto',\n bottom: 'auto',\n left: 'auto',\n };\n\n // Priority 1 (lowest): inset\n if (inset != null) {\n if (typeof inset === 'number') {\n const v = `${inset}px`;\n dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n } else if (inset === true) {\n inset = '0';\n }\n\n if (typeof inset === 'string' && inset) {\n const processed = parseStyle(inset);\n const groups = processed.groups ?? [];\n\n for (const group of groups) {\n const { values, directions } = extractGroupData(group);\n applyGroup(dirs, values, directions);\n }\n }\n }\n\n // Priority 2 (medium): insetBlock/insetInline\n if (insetBlock != null) {\n const val = parseInsetValue(insetBlock);\n if (val) dirs.top = dirs.bottom = val;\n }\n if (insetInline != null) {\n const val = parseInsetValue(insetInline);\n if (val) dirs.left = dirs.right = val;\n }\n\n // Priority 3 (highest): individual directions\n if (top != null) {\n const val = parseInsetValue(top);\n if (val) dirs.top = val;\n }\n if (right != null) {\n const val = parseInsetValue(right);\n if (val) dirs.right = val;\n }\n if (bottom != null) {\n const val = parseInsetValue(bottom);\n if (val) dirs.bottom = val;\n }\n if (left != null) {\n const val = parseInsetValue(left);\n if (val) dirs.left = val;\n }\n\n return optimizeInset(dirs);\n}\n\ninsetStyle.__lookupStyles = [\n 'inset',\n 'insetBlock',\n 'insetInline',\n 'top',\n 'right',\n 'bottom',\n 'left',\n];\n"],"mappings":"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"}
@@ -0,0 +1,15 @@
1
+ //#region src/styles/justify.d.ts
2
+ declare function justifyStyle({
3
+ justify
4
+ }: {
5
+ justify?: string;
6
+ }): {
7
+ 'justify-items': string;
8
+ 'justify-content': string;
9
+ } | undefined;
10
+ declare namespace justifyStyle {
11
+ var __lookupStyles: string[];
12
+ }
13
+ //#endregion
14
+ export { justifyStyle };
15
+ //# sourceMappingURL=justify.d.ts.map
@@ -0,0 +1,14 @@
1
+ //#region src/styles/justify.ts
2
+ function justifyStyle({ justify }) {
3
+ if (typeof justify !== "string") return;
4
+ if (!justify) return;
5
+ return {
6
+ "justify-items": justify,
7
+ "justify-content": justify
8
+ };
9
+ }
10
+ justifyStyle.__lookupStyles = ["justify"];
11
+
12
+ //#endregion
13
+ export { justifyStyle };
14
+ //# sourceMappingURL=justify.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"justify.js","names":[],"sources":["../../src/styles/justify.ts"],"sourcesContent":["export function justifyStyle({ justify }: { justify?: string }) {\n if (typeof justify !== 'string') return;\n\n if (!justify) return;\n\n return {\n 'justify-items': justify,\n 'justify-content': justify,\n };\n}\n\njustifyStyle.__lookupStyles = ['justify'];\n"],"mappings":";AAAA,SAAgB,aAAa,EAAE,WAAiC;AAC9D,KAAI,OAAO,YAAY,SAAU;AAEjC,KAAI,CAAC,QAAS;AAEd,QAAO;EACL,iBAAiB;EACjB,mBAAmB;EACpB;;AAGH,aAAa,iBAAiB,CAAC,UAAU"}
@@ -0,0 +1,16 @@
1
+ //#region src/styles/list.d.ts
2
+ declare const BASE_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition"];
3
+ declare const POSITION_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position"];
4
+ declare const BLOCK_INNER_STYLES: readonly ["padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign"];
5
+ declare const BLOCK_OUTER_STYLES: readonly ["border", "radius", "shadow", "outline"];
6
+ declare const BLOCK_STYLES: readonly ["padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline"];
7
+ declare const COLOR_STYLES: readonly ["color", "fill", "fade", "image"];
8
+ declare const TEXT_STYLES: readonly ["textTransform", "fontWeight", "fontStyle"];
9
+ declare const DIMENSION_STYLES: readonly ["width", "height", "flexBasis", "flexGrow", "flexShrink", "flex"];
10
+ declare const FLOW_STYLES: readonly ["flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
11
+ declare const CONTAINER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "border", "radius", "shadow", "outline", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
12
+ declare const OUTER_STYLES: readonly ["gridArea", "order", "gridColumn", "gridRow", "placeSelf", "alignSelf", "justifySelf", "zIndex", "margin", "inset", "position", "width", "height", "flexBasis", "flexGrow", "flexShrink", "flex", "border", "radius", "shadow", "outline"];
13
+ declare const INNER_STYLES: readonly ["display", "font", "preset", "hide", "whiteSpace", "opacity", "transition", "color", "fill", "fade", "image", "padding", "paddingInline", "paddingBlock", "overflow", "scrollbar", "textAlign", "flow", "placeItems", "placeContent", "alignItems", "alignContent", "justifyItems", "justifyContent", "align", "justify", "gap", "columnGap", "rowGap", "gridColumns", "gridRows", "gridTemplate", "gridAreas"];
14
+ //#endregion
15
+ export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES };
16
+ //# sourceMappingURL=list.d.ts.map
@@ -0,0 +1,98 @@
1
+ //#region src/styles/list.ts
2
+ const BASE_STYLES = [
3
+ "display",
4
+ "font",
5
+ "preset",
6
+ "hide",
7
+ "whiteSpace",
8
+ "opacity",
9
+ "transition"
10
+ ];
11
+ const POSITION_STYLES = [
12
+ "gridArea",
13
+ "order",
14
+ "gridColumn",
15
+ "gridRow",
16
+ "placeSelf",
17
+ "alignSelf",
18
+ "justifySelf",
19
+ "zIndex",
20
+ "margin",
21
+ "inset",
22
+ "position"
23
+ ];
24
+ const BLOCK_INNER_STYLES = [
25
+ "padding",
26
+ "paddingInline",
27
+ "paddingBlock",
28
+ "overflow",
29
+ "scrollbar",
30
+ "textAlign"
31
+ ];
32
+ const BLOCK_OUTER_STYLES = [
33
+ "border",
34
+ "radius",
35
+ "shadow",
36
+ "outline"
37
+ ];
38
+ const BLOCK_STYLES = [...BLOCK_INNER_STYLES, ...BLOCK_OUTER_STYLES];
39
+ const COLOR_STYLES = [
40
+ "color",
41
+ "fill",
42
+ "fade",
43
+ "image"
44
+ ];
45
+ const TEXT_STYLES = [
46
+ "textTransform",
47
+ "fontWeight",
48
+ "fontStyle"
49
+ ];
50
+ const DIMENSION_STYLES = [
51
+ "width",
52
+ "height",
53
+ "flexBasis",
54
+ "flexGrow",
55
+ "flexShrink",
56
+ "flex"
57
+ ];
58
+ const FLOW_STYLES = [
59
+ "flow",
60
+ "placeItems",
61
+ "placeContent",
62
+ "alignItems",
63
+ "alignContent",
64
+ "justifyItems",
65
+ "justifyContent",
66
+ "align",
67
+ "justify",
68
+ "gap",
69
+ "columnGap",
70
+ "rowGap",
71
+ "gridColumns",
72
+ "gridRows",
73
+ "gridTemplate",
74
+ "gridAreas"
75
+ ];
76
+ const CONTAINER_STYLES = [
77
+ ...BASE_STYLES,
78
+ ...COLOR_STYLES,
79
+ ...DIMENSION_STYLES,
80
+ ...POSITION_STYLES,
81
+ ...BLOCK_STYLES,
82
+ ...FLOW_STYLES
83
+ ];
84
+ const OUTER_STYLES = [
85
+ ...POSITION_STYLES,
86
+ ...DIMENSION_STYLES,
87
+ ...BLOCK_OUTER_STYLES
88
+ ];
89
+ const INNER_STYLES = [
90
+ ...BASE_STYLES,
91
+ ...COLOR_STYLES,
92
+ ...BLOCK_INNER_STYLES,
93
+ ...FLOW_STYLES
94
+ ];
95
+
96
+ //#endregion
97
+ export { BASE_STYLES, BLOCK_INNER_STYLES, BLOCK_OUTER_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, INNER_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES };
98
+ //# sourceMappingURL=list.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"list.js","names":[],"sources":["../../src/styles/list.ts"],"sourcesContent":["export const BASE_STYLES = [\n 'display',\n 'font',\n 'preset',\n 'hide',\n 'whiteSpace',\n 'opacity',\n 'transition',\n] as const;\n\nexport const POSITION_STYLES = [\n 'gridArea',\n 'order',\n 'gridColumn',\n 'gridRow',\n 'placeSelf',\n 'alignSelf',\n 'justifySelf',\n 'zIndex',\n 'margin',\n 'inset',\n 'position',\n] as const;\n\nexport const BLOCK_INNER_STYLES = [\n 'padding',\n 'paddingInline',\n 'paddingBlock',\n 'overflow',\n 'scrollbar',\n 'textAlign',\n] as const;\n\nexport const BLOCK_OUTER_STYLES = [\n 'border',\n 'radius',\n 'shadow',\n 'outline',\n] as const;\n\nexport const BLOCK_STYLES = [\n ...BLOCK_INNER_STYLES,\n ...BLOCK_OUTER_STYLES,\n] as const;\n\nexport const COLOR_STYLES = ['color', 'fill', 'fade', 'image'] as const;\n\nexport const TEXT_STYLES = [\n 'textTransform',\n 'fontWeight',\n 'fontStyle',\n] as const;\n\nexport const DIMENSION_STYLES = [\n 'width',\n 'height',\n 'flexBasis',\n 'flexGrow',\n 'flexShrink',\n 'flex',\n] as const;\n\nexport const FLOW_STYLES = [\n 'flow',\n 'placeItems',\n 'placeContent',\n 'alignItems',\n 'alignContent',\n 'justifyItems',\n 'justifyContent',\n 'align',\n 'justify',\n 'gap',\n 'columnGap',\n 'rowGap',\n 'gridColumns',\n 'gridRows',\n 'gridTemplate',\n 'gridAreas',\n] as const;\n\nexport const CONTAINER_STYLES = [\n ...BASE_STYLES,\n ...COLOR_STYLES,\n ...DIMENSION_STYLES,\n ...POSITION_STYLES,\n ...BLOCK_STYLES,\n ...FLOW_STYLES,\n] as const;\n\nexport const OUTER_STYLES = [\n ...POSITION_STYLES,\n ...DIMENSION_STYLES,\n ...BLOCK_OUTER_STYLES,\n] as const;\n\nexport const INNER_STYLES = [\n ...BASE_STYLES,\n ...COLOR_STYLES,\n ...BLOCK_INNER_STYLES,\n ...FLOW_STYLES,\n] as const;\n"],"mappings":";AAAA,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,kBAAkB;CAC7B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB;CAChC;CACA;CACA;CACA;CACD;AAED,MAAa,eAAe,CAC1B,GAAG,oBACH,GAAG,mBACJ;AAED,MAAa,eAAe;CAAC;CAAS;CAAQ;CAAQ;CAAQ;AAE9D,MAAa,cAAc;CACzB;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,cAAc;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,mBAAmB;CAC9B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAa,eAAe;CAC1B,GAAG;CACH,GAAG;CACH,GAAG;CACJ;AAED,MAAa,eAAe;CAC1B,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ"}
@@ -0,0 +1,24 @@
1
+ //#region src/styles/margin.d.ts
2
+ declare function marginStyle({
3
+ margin,
4
+ marginBlock,
5
+ marginInline,
6
+ marginTop,
7
+ marginRight,
8
+ marginBottom,
9
+ marginLeft
10
+ }: {
11
+ margin?: string | number | boolean;
12
+ marginBlock?: string | number | boolean;
13
+ marginInline?: string | number | boolean;
14
+ marginTop?: string | number | boolean;
15
+ marginRight?: string | number | boolean;
16
+ marginBottom?: string | number | boolean;
17
+ marginLeft?: string | number | boolean;
18
+ }): {};
19
+ declare namespace marginStyle {
20
+ var __lookupStyles: string[];
21
+ }
22
+ //#endregion
23
+ export { marginStyle };
24
+ //# sourceMappingURL=margin.d.ts.map
@@ -0,0 +1,104 @@
1
+ import { DIRECTIONS, filterMods, parseStyle } from "../utils/styles.js";
2
+
3
+ //#region src/styles/margin.ts
4
+ /**
5
+ * Parse a margin value and return the first processed value
6
+ */
7
+ function parseMarginValue(value) {
8
+ if (typeof value === "number") return `${value}px`;
9
+ if (!value) return null;
10
+ if (value === true) value = "1x";
11
+ const { values } = parseStyle(value).groups[0] ?? { values: [] };
12
+ return values[0] || "var(--gap)";
13
+ }
14
+ /**
15
+ * Extract values and directions from a single parsed group.
16
+ */
17
+ function extractGroupData(group) {
18
+ const { values = [], mods = [] } = group;
19
+ return {
20
+ values: values.length ? values : ["var(--gap)"],
21
+ directions: filterMods(mods, DIRECTIONS)
22
+ };
23
+ }
24
+ /**
25
+ * Apply a single group's values and directions onto a direction map.
26
+ */
27
+ function applyGroup(dirs, values, directions) {
28
+ if (!values.length) return;
29
+ if (directions.length === 0) {
30
+ dirs.top = values[0];
31
+ dirs.right = values[1] || values[0];
32
+ dirs.bottom = values[2] || values[0];
33
+ dirs.left = values[3] || values[1] || values[0];
34
+ } else directions.forEach((dir, i) => {
35
+ dirs[dir] = values[i] ?? values[0];
36
+ });
37
+ }
38
+ /**
39
+ * Optimize margin output shorthand.
40
+ */
41
+ function optimizeMargin(dirs) {
42
+ const { top, right, bottom, left } = dirs;
43
+ if (top === right && right === bottom && bottom === left) return { margin: top };
44
+ if (top === bottom && left === right) return { margin: `${top} ${left}` };
45
+ return { margin: `${top} ${right} ${bottom} ${left}` };
46
+ }
47
+ function marginStyle({ margin, marginBlock, marginInline, marginTop, marginRight, marginBottom, marginLeft }) {
48
+ if (margin == null && marginBlock == null && marginInline == null && marginTop == null && marginRight == null && marginBottom == null && marginLeft == null) return {};
49
+ const dirs = {
50
+ top: "0",
51
+ right: "0",
52
+ bottom: "0",
53
+ left: "0"
54
+ };
55
+ if (margin != null) {
56
+ if (typeof margin === "number") dirs.top = dirs.right = dirs.bottom = dirs.left = `${margin}px`;
57
+ else if (margin === true) margin = "1x";
58
+ if (typeof margin === "string" && margin) {
59
+ const groups = parseStyle(margin).groups ?? [];
60
+ for (const group of groups) {
61
+ const { values, directions } = extractGroupData(group);
62
+ applyGroup(dirs, values, directions);
63
+ }
64
+ }
65
+ }
66
+ if (marginBlock != null) {
67
+ const val = parseMarginValue(marginBlock);
68
+ if (val) dirs.top = dirs.bottom = val;
69
+ }
70
+ if (marginInline != null) {
71
+ const val = parseMarginValue(marginInline);
72
+ if (val) dirs.left = dirs.right = val;
73
+ }
74
+ if (marginTop != null) {
75
+ const val = parseMarginValue(marginTop);
76
+ if (val) dirs.top = val;
77
+ }
78
+ if (marginRight != null) {
79
+ const val = parseMarginValue(marginRight);
80
+ if (val) dirs.right = val;
81
+ }
82
+ if (marginBottom != null) {
83
+ const val = parseMarginValue(marginBottom);
84
+ if (val) dirs.bottom = val;
85
+ }
86
+ if (marginLeft != null) {
87
+ const val = parseMarginValue(marginLeft);
88
+ if (val) dirs.left = val;
89
+ }
90
+ return optimizeMargin(dirs);
91
+ }
92
+ marginStyle.__lookupStyles = [
93
+ "margin",
94
+ "marginTop",
95
+ "marginRight",
96
+ "marginBottom",
97
+ "marginLeft",
98
+ "marginBlock",
99
+ "marginInline"
100
+ ];
101
+
102
+ //#endregion
103
+ export { marginStyle };
104
+ //# sourceMappingURL=margin.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"margin.js","names":[],"sources":["../../src/styles/margin.ts"],"sourcesContent":["import type { StyleDetails } from '../parser/types';\nimport { DIRECTIONS, filterMods, parseStyle } from '../utils/styles';\n\ntype Direction = (typeof DIRECTIONS)[number];\n\n/**\n * Parse a margin value and return the first processed value\n */\nfunction parseMarginValue(value: string | number | boolean): string | null {\n if (typeof value === 'number') return `${value}px`;\n if (!value) return null;\n if (value === true) value = '1x';\n\n const { values } = parseStyle(value).groups[0] ?? { values: [] };\n\n return values[0] || 'var(--gap)';\n}\n\n/**\n * Extract values and directions from a single parsed group.\n */\nfunction extractGroupData(group: StyleDetails): {\n values: string[];\n directions: Direction[];\n} {\n const { values = [], mods = [] } = group;\n return {\n values: values.length ? values : ['var(--gap)'],\n directions: filterMods(mods, DIRECTIONS) as Direction[],\n };\n}\n\n/**\n * Apply a single group's values and directions onto a direction map.\n */\nfunction applyGroup(\n dirs: Record<Direction, string>,\n values: string[],\n directions: Direction[],\n): void {\n if (!values.length) return;\n\n if (directions.length === 0) {\n dirs.top = values[0];\n dirs.right = values[1] || values[0];\n dirs.bottom = values[2] || values[0];\n dirs.left = values[3] || values[1] || values[0];\n } else {\n directions.forEach((dir, i) => {\n dirs[dir] = values[i] ?? values[0];\n });\n }\n}\n\n/**\n * Optimize margin output shorthand.\n */\nfunction optimizeMargin(dirs: Record<Direction, string>): {\n margin: string;\n} {\n const { top, right, bottom, left } = dirs;\n if (top === right && right === bottom && bottom === left) {\n return { margin: top };\n }\n if (top === bottom && left === right) {\n return { margin: `${top} ${left}` };\n }\n return { margin: `${top} ${right} ${bottom} ${left}` };\n}\n\nexport function marginStyle({\n margin,\n marginBlock,\n marginInline,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n}: {\n margin?: string | number | boolean;\n marginBlock?: string | number | boolean;\n marginInline?: string | number | boolean;\n marginTop?: string | number | boolean;\n marginRight?: string | number | boolean;\n marginBottom?: string | number | boolean;\n marginLeft?: string | number | boolean;\n}) {\n if (\n margin == null &&\n marginBlock == null &&\n marginInline == null &&\n marginTop == null &&\n marginRight == null &&\n marginBottom == null &&\n marginLeft == null\n ) {\n return {};\n }\n\n const dirs: Record<Direction, string> = {\n top: '0',\n right: '0',\n bottom: '0',\n left: '0',\n };\n\n // Priority 1 (lowest): margin\n if (margin != null) {\n if (typeof margin === 'number') {\n const v = `${margin}px`;\n dirs.top = dirs.right = dirs.bottom = dirs.left = v;\n } else if (margin === true) {\n margin = '1x';\n }\n\n if (typeof margin === 'string' && margin) {\n const processed = parseStyle(margin);\n const groups = processed.groups ?? [];\n\n for (const group of groups) {\n const { values, directions } = extractGroupData(group);\n applyGroup(dirs, values, directions);\n }\n }\n }\n\n // Priority 2 (medium): marginBlock/marginInline\n if (marginBlock != null) {\n const val = parseMarginValue(marginBlock);\n if (val) dirs.top = dirs.bottom = val;\n }\n if (marginInline != null) {\n const val = parseMarginValue(marginInline);\n if (val) dirs.left = dirs.right = val;\n }\n\n // Priority 3 (highest): individual directions\n if (marginTop != null) {\n const val = parseMarginValue(marginTop);\n if (val) dirs.top = val;\n }\n if (marginRight != null) {\n const val = parseMarginValue(marginRight);\n if (val) dirs.right = val;\n }\n if (marginBottom != null) {\n const val = parseMarginValue(marginBottom);\n if (val) dirs.bottom = val;\n }\n if (marginLeft != null) {\n const val = parseMarginValue(marginLeft);\n if (val) dirs.left = val;\n }\n\n return optimizeMargin(dirs);\n}\n\nmarginStyle.__lookupStyles = [\n 'margin',\n 'marginTop',\n 'marginRight',\n 'marginBottom',\n 'marginLeft',\n 'marginBlock',\n 'marginInline',\n];\n"],"mappings":";;;;;;AAQA,SAAS,iBAAiB,OAAiD;AACzE,KAAI,OAAO,UAAU,SAAU,QAAO,GAAG,MAAM;AAC/C,KAAI,CAAC,MAAO,QAAO;AACnB,KAAI,UAAU,KAAM,SAAQ;CAE5B,MAAM,EAAE,WAAW,WAAW,MAAM,CAAC,OAAO,MAAM,EAAE,QAAQ,EAAE,EAAE;AAEhE,QAAO,OAAO,MAAM;;;;;AAMtB,SAAS,iBAAiB,OAGxB;CACA,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK;AACnC,QAAO;EACL,QAAQ,OAAO,SAAS,SAAS,CAAC,aAAa;EAC/C,YAAY,WAAW,MAAM,WAAW;EACzC;;;;;AAMH,SAAS,WACP,MACA,QACA,YACM;AACN,KAAI,CAAC,OAAO,OAAQ;AAEpB,KAAI,WAAW,WAAW,GAAG;AAC3B,OAAK,MAAM,OAAO;AAClB,OAAK,QAAQ,OAAO,MAAM,OAAO;AACjC,OAAK,SAAS,OAAO,MAAM,OAAO;AAClC,OAAK,OAAO,OAAO,MAAM,OAAO,MAAM,OAAO;OAE7C,YAAW,SAAS,KAAK,MAAM;AAC7B,OAAK,OAAO,OAAO,MAAM,OAAO;GAChC;;;;;AAON,SAAS,eAAe,MAEtB;CACA,MAAM,EAAE,KAAK,OAAO,QAAQ,SAAS;AACrC,KAAI,QAAQ,SAAS,UAAU,UAAU,WAAW,KAClD,QAAO,EAAE,QAAQ,KAAK;AAExB,KAAI,QAAQ,UAAU,SAAS,MAC7B,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,QAAQ;AAErC,QAAO,EAAE,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ;;AAGxD,SAAgB,YAAY,EAC1B,QACA,aACA,cACA,WACA,aACA,cACA,cASC;AACD,KACE,UAAU,QACV,eAAe,QACf,gBAAgB,QAChB,aAAa,QACb,eAAe,QACf,gBAAgB,QAChB,cAAc,KAEd,QAAO,EAAE;CAGX,MAAM,OAAkC;EACtC,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACP;AAGD,KAAI,UAAU,MAAM;AAClB,MAAI,OAAO,WAAW,SAEpB,MAAK,MAAM,KAAK,QAAQ,KAAK,SAAS,KAAK,OADjC,GAAG,OAAO;WAEX,WAAW,KACpB,UAAS;AAGX,MAAI,OAAO,WAAW,YAAY,QAAQ;GAExC,MAAM,SADY,WAAW,OAAO,CACX,UAAU,EAAE;AAErC,QAAK,MAAM,SAAS,QAAQ;IAC1B,MAAM,EAAE,QAAQ,eAAe,iBAAiB,MAAM;AACtD,eAAW,MAAM,QAAQ,WAAW;;;;AAM1C,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,MAAK,MAAM,KAAK,SAAS;;AAEpC,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,MAAK,OAAO,KAAK,QAAQ;;AAIpC,KAAI,aAAa,MAAM;EACrB,MAAM,MAAM,iBAAiB,UAAU;AACvC,MAAI,IAAK,MAAK,MAAM;;AAEtB,KAAI,eAAe,MAAM;EACvB,MAAM,MAAM,iBAAiB,YAAY;AACzC,MAAI,IAAK,MAAK,QAAQ;;AAExB,KAAI,gBAAgB,MAAM;EACxB,MAAM,MAAM,iBAAiB,aAAa;AAC1C,MAAI,IAAK,MAAK,SAAS;;AAEzB,KAAI,cAAc,MAAM;EACtB,MAAM,MAAM,iBAAiB,WAAW;AACxC,MAAI,IAAK,MAAK,OAAO;;AAGvB,QAAO,eAAe,KAAK;;AAG7B,YAAY,iBAAiB;CAC3B;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
@@ -0,0 +1,29 @@
1
+ //#region src/styles/outline.d.ts
2
+ interface OutlineStyleProps {
3
+ outline?: string | boolean | number;
4
+ outlineOffset?: string | number;
5
+ }
6
+ /**
7
+ * Generates CSS for outline property with optional offset.
8
+ *
9
+ * Syntax:
10
+ * - `outline="2px solid #red"` - outline only
11
+ * - `outline="2px solid #red / 4px"` - outline with offset (slash separator)
12
+ * - `outline="2px / 4px"` - width with offset (simpler form)
13
+ * - `outline={true}` - default 1ow solid outline
14
+ * - `outlineOffset="4px"` - offset as separate prop (can be combined with outline)
15
+ *
16
+ * Priority: slash syntax in outline takes precedence over outlineOffset prop
17
+ *
18
+ * @return CSS properties for outline and optionally outline-offset
19
+ */
20
+ declare function outlineStyle({
21
+ outline,
22
+ outlineOffset
23
+ }: OutlineStyleProps): Record<string, string> | undefined;
24
+ declare namespace outlineStyle {
25
+ var __lookupStyles: string[];
26
+ }
27
+ //#endregion
28
+ export { outlineStyle };
29
+ //# sourceMappingURL=outline.d.ts.map
@@ -0,0 +1,65 @@
1
+ import { filterMods, parseStyle } from "../utils/styles.js";
2
+
3
+ //#region src/styles/outline.ts
4
+ const BORDER_STYLES = [
5
+ "none",
6
+ "hidden",
7
+ "dotted",
8
+ "dashed",
9
+ "solid",
10
+ "double",
11
+ "groove",
12
+ "ridge",
13
+ "inset",
14
+ "outset"
15
+ ];
16
+ /**
17
+ * Generates CSS for outline property with optional offset.
18
+ *
19
+ * Syntax:
20
+ * - `outline="2px solid #red"` - outline only
21
+ * - `outline="2px solid #red / 4px"` - outline with offset (slash separator)
22
+ * - `outline="2px / 4px"` - width with offset (simpler form)
23
+ * - `outline={true}` - default 1ow solid outline
24
+ * - `outlineOffset="4px"` - offset as separate prop (can be combined with outline)
25
+ *
26
+ * Priority: slash syntax in outline takes precedence over outlineOffset prop
27
+ *
28
+ * @return CSS properties for outline and optionally outline-offset
29
+ */
30
+ function outlineStyle({ outline, outlineOffset }) {
31
+ const result = {};
32
+ if (outline != null && outline !== false) {
33
+ let outlineValue = outline;
34
+ if (outline === true) outlineValue = "1ow";
35
+ if (outline === 0) outlineValue = "0";
36
+ const group = parseStyle(String(outlineValue)).groups[0];
37
+ if (group) {
38
+ const { parts } = group;
39
+ const outlinePart = parts[0] ?? {
40
+ values: [],
41
+ mods: [],
42
+ colors: []
43
+ };
44
+ const offsetPart = parts[1];
45
+ const typeMods = filterMods(outlinePart.mods, BORDER_STYLES);
46
+ result["outline"] = [
47
+ outlinePart.values[0] || "var(--outline-width)",
48
+ typeMods[0] || "solid",
49
+ outlinePart.colors[0] || "var(--outline-color)"
50
+ ].join(" ");
51
+ if (offsetPart?.values[0]) result["outline-offset"] = offsetPart.values[0];
52
+ }
53
+ }
54
+ if (outlineOffset != null && !result["outline-offset"]) {
55
+ const offsetValue = typeof outlineOffset === "number" ? `${outlineOffset}px` : outlineOffset;
56
+ result["outline-offset"] = parseStyle(offsetValue).groups[0]?.values[0] || offsetValue;
57
+ }
58
+ if (Object.keys(result).length === 0) return;
59
+ return result;
60
+ }
61
+ outlineStyle.__lookupStyles = ["outline", "outlineOffset"];
62
+
63
+ //#endregion
64
+ export { outlineStyle };
65
+ //# sourceMappingURL=outline.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"outline.js","names":[],"sources":["../../src/styles/outline.ts"],"sourcesContent":["import { filterMods, parseStyle } from '../utils/styles';\n\nconst BORDER_STYLES = [\n 'none',\n 'hidden',\n 'dotted',\n 'dashed',\n 'solid',\n 'double',\n 'groove',\n 'ridge',\n 'inset',\n 'outset',\n];\n\ninterface OutlineStyleProps {\n outline?: string | boolean | number;\n outlineOffset?: string | number;\n}\n\n/**\n * Generates CSS for outline property with optional offset.\n *\n * Syntax:\n * - `outline=\"2px solid #red\"` - outline only\n * - `outline=\"2px solid #red / 4px\"` - outline with offset (slash separator)\n * - `outline=\"2px / 4px\"` - width with offset (simpler form)\n * - `outline={true}` - default 1ow solid outline\n * - `outlineOffset=\"4px\"` - offset as separate prop (can be combined with outline)\n *\n * Priority: slash syntax in outline takes precedence over outlineOffset prop\n *\n * @return CSS properties for outline and optionally outline-offset\n */\nexport function outlineStyle({ outline, outlineOffset }: OutlineStyleProps) {\n const result: Record<string, string> = {};\n\n // Handle outline (0 is valid - means no outline)\n if (outline != null && outline !== false) {\n let outlineValue: string | boolean | number = outline;\n if (outline === true) outlineValue = '1ow';\n if (outline === 0) outlineValue = '0';\n\n const processed = parseStyle(String(outlineValue));\n const group = processed.groups[0];\n\n if (group) {\n const { parts } = group;\n const outlinePart = parts[0] ?? { values: [], mods: [], colors: [] };\n const offsetPart = parts[1];\n\n const typeMods = filterMods(outlinePart.mods, BORDER_STYLES);\n\n const value = outlinePart.values[0] || 'var(--outline-width)';\n const type = typeMods[0] || 'solid';\n const outlineColor = outlinePart.colors[0] || 'var(--outline-color)';\n\n result['outline'] = [value, type, outlineColor].join(' ');\n\n // Check for offset in second part (after /) - takes precedence\n if (offsetPart?.values[0]) {\n result['outline-offset'] = offsetPart.values[0];\n }\n }\n }\n\n // Handle outlineOffset prop (only if not already set by slash syntax)\n if (outlineOffset != null && !result['outline-offset']) {\n const offsetValue =\n typeof outlineOffset === 'number' ? `${outlineOffset}px` : outlineOffset;\n const processed = parseStyle(offsetValue);\n result['outline-offset'] = processed.groups[0]?.values[0] || offsetValue;\n }\n\n // Return undefined if no styles to apply\n if (Object.keys(result).length === 0) {\n return;\n }\n\n return result;\n}\n\noutlineStyle.__lookupStyles = ['outline', 'outlineOffset'];\n"],"mappings":";;;AAEA,MAAM,gBAAgB;CACpB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;;;;;;AAqBD,SAAgB,aAAa,EAAE,SAAS,iBAAoC;CAC1E,MAAM,SAAiC,EAAE;AAGzC,KAAI,WAAW,QAAQ,YAAY,OAAO;EACxC,IAAI,eAA0C;AAC9C,MAAI,YAAY,KAAM,gBAAe;AACrC,MAAI,YAAY,EAAG,gBAAe;EAGlC,MAAM,QADY,WAAW,OAAO,aAAa,CAAC,CAC1B,OAAO;AAE/B,MAAI,OAAO;GACT,MAAM,EAAE,UAAU;GAClB,MAAM,cAAc,MAAM,MAAM;IAAE,QAAQ,EAAE;IAAE,MAAM,EAAE;IAAE,QAAQ,EAAE;IAAE;GACpE,MAAM,aAAa,MAAM;GAEzB,MAAM,WAAW,WAAW,YAAY,MAAM,cAAc;AAM5D,UAAO,aAAa;IAJN,YAAY,OAAO,MAAM;IAC1B,SAAS,MAAM;IACP,YAAY,OAAO,MAAM;IAEC,CAAC,KAAK,IAAI;AAGzD,OAAI,YAAY,OAAO,GACrB,QAAO,oBAAoB,WAAW,OAAO;;;AAMnD,KAAI,iBAAiB,QAAQ,CAAC,OAAO,mBAAmB;EACtD,MAAM,cACJ,OAAO,kBAAkB,WAAW,GAAG,cAAc,MAAM;AAE7D,SAAO,oBADW,WAAW,YAAY,CACJ,OAAO,IAAI,OAAO,MAAM;;AAI/D,KAAI,OAAO,KAAK,OAAO,CAAC,WAAW,EACjC;AAGF,QAAO;;AAGT,aAAa,iBAAiB,CAAC,WAAW,gBAAgB"}
@@ -0,0 +1,24 @@
1
+ //#region src/styles/padding.d.ts
2
+ declare function paddingStyle({
3
+ padding,
4
+ paddingBlock,
5
+ paddingInline,
6
+ paddingTop,
7
+ paddingRight,
8
+ paddingBottom,
9
+ paddingLeft
10
+ }: {
11
+ padding?: string | number | boolean;
12
+ paddingBlock?: string | number | boolean;
13
+ paddingInline?: string | number | boolean;
14
+ paddingTop?: string | number | boolean;
15
+ paddingRight?: string | number | boolean;
16
+ paddingBottom?: string | number | boolean;
17
+ paddingLeft?: string | number | boolean;
18
+ }): {};
19
+ declare namespace paddingStyle {
20
+ var __lookupStyles: string[];
21
+ }
22
+ //#endregion
23
+ export { paddingStyle };
24
+ //# sourceMappingURL=padding.d.ts.map