@somehow-digital/ui 0.0.0-stage → 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Thomas Deinhamer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,45 @@
-# Temporary Holding Version
+# UI
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> Design System for `somehow.digital` projects.
+
+---
+
+**Installation**
+
+```sh
+pnpm add @somehow-digital/ui vue reka-ui unocss
+```
+
+**Usage**
+
+```ts
+// uno.config.ts
+import preset from '@somehow-digital/ui/preset';
+import { defineConfig } from 'unocss';
+
+export default defineConfig({
+	presets: [preset()],
+});
+```
+
+```vue
+<script setup lang="ts">
+import { Button, Heading, Logo } from '@somehow-digital/ui';
+</script>
+
+<template>
+	<Logo />
+
+	<Heading :level="2">
+		Hello
+	</Heading>
+
+	<Button href="https://somehow.digital">
+		Visit
+	</Button>
+</template>
+```
+
+---
+
+[`somehow digital.`](https://somehow.digital/)

package/dist/logo.animation-d3Mknudy.js

@@ -0,0 +1,68 @@
+import { animate as e, stagger as t } from "motion";
+// src/components/logo/logo.animation.ts
+function n(n) {
+	let [r, i] = n.type;
+	return e([
+		[
+			n.base,
+			{ visibility: "visible" },
+			{ duration: 0 }
+		],
+		[
+			n.bars,
+			{
+				opacity: [0, 1],
+				scaleY: [2, 1],
+				y: ["-25%", 0]
+			},
+			{
+				delay: t(.025, { ease: "easeOut" }),
+				duration: .25,
+				ease: "easeOut"
+			}
+		],
+		[
+			n.mark,
+			{ x: ["50%", 0] },
+			{
+				at: .5,
+				duration: .5,
+				ease: "easeInOut"
+			}
+		],
+		[
+			r,
+			{
+				opacity: [0, 1],
+				x: ["-200%", 0]
+			},
+			{
+				at: .5,
+				duration: .5,
+				ease: "easeOut"
+			}
+		],
+		[
+			i,
+			{
+				opacity: [0, 1],
+				x: ["-125%", 0]
+			},
+			{
+				at: .5,
+				duration: .5,
+				ease: "easeOut"
+			}
+		],
+		[
+			n.dot,
+			{ opacity: [0, 1] },
+			{
+				at: 1.25,
+				duration: .5,
+				ease: "easeOut"
+			}
+		]
+	]);
+}
+export { n as animation };

package/dist/preset.d.ts

@@ -0,0 +1,9 @@
+declare function preset(): {
+    name: string;
+    presets: any[];
+    outputToCssLayers: boolean;
+    safelist: string[];
+};
+export default preset;
+
+export { }

package/dist/preset.js

@@ -0,0 +1,20 @@
+import e from "@somehow-digital/unocss-preset";
+// src/unocss.ts
+var { readFileSync: t } = globalThis.process.getBuiltinModule("node:fs"), n = /\s+/, r = /^["'`]+|["'`,;)]+$/g;
+function i() {
+	try {
+		let e = t(`${import.meta.dirname}/ui.js`, "utf-8");
+		return [...new Set(e.split(n).map((e) => e.replace(r, "")).filter(Boolean))];
+	} catch {
+		return [];
+	}
+}
+function a() {
+	return {
+		name: "somehow-digital-ui",
+		presets: [e()],
+		outputToCssLayers: !0,
+		safelist: i()
+	};
+}
+export { a as default };

package/dist/ui.d.ts

@@ -0,0 +1,124 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PrimitiveProps } from 'reka-ui';
+import { PublicProps } from 'vue';
+
+declare const __VLS_base: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "neutral" | "accent";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_base_2: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
+    type: "button" | "submit" | "reset";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_base_3: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_base_4: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+
+declare const __VLS_export_2: __VLS_WithSlots_2<typeof __VLS_base_2, __VLS_Slots_2>;
+
+declare const __VLS_export_3: __VLS_WithSlots_3<typeof __VLS_base_3, __VLS_Slots_3>;
+
+declare const __VLS_export_4: __VLS_WithSlots_4<typeof __VLS_base_4, __VLS_Slots_4>;
+
+declare const __VLS_export_5: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{}>, {
+    loading: "lazy" | "eager";
+    rounded: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_export_6: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {
+    animated: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type __VLS_Props = {
+    variant?: 'neutral' | 'accent';
+};
+
+declare type __VLS_Props_2 = PrimitiveProps & {
+    href?: string;
+    type?: HTMLButtonElement['type'];
+};
+
+declare type __VLS_Props_3 = {
+    label?: string;
+};
+
+declare type __VLS_Props_4 = {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+
+declare type __VLS_Props_5 = {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+    loading?: 'lazy' | 'eager';
+    rounded?: boolean;
+};
+
+declare type __VLS_Props_6 = {
+    animated?: boolean;
+};
+
+declare type __VLS_Slots = {
+    default: (props: Record<string, never>) => unknown;
+};
+
+declare type __VLS_Slots_2 = {
+    default: (props: Record<string, never>) => unknown;
+};
+
+declare type __VLS_Slots_3 = {
+    default: (props: Record<string, never>) => unknown;
+};
+
+declare type __VLS_Slots_4 = {
+    default: (props: Record<string, never>) => unknown;
+};
+
+declare type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithSlots_4<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const Badge: typeof __VLS_export;
+
+export declare const Button: typeof __VLS_export_2;
+
+export declare const Gallery: typeof __VLS_export_3;
+
+export declare const Heading: typeof __VLS_export_4;
+
+declare const Image_2: typeof __VLS_export_5;
+export { Image_2 as Image }
+
+export declare const Logo: typeof __VLS_export_6;
+
+export { }

package/dist/ui.js

@@ -0,0 +1,210 @@
+import { Fragment as e, computed as t, createBlock as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onMounted as l, onUnmounted as u, openBlock as d, ref as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, unref as g, useTemplateRef as _, withCtx as v, withKeys as y } from "vue";
+import { Primitive as b } from "reka-ui";
+// src/components/badge/badge.vue
+var x = /* @__PURE__ */ o({
+	__name: "badge",
+	props: { variant: { default: "neutral" } },
+	setup(e) {
+		return (t, n) => (d(), r("span", { class: s(["inline-block px-0.375rem py-0.125rem rounded-0.25rem border border-solid font-mono text-0.75rem leading-none", e.variant === "accent" ? "text-blue-900 bg-blue-100 border-blue-300 dark:text-blue-100 dark:bg-blue-900 dark:border-blue-700" : "text-gray-700 bg-gray-200 border-gray-300 dark:text-gray-300 dark:bg-gray-800 dark:border-gray-700"]) }, [m(t.$slots, "default")], 2));
+	}
+}), S = /* @__PURE__ */ o({
+	__name: "button",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		href: {},
+		type: { default: "button" }
+	},
+	setup(e) {
+		let r = e, i = t(() => r.as ?? (r.href ? "a" : "button")), a = t(() => !r.asChild && i.value === "button" ? r.type : void 0);
+		return (e, t) => (d(), n(g(b), {
+			as: i.value,
+			"as-child": r.asChild,
+			href: r.href,
+			type: a.value,
+			class: "inline-flex flex-row items-center gap-1rem cursor-pointer leading-snug px-2rem py-0.75rem text-1.25rem font-600 text-white bg-gray-900 rounded-0.25rem hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
+		}, {
+			default: v(() => [m(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"as",
+			"as-child",
+			"href",
+			"type"
+		]));
+	}
+}), C = ["aria-label"], w = { class: "relative" }, T = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], E = {
+	class: "size-1.25rem fill-none stroke-current [stroke-width:2.5] [stroke-linecap:round] [stroke-linejoin:round]",
+	viewBox: "0 0 24 24",
+	"aria-hidden": "true"
+}, D = ["d"], O = { class: "flex justify-center gap-0.5rem mt-0.75rem" }, k = [
+	"aria-label",
+	"aria-current",
+	"onClick"
+], A = /* @__PURE__ */ o({
+	__name: "gallery",
+	props: { label: { default: "Gallery" } },
+	setup(t) {
+		let n = _("track"), a = f([]), o = f(0);
+		l(() => {
+			a.value = Array.from(n.value.children, (e, t) => e.getAttribute("alt") ?? `Slide ${t + 1}`);
+		});
+		function c() {
+			o.value = Math.round(n.value.scrollLeft / n.value.clientWidth);
+		}
+		function u(e) {
+			n.value.scrollTo({
+				behavior: "smooth",
+				left: e * n.value.clientWidth
+			});
+		}
+		return (l, f) => (d(), r("section", {
+			class: "group",
+			"aria-roledescription": "carousel",
+			"aria-label": t.label
+		}, [i("div", w, [i("div", {
+			ref_key: "track",
+			ref: n,
+			class: "flex overflow-x-auto snap-x snap-mandatory rounded-0.25rem [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>*]:flex-none [&>*]:w-full [&>*]:snap-start [&>*]:!rounded-none",
+			tabindex: "0",
+			onScrollPassive: c,
+			onKeydown: [f[0] ||= y((e) => u(o.value - 1), ["left"]), f[1] ||= y((e) => u(o.value + 1), ["right"])]
+		}, [m(l.$slots, "default")], 544), (d(), r(e, null, p(["prev", "next"], (e) => i("button", {
+			key: e,
+			type: "button",
+			"aria-label": e === "prev" ? "Previous slide" : "Next slide",
+			disabled: e === "prev" ? o.value === 0 : o.value === a.value.length - 1,
+			class: s(["absolute top-1/2 -translate-y-1/2 flex items-center justify-center size-2.5rem m-0 p-0 border-0 rounded-full text-white bg-black/45 cursor-pointer opacity-0 transition-opacity group-hover:not-disabled:opacity-100 focus-visible:opacity-100 disabled:cursor-default [@media(hover:none)]:hidden", e === "prev" ? "left-0.75rem" : "right-0.75rem"]),
+			onClick: (t) => u(o.value + (e === "prev" ? -1 : 1))
+		}, [(d(), r("svg", E, [i("path", { d: e === "prev" ? "M15 5l-7 7 7 7" : "M9 5l7 7-7 7" }, null, 8, D)]))], 10, T)), 64))]), i("div", O, [(d(!0), r(e, null, p(a.value, (e, t) => (d(), r("button", {
+			key: t,
+			type: "button",
+			"aria-label": `Show ${e}`,
+			"aria-current": t === o.value,
+			class: s(["h-0.5rem m-0 p-0 border-0 rounded-full cursor-pointer transition-all", t === o.value ? "w-1.5rem bg-gray-900 dark:bg-gray-100" : "w-0.5rem bg-gray-400 dark:bg-gray-600"]),
+			onClick: (e) => u(t)
+		}, null, 10, k))), 128))])], 8, C));
+	}
+}), j = 320, M = 1, N = 1.125, P = 1920, F = 1.25, I = 1.25;
+function L(e, t = j, n = M, r = N, i = P, a = F, o = I) {
+	let s = n * r ** e, c = a * o ** e, l = (c - s) / ((i - t) / 16), u = -t / 16 * l + s;
+	return `clamp(${s.toFixed(3)}rem, ${u.toFixed(3)}rem + ${(l * 100).toFixed(3)}vw, ${c.toFixed(3)}rem)`;
+}
+// src/components/heading/heading.vue
+var R = /* @__PURE__ */ o({
+	__name: "heading",
+	props: {
+		level: { default: 1 },
+		size: {}
+	},
+	setup(e) {
+		let r = e, i = t(() => L(6 - (r.size ?? r.level)));
+		return (t, r) => (d(), n(h(`h${e.level}`), {
+			class: "m-0 font-['Gabarito_Variable',sans-serif] font-500 leading-tight",
+			style: c({ fontSize: i.value })
+		}, {
+			default: v(() => [m(t.$slots, "default")]),
+			_: 3
+		}, 8, ["style"]));
+	}
+}), z = [
+	"src",
+	"alt",
+	"width",
+	"height",
+	"loading"
+], B = /* @__PURE__ */ o({
+	__name: "image",
+	props: {
+		src: {},
+		alt: {},
+		width: {},
+		height: {},
+		loading: { default: "lazy" },
+		rounded: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		return (t, n) => (d(), r("img", {
+			src: e.src,
+			alt: e.alt,
+			width: e.width,
+			height: e.height,
+			loading: e.loading,
+			class: s([{ "rounded-0.25rem": e.rounded }, "block max-w-full h-auto"])
+		}, null, 10, z));
+	}
+}), V = {
+	class: "flex-none block relative top-[-0.09em] overflow-x-clip",
+	"aria-hidden": "true"
+}, H = /* @__PURE__ */ o({
+	__name: "logo",
+	props: { animated: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(t) {
+		let n = t, o = [
+			"self-end h-80%",
+			"h-full",
+			"self-start h-80%",
+			"h-full",
+			"h-60%"
+		], c = _("base"), m = _("mark"), h = _("dot"), g = _("first"), v = _("second"), y = _("bars"), b = f(!1), x = !1, S;
+		return l(async () => {
+			if (n.animated && !matchMedia("(prefers-reduced-motion: reduce)").matches) {
+				b.value = !0;
+				try {
+					let { animation: e } = await import("./logo.animation-d3Mknudy.js");
+					if (x) return;
+					if (!c.value || !m.value || !h.value || !g.value || !v.value || !y.value?.length) throw Error("logo elements missing");
+					S = e({
+						bars: y.value,
+						base: c.value,
+						dot: h.value,
+						mark: m.value,
+						type: [g.value, v.value]
+					});
+				} catch (e) {
+					console.error("logo animation failed", e), b.value = !1;
+				}
+			}
+		}), u(() => {
+			x = !0, S?.stop();
+		}), (t, n) => (d(), r("span", {
+			ref_key: "base",
+			ref: c,
+			class: s(["inline-flex flex-row-reverse gap-[0.35em] items-center font-['Gabarito_Variable',sans-serif] font-450 leading-[1em] tracking-[-0.025em]", { invisible: b.value }]),
+			role: "img",
+			"aria-label": "somehow.digital"
+		}, [i("span", V, [i("span", {
+			ref_key: "first",
+			ref: g,
+			class: "block"
+		}, "somehow", 512), i("span", {
+			ref_key: "second",
+			ref: v,
+			class: "block"
+		}, [n[0] ||= a("digital", -1), i("span", {
+			ref_key: "dot",
+			ref: h
+		}, ".", 512)], 512)]), i("span", {
+			ref_key: "mark",
+			ref: m,
+			class: "flex flex-none flex-row gap-[0.05em] aspect-square items-center",
+			"aria-hidden": "true"
+		}, [(d(), r(e, null, p(o, (e, t) => i("span", {
+			key: t,
+			ref_for: !0,
+			ref: "bars",
+			class: s(["block w-[0.3125em] origin-bottom rounded-[0.025em] bg-current", e])
+		}, null, 2)), 64))], 512)], 2));
+	}
+});
+export { x as Badge, S as Button, A as Gallery, R as Heading, B as Image, H as Logo };

package/package.json

@@ -1,6 +1,96 @@
 {
-  "name": "@somehow-digital/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@somehow-digital/ui",
+	"type": "module",
+	"version": "1.0.0",
+	"packageManager": "pnpm@11.8.0",
+	"description": "Design system for somehow.digital projects.",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/somehow-digital/ui.git"
+	},
+	"publishConfig": {
+		"access": "public",
+		"provenance": true
+	},
+	"exports": {
+		".": {
+			"types": "./dist/ui.d.ts",
+			"import": "./dist/ui.js"
+		},
+		"./preset": {
+			"types": "./dist/preset.d.ts",
+			"import": "./dist/preset.js"
+		}
+	},
+	"main": "./dist/ui.js",
+	"types": "./dist/ui.d.ts",
+	"files": [
+		"./dist/"
+	],
+	"engines": {
+		"node": ">=24",
+		"pnpm": ">=10"
+	},
+	"scripts": {
+		"dev": "concurrently --group --prefix-colors 'auto' 'pnpm:dev:*'",
+		"dev:vite": "vp build --watch",
+		"dev:storybook": "storybook dev",
+		"build": "concurrently --group --prefix-colors 'auto' 'pnpm:build:*'",
+		"build:vite": "vp build",
+		"build:storybook": "storybook build --docs",
+		"prepack": "vp build",
+		"prepare": "vp config --no-agent",
+		"test": "vp test run",
+		"lint": "concurrently --group --prefix-colors 'auto' 'pnpm:lint:*'",
+		"lint:vue": "vue-tsc --build",
+		"lint:eslint": "eslint .",
+		"lint:cspell": "cspell --no-progress --no-summary --no-must-find-files .",
+		"lint:knip": "knip --no-progress",
+		"fix": "eslint --fix ."
+	},
+	"peerDependencies": {
+		"reka-ui": "^2.0.0",
+		"unocss": "^66.6.0",
+		"vue": "^3.5.26"
+	},
+	"dependencies": {
+		"@somehow-digital/unocss-preset": "^2.2.1",
+		"motion": "^14.14.0"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^21.0.0",
+		"@fontsource-variable/gabarito": "^5.3.0",
+		"@microsoft/api-extractor": "^7.60.1",
+		"@somehow-digital/commitlint-config": "^1.0.0",
+		"@somehow-digital/cspell-dictionary": "^2.0.0",
+		"@somehow-digital/eslint-config": "^5.0.0",
+		"@somehow-digital/semantic-release-config": "^2.0.0",
+		"@storybook/addon-docs": "^10.2.0",
+		"@storybook/addon-themes": "^10.2.0",
+		"@storybook/addon-vitest": "^10.2.7",
+		"@storybook/vue3-vite": "^10.2.0",
+		"@tsconfig/node24": "^24.0.4",
+		"@types/node": "^24.10.9",
+		"@vitejs/plugin-vue": "^6.0.3",
+		"@vitest/browser-playwright": "^5.0.5",
+		"@vue/tsconfig": "^0.9.0",
+		"concurrently": "^10.0.0",
+		"cspell": "^10.0.0",
+		"eslint": "^10.0.0",
+		"knip": "^6.0.0",
+		"playwright": "^1.58.2",
+		"reka-ui": "^2.0.0",
+		"semantic-release": "^25.0.2",
+		"storybook": "^10.2.0",
+		"typescript": "^6.0.0",
+		"unocss": "^66.0.0",
+		"unplugin-dts": "^1.0.0",
+		"vite": "^8.0.0",
+		"vite-plugin-vue-devtools": "^8.0.5",
+		"vite-plus": "1.4.0",
+		"vitest": "^5.0.5",
+		"vue": "^3.5.26",
+		"vue-tsc": "^3.2.2"
+	}
+}