@bookklik/senangstart-css 0.1.8 → 0.2.0

package/src/definitions/visual-transitions.js

@@ -24,6 +24,18 @@ export const transitionProperty = {
   ],
   examples: [
     { code: '<button visual="transition:all hover:bg:primary">Smooth hover</button>', description: 'Smooth transition' }
+  ],
+  preview: [
+    {
+      title: 'Transition',
+      titleMs: 'Peralihan',
+      description: 'Smooth property changes',
+      descriptionMs: 'Perubahan properti yang lancar',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <button space="p:small" visual="bg:primary text:white rounded:small transition:all">transition:all</button>
+</div>`,
+      highlightValue: 'transition:all'
+    }
   ]
 };
 
@@ -50,6 +62,19 @@ export const transitionDuration = {
   ],
   examples: [
     { code: '<div visual="transition:all duration:slow">Slow transition</div>', description: 'Slow duration' }
+  ],
+  preview: [
+    {
+      title: 'Duration',
+      titleMs: 'Tempoh',
+      description: 'Control transition speed',
+      descriptionMs: 'Kawal kelajuan peralihan',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">fast: 150ms</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
+</div>`,
+      highlightValue: 'duration:slow'
+    }
   ]
 };
 
@@ -73,6 +98,20 @@ export const transitionTiming = {
   ],
   examples: [
     { code: '<div visual="transition:all ease:out">Ease out effect</div>', description: 'Ease out timing' }
+  ],
+  preview: [
+    {
+      title: 'Timing Function',
+      titleMs: 'Fungsi Masa',
+      description: 'Control acceleration curve',
+      descriptionMs: 'Kawal lengkung pecutan',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">ease:in</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">ease:out</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">ease:in-out</div>
+</div>`,
+      highlightValue: 'ease:out'
+    }
   ]
 };
 
@@ -97,6 +136,18 @@ export const transitionDelay = {
   ],
   examples: [
     { code: '<div visual="transition:all delay:slow">Delayed transition</div>', description: 'Delayed start' }
+  ],
+  preview: [
+    {
+      title: 'Transition Delay',
+      titleMs: 'Kelewatan Peralihan',
+      description: 'Delay before transition starts',
+      descriptionMs: 'Kelewatan sebelum peralihan bermula',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">delay:slow (300ms)</div>
+</div>`,
+      highlightValue: 'delay:slow'
+    }
   ]
 };
 
@@ -121,6 +172,20 @@ export const animation = {
   ],
   examples: [
     { code: '<div visual="animate:spin">Loading...</div>', description: 'Spinning loader' }
+  ],
+  preview: [
+    {
+      title: 'Built-in Animations',
+      titleMs: 'Animasi Terbina Dalam',
+      description: 'Ready-to-use animations',
+      descriptionMs: 'Animasi sedia guna',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">spin</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">pulse</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">bounce</div>
+</div>`,
+      highlightValue: 'animate:spin'
+    }
   ]
 };
 
@@ -147,6 +212,19 @@ export const animationDuration = {
   ],
   examples: [
     { code: '<div visual="animate:spin animation-duration:slow">Slow spin</div>', description: 'Slow animation' }
+  ],
+  preview: [
+    {
+      title: 'Animation Duration',
+      titleMs: 'Tempoh Animasi',
+      description: 'Control animation speed',
+      descriptionMs: 'Kawal kelajuan animasi',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">fast: 150ms</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">slow: 300ms</div>
+</div>`,
+      highlightValue: 'animation-duration:slow'
+    }
   ]
 };
 
@@ -171,6 +249,18 @@ export const animationDelay = {
   ],
   examples: [
     { code: '<div visual="animate:bounce animation-delay:slow">Delayed bounce</div>', description: 'Delayed animation' }
+  ],
+  preview: [
+    {
+      title: 'Animation Delay',
+      titleMs: 'Kelewatan Animasi',
+      description: 'Delay before animation starts',
+      descriptionMs: 'Kelewatan sebelum animasi bermula',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">delay:slow (300ms)</div>
+</div>`,
+      highlightValue: 'animation-delay:slow'
+    }
   ]
 };
 
@@ -192,6 +282,19 @@ export const animationIteration = {
   ],
   examples: [
     { code: '<div visual="animate:bounce animation-iteration:1">Bounce once</div>', description: 'Single iteration' }
+  ],
+  preview: [
+    {
+      title: 'Animation Iteration',
+      titleMs: 'Ulangan Animasi',
+      description: 'Control number of loops',
+      descriptionMs: 'Kawal bilangan gelung',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">1 (once)</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">infinite</div>
+</div>`,
+      highlightValue: 'animation-iteration:1'
+    }
   ]
 };
 
@@ -214,6 +317,20 @@ export const animationDirection = {
   ],
   examples: [
     { code: '<div visual="animate:bounce animation-direction:alternate">Alternating</div>', description: 'Alternate direction' }
+  ],
+  preview: [
+    {
+      title: 'Animation Direction',
+      titleMs: 'Arah Animasi',
+      description: 'Control playback direction',
+      descriptionMs: 'Kawal arah main balik',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">reverse</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">alternate</div>
+</div>`,
+      highlightValue: 'animation-direction:alternate'
+    }
   ]
 };
 
@@ -236,6 +353,20 @@ export const animationFill = {
   ],
   examples: [
     { code: '<div visual="animate:bounce animation-fill:forwards">Stays at end</div>', description: 'Keep final position' }
+  ],
+  preview: [
+    {
+      title: 'Animation Fill',
+      titleMs: 'Pengisian Animasi',
+      description: 'Control state before/after animation',
+      descriptionMs: 'Kawal keadaan sebelum/selepas animasi',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">forwards</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">both</div>
+</div>`,
+      highlightValue: 'animation-fill:forwards'
+    }
   ]
 };
 
@@ -256,6 +387,19 @@ export const animationPlay = {
   ],
   examples: [
     { code: '<div visual="animate:spin hover:animation-play:paused">Pause on hover</div>', description: 'Pause on hover' }
+  ],
+  preview: [
+    {
+      title: 'Animation Play State',
+      titleMs: 'Keadaan Main Animasi',
+      description: 'Pause or resume animations',
+      descriptionMs: 'Jeda atau sambung animasi',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">running</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">paused</div>
+</div>`,
+      highlightValue: 'animation-play:paused'
+    }
   ]
 };
 

package/src/definitions/visual-typography.js

@@ -22,6 +22,20 @@ export const textAlignment = {
   ],
   examples: [
     { code: '<p visual="text:center">Centered text</p>', description: 'Center text' }
+  ],
+  preview: [
+    {
+      title: 'Text Alignment',
+      titleMs: 'Penjajaran Teks',
+      description: 'Align text within container',
+      descriptionMs: 'Jajarkan teks dalam bekas',
+      html: `<div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div visual="text:left bg:primary text:white rounded:small" space="p:small">left</div>
+  <div visual="text:center bg:primary text:white rounded:small" space="p:small">center</div>
+  <div visual="text:right bg:primary text:white rounded:small" space="p:small">right</div>
+</div>`,
+      highlightValue: 'text:center'
+    }
   ]
 };
 
@@ -44,6 +58,20 @@ export const textTransform = {
   ],
   examples: [
     { code: '<span visual="uppercase">Uppercase text</span>', description: 'Uppercase' }
+  ],
+  preview: [
+    {
+      title: 'Text Transform',
+      titleMs: 'Ubah Kes Teks',
+      description: 'Change text case',
+      descriptionMs: 'Ubah kes teks',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" style="text-transform: uppercase;">upper</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" style="text-transform: lowercase;">LOWER</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" style="text-transform: capitalize;">capitalize</span>
+</div>`,
+      highlightValue: 'uppercase'
+    }
   ]
 };
 
@@ -66,6 +94,19 @@ export const textDecoration = {
   ],
   examples: [
     { code: '<a visual="no-underline">No underline link</a>', description: 'Remove underline' }
+  ],
+  preview: [
+    {
+      title: 'Text Decoration',
+      titleMs: 'Hiasan Teks',
+      description: 'Add lines to text',
+      descriptionMs: 'Tambah garis pada teks',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" style="text-decoration: underline;">underline</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small" style="text-decoration: line-through;">line-through</span>
+</div>`,
+      highlightValue: 'underline'
+    }
   ]
 };
 
@@ -87,6 +128,18 @@ export const textOverflow = {
   ],
   examples: [
     { code: '<div visual="truncate">Very long text that gets truncated...</div>', description: 'Truncate text' }
+  ],
+  preview: [
+    {
+      title: 'Text Overflow',
+      titleMs: 'Limpahan Teks',
+      description: 'Handle overflowing text',
+      descriptionMs: 'Kendalikan teks yang melimpah',
+      html: `<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">This is truncated text...</div>
+</div>`,
+      highlightValue: 'truncate'
+    }
   ]
 };
 
@@ -109,6 +162,20 @@ export const textWrap = {
   ],
   examples: [
     { code: '<h1 visual="text-balance">Balanced heading</h1>', description: 'Balanced text' }
+  ],
+  preview: [
+    {
+      title: 'Text Wrap',
+      titleMs: 'Pembalutan Teks',
+      description: 'Control line wrapping',
+      descriptionMs: 'Kawal pembalutan baris',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">wrap</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">nowrap</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">balance</div>
+</div>`,
+      highlightValue: 'text-balance'
+    }
   ]
 };
 
@@ -133,6 +200,20 @@ export const whitespace = {
   ],
   examples: [
     { code: '<pre visual="whitespace:pre">Preserved whitespace</pre>', description: 'Preserve whitespace' }
+  ],
+  preview: [
+    {
+      title: 'Whitespace',
+      titleMs: 'Ruang Putih',
+      description: 'Control whitespace handling',
+      descriptionMs: 'Kawal pengendalian ruang putih',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">nowrap</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">pre</div>
+</div>`,
+      highlightValue: 'whitespace:pre'
+    }
   ]
 };
 
@@ -155,6 +236,20 @@ export const wordBreak = {
   ],
   examples: [
     { code: '<div visual="break-words">Long words break properly</div>', description: 'Break long words' }
+  ],
+  preview: [
+    {
+      title: 'Word Break',
+      titleMs: 'Pemecahan Perkataan',
+      description: 'Control word breaking',
+      descriptionMs: 'Kawal pemecahan perkataan',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">break-words</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">break-all</div>
+</div>`,
+      highlightValue: 'break-words'
+    }
   ]
 };
 
@@ -176,6 +271,20 @@ export const hyphens = {
   ],
   examples: [
     { code: '<p visual="hyphens:auto">Automatic hyphenation</p>', description: 'Auto hyphens' }
+  ],
+  preview: [
+    {
+      title: 'Hyphens',
+      titleMs: 'Sempang',
+      description: 'Control automatic hyphenation',
+      descriptionMs: 'Kawal sempang automatik',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">manual</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+</div>`,
+      highlightValue: 'hyphens:auto'
+    }
   ]
 };
 
@@ -198,6 +307,18 @@ export const textIndent = {
   ],
   examples: [
     { code: '<p visual="indent:medium">Indented paragraph</p>', description: 'Indented text' }
+  ],
+  preview: [
+    {
+      title: 'Text Indent',
+      titleMs: 'Inden Teks',
+      description: 'Indent first line of text',
+      descriptionMs: 'Inden baris pertama teks',
+      html: `<div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <p visual="bg:primary text:white rounded:small" space="p:small" style="text-indent: 2rem;">Indented text example...</p>
+</div>`,
+      highlightValue: 'indent:medium'
+    }
   ]
 };
 
@@ -224,6 +345,20 @@ export const verticalAlign = {
   ],
   examples: [
     { code: '<img visual="align:middle">Vertically centered</img>', description: 'Middle alignment' }
+  ],
+  preview: [
+    {
+      title: 'Vertical Align',
+      titleMs: 'Penjajaran Menegak',
+      description: 'Align inline elements',
+      descriptionMs: 'Jajarkan elemen sebaris',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">middle</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
+</div>`,
+      highlightValue: 'align:middle'
+    }
   ]
 };
 
@@ -244,6 +379,19 @@ export const fontStyle = {
   ],
   examples: [
     { code: '<em visual="not-italic">Normal style emphasis</em>', description: 'Remove italic' }
+  ],
+  preview: [
+    {
+      title: 'Font Style',
+      titleMs: 'Gaya Fon',
+      description: 'Italic or normal text',
+      descriptionMs: 'Teks italic atau normal',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <span space="p:small" visual="bg:primary text:white rounded:small" style="font-style: italic;">italic</span>
+  <span space="p:small" visual="bg:primary text:white rounded:small">normal</span>
+</div>`,
+      highlightValue: 'italic'
+    }
   ]
 };
 
@@ -264,6 +412,19 @@ export const fontSmoothing = {
   ],
   examples: [
     { code: '<body visual="antialiased">Smooth fonts</body>', description: 'Antialiased text' }
+  ],
+  preview: [
+    {
+      title: 'Font Smoothing',
+      titleMs: 'Penghalusan Fon',
+      description: 'Control text rendering',
+      descriptionMs: 'Kawal persembahan teks',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">antialiased</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">subpixel</div>
+</div>`,
+      highlightValue: 'antialiased'
+    }
   ]
 };
 
@@ -288,6 +449,20 @@ export const lineClamp = {
   ],
   examples: [
     { code: '<p visual="line-clamp:3">Text limited to 3 lines...</p>', description: 'Clamp to 3 lines' }
+  ],
+  preview: [
+    {
+      title: 'Line Clamp',
+      titleMs: 'Had Baris',
+      description: 'Limit text to specific lines',
+      descriptionMs: 'Hadkan teks kepada baris tertentu',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">1</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">2</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">3</div>
+</div>`,
+      highlightValue: 'line-clamp:3'
+    }
   ]
 };
 
@@ -312,6 +487,20 @@ export const listStyle = {
   ],
   examples: [
     { code: '<ul visual="list:none">No bullets</ul>', description: 'Remove bullets' }
+  ],
+  preview: [
+    {
+      title: 'List Style',
+      titleMs: 'Gaya Senarai',
+      description: 'Control list markers',
+      descriptionMs: 'Kawal penanda senarai',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">disc</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">decimal</div>
+</div>`,
+      highlightValue: 'list:none'
+    }
   ]
 };
 
@@ -335,6 +524,18 @@ export const textShadow = {
   ],
   examples: [
     { code: '<h1 visual="text-shadow:medium">Shadowed heading</h1>', description: 'Text shadow' }
+  ],
+  preview: [
+    {
+      title: 'Text Shadow',
+      titleMs: 'Bayang Teks',
+      description: 'Add shadow to text',
+      descriptionMs: 'Tambah bayang pada teks',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small" style="text-shadow: 0 2px 4px rgba(0,0,0,0.3);">shadow</div>
+</div>`,
+      highlightValue: 'text-shadow:medium'
+    }
   ]
 };
 
@@ -360,6 +561,19 @@ export const fontVariantNumeric = {
   ],
   examples: [
     { code: '<span visual="tabular-nums">123,456.00</span>', description: 'Tabular numbers' }
+  ],
+  preview: [
+    {
+      title: 'Font Variant Numeric',
+      titleMs: 'Varian Nombor Fon',
+      description: 'Control number display',
+      descriptionMs: 'Kawal paparan nombor',
+      html: `<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <div space="p:small" visual="bg:primary text:white rounded:small">tabular-nums</div>
+  <div space="p:small" visual="bg:primary text:white rounded:small">ordinal</div>
+</div>`,
+      highlightValue: 'tabular-nums'
+    }
   ]
 };