@witchcraft/ui 0.0.1

package/src/runtime/assets/style.css

@@ -0,0 +1,144 @@
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant outlined {
+	.group.outlined &:focus-visible {
+		@slot;
+	}
+	.group.outlined-visible &:focus-visible {
+		@slot;
+	}
+}
+@custom-variant outlined-focus {
+	.group.outlined &:focus {
+		@slot;
+	}
+}
+@custom-variant outlined-within {
+	.group.outlined &:focus-within {
+		@slot;
+	}
+}
+@custom-variant dark-outlined {
+	.group.dark.outlined &:focus-visible {
+		@slot;
+	}
+	.group.dark.outlined-visible &:focus-visible {
+		@slot;
+	}
+}
+@custom-variant dark-outlined-focus {
+	.group.dark.outlined &:focus {
+		@slot;
+	}
+}
+@custom-variant dark-outlined-within {
+	&:group.dark.outlined &:focus-within {
+		@slot;
+	}
+}
+
+@utility focus-outline-within {
+	@apply outlined-within:outline-hidden outlined-within:ring-2 outlined-within:ring-accent-500 outlined-within:ring-offset-2;
+}
+
+@utility focus-outline {
+	@apply outlined:outline-hidden outlined:ring-2 outlined:ring-accent-500 outlined:ring-offset-2;
+}
+@utility focus-outline-no-offset {
+	@apply outlined:outline-hidden outlined:ring-2 outlined:ring-accent-500;
+}
+@utility focus-outline-hidden {
+	@apply outlined:outline-hidden;
+}
+
+/* .bg-squares-gradient { */
+
+/* } */
+
+@utility bg-squares-gradient {
+	/* local defaults */
+	--_square: var(--squareSize, 5px);
+	--_double_square: calc(2*var(--_square));
+	--_light_square: var(--lightSquare, var(--color-white));
+	--_dark_square: var(--darkSquare, var(--color-black));
+	background-color: var(--_light_square);
+	background: repeating-conic-gradient(var(--_dark_square) 0% 25%, var(--_light_square) 0% 50%) 50% / var(--_double_square) var(--_double_square);
+}
+
+@utility square-light-*  {
+	--lightSquare: --value(--color- *);
+}
+@utility square-dark-* {
+	--darkSquare: --value(--color- *);
+}
+
+@utility square-size-* {
+	--squareSize: calc(--value(integer) * 1px);
+}
+
+@utility bg-bars-gradient {
+	/* local defaults */
+	--_bg_color: var(--bars-bg-color, var(--color-accent-700));
+	--_fg_color: var(--bars-fg-color, var(--color-accent-800));
+	--_angle: var(--bars-angle, 45deg);
+	--_fg_width: var(--bars-fg-width, 50%);
+	--_bg_width: calc(100% - var(--_fg_width));
+
+	background-color: var(--_bg_color);
+	--_pos_1: calc(var(--_bg_width)/2);
+	--_pos_2: calc(var(--_bg_width)/2 + var(--_fg_width)/2);
+	--_pos_3: calc(var(--_bg_width) + var(--_fg_width)/2);
+	background-image:
+		repeating-linear-gradient(
+			var(--_angle),
+			var(--_bg_color),
+			var(--_bg_color) var(--_pos_1),
+			var(--_fg_color) var(--_pos_1),
+			var(--_fg_color) var(--_pos_2),
+			var(--_bg_color) var(--_pos_2),
+			var(--_bg_color) var(--_pos_3),
+			var(--_fg_color) var(--_pos_3),
+			var(--_fg_color)
+		);
+}
+
+@utility bars-angle-* {
+	--bars-angle: var(--value(integer) * 1deg);
+}
+
+@utility bars-fg-* {
+	--bars-fg-color: --value(--color-*);
+}
+@utility bars-bg-* {
+	--bars-bg-color: --value(--color-*);
+}
+@utility bars-w-* {
+	--bars-fg-width: calc(--value(integer) * 1%, 50%);
+}
+
+@utility scrollbar-hidden {
+	/* IE and Edge */
+	-ms-overflow-style: none;
+	/* Firefox */
+	scrollbar-width: none;
+	/* Safari and Chrome */
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+@utility content-vertical-holder {
+	--tw-content: "\200b";
+	content: var(--tw-content);
+}
+
+@utility no-touch-action {
+	touch-action: none;
+}
+
+@utility bg-transparency-squares {
+	@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6;
+}
+
+@utility link-like {
+	@apply cursor-pointer hover:text-accent-500;
+}
+

package/src/runtime/assets/tailwind.css

@@ -0,0 +1,5 @@
+/* For storybook, not exported. */
+@import "tailwindcss" source("../../");
+@import "./theme.css";
+@import "./base.css";
+@import "./style.css";

package/src/runtime/assets/theme.css

@@ -0,0 +1,65 @@
+/* Auto-generated, see gen:theme script. */
+@theme {
+	--spacing: 0.25rem;
+	--color-neutral-50: oklch(0.9850000000000003 0 0);
+	--color-neutral-100: oklch(0.9700000000000002 0 0);
+	--color-neutral-200: oklch(0.922 0 0);
+	--color-neutral-300: oklch(0.8700000000000001 0 0);
+	--color-neutral-400: oklch(0.708 0 0);
+	--color-neutral-500: oklch(0.5560000000000002 0 0);
+	--color-neutral-600: oklch(0.4390000000000001 0 0);
+	--color-neutral-700: oklch(0.371 0 0);
+	--color-neutral-800: oklch(0.2690000000000001 0 0);
+	--color-neutral-900: oklch(0.20500000000000004 0 0);
+	--color-neutral-950: oklch(0.14500000000000002 0 0);
+	--color-neutral-50: oklch(0.9850000000000003 0 0);
+	--color-bg: oklch(0.9924098465974739 0 0);
+	--color-fg: oklch(0.09181475833376385 0 0);
+	--color-ok-50: oklch(0.9820000000000003 0.018000000000000457 155.82600000000036);
+	--color-ok-100: oklch(0.9620000000000002 0.0440000000000005 156.7430000000004);
+	--color-ok-200: oklch(0.9250000000000002 0.08400000000000035 155.99500000000012);
+	--color-ok-300: oklch(0.8710000000000001 0.1500000000000003 154.44900000000007);
+	--color-ok-400: oklch(0.7920000000000003 0.20900000000000052 151.71100000000013);
+	--color-ok-500: oklch(0.7230000000000002 0.21900000000000014 149.57900000000006);
+	--color-ok-600: oklch(0.6270000000000001 0.19400000000000042 149.21400000000006);
+	--color-ok-700: oklch(0.527 0.15400000000000028 150.06900000000007);
+	--color-ok-800: oklch(0.448 0.11900000000000009 151.32800000000003);
+	--color-ok-900: oklch(0.39299999999999996 0.09500000000000014 152.53500000000008);
+	--color-ok-950: oklch(0.26600000000000007 0.06499999999999999 152.93399999999997);
+	--color-ok-500: oklch(0.7230000000000002 0.21900000000000014 149.57900000000006);
+	--color-warning-50: oklch(0.9870000000000002 0.026000000000000044 102.2120000000017);
+	--color-warning-100: oklch(0.9730000000000001 0.07100000000000001 103.19300000000027);
+	--color-warning-200: oklch(0.9450000000000003 0.12900000000000011 101.54000000000019);
+	--color-warning-300: oklch(0.9050000000000001 0.18200000000000002 98.11100000000027);
+	--color-warning-400: oklch(0.8520000000000003 0.19900000000000007 91.93600000000015);
+	--color-warning-500: oklch(0.7950000000000003 0.18400000000000002 86.0470000000002);
+	--color-warning-600: oklch(0.6810000000000002 0.16200000000000006 75.83400000000023);
+	--color-warning-700: oklch(0.5540000000000002 0.135 66.44200000000001);
+	--color-warning-800: oklch(0.4760000000000001 0.11399999999999987 61.90700000000004);
+	--color-warning-900: oklch(0.4210000000000002 0.0949999999999999 57.70800000000014);
+	--color-warning-950: oklch(0.28600000000000014 0.06599999999999996 53.8130000000001);
+	--color-warning-500: oklch(0.7950000000000003 0.18400000000000002 86.0470000000002);
+	--color-danger-50: oklch(0.9710000000000001 0.012999999999999515 17.380000000000223);
+	--color-danger-100: oklch(0.936 0.03199999999999968 17.717000000000212);
+	--color-danger-200: oklch(0.8850000000000001 0.062000000000000006 18.33400000000006);
+	--color-danger-300: oklch(0.8079999999999999 0.11399999999999981 19.57099999999997);
+	--color-danger-400: oklch(0.7040000000000002 0.19099999999999973 22.216000000000008);
+	--color-danger-500: oklch(0.637 0.2369999999999997 25.331000000000017);
+	--color-danger-600: oklch(0.5770000000000002 0.24499999999999952 27.325000000000045);
+	--color-danger-700: oklch(0.5050000000000001 0.21299999999999994 27.51800000000003);
+	--color-danger-800: oklch(0.444 0.1769999999999998 26.899);
+	--color-danger-900: oklch(0.3960000000000002 0.14099999999999965 25.723000000000127);
+	--color-danger-950: oklch(0.25800000000000006 0.09199999999999989 26.04200000000003);
+	--color-accent-50: oklch(0.9700000000000001 0.01400000000000012 254.60399999999714);
+	--color-accent-100: oklch(0.9320000000000002 0.03200000000000015 255.5850000000001);
+	--color-accent-200: oklch(0.8820000000000002 0.059000000000000094 254.1279999999993);
+	--color-accent-300: oklch(0.8090000000000002 0.10499999999999995 251.81299999999993);
+	--color-accent-400: oklch(0.7070000000000002 0.16500000000000012 254.6239999999998);
+	--color-accent-500: oklch(0.6230000000000001 0.2140000000000002 259.81499999999994);
+	--color-accent-600: oklch(0.5460000000000002 0.245 262.8809999999998);
+	--color-accent-700: oklch(0.48800000000000004 0.2430000000000002 264.376);
+	--color-accent-800: oklch(0.4240000000000001 0.19900000000000004 265.63799999999986);
+	--color-accent-900: oklch(0.37900000000000006 0.146 265.52199999999993);
+	--color-accent-950: oklch(0.2820000000000001 0.09099999999999996 267.935);
+	--color-accent-500: oklch(0.6230000000000001 0.2140000000000002 259.81499999999994);
+}

package/src/runtime/build/WitchcraftUiResolver.ts

@@ -0,0 +1,27 @@
+import { type ComponentResolver } from "unplugin-vue-components"
+
+const prefixless = ["Icon", "Aria", "TestWrapper"]
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const WitchcraftUiResolver = (
+	{
+		prefix = "W",
+		filter = () => true,
+	}: {
+		prefix?: string
+		filter?: (name: string) => boolean
+	} = {}
+): ComponentResolver => (
+	componentName: string,
+): { from: string } | undefined => {
+	if (componentName.startsWith(prefix)) {
+		const n = componentName.slice(1)
+		const filename = prefixless.includes(n) ? n : `Lib${n}`
+		if (!filter(n)) {
+			return undefined
+		}
+		return {
+			from: `@witchcraft/ui/components/${filename}`
+		}
+	}
+	return undefined
+}

package/src/runtime/build/generateTheme.ts

@@ -0,0 +1,16 @@
+import { themeAsTailwindCss } from "metamorphosis/tailwind.js"
+import fs from "node:fs"
+import { resolve } from "path"
+
+import { themeConvertionOpts } from "../tailwind/themeConvertionOpts.js"
+import { theme } from "../theme.js"
+const css = themeAsTailwindCss(theme, themeConvertionOpts)
+import url from "url"
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url))
+const filepath = resolve(__dirname, "../assets/theme.css")
+
+const content = `/* Auto-generated, see gen:theme script. */\n${css}`
+fs.writeFile(filepath, content, err => {
+	if (err) throw err
+})

package/src/runtime/build/unpluginIconViteOptions.ts

@@ -0,0 +1,11 @@
+import type Icons from "unplugin-icons/vite"
+
+export const unpluginIconViteOptions: Parameters<typeof Icons>[0] = {
+	scale: 0, // removes the scale
+	iconCustomizer: async (_, __, props) => {
+		props.width = "unset"
+	},
+	// note that we can't use tailwind classes
+	// i mean we could, but we have to tell it to include them manually (pain)
+	defaultStyle: "vertical-align: -0.125em; height: 1em; display: inline-block; width:auto;",
+}

package/src/runtime/components/Aria/Aria.vue

@@ -0,0 +1,27 @@
+<template>
+<div tabindex="0">{{ value }}</div>
+</template>
+
+<script  setup lang="ts">
+import type { PropType } from "vue"
+
+
+defineOptions({ name: "aria" })
+defineProps<{
+	// eslint-disable-next-line vue/no-restricted-props
+	value: string
+}>()
+</script>
+
+<style scoped>
+div {
+	position: absolute;
+	height: 1px;
+	width: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+}
+</style>

package/src/runtime/components/Focus.stories.ts

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { onMounted, ref } from "vue"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "./index.js"
+// TODO move docs to composable
+/**
+ * For testing the focus styles. The (still WIP) idea is that normally the outlined class is set by whether the user is using the keyboard or not. When true, outlines generated by the focus-outline-* or outlined-* utilities are allowed (they might not always appear since most components have focus-visible styles), when false, they are not allowed, but components can still set custom focus styles that will always appear. Either or is usually not a good idea unless all components set custom focus styles. For something like a web app, focus-visible should be allowed. For an app, this setup allows that to be configurable.
+ */
+const meta: Meta = {
+	title: "Other/Focus",
+	args: {
+		outline: true,
+	},
+}
+const template = `
+			<div class="focus-outline-no-offset border border-accent-600" tabindex="0">focus-outline-no-offset (outlined i.e. outlined-focus-visible)</div>
+			<div class="focus-outline border border-accent-600" tabindex="0">focus-outline (outlined i.e. outlined-focus-visible)</div>
+			<div class="outline-hidden outlined-focus:border-danger-500 border border-accent-600" tabindex="0">outlined-focus</div>
+			<div class="outline-hidden outlined-within:border-danger-500 border border-accent-600" >
+				outlined-within<div tabindex="0">Inner</div>
+			</div>
+			<div class="outline-hidden focus:border-danger-500 border border-accent-600" tabindex="0">Has Manual Focus Classes</div>
+		`
+export default meta
+type Story = StoryObj<typeof NAME>
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => {
+			const el = ref<HTMLElement>(null)
+			onMounted(() => {
+				// el.value.focus()
+			})
+			return { ...args, el }
+		},
+		template,
+	}),
+}
+/* As in force allow, not force show. */
+export const OutlineForcedTrue: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		forceOutline: true,
+	},
+}
+export const OutlineFalse: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		outline: false,
+	},
+}
+/* We can also allow focus-visible outlines regardless of the state of outline, by wrapping in `.group.outlined-visible`. This is the default for the test wrapper.*/
+export const AlwaysAllowFocusVisible: Story = {
+	render: args => ({
+		components,
+		setup: () => args,
+		template: `
+		<div class="outlined-visible group">${template}</div>
+		`,
+
+	}),
+}

package/src/runtime/components/Icon/Icon.vue

@@ -0,0 +1,39 @@
+<template>
+<div
+	class="icon inline-block"
+	v-bind="{...$attrs, class:undefined}"
+>
+	<slot/>
+</div>
+</template>
+
+<script setup lang="ts">
+import { computed, type HTMLAttributes,useAttrs } from "vue"
+
+const $attrs = useAttrs()
+
+// eslint-disable-next-line no-use-before-define
+const props = defineProps<Props>()
+
+
+</script>
+
+<script lang="ts">
+/**
+ * Just a very simple wrapper for wrapping unplugin-icons in an inline-block div so the icon in the slot take's up a normal line height when it's alone.
+ *
+ * ```vue
+ * 		<icon><i-...></icon>
+ * ``
+ */
+export default {
+	name: "icon",
+}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes, "class">
+	> { }
+</script>
+

package/src/runtime/components/LibButton/LibButton.stories.ts

@@ -0,0 +1,107 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { capitalize } from "@alanscodelog/utils/capitalize.js"
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+import IconFaSolidBell from "~icons/fa-solid/bell"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof components.LibButton> = {
+	component: components.LibButton,
+	title: "Components/Button",
+	args: {
+		label: "Label",
+		// @ts-expect-error - custom prop for story
+		_iconAfter: true,
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof components.LibButton>
+
+
+export const Primary: Story = {
+	render: (args: any) => ({
+		components: {
+			...components,
+			IconFaSolidBell,
+		},
+		setup: () => ({ args, capitalize }),
+		template: `
+		<div class="flex gap-4 justify-center">
+			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary' ]">
+				<lib-button v-bind="{...args, color: type, label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false')}">
+					<template #icon>
+						<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
+					</template>
+				</lib-button>
+			</template>
+		</div>
+		<div class="flex flex-col gap-4 pt-10">
+			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary']">
+				<lib-button v-bind="{...args, color: type , label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false') }">
+					${args._iconAfter ? `
+						<template #icon-after>
+							<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
+						</template>
+					` : ``}
+				</lib-button>
+			</template>
+		</div>
+		`,
+	}),
+}
+
+export const IconAfter: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		// @ts-expect-error - .
+		_iconAfter: true,
+	},
+}
+
+export const OnlyIcon: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		label: undefined,
+	},
+}
+export const Disabled: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		disabled: true,
+	},
+}
+export const Borderless: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		border: false,
+	},
+}
+export const BorderlessDisabled: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		border: false,
+		disabled: true,
+	},
+}
+export const WithDivInside: Story = {
+	render: (args: any) => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+		<div class="flex gap-4 justify-center">
+			<lib-button v-bind="{...args}">
+				<div>Div inside button still has a pointer cursor.</div>
+			</lib-button>
+		</div>
+		`,
+	}),
+}