@rafael_dias/akoma 0.3.0 → 0.4.0

package/dist/index.d.ts

@@ -33,6 +33,25 @@ padding: "none" | "sm" | "md" | "lg";
 
 declare const __VLS_component_5: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
+declare const __VLS_component_6: DefineComponent<__VLS_Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_12> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
+
+declare const __VLS_component_7: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLUListElement>;
+
+declare const __VLS_component_8: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_13> & Readonly<{}>, {
+disabled: boolean;
+interactive: boolean;
+padding: ListRowPadding;
+divider: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_9: DefineComponent<__VLS_Props_14, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_14> & Readonly<{}>, {
+variant: IconButtonVariant;
+size: IconButtonSize;
+disabled: boolean;
+loading: boolean;
+type: "button" | "submit" | "reset";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
+
 declare type __VLS_Props = {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -42,6 +61,52 @@ declare type __VLS_Props = {
     block?: boolean;
 };
 
+declare type __VLS_Props_10 = {
+    /** Horizontal spacing around the line */
+    spacing?: DividerSpacing;
+    /** Optional centered label */
+    label?: string;
+    vertical?: boolean;
+};
+
+declare type __VLS_Props_11 = {
+    /** Current value */
+    value?: number;
+    max?: number;
+    size?: ProgressSize;
+    /** CSS color for the fill (defaults to accent) */
+    color?: string;
+    label?: string;
+    showValue?: boolean;
+};
+
+declare type __VLS_Props_12 = {
+    title?: string;
+};
+
+declare type __VLS_Props_13 = {
+    interactive?: boolean;
+    disabled?: boolean;
+    padding?: ListRowPadding;
+    divider?: boolean;
+};
+
+declare type __VLS_Props_14 = {
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: 'button' | 'submit' | 'reset';
+    label: string;
+};
+
+declare type __VLS_Props_15 = {
+    modelValue?: boolean;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+};
+
 declare type __VLS_Props_2 = {
     variant?: BadgeVariant;
     label?: string;
@@ -166,6 +231,56 @@ declare function __VLS_template_5(): {
     rootEl: HTMLDivElement;
 };
 
+declare function __VLS_template_6(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => unknown;
+        action?: () => unknown;
+    }> & {
+        default?: () => unknown;
+        action?: () => unknown;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+
+declare function __VLS_template_7(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLUListElement;
+};
+
+declare function __VLS_template_8(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        leading?: () => unknown;
+        default?: () => unknown;
+        subtitle?: () => unknown;
+        trailing?: () => unknown;
+    }> & {
+        leading?: () => unknown;
+        default?: () => unknown;
+        subtitle?: () => unknown;
+        trailing?: () => unknown;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_9(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => unknown;
+    }> & {
+        default?: () => unknown;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+
 declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
@@ -176,6 +291,14 @@ declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
 
 declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
 
+declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
+
+declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
+
+declare type __VLS_TemplateResult_8 = ReturnType<typeof __VLS_template_8>;
+
+declare type __VLS_TemplateResult_9 = ReturnType<typeof __VLS_template_9>;
+
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
@@ -206,6 +329,30 @@ declare type __VLS_WithTemplateSlots_5<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_6<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_7<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_8<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_9<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 export declare const AkAmbientBg: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
 contained: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
@@ -218,8 +365,15 @@ export declare const AkCard: __VLS_WithTemplateSlots_4<typeof __VLS_component_4,
 
 export declare const AkChip: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
 
+export declare const AkDivider: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
+spacing: DividerSpacing;
+vertical: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
 export declare const AkEmptyState: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
+export declare const AkIconButton: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
+
 export declare const AkInput: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => any;
 }, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{
@@ -232,6 +386,10 @@ modelValue: string | number;
 required: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
 
+export declare const AkList: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+
+export declare const AkListRow: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+
 export declare const Akoma: Plugin_2;
 
 export declare type AkomaOptions = {
@@ -239,12 +397,30 @@ export declare type AkomaOptions = {
     prefix?: string;
 };
 
+export declare const AkProgress: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {
+size: ProgressSize;
+value: number;
+max: number;
+showValue: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare const AkSectionHeader: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+
 export declare const AkShimmer: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {
 width: string;
 height: string;
 radius: "sm" | "md" | "lg" | "full" | string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
+export declare const AkSwitch: DefineComponent<__VLS_Props_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+"update:modelValue": (value: boolean) => any;
+}, string, PublicProps, Readonly<__VLS_Props_15> & Readonly<{
+"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+disabled: boolean;
+modelValue: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLLabelElement>;
+
 export declare const AkTextarea: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:modelValue": (value: string) => any;
 }, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{
@@ -262,6 +438,16 @@ export declare type ButtonSize = 'sm' | 'md' | 'lg';
 
 export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
 
+export declare type DividerSpacing = 'sm' | 'md' | 'lg';
+
+export declare type IconButtonSize = 'sm' | 'md' | 'lg';
+
+export declare type IconButtonVariant = 'ghost' | 'secondary' | 'danger';
+
 export declare type InputSize = 'sm' | 'md' | 'lg';
 
+export declare type ListRowPadding = 'sm' | 'md';
+
+export declare type ProgressSize = 'sm' | 'md';
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rafael_dias/akoma",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A human Vue 3 design system with expressive App and trustworthy Site moods.",
   "type": "module",
   "author": "Rafael",
@@ -28,11 +28,13 @@
     "./style.css": "./dist/akoma.css",
     "./tokens.css": "./src/styles/tokens.css",
     "./base.css": "./src/styles/base.css",
-    "./motion.css": "./src/styles/motion.css"
+    "./motion.css": "./src/styles/motion.css",
+    "./content/*": "./content/*"
   },
   "files": [
     "dist",
-    "src/styles"
+    "src/styles",
+    "content"
   ],
   "publishConfig": {
     "access": "public",
@@ -41,7 +43,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -p tsconfig.lib.json --declaration --emitDeclarationOnly && vite build --config vite.lib.config.ts",
-    "build:docs": "vite build",
+    "build:docs": "vite build && node scripts/prepare-docs-dist.mjs",
     "preview": "vite preview",
     "typecheck": "vue-tsc -p tsconfig.app.json --noEmit"
   },
@@ -49,12 +51,13 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "vue": "^3.5.39"
+    "vue": "^3.5.0"
   },
   "devDependencies": {
     "@types/node": "^24.13.2",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vue/tsconfig": "^0.9.1",
+    "marked": "^18.0.6",
     "typescript": "~6.0.2",
     "vite": "^8.1.1",
     "vite-plugin-dts": "^4.5.4",

package/src/styles/tokens.css

@@ -54,8 +54,8 @@
   --text-tertiary: #929b95;
   --text-inverse: #fffefa;
 
-  --border: rgba(41, 49, 45, 0.07);
-  --border-strong: rgba(41, 49, 45, 0.14);
+  --border: rgba(41, 49, 45, 0.1);
+  --border-strong: rgba(41, 49, 45, 0.18);
 
   --accent: #6658b8;
   --accent-hover: #5548a3;
@@ -78,28 +78,28 @@
   --info: #426f8e;
   --info-soft: #e6f0f6;
 
-  --shadow-sm: 0 1px 2px rgba(49, 44, 35, 0.04), 0 8px 22px rgba(49, 44, 35, 0.055);
-  --shadow-md: 0 2px 4px rgba(49, 44, 35, 0.04), 0 18px 44px rgba(49, 44, 35, 0.09);
-  --shadow-nav: 0 -8px 32px rgba(49, 44, 35, 0.07);
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-nav: 0 -1px 0 var(--border);
 
-  --radius-sm: 12px;
-  --radius-md: 18px;
-  --radius-lg: 28px;
+  --radius-sm: 8px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
   --button-radius: var(--radius-full);
-  --card-radius: 24px;
-  --field-radius: 16px;
+  --card-radius: 10px;
+  --field-radius: 12px;
   --chip-radius: var(--radius-full);
   --badge-radius: var(--radius-full);
 
-  --card-bg: var(--bg-elevated);
-  --card-border: transparent;
-  --card-shadow: var(--shadow-sm);
+  --card-bg: var(--bg);
+  --card-border: var(--border-strong);
+  --card-shadow: none;
   --field-bg: var(--bg-soft);
   --field-bg-hover: var(--bg-muted);
   --field-border: transparent;
   --control-border: var(--border-strong);
-  --focus-ring: 0 0 0 4px rgba(102, 88, 184, 0.15);
-  --button-shadow: 0 6px 18px rgba(102, 88, 184, 0.2);
+  --focus-ring: 0 0 0 3px rgba(102, 88, 184, 0.14);
+  --button-shadow: none;
 
   --nav-glass: rgba(255, 254, 250, 0.9);
   --fill-strong: #29312d;
@@ -125,30 +125,30 @@
   --text-secondary: #65706a;
   --text-tertiary: #929b95;
   --text-inverse: #fffefa;
-  --border: rgba(41, 49, 45, 0.07);
-  --border-strong: rgba(41, 49, 45, 0.14);
+  --border: rgba(41, 49, 45, 0.1);
+  --border-strong: rgba(41, 49, 45, 0.18);
   --accent: #6658b8;
   --accent-hover: #5548a3;
   --accent-soft: #ece9f8;
   --accent-contrast: #ffffff;
-  --shadow-sm: 0 1px 2px rgba(49, 44, 35, 0.04), 0 8px 22px rgba(49, 44, 35, 0.055);
-  --shadow-md: 0 2px 4px rgba(49, 44, 35, 0.04), 0 18px 44px rgba(49, 44, 35, 0.09);
-  --radius-sm: 12px;
-  --radius-md: 18px;
-  --radius-lg: 28px;
+  --shadow-sm: none;
+  --shadow-md: none;
+  --radius-sm: 8px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
   --button-radius: var(--radius-full);
-  --card-radius: 24px;
-  --field-radius: 16px;
+  --card-radius: 10px;
+  --field-radius: 12px;
   --chip-radius: var(--radius-full);
   --badge-radius: var(--radius-full);
-  --card-bg: var(--bg-elevated);
-  --card-border: transparent;
-  --card-shadow: var(--shadow-sm);
+  --card-bg: var(--bg);
+  --card-border: var(--border-strong);
+  --card-shadow: none;
   --field-bg: var(--bg-soft);
   --field-bg-hover: var(--bg-muted);
   --field-border: transparent;
-  --focus-ring: 0 0 0 4px rgba(102, 88, 184, 0.15);
-  --button-shadow: 0 6px 18px rgba(102, 88, 184, 0.2);
+  --focus-ring: 0 0 0 3px rgba(102, 88, 184, 0.14);
+  --button-shadow: none;
 }
 
 /* Site expression — mineral white + confident evergreen.
@@ -166,8 +166,8 @@
   --text-tertiary: #8b978f;
   --text-inverse: #ffffff;
 
-  --border: rgba(33, 49, 41, 0.08);
-  --border-strong: rgba(33, 49, 41, 0.16);
+  --border: rgba(33, 49, 41, 0.11);
+  --border-strong: rgba(33, 49, 41, 0.2);
 
   --accent: #2e684f;
   --accent-hover: #245640;
@@ -190,28 +190,28 @@
   --info: #386984;
   --info-soft: #e3eef4;
 
-  --shadow-sm: 0 1px 2px rgba(28, 48, 38, 0.035), 0 5px 16px rgba(28, 48, 38, 0.045);
-  --shadow-md: 0 2px 4px rgba(28, 48, 38, 0.04), 0 14px 36px rgba(28, 48, 38, 0.075);
-  --shadow-nav: 0 -6px 28px rgba(28, 48, 38, 0.055);
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-nav: 0 -1px 0 var(--border);
 
-  --radius-sm: 8px;
-  --radius-md: 12px;
-  --radius-lg: 18px;
-  --button-radius: 10px;
-  --card-radius: 16px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --button-radius: 8px;
+  --card-radius: 8px;
   --field-radius: 10px;
   --chip-radius: 10px;
   --badge-radius: 8px;
 
-  --card-bg: var(--bg-elevated);
-  --card-border: var(--border);
-  --card-shadow: 0 1px 2px rgba(28, 48, 38, 0.025), 0 8px 24px rgba(28, 48, 38, 0.04);
+  --card-bg: var(--bg);
+  --card-border: var(--border-strong);
+  --card-shadow: none;
   --field-bg: var(--bg-elevated);
   --field-bg-hover: var(--bg-elevated);
   --field-border: var(--border-strong);
   --control-border: var(--border-strong);
-  --focus-ring: 0 0 0 4px rgba(46, 104, 79, 0.13);
-  --button-shadow: 0 4px 12px rgba(46, 104, 79, 0.16);
+  --focus-ring: 0 0 0 3px rgba(46, 104, 79, 0.12);
+  --button-shadow: none;
 
   --nav-glass: rgba(255, 255, 255, 0.92);
   --fill-strong: #213129;
@@ -257,13 +257,14 @@
   --info: #86afc8;
   --info-soft: #293b46;
 
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16), 0 8px 22px rgba(0, 0, 0, 0.14);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.18), 0 18px 44px rgba(0, 0, 0, 0.24);
-  --card-border: rgba(255, 255, 255, 0.04);
+  --shadow-sm: none;
+  --shadow-md: none;
+  --card-border: rgba(255, 255, 255, 0.1);
+  --card-shadow: none;
   --field-border: rgba(255, 255, 255, 0.1);
   --control-border: rgba(255, 255, 255, 0.14);
-  --focus-ring: 0 0 0 4px rgba(169, 158, 232, 0.18);
-  --button-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
+  --focus-ring: 0 0 0 3px rgba(169, 158, 232, 0.16);
+  --button-shadow: none;
 
   --nav-glass: rgba(39, 44, 41, 0.92);
   --fill-strong: #f3f1ec;
@@ -305,14 +306,14 @@
   --info: #84adc4;
   --info-soft: #293d47;
 
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 18px rgba(0, 0, 0, 0.13);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.18), 0 16px 40px rgba(0, 0, 0, 0.22);
-  --card-border: rgba(255, 255, 255, 0.065);
-  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.12);
+  --shadow-sm: none;
+  --shadow-md: none;
+  --card-border: rgba(255, 255, 255, 0.1);
+  --card-shadow: none;
   --field-border: rgba(255, 255, 255, 0.13);
   --control-border: rgba(255, 255, 255, 0.14);
-  --focus-ring: 0 0 0 4px rgba(130, 185, 157, 0.16);
-  --button-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  --focus-ring: 0 0 0 3px rgba(130, 185, 157, 0.14);
+  --button-shadow: none;
 
   --nav-glass: rgba(35, 45, 40, 0.92);
   --fill-strong: #f0f3f0;