@bookklik/senangstart-css 0.1.3 → 0.1.7

package/docs/ms/reference/space/padding.md

@@ -0,0 +1,49 @@
+# Padding
+
+Tambah padding pada elemen
+
+## Sintaks
+```
+space="p:[value]" or space="p-{side}:[value]"
+```
+
+## Nilai
+
+| Properti | CSS Output | Huraian |
+|--------|------------|-------------|
+| `p` | `padding: var(--s-{value})` | Semua sisi |
+| `p-t` | `padding-top: var(--s-{value})` | Atas |
+| `p-r` | `padding-right: var(--s-{value})` | Kanan |
+| `p-b` | `padding-bottom: var(--s-{value})` | Bawah |
+| `p-l` | `padding-left: var(--s-{value})` | Kiri |
+| `p-x` | `padding-left: var(--s-{value}) padding-right: var(--s-{value})` | Mendatar |
+| `p-y` | `padding-top: var(--s-{value}) padding-bottom: var(--s-{value})` | Menegak |
+
+## Nilai Skala
+
+`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+
+## Contoh
+
+```html
+<div space="p:medium">Padding all sides</div>
+<div space="p-x:big p-y:small">Different padding</div>
+<div space="p:[20px]">Custom padding</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div space="padding:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div space="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/space/scale-reference.md

@@ -0,0 +1,43 @@
+# Rujukan Skala
+
+Skala semula jadi yang digunakan untuk sifat jarak.
+
+## Nilai Skala
+
+| Kata Kunci | Nilai Lalai |
+|------------|-------------|
+| `none` | 0px |
+| `tiny` | 4px |
+| `small` | 8px |
+| `medium` | 16px |
+| `big` | 32px |
+| `giant` | 64px |
+| `vast` | 128px |
+
+## Penyesuaian
+
+Timpa nilai skala dalam konfigurasi anda:
+
+```js
+// senangstart.config.js
+module.exports = {
+  scale: {
+    tiny: '2px',
+    small: '4px',
+    medium: '8px',
+    big: '16px',
+    giant: '32px',
+    vast: '64px'
+  }
+}
+```
+
+## Penggunaan
+
+Semua sifat jarak menggunakan skala yang sama:
+
+```html
+<div space="p:medium m:small g:big">
+  Jarak konsisten menggunakan skala semula jadi
+</div>
+```

package/docs/ms/reference/space/sizing.md

@@ -0,0 +1,27 @@
+# Saiz
+
+Mengawal lebar dan tinggi dengan atribut `space`.
+
+## Sifat
+
+| Property | Output CSS |
+|----------|------------|
+| `w` | `width` |
+| `h` | `height` |
+| `min-w` | `min-width` |
+| `max-w` | `max-width` |
+| `min-h` | `min-height` |
+| `max-h` | `max-height` |
+
+## Contoh
+
+```html
+<!-- Saiz eksplisit -->
+<div space="w:[100%] h:[400px]">Dimensi tetap</div>
+
+<!-- Kontena max width -->
+<div space="max-w:[1200px]">Kontena terhad</div>
+
+<!-- Tinggi penuh viewport -->
+<div space="min-h:[100vh]">Sekurang-kurangnya penuh viewport</div>
+```

package/docs/ms/reference/space/width.md

@@ -0,0 +1,45 @@
+# Width
+
+Tetapkan lebar elemen
+
+## Sintaks
+```
+space="w:[value]"
+```
+
+## Nilai
+
+| Properti | CSS Output | Huraian |
+|--------|------------|-------------|
+| `w` | `width: var(--s-{value})` | Lebar |
+| `min-w` | `min-width: var(--s-{value})` | Lebar minimum |
+| `max-w` | `max-width: var(--s-{value})` | Lebar maksimum |
+
+## Nilai Skala
+
+`none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+
+## Contoh
+
+```html
+<div space="w:[100%]">Full width</div>
+<div space="max-w:[1200px]">Max width container</div>
+<div space="min-w:[300px]">Min width</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div space="width:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div space="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/space.md

@@ -0,0 +1,37 @@
+# Rujukan Space
+
+Atribut `space` mengawal saiz dan jarak.
+
+## Sintaksis
+
+```
+[breakpoint]:[property]:[scale]
+```
+
+**Titik Henti:** `mob:`, `tab:`, `lap:`, `desk:`
+
+**Nilai skala:** `none`, `tiny`, `small`, `medium`, `big`, `giant`, `vast`
+
+## Jarak
+
+- [Padding](./space/padding) - Jarak dalaman (`p`, `p-t`, `p-r`, `p-b`, `p-l`, `p-x`, `p-y`)
+- [Margin](./space/margin) - Jarak luar (`m`, `m-t`, `m-r`, `m-b`, `m-l`, `m-x`, `m-y`)
+- [Gap](./space/gap) - Jarak flex/grid (`g`, `g-x`, `g-y`)
+
+## Dimensi
+
+- [Lebar](./space/width) - Lebar elemen (`w`, `min-w`, `max-w`)
+- [Tinggi](./space/height) - Tinggi elemen (`h`, `min-h`, `max-h`)
+
+## Rujukan
+
+- [Nilai Arbitrari](./space/arbitrary-values) - Sintaks escape hatch `[value]`
+- [Rujukan Skala](./space/scale-reference) - Nilai kata kunci skala
+
+## Contoh Pantas
+
+```html
+<div space="p:medium m-b:big w:[100%] max-w:[800px]">
+  Kad dengan padding sederhana, margin bawah besar, dan lebar terhad
+</div>
+```

package/docs/ms/reference/spacing.md

@@ -0,0 +1,88 @@
+# Rujukan Jarak
+
+Rujukan lengkap untuk skala jarak.
+
+## Skala Lalai
+
+| Kata Kunci | Nilai | Kes Penggunaan |
+|------------|-------|----------------|
+| `none` | 0px | Reset jarak |
+| `thin` | 1px | Sempadan halus |
+| `regular` | 2px | Sempadan standard |
+| `thick` | 3px | Sempadan tebal |
+| `tiny` | 4px | Offset kecil |
+| `small` | 8px | Kumpulkan item berkaitan |
+| `medium` | 16px | Lalai standard |
+| `big` | 32px | Pisahkan seksyen |
+| `giant` | 64px | Bahagian layout |
+| `vast` | 128px | Seksyen hero |
+
+## Variable CSS
+
+Skala jarak menghasilkan variable CSS ini:
+
+```css
+:root {
+  --s-none: 0px;
+  --s-thin: 1px;
+  --s-regular: 2px;
+  --s-thick: 3px;
+  --s-tiny: 4px;
+  --s-small: 8px;
+  --s-medium: 16px;
+  --s-big: 32px;
+  --s-giant: 64px;
+  --s-vast: 128px;
+}
+```
+
+## Contoh Penggunaan
+
+```html
+<!-- Padding -->
+<div space="p:medium">16px padding semua sisi</div>
+<div space="p-x:big">32px padding horizontal</div>
+
+<!-- Margin -->
+<div space="m:small">8px margin semua sisi</div>
+<div space="m-b:giant">64px margin bawah</div>
+
+<!-- Gap -->
+<div layout="flex" space="g:small">8px gap antara item</div>
+
+<!-- Lebar Sempadan -->
+<div visual="border:gray-300 border-w:thin">Sempadan 1px</div>
+<div visual="border:gray-300 border-w:regular">Sempadan 2px</div>
+<div visual="border:gray-300 border-w:thick">Sempadan 3px</div>
+```
+
+## Penyesuaian
+
+Tindih ganti dalam `senangstart.config.js`:
+
+```javascript
+export default {
+  theme: {
+    spacing: {
+      'tiny': '2px',      // Tindih ganti sedia ada
+      'huge': '256px',    // Tambah baru
+      'massive': '512px'  // Tambah baru
+    }
+  }
+}
+```
+
+## Panduan Visual
+
+```
+none    │ (tiada ruang)
+thin    │ 1px
+regular │▏ 2px
+thick   │▎ 3px
+tiny    │▌ 4px
+small   │██ 8px
+medium  │████ 16px
+big     │████████ 32px
+giant   │████████████████ 64px
+vast    │████████████████████████████████ 128px
+```

package/docs/ms/reference/visual/accent-color.md

@@ -0,0 +1,31 @@
+# Accent Color
+
+Tetapkan warna aksen untuk kawalan borang
+
+## Sintaks
+```
+visual="accent:[color]"
+```
+
+## Contoh
+
+```html
+<input type="checkbox" visual="accent:primary">
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="accent:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/animation-builtin.md

@@ -0,0 +1,41 @@
+# Animation Builtin
+
+Terapkan animasi terbina dalam
+
+## Sintaks
+```
+visual="animate:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `animation: none` | Tiada animasi |
+| `spin` | `animation: spin 1s linear infinite` | Berpusing |
+| `ping` | `animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite` | Kesan ping |
+| `pulse` | `animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite` | Berdenyut |
+| `bounce` | `animation: bounce 1s infinite` | Melantun |
+
+## Contoh
+
+```html
+<div visual="animate:spin">Loading...</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="animation:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/animation-delay.md

@@ -0,0 +1,41 @@
+# Animation Delay
+
+Tetapkan kelewatan animasi
+
+## Sintaks
+```
+visual="animation-delay:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `instant` | `animation-delay: 75ms` | Kelewatan 75ms |
+| `quick` | `animation-delay: 100ms` | Kelewatan 100ms |
+| `fast` | `animation-delay: 150ms` | Kelewatan 150ms |
+| `normal` | `animation-delay: 200ms` | Kelewatan 200ms |
+| `slow` | `animation-delay: 300ms` | Kelewatan 300ms |
+
+## Contoh
+
+```html
+<div visual="animate:bounce animation-delay:slow">Delayed bounce</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="animation:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/animation-direction.md

@@ -0,0 +1,32 @@
+# Animation Direction
+
+Tetapkan arah animasi
+
+## Sintaks
+```
+visual="animation-direction:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `normal` | `animation-direction: normal` | Arah normal |
+| `reverse` | `animation-direction: reverse` | Arah terbalik |
+| `alternate` | `animation-direction: alternate` | Arah berselang |
+| `alternate-reverse` | `animation-direction: alternate-reverse` | Berselang terbalik |
+
+## Contoh
+
+```html
+<div visual="animate:bounce animation-direction:alternate">Alternating</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/animation-duration.md

@@ -0,0 +1,43 @@
+# Animation Duration
+
+Tetapkan tempoh animasi
+
+## Sintaks
+```
+visual="animation-duration:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `instant` | `animation-duration: 75ms` | 75ms |
+| `quick` | `animation-duration: 100ms` | 100ms |
+| `fast` | `animation-duration: 150ms` | 150ms |
+| `normal` | `animation-duration: 200ms` | 200ms |
+| `slow` | `animation-duration: 300ms` | 300ms |
+| `slower` | `animation-duration: 500ms` | 500ms |
+| `lazy` | `animation-duration: 700ms` | 700ms |
+
+## Contoh
+
+```html
+<div visual="animate:spin animation-duration:slow">Slow spin</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="animation:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/animation-fill.md

@@ -0,0 +1,32 @@
+# Animation Fill
+
+Tetapkan mod pengisian animasi
+
+## Sintaks
+```
+visual="animation-fill:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `animation-fill-mode: none` | Tiada pengisian |
+| `forwards` | `animation-fill-mode: forwards` | Kekalkan keadaan akhir |
+| `backwards` | `animation-fill-mode: backwards` | Terapkan keadaan mula |
+| `both` | `animation-fill-mode: both` | Kedua-dua arah |
+
+## Contoh
+
+```html
+<div visual="animate:bounce animation-fill:forwards">Stays at end</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/animation-iteration.md

@@ -0,0 +1,30 @@
+# Animation Iteration
+
+Tetapkan bilangan ulangan animasi
+
+## Sintaks
+```
+visual="animation-iteration:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `1` | `animation-iteration-count: 1` | Sekali |
+| `infinite` | `animation-iteration-count: infinite` | Selamanya |
+
+## Contoh
+
+```html
+<div visual="animate:bounce animation-iteration:1">Bounce once</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/animation-play.md

@@ -0,0 +1,30 @@
+# Animation Play
+
+Kawal keadaan main animasi
+
+## Sintaks
+```
+visual="animation-play:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `running` | `animation-play-state: running` | Animasi berjalan |
+| `paused` | `animation-play-state: paused` | Animasi dijeda |
+
+## Contoh
+
+```html
+<div visual="animate:spin hover:animation-play:paused">Pause on hover</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/appearance.md

@@ -0,0 +1,30 @@
+# Appearance
+
+Kawal penampilan asli
+
+## Sintaks
+```
+visual="appearance:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `appearance: none` | Buang gaya asli |
+| `auto` | `appearance: auto` | Penampilan lalai |
+
+## Contoh
+
+```html
+<select visual="appearance:none">Custom select</select>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/backdrop-blur.md

@@ -0,0 +1,43 @@
+# Backdrop Blur
+
+Kaburkan latar belakang
+
+## Sintaks
+```
+visual="backdrop-blur:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `backdrop-filter: blur(0)` | Tiada kabur |
+| `tiny` | `backdrop-filter: blur(2px)` | Kabur kecil |
+| `small` | `backdrop-filter: blur(4px)` | Kabur kecil |
+| `medium` | `backdrop-filter: blur(8px)` | Kabur sederhana |
+| `big` | `backdrop-filter: blur(12px)` | Kabur besar |
+| `giant` | `backdrop-filter: blur(24px)` | Kabur gergasi |
+| `vast` | `backdrop-filter: blur(48px)` | Kabur luas |
+
+## Contoh
+
+```html
+<div visual="backdrop-blur:medium bg:[rgba(255,255,255,0.5)]">Frosted glass</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="backdrop:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/visual/backdrop-brightness.md

@@ -0,0 +1,41 @@
+# Backdrop Brightness
+
+Laraskan kecerahan latar belakang
+
+## Sintaks
+```
+visual="backdrop-brightness:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `dim` | `backdrop-filter: brightness(0.5)` | 50% kecerahan |
+| `dark` | `backdrop-filter: brightness(0.75)` | 75% kecerahan |
+| `normal` | `backdrop-filter: brightness(1)` | Kecerahan normal |
+| `bright` | `backdrop-filter: brightness(1.25)` | 125% kecerahan |
+| `vivid` | `backdrop-filter: brightness(1.5)` | 150% kecerahan |
+
+## Contoh
+
+```html
+<div visual="backdrop-brightness:dark">Darkened backdrop</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="backdrop:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div visual="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```