@witchcraft/ui 0.0.1

package/src/runtime/components/LibButton/LibButton.vue

@@ -0,0 +1,247 @@
+<template>
+<button
+	:id="id ?? fallbackId"
+	:class="!($attrs as any).unstyle && twMerge(`
+			button
+			flex
+			cursor-pointer
+			items-center
+			justify-center
+			rounded-sm
+			px-1
+			hover:cursor-pointer
+			[&:hover_*]:cursor-pointer
+			focus-outline
+			disabled:shadow-none
+			disabled:text-neutral-500
+			disabled:cursor-default
+			text-fg
+			hover:text-accent-700
+			dark:text-bg
+			dark:hover:text-accent-500
+			dark:disabled:text-neutral-500
+			dark:disabled:hover:text-neutral-500
+		`,
+		!color && `active:text-neutral-800` /* todo for colors */,
+		border && `
+			transition-all
+			bg-neutral-100
+			dark:bg-neutral-900
+			shadow-[0_1px_1px_0]
+			shadow-neutral-950/20
+			hover:shadow-[0_1px_3px_0]
+			hover:shadow-neutral-950/30
+			hover:border-neutral-300
+
+			relative
+			after:absolute
+			after:rounded-sm
+			after:inset-0
+			after:content
+			after:shadow-[0_1px_0_0_inset]
+			after:shadow-bg/20
+			hover:after:shadow-bg/60
+			dark:after:shadow-bg/10
+			dark:hover:after:shadow-bg/50
+			after:pointer-events-none
+			after:mix-blend-overlay
+
+			active:shadow-inner
+			active:shadow-fg/20
+			active:border-transparent
+			border
+			border-neutral-400
+			disabled:border-neutral-200
+			disabled:bg-neutral-50
+
+			dark:hover:shadow-accent-950/30
+			dark:active:shadow-fg/40
+			dark:active:border-neutral-900
+			dark:bg-neutral-800
+			dark:border-neutral-900
+			dark:disabled:border-neutral-800
+			dark:disabled:bg-neutral-900
+		`,
+		border && ( !color || color === `secondary` ) && `
+			after:shadow-bg/90
+			hover:after:shadow-bg
+			dark:after:shadow-bg/20
+			dark:hover:after:shadow-bg/90
+		`,
+		!border && color === `primary` && `
+			font-bold
+			hover:text-accent-50
+		`,
+		!border && color === `ok` && `
+			text-ok-600 hover:text-ok-500
+			dark:text-ok-600 dark:hover:text-ok-500
+		`,
+		!border && color === `warning` && `
+			text-warning-500 hover:text-warning-300
+			dark:text-warning-600 dark:hover:text-warning-400
+		`,
+		!border && color === `danger` && `
+			text-danger-500 hover:text-danger-300
+			dark:text-danger-600 dark:hover:text-danger-400
+		`,
+		!border && color === `secondary` && `
+			text-accent-700 hover:text-accent-500
+			dark:text-accent-600 dark:hover:text-accent-400
+		`,
+		!border && color === `primary` && `
+			text-accent-700 hover:text-accent-500
+			dark:text-accent-600 dark:hover:text-accent-400
+		`,
+		border && color === `ok` && `
+			text-ok-950
+			hover:text-ok-800
+			bg-ok-400
+			border-ok-500
+			hover:border-ok-600
+			hover:shadow-ok-900/50
+
+			dark:text-ok-100
+			dark:hover:text-ok-200
+			dark:bg-ok-700
+			dark:border-ok-800
+			dark:hover:border-ok-900
+			dark:hover:shadow-ok-900/30
+		`,
+		border && color === `warning` && `
+			text-warning-950
+			hover:text-warning-900
+			bg-warning-300
+			border-warning-400
+			hover:border-warning-400
+			hover:shadow-warning-900/50
+
+			dark:text-warning-100
+			dark:hover:text-warning-200
+			dark:bg-warning-700
+			dark:border-warning-700
+			dark:hover:shadow-warning-900/25
+		`,
+		border && color === `danger` && `
+			text-danger-950
+			hover:text-danger-900
+			bg-danger-400
+			border-danger-500
+			hover:border-danger-500
+			hover:shadow-danger-900/50
+
+			dark:text-danger-100
+			dark:hover:text-danger-200
+			dark:bg-danger-900
+			dark:border-danger-950
+			dark:hover:shadow-ranger-500/10
+		`,
+		border && color === `secondary` && `
+			text-accent-800
+			dark:text-accent-400
+		`,
+		border && color === `primary` && `
+			text-bg
+			hover:text-bg
+			bg-accent-600
+			border-accent-700
+			hover:border-accent-800
+			hover:shadow-accent-950/30
+
+			dark:text-bg
+			dark:bg-accent-600
+			dark:hover:text-accent-200
+			dark:border-accent-800
+			dark:hover:border-accent-700
+			dark:hover:shadow-accent-900/50
+		`,
+		($attrs as any)?.class
+	)"
+	:type="$attrs.type as any ?? 'submit'"
+	:tabindex="0"
+	:disabled="disabled"
+	:data-border="border"
+	:data-color="color"
+	:aria-disabled="disabled"
+	v-bind="{
+		...autoTitle,
+		...$attrs,
+		class: undefined,
+		...ariaLabel,
+	}"
+>
+	<label :id="`label-${id ?? fallbackId}`" class="label pointer-events-none flex flex-1 items-center justify-center gap-1">
+		<slot name="icon"/>
+		<slot
+			v-bind="{ label}"
+		>
+			<span v-if="label && !isBlank(label!)">
+				{{ label }}
+			</span>
+		</slot>
+		<slot name="icon-after"/>
+	</label>
+</button>
+</template>
+
+<script setup  lang="ts">
+import { isBlank } from "@alanscodelog/utils/isBlank.js"
+import { keys } from "@alanscodelog/utils/keys.js"
+import { pick } from "@alanscodelog/utils/pick.js"
+import type { MakeRequired } from "@alanscodelog/utils/types"
+import { type ButtonHTMLAttributes,computed, type HTMLAttributes, type PropType,useAttrs } from "vue"
+
+import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+
+
+const $attrs = useAttrs()
+
+
+defineOptions({
+	name: "lib-button",
+})
+
+const fallbackId = getFallbackId()
+
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	color: false,
+	label: "",
+	...baseInteractivePropsDefaults
+})
+
+
+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
+	& {
+		border?: boolean
+		color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false
+		label?: string
+		autoTitleFromAria?: boolean
+	}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<ButtonHTMLAttributes,"class" | "color" | "disabled">
+	& TailwindClassProp
+	& {
+		// why is this not already a part of button?
+		"aria-label": string
+	}>,
+	RealProps {}
+</script>

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

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta = {
+	component: components.LibCheckbox,
+	title: "Components/Checkbox",
+	args: {
+		modelValue: true,
+		label: "Label",
+	},
+} satisfies Meta<typeof components.LibCheckbox> & Meta<{ custom: string }>
+
+export default meta
+type Story = StoryObj<typeof components.LibCheckbox> // & StoryObj<typeof extraArgs>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => ({ args }),
+		template: `
+			<lib-checkbox v-bind="args" v-model="args.modelValue"></lib-checkbox>
+			<br>
+			Opposite State:
+			<br>
+			<lib-checkbox v-bind="args" :modelValue="!args.modelValue" @update:modelValue="args.modelValue = !$event"></lib-checkbox>
+		`,
+	}),
+}
+
+
+export const Disabled = {
+	...Primary,
+	args: {
+		disabled: true,
+	},
+}

package/src/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -0,0 +1,132 @@
+<template>
+<div
+	:class="twMerge(`
+		flex
+		items-center
+		gap-1
+	`,
+		($.wrapperAttrs as any)?.class
+	)"
+	v-bind="{ ...$.wrapperAttrs, class: undefined }"
+	ref="el"
+>
+	<slot name="left"/>
+	<label
+		class="flex items-center gap-1"
+		:class="twMerge(`
+			flex
+			items-center
+			gap-1
+		`,
+			($.labelAttrs as any)?.class
+		)"
+		v-bind="{ ...$.labelAttrs, class: undefined }"
+		:for="id ?? fallbackId"
+	>
+		<input
+			:id="id ?? fallbackId"
+			:class="!($attrs as any).unstyle && twMerge(`
+				focus-outline-no-offset
+				m-0
+				p-[0.4em]
+				bg-bg
+				dark:bg-fg
+				appearance-none
+				border
+				border-accent-600
+				rounded-sm
+				aspect-square
+				relative
+				checked:after:content
+				checked:after:absolute
+				checked:after:w-full
+				checked:after:h-full
+				checked:after:border-2
+				checked:after:border-bg
+				dark:checked:after:border-fg
+				checked:after:rounded-sm
+				checked:after:top-0
+				checked:after:left-0
+				checked:after:bg-accent-700
+				disabled:border-neutral-500
+				disabled:checked:after:bg-neutral-700
+			`, !disabled && `cursor-pointer`,
+				($.attrs as any).class
+			)"
+			type="checkbox"
+			:disabled="disabled"
+			ref="inputEl"
+			v-model="$value"
+			v-bind="{...$.attrs, class: undefined}"
+		>
+		<slot/> {{ label }}
+	</label>
+</div>
+</template>
+<script setup  lang="ts">
+import { keys } from "@alanscodelog/utils/keys.js"
+import { omit } from "@alanscodelog/utils/omit.js"
+import { pick } from "@alanscodelog/utils/pick.js"
+import type { MakeRequired } from "@alanscodelog/utils/types"
+import { computed, type HTMLAttributes, type InputHTMLAttributes,type PropType, ref, useAttrs, useSlots } from "vue"
+
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js"
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, getFallbackId,type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+
+defineOptions({
+	name: "lib-checkbox",
+	inheritAttrs: false,
+})
+
+const $ = useDivideAttrs(["label", "wrapper"])
+const $slots = useSlots()
+/* todo multi states */
+
+const fallbackId = getFallbackId()
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	...baseInteractivePropsDefaults,
+})
+
+
+const emits = defineEmits<{
+	/* User presses enter.*/
+	(e: "submit", val: boolean): void
+}>()
+
+const el = ref<null | HTMLElement>(null)
+const inputEl = ref<null | HTMLElement>(null)
+const $value = defineModel<boolean>("modelValue", { default: false })
+
+
+</script>
+
+<script lang="ts">
+
+type WrapperTypes = Partial<WrapperProps<"label",HTMLAttributes, {
+	/** Tailwind classes. */
+	class?: string
+}>>
+
+type RealProps =
+
+	& LinkableByIdProps
+	& LabelProps
+	& BaseInteractiveProps
+	& {
+		unstyle?: boolean
+	}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<
+		InputHTMLAttributes,
+		"class" | "readonly" | "disabled" | "onSumbit"
+	> & TailwindClassProp>,
+	/** @vue-ignore */
+	WrapperTypes,
+	RealProps
+{}
+</script>

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

@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+import LibColorInput from "./LibColorInput.vue"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof LibColorInput> = {
+	component: LibColorInput,
+	title: "Components/ColorInput",
+	args: {
+		
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof LibColorInput>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => {
+			const color = ref({ r: 0, g: 0, b: 0/* , a: 0.5 */ })
+			const handleChange = (e: any): void => {
+				color.value = { ...e }
+			}
+			return {
+				args: {
+					outline: false,
+					color,
+					allowAlpha: true,
+					...args,
+				},
+				handleChange,
+			}
+		},
+		template: `
+			<lib-color-Input
+				:allowAlpha="args.allowAlpha"
+				:modelValue="args.color.value"
+				@update:modelValue="handleChange"
+			>
+ 			</lib-color-Input>
+			Stretched:
+			<div class="flex-1 flex">
+				<lib-color-Input
+					class="flex-1"
+					:allowAlpha="args.allowAlpha"
+					:modelValue="args.color.value"
+					@update:modelValue="handleChange"
+				>
+				</lib-color-Input>
+			</div>
+		`,
+	}),
+}
+
+
+export const DoesNotAllowAlpha: Story = {
+	...Primary,
+	args: {
+		allowAlpha: false,
+	},
+}
+

package/src/runtime/components/LibColorInput/LibColorInput.vue

@@ -0,0 +1,125 @@
+<template>
+<lib-popup
+	v-model="showPopup"
+>
+	<template #button="{extractEl}">
+		<lib-button
+			:id="id ?? fallbackId"
+			:class="twMerge(`
+				flex flex-nowrap
+			`,
+				($attrs as any).class
+			)"
+			:aria-label="stringColor"
+			:title="stringColor"
+			v-bind="{...$attrs, class: undefined}"
+			v-extract-root-el="extractEl"
+			@click="togglePopup"
+		>
+			<span class="color-label
+					whitespace-nowrap
+					pr-2
+				"
+			>
+				<slot>{{ t("color-picker.pick-color") }}</slot>
+			</span>
+			<div :class="`color-swatch
+						rounded-xs
+						px-1
+						flex-1
+						h-4
+						w-8
+						relative
+						aspect-square
+						before:content-['']
+						before:absolute
+						before:inset-0
+						before:bg-transparency-squares
+						before:z-[-1]
+					`"
+				:style="`background:${stringColor}`"
+			/>
+		</lib-button>
+	</template>
+	<template #popup="{extractEl}">
+		<lib-color-picker v-if="showPopup"
+			:id="id ?? fallbackId"
+			:allow-alpha="allowAlpha"
+			v-model="tempValue"
+			v-extract-root-el="extractEl"
+			@save="$value = tempValue; showPopup = false"
+			@cancel="showPopup = false"
+		/>
+	</template>
+</lib-popup>
+</template>
+
+<script setup lang="ts">
+import { colord } from "colord"
+import { type ButtonHTMLAttributes,computed, type PropType, ref, useAttrs } from "vue"
+
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
+import { vExtractRootEl } from "../../directives/vExtractRootEl.js"
+import type { HsvaColor, RgbaColor } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import LibButton from "../LibButton/LibButton.vue"
+import LibColorPicker from "../LibColorPicker/LibColorPicker.vue"
+import LibPopup from "../LibPopup/LibPopup.vue"
+import { getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+
+
+defineOptions({
+	name: "lib-color-input",
+})
+
+const fallbackId = getFallbackId()
+
+const t = useInjectedI18n()
+// eslint-disable-next-line no-use-before-define
+const props = withDefaults(defineProps<Props>(), {
+	allowAlpha: true,
+	border: true,
+	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
+})
+
+
+const $attrs = useAttrs()
+ 
+const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
+const stringColor = computed(() => colord($value.value).toRgbString())
+const tempValue = ref({ ...$value.value })
+
+const showPopup = ref(false)
+
+
+const togglePopup = (): void => {
+	if (showPopup.value) {
+		$value.value = tempValue.value
+	}
+	showPopup.value = !showPopup.value
+}
+
+</script>
+
+<script lang="ts">
+
+type RealProps =
+& LabelProps
+& LinkableByIdProps
+& {
+	allowAlpha?: boolean
+	border?: boolean
+	copyTransform?: (val: HsvaColor, stringVal: string) => any
+}
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<ButtonHTMLAttributes,"class">
+	& TailwindClassProp
+	& {
+		// why is this not already a part of button?
+		"aria-label": string
+	}>,
+	RealProps
+{}
+</script>

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

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+
+import LibColorPicker from "./LibColorPicker.vue"
+
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import * as components from "../index.js"
+
+
+const meta: Meta<typeof LibColorPicker> = {
+	component: LibColorPicker,
+	title: "Components/ColorPicker",
+	args: {
+		
+	},
+}
+
+export default meta
+type Story = StoryObj<typeof LibColorPicker>
+
+
+export const Primary: Story = {
+	render: args => ({
+		components,
+		setup: () => {
+			const color = ref({ r: 0, g: 0, b: 0/* , a: 0.5 */ })
+			const handleChange = (e: any) => {
+				color.value = { ...e }
+			}
+			return {
+				args: {
+					outline: false,
+					color,
+					allowAlpha: true,
+					...args,
+				},
+				handleChange,
+			}
+		},
+		template: `
+			<test-wrapper :outline="args.outline">
+	 		{{args.color}}
+	 		<lib-color-picker
+	 			:allowAlpha="args.allowAlpha"
+	 			:modelValue="args.color.value"
+	 			@update:modelValue="handleChange"
+	 		>
+	 		</lib-color-picker>
+	 		</test-wrapper>
+		`,
+	}),
+}
+export const DoesNotAllowAlpha: Story = {
+	...Primary,
+	args: {
+		allowAlpha: false,
+	},
+}
+