@witchcraft/ui 0.3.25 → 0.4.0-beta.1

package/dist/runtime/types/index.d.ts

@@ -95,33 +95,6 @@ export type ScrollNearContainerEdgesOptions = {
     timerInterval?: number;
 };
 export type SimpleDOMRect = Omit<DOMRect, "toJSON">;
-export interface IPopupReference {
-    getBoundingClientRect: () => SimpleDOMRect;
-}
-export type PopupPosition = {
-    x: number;
-    y: number;
-    maxWidth?: number;
-    maxHeight?: number;
-};
-export type PopupSpaceInfo = {
-    left: number;
-    right: number;
-    leftLeft: number;
-    rightRight: number;
-    leftFromCenter: number;
-    rightFromCenter: number;
-    topFromCenter: number;
-    bottomFromCenter: number;
-    top: number;
-    bottom: number;
-};
-export type PopupPositioner = (
-/** Reference is only undefined, if you did not specify a button element or use the exposed setReference. The function is still called, because there are other ways you might want to still position the popup (e.g. center-screen or some similar variation). */
-reference: SimpleDOMRect | undefined, popup: SimpleDOMRect | DOMRect, bg: SimpleDOMRect | DOMRect, space: PopupSpaceInfo) => number;
-export type PopupPositionModifier = (pos: PopupPosition, 
-/** This will only be called with the reference element as undefined when one of the preferred positions is center-screen or it's a function. */
-reference: SimpleDOMRect | undefined, popup: SimpleDOMRect | DOMRect, bg: SimpleDOMRect | DOMRect, space: PopupSpaceInfo) => PopupPosition;
 export type SingleDate = Date | undefined;
 export type RangeDate = {
     start?: SingleDate;
@@ -131,3 +104,88 @@ export type CustomNotificationComponentProps = {
     message: string;
     messageClasses?: string;
 };
+export type BaseInteractiveProps = {
+    /** Default is false. */
+    disabled?: boolean;
+    /** Default is false. */
+    readonly?: boolean;
+    /** Default is true. */
+    border?: boolean;
+    /** Removes styles from the component. Default is false. */
+    unstyle?: boolean;
+};
+export type TailwindClassProp = {
+    /** Tailwind classes. */
+    class?: string | false;
+};
+export declare const defaultDarkModeOrder: readonly ["system", "dark", "light"];
+export type DarkModeOptions = {
+    useLocalStorage?: boolean | string;
+    darkModeOrder?: readonly ("system" | "dark" | "light")[];
+    /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+    isClientSide?: boolean;
+    /**
+     * Whether to use the view transition to animate the dark mode switch (you just need to add the css).
+     *
+     * Note that the transitition is NOT triggered if visually the mode does not change (e.g. system mode is dark and the user switches from system to dark, visually nothing changes so transitioning is skipped).
+     *
+     * There is an example in storybook. But basically:
+     *
+     * ```css
+     *
+     * #root { // the dark mode switcher works on the WRoot component not the html root
+     *		view-transition-name: wroot;
+     *		height: 100dvh;
+     *		padding: 0;
+     *	}
+     *
+     * ::view-transition-new(wroot) {
+     * 	animation: grow var(--story-anim-length) ease-in-out;
+     * 	animation-fill-mode: both;
+     * 	z-index: 2;
+     * 	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>') center / 0 no-repeat;
+     * }
+     *
+     * ::view-transition-old(wroot) {
+     * 	animation: none;
+     * 	animation-fill-mode: both;
+     * 	z-index: 1;
+     * }
+     *
+     * @keyframes grow {
+     * 	from {
+     * 		mask-size: 0dvw;
+     * 	}
+     * 	to {
+     * 		mask-size: 300dvw;
+     * 	}
+     * }
+     * ```
+     *
+     * See https://theme-toggle.rdsx.dev/ for more ideas.
+     *
+     * @default true
+     */
+    useViewTransition?: boolean;
+};
+export interface DarkModeCommands {
+    setDarkMode: (value: "dark" | "light" | "system") => void;
+    cycleDarkMode: () => void;
+}
+export interface DarkModeState {
+    /** Whether the dark mode should be enabled or not */
+    darkMode: Ref<boolean>;
+    /** The current state of the darkMode but as a string (dark, light, system) */
+    darkModeState: Ref<"dark" | "light" | "system">;
+    /** The value of the manuably controllable dark mode. You can set this to true/false or undefined to allow the systemDarkMode to take priority. Alternatively use setDarkMode instead. */
+    manualDarkMode: Ref<boolean | undefined>;
+    /** The value of the system dark mode. This is automatically set depending on the user's `prefer-color-scheme` and should not be set directly. */
+    systemDarkMode: Ref<boolean>;
+}
+export type PopupConstrainToProps = {
+    constrainWidthTo?: number | "trigger" | "available" | string | null;
+    constrainHeightTo?: number | "trigger" | "available" | string | null;
+};
+export type EmitsToProps<T> = {
+    [K in keyof T as K extends string ? `on${Capitalize<K>}` : never]?: T[K] extends (...args: infer Args) => any ? (...args: Args) => void : T[K] extends any[] ? (...args: T[K]) => void : T[K];
+};

package/dist/runtime/types/index.js

@@ -0,0 +1 @@
+export const defaultDarkModeOrder = ["system", "dark", "light"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.25",
+  "version": "0.4.0-beta.1",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@alanscodelog/utils": "^6.1.0",
+    "@alanscodelog/utils": "^6.2.0",
     "@iconify/json": "^2.2.450",
     "@nuxt/kit": "^4.4.2",
     "@nuxt/schema": "^4.4.2",
@@ -75,7 +75,7 @@
     "defu": "^6.1.4",
     "fast-glob": "^3.3.3",
     "metamorphosis": "^0.6.1",
-    "reka-ui": "^2.9.2",
+    "reka-ui": "^2.9.5",
     "tailwind-merge": "^3.5.0",
     "unplugin-icons": "^22.5.0",
     "unplugin-vue-components": "^28.8.0",
@@ -85,7 +85,7 @@
     "@alanscodelog/commitlint-config": "^3.1.2",
     "@alanscodelog/eslint-config": "^6.3.1",
     "@alanscodelog/semantic-release-config": "^6.0.2",
-    "@alanscodelog/tsconfigs": "^6.2.0",
+    "@alanscodelog/tsconfigs": "^6.3.0",
     "@alanscodelog/vite-config": "^0.0.7",
     "@chromatic-com/storybook": "^3.2.7",
     "@commitlint/cli": "^20.5.0",
@@ -94,7 +94,7 @@
     "@nuxt/eslint-config": "^1.15.2",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxtjs/i18n": "^9.5.6",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "=1.58.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@storybook/addon-a11y": "^8.6.18",
     "@storybook/addon-actions": "^8.6.18",
@@ -125,8 +125,8 @@
     "indexit": "2.1.0-beta.3",
     "madge": "^7.0.0",
     "nuxt": "^4.4.2",
-    "playwright": "^1.58.2",
-    "playwright-core": "^1.58.2",
+    "playwright": "=1.58.2",
+    "playwright-core": "=1.58.2",
     "semantic-release": "^24.2.9",
     "storybook": "^8.6.18",
     "storybook-dark-mode": "^4.0.2",

package/src/runtime/assets/animations.css

@@ -28,8 +28,8 @@
 		}
 	}
 
-	--animate-slideBgInf: slide-bg 10s ease-in-out linear-infinite;
-	@keyframes slide {
+	--animate-slideBgInf: slideBg 10s ease-in-out linear-infinite;
+	@keyframes slideBg {
 		0% {
 			background-position:0%;
 		}
@@ -60,7 +60,7 @@
 		}
 	}
 
-	--animate-slideInRight: slideInLeft 500ms cubic-bezier(0.16, 1, 0.3, 1);
+	--animate-slideInRight: slideInRight 500ms cubic-bezier(0.16, 1, 0.3, 1);
 	@keyframes slideInRight {
 		from {
 			transform: translateX(var(--animate-from, -100%));

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/utils.css

@@ -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;

package/src/runtime/build/WitchcraftUiResolver.ts

@@ -1,6 +1,6 @@
 import type { ComponentResolver } from "unplugin-vue-components"
 
-const prefixless = ["Icon", "Aria"]
+const prefixless = ["Icon"]
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const WitchcraftUiResolver = (
 	{

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>
 		`
 	})
 }