feat/layout-cleaning:

- font responsif untuk navheader
- colon + gap pada doc entry
- ukuran font lebih responsif untuk button

app/components/pub/custom-ui/doc-entry/block.vue

@@ -34,7 +34,7 @@ const settingClass = computed(() => {
     'grid-cols-1', 'grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5',
     'grid-cols-6', 'grid-cols-7', 'grid-cols-8', 'grid-cols-9', 'grid-cols-10',
   ][props.colCount - 1]
-  cls += breakPointIdx === 0 ? ' gap-3 ' : ''
+  cls += breakPointIdx === 0 ? ' gap-x-3 ' : ''
   cls += ' ' + [
     ' [&_.cell]:!mb-0',
     ' [&_.cell]:mb-2.5 [&_.cell]:sm:mb-0',
@@ -52,7 +52,7 @@ const settingClass = computed(() => {
       '[&_.cell]:xl:flex',
       '[&_.cell]:2xl:flex',
     ][getBreakpointIdx(props.cellFlexPoint)]
-    cls += ' [&_.label]:sm:pt-2 ' + [
+    cls += ' ' + [
       '[&_.label]:md:w-12 [&_.label]:xl:w-20',
       '[&_.label]:md:w-16 [&_.label]:xl:w-24',
       '[&_.label]:md:w-24 [&_.label]:xl:w-32',
@@ -60,7 +60,7 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   }
-  cls += ' [&_.height-default]:pt-2 [&_.height-default]:2xl:!pt-1.5 [&_.height-compact]:!pt-1 '
+  cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
   cls += '[&_textarea]:text-xs [&_textarea]:xl:text-sm '
   cls += '[&_label]:text-xs [&_label]:xl:text-sm'
   return cls
@@ -68,7 +68,7 @@ const settingClass = computed(() => {
 </script>
 
 <template>
-  <div :class="`block ${props.defaultClass} ${settingClass} ${props.class}`">
+  <div :class="`block ${mode} ${props.defaultClass} ${settingClass} ${props.class}`">
     <slot />
   </div>
 </template>

app/components/pub/custom-ui/doc-entry/colon.vue

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="w-5 text-center">:</div>    
+</template>

app/components/pub/custom-ui/doc-entry/index.ts

@@ -0,0 +1,3 @@
+export { default as Block } from './block.vue'
+export { default as Cell } from './cell.vue'
+// export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'

app/components/pub/custom-ui/nav-header/prep.vue

@@ -23,7 +23,7 @@ function btnClick() {
   <header>
     <div class="flex items-center justify-between">
       <div class="flex items-center">
-        <div class="text-lg font-semibold text-gray-900">
+        <div class="md:text-base xl:text-lg font-semibold text-gray-900">
           <Icon :name="props.prep.icon!" class="mr-2 size-4 md:size-6 align-middle" />
           {{ props.prep.title }}
         </div>
@@ -39,7 +39,7 @@ function btnClick() {
           />
         </div>
         <div v-if="prep.addNav" class="flex items-center ms-2">
-          <Button class="rounded-md border border-gray-300 px-4 py-2 text-white sm:text-sm" @click="btnClick">
+          <Button class="rounded-md border border-gray-300 text-white" @click="btnClick">
             <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle" />
             {{ prep.addNav.label }}
           </Button>

app/components/pub/ui/button/index.ts

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md md:tex-xs xl:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -19,7 +19,7 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2',
+        default: 'md:h8 xl:h-9 px-4 py-2',
         xs: 'h-7 rounded px-2',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10 rounded-md px-8',