@ttdk-design-system/library-react 0.0.0-stage → 1.0.0

package/src/web/flex/flex-item.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+
+export interface FlexItemBreakpointProps {
+  /**
+   * Urutan tampilan elemen di dalam container flex (order).
+   */
+  order?: number | string;
+
+  /**
+   * Kemampuan elemen untuk tumbuh mengisi sisa ruang (flex-grow).
+   * True bernilai 1, False bernilai 0, atau angka kustom.
+   */
+  grow?: number | boolean;
+
+  /**
+   * Kemampuan elemen untuk menyusut jika ruang tidak mencukupi (flex-shrink).
+   * True bernilai 1, False bernilai 0, atau angka kustom.
+   */
+  shrink?: number | boolean;
+
+  /**
+   * Ukuran dasar awal elemen sebelum ruang dibagi (flex-basis).
+   * (misal: "200px", "50%", 0, "auto").
+   */
+  basis?: string | number;
+
+  /**
+   * Perataan individu elemen pada sumbu silang (align-self).
+   */
+  alignSelf?: "auto" | "start" | "center" | "end" | "stretch";
+}
+export interface FlexItemProps extends FlexItemBreakpointProps {
+  /**
+   * Override pada breakpoint sm (min-width: 640px).
+   */
+  sm?: FlexItemBreakpointProps;
+
+  /**
+   * Override pada breakpoint md (min-width: 768px).
+   */
+  md?: FlexItemBreakpointProps;
+
+  /**
+   * Override pada breakpoint lg (min-width: 1024px).
+   */
+  lg?: FlexItemBreakpointProps;
+
+  /**
+   * Override pada breakpoint xl (min-width: 1280px).
+   */
+  xl?: FlexItemBreakpointProps;
+
+  /**
+   * Override pada breakpoint xxl / 2xl (min-width: 1536px).
+   */
+  xxl?: FlexItemBreakpointProps;
+
+  /**
+   * Kustomisasi visual granular root kontainer (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Style kustom inline.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Konten di dalam FlexItem.
+   */
+  children?: any;
+}
+
+import { buildFlexItemVars, buildUiVars, UiProps } from "../../core/types";
+
+function FlexItem(props: FlexItemProps) {
+  return (
+    <div
+      className={`ttdk-flex-item ${props.className || ""}`.trim()}
+      style={{
+        ...buildFlexItemVars(props),
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </div>
+  );
+}
+
+export default FlexItem;

package/src/web/flex/flex.css

@@ -0,0 +1 @@
+.ttdk-flex{box-sizing:border-box;flex-direction:var(--ttdk-flex-direction,row);justify-content:var(--ttdk-flex-justify-content,flex-start);align-items:var(--ttdk-flex-align-items,stretch);gap:var(--ttdk-flex-gap,0);flex-wrap:var(--ttdk-flex-wrap,nowrap);display:flex}.ttdk-flex[data-inline=true]{display:inline-flex}.ttdk-flex-item{box-sizing:border-box;order:var(--ttdk-flex-item-order,0);flex-grow:var(--ttdk-flex-item-grow,0);flex-shrink:var(--ttdk-flex-item-shrink,1);flex-basis:var(--ttdk-flex-item-basis,auto);align-self:var(--ttdk-flex-item-align-self,auto)}@media (width>=640px){.ttdk-flex{flex-direction:var(--ttdk-flex-direction-sm,var(--ttdk-flex-direction,row));justify-content:var(--ttdk-flex-justify-content-sm,var(--ttdk-flex-justify-content,flex-start));align-items:var(--ttdk-flex-align-items-sm,var(--ttdk-flex-align-items,stretch));gap:var(--ttdk-flex-gap-sm,var(--ttdk-flex-gap,0));flex-wrap:var(--ttdk-flex-wrap-sm,var(--ttdk-flex-wrap,nowrap))}.ttdk-flex-item{order:var(--ttdk-flex-item-order-sm,var(--ttdk-flex-item-order,0));flex-grow:var(--ttdk-flex-item-grow-sm,var(--ttdk-flex-item-grow,0));flex-shrink:var(--ttdk-flex-item-shrink-sm,var(--ttdk-flex-item-shrink,1));flex-basis:var(--ttdk-flex-item-basis-sm,var(--ttdk-flex-item-basis,auto));align-self:var(--ttdk-flex-item-align-self-sm,var(--ttdk-flex-item-align-self,auto))}}@media (width>=768px){.ttdk-flex{flex-direction:var(--ttdk-flex-direction-md,var(--ttdk-flex-direction-sm,var(--ttdk-flex-direction,row)));justify-content:var(--ttdk-flex-justify-content-md,var(--ttdk-flex-justify-content-sm,var(--ttdk-flex-justify-content,flex-start)));align-items:var(--ttdk-flex-align-items-md,var(--ttdk-flex-align-items-sm,var(--ttdk-flex-align-items,stretch)));gap:var(--ttdk-flex-gap-md,var(--ttdk-flex-gap-sm,var(--ttdk-flex-gap,0)));flex-wrap:var(--ttdk-flex-wrap-md,var(--ttdk-flex-wrap-sm,var(--ttdk-flex-wrap,nowrap)))}.ttdk-flex-item{order:var(--ttdk-flex-item-order-md,var(--ttdk-flex-item-order-sm,var(--ttdk-flex-item-order,0)));flex-grow:var(--ttdk-flex-item-grow-md,var(--ttdk-flex-item-grow-sm,var(--ttdk-flex-item-grow,0)));flex-shrink:var(--ttdk-flex-item-shrink-md,var(--ttdk-flex-item-shrink-sm,var(--ttdk-flex-item-shrink,1)));flex-basis:var(--ttdk-flex-item-basis-md,var(--ttdk-flex-item-basis-sm,var(--ttdk-flex-item-basis,auto)));align-self:var(--ttdk-flex-item-align-self-md,var(--ttdk-flex-item-align-self-sm,var(--ttdk-flex-item-align-self,auto)))}}@media (width>=1024px){.ttdk-flex{flex-direction:var(--ttdk-flex-direction-lg,var(--ttdk-flex-direction-md,var(--ttdk-flex-direction-sm,var(--ttdk-flex-direction,row))));justify-content:var(--ttdk-flex-justify-content-lg,var(--ttdk-flex-justify-content-md,var(--ttdk-flex-justify-content-sm,var(--ttdk-flex-justify-content,flex-start))));align-items:var(--ttdk-flex-align-items-lg,var(--ttdk-flex-align-items-md,var(--ttdk-flex-align-items-sm,var(--ttdk-flex-align-items,stretch))));gap:var(--ttdk-flex-gap-lg,var(--ttdk-flex-gap-md,var(--ttdk-flex-gap-sm,var(--ttdk-flex-gap,0))));flex-wrap:var(--ttdk-flex-wrap-lg,var(--ttdk-flex-wrap-md,var(--ttdk-flex-wrap-sm,var(--ttdk-flex-wrap,nowrap))))}.ttdk-flex-item{order:var(--ttdk-flex-item-order-lg,var(--ttdk-flex-item-order-md,var(--ttdk-flex-item-order-sm,var(--ttdk-flex-item-order,0))));flex-grow:var(--ttdk-flex-item-grow-lg,var(--ttdk-flex-item-grow-md,var(--ttdk-flex-item-grow-sm,var(--ttdk-flex-item-grow,0))));flex-shrink:var(--ttdk-flex-item-shrink-lg,var(--ttdk-flex-item-shrink-md,var(--ttdk-flex-item-shrink-sm,var(--ttdk-flex-item-shrink,1))));flex-basis:var(--ttdk-flex-item-basis-lg,var(--ttdk-flex-item-basis-md,var(--ttdk-flex-item-basis-sm,var(--ttdk-flex-item-basis,auto))));align-self:var(--ttdk-flex-item-align-self-lg,var(--ttdk-flex-item-align-self-md,var(--ttdk-flex-item-align-self-sm,var(--ttdk-flex-item-align-self,auto))))}}@media (width>=1280px){.ttdk-flex{flex-direction:var(--ttdk-flex-direction-xl,var(--ttdk-flex-direction-lg,var(--ttdk-flex-direction-md,var(--ttdk-flex-direction-sm,var(--ttdk-flex-direction,row)))));justify-content:var(--ttdk-flex-justify-content-xl,var(--ttdk-flex-justify-content-lg,var(--ttdk-flex-justify-content-md,var(--ttdk-flex-justify-content-sm,var(--ttdk-flex-justify-content,flex-start)))));align-items:var(--ttdk-flex-align-items-xl,var(--ttdk-flex-align-items-lg,var(--ttdk-flex-align-items-md,var(--ttdk-flex-align-items-sm,var(--ttdk-flex-align-items,stretch)))));gap:var(--ttdk-flex-gap-xl,var(--ttdk-flex-gap-lg,var(--ttdk-flex-gap-md,var(--ttdk-flex-gap-sm,var(--ttdk-flex-gap,0)))));flex-wrap:var(--ttdk-flex-wrap-xl,var(--ttdk-flex-wrap-lg,var(--ttdk-flex-wrap-md,var(--ttdk-flex-wrap-sm,var(--ttdk-flex-wrap,nowrap)))))}.ttdk-flex-item{order:var(--ttdk-flex-item-order-xl,var(--ttdk-flex-item-order-lg,var(--ttdk-flex-item-order-md,var(--ttdk-flex-item-order-sm,var(--ttdk-flex-item-order,0)))));flex-grow:var(--ttdk-flex-item-grow-xl,var(--ttdk-flex-item-grow-lg,var(--ttdk-flex-item-grow-md,var(--ttdk-flex-item-grow-sm,var(--ttdk-flex-item-grow,0)))));flex-shrink:var(--ttdk-flex-item-shrink-xl,var(--ttdk-flex-item-shrink-lg,var(--ttdk-flex-item-shrink-md,var(--ttdk-flex-item-shrink-sm,var(--ttdk-flex-item-shrink,1)))));flex-basis:var(--ttdk-flex-item-basis-xl,var(--ttdk-flex-item-basis-lg,var(--ttdk-flex-item-basis-md,var(--ttdk-flex-item-basis-sm,var(--ttdk-flex-item-basis,auto)))));align-self:var(--ttdk-flex-item-align-self-xl,var(--ttdk-flex-item-align-self-lg,var(--ttdk-flex-item-align-self-md,var(--ttdk-flex-item-align-self-sm,var(--ttdk-flex-item-align-self,auto)))))}}@media (width>=1536px){.ttdk-flex{flex-direction:var(--ttdk-flex-direction-2xl,var(--ttdk-flex-direction-xl,var(--ttdk-flex-direction-lg,var(--ttdk-flex-direction-md,var(--ttdk-flex-direction-sm,var(--ttdk-flex-direction,row))))));justify-content:var(--ttdk-flex-justify-content-2xl,var(--ttdk-flex-justify-content-xl,var(--ttdk-flex-justify-content-lg,var(--ttdk-flex-justify-content-md,var(--ttdk-flex-justify-content-sm,var(--ttdk-flex-justify-content,flex-start))))));align-items:var(--ttdk-flex-align-items-2xl,var(--ttdk-flex-align-items-xl,var(--ttdk-flex-align-items-lg,var(--ttdk-flex-align-items-md,var(--ttdk-flex-align-items-sm,var(--ttdk-flex-align-items,stretch))))));gap:var(--ttdk-flex-gap-2xl,var(--ttdk-flex-gap-xl,var(--ttdk-flex-gap-lg,var(--ttdk-flex-gap-md,var(--ttdk-flex-gap-sm,var(--ttdk-flex-gap,0))))));flex-wrap:var(--ttdk-flex-wrap-2xl,var(--ttdk-flex-wrap-xl,var(--ttdk-flex-wrap-lg,var(--ttdk-flex-wrap-md,var(--ttdk-flex-wrap-sm,var(--ttdk-flex-wrap,nowrap))))))}.ttdk-flex-item{order:var(--ttdk-flex-item-order-2xl,var(--ttdk-flex-item-order-xl,var(--ttdk-flex-item-order-lg,var(--ttdk-flex-item-order-md,var(--ttdk-flex-item-order-sm,var(--ttdk-flex-item-order,0))))));flex-grow:var(--ttdk-flex-item-grow-2xl,var(--ttdk-flex-item-grow-xl,var(--ttdk-flex-item-grow-lg,var(--ttdk-flex-item-grow-md,var(--ttdk-flex-item-grow-sm,var(--ttdk-flex-item-grow,0))))));flex-shrink:var(--ttdk-flex-item-shrink-2xl,var(--ttdk-flex-item-shrink-xl,var(--ttdk-flex-item-shrink-lg,var(--ttdk-flex-item-shrink-md,var(--ttdk-flex-item-shrink-sm,var(--ttdk-flex-item-shrink,1))))));flex-basis:var(--ttdk-flex-item-basis-2xl,var(--ttdk-flex-item-basis-xl,var(--ttdk-flex-item-basis-lg,var(--ttdk-flex-item-basis-md,var(--ttdk-flex-item-basis-sm,var(--ttdk-flex-item-basis,auto))))));align-self:var(--ttdk-flex-item-align-self-2xl,var(--ttdk-flex-item-align-self-xl,var(--ttdk-flex-item-align-self-lg,var(--ttdk-flex-item-align-self-md,var(--ttdk-flex-item-align-self-sm,var(--ttdk-flex-item-align-self,auto))))))}}

package/src/web/flex/flex.tsx

@@ -0,0 +1,108 @@
+import * as React from "react";
+
+export interface FlexBreakpointProps {
+  /**
+   * Arah susunan elemen anak (flex-direction).
+   * @default 'row'
+   */
+  direction?: "row" | "column" | "row-reverse" | "column-reverse";
+
+  /**
+   * Distribusi ruang antar elemen anak pada sumbu utama (justify-content).
+   * @default 'start'
+   */
+  justifyContent?: "start" | "center" | "end" | "around" | "between" | "evenly";
+
+  /**
+   * Perataan elemen anak pada sumbu silang (align-items).
+   * @default 'stretch'
+   */
+  alignItems?: "start" | "center" | "end" | "stretch";
+
+  /**
+   * Jarak celah antar elemen anak (gap).
+   * Nilai dapat berupa angka pixel atau string unit CSS (misal: 12, "16px", "var(--ttdk-spacing-16)").
+   */
+  gap?: string | number;
+
+  /**
+   * Membungkus elemen anak jika melebihi lebar kontainer (flex-wrap).
+   * @default 'nowrap'
+   */
+  wrap?: "nowrap" | "wrap" | "wrap-reverse";
+}
+export interface FlexProps extends FlexBreakpointProps {
+  /**
+   * Menggunakan display 'inline-flex' daripada 'flex'.
+   * @default false
+   */
+  inline?: boolean;
+
+  /**
+   * Override pada breakpoint sm (min-width: 640px).
+   */
+  sm?: FlexBreakpointProps;
+
+  /**
+   * Override pada breakpoint md (min-width: 768px).
+   */
+  md?: FlexBreakpointProps;
+
+  /**
+   * Override pada breakpoint lg (min-width: 1024px).
+   */
+  lg?: FlexBreakpointProps;
+
+  /**
+   * Override pada breakpoint xl (min-width: 1280px).
+   */
+  xl?: FlexBreakpointProps;
+
+  /**
+   * Override pada breakpoint xxl / 2xl (min-width: 1536px).
+   */
+  xxl?: FlexBreakpointProps;
+
+  /**
+   * Kustomisasi visual granular root kontainer (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Style kustom inline.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Konten anak di dalam Flex.
+   */
+  children?: any;
+}
+
+import { buildFlexVars, buildUiVars, UiProps } from "../../core/types";
+
+function Flex(props: FlexProps) {
+  return (
+    <div
+      className={`ttdk-flex ${props.className || ""}`.trim()}
+      data-inline={props.inline ? "true" : "false"}
+      style={{
+        ...buildFlexVars(props),
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </div>
+  );
+}
+
+export default Flex;
+
+export { Flex };

package/src/web/flex/index.ts

@@ -0,0 +1,5 @@
+export { default } from './flex';
+export { default as Flex } from './flex';
+export type { FlexProps, FlexBreakpointProps } from './flex';
+export { default as FlexItem } from './flex-item';
+export type { FlexItemProps, FlexItemBreakpointProps } from './flex-item'

package/src/web/flex/manifest.json

@@ -0,0 +1,162 @@
+{
+  "name": "@ttdk-design-system/flex",
+  "component": "Flex",
+  "folder": "flex",
+  "description": "TTDK Flex component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "flex.css",
+      "importPath": "web/flex/flex.css"
+    }
+  ],
+  "props": {
+    "inline": {
+      "name": "inline",
+      "type": "boolean",
+      "optional": true,
+      "default": "false",
+      "description": "Menggunakan display 'inline-flex' daripada 'flex'.",
+      "example": null,
+      "param": null
+    },
+    "sm": {
+      "name": "sm",
+      "type": "FlexBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint sm (min-width: 640px).",
+      "example": null,
+      "param": null
+    },
+    "md": {
+      "name": "md",
+      "type": "FlexBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint md (min-width: 768px).",
+      "example": null,
+      "param": null
+    },
+    "lg": {
+      "name": "lg",
+      "type": "FlexBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint lg (min-width: 1024px).",
+      "example": null,
+      "param": null
+    },
+    "xl": {
+      "name": "xl",
+      "type": "FlexBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint xl (min-width: 1280px).",
+      "example": null,
+      "param": null
+    },
+    "xxl": {
+      "name": "xxl",
+      "type": "FlexBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint xxl / 2xl (min-width: 1536px).",
+      "example": null,
+      "param": null
+    },
+    "ui": {
+      "name": "ui",
+      "type": "UiProps",
+      "optional": true,
+      "default": null,
+      "description": "Kustomisasi visual granular root kontainer (UiProps).",
+      "example": null,
+      "param": null
+    },
+    "className": {
+      "name": "className",
+      "type": "string",
+      "optional": true,
+      "default": null,
+      "description": "Class CSS kustom.",
+      "example": null,
+      "param": null
+    },
+    "style": {
+      "name": "style",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Style kustom inline.",
+      "example": null,
+      "param": null
+    },
+    "children": {
+      "name": "children",
+      "type": "any",
+      "optional": true,
+      "default": null,
+      "description": "Konten anak di dalam Flex.",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "FlexBreakpointProps": {
+      "direction": {
+        "name": "direction",
+        "type": "'row' | 'column' | 'row-reverse' | 'column-reverse'",
+        "optional": true,
+        "default": "row",
+        "description": "Arah susunan elemen anak (flex-direction).",
+        "example": null,
+        "param": null
+      },
+      "justifyContent": {
+        "name": "justifyContent",
+        "type": "'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'",
+        "optional": true,
+        "default": "start",
+        "description": "Distribusi ruang antar elemen anak pada sumbu utama (justify-content).",
+        "example": null,
+        "param": null
+      },
+      "alignItems": {
+        "name": "alignItems",
+        "type": "'start' | 'center' | 'end' | 'stretch'",
+        "optional": true,
+        "default": "stretch",
+        "description": "Perataan elemen anak pada sumbu silang (align-items).",
+        "example": null,
+        "param": null
+      },
+      "gap": {
+        "name": "gap",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "Jarak celah antar elemen anak (gap). Nilai dapat berupa angka pixel atau string unit CSS (misal: 12, \"16px\", \"var(--ttdk-spacing-16)\").",
+        "example": null,
+        "param": null
+      },
+      "wrap": {
+        "name": "wrap",
+        "type": "'nowrap' | 'wrap' | 'wrap-reverse'",
+        "optional": true,
+        "default": "nowrap",
+        "description": "Membungkus elemen anak jika melebihi lebar kontainer (flex-wrap).",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/form/index.ts

@@ -0,0 +1,7 @@
+// Re-export TanStack Form (REACT)
+export {
+  useForm,
+  createFormFactory,
+  useField,
+} from '@tanstack/react-form';
+export * from '@tanstack/react-form';

package/src/web/grid/AI_GUIDE.md

@@ -0,0 +1,112 @@
+# <Grid /> — TTDK Component Reference
+
+TTDK Grid component with multi-theme support.
+
+## 1. Stylesheets & Theming (Pure CSS)
+Import the corresponding stylesheet for the theme you wish to use:
+- **COMMON Theme**: `import "@ttdk-design-system/library-<react|vue|svelte>/web/grid/grid.css";`
+
+## 2. Subpath Component Import
+```ts
+// React
+import Grid from "@ttdk-design-system/library-react/web/grid";
+
+// Vue 3
+import Grid from "@ttdk-design-system/library-vue/web/grid";
+
+// Svelte
+import Grid from "@ttdk-design-system/library-svelte/web/grid";
+```
+
+## 3. Props & API Reference
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `sm?` | `GridBreakpointProps` | `-` | Override pada breakpoint sm (min-width: 640px). |
+| `md?` | `GridBreakpointProps` | `-` | Override pada breakpoint md (min-width: 768px). |
+| `lg?` | `GridBreakpointProps` | `-` | Override pada breakpoint lg (min-width: 1024px). |
+| `xl?` | `GridBreakpointProps` | `-` | Override pada breakpoint xl (min-width: 1280px). |
+| `xxl?` | `GridBreakpointProps` | `-` | Override pada breakpoint xxl / 2xl (min-width: 1536px). |
+| `ui?` | `UiProps` | `-` | Kustomisasi visual granular root kontainer (UiProps). |
+| `className?` | `string` | `-` | Class CSS kustom. |
+| `style?` | `any` | `-` | Style kustom inline. |
+| `children?` | `any` | `-` | Konten anak di dalam Grid (<GridItem>). |
+
+### Sub-interface: `GridBreakpointProps`
+
+| Field | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `templateColumns?` | `string | number` | `-` | Jumlah atau pola template kolom pada grid (grid-template-columns). Nilai angka (misal: 3 atau 12) otomatis dikonversi ke repeat(N, minmax(0, 1fr)). Nilai string (misal: "200px 1fr 2fr", "repeat(4, 1fr)"). |
+| `templateRows?` | `string | number` | `-` | Jumlah atau pola template baris pada grid (grid-template-rows). |
+| `gap?` | `string | number` | `-` | Jarak celah antar baris dan kolom (gap). Nilai angka (misal: 16) atau string (misal: "16px", "1rem", "var(--ttdk-spacing-16)"). |
+| `justifyContent?` | `'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'` | `-` | Distribusi horizontal keseluruhan grid container (justify-content). |
+| `alignContent?` | `'evenly' | 'around' | 'between' | 'center' | 'start' | 'end'` | `-` | Distribusi vertikal baris di dalam grid container (align-content). |
+
+## 4. Usage Examples
+
+### React Example
+```tsx
+import { Grid, GridItem } from "@ttdk-design-system/library-react/grid";
+import "@ttdk-design-system/library-react/grid/grid.css";
+
+export function Example() {
+  return (
+    <Grid
+      templateColumns={1}
+      gap="16px"
+      md={{ templateColumns: 12 }}
+    >
+      <GridItem col={12} md={{ col: 8 }}>
+        <div style={{ background: '#f4f4f5', padding: '16px' }}>Area Utama (8 Kolom)</div>
+      </GridItem>
+      <GridItem col={12} md={{ col: 4 }}>
+        <div style={{ background: '#e4e4e7', padding: '16px' }}>Sidebar (4 Kolom)</div>
+      </GridItem>
+    </Grid>
+  );
+}
+```
+
+### Vue 3 Example
+```vue
+<script setup lang="ts">
+import { Grid, GridItem } from "@ttdk-design-system/library-vue/grid";
+import "@ttdk-design-system/library-vue/grid/grid.css";
+</script>
+
+<template>
+  <Grid
+    :templateColumns="1"
+    gap="16px"
+    :md="{ templateColumns: 12 }"
+  >
+    <GridItem :col="12" :md="{ col: 8 }">
+      <div style="background: #f4f4f5; padding: 16px;">Area Utama (8 Kolom)</div>
+    </GridItem>
+    <GridItem :col="12" :md="{ col: 4 }">
+      <div style="background: #e4e4e7; padding: 16px;">Sidebar (4 Kolom)</div>
+    </GridItem>
+  </Grid>
+</template>
+```
+
+### Svelte Example
+```svelte
+<script lang="ts">
+  import { Grid, GridItem } from "@ttdk-design-system/library-svelte/grid";
+  import "@ttdk-design-system/library-svelte/grid/grid.css";
+</script>
+
+<Grid
+  templateColumns={1}
+  gap="16px"
+  md={{ templateColumns: 12 }}
+>
+  <GridItem col={12} md={{ col: 8 }}>
+    <div style="background: #f4f4f5; padding: 16px;">Area Utama (8 Kolom)</div>
+  </GridItem>
+  <GridItem col={12} md={{ col: 4 }}>
+    <div style="background: #e4e4e7; padding: 16px;">Sidebar (4 Kolom)</div>
+  </GridItem>
+</Grid>
+```

package/src/web/grid/grid-item.tsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+
+export interface GridItemBreakpointProps {
+  /**
+   * Jumlah kolom yang ditempati item ini (grid-column).
+   * Nilai angka N (misal: 6 atau 12) otomatis dikonversi ke 'span N / span N'.
+   * Nilai string (misal: "span 4", "1 / -1", "auto").
+   */
+  col?: number | string;
+
+  /**
+   * Posisi awal garis kolom (grid-column-start).
+   */
+  colStart?: number | string;
+
+  /**
+   * Posisi akhir garis kolom (grid-column-end).
+   */
+  colEnd?: number | string;
+
+  /**
+   * Jumlah baris yang ditempati item ini (grid-row).
+   * Nilai angka N otomatis dikonversi ke 'span N / span N'.
+   */
+  row?: number | string;
+
+  /**
+   * Posisi awal garis baris (grid-row-start).
+   */
+  rowStart?: number | string;
+
+  /**
+   * Posisi akhir garis baris (grid-row-end).
+   */
+  rowEnd?: number | string;
+
+  /**
+   * Perataan horizontal item di dalam sel grid (justify-self).
+   */
+  justifySelf?: "auto" | "start" | "center" | "end" | "stretch";
+
+  /**
+   * Urutan tampilan item di dalam grid (order).
+   */
+  order?: number | string;
+}
+export interface GridItemProps extends GridItemBreakpointProps {
+  /**
+   * Override pada breakpoint sm (min-width: 640px).
+   */
+  sm?: GridItemBreakpointProps;
+
+  /**
+   * Override pada breakpoint md (min-width: 768px).
+   */
+  md?: GridItemBreakpointProps;
+
+  /**
+   * Override pada breakpoint lg (min-width: 1024px).
+   */
+  lg?: GridItemBreakpointProps;
+
+  /**
+   * Override pada breakpoint xl (min-width: 1280px).
+   */
+  xl?: GridItemBreakpointProps;
+
+  /**
+   * Override pada breakpoint xxl / 2xl (min-width: 1536px).
+   */
+  xxl?: GridItemBreakpointProps;
+
+  /**
+   * Kustomisasi visual granular root kontainer (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Style kustom inline.
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Konten di dalam item grid.
+   */
+  children?: any;
+}
+
+import { buildGridItemVars, buildUiVars, UiProps } from "../../core/types";
+
+function GridItem(props: GridItemProps) {
+  return (
+    <div
+      className={`ttdk-grid-item ${props.className || ""}`.trim()}
+      style={{
+        ...buildGridItemVars(props),
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+              ...props.style,
+      }}
+    >
+      <>{props.children}</>
+    </div>
+  );
+}
+
+export default GridItem;

package/src/web/grid/grid.css

@@ -0,0 +1 @@
+.ttdk-grid{box-sizing:border-box;grid-template-columns:var(--ttdk-grid-template-columns,repeat(1, minmax(0, 1fr)));grid-template-rows:var(--ttdk-grid-template-rows,auto);gap:var(--ttdk-grid-gap,0);justify-content:var(--ttdk-grid-justify-content,normal);align-content:var(--ttdk-grid-align-content,normal);display:grid}.ttdk-grid-item{box-sizing:border-box;grid-column:var(--ttdk-grid-item-col,auto);grid-row:var(--ttdk-grid-item-row,auto);justify-self:var(--ttdk-grid-item-justify-self,auto);order:var(--ttdk-grid-item-order,0);min-width:0}@media (width>=640px){.ttdk-grid{grid-template-columns:var(--ttdk-grid-template-columns-sm,var(--ttdk-grid-template-columns,repeat(1, minmax(0, 1fr))));grid-template-rows:var(--ttdk-grid-template-rows-sm,var(--ttdk-grid-template-rows,auto));gap:var(--ttdk-grid-gap-sm,var(--ttdk-grid-gap,0));justify-content:var(--ttdk-grid-justify-content-sm,var(--ttdk-grid-justify-content,normal));align-content:var(--ttdk-grid-align-content-sm,var(--ttdk-grid-align-content,normal))}.ttdk-grid-item{grid-column:var(--ttdk-grid-item-col-sm,var(--ttdk-grid-item-col,auto));grid-row:var(--ttdk-grid-item-row-sm,var(--ttdk-grid-item-row,auto));justify-self:var(--ttdk-grid-item-justify-self-sm,var(--ttdk-grid-item-justify-self,auto));order:var(--ttdk-grid-item-order-sm,var(--ttdk-grid-item-order,0))}}@media (width>=768px){.ttdk-grid{grid-template-columns:var(--ttdk-grid-template-columns-md,var(--ttdk-grid-template-columns-sm,var(--ttdk-grid-template-columns,repeat(1, minmax(0, 1fr)))));grid-template-rows:var(--ttdk-grid-template-rows-md,var(--ttdk-grid-template-rows-sm,var(--ttdk-grid-template-rows,auto)));gap:var(--ttdk-grid-gap-md,var(--ttdk-grid-gap-sm,var(--ttdk-grid-gap,0)));justify-content:var(--ttdk-grid-justify-content-md,var(--ttdk-grid-justify-content-sm,var(--ttdk-grid-justify-content,normal)));align-content:var(--ttdk-grid-align-content-md,var(--ttdk-grid-align-content-sm,var(--ttdk-grid-align-content,normal)))}.ttdk-grid-item{grid-column:var(--ttdk-grid-item-col-md,var(--ttdk-grid-item-col-sm,var(--ttdk-grid-item-col,auto)));grid-row:var(--ttdk-grid-item-row-md,var(--ttdk-grid-item-row-sm,var(--ttdk-grid-item-row,auto)));justify-self:var(--ttdk-grid-item-justify-self-md,var(--ttdk-grid-item-justify-self-sm,var(--ttdk-grid-item-justify-self,auto)));order:var(--ttdk-grid-item-order-md,var(--ttdk-grid-item-order-sm,var(--ttdk-grid-item-order,0)))}}@media (width>=1024px){.ttdk-grid{grid-template-columns:var(--ttdk-grid-template-columns-lg,var(--ttdk-grid-template-columns-md,var(--ttdk-grid-template-columns-sm,var(--ttdk-grid-template-columns,repeat(1, minmax(0, 1fr))))));grid-template-rows:var(--ttdk-grid-template-rows-lg,var(--ttdk-grid-template-rows-md,var(--ttdk-grid-template-rows-sm,var(--ttdk-grid-template-rows,auto))));gap:var(--ttdk-grid-gap-lg,var(--ttdk-grid-gap-md,var(--ttdk-grid-gap-sm,var(--ttdk-grid-gap,0))));justify-content:var(--ttdk-grid-justify-content-lg,var(--ttdk-grid-justify-content-md,var(--ttdk-grid-justify-content-sm,var(--ttdk-grid-justify-content,normal))));align-content:var(--ttdk-grid-align-content-lg,var(--ttdk-grid-align-content-md,var(--ttdk-grid-align-content-sm,var(--ttdk-grid-align-content,normal))))}.ttdk-grid-item{grid-column:var(--ttdk-grid-item-col-lg,var(--ttdk-grid-item-col-md,var(--ttdk-grid-item-col-sm,var(--ttdk-grid-item-col,auto))));grid-row:var(--ttdk-grid-item-row-lg,var(--ttdk-grid-item-row-md,var(--ttdk-grid-item-row-sm,var(--ttdk-grid-item-row,auto))));justify-self:var(--ttdk-grid-item-justify-self-lg,var(--ttdk-grid-item-justify-self-md,var(--ttdk-grid-item-justify-self-sm,var(--ttdk-grid-item-justify-self,auto))));order:var(--ttdk-grid-item-order-lg,var(--ttdk-grid-item-order-md,var(--ttdk-grid-item-order-sm,var(--ttdk-grid-item-order,0))))}}@media (width>=1280px){.ttdk-grid{grid-template-columns:var(--ttdk-grid-template-columns-xl,var(--ttdk-grid-template-columns-lg,var(--ttdk-grid-template-columns-md,var(--ttdk-grid-template-columns-sm,var(--ttdk-grid-template-columns,repeat(1, minmax(0, 1fr)))))));grid-template-rows:var(--ttdk-grid-template-rows-xl,var(--ttdk-grid-template-rows-lg,var(--ttdk-grid-template-rows-md,var(--ttdk-grid-template-rows-sm,var(--ttdk-grid-template-rows,auto)))));gap:var(--ttdk-grid-gap-xl,var(--ttdk-grid-gap-lg,var(--ttdk-grid-gap-md,var(--ttdk-grid-gap-sm,var(--ttdk-grid-gap,0)))));justify-content:var(--ttdk-grid-justify-content-xl,var(--ttdk-grid-justify-content-lg,var(--ttdk-grid-justify-content-md,var(--ttdk-grid-justify-content-sm,var(--ttdk-grid-justify-content,normal)))));align-content:var(--ttdk-grid-align-content-xl,var(--ttdk-grid-align-content-lg,var(--ttdk-grid-align-content-md,var(--ttdk-grid-align-content-sm,var(--ttdk-grid-align-content,normal)))))}.ttdk-grid-item{grid-column:var(--ttdk-grid-item-col-xl,var(--ttdk-grid-item-col-lg,var(--ttdk-grid-item-col-md,var(--ttdk-grid-item-col-sm,var(--ttdk-grid-item-col,auto)))));grid-row:var(--ttdk-grid-item-row-xl,var(--ttdk-grid-item-row-lg,var(--ttdk-grid-item-row-md,var(--ttdk-grid-item-row-sm,var(--ttdk-grid-item-row,auto)))));justify-self:var(--ttdk-grid-item-justify-self-xl,var(--ttdk-grid-item-justify-self-lg,var(--ttdk-grid-item-justify-self-md,var(--ttdk-grid-item-justify-self-sm,var(--ttdk-grid-item-justify-self,auto)))));order:var(--ttdk-grid-item-order-xl,var(--ttdk-grid-item-order-lg,var(--ttdk-grid-item-order-md,var(--ttdk-grid-item-order-sm,var(--ttdk-grid-item-order,0)))))}}@media (width>=1536px){.ttdk-grid{grid-template-columns:var(--ttdk-grid-template-columns-2xl,var(--ttdk-grid-template-columns-xl,var(--ttdk-grid-template-columns-lg,var(--ttdk-grid-template-columns-md,var(--ttdk-grid-template-columns-sm,var(--ttdk-grid-template-columns,repeat(1, minmax(0, 1fr))))))));grid-template-rows:var(--ttdk-grid-template-rows-2xl,var(--ttdk-grid-template-rows-xl,var(--ttdk-grid-template-rows-lg,var(--ttdk-grid-template-rows-md,var(--ttdk-grid-template-rows-sm,var(--ttdk-grid-template-rows,auto))))));gap:var(--ttdk-grid-gap-2xl,var(--ttdk-grid-gap-xl,var(--ttdk-grid-gap-lg,var(--ttdk-grid-gap-md,var(--ttdk-grid-gap-sm,var(--ttdk-grid-gap,0))))));justify-content:var(--ttdk-grid-justify-content-2xl,var(--ttdk-grid-justify-content-xl,var(--ttdk-grid-justify-content-lg,var(--ttdk-grid-justify-content-md,var(--ttdk-grid-justify-content-sm,var(--ttdk-grid-justify-content,normal))))));align-content:var(--ttdk-grid-align-content-2xl,var(--ttdk-grid-align-content-xl,var(--ttdk-grid-align-content-lg,var(--ttdk-grid-align-content-md,var(--ttdk-grid-align-content-sm,var(--ttdk-grid-align-content,normal))))))}.ttdk-grid-item{grid-column:var(--ttdk-grid-item-col-2xl,var(--ttdk-grid-item-col-xl,var(--ttdk-grid-item-col-lg,var(--ttdk-grid-item-col-md,var(--ttdk-grid-item-col-sm,var(--ttdk-grid-item-col,auto))))));grid-row:var(--ttdk-grid-item-row-2xl,var(--ttdk-grid-item-row-xl,var(--ttdk-grid-item-row-lg,var(--ttdk-grid-item-row-md,var(--ttdk-grid-item-row-sm,var(--ttdk-grid-item-row,auto))))));justify-self:var(--ttdk-grid-item-justify-self-2xl,var(--ttdk-grid-item-justify-self-xl,var(--ttdk-grid-item-justify-self-lg,var(--ttdk-grid-item-justify-self-md,var(--ttdk-grid-item-justify-self-sm,var(--ttdk-grid-item-justify-self,auto))))));order:var(--ttdk-grid-item-order-2xl,var(--ttdk-grid-item-order-xl,var(--ttdk-grid-item-order-lg,var(--ttdk-grid-item-order-md,var(--ttdk-grid-item-order-sm,var(--ttdk-grid-item-order,0))))))}}