tuhfa-design-system 0.1.0 → 0.2.0

package/dist/src/components/Avatar.vue.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    size?: number;
+    colorA: string;
+    colorB: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/src/components/Button.vue.d.ts

@@ -0,0 +1,34 @@
+interface Props {
+    variant?: 'primary' | 'outline';
+    size?: 'sm' | 'md';
+    fullWidth?: boolean;
+    disabled?: boolean;
+    type?: 'button' | 'submit';
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    type: "button" | "submit";
+    size: "sm" | "md";
+    variant: "primary" | "outline";
+    fullWidth: boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/Checkbox.vue.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    label?: string;
+    disabled?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = {
+    modelValue?: boolean;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
+export default _default;

package/dist/src/components/Input.vue.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    label?: string;
+    type?: string;
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+    autocomplete?: string;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    type: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
+export default _default;

package/dist/src/components/NavTab.vue.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    label: string;
+    active?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+export default _default;

package/dist/src/components/StatusPill.vue.d.ts

@@ -0,0 +1,20 @@
+interface Props {
+    status: 'positive' | 'pending' | 'neutral';
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLSpanElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/components/Textarea.vue.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    label?: string;
+    rows?: number;
+    placeholder?: string;
+    disabled?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = {
+    modelValue?: string;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    rows: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
+export default _default;

package/dist/src/index.d.ts

@@ -1 +1,8 @@
+export { default as Avatar } from './components/Avatar.vue';
+export { default as Button } from './components/Button.vue';
+export { default as Checkbox } from './components/Checkbox.vue';
+export { default as Input } from './components/Input.vue';
+export { default as NavTab } from './components/NavTab.vue';
+export { default as StatusPill } from './components/StatusPill.vue';
 export { default as StripePlaceholder } from './components/StripePlaceholder.vue';
+export { default as Textarea } from './components/Textarea.vue';

package/dist/tokens.css

@@ -46,6 +46,10 @@
 
   --color-border: oklch(88% 0.008 75);
 
+  /* Radius + card shadow, backing the Button/Input/Textarea/Avatar/etc. components below. */
+  --radius-sm: 3px;
+  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.05);
+
   --color-bg-page: oklch(98% 0.004 90);
   --color-bg-strip: oklch(95.5% 0.006 85);
 

package/dist/tuhfa-design-system.js

@@ -1,7 +1,7 @@
-import { createElementBlock as e, defineComponent as t, normalizeClass as n, normalizeStyle as r, openBlock as i } from "vue";
+import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, toDisplayString as u, useModel as d, vModelCheckbox as f, vModelDynamic as p, vModelText as m, withDirectives as h } from "vue";
 //#endregion
 //#region src/components/StripePlaceholder.vue
-var a = /* @__PURE__ */ t({
+var g = /* @__PURE__ */ i({
 	__name: "StripePlaceholder",
 	props: {
 		colorA: {},
@@ -13,13 +13,189 @@ var a = /* @__PURE__ */ t({
 			default: !1
 		}
 	},
-	setup(t) {
-		let a = t, o = `repeating-linear-gradient(${a.angle}deg, ${a.colorA}, ${a.colorA} ${a.stripeWidth}px, ${a.colorB} ${a.stripeWidth}px, ${a.colorB} ${a.stripeWidth * 2}px)`;
-		return (a, s) => (i(), e("div", {
-			class: n(["h-full w-full", t.rounded ? "rounded-full" : ""]),
-			style: r({ backgroundImage: o })
+	setup(e) {
+		let n = e, r = `repeating-linear-gradient(${n.angle}deg, ${n.colorA}, ${n.colorA} ${n.stripeWidth}px, ${n.colorB} ${n.stripeWidth}px, ${n.colorB} ${n.stripeWidth * 2}px)`;
+		return (n, i) => (c(), t("div", {
+			class: o(["h-full w-full", e.rounded ? "rounded-full" : ""]),
+			style: s({ backgroundImage: r })
 		}, null, 6));
 	}
+}), _ = /* @__PURE__ */ i({
+	__name: "Avatar",
+	props: {
+		size: { default: 32 },
+		colorA: {},
+		colorB: {}
+	},
+	setup(e) {
+		let n = e;
+		return (i, a) => (c(), t("div", {
+			class: "overflow-hidden rounded-full",
+			style: s({
+				width: `${n.size}px`,
+				height: `${n.size}px`,
+				boxShadow: "0 0 0 1.5px var(--color-border)"
+			})
+		}, [r(g, {
+			"color-a": e.colorA,
+			"color-b": e.colorB,
+			angle: 135,
+			"stripe-width": n.size / 4,
+			rounded: ""
+		}, null, 8, [
+			"color-a",
+			"color-b",
+			"stripe-width"
+		])], 4));
+	}
+}), v = ["type", "disabled"], y = /* @__PURE__ */ i({
+	__name: "Button",
+	props: {
+		variant: { default: "primary" },
+		size: { default: "md" },
+		fullWidth: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		type: { default: "button" }
+	},
+	emits: ["click"],
+	setup(e, { emit: n }) {
+		let r = e, i = n;
+		function a(e) {
+			r.disabled || i("click", e);
+		}
+		return (n, r) => (c(), t("button", {
+			type: e.type,
+			disabled: e.disabled,
+			class: o(["inline-flex items-center justify-center rounded-sm text-button font-bold transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-60", [
+				e.variant === "primary" ? "bg-accent text-white" : "border border-border bg-transparent text-ink",
+				e.size === "sm" ? "px-4 py-2" : "px-5 py-3",
+				e.fullWidth ? "w-full" : "w-auto"
+			]]),
+			onClick: a
+		}, [l(n.$slots, "default")], 10, v));
+	}
+}), b = ["disabled"], x = {
+	key: 0,
+	class: "text-sm text-ink"
+}, S = /* @__PURE__ */ i({
+	__name: "Checkbox",
+	props: /*@__PURE__*/ a({
+		label: {},
+		disabled: { type: Boolean }
+	}, {
+		modelValue: { type: Boolean },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(r) {
+		let i = d(r, "modelValue");
+		return (a, s) => (c(), t("label", { class: o(["inline-flex items-center gap-2", r.disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"]) }, [h(n("input", {
+			"onUpdate:modelValue": s[0] ||= (e) => i.value = e,
+			type: "checkbox",
+			disabled: r.disabled,
+			class: "h-4 w-4 rounded-sm border-border accent-accent"
+		}, null, 8, b), [[f, i.value]]), r.label ? (c(), t("span", x, u(r.label), 1)) : e("", !0)], 2));
+	}
+}), C = { class: "block" }, w = {
+	key: 0,
+	class: "mb-1.5 block text-xs text-muted-nav-link"
+}, T = [
+	"type",
+	"placeholder",
+	"disabled",
+	"autocomplete"
+], E = {
+	key: 1,
+	class: "mt-1.5 text-caption text-accent"
+}, D = /* @__PURE__ */ i({
+	__name: "Input",
+	props: /*@__PURE__*/ a({
+		label: {},
+		type: { default: "text" },
+		placeholder: {},
+		error: {},
+		disabled: { type: Boolean },
+		autocomplete: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(r) {
+		let i = d(r, "modelValue");
+		return (a, s) => (c(), t("label", C, [
+			r.label ? (c(), t("span", w, u(r.label), 1)) : e("", !0),
+			h(n("input", {
+				"onUpdate:modelValue": s[0] ||= (e) => i.value = e,
+				type: r.type,
+				placeholder: r.placeholder,
+				disabled: r.disabled,
+				autocomplete: r.autocomplete,
+				class: o(["w-full rounded-sm border px-3.5 py-3 text-sm text-ink outline-none focus:border-accent disabled:cursor-not-allowed disabled:opacity-60", r.error ? "border-accent" : "border-border"])
+			}, null, 10, T), [[p, i.value]]),
+			r.error ? (c(), t("p", E, u(r.error), 1)) : e("", !0)
+		]));
+	}
+}), O = /* @__PURE__ */ i({
+	__name: "NavTab",
+	props: {
+		label: {},
+		active: { type: Boolean }
+	},
+	emits: ["click"],
+	setup(e, { emit: n }) {
+		let r = n;
+		return (n, i) => (c(), t("button", {
+			type: "button",
+			class: o(["flex h-10 w-full cursor-pointer items-center rounded-sm px-3 text-left text-sm transition-colors", e.active ? "bg-bg-strip font-bold text-ink" : "text-muted-nav-link hover:bg-bg-strip hover:text-ink"]),
+			onClick: i[0] ||= (e) => r("click")
+		}, u(e.label), 3));
+	}
+}), k = /* @__PURE__ */ i({
+	__name: "StatusPill",
+	props: { status: {} },
+	setup(e) {
+		return (n, r) => (c(), t("span", { class: o(["inline-flex items-center rounded-full px-2.5 py-1 text-caption font-medium", {
+			"bg-status-positive-bg text-status-positive-text": e.status === "positive",
+			"bg-status-pending-bg text-status-pending-text": e.status === "pending",
+			"bg-status-neutral-bg text-status-neutral-text": e.status === "neutral"
+		}]) }, [l(n.$slots, "default")], 2));
+	}
+}), A = { class: "block" }, j = {
+	key: 0,
+	class: "mb-1.5 block text-xs text-muted-nav-link"
+}, M = [
+	"rows",
+	"placeholder",
+	"disabled"
+], N = /* @__PURE__ */ i({
+	__name: "Textarea",
+	props: /*@__PURE__*/ a({
+		label: {},
+		rows: { default: 3 },
+		placeholder: {},
+		disabled: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(r) {
+		let i = d(r, "modelValue");
+		return (a, o) => (c(), t("label", A, [r.label ? (c(), t("span", j, u(r.label), 1)) : e("", !0), h(n("textarea", {
+			"onUpdate:modelValue": o[0] ||= (e) => i.value = e,
+			rows: r.rows,
+			placeholder: r.placeholder,
+			disabled: r.disabled,
+			class: "w-full rounded-sm border border-border px-3.5 py-3 text-sm text-ink outline-none focus:border-accent disabled:cursor-not-allowed disabled:opacity-60"
+		}, null, 8, M), [[m, i.value]])]));
+	}
 });
 //#endregion
-export { a as StripePlaceholder };
+export { _ as Avatar, y as Button, S as Checkbox, D as Input, O as NavTab, k as StatusPill, g as StripePlaceholder, N as Textarea };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuhfa-design-system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Tuhfa's shared design tokens and presentational Vue components.",
   "type": "module",
   "license": "UNLICENSED",