@bookklik/senangstart-css 0.1.4 → 0.1.8

package/src/definitions/visual-svg.js

@@ -0,0 +1,80 @@
+/**
+ * SenangStart CSS - SVG Utility Definitions
+ * Fill, stroke, stroke-width for SVG elements
+ */
+
+// ======================
+// SVG FILL
+// ======================
+
+export const svgFill = {
+  name: 'fill',
+  property: 'visual',
+  syntax: 'visual="fill:[color]"',
+  description: 'Set SVG fill color',
+  descriptionMs: 'Tetapkan warna pengisian SVG',
+  category: 'visual',
+  usesScale: 'colors',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'fill: none;', description: 'No fill', descriptionMs: 'Tiada pengisian' },
+    { value: 'current', css: 'fill: currentColor;', description: 'Current color', descriptionMs: 'Warna semasa' }
+  ],
+  examples: [
+    { code: '<svg visual="fill:primary">...</svg>', description: 'Primary fill' }
+  ]
+};
+
+// ======================
+// SVG STROKE
+// ======================
+
+export const svgStroke = {
+  name: 'stroke',
+  property: 'visual',
+  syntax: 'visual="stroke:[color]"',
+  description: 'Set SVG stroke color',
+  descriptionMs: 'Tetapkan warna gurisan SVG',
+  category: 'visual',
+  usesScale: 'colors',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'stroke: none;', description: 'No stroke', descriptionMs: 'Tiada gurisan' },
+    { value: 'current', css: 'stroke: currentColor;', description: 'Current color', descriptionMs: 'Warna semasa' }
+  ],
+  examples: [
+    { code: '<svg visual="stroke:primary stroke-w:2">...</svg>', description: 'Primary stroke' }
+  ]
+};
+
+// ======================
+// SVG STROKE WIDTH
+// ======================
+
+export const svgStrokeWidth = {
+  name: 'stroke-width',
+  property: 'visual',
+  syntax: 'visual="stroke-w:[value]"',
+  description: 'Set SVG stroke width',
+  descriptionMs: 'Tetapkan lebar gurisan SVG',
+  category: 'visual',
+  supportsArbitrary: true,
+  dynamic: true,
+  values: [
+    { value: '0', css: 'stroke-width: 0;', description: 'No stroke', descriptionMs: 'Tiada gurisan' },
+    { value: '1', css: 'stroke-width: 1px;', description: '1px stroke', descriptionMs: 'Gurisan 1px' },
+    { value: '2', css: 'stroke-width: 2px;', description: '2px stroke', descriptionMs: 'Gurisan 2px' }
+  ],
+  examples: [
+    { code: '<svg visual="stroke:black stroke-w:2">...</svg>', description: '2px stroke' }
+  ]
+};
+
+// Export all SVG definitions
+export const svgDefinitions = {
+  svgFill,
+  svgStroke,
+  svgStrokeWidth
+};
+
+export default svgDefinitions;

package/src/definitions/visual-transform3d.js

@@ -0,0 +1,159 @@
+/**
+ * SenangStart CSS - 3D Transform Utility Definitions
+ * Perspective, backface, and 3D transform utilities
+ */
+
+// ======================
+// PERSPECTIVE
+// ======================
+
+export const perspective = {
+  name: 'transform-perspective',
+  property: 'visual',
+  syntax: 'visual="perspective:[value]"',
+  description: 'Set 3D perspective',
+  descriptionMs: 'Tetapkan perspektif 3D',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'perspective: none;', description: 'No perspective', descriptionMs: 'Tiada perspektif' },
+    { value: 'dramatic', css: 'perspective: 100px;', description: 'Dramatic perspective', descriptionMs: 'Perspektif dramatik' },
+    { value: 'near', css: 'perspective: 300px;', description: 'Near perspective', descriptionMs: 'Perspektif dekat' },
+    { value: 'normal', css: 'perspective: 500px;', description: 'Normal perspective', descriptionMs: 'Perspektif normal' },
+    { value: 'midrange', css: 'perspective: 800px;', description: 'Midrange perspective', descriptionMs: 'Perspektif pertengahan' },
+    { value: 'far', css: 'perspective: 1000px;', description: 'Far perspective', descriptionMs: 'Perspektif jauh' },
+    { value: 'distant', css: 'perspective: 1200px;', description: 'Distant perspective', descriptionMs: 'Perspektif jauh sekali' }
+  ],
+  examples: [
+    { code: '<div visual="perspective:normal">3D container</div>', description: 'Normal perspective' }
+  ]
+};
+
+// ======================
+// PERSPECTIVE ORIGIN
+// ======================
+
+export const perspectiveOrigin = {
+  name: 'transform-perspective-origin',
+  property: 'visual',
+  syntax: 'visual="perspective-origin:[value]"',
+  description: 'Set perspective origin point',
+  descriptionMs: 'Tetapkan titik asal perspektif',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'center', css: 'perspective-origin: center;', description: 'Center origin', descriptionMs: 'Asal tengah' },
+    { value: 'top', css: 'perspective-origin: top;', description: 'Top origin', descriptionMs: 'Asal atas' },
+    { value: 'bottom', css: 'perspective-origin: bottom;', description: 'Bottom origin', descriptionMs: 'Asal bawah' },
+    { value: 'left', css: 'perspective-origin: left;', description: 'Left origin', descriptionMs: 'Asal kiri' },
+    { value: 'right', css: 'perspective-origin: right;', description: 'Right origin', descriptionMs: 'Asal kanan' },
+    { value: 'top-left', css: 'perspective-origin: top left;', description: 'Top left', descriptionMs: 'Atas kiri' },
+    { value: 'top-right', css: 'perspective-origin: top right;', description: 'Top right', descriptionMs: 'Atas kanan' },
+    { value: 'bottom-left', css: 'perspective-origin: bottom left;', description: 'Bottom left', descriptionMs: 'Bawah kiri' },
+    { value: 'bottom-right', css: 'perspective-origin: bottom right;', description: 'Bottom right', descriptionMs: 'Bawah kanan' }
+  ],
+  examples: [
+    { code: '<div visual="perspective-origin:top">Top origin</div>', description: 'Top origin' }
+  ]
+};
+
+// ======================
+// TRANSFORM STYLE
+// ======================
+
+export const transformStyle = {
+  name: 'transform-style',
+  property: 'visual',
+  syntax: 'visual="transform-style:[value]"',
+  description: 'Set 3D transform style',
+  descriptionMs: 'Tetapkan gaya transform 3D',
+  category: 'visual',
+  values: [
+    { value: 'flat', css: 'transform-style: flat;', description: 'Flat rendering', descriptionMs: 'Persembahan rata' },
+    { value: 'preserve-3d', css: 'transform-style: preserve-3d;', description: 'Preserve 3D', descriptionMs: 'Kekalkan 3D' }
+  ],
+  examples: [
+    { code: '<div visual="transform-style:preserve-3d">3D space</div>', description: 'Preserve 3D' }
+  ]
+};
+
+// ======================
+// BACKFACE VISIBILITY
+// ======================
+
+export const backfaceVisibility = {
+  name: 'transform-backface',
+  property: 'visual',
+  syntax: 'visual="backface:[value]"',
+  description: 'Control backface visibility',
+  descriptionMs: 'Kawal keterlihatan belakang',
+  category: 'visual',
+  values: [
+    { value: 'visible', css: 'backface-visibility: visible;', description: 'Backface visible', descriptionMs: 'Belakang kelihatan' },
+    { value: 'hidden', css: 'backface-visibility: hidden;', description: 'Backface hidden', descriptionMs: 'Belakang tersembunyi' }
+  ],
+  examples: [
+    { code: '<div visual="backface:hidden">Hidden when rotated</div>', description: 'Hide backface' }
+  ]
+};
+
+// ======================
+// MASK
+// ======================
+
+export const mask = {
+  name: 'mask',
+  property: 'visual',
+  syntax: 'visual="mask:[value]"',
+  description: 'Apply mask to element',
+  descriptionMs: 'Terapkan topeng pada elemen',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'mask-image: none;', description: 'No mask', descriptionMs: 'Tiada topeng' },
+    { value: 'fade-y', css: 'mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);', description: 'Vertical fade', descriptionMs: 'Pudar menegak' },
+    { value: 'fade-x', css: 'mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);', description: 'Horizontal fade', descriptionMs: 'Pudar mendatar' }
+  ],
+  examples: [
+    { code: '<div visual="mask:fade-y">Faded edges</div>', description: 'Vertical fade mask' }
+  ]
+};
+
+// ======================
+// STATE PREFIXES
+// ======================
+
+export const statePrefixes = {
+  name: 'state-prefixes',
+  property: 'visual',
+  syntax: 'visual="hover:... focus:... active:..."',
+  description: 'Apply styles on specific states',
+  descriptionMs: 'Terapkan gaya pada keadaan tertentu',
+  category: 'visual',
+  values: [
+    { value: 'hover:', css: ':hover', description: 'On hover', descriptionMs: 'Pada hover' },
+    { value: 'focus:', css: ':focus', description: 'On focus', descriptionMs: 'Pada fokus' },
+    { value: 'active:', css: ':active', description: 'On active', descriptionMs: 'Pada aktif' },
+    { value: 'disabled:', css: ':disabled', description: 'When disabled', descriptionMs: 'Apabila dilumpuhkan' },
+    { value: 'visited:', css: ':visited', description: 'When visited', descriptionMs: 'Apabila dilawati' },
+    { value: 'first:', css: ':first-child', description: 'First child', descriptionMs: 'Anak pertama' },
+    { value: 'last:', css: ':last-child', description: 'Last child', descriptionMs: 'Anak terakhir' },
+    { value: 'odd:', css: ':nth-child(odd)', description: 'Odd children', descriptionMs: 'Anak ganjil' },
+    { value: 'even:', css: ':nth-child(even)', description: 'Even children', descriptionMs: 'Anak genap' }
+  ],
+  examples: [
+    { code: '<button visual="hover:bg:primary focus:outline:primary">Interactive button</button>', description: 'State prefixes' }
+  ]
+};
+
+// Export all 3D transform definitions
+export const transform3dDefinitions = {
+  perspective,
+  perspectiveOrigin,
+  transformStyle,
+  backfaceVisibility,
+  mask,
+  statePrefixes
+};
+
+export default transform3dDefinitions;

package/src/definitions/visual-transforms.js

@@ -0,0 +1,142 @@
+/**
+ * SenangStart CSS - Transform Utility Definitions
+ * Scale, rotate, translate, skew, origin
+ */
+
+// ======================
+// TRANSFORM - SCALE
+// ======================
+
+export const transformScale = {
+  name: 'transform-scale',
+  property: 'visual',
+  syntax: 'visual="scale:[value]"',
+  description: 'Scale element',
+  descriptionMs: 'Skala elemen',
+  category: 'visual',
+  supportsArbitrary: true,
+  dynamic: true,
+  values: [
+    { value: '0', css: 'transform: scale(0);', description: 'Scale to 0', descriptionMs: 'Skala ke 0' },
+    { value: '50', css: 'transform: scale(0.5);', description: 'Scale to 50%', descriptionMs: 'Skala ke 50%' },
+    { value: '75', css: 'transform: scale(0.75);', description: 'Scale to 75%', descriptionMs: 'Skala ke 75%' },
+    { value: '100', css: 'transform: scale(1);', description: 'Normal scale', descriptionMs: 'Skala normal' },
+    { value: '110', css: 'transform: scale(1.1);', description: 'Scale to 110%', descriptionMs: 'Skala ke 110%' },
+    { value: '125', css: 'transform: scale(1.25);', description: 'Scale to 125%', descriptionMs: 'Skala ke 125%' },
+    { value: '150', css: 'transform: scale(1.5);', description: 'Scale to 150%', descriptionMs: 'Skala ke 150%' }
+  ],
+  examples: [
+    { code: '<div visual="transition:transform hover:scale:110">Hover to grow</div>', description: 'Scale on hover' }
+  ]
+};
+
+// ======================
+// TRANSFORM - ROTATE
+// ======================
+
+export const transformRotate = {
+  name: 'transform-rotate',
+  property: 'visual',
+  syntax: 'visual="rotate:[degrees]"',
+  description: 'Rotate element',
+  descriptionMs: 'Putar elemen',
+  category: 'visual',
+  supportsArbitrary: true,
+  dynamic: true,
+  values: [
+    { value: '0', css: 'transform: rotate(0deg);', description: 'No rotation', descriptionMs: 'Tiada putaran' },
+    { value: '45', css: 'transform: rotate(45deg);', description: '45° rotation', descriptionMs: 'Putaran 45°' },
+    { value: '90', css: 'transform: rotate(90deg);', description: '90° rotation', descriptionMs: 'Putaran 90°' },
+    { value: '180', css: 'transform: rotate(180deg);', description: '180° rotation', descriptionMs: 'Putaran 180°' }
+  ],
+  examples: [
+    { code: '<div visual="rotate:45">Rotated 45 degrees</div>', description: '45 degree rotation' }
+  ]
+};
+
+// ======================
+// TRANSFORM - TRANSLATE
+// ======================
+
+export const transformTranslate = {
+  name: 'transform-translate',
+  property: 'visual',
+  syntax: 'visual="translate-x:[value]" or visual="translate-y:[value]"',
+  description: 'Translate element position',
+  descriptionMs: 'Alihkan kedudukan elemen',
+  category: 'visual',
+  usesScale: 'spacing',
+  supportsArbitrary: true,
+  dynamic: true,
+  values: [
+    { value: '0', css: 'transform: translateX(0);', description: 'No translation', descriptionMs: 'Tiada alihan' },
+    { value: 'full', css: 'transform: translateX(100%);', description: 'Full width', descriptionMs: 'Lebar penuh' },
+    { value: '1/2', css: 'transform: translateX(50%);', description: 'Half width', descriptionMs: 'Separuh lebar' }
+  ],
+  examples: [
+    { code: '<div visual="translate-x:full">Moved right</div>', description: 'Translate right' }
+  ]
+};
+
+// ======================
+// TRANSFORM - SKEW
+// ======================
+
+export const transformSkew = {
+  name: 'transform-skew',
+  property: 'visual',
+  syntax: 'visual="skew-x:[degrees]" or visual="skew-y:[degrees]"',
+  description: 'Skew element',
+  descriptionMs: 'Condongkan elemen',
+  category: 'visual',
+  supportsArbitrary: true,
+  dynamic: true,
+  values: [
+    { value: '0', css: 'transform: skewX(0deg);', description: 'No skew', descriptionMs: 'Tiada condong' },
+    { value: '3', css: 'transform: skewX(3deg);', description: '3° skew', descriptionMs: 'Condong 3°' },
+    { value: '6', css: 'transform: skewX(6deg);', description: '6° skew', descriptionMs: 'Condong 6°' },
+    { value: '12', css: 'transform: skewX(12deg);', description: '12° skew', descriptionMs: 'Condong 12°' }
+  ],
+  examples: [
+    { code: '<div visual="skew-x:6">Skewed element</div>', description: 'Skew 6 degrees' }
+  ]
+};
+
+// ======================
+// TRANSFORM ORIGIN
+// ======================
+
+export const transformOrigin = {
+  name: 'transform-origin',
+  property: 'visual',
+  syntax: 'visual="origin:[value]"',
+  description: 'Set transform origin point',
+  descriptionMs: 'Tetapkan titik asal transformasi',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'center', css: 'transform-origin: center;', description: 'Center origin', descriptionMs: 'Asal tengah' },
+    { value: 'top', css: 'transform-origin: top;', description: 'Top origin', descriptionMs: 'Asal atas' },
+    { value: 'top-right', css: 'transform-origin: top right;', description: 'Top right', descriptionMs: 'Atas kanan' },
+    { value: 'right', css: 'transform-origin: right;', description: 'Right origin', descriptionMs: 'Asal kanan' },
+    { value: 'bottom-right', css: 'transform-origin: bottom right;', description: 'Bottom right', descriptionMs: 'Bawah kanan' },
+    { value: 'bottom', css: 'transform-origin: bottom;', description: 'Bottom origin', descriptionMs: 'Asal bawah' },
+    { value: 'bottom-left', css: 'transform-origin: bottom left;', description: 'Bottom left', descriptionMs: 'Bawah kiri' },
+    { value: 'left', css: 'transform-origin: left;', description: 'Left origin', descriptionMs: 'Asal kiri' },
+    { value: 'top-left', css: 'transform-origin: top left;', description: 'Top left', descriptionMs: 'Atas kiri' }
+  ],
+  examples: [
+    { code: '<div visual="rotate:45 origin:top-left">Rotate from corner</div>', description: 'Rotate from corner' }
+  ]
+};
+
+// Export all transform definitions
+export const transformDefinitions = {
+  transformScale,
+  transformRotate,
+  transformTranslate,
+  transformSkew,
+  transformOrigin
+};
+
+export default transformDefinitions;

package/src/definitions/visual-transitions.js

@@ -0,0 +1,277 @@
+/**
+ * SenangStart CSS - Transition & Animation Utility Definitions
+ * Transition properties, duration, timing, delay, and animations
+ */
+
+// ======================
+// TRANSITION PROPERTY
+// ======================
+
+export const transitionProperty = {
+  name: 'transition-property',
+  property: 'visual',
+  syntax: 'visual="transition:[value]"',
+  description: 'Set transition properties',
+  descriptionMs: 'Tetapkan properti peralihan',
+  category: 'visual',
+  values: [
+    { value: 'none', css: 'transition-property: none;', description: 'No transition', descriptionMs: 'Tiada peralihan' },
+    { value: 'all', css: 'transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;', description: 'All properties', descriptionMs: 'Semua properti' },
+    { value: 'colors', css: 'transition-property: color, background-color, border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;', description: 'Color properties', descriptionMs: 'Properti warna' },
+    { value: 'opacity', css: 'transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;', description: 'Opacity only', descriptionMs: 'Kelegapan sahaja' },
+    { value: 'shadow', css: 'transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;', description: 'Shadow only', descriptionMs: 'Bayang sahaja' },
+    { value: 'transform', css: 'transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;', description: 'Transform only', descriptionMs: 'Transformasi sahaja' }
+  ],
+  examples: [
+    { code: '<button visual="transition:all hover:bg:primary">Smooth hover</button>', description: 'Smooth transition' }
+  ]
+};
+
+// ======================
+// TRANSITION DURATION
+// ======================
+
+export const transitionDuration = {
+  name: 'transition-duration',
+  property: 'visual',
+  syntax: 'visual="duration:[value]"',
+  description: 'Set transition duration',
+  descriptionMs: 'Tetapkan tempoh peralihan',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'instant', css: 'transition-duration: 75ms;', description: '75ms', descriptionMs: '75ms' },
+    { value: 'quick', css: 'transition-duration: 100ms;', description: '100ms', descriptionMs: '100ms' },
+    { value: 'fast', css: 'transition-duration: 150ms;', description: '150ms', descriptionMs: '150ms' },
+    { value: 'normal', css: 'transition-duration: 200ms;', description: '200ms', descriptionMs: '200ms' },
+    { value: 'slow', css: 'transition-duration: 300ms;', description: '300ms', descriptionMs: '300ms' },
+    { value: 'slower', css: 'transition-duration: 500ms;', description: '500ms', descriptionMs: '500ms' },
+    { value: 'lazy', css: 'transition-duration: 700ms;', description: '700ms', descriptionMs: '700ms' }
+  ],
+  examples: [
+    { code: '<div visual="transition:all duration:slow">Slow transition</div>', description: 'Slow duration' }
+  ]
+};
+
+// ======================
+// TRANSITION TIMING
+// ======================
+
+export const transitionTiming = {
+  name: 'transition-timing',
+  property: 'visual',
+  syntax: 'visual="ease:[value]"',
+  description: 'Set transition timing function',
+  descriptionMs: 'Tetapkan fungsi masa peralihan',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'linear', css: 'transition-timing-function: linear;', description: 'Linear timing', descriptionMs: 'Masa linear' },
+    { value: 'in', css: 'transition-timing-function: cubic-bezier(0.4, 0, 1, 1);', description: 'Ease in', descriptionMs: 'Memasuki mudah' },
+    { value: 'out', css: 'transition-timing-function: cubic-bezier(0, 0, 0.2, 1);', description: 'Ease out', descriptionMs: 'Keluar mudah' },
+    { value: 'in-out', css: 'transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);', description: 'Ease in-out', descriptionMs: 'Masuk-keluar mudah' }
+  ],
+  examples: [
+    { code: '<div visual="transition:all ease:out">Ease out effect</div>', description: 'Ease out timing' }
+  ]
+};
+
+// ======================
+// TRANSITION DELAY
+// ======================
+
+export const transitionDelay = {
+  name: 'transition-delay',
+  property: 'visual',
+  syntax: 'visual="delay:[value]"',
+  description: 'Set transition delay',
+  descriptionMs: 'Tetapkan kelewatan peralihan',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'instant', css: 'transition-delay: 75ms;', description: '75ms delay', descriptionMs: 'Kelewatan 75ms' },
+    { value: 'quick', css: 'transition-delay: 100ms;', description: '100ms delay', descriptionMs: 'Kelewatan 100ms' },
+    { value: 'fast', css: 'transition-delay: 150ms;', description: '150ms delay', descriptionMs: 'Kelewatan 150ms' },
+    { value: 'normal', css: 'transition-delay: 200ms;', description: '200ms delay', descriptionMs: 'Kelewatan 200ms' },
+    { value: 'slow', css: 'transition-delay: 300ms;', description: '300ms delay', descriptionMs: 'Kelewatan 300ms' }
+  ],
+  examples: [
+    { code: '<div visual="transition:all delay:slow">Delayed transition</div>', description: 'Delayed start' }
+  ]
+};
+
+// ======================
+// ANIMATION
+// ======================
+
+export const animation = {
+  name: 'animation-builtin',
+  property: 'visual',
+  syntax: 'visual="animate:[value]"',
+  description: 'Apply built-in animations',
+  descriptionMs: 'Terapkan animasi terbina dalam',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'none', css: 'animation: none;', description: 'No animation', descriptionMs: 'Tiada animasi' },
+    { value: 'spin', css: 'animation: spin 1s linear infinite;', description: 'Spinning', descriptionMs: 'Berpusing' },
+    { value: 'ping', css: 'animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;', description: 'Ping effect', descriptionMs: 'Kesan ping' },
+    { value: 'pulse', css: 'animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;', description: 'Pulsing', descriptionMs: 'Berdenyut' },
+    { value: 'bounce', css: 'animation: bounce 1s infinite;', description: 'Bouncing', descriptionMs: 'Melantun' }
+  ],
+  examples: [
+    { code: '<div visual="animate:spin">Loading...</div>', description: 'Spinning loader' }
+  ]
+};
+
+// ======================
+// ANIMATION DURATION
+// ======================
+
+export const animationDuration = {
+  name: 'animation-duration',
+  property: 'visual',
+  syntax: 'visual="animation-duration:[value]"',
+  description: 'Set animation duration',
+  descriptionMs: 'Tetapkan tempoh animasi',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'instant', css: 'animation-duration: 75ms;', description: '75ms', descriptionMs: '75ms' },
+    { value: 'quick', css: 'animation-duration: 100ms;', description: '100ms', descriptionMs: '100ms' },
+    { value: 'fast', css: 'animation-duration: 150ms;', description: '150ms', descriptionMs: '150ms' },
+    { value: 'normal', css: 'animation-duration: 200ms;', description: '200ms', descriptionMs: '200ms' },
+    { value: 'slow', css: 'animation-duration: 300ms;', description: '300ms', descriptionMs: '300ms' },
+    { value: 'slower', css: 'animation-duration: 500ms;', description: '500ms', descriptionMs: '500ms' },
+    { value: 'lazy', css: 'animation-duration: 700ms;', description: '700ms', descriptionMs: '700ms' }
+  ],
+  examples: [
+    { code: '<div visual="animate:spin animation-duration:slow">Slow spin</div>', description: 'Slow animation' }
+  ]
+};
+
+// ======================
+// ANIMATION DELAY
+// ======================
+
+export const animationDelay = {
+  name: 'animation-delay',
+  property: 'visual',
+  syntax: 'visual="animation-delay:[value]"',
+  description: 'Set animation delay',
+  descriptionMs: 'Tetapkan kelewatan animasi',
+  category: 'visual',
+  supportsArbitrary: true,
+  values: [
+    { value: 'instant', css: 'animation-delay: 75ms;', description: '75ms delay', descriptionMs: 'Kelewatan 75ms' },
+    { value: 'quick', css: 'animation-delay: 100ms;', description: '100ms delay', descriptionMs: 'Kelewatan 100ms' },
+    { value: 'fast', css: 'animation-delay: 150ms;', description: '150ms delay', descriptionMs: 'Kelewatan 150ms' },
+    { value: 'normal', css: 'animation-delay: 200ms;', description: '200ms delay', descriptionMs: 'Kelewatan 200ms' },
+    { value: 'slow', css: 'animation-delay: 300ms;', description: '300ms delay', descriptionMs: 'Kelewatan 300ms' }
+  ],
+  examples: [
+    { code: '<div visual="animate:bounce animation-delay:slow">Delayed bounce</div>', description: 'Delayed animation' }
+  ]
+};
+
+// ======================
+// ANIMATION ITERATION
+// ======================
+
+export const animationIteration = {
+  name: 'animation-iteration',
+  property: 'visual',
+  syntax: 'visual="animation-iteration:[value]"',
+  description: 'Set animation iteration count',
+  descriptionMs: 'Tetapkan bilangan ulangan animasi',
+  category: 'visual',
+  dynamic: true,
+  values: [
+    { value: '1', css: 'animation-iteration-count: 1;', description: 'Once', descriptionMs: 'Sekali' },
+    { value: 'infinite', css: 'animation-iteration-count: infinite;', description: 'Forever', descriptionMs: 'Selamanya' }
+  ],
+  examples: [
+    { code: '<div visual="animate:bounce animation-iteration:1">Bounce once</div>', description: 'Single iteration' }
+  ]
+};
+
+// ======================
+// ANIMATION DIRECTION
+// ======================
+
+export const animationDirection = {
+  name: 'animation-direction',
+  property: 'visual',
+  syntax: 'visual="animation-direction:[value]"',
+  description: 'Set animation direction',
+  descriptionMs: 'Tetapkan arah animasi',
+  category: 'visual',
+  values: [
+    { value: 'normal', css: 'animation-direction: normal;', description: 'Normal direction', descriptionMs: 'Arah normal' },
+    { value: 'reverse', css: 'animation-direction: reverse;', description: 'Reverse direction', descriptionMs: 'Arah terbalik' },
+    { value: 'alternate', css: 'animation-direction: alternate;', description: 'Alternate direction', descriptionMs: 'Arah berselang' },
+    { value: 'alternate-reverse', css: 'animation-direction: alternate-reverse;', description: 'Alternate reverse', descriptionMs: 'Berselang terbalik' }
+  ],
+  examples: [
+    { code: '<div visual="animate:bounce animation-direction:alternate">Alternating</div>', description: 'Alternate direction' }
+  ]
+};
+
+// ======================
+// ANIMATION FILL MODE
+// ======================
+
+export const animationFill = {
+  name: 'animation-fill',
+  property: 'visual',
+  syntax: 'visual="animation-fill:[value]"',
+  description: 'Set animation fill mode',
+  descriptionMs: 'Tetapkan mod pengisian animasi',
+  category: 'visual',
+  values: [
+    { value: 'none', css: 'animation-fill-mode: none;', description: 'No fill', descriptionMs: 'Tiada pengisian' },
+    { value: 'forwards', css: 'animation-fill-mode: forwards;', description: 'Keep end state', descriptionMs: 'Kekalkan keadaan akhir' },
+    { value: 'backwards', css: 'animation-fill-mode: backwards;', description: 'Apply start state', descriptionMs: 'Terapkan keadaan mula' },
+    { value: 'both', css: 'animation-fill-mode: both;', description: 'Both directions', descriptionMs: 'Kedua-dua arah' }
+  ],
+  examples: [
+    { code: '<div visual="animate:bounce animation-fill:forwards">Stays at end</div>', description: 'Keep final position' }
+  ]
+};
+
+// ======================
+// ANIMATION PLAY STATE
+// ======================
+
+export const animationPlay = {
+  name: 'animation-play',
+  property: 'visual',
+  syntax: 'visual="animation-play:[value]"',
+  description: 'Control animation play state',
+  descriptionMs: 'Kawal keadaan main animasi',
+  category: 'visual',
+  values: [
+    { value: 'running', css: 'animation-play-state: running;', description: 'Animation running', descriptionMs: 'Animasi berjalan' },
+    { value: 'paused', css: 'animation-play-state: paused;', description: 'Animation paused', descriptionMs: 'Animasi dijeda' }
+  ],
+  examples: [
+    { code: '<div visual="animate:spin hover:animation-play:paused">Pause on hover</div>', description: 'Pause on hover' }
+  ]
+};
+
+// Export all transition/animation definitions
+export const transitionDefinitions = {
+  transitionProperty,
+  transitionDuration,
+  transitionTiming,
+  transitionDelay,
+  animation,
+  animationDuration,
+  animationDelay,
+  animationIteration,
+  animationDirection,
+  animationFill,
+  animationPlay
+};
+
+export default transitionDefinitions;