@filipgutica/ui 0.1.0 → 0.2.0

package/README.md

@@ -22,6 +22,18 @@ The theme exposes Tailwind utilities such as `bg-ui-bg`, `bg-ui-surface`,
 
 ## Vue components
 
+The first application-focused set includes:
+
+- `UiButton` with primary, secondary, ghost, danger, and text variants
+- `UiInput`, `UiSelect`, and `UiField` for consistent form controls
+- `UiCheckbox`, `UiBadge`, `UiAlert`, and `UiProgress` for state and feedback
+- `UiSurface` for restrained content grouping
+- `UiDialog`, built on Reka UI, for accessible modal interaction
+
+Place `UiInput` or `UiSelect` inside `UiField`. The field supplies the control ID
+and automatically connects its description or error through the corresponding
+ARIA relationship.
+
 ```vue
 <template>
   <UiButton variant="secondary" size="compact">
@@ -73,3 +85,14 @@ redistribute theme assets remain responsible for their licenses.
 pnpm install
 pnpm verify
 ```
+
+Commits follow the Conventional Commits format. Releases run from `main`:
+
+- `fix:` publishes a patch release
+- `feat:` publishes a minor release
+- a `BREAKING CHANGE:` footer publishes a major release
+
+The `release.yml` workflow publishes through npm trusted publishing with GitHub
+OIDC. Configure the npm package's trusted publisher once with user
+`filipgutica`, repository `ui`, and workflow filename `release.yml`; no npm token
+is stored in GitHub.

package/dist/components/UiAlert.vue.d.ts

@@ -0,0 +1,18 @@
+export interface UiAlertProps {
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'error';
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiAlertProps> & Readonly<{}>, {
+    tone: "neutral" | "info" | "success" | "warning" | "danger" | "error";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiBadge.vue.d.ts

@@ -0,0 +1,18 @@
+export interface UiBadgeProps {
+    tone?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiBadgeProps> & Readonly<{}>, {
+    tone: "neutral" | "info" | "success" | "warning" | "danger";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiButton.vue.d.ts

@@ -1,8 +1,9 @@
 export interface UiButtonProps {
     disabled?: boolean;
+    loading?: boolean;
     size?: 'default' | 'compact';
     type?: 'button' | 'submit' | 'reset';
-    variant?: 'primary' | 'secondary' | 'text';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'text';
 }
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
@@ -10,9 +11,10 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<UiButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiButtonProps> & Readonly<{}>, {
     disabled: boolean;
+    loading: boolean;
     size: "default" | "compact";
     type: "button" | "submit" | "reset";
-    variant: "primary" | "secondary" | "text";
+    variant: "primary" | "secondary" | "ghost" | "danger" | "text";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/UiCheckbox.vue.d.ts

@@ -0,0 +1,24 @@
+export interface UiCheckboxProps {
+    disabled?: boolean;
+    modelValue?: boolean;
+}
+declare var __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiCheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<UiCheckboxProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: boolean) => any;
+}>, {
+    disabled: boolean;
+    modelValue: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiDialog.vue.d.ts

@@ -0,0 +1,24 @@
+export interface UiDialogProps {
+    description?: string;
+    open: boolean;
+    title: string;
+}
+declare var __VLS_45: {}, __VLS_47: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_45) => any;
+} & {
+    footer?: (props: typeof __VLS_47) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<UiDialogProps> & Readonly<{
+    "onUpdate:open"?: (value: boolean) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiField.vue.d.ts

@@ -0,0 +1,21 @@
+export interface UiFieldProps {
+    controlId: string;
+    description?: string;
+    error?: string;
+    label: string;
+}
+type __VLS_Slots = {
+    default(props: {
+        descriptionId: string | undefined;
+        errorId: string | undefined;
+    }): unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiInput.vue.d.ts

@@ -0,0 +1,19 @@
+export interface UiInputProps {
+    disabled?: boolean;
+    id?: string;
+    invalid?: boolean;
+    modelValue?: string;
+    type?: 'text' | 'search' | 'email' | 'password' | 'url';
+}
+declare const __VLS_export: import("vue").DefineComponent<UiInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<UiInputProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    disabled: boolean;
+    type: "text" | "search" | "email" | "password" | "url";
+    modelValue: string;
+    invalid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/UiProgress.vue.d.ts

@@ -0,0 +1,8 @@
+export interface UiProgressProps {
+    label: string;
+    max: number;
+    value: number | null;
+}
+declare const __VLS_export: import("vue").DefineComponent<UiProgressProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiProgressProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/UiSelect.vue.d.ts

@@ -0,0 +1,27 @@
+export interface UiSelectProps {
+    disabled?: boolean;
+    id?: string;
+    invalid?: boolean;
+    modelValue?: string;
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiSelectProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<UiSelectProps> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    disabled: boolean;
+    modelValue: string;
+    invalid: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/UiSurface.vue.d.ts

@@ -0,0 +1,20 @@
+export interface UiSurfaceProps {
+    as?: string;
+    padding?: 'none' | 'compact' | 'default';
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<UiSurfaceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UiSurfaceProps> & Readonly<{}>, {
+    as: string;
+    padding: "none" | "compact" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/field-context.d.ts

@@ -0,0 +1,8 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+export interface UiFieldContext {
+    controlId: ComputedRef<string>;
+    descriptionId: ComputedRef<string | undefined>;
+    errorId: ComputedRef<string | undefined>;
+    invalid: ComputedRef<boolean>;
+}
+export declare const uiFieldContextKey: InjectionKey<UiFieldContext>;

package/dist/index.d.ts

@@ -1,2 +1,20 @@
 export { default as UiButton } from './components/UiButton.vue';
 export type { UiButtonProps } from './components/UiButton.vue';
+export { default as UiAlert } from './components/UiAlert.vue';
+export type { UiAlertProps } from './components/UiAlert.vue';
+export { default as UiBadge } from './components/UiBadge.vue';
+export type { UiBadgeProps } from './components/UiBadge.vue';
+export { default as UiCheckbox } from './components/UiCheckbox.vue';
+export type { UiCheckboxProps } from './components/UiCheckbox.vue';
+export { default as UiDialog } from './components/UiDialog.vue';
+export type { UiDialogProps } from './components/UiDialog.vue';
+export { default as UiField } from './components/UiField.vue';
+export type { UiFieldProps } from './components/UiField.vue';
+export { default as UiInput } from './components/UiInput.vue';
+export type { UiInputProps } from './components/UiInput.vue';
+export { default as UiProgress } from './components/UiProgress.vue';
+export type { UiProgressProps } from './components/UiProgress.vue';
+export { default as UiSelect } from './components/UiSelect.vue';
+export type { UiSelectProps } from './components/UiSelect.vue';
+export { default as UiSurface } from './components/UiSurface.vue';
+export type { UiSurfaceProps } from './components/UiSurface.vue';

package/dist/index.js

@@ -1,36 +1,316 @@
-import { createBlock as e, defineComponent as t, openBlock as n, renderSlot as r, unref as i, withCtx as a } from "vue";
-import { Primitive as o } from "reka-ui";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, createVNode as o, defineComponent as s, inject as c, normalizeStyle as l, openBlock as u, provide as d, renderSlot as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+import { CheckboxIndicator as g, CheckboxRoot as _, DialogClose as v, DialogContent as y, DialogDescription as b, DialogOverlay as x, DialogPortal as S, DialogRoot as C, DialogTitle as w, Primitive as T, ProgressIndicator as E, ProgressRoot as D } from "reka-ui";
 //#endregion
 //#region src/components/UiButton.vue
-var s = /* @__PURE__ */ t({
+var O = /* @__PURE__ */ s({
 	__name: "UiButton",
 	props: {
 		disabled: {
 			type: Boolean,
 			default: !1
 		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
 		size: { default: "default" },
 		type: { default: "button" },
 		variant: { default: "primary" }
 	},
-	setup(t) {
-		return (s, c) => (n(), e(i(o), {
+	setup(e) {
+		return (n, r) => (u(), t(m(T), {
 			as: "button",
 			class: "fg-button",
-			"data-size": t.size,
-			"data-variant": t.variant,
-			disabled: t.disabled,
-			type: t.type
+			"data-size": e.size,
+			"data-variant": e.variant,
+			"aria-busy": e.loading ? "true" : void 0,
+			disabled: e.disabled || e.loading,
+			type: e.type
 		}, {
-			default: a(() => [r(s.$slots, "default")]),
+			default: h(() => [f(n.$slots, "default")]),
 			_: 3
 		}, 8, [
 			"data-size",
 			"data-variant",
+			"aria-busy",
 			"disabled",
 			"type"
 		]));
 	}
+}), k = /* @__PURE__ */ s({
+	__name: "UiAlert",
+	props: { tone: { default: "neutral" } },
+	setup(e) {
+		return (n, r) => (u(), t(m(T), {
+			as: "div",
+			class: "fg-alert",
+			"data-tone": e.tone,
+			role: e.tone === "danger" || e.tone === "error" ? "alert" : "status"
+		}, {
+			default: h(() => [f(n.$slots, "default")]),
+			_: 3
+		}, 8, ["data-tone", "role"]));
+	}
+}), A = /* @__PURE__ */ s({
+	__name: "UiBadge",
+	props: { tone: { default: "neutral" } },
+	setup(e) {
+		return (n, r) => (u(), t(m(T), {
+			as: "span",
+			class: "fg-badge",
+			"data-tone": e.tone
+		}, {
+			default: h(() => [f(n.$slots, "default")]),
+			_: 3
+		}, 8, ["data-tone"]));
+	}
+}), j = ["data-disabled"], M = { class: "fg-checkbox__label" }, N = /* @__PURE__ */ s({
+	__name: "UiCheckbox",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		modelValue: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = t, s = (e) => {
+			n("update:modelValue", e === !0);
+		};
+		return (t, n) => (u(), r("label", {
+			class: "fg-checkbox",
+			"data-disabled": e.disabled ? "true" : void 0
+		}, [o(m(_), {
+			class: "fg-checkbox__control",
+			disabled: e.disabled,
+			"model-value": e.modelValue,
+			"onUpdate:modelValue": s
+		}, {
+			default: h(() => [o(m(g), { class: "fg-checkbox__indicator" }, {
+				default: h(() => [...n[0] ||= [a("✓", -1)]]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["disabled", "model-value"]), i("span", M, [f(t.$slots, "default")])], 8, j));
+	}
+}), P = { class: "fg-dialog__header" }, F = { class: "fg-dialog__body" }, I = {
+	key: 0,
+	class: "fg-dialog__footer"
+}, L = /* @__PURE__ */ s({
+	__name: "UiDialog",
+	props: {
+		description: {},
+		open: { type: Boolean },
+		title: {}
+	},
+	emits: ["update:open"],
+	setup(e, { emit: s }) {
+		let c = s;
+		return (s, l) => (u(), t(m(C), {
+			open: e.open,
+			"onUpdate:open": l[0] ||= (e) => c("update:open", e)
+		}, {
+			default: h(() => [o(m(S), null, {
+				default: h(() => [o(m(x), { class: "fg-dialog__overlay" }), o(m(y), {
+					class: "fg-dialog__content",
+					"aria-modal": "true"
+				}, {
+					default: h(() => [
+						i("div", P, [i("div", null, [o(m(w), { class: "fg-dialog__title" }, {
+							default: h(() => [a(p(e.title), 1)]),
+							_: 1
+						}), e.description ? (u(), t(m(b), {
+							key: 0,
+							class: "fg-dialog__description"
+						}, {
+							default: h(() => [a(p(e.description), 1)]),
+							_: 1
+						})) : n("", !0)]), o(m(v), {
+							class: "fg-dialog__close",
+							"aria-label": "Close dialog"
+						}, {
+							default: h(() => [...l[1] ||= [a("×", -1)]]),
+							_: 1
+						})]),
+						i("div", F, [f(s.$slots, "default")]),
+						s.$slots.footer ? (u(), r("div", I, [f(s.$slots, "footer")])) : n("", !0)
+					]),
+					_: 3
+				})]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"]));
+	}
+}), R = Symbol("UiFieldContext"), z = ["data-invalid"], B = ["for"], V = ["id"], H = ["id"], U = /* @__PURE__ */ s({
+	__name: "UiField",
+	props: {
+		controlId: {},
+		description: {},
+		error: {},
+		label: {}
+	},
+	setup(t) {
+		let a = t, o = e(() => a.description && !a.error ? `${a.controlId}-description` : void 0), s = e(() => a.error ? `${a.controlId}-error` : void 0), c = e(() => !!a.error);
+		return d(R, {
+			controlId: e(() => a.controlId),
+			descriptionId: o,
+			errorId: s,
+			invalid: c
+		}), (e, a) => (u(), r("div", {
+			class: "fg-field",
+			"data-invalid": t.error ? "true" : void 0
+		}, [
+			i("label", {
+				class: "fg-field__label",
+				for: t.controlId
+			}, p(t.label), 9, B),
+			f(e.$slots, "default", {
+				descriptionId: o.value,
+				errorId: s.value
+			}),
+			t.description && !t.error ? (u(), r("p", {
+				key: 0,
+				id: o.value,
+				class: "fg-field__description",
+				"data-field-description": ""
+			}, p(t.description), 9, V)) : n("", !0),
+			t.error ? (u(), r("p", {
+				key: 1,
+				id: s.value,
+				class: "fg-field__error",
+				"data-field-error": ""
+			}, p(t.error), 9, H)) : n("", !0)
+		], 8, z));
+	}
+}), W = /* @__PURE__ */ s({
+	__name: "UiInput",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		id: {},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		modelValue: { default: "" },
+		type: { default: "text" }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: n }) {
+		let r = c(R, void 0), i = n, a = (e) => {
+			e.currentTarget instanceof HTMLInputElement && i("update:modelValue", e.currentTarget.value);
+		};
+		return (n, i) => (u(), t(m(T), {
+			as: "input",
+			class: "fg-input",
+			id: e.id ?? m(r)?.controlId.value,
+			"aria-describedby": m(r)?.descriptionId.value,
+			"aria-errormessage": m(r)?.errorId.value,
+			"aria-invalid": e.invalid || m(r)?.invalid.value ? "true" : void 0,
+			disabled: e.disabled,
+			type: e.type,
+			value: e.modelValue,
+			onInput: a
+		}, null, 8, [
+			"id",
+			"aria-describedby",
+			"aria-errormessage",
+			"aria-invalid",
+			"disabled",
+			"type",
+			"value"
+		]));
+	}
+}), G = /* @__PURE__ */ s({
+	__name: "UiProgress",
+	props: {
+		label: {},
+		max: {},
+		value: {}
+	},
+	setup(n) {
+		let r = n, i = e(() => r.value === null || r.max <= 0 ? 0 : Math.min(100, Math.max(0, r.value / r.max * 100)));
+		return (e, r) => (u(), t(m(D), {
+			class: "fg-progress",
+			"aria-label": n.label,
+			max: n.max,
+			"model-value": n.value
+		}, {
+			default: h(() => [o(m(E), {
+				class: "fg-progress__indicator",
+				style: l({ transform: `translateX(-${100 - i.value}%)` })
+			}, null, 8, ["style"])]),
+			_: 1
+		}, 8, [
+			"aria-label",
+			"max",
+			"model-value"
+		]));
+	}
+}), K = /* @__PURE__ */ s({
+	__name: "UiSelect",
+	props: {
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		id: {},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		modelValue: { default: "" }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: n }) {
+		let r = c(R, void 0), i = n, a = (e) => {
+			e.currentTarget instanceof HTMLSelectElement && i("update:modelValue", e.currentTarget.value);
+		};
+		return (n, i) => (u(), t(m(T), {
+			as: "select",
+			class: "fg-select",
+			id: e.id ?? m(r)?.controlId.value,
+			"aria-describedby": m(r)?.descriptionId.value,
+			"aria-errormessage": m(r)?.errorId.value,
+			"aria-invalid": e.invalid || m(r)?.invalid.value ? "true" : void 0,
+			disabled: e.disabled,
+			value: e.modelValue,
+			onChange: a
+		}, {
+			default: h(() => [f(n.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"id",
+			"aria-describedby",
+			"aria-errormessage",
+			"aria-invalid",
+			"disabled",
+			"value"
+		]));
+	}
+}), q = /* @__PURE__ */ s({
+	__name: "UiSurface",
+	props: {
+		as: { default: "section" },
+		padding: { default: "default" }
+	},
+	setup(e) {
+		return (n, r) => (u(), t(m(T), {
+			as: e.as,
+			class: "fg-surface",
+			"data-padding": e.padding
+		}, {
+			default: h(() => [f(n.$slots, "default")]),
+			_: 3
+		}, 8, ["as", "data-padding"]));
+	}
 });
 //#endregion
-export { s as UiButton };
+export { k as UiAlert, A as UiBadge, O as UiButton, N as UiCheckbox, L as UiDialog, U as UiField, W as UiInput, G as UiProgress, K as UiSelect, q as UiSurface };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@filipgutica/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A compact Vue design system with Tailwind CSS and VS Code theme support",
   "type": "module",
   "sideEffects": [
@@ -32,16 +32,19 @@
   "scripts": {
     "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
     "prepublishOnly": "pnpm verify",
+    "release": "semantic-release",
+    "release:dry-run": "semantic-release --dry-run --no-ci",
     "test": "vitest run",
     "typecheck": "vue-tsc -p tsconfig.json --noEmit",
-    "verify": "pnpm typecheck && pnpm test && pnpm build && pnpm pack --dry-run"
+    "verify": "pnpm typecheck && pnpm test && pnpm build && pnpm pack --dry-run && publint"
   },
   "engines": {
     "node": ">=22.12"
   },
   "packageManager": "pnpm@11.6.0",
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "license": "MIT",
   "repository": {
@@ -61,10 +64,15 @@
     "vue": ">=3.4.0"
   },
   "devDependencies": {
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
     "@types/node": "^26.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
     "@vue/test-utils": "^2.4.6",
+    "conventional-changelog-conventionalcommits": "^9.3.1",
     "happy-dom": "^20.12.2",
+    "publint": "^0.3.24",
+    "semantic-release": "^25.0.9",
     "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3",
     "vite": "^8.2.2",

package/src/components.css

@@ -1,16 +1,24 @@
 @layer components {
+  .fg-button,
+  .fg-input,
+  .fg-select,
+  .fg-dialog__close {
+    min-height: 2.5rem;
+    border: 1px solid transparent;
+    border-radius: var(--radius-control);
+    font: inherit;
+  }
+
   .fg-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    border: 1px solid transparent;
-    border-radius: var(--radius-control);
-    padding: 0.65rem 0.9rem;
+    padding: 0.55rem 0.85rem;
     color: var(--color-button-text);
     background: var(--color-button-bg);
-    font: inherit;
-    font-weight: 650;
+    font-weight: 680;
+    line-height: 1.25;
     cursor: pointer;
   }
 
@@ -18,29 +26,49 @@
     background: var(--color-button-hover);
   }
 
-  .fg-button:focus-visible {
-    outline: 3px solid var(--color-focus);
-    outline-offset: 2px;
+  .fg-button:disabled,
+  .fg-input:disabled,
+  .fg-select:disabled,
+  .fg-checkbox[data-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.58;
   }
 
-  .fg-button:disabled {
+  .fg-button[aria-busy="true"] {
     cursor: wait;
-    opacity: 0.6;
   }
 
   .fg-button[data-size="compact"] {
-    padding: 0.45rem 0.65rem;
-    font-size: 0.78rem;
+    min-height: 2rem;
+    padding: 0.35rem 0.6rem;
+    font-size: 0.8125rem;
   }
 
   .fg-button[data-variant="secondary"] {
     border-color: var(--color-border);
     color: var(--color-text);
-    background: var(--color-surface);
+    background: var(--color-surface-raised);
+  }
+
+  .fg-button[data-variant="secondary"]:hover:not(:disabled),
+  .fg-button[data-variant="ghost"]:hover:not(:disabled) {
+    color: var(--color-text);
+    background: var(--color-row-hover);
+  }
+
+  .fg-button[data-variant="ghost"] {
+    color: var(--color-muted);
+    background: transparent;
+  }
+
+  .fg-button[data-variant="danger"] {
+    color: var(--color-error);
+    background: var(--color-error-surface);
   }
 
   .fg-button[data-variant="text"] {
-    padding-inline: 0;
+    min-height: auto;
+    padding: 0;
     color: var(--color-link);
     background: transparent;
     text-decoration: underline;
@@ -52,8 +80,248 @@
     background: transparent;
   }
 
-  :root.high-contrast .fg-button {
+  .fg-input,
+  .fg-select {
+    width: 100%;
+    padding: 0.5rem 0.7rem;
+    border-color: var(--color-input-border);
+    color: var(--color-input-text);
+    background: var(--color-input-bg);
+    line-height: 1.35;
+  }
+
+  .fg-input::placeholder {
+    color: var(--color-input-placeholder);
+    opacity: 1;
+  }
+
+  .fg-input[aria-invalid="true"],
+  .fg-select[aria-invalid="true"] {
+    border-color: var(--color-error);
+  }
+
+  .fg-field {
+    display: grid;
+    gap: 0.4rem;
+    min-width: 0;
+  }
+
+  .fg-field__label {
+    color: var(--color-muted);
+    font-size: 0.8125rem;
+    font-weight: 680;
+  }
+
+  .fg-field__description,
+  .fg-field__error {
+    margin: 0;
+    font-size: 0.8125rem;
+  }
+
+  .fg-field__description { color: var(--color-muted); }
+  .fg-field__error { color: var(--color-error); }
+
+  .fg-checkbox {
+    display: inline-flex;
+    align-items: flex-start;
+    gap: 0.65rem;
+    color: var(--color-text);
+    cursor: pointer;
+  }
+
+  .fg-checkbox__control {
+    display: inline-grid;
+    flex: none;
+    width: 1.15rem;
+    height: 1.15rem;
+    margin-top: 0.1rem;
+    place-items: center;
+    border: 1px solid var(--color-input-border);
+    border-radius: 0.3rem;
+    color: var(--color-button-text);
+    background: var(--color-input-bg);
+  }
+
+  .fg-checkbox__control[data-state="checked"] {
+    border-color: var(--color-button-bg);
+    background: var(--color-button-bg);
+  }
+
+  .fg-checkbox__indicator {
+    font-size: 0.8rem;
+    font-weight: 800;
+    line-height: 1;
+  }
+
+  .fg-checkbox__label { line-height: 1.4; }
+
+  .fg-badge {
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-pill);
+    padding: 0.18rem 0.48rem;
+    color: var(--color-muted);
+    background: var(--color-surface-muted);
+    font-size: 0.75rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  .fg-badge[data-tone="info"] { color: var(--color-info); background: var(--color-info-surface); }
+  .fg-badge[data-tone="success"] { color: var(--color-success); background: var(--color-success-surface); }
+  .fg-badge[data-tone="warning"] { color: var(--color-warning); background: var(--color-warning-surface); }
+  .fg-badge[data-tone="danger"] { color: var(--color-error); background: var(--color-error-surface); }
+
+  .fg-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-control);
+    color: var(--color-text);
+    background: var(--color-surface);
+  }
+
+  .fg-alert[data-tone="info"] { background: var(--color-info-surface); }
+  .fg-alert[data-tone="success"] { background: var(--color-success-surface); }
+  .fg-alert[data-tone="warning"] { background: var(--color-warning-surface); }
+  .fg-alert[data-tone="danger"],
+  .fg-alert[data-tone="error"] {
+    border-color: var(--color-error);
+    color: var(--color-error);
+    background: var(--color-error-surface);
+  }
+
+  .fg-surface {
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--radius-panel);
+    background: var(--color-surface-raised);
+  }
+
+  .fg-surface[data-padding="compact"] { padding: 0.85rem; }
+  .fg-surface[data-padding="default"] { padding: 1.2rem; }
+
+  .fg-progress {
+    position: relative;
+    height: 0.55rem;
+    overflow: hidden;
+    border-radius: var(--radius-pill);
+    background: var(--color-surface-muted);
+  }
+
+  .fg-progress__indicator {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--color-progress);
+    transition: transform var(--duration-fast) ease-out;
+  }
+
+  .fg-dialog__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    background: var(--color-overlay);
+  }
+
+  .fg-dialog__content {
+    position: fixed;
+    z-index: 51;
+    top: 50%;
+    left: 50%;
+    display: grid;
+    width: min(42rem, calc(100vw - 2rem));
+    max-height: min(42rem, calc(100vh - 2rem));
+    overflow: hidden;
+    transform: translate(-50%, -50%);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-panel);
+    color: var(--color-text);
+    background: var(--color-surface-raised);
+    box-shadow: var(--shadow-dialog);
+  }
+
+  .fg-dialog__header,
+  .fg-dialog__footer {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.2rem;
+  }
+
+  .fg-dialog__header { border-bottom: 1px solid var(--color-border-subtle); }
+  .fg-dialog__footer { justify-content: flex-end; border-top: 1px solid var(--color-border-subtle); }
+
+  .fg-dialog__title {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 750;
+  }
+
+  .fg-dialog__description {
+    margin: 0.25rem 0 0;
+    color: var(--color-muted);
+    font-size: 0.875rem;
+  }
+
+  .fg-dialog__body {
+    min-height: 0;
+    overflow: auto;
+    padding: 1.2rem;
+  }
+
+  .fg-dialog__close {
+    display: inline-grid;
+    flex: none;
+    width: 2.5rem;
+    padding: 0;
+    place-items: center;
+    color: var(--color-muted);
+    background: transparent;
+    font-size: 1.35rem;
+    cursor: pointer;
+  }
+
+  .fg-dialog__close:hover { color: var(--color-text); background: var(--color-row-hover); }
+
+  .fg-button:focus-visible,
+  .fg-input:focus-visible,
+  .fg-select:focus-visible,
+  .fg-checkbox__control:focus-visible,
+  .fg-dialog__close:focus-visible,
+  .fg-dialog__content:focus-visible {
+    outline: 3px solid var(--color-focus);
+    outline-offset: 2px;
+  }
+
+  :root.high-contrast .fg-button,
+  :root.high-contrast .fg-input,
+  :root.high-contrast .fg-select,
+  :root.high-contrast .fg-checkbox__control,
+  :root.high-contrast .fg-alert,
+  :root.high-contrast .fg-surface,
+  :root.high-contrast .fg-dialog__content {
     border-width: 2px;
     border-color: var(--color-border);
   }
+
+  @media (max-width: 640px) {
+    .fg-dialog__content {
+      top: auto;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      max-height: calc(100vh - 1rem);
+      transform: none;
+      border-radius: var(--radius-panel) var(--radius-panel) 0 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fg-progress__indicator { transition: none; }
+  }
 }

package/src/theme.css

@@ -37,8 +37,10 @@
   --color-success-surface: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
   --color-info-surface: color-mix(in srgb, var(--color-info) 12%, var(--color-surface));
   --radius-control: 0.55rem;
-  --radius-panel: 0.9rem;
+  --radius-panel: 0.75rem;
+  --radius-pill: 999px;
   --duration-fast: 180ms;
+  --shadow-dialog: 0 20px 64px rgb(0 0 0 / 24%);
 }
 
 :root.dark {