@bookklik/senangstart-css 0.1.8 → 0.2.0

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 (341) hide show
  1. package/README.md +38 -0
  2. package/dist/senangstart-css.js +2269 -1955
  3. package/dist/senangstart-css.min.js +141 -1479
  4. package/docs/.vitepress/config.js +2 -0
  5. package/docs/guide/responsive.md +25 -0
  6. package/docs/index.md +1 -1
  7. package/docs/ms/guide/responsive.md +25 -0
  8. package/docs/ms/index.md +1 -1
  9. package/docs/ms/reference/breakpoints.md +23 -0
  10. package/docs/ms/reference/layout/align-content.md +57 -4
  11. package/docs/ms/reference/layout/align-items.md +81 -4
  12. package/docs/ms/reference/layout/align-self.md +25 -4
  13. package/docs/ms/reference/layout/aspect-ratio.md +27 -8
  14. package/docs/ms/reference/layout/border-collapse.md +81 -4
  15. package/docs/ms/reference/layout/border-spacing.md +43 -8
  16. package/docs/ms/reference/layout/box-sizing.md +21 -4
  17. package/docs/ms/reference/layout/caption-side.md +69 -4
  18. package/docs/ms/reference/layout/columns.md +21 -4
  19. package/docs/ms/reference/layout/container.md +21 -4
  20. package/docs/ms/reference/layout/display.md +39 -7
  21. package/docs/ms/reference/layout/flex-basis.md +29 -8
  22. package/docs/ms/reference/layout/flex-direction.md +81 -4
  23. package/docs/ms/reference/layout/flex-items.md +51 -4
  24. package/docs/ms/reference/layout/flex-wrap.md +55 -4
  25. package/docs/ms/reference/layout/flex.md +54 -7
  26. package/docs/ms/reference/layout/float-clear.md +23 -4
  27. package/docs/ms/reference/layout/grid-auto-flow.md +57 -4
  28. package/docs/ms/reference/layout/grid-auto-sizing.md +25 -4
  29. package/docs/ms/reference/layout/grid-column-span.md +59 -4
  30. package/docs/ms/reference/layout/grid-columns.md +61 -4
  31. package/docs/ms/reference/layout/grid-row-span.md +29 -4
  32. package/docs/ms/reference/layout/grid-rows.md +31 -4
  33. package/docs/ms/reference/layout/inset.md +56 -7
  34. package/docs/ms/reference/layout/isolation.md +21 -4
  35. package/docs/ms/reference/layout/justify-content.md +81 -4
  36. package/docs/ms/reference/layout/justify-items.md +25 -4
  37. package/docs/ms/reference/layout/justify-self.md +25 -4
  38. package/docs/ms/reference/layout/object-fit.md +57 -4
  39. package/docs/ms/reference/layout/object-position.md +29 -8
  40. package/docs/ms/reference/layout/order.md +53 -4
  41. package/docs/ms/reference/layout/overflow.md +45 -4
  42. package/docs/ms/reference/layout/overscroll.md +21 -4
  43. package/docs/ms/reference/layout/place-content.md +23 -4
  44. package/docs/ms/reference/layout/place-items.md +25 -4
  45. package/docs/ms/reference/layout/place-self.md +25 -4
  46. package/docs/ms/reference/layout/position.md +47 -4
  47. package/docs/ms/reference/layout/shorthand-alignment.md +47 -4
  48. package/docs/ms/reference/layout/table-layout.md +69 -4
  49. package/docs/ms/reference/layout/visibility.md +25 -4
  50. package/docs/ms/reference/layout/z-index.md +27 -4
  51. package/docs/ms/reference/space/gap.md +71 -7
  52. package/docs/ms/reference/space/height.md +61 -7
  53. package/docs/ms/reference/space/margin.md +61 -7
  54. package/docs/ms/reference/space/padding.md +65 -7
  55. package/docs/ms/reference/space/width.md +61 -7
  56. package/docs/ms/reference/visual/accent-color.md +29 -8
  57. package/docs/ms/reference/visual/animation-builtin.md +29 -8
  58. package/docs/ms/reference/visual/animation-delay.md +25 -8
  59. package/docs/ms/reference/visual/animation-direction.md +25 -4
  60. package/docs/ms/reference/visual/animation-duration.md +27 -8
  61. package/docs/ms/reference/visual/animation-fill.md +25 -4
  62. package/docs/ms/reference/visual/animation-iteration.md +23 -4
  63. package/docs/ms/reference/visual/animation-play.md +23 -4
  64. package/docs/ms/reference/visual/appearance.md +23 -4
  65. package/docs/ms/reference/visual/backdrop-blur.md +29 -8
  66. package/docs/ms/reference/visual/backdrop-brightness.md +29 -8
  67. package/docs/ms/reference/visual/backdrop-contrast.md +29 -8
  68. package/docs/ms/reference/visual/backdrop-grayscale.md +27 -8
  69. package/docs/ms/reference/visual/backdrop-hue-rotate.md +29 -8
  70. package/docs/ms/reference/visual/backdrop-invert.md +27 -8
  71. package/docs/ms/reference/visual/backdrop-opacity.md +29 -8
  72. package/docs/ms/reference/visual/backdrop-saturate.md +29 -8
  73. package/docs/ms/reference/visual/backdrop-sepia.md +27 -8
  74. package/docs/ms/reference/visual/background-attachment.md +23 -4
  75. package/docs/ms/reference/visual/background-blend-mode.md +25 -4
  76. package/docs/ms/reference/visual/background-clip.md +21 -4
  77. package/docs/ms/reference/visual/background-color.md +33 -8
  78. package/docs/ms/reference/visual/background-image.md +27 -8
  79. package/docs/ms/reference/visual/background-origin.md +25 -4
  80. package/docs/ms/reference/visual/background-position.md +29 -8
  81. package/docs/ms/reference/visual/background-repeat.md +25 -4
  82. package/docs/ms/reference/visual/background-size.md +29 -8
  83. package/docs/ms/reference/visual/blend-modes.md +23 -4
  84. package/docs/ms/reference/visual/border-radius.md +36 -4
  85. package/docs/ms/reference/visual/border-style.md +25 -4
  86. package/docs/ms/reference/visual/border-width.md +29 -8
  87. package/docs/ms/reference/visual/border.md +56 -7
  88. package/docs/ms/reference/visual/box-shadow.md +34 -4
  89. package/docs/ms/reference/visual/caret-color.md +25 -8
  90. package/docs/ms/reference/visual/color-scheme.md +23 -4
  91. package/docs/ms/reference/visual/cursor.md +25 -4
  92. package/docs/ms/reference/visual/field-sizing.md +23 -4
  93. package/docs/ms/reference/visual/fill.md +29 -8
  94. package/docs/ms/reference/visual/filter-blur.md +29 -8
  95. package/docs/ms/reference/visual/filter-brightness.md +29 -8
  96. package/docs/ms/reference/visual/filter-contrast.md +29 -8
  97. package/docs/ms/reference/visual/filter-drop-shadow.md +29 -8
  98. package/docs/ms/reference/visual/filter-grayscale.md +29 -8
  99. package/docs/ms/reference/visual/filter-hue-rotate.md +29 -8
  100. package/docs/ms/reference/visual/filter-invert.md +27 -8
  101. package/docs/ms/reference/visual/filter-saturate.md +29 -8
  102. package/docs/ms/reference/visual/filter-sepia.md +29 -8
  103. package/docs/ms/reference/visual/font-family.md +25 -4
  104. package/docs/ms/reference/visual/font-smoothing.md +23 -4
  105. package/docs/ms/reference/visual/font-style.md +23 -4
  106. package/docs/ms/reference/visual/font-variant-numeric.md +23 -4
  107. package/docs/ms/reference/visual/font-weight.md +35 -4
  108. package/docs/ms/reference/visual/forced-color-adjust.md +23 -4
  109. package/docs/ms/reference/visual/hyphens.md +25 -4
  110. package/docs/ms/reference/visual/letter-spacing.md +29 -8
  111. package/docs/ms/reference/visual/line-clamp.md +29 -8
  112. package/docs/ms/reference/visual/line-height.md +29 -8
  113. package/docs/ms/reference/visual/list-style.md +25 -4
  114. package/docs/ms/reference/visual/mask.md +25 -8
  115. package/docs/ms/reference/visual/opacity.md +27 -4
  116. package/docs/ms/reference/visual/outline.md +25 -8
  117. package/docs/ms/reference/visual/pointer-events.md +23 -4
  118. package/docs/ms/reference/visual/resize.md +27 -4
  119. package/docs/ms/reference/visual/scroll-behavior.md +23 -4
  120. package/docs/ms/reference/visual/scroll-margin.md +25 -8
  121. package/docs/ms/reference/visual/scroll-padding.md +25 -8
  122. package/docs/ms/reference/visual/scroll-snap-align.md +25 -4
  123. package/docs/ms/reference/visual/scroll-snap-stop.md +23 -4
  124. package/docs/ms/reference/visual/scroll-snap-type.md +25 -4
  125. package/docs/ms/reference/visual/state-prefixes.md +21 -4
  126. package/docs/ms/reference/visual/stroke-width.md +29 -8
  127. package/docs/ms/reference/visual/stroke.md +27 -8
  128. package/docs/ms/reference/visual/text-alignment.md +25 -4
  129. package/docs/ms/reference/visual/text-color.md +31 -8
  130. package/docs/ms/reference/visual/text-decoration.md +23 -4
  131. package/docs/ms/reference/visual/text-indent.md +25 -8
  132. package/docs/ms/reference/visual/text-overflow.md +21 -4
  133. package/docs/ms/reference/visual/text-shadow.md +25 -8
  134. package/docs/ms/reference/visual/text-size.md +41 -7
  135. package/docs/ms/reference/visual/text-transform.md +25 -4
  136. package/docs/ms/reference/visual/text-wrap.md +25 -4
  137. package/docs/ms/reference/visual/touch-action.md +25 -4
  138. package/docs/ms/reference/visual/transform-backface.md +23 -4
  139. package/docs/ms/reference/visual/transform-origin.md +27 -8
  140. package/docs/ms/reference/visual/transform-perspective-origin.md +25 -8
  141. package/docs/ms/reference/visual/transform-perspective.md +25 -8
  142. package/docs/ms/reference/visual/transform-rotate.md +29 -8
  143. package/docs/ms/reference/visual/transform-scale.md +29 -8
  144. package/docs/ms/reference/visual/transform-skew.md +29 -8
  145. package/docs/ms/reference/visual/transform-style.md +23 -4
  146. package/docs/ms/reference/visual/transform-translate.md +29 -8
  147. package/docs/ms/reference/visual/transition-delay.md +25 -8
  148. package/docs/ms/reference/visual/transition-duration.md +27 -8
  149. package/docs/ms/reference/visual/transition-property.md +21 -4
  150. package/docs/ms/reference/visual/transition-timing.md +29 -8
  151. package/docs/ms/reference/visual/typography-keywords.md +27 -4
  152. package/docs/ms/reference/visual/user-select.md +23 -4
  153. package/docs/ms/reference/visual/vertical-align.md +25 -4
  154. package/docs/ms/reference/visual/whitespace.md +25 -4
  155. package/docs/ms/reference/visual/will-change.md +23 -4
  156. package/docs/ms/reference/visual/word-break.md +25 -4
  157. package/docs/public/assets/senangstart-css-logo.svg +1 -0
  158. package/docs/reference/breakpoints.md +23 -0
  159. package/docs/reference/layout/align-content.md +57 -4
  160. package/docs/reference/layout/align-items.md +81 -4
  161. package/docs/reference/layout/align-self.md +25 -4
  162. package/docs/reference/layout/aspect-ratio.md +27 -8
  163. package/docs/reference/layout/border-collapse.md +81 -4
  164. package/docs/reference/layout/border-spacing.md +43 -8
  165. package/docs/reference/layout/box-sizing.md +21 -4
  166. package/docs/reference/layout/caption-side.md +69 -4
  167. package/docs/reference/layout/columns.md +21 -4
  168. package/docs/reference/layout/container.md +21 -4
  169. package/docs/reference/layout/display.md +39 -7
  170. package/docs/reference/layout/flex-basis.md +29 -8
  171. package/docs/reference/layout/flex-direction.md +81 -4
  172. package/docs/reference/layout/flex-items.md +51 -4
  173. package/docs/reference/layout/flex-wrap.md +55 -4
  174. package/docs/reference/layout/flex.md +54 -7
  175. package/docs/reference/layout/float-clear.md +23 -4
  176. package/docs/reference/layout/grid-auto-flow.md +57 -4
  177. package/docs/reference/layout/grid-auto-sizing.md +25 -4
  178. package/docs/reference/layout/grid-column-span.md +59 -4
  179. package/docs/reference/layout/grid-columns.md +61 -4
  180. package/docs/reference/layout/grid-row-span.md +29 -4
  181. package/docs/reference/layout/grid-rows.md +31 -4
  182. package/docs/reference/layout/inset.md +56 -7
  183. package/docs/reference/layout/isolation.md +21 -4
  184. package/docs/reference/layout/justify-content.md +81 -4
  185. package/docs/reference/layout/justify-items.md +25 -4
  186. package/docs/reference/layout/justify-self.md +25 -4
  187. package/docs/reference/layout/object-fit.md +57 -4
  188. package/docs/reference/layout/object-position.md +29 -8
  189. package/docs/reference/layout/order.md +53 -4
  190. package/docs/reference/layout/overflow.md +45 -4
  191. package/docs/reference/layout/overscroll.md +21 -4
  192. package/docs/reference/layout/place-content.md +23 -4
  193. package/docs/reference/layout/place-items.md +25 -4
  194. package/docs/reference/layout/place-self.md +25 -4
  195. package/docs/reference/layout/position.md +47 -4
  196. package/docs/reference/layout/shorthand-alignment.md +47 -4
  197. package/docs/reference/layout/table-layout.md +69 -4
  198. package/docs/reference/layout/visibility.md +25 -4
  199. package/docs/reference/layout/z-index.md +27 -4
  200. package/docs/reference/space/gap.md +71 -7
  201. package/docs/reference/space/height.md +61 -7
  202. package/docs/reference/space/margin.md +61 -7
  203. package/docs/reference/space/padding.md +65 -7
  204. package/docs/reference/space/width.md +61 -7
  205. package/docs/reference/visual/accent-color.md +29 -8
  206. package/docs/reference/visual/animation-builtin.md +29 -8
  207. package/docs/reference/visual/animation-delay.md +25 -8
  208. package/docs/reference/visual/animation-direction.md +25 -4
  209. package/docs/reference/visual/animation-duration.md +27 -8
  210. package/docs/reference/visual/animation-fill.md +25 -4
  211. package/docs/reference/visual/animation-iteration.md +23 -4
  212. package/docs/reference/visual/animation-play.md +23 -4
  213. package/docs/reference/visual/appearance.md +23 -4
  214. package/docs/reference/visual/backdrop-blur.md +29 -8
  215. package/docs/reference/visual/backdrop-brightness.md +29 -8
  216. package/docs/reference/visual/backdrop-contrast.md +29 -8
  217. package/docs/reference/visual/backdrop-grayscale.md +27 -8
  218. package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
  219. package/docs/reference/visual/backdrop-invert.md +27 -8
  220. package/docs/reference/visual/backdrop-opacity.md +29 -8
  221. package/docs/reference/visual/backdrop-saturate.md +29 -8
  222. package/docs/reference/visual/backdrop-sepia.md +27 -8
  223. package/docs/reference/visual/background-attachment.md +23 -4
  224. package/docs/reference/visual/background-blend-mode.md +25 -4
  225. package/docs/reference/visual/background-clip.md +21 -4
  226. package/docs/reference/visual/background-color.md +33 -8
  227. package/docs/reference/visual/background-image.md +27 -8
  228. package/docs/reference/visual/background-origin.md +25 -4
  229. package/docs/reference/visual/background-position.md +29 -8
  230. package/docs/reference/visual/background-repeat.md +25 -4
  231. package/docs/reference/visual/background-size.md +29 -8
  232. package/docs/reference/visual/blend-modes.md +23 -4
  233. package/docs/reference/visual/border-radius.md +36 -4
  234. package/docs/reference/visual/border-style.md +25 -4
  235. package/docs/reference/visual/border-width.md +29 -8
  236. package/docs/reference/visual/border.md +56 -7
  237. package/docs/reference/visual/box-shadow.md +34 -4
  238. package/docs/reference/visual/caret-color.md +25 -8
  239. package/docs/reference/visual/color-scheme.md +23 -4
  240. package/docs/reference/visual/cursor.md +25 -4
  241. package/docs/reference/visual/field-sizing.md +23 -4
  242. package/docs/reference/visual/fill.md +29 -8
  243. package/docs/reference/visual/filter-blur.md +29 -8
  244. package/docs/reference/visual/filter-brightness.md +29 -8
  245. package/docs/reference/visual/filter-contrast.md +29 -8
  246. package/docs/reference/visual/filter-drop-shadow.md +29 -8
  247. package/docs/reference/visual/filter-grayscale.md +29 -8
  248. package/docs/reference/visual/filter-hue-rotate.md +29 -8
  249. package/docs/reference/visual/filter-invert.md +27 -8
  250. package/docs/reference/visual/filter-saturate.md +29 -8
  251. package/docs/reference/visual/filter-sepia.md +29 -8
  252. package/docs/reference/visual/font-family.md +25 -4
  253. package/docs/reference/visual/font-smoothing.md +23 -4
  254. package/docs/reference/visual/font-style.md +23 -4
  255. package/docs/reference/visual/font-variant-numeric.md +23 -4
  256. package/docs/reference/visual/font-weight.md +35 -4
  257. package/docs/reference/visual/forced-color-adjust.md +23 -4
  258. package/docs/reference/visual/hyphens.md +25 -4
  259. package/docs/reference/visual/letter-spacing.md +29 -8
  260. package/docs/reference/visual/line-clamp.md +29 -8
  261. package/docs/reference/visual/line-height.md +29 -8
  262. package/docs/reference/visual/list-style.md +25 -4
  263. package/docs/reference/visual/mask.md +25 -8
  264. package/docs/reference/visual/opacity.md +27 -4
  265. package/docs/reference/visual/outline.md +25 -8
  266. package/docs/reference/visual/pointer-events.md +23 -4
  267. package/docs/reference/visual/resize.md +27 -4
  268. package/docs/reference/visual/scroll-behavior.md +23 -4
  269. package/docs/reference/visual/scroll-margin.md +25 -8
  270. package/docs/reference/visual/scroll-padding.md +25 -8
  271. package/docs/reference/visual/scroll-snap-align.md +25 -4
  272. package/docs/reference/visual/scroll-snap-stop.md +23 -4
  273. package/docs/reference/visual/scroll-snap-type.md +25 -4
  274. package/docs/reference/visual/state-prefixes.md +21 -4
  275. package/docs/reference/visual/stroke-width.md +29 -8
  276. package/docs/reference/visual/stroke.md +27 -8
  277. package/docs/reference/visual/text-alignment.md +25 -4
  278. package/docs/reference/visual/text-color.md +31 -8
  279. package/docs/reference/visual/text-decoration.md +23 -4
  280. package/docs/reference/visual/text-indent.md +25 -8
  281. package/docs/reference/visual/text-overflow.md +21 -4
  282. package/docs/reference/visual/text-shadow.md +25 -8
  283. package/docs/reference/visual/text-size.md +41 -7
  284. package/docs/reference/visual/text-transform.md +25 -4
  285. package/docs/reference/visual/text-wrap.md +25 -4
  286. package/docs/reference/visual/touch-action.md +25 -4
  287. package/docs/reference/visual/transform-backface.md +23 -4
  288. package/docs/reference/visual/transform-origin.md +27 -8
  289. package/docs/reference/visual/transform-perspective-origin.md +25 -8
  290. package/docs/reference/visual/transform-perspective.md +25 -8
  291. package/docs/reference/visual/transform-rotate.md +29 -8
  292. package/docs/reference/visual/transform-scale.md +29 -8
  293. package/docs/reference/visual/transform-skew.md +29 -8
  294. package/docs/reference/visual/transform-style.md +23 -4
  295. package/docs/reference/visual/transform-translate.md +29 -8
  296. package/docs/reference/visual/transition-delay.md +25 -8
  297. package/docs/reference/visual/transition-duration.md +27 -8
  298. package/docs/reference/visual/transition-property.md +21 -4
  299. package/docs/reference/visual/transition-timing.md +29 -8
  300. package/docs/reference/visual/typography-keywords.md +27 -4
  301. package/docs/reference/visual/user-select.md +23 -4
  302. package/docs/reference/visual/vertical-align.md +25 -4
  303. package/docs/reference/visual/whitespace.md +25 -4
  304. package/docs/reference/visual/will-change.md +23 -4
  305. package/docs/reference/visual/word-break.md +25 -4
  306. package/package.json +2 -1
  307. package/playground/jit-tw-mix-test.html +238 -0
  308. package/playground/tw-convertor.html +696 -0
  309. package/scripts/build-dist.js +34 -29
  310. package/scripts/bundle-jit.js +45 -0
  311. package/scripts/convert-tailwind.js +759 -0
  312. package/scripts/generate-docs.js +65 -16
  313. package/src/cdn/jit.js +313 -102
  314. package/src/cli/commands/build.js +14 -6
  315. package/src/cli/commands/dev.js +28 -10
  316. package/src/compiler/generators/css.js +187 -28
  317. package/src/compiler/parser.js +23 -10
  318. package/src/compiler/tokenizer.js +19 -137
  319. package/src/config/defaults.js +45 -18
  320. package/src/core/constants.js +427 -0
  321. package/src/core/tokenizer-core.js +233 -0
  322. package/src/definitions/layout-alignment.js +210 -0
  323. package/src/definitions/layout-flex.js +155 -0
  324. package/src/definitions/layout-grid.js +134 -0
  325. package/src/definitions/layout-positioning.js +64 -0
  326. package/src/definitions/layout-table.js +129 -0
  327. package/src/definitions/layout-utilities.js +164 -0
  328. package/src/definitions/space.js +172 -0
  329. package/src/definitions/visual-backgrounds.js +231 -0
  330. package/src/definitions/visual-borders.js +66 -0
  331. package/src/definitions/visual-filters.js +111 -0
  332. package/src/definitions/visual-interactivity.js +159 -0
  333. package/src/definitions/visual-svg.js +41 -0
  334. package/src/definitions/visual-transform3d.js +74 -0
  335. package/src/definitions/visual-transforms.js +69 -0
  336. package/src/definitions/visual-transitions.js +144 -0
  337. package/src/definitions/visual-typography.js +214 -0
  338. package/src/definitions/visual.js +306 -1
  339. package/tests/integration/compiler.test.js +63 -2
  340. package/tests/unit/convert-tailwind.test.js +324 -0
  341. package/tests/unit/security.test.js +206 -0
package/docs/reference/visual/touch-action.md CHANGED
@@ -26,11 +26,32 @@ visual="touch:[value]"
26
26
  <div visual="touch:manipulation">Touch optimized</div>
27
27
  ```
28
28
 
29
- ## Responsive
29
+ ## Preview
30
+
31
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
32
+
33
+ ### Touch Action
34
+
35
+ <div layout="flex col" space="g:medium">
36
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="touch:manipulation"</code> - Control touch gestures</p>
37
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">pan-x</div>
39
+ <div space="p:small" visual="bg:primary text:white rounded:small">pan-y</div>
40
+ <div space="p:small" visual="bg:primary text:white rounded:small">manipulation</div>
41
+ </div>
42
+ </div>
43
+
44
+ <details>
45
+ <summary>View Code</summary>
30
46
 
31
47
  ```html
32
- <!-- Responsive example -->
33
- <div visual="mob:... tab:... lap:...">
34
- Responsive content
48
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">pan-x</div>
50
+ <div space="p:small" visual="bg:primary text:white rounded:small">pan-y</div>
51
+ <div space="p:small" visual="bg:primary text:white rounded:small">manipulation</div>
35
52
  </div>
36
53
  ```
54
+
55
+ </details>
56
+
57
+ </div>
package/docs/reference/visual/transform-backface.md CHANGED
@@ -20,11 +20,30 @@ visual="backface:[value]"
20
20
  <div visual="backface:hidden">Hidden when rotated</div>
21
21
  ```
22
22
 
23
- ## Responsive
23
+ ## Preview
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Backface Visibility
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="backface:hidden"</code> - Show or hide element back side</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div space="p:small" visual="bg:primary text:white rounded:small">visible</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>View Code</summary>
24
39
 
25
40
  ```html
26
- <!-- Responsive example -->
27
- <div visual="mob:... tab:... lap:...">
28
- Responsive content
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small">visible</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/reference/visual/transform-origin.md CHANGED
@@ -27,19 +27,38 @@ visual="origin:[value]"
27
27
  <div visual="rotate:45 origin:top-left">Rotate from corner</div>
28
28
  ```
29
29
 
30
- ## Arbitrary Values
30
+ ## Preview
31
31
 
32
- Supports custom values using bracket syntax:
32
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
33
+
34
+ ### Transform Origin
35
+
36
+ <div layout="flex col" space="g:medium">
37
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="origin:center"</code> - Set the pivot point for transforms</p>
38
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg); transform-origin: center;">center</div>
40
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg); transform-origin: top-left;">top-left</div>
41
+ </div>
42
+ </div>
43
+
44
+ <details>
45
+ <summary>View Code</summary>
33
46
 
34
47
  ```html
35
- <div visual="transform:[custom-value]">Custom</div>
48
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
49
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg); transform-origin: center;">center</div>
50
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg); transform-origin: top-left;">top-left</div>
51
+ </div>
36
52
  ```
37
53
 
38
- ## Responsive
54
+ </details>
39
55
 
40
- ```html
41
- <!-- Responsive example -->
42
- <div visual="mob:... tab:... lap:...">
43
- Responsive content
44
56
  </div>
57
+
58
+ ## Arbitrary Values
59
+
60
+ Supports custom values using bracket syntax:
61
+
62
+ ```html
63
+ <div visual="transform:[custom-value]">Custom</div>
45
64
  ```
package/docs/reference/visual/transform-perspective-origin.md CHANGED
@@ -27,19 +27,36 @@ visual="perspective-origin:[value]"
27
27
  <div visual="perspective-origin:top">Top origin</div>
28
28
  ```
29
29
 
30
- ## Arbitrary Values
30
+ ## Preview
31
31
 
32
- Supports custom values using bracket syntax:
32
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
33
+
34
+ ### Perspective Origin
35
+
36
+ <div layout="flex col" space="g:medium">
37
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="perspective-origin:center"</code> - Set vanishing point location</p>
38
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <div space="p:small" visual="bg:primary text:white rounded:small">origin:center</div>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>View Code</summary>
33
45
 
34
46
  ```html
35
- <div visual="transform:[custom-value]">Custom</div>
47
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">origin:center</div>
49
+ </div>
36
50
  ```
37
51
 
38
- ## Responsive
52
+ </details>
39
53
 
40
- ```html
41
- <!-- Responsive example -->
42
- <div visual="mob:... tab:... lap:...">
43
- Responsive content
44
54
  </div>
55
+
56
+ ## Arbitrary Values
57
+
58
+ Supports custom values using bracket syntax:
59
+
60
+ ```html
61
+ <div visual="transform:[custom-value]">Custom</div>
45
62
  ```
package/docs/reference/visual/transform-perspective.md CHANGED
@@ -25,19 +25,36 @@ visual="perspective:[value]"
25
25
  <div visual="perspective:normal">3D container</div>
26
26
  ```
27
27
 
28
- ## Arbitrary Values
28
+ ## Preview
29
29
 
30
- Supports custom values using bracket syntax:
30
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
31
+
32
+ ### 3D Perspective
33
+
34
+ <div layout="flex col" space="g:medium">
35
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="perspective:normal"</code> - Control 3D depth perception</p>
36
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">perspective</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
31
43
 
32
44
  ```html
33
- <div visual="transform:[custom-value]">Custom</div>
45
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">perspective</div>
47
+ </div>
34
48
  ```
35
49
 
36
- ## Responsive
50
+ </details>
37
51
 
38
- ```html
39
- <!-- Responsive example -->
40
- <div visual="mob:... tab:... lap:...">
41
- Responsive content
42
52
  </div>
53
+
54
+ ## Arbitrary Values
55
+
56
+ Supports custom values using bracket syntax:
57
+
58
+ ```html
59
+ <div visual="transform:[custom-value]">Custom</div>
43
60
  ```
package/docs/reference/visual/transform-rotate.md CHANGED
@@ -22,19 +22,40 @@ visual="rotate:[degrees]"
22
22
  <div visual="rotate:45">Rotated 45 degrees</div>
23
23
  ```
24
24
 
25
- ## Arbitrary Values
25
+ ## Preview
26
26
 
27
- Supports custom values using bracket syntax:
27
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
28
+
29
+ ### Rotate Transform
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rotate:45"</code> - Rotate elements by degrees</p>
33
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(0deg);">0°</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg);">45°</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(90deg);">90°</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
28
42
 
29
43
  ```html
30
- <div visual="transform:[custom-value]">Custom</div>
44
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(0deg);">0°</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(45deg);">45°</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: rotate(90deg);">90°</div>
48
+ </div>
31
49
  ```
32
50
 
33
- ## Responsive
51
+ </details>
34
52
 
35
- ```html
36
- <!-- Responsive example -->
37
- <div visual="mob:... tab:... lap:...">
38
- Responsive content
39
53
  </div>
54
+
55
+ ## Arbitrary Values
56
+
57
+ Supports custom values using bracket syntax:
58
+
59
+ ```html
60
+ <div visual="transform:[custom-value]">Custom</div>
40
61
  ```
package/docs/reference/visual/transform-scale.md CHANGED
@@ -25,19 +25,40 @@ visual="scale:[value]"
25
25
  <div visual="transition:transform hover:scale:110">Hover to grow</div>
26
26
  ```
27
27
 
28
- ## Arbitrary Values
28
+ ## Preview
29
29
 
30
- Supports custom values using bracket syntax:
30
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
31
+
32
+ ### Scale Transform
33
+
34
+ <div layout="flex col" space="g:medium">
35
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="scale:110"</code> - Scale elements up or down</p>
36
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(0.75);">75%</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">100%</div>
39
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(1.25);">125%</div>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>View Code</summary>
31
45
 
32
46
  ```html
33
- <div visual="transform:[custom-value]">Custom</div>
47
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
48
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(0.75);">75%</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">100%</div>
50
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: scale(1.25);">125%</div>
51
+ </div>
34
52
  ```
35
53
 
36
- ## Responsive
54
+ </details>
37
55
 
38
- ```html
39
- <!-- Responsive example -->
40
- <div visual="mob:... tab:... lap:...">
41
- Responsive content
42
56
  </div>
57
+
58
+ ## Arbitrary Values
59
+
60
+ Supports custom values using bracket syntax:
61
+
62
+ ```html
63
+ <div visual="transform:[custom-value]">Custom</div>
43
64
  ```
package/docs/reference/visual/transform-skew.md CHANGED
@@ -22,19 +22,40 @@ visual="skew-x:[degrees]" or visual="skew-y:[degrees]"
22
22
  <div visual="skew-x:6">Skewed element</div>
23
23
  ```
24
24
 
25
- ## Arbitrary Values
25
+ ## Preview
26
26
 
27
- Supports custom values using bracket syntax:
27
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
28
+
29
+ ### Skew Transform
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="skew-x:6"</code> - Skew elements along axes</p>
33
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(0deg);">0°</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(6deg);">6°</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(12deg);">12°</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
28
42
 
29
43
  ```html
30
- <div visual="transform:[custom-value]">Custom</div>
44
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(0deg);">0°</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(6deg);">6°</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="transform: skewX(12deg);">12°</div>
48
+ </div>
31
49
  ```
32
50
 
33
- ## Responsive
51
+ </details>
34
52
 
35
- ```html
36
- <!-- Responsive example -->
37
- <div visual="mob:... tab:... lap:...">
38
- Responsive content
39
53
  </div>
54
+
55
+ ## Arbitrary Values
56
+
57
+ Supports custom values using bracket syntax:
58
+
59
+ ```html
60
+ <div visual="transform:[custom-value]">Custom</div>
40
61
  ```
package/docs/reference/visual/transform-style.md CHANGED
@@ -20,11 +20,30 @@ visual="transform-style:[value]"
20
20
  <div visual="transform-style:preserve-3d">3D space</div>
21
21
  ```
22
22
 
23
- ## Responsive
23
+ ## Preview
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Transform Style
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="transform-style:preserve-3d"</code> - Flat or preserve 3D rendering</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div space="p:small" visual="bg:primary text:white rounded:small">flat</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">preserve-3d</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>View Code</summary>
24
39
 
25
40
  ```html
26
- <!-- Responsive example -->
27
- <div visual="mob:... tab:... lap:...">
28
- Responsive content
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small">flat</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">preserve-3d</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/reference/visual/transform-translate.md CHANGED
@@ -21,19 +21,40 @@ visual="translate-x:[value]" or visual="translate-y:[value]"
21
21
  <div visual="translate-x:full">Moved right</div>
22
22
  ```
23
23
 
24
- ## Arbitrary Values
24
+ ## Preview
25
25
 
26
- Supports custom values using bracket syntax:
26
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
27
+
28
+ ### Translate Transform
29
+
30
+ <div layout="flex col" space="g:medium">
31
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="translate-x:full"</code> - Move elements position</p>
32
+ <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
33
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(0);">0</div>
34
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(60px);">60px</div>
35
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(120px);">120px</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
27
41
 
28
42
  ```html
29
- <div visual="transform:[custom-value]">Custom</div>
43
+ <div layout="relative" space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 80px;">
44
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(0);">0</div>
45
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(60px);">60px</div>
46
+ <div layout="absolute" space="p:small" visual="bg:primary text:white rounded:small" style="transform: translateX(120px);">120px</div>
47
+ </div>
30
48
  ```
31
49
 
32
- ## Responsive
50
+ </details>
33
51
 
34
- ```html
35
- <!-- Responsive example -->
36
- <div visual="mob:... tab:... lap:...">
37
- Responsive content
38
52
  </div>
53
+
54
+ ## Arbitrary Values
55
+
56
+ Supports custom values using bracket syntax:
57
+
58
+ ```html
59
+ <div visual="transform:[custom-value]">Custom</div>
39
60
  ```
package/docs/reference/visual/transition-delay.md CHANGED
@@ -23,19 +23,36 @@ visual="delay:[value]"
23
23
  <div visual="transition:all delay:slow">Delayed transition</div>
24
24
  ```
25
25
 
26
- ## Arbitrary Values
26
+ ## Preview
27
27
 
28
- Supports custom values using bracket syntax:
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Transition Delay
31
+
32
+ <div layout="flex col" space="g:medium">
33
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="delay:slow"</code> - Delay before transition starts</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">delay:slow (300ms)</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
29
41
 
30
42
  ```html
31
- <div visual="transition:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">delay:slow (300ms)</div>
45
+ </div>
32
46
  ```
33
47
 
34
- ## Responsive
48
+ </details>
35
49
 
36
- ```html
37
- <!-- Responsive example -->
38
- <div visual="mob:... tab:... lap:...">
39
- Responsive content
40
50
  </div>
51
+
52
+ ## Arbitrary Values
53
+
54
+ Supports custom values using bracket syntax:
55
+
56
+ ```html
57
+ <div visual="transition:[custom-value]">Custom</div>
41
58
  ```
package/docs/reference/visual/transition-duration.md CHANGED
@@ -25,19 +25,38 @@ visual="duration:[value]"
25
25
  <div visual="transition:all duration:slow">Slow transition</div>
26
26
  ```
27
27
 
28
- ## Arbitrary Values
28
+ ## Preview
29
29
 
30
- Supports custom values using bracket syntax:
30
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
31
+
32
+ ### Duration
33
+
34
+ <div layout="flex col" space="g:medium">
35
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="duration:slow"</code> - Control transition speed</p>
36
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">fast: 150ms</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
31
44
 
32
45
  ```html
33
- <div visual="transition:[custom-value]">Custom</div>
46
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">fast: 150ms</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
49
+ </div>
34
50
  ```
35
51
 
36
- ## Responsive
52
+ </details>
37
53
 
38
- ```html
39
- <!-- Responsive example -->
40
- <div visual="mob:... tab:... lap:...">
41
- Responsive content
42
54
  </div>
55
+
56
+ ## Arbitrary Values
57
+
58
+ Supports custom values using bracket syntax:
59
+
60
+ ```html
61
+ <div visual="transition:[custom-value]">Custom</div>
43
62
  ```
package/docs/reference/visual/transition-property.md CHANGED
@@ -24,11 +24,28 @@ visual="transition:[value]"
24
24
  <button visual="transition:all hover:bg:primary">Smooth hover</button>
25
25
  ```
26
26
 
27
- ## Responsive
27
+ ## Preview
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Transition
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="transition:all"</code> - Smooth property changes</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all">transition:all</button>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
28
42
 
29
43
  ```html
30
- <!-- Responsive example -->
31
- <div visual="mob:... tab:... lap:...">
32
- Responsive content
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <button space="p:small" visual="bg:primary text:white rounded:small transition:all">transition:all</button>
33
46
  </div>
34
47
  ```
48
+
49
+ </details>
50
+
51
+ </div>
package/docs/reference/visual/transition-timing.md CHANGED
@@ -22,19 +22,40 @@ visual="ease:[value]"
22
22
  <div visual="transition:all ease:out">Ease out effect</div>
23
23
  ```
24
24
 
25
- ## Arbitrary Values
25
+ ## Preview
26
26
 
27
- Supports custom values using bracket syntax:
27
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
28
+
29
+ ### Timing Function
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="ease:out"</code> - Control acceleration curve</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:in</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:out</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:in-out</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
28
42
 
29
43
  ```html
30
- <div visual="transition:[custom-value]">Custom</div>
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:in</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:out</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">ease:in-out</div>
48
+ </div>
31
49
  ```
32
50
 
33
- ## Responsive
51
+ </details>
34
52
 
35
- ```html
36
- <!-- Responsive example -->
37
- <div visual="mob:... tab:... lap:...">
38
- Responsive content
39
53
  </div>
54
+
55
+ ## Arbitrary Values
56
+
57
+ Supports custom values using bracket syntax:
58
+
59
+ ```html
60
+ <div visual="transition:[custom-value]">Custom</div>
40
61
  ```