@witchcraft/ui 0.4.0 → 0.4.2

package/src/runtime/assets/animations.css

@@ -1,5 +1,15 @@
+@utility animate-from-* {
+	--animate-from: --value([length], [percentage]);
+	--animate-from: calc(var(--spacing) * --value(integer));
+}
+
+@utility -animate-from-* {
+	--animate-from: --value([length], [percentage]);
+	--animate-from: calc(var(--spacing) * -1 * --value(integer));
+}
+
 @theme {
-	--animate-blinkInf: blink 1s linear-infinite;
+	--animate-blinkInf: blink 1s linear infinite;
 	@keyframes blink {
 		0% {
 			opacity: 0;
@@ -18,8 +28,8 @@
 		}
 	}
 
-	--animate-slideBgInf: slide-bg 10s linear-infinite;
-	@keyframes slide {
+	--animate-slideBgInf: slideBg 10s ease-in-out linear-infinite;
+	@keyframes slideBg {
 		0% {
 			background-position:0%;
 		}
@@ -38,10 +48,10 @@
 		}
 	}
 
-	--animate-slideIn: slideIn 500ms cubic-bezier(0.16, 1, 0.3, 1);
-	@keyframes slideIn {
+	--animate-slideInLeft: slideInLeft 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInLeft {
 		from {
-			transform: translateX(100%);
+			transform: translateX(var(--animate-from, 100%));
 			opacity: 0;
 		}
 		to {
@@ -50,6 +60,43 @@
 		}
 	}
 
+	--animate-slideInRight: slideInRight 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInRight {
+		from {
+			transform: translateX(var(--animate-from, -100%));
+			opacity: 0;
+		}
+		to {
+			transform: translateX(0);
+			opacity: 1;
+		}
+	}
+
+	--animate-slideInUp: slideInUp 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInUp {
+		from {
+			transform: translateY(var(--animate-from, 100%));
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	--animate-slideInDown: slideInDown 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	@keyframes slideInDown {
+		from {
+			transform: translateY(var(--animate-from, -100%));
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+
 	--animate-overlayShow: overlayShow 500ms cubic-bezier(0.16, 1, 0.3, 1);
 	@keyframes overlayShow {
 		from {

package/src/runtime/assets/locales/en.json

@@ -25,6 +25,8 @@
 		"pagination.aria.go-to-next-page": "Go to next page. Page {count}",
 		"pagination.aria.go-to-page": "Go to page {count}",
 		"pagination.aria.current-page": "Current page {count}",
+		"pagination.aria.go-to-first-page": "Go to first page",
+		"pagination.aria.go-to-last-page": "Go to last page",
 		"pagination.previous-page": "Prev",
 		"pagination.next-page": "Next",
 		"recorder.recording": "Recording",

package/src/runtime/assets/tailwind.css

@@ -1,4 +1,4 @@
-/* For storybook, not exported. */
+/* For storybook, **NOT EXPORTED**. The nuxt module creates it's own version of this file by looking at all css files in this folder. See it for details. We also need to be sure to add them to the exports. */
 @import "tailwindcss" source("../../");
 @import "./theme.css";
 @import "./animations.css";

package/src/runtime/assets/utils.css

@@ -37,17 +37,17 @@
 }
 
 @utility focus-outline-within {
-	@reference outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2;
+	@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2;
 }
 
 @utility focus-outline {
-	@reference outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2;
+	@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2;
 }
 @utility focus-outline-no-offset {
-	@reference outlined:outline-2 outlined:outline-accent-500;
+	@apply outlined:outline-2 outlined:outline-accent-500;
 }
 @utility focus-outline-hidden {
-	@reference outlined:outline-none;
+	@apply outlined:outline-none;
 }
 
 /* .bg-squares-gradient { */
@@ -115,6 +115,49 @@
 	--bars-fg-width: calc(--value(integer) * 1%, 50%);
 }
 
+/* Mix utils can be used like bg-(--mix) mix-from-red-500 mix-to-blue-500/20 (where 20 is the percentage of "to"). It mixes with transparent if no from/to. There are also tint-* and shade-* variants to mix with white and black respectively. */
+@utility mix-from-* {
+	--mix-from: --value(--color-*);
+	--mix: color-mix(
+		in srgb, 
+		var(--mix-from), 
+		var(--mix-to, transparent) var(--mix-percentage, 50%)
+	);
+}
+
+@utility mix-to-* {
+	--mix-to: --value(--color-*);
+	--mix-percentage: calc(--modifier(integer) * 1%);
+	--mix: color-mix(
+		in srgb, 
+		var(--mix-from), 
+		var(--mix-to, transparent) var(--mix-percentage, 50%)
+	);
+}
+
+@utility tint-* {	
+	--mix-from: --value(--color-*);
+	--mix-to: white; 
+	--mix-percentage: calc(--modifier(integer) * 1%);
+	--mix: color-mix(
+		in srgb, 
+		var(--mix-from), 
+		var(--mix-to) var(--mix-percentage, 20%)
+	);
+}
+
+@utility shade-* {
+	--mix-from: --value(--color-*);
+	--mix-to: black;
+	--mix-percentage: calc(--modifier(integer) * 1%);
+	--mix: color-mix(
+		in srgb, 
+		var(--mix-from), 
+		var(--mix-to) var(--mix-percentage)
+	);
+}
+
+
 @utility scrollbar-hidden {
 	/* IE and Edge */
 	-ms-overflow-style: none;
@@ -224,3 +267,8 @@
 	@apply cursor-pointer hover:text-accent-500;
 }
 
+@utility no-truncate {
+	text-overflow: unset;
+	overflow: visible;
+	white-space: normal;
+}

package/src/runtime/build/WitchcraftUiResolver.ts

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

package/src/runtime/components/TestControls/TestControls.vue

@@ -1,16 +1,16 @@
 <template>
-<!-- Width 100% + 2xmargin in combination with the margins in LibRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
+<!-- Width 100% + 2xmargin in combination with the margins in WRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
 <div class="test-controls flex gap-2 p-1 pb-10 -ml-10 w-[calc(100%_+_var(--spacing)*20)]">
 	<div class="flex-grow"/>
 	<div class="outline-indicator">
 		{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}
 	</div>
-	<lib-dark-mode-switcher/>
+	<WDarkModeSwitcher/>
 </div>
 </template>
 
 <script setup lang="ts">
-import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue"
+import WDarkModeSwitcher from "../WDarkModeSwitcher/WDarkModeSwitcher.vue"
 
 defineOptions({ name: "TestControls" })
 defineProps<{

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

@@ -0,0 +1,112 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { capitalize } from "@alanscodelog/utils/capitalize"
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+import IconFaSolidBell from "~icons/fa-solid/bell"
+
+import * as components from "../index.js"
+
+type ExtraTestArgs = {
+	_iconAfter?: boolean
+}
+const meta: Meta<typeof components.WButton> = {
+	component: components.WButton,
+	title: "Components/Button",
+	args: {
+		label: "Label",
+		...{
+			_iconAfter: true
+		} satisfies ExtraTestArgs as any
+	}
+}
+
+export default meta
+type Story = StoryObj<typeof components.WButton> & { args?: ExtraTestArgs }
+
+export const Primary: Story = {
+	render: args => {
+		const extraArgs = args as ExtraTestArgs
+		return {
+			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' ]">
+						<WButton 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>
+						</WButton>
+					</template>
+				</div>
+				<div class="flex flex-col gap-4 pt-10">
+					<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary']">
+						<WButton v-bind="{...args, color: type , label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false') }">
+							${extraArgs._iconAfter
+								? `
+								<template #icon-after>
+									<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
+								</template>
+							`
+								: ``}
+						</WButton>
+					</template>
+				</div>
+			`
+		}
+	}
+}
+
+export const IconAfter: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		_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 => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+		<div class="flex gap-4 justify-center">
+			<WButton v-bind="{...args}">
+				<div>Div inside button still has a pointer cursor.</div>
+			</WButton>
+		</div>
+		`
+	})
+}

package/src/runtime/components/{LibButton/LibButton.vue → WButton/WButton.vue}

@@ -1,7 +1,6 @@
 <template>
 <button
-	:id="id ?? fallbackId"
-	:class="!($attrs as any).unstyle && twMerge(`
+	:class="!unstyle && twMerge(`
 		button
 		flex
 		cursor-pointer
@@ -26,7 +25,8 @@
 		border && `
 			transition-all
 			bg-neutral-100
-			dark:bg-neutral-800
+			dark:tint-neutral-800/10
+			dark:bg-(--mix)
 			shadow-[0_1px_1px_0]
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
@@ -41,6 +41,7 @@
 			after:shadow-[0_1px_0_0_inset]
 			after:shadow-bg/20
 			hover:after:shadow-bg/60
+			disabled:after:hidden
 			dark:after:shadow-bg/10
 			dark:hover:after:shadow-bg/50
 			after:pointer-events-none
@@ -49,15 +50,16 @@
 			active:shadow-fg/20
 			active:border-transparent
 			border
-			border-neutral-300
+			border-black/10
 			disabled:border-neutral-200
-			disabled:bg-neutral-50
+			disabled:bg-neutral-100
 			dark:hover:shadow-neutral-950/70
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
-			dark:border-neutral-900
+			dark:border-black/50
 			dark:disabled:border-neutral-800
-			dark:disabled:bg-neutral-900
+			dark:disabled:bg-(--mix)
+			dark:disabled:shade-neutral-900/10
 		`,
 		border && (!color || color === `secondary`) && `
 			after:shadow-bg/90
@@ -153,26 +155,24 @@
 		`,
 		($attrs as any)?.class
 	)"
-	:type="$attrs.type as any"
+	:type="($attrs as any)?.type || 'button'"
 	:tabindex="0"
 	:disabled="disabled"
 	:data-border="border"
 	:data-color="color"
-	:aria-disabled="disabled"
 	v-bind="{
-		...autoTitle,
 		...$attrs,
-		class: undefined,
-		...ariaLabel
+		class: undefined
 	}"
 >
 	<slot
 		name="label"
-		v-bind="{ id: `label-${id ?? fallbackId}`, classes: 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1' }"
+		v-bind="{
+			classes: 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1'
+		}"
 	>
-		<label
-			:id="`label-${id ?? fallbackId}`"
-			class="button--label pointer-events-none flex flex-1 items-center justify-center gap-1"
+		<div
+			:class="!unstyle && 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1'"
 		>
 			<slot name="icon"/>
 			<slot
@@ -183,57 +183,41 @@
 				</span>
 			</slot>
 			<slot name="icon-after"/>
-		</label>
+		</div>
 	</slot>
 </button>
 </template>
 
 <script setup  lang="ts">
 import { isBlank } from "@alanscodelog/utils/isBlank"
-import { type ButtonHTMLAttributes, computed, useAttrs } from "vue"
+import { type ButtonHTMLAttributes, useAttrs } from "vue"
 
-import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js"
 import { twMerge } from "../../utils/twMerge.js"
-import { type BaseInteractiveProps, type ButtonProps, getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+
 
 const $attrs = useAttrs()
 
 defineOptions({
-	name: "LibButton"
+	name: "WButton",
+	inheritAttrs: false
 })
 
-const fallbackId = getFallbackId()
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<
+	& BaseInteractiveProps
+	& {
+		label?: string
+		border?: boolean
+		color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false
+	}
+
+	& /** @vue-ignore */ Omit<ButtonHTMLAttributes, "class" | "color">
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
 	color: false,
 	label: "",
-	unstyle: false, disabled: false, readonly: false, border: true
+	border: true
 })
-
-const ariaLabel = useAriaLabel(props, fallbackId)
-const autoTitle = computed(() => ({
-	title: props.autoTitleFromAria
-		? ($attrs["aria-label"] ?? props.label) as string
-		: undefined
-}))
 </script>
 
-<script lang="ts">
-type RealProps
-	= & LinkableByIdProps
-		& LabelProps
-		& BaseInteractiveProps
-		& ButtonProps
-
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled">
-	& TailwindClassProp
-	& {
-		// why is this not already a part of button?
-		// eslint-disable-next-line @typescript-eslint/naming-convention
-		"aria-label": string
-	}>,
-	RealProps {}
-</script>

package/src/runtime/components/{LibCheckbox/LibCheckbox.stories.ts → WCheckbox/WCheckbox.stories.ts}

@@ -4,27 +4,27 @@ import type { Meta, StoryObj } from "@storybook/vue3"
 import * as components from "../index.js"
 
 const meta = {
-	component: components.LibCheckbox,
+	component: components.WCheckbox,
 	title: "Components/Checkbox",
 	args: {
 		modelValue: true,
 		label: "Label"
 	}
-} satisfies Meta<typeof components.LibCheckbox> & Meta<{ custom: string }>
+} satisfies Meta<typeof components.WCheckbox> & Meta<{ custom: string }>
 
 export default meta
-type Story = StoryObj<typeof components.LibCheckbox> // & StoryObj<typeof extraArgs>
+type Story = StoryObj<typeof components.WCheckbox> // & StoryObj<typeof extraArgs>
 
 export const Primary: Story = {
 	render: args => ({
 		components,
 		setup: () => ({ args }),
 		template: `
-			<lib-checkbox v-bind="args" v-model="args.modelValue"></lib-checkbox>
+			<WCheckbox v-bind="args" v-model="args.modelValue"></WCheckbox>
 			<br>
 			Opposite State:
 			<br>
-			<lib-checkbox v-bind="args" :modelValue="!args.modelValue" @update:modelValue="args.modelValue = !$event"></lib-checkbox>
+			<WCheckbox v-bind="args" :modelValue="!args.modelValue" @update:modelValue="args.modelValue = !$event"></WCheckbox>
 		`
 	})
 }

package/src/runtime/components/WCheckbox/WCheckbox.vue

@@ -0,0 +1,125 @@
+<template>
+<div
+	:class="twMerge(`
+		checkbox--wrapper
+		flex
+		items-center
+		gap-1
+	`,
+		(disabled || readonly) && `
+			cursor-not-allowed
+			text-neutral-500
+		`,
+
+		wrapperAttrs?.class
+	)"
+	v-bind="{ ...wrapperAttrs, class: undefined }"
+	ref="el"
+>
+	<slot name="left"/>
+	<label
+		:class="twMerge(`
+			checkbox--label
+			flex
+			items-center
+			gap-1
+		`,
+			labelAttrs?.class
+		)"
+		v-bind="{ ...labelAttrs, class: undefined }"
+	>
+		<CheckboxRoot
+			:id="finalId"
+			:disabled="disabled || readonly"
+			:class="!unstyle && twMerge(`
+				checkbox
+				flex
+				items-center
+				justify-center
+				focus-outline-no-offset
+				m-0
+				h-[1.2em]
+				w-[1.2em]
+				aspect-square
+				bg-neutral-500/10
+				text-white
+				dark:text-white
+				border
+				border-neutral-500
+				data-[state=checked]:border-accent-800/50
+				data-[state=checked]:bg-accent-500
+				data-[state=checked]:shadow-2xs
+				data-[state=checked]:shadow-black/20
+				data-[state=unchecked]:inset-shadow-2xs
+				data-[state=unchecked]:inset-shadow-black/20
+				focus:border-accent-600
+				rounded-sm
+				relative
+				transition-colors
+				dark:disabled:bg-neutral-800
+				cursor-pointer
+				disabled:text-neutral-500
+				disabled:bg-neutral-500/50
+				disabled:cursor-not-allowed
+				disabled:data-[state=checked]:border-neutral-500
+			`,
+				($attrs as any)?.class
+			)"
+			v-bind="{ ...$attrs, class: undefined }"
+
+			v-model="modelValue"
+		>
+			<CheckboxIndicator class="checkbox--indicator">
+				<WIcon class="scale-110 mt-[2px] ml-[0.5px] [&_path]:stroke-3"><i-lucide-check/></WIcon>
+			</CheckboxIndicator>
+		</CheckboxRoot>
+
+		<slot/> {{ label }}
+	</label>
+</div>
+</template>
+
+<script setup lang="ts">
+import { CheckboxIndicator, CheckboxRoot } from "reka-ui"
+import type { HTMLAttributes, InputHTMLAttributes } from "vue"
+import { useAttrs } from "vue"
+
+import ILucideCheck from "~icons/lucide/check"
+
+import { useFallbackId } from "../../composables/useFallbackId.js"
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js"
+import type { BaseInteractiveProps, TailwindClassProp } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import WIcon from "../WIcon/WIcon.vue"
+
+const $attrs = useAttrs()
+
+defineOptions({
+	name: "WCheckbox",
+	inheritAttrs: false
+})
+
+const props = withDefaults(defineProps<
+	& BaseInteractiveProps
+	& {
+		id?: string
+		label?: string
+		labelAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp
+		wrapperAttrs?: Omit<HTMLAttributes, "class"> & TailwindClassProp
+	}
+	& /** @vue-ignore */Omit<
+		InputHTMLAttributes,
+		"class" | "readonly" | "disabled" | "onSumbit"
+	// https://github.com/vuejs/core/pull/14237
+		| "autocomplete"
+	>
+	& /** @vue-ignore */ TailwindClassProp
+>(), {
+	border: true
+})
+
+const modelValue = defineModel<boolean | "indeterminate">("modelValue", { default: false })
+const finalId = useFallbackId(props)
+usePreHydrationValue(finalId, modelValue)
+</script>
+

package/src/runtime/components/{LibColorInput/LibColorInput.stories.ts → WColorInput/WColorInput.stories.ts}

@@ -2,12 +2,12 @@
 import type { Meta, StoryObj } from "@storybook/vue3"
 import { ref } from "vue"
 
-import LibColorInput from "./LibColorInput.vue"
+import WColorInput from "./WColorInput.vue"
 
 import * as components from "../index.js"
 
-const meta: Meta<typeof LibColorInput> = {
-	component: LibColorInput,
+const meta: Meta<typeof WColorInput> = {
+	component: WColorInput,
 	title: "Components/ColorInput",
 	args: {
 
@@ -15,7 +15,7 @@ const meta: Meta<typeof LibColorInput> = {
 }
 
 export default meta
-type Story = StoryObj<typeof LibColorInput>
+type Story = StoryObj<typeof WColorInput>
 
 export const Primary: Story = {
 	render: args => ({
@@ -36,21 +36,21 @@ export const Primary: Story = {
 			}
 		},
 		template: `
-			<lib-color-Input
+			<WColorInput
 				:allowAlpha="args.allowAlpha"
 				:modelValue="args.color.value"
 				@update:modelValue="handleChange"
 			>
- 			</lib-color-Input>
+ 			</WColorInput>
 			Stretched:
 			<div class="flex-1 flex">
-				<lib-color-Input
+				<WColorInput
 					class="flex-1"
 					:allowAlpha="args.allowAlpha"
 					:modelValue="args.color.value"
 					@update:modelValue="handleChange"
 				>
-				</lib-color-Input>
+				</WColorInput>
 			</div>
 		`
 	})