@witchcraft/ui 0.0.1

package/dist/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/dist/runtime/components/LibButton/LibButton.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import * as components from "../index.js.js";
+declare const meta: Meta<typeof components.LibButton>;
+export default meta;
+type Story = StoryObj<typeof components.LibButton>;
+export declare const Primary: Story;
+export declare const IconAfter: Story;
+export declare const OnlyIcon: Story;
+export declare const Disabled: Story;
+export declare const Borderless: Story;
+export declare const BorderlessDisabled: Story;
+export declare const WithDivInside: Story;

package/dist/runtime/components/LibButton/LibButton.stories.js

@@ -0,0 +1,94 @@
+import { capitalize } from "@alanscodelog/utils/capitalize.js";
+import IconFaSolidBell from "~icons/fa-solid/bell";
+import * as components from "../index.js";
+const meta = {
+  component: components.LibButton,
+  title: "Components/Button",
+  args: {
+    label: "Label",
+    // @ts-expect-error - custom prop for story
+    _iconAfter: true
+  }
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    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 = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    // @ts-expect-error - .
+    _iconAfter: true
+  }
+};
+export const OnlyIcon = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    label: void 0
+  }
+};
+export const Disabled = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    disabled: true
+  }
+};
+export const Borderless = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    border: false
+  }
+};
+export const BorderlessDisabled = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    border: false,
+    disabled: true
+  }
+};
+export const WithDivInside = {
+  render: (args) => ({
+    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>
+		`
+  })
+};

package/dist/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/dist/runtime/components/LibCheckbox/LibCheckbox.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from "@storybook/vue3";
+import * as components from "../index.js.js";
+declare const meta: {
+    component: any;
+    title: string;
+    args: {
+        modelValue: boolean;
+        label: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof components.LibCheckbox>;
+export declare const Primary: Story;
+export declare const Disabled: any;

package/dist/runtime/components/LibCheckbox/LibCheckbox.stories.js

@@ -0,0 +1,29 @@
+import * as components from "../index.js";
+const meta = {
+  component: components.LibCheckbox,
+  title: "Components/Checkbox",
+  args: {
+    modelValue: true,
+    label: "Label"
+  }
+};
+export default meta;
+export const Primary = {
+  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/dist/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/dist/runtime/components/LibColorInput/LibColorInput.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibColorInput from "./LibColorInput.vue.js";
+declare const meta: Meta<typeof LibColorInput>;
+export default meta;
+type Story = StoryObj<typeof LibColorInput>;
+export declare const Primary: Story;
+export declare const DoesNotAllowAlpha: Story;

package/dist/runtime/components/LibColorInput/LibColorInput.stories.js

@@ -0,0 +1,58 @@
+import { ref } from "vue";
+import LibColorInput from "./LibColorInput.vue";
+import * as components from "../index.js";
+const meta = {
+  component: LibColorInput,
+  title: "Components/ColorInput",
+  args: {}
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      const color = ref({
+        r: 0,
+        g: 0,
+        b: 0
+        /* , a: 0.5 */
+      });
+      const handleChange = (e) => {
+        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 = {
+  ...Primary,
+  args: {
+    allowAlpha: false
+  }
+};