@ttdk-design-system/library-vue 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,109 @@
+<template>
+  <div
+    :class="`ttdk-grid-item ${className || ''}`.trim()"
+    :style="{
+      ...buildGridItemVars(props),
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { buildGridItemVars, buildUiVars, UiProps } from "../../core/types";
+
+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?: any;
+
+  /**
+   * Konten di dalam item grid.
+   */
+  children?: any;
+}
+
+const props = defineProps<GridItemProps>();
+</script>

package/src/web/grid/grid-item.vue.d.ts

@@ -0,0 +1,99 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildGridItemVars, buildUiVars, UiProps } from "../../core/types";
+
+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?: any;
+
+  /**
+   * Konten di dalam item grid.
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<GridItemProps>;
+export default component;

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))))))}}

package/src/web/grid/grid.vue

@@ -0,0 +1,94 @@
+<template>
+  <div
+    :class="`ttdk-grid ${className || ''}`.trim()"
+    :style="{
+      ...buildGridVars(props),
+      ...buildUiVars(ui),
+        ...(typeof style === 'object' ? style : {}),
+        }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { buildGridVars, buildUiVars, UiProps } from "../../core/types";
+
+export interface GridBreakpointProps {
+  /**
+   * 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)").
+   */
+  templateColumns?: string | number;
+
+  /**
+   * Jumlah atau pola template baris pada grid (grid-template-rows).
+   */
+  templateRows?: string | number;
+
+  /**
+   * Jarak celah antar baris dan kolom (gap).
+   * Nilai angka (misal: 16) atau string (misal: "16px", "1rem", "var(--ttdk-spacing-16)").
+   */
+  gap?: string | number;
+
+  /**
+   * Distribusi horizontal keseluruhan grid container (justify-content).
+   */
+  justifyContent?: "start" | "center" | "end" | "around" | "between" | "evenly";
+
+  /**
+   * Distribusi vertikal baris di dalam grid container (align-content).
+   */
+  alignContent?: "evenly" | "around" | "between" | "center" | "start" | "end";
+}
+export interface GridProps extends GridBreakpointProps {
+  /**
+   * Override pada breakpoint sm (min-width: 640px).
+   */
+  sm?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint md (min-width: 768px).
+   */
+  md?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint lg (min-width: 1024px).
+   */
+  lg?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint xl (min-width: 1280px).
+   */
+  xl?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint xxl / 2xl (min-width: 1536px).
+   */
+  xxl?: GridBreakpointProps;
+
+  /**
+   * Kustomisasi visual granular root kontainer (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Style kustom inline.
+   */
+  style?: any;
+
+  /**
+   * Konten anak di dalam Grid (<GridItem>).
+   */
+  children?: any;
+}
+
+const props = defineProps<GridProps>();
+</script>

package/src/web/grid/grid.vue.d.ts

@@ -0,0 +1,84 @@
+/* eslint-disable */
+// Auto-generated by TTDK Design System Vue Type Generator
+import type { DefineComponent } from "vue";
+import { buildGridVars, buildUiVars, UiProps } from "../../core/types";
+
+export interface GridBreakpointProps {
+  /**
+   * 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)").
+   */
+  templateColumns?: string | number;
+
+  /**
+   * Jumlah atau pola template baris pada grid (grid-template-rows).
+   */
+  templateRows?: string | number;
+
+  /**
+   * Jarak celah antar baris dan kolom (gap).
+   * Nilai angka (misal: 16) atau string (misal: "16px", "1rem", "var(--ttdk-spacing-16)").
+   */
+  gap?: string | number;
+
+  /**
+   * Distribusi horizontal keseluruhan grid container (justify-content).
+   */
+  justifyContent?: "start" | "center" | "end" | "around" | "between" | "evenly";
+
+  /**
+   * Distribusi vertikal baris di dalam grid container (align-content).
+   */
+  alignContent?: "evenly" | "around" | "between" | "center" | "start" | "end";
+}
+
+export interface GridProps extends GridBreakpointProps {
+  /**
+   * Override pada breakpoint sm (min-width: 640px).
+   */
+  sm?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint md (min-width: 768px).
+   */
+  md?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint lg (min-width: 1024px).
+   */
+  lg?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint xl (min-width: 1280px).
+   */
+  xl?: GridBreakpointProps;
+
+  /**
+   * Override pada breakpoint xxl / 2xl (min-width: 1536px).
+   */
+  xxl?: GridBreakpointProps;
+
+  /**
+   * Kustomisasi visual granular root kontainer (UiProps).
+   */
+  ui?: UiProps;
+
+  /**
+   * Class CSS kustom.
+   */
+  className?: string;
+
+  /**
+   * Style kustom inline.
+   */
+  style?: any;
+
+  /**
+   * Konten anak di dalam Grid (<GridItem>).
+   */
+  children?: any;
+}
+
+declare const component: DefineComponent<GridProps>;
+export default component;

package/src/web/grid/index.ts

@@ -0,0 +1,5 @@
+export { default } from './grid.vue';
+export { default as Grid } from './grid.vue';
+export * from './grid.vue';
+export { default as GridItem } from './grid-item.vue';
+export * from './grid-item.vue';

package/src/web/grid/manifest.json

@@ -0,0 +1,153 @@
+{
+  "name": "@ttdk-design-system/grid",
+  "component": "Grid",
+  "folder": "grid",
+  "description": "TTDK Grid component with multi-theme support.",
+  "stylesheets": [
+    {
+      "theme": "common",
+      "file": "grid.css",
+      "importPath": "web/grid/grid.css"
+    }
+  ],
+  "props": {
+    "sm": {
+      "name": "sm",
+      "type": "GridBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint sm (min-width: 640px).",
+      "example": null,
+      "param": null
+    },
+    "md": {
+      "name": "md",
+      "type": "GridBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint md (min-width: 768px).",
+      "example": null,
+      "param": null
+    },
+    "lg": {
+      "name": "lg",
+      "type": "GridBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint lg (min-width: 1024px).",
+      "example": null,
+      "param": null
+    },
+    "xl": {
+      "name": "xl",
+      "type": "GridBreakpointProps",
+      "optional": true,
+      "default": null,
+      "description": "Override pada breakpoint xl (min-width: 1280px).",
+      "example": null,
+      "param": null
+    },
+    "xxl": {
+      "name": "xxl",
+      "type": "GridBreakpointProps",
+      "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 Grid (<GridItem>).",
+      "example": null,
+      "param": null
+    }
+  },
+  "subInterfaces": {
+    "GridBreakpointProps": {
+      "templateColumns": {
+        "name": "templateColumns",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "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)\").",
+        "example": null,
+        "param": null
+      },
+      "templateRows": {
+        "name": "templateRows",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "Jumlah atau pola template baris pada grid (grid-template-rows).",
+        "example": null,
+        "param": null
+      },
+      "gap": {
+        "name": "gap",
+        "type": "string | number",
+        "optional": true,
+        "default": null,
+        "description": "Jarak celah antar baris dan kolom (gap). Nilai angka (misal: 16) atau string (misal: \"16px\", \"1rem\", \"var(--ttdk-spacing-16)\").",
+        "example": null,
+        "param": null
+      },
+      "justifyContent": {
+        "name": "justifyContent",
+        "type": "'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'",
+        "optional": true,
+        "default": null,
+        "description": "Distribusi horizontal keseluruhan grid container (justify-content).",
+        "example": null,
+        "param": null
+      },
+      "alignContent": {
+        "name": "alignContent",
+        "type": "'evenly' | 'around' | 'between' | 'center' | 'start' | 'end'",
+        "optional": true,
+        "default": null,
+        "description": "Distribusi vertikal baris di dalam grid container (align-content).",
+        "example": null,
+        "param": null
+      }
+    }
+  },
+  "supportedFrameworks": [
+    "react",
+    "vue",
+    "svelte"
+  ],
+  "themes": [
+    "tw"
+  ]
+}

package/src/web/index.ts

@@ -0,0 +1,86 @@
+/**
+ * TTDK Design System — Web Module (VUE)
+ */
+
+export { default as Accordion } from './accordion/accordion.vue';
+export * from './accordion';
+
+export { default as Alert } from './alert/alert.vue';
+export * from './alert';
+
+export { default as Avatar } from './avatar/avatar.vue';
+export * from './avatar';
+
+export { default as Badge } from './badge/badge.vue';
+export * from './badge';
+
+export { default as Banner } from './banner/banner.vue';
+export * from './banner';
+
+export { default as Breadcrumb } from './breadcrumb/breadcrumb.vue';
+export * from './breadcrumb';
+
+export { default as Button } from './button/button.vue';
+export * from './button';
+
+export { default as Calendar } from './calendar/calendar.vue';
+export * from './calendar';
+
+export { default as Card } from './card/card.vue';
+export * from './card';
+
+export { default as Checkbox } from './checkbox/checkbox.vue';
+export * from './checkbox';
+
+export { default as Chip } from './chip/chip.vue';
+export * from './chip';
+
+export { default as Dropdown } from './dropdown/dropdown.vue';
+export * from './dropdown';
+
+export { default as Flex } from './flex/flex.vue';
+export * from './flex';
+
+export { default as Grid } from './grid/grid.vue';
+export * from './grid';
+
+export { default as Input } from './input/input.vue';
+export * from './input';
+
+export { default as InputNumber } from './input-number/input-number.vue';
+export * from './input-number';
+
+export { default as Modal } from './modal/modal.vue';
+export * from './modal';
+
+export { default as Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationFirst, PaginationLast, PaginationEllipsis } from './pagination';
+export * from './pagination';
+
+export { default as Popover } from './popover/popover.vue';
+export * from './popover';
+
+export { default as Radio } from './radio/radio.vue';
+export * from './radio';
+
+export { default as Selectbox } from './selectbox/selectbox.vue';
+export * from './selectbox';
+
+export { default as Sonner, default as Toaster, toast } from './sonner';
+export * from './sonner';
+
+export { default as Table, default as DataTable, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, TableEmpty } from './table';
+export type { TableProps, TableUiProps } from './table/table.vue';
+export * from './table';
+
+export { default as Tabs } from './tabs/tabs.vue';
+export * from './tabs';
+
+export { default as Text } from './text/text.vue';
+export * from './text';
+
+export { default as Textarea } from './textarea/textarea.vue';
+export * from './textarea';
+
+export { default as Tooltip } from './tooltip/tooltip.vue';
+export * from './tooltip';
+