@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibButton/LibButton.vue

@@ -1,29 +1,30 @@
 <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 && `
+	:class="!$attrs.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`,
+  border && `
 			transition-all
 			bg-neutral-100
 			dark:bg-neutral-900
@@ -31,11 +32,11 @@
 			shadow-neutral-950/20
 			hover:shadow-[0_1px_3px_0]
 			hover:shadow-neutral-950/30
-			hover:border-neutral-300
-
+			hover:border-neutral-200
+			dark:hover:border-neutral-800
 			relative
 			after:absolute
-			after:rounded-sm
+			after:rounded-xs
 			after:inset-0
 			after:content
 			after:shadow-[0_1px_0_0_inset]
@@ -45,15 +46,13 @@
 			dark:hover:after:shadow-bg/50
 			after:pointer-events-none
 			after:mix-blend-overlay
-
-			active:shadow-inner
+			active:inset-shadow
 			active:shadow-fg/20
 			active:border-transparent
 			border
-			border-neutral-400
+			border-neutral-300
 			disabled:border-neutral-200
 			disabled:bg-neutral-50
-
 			dark:hover:shadow-accent-950/30
 			dark:active:shadow-fg/40
 			dark:active:border-neutral-900
@@ -62,37 +61,37 @@
 			dark:disabled:border-neutral-800
 			dark:disabled:bg-neutral-900
 		`,
-		border && ( !color || color === `secondary` ) && `
+  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` && `
+  !border && color === `primary` && `
 			font-bold
 			hover:text-accent-50
 		`,
-		!border && color === `ok` && `
+  !border && color === `ok` && `
 			text-ok-600 hover:text-ok-500
 			dark:text-ok-600 dark:hover:text-ok-500
 		`,
-		!border && color === `warning` && `
+  !border && color === `warning` && `
 			text-warning-500 hover:text-warning-300
 			dark:text-warning-600 dark:hover:text-warning-400
 		`,
-		!border && color === `danger` && `
+  !border && color === `danger` && `
 			text-danger-500 hover:text-danger-300
 			dark:text-danger-600 dark:hover:text-danger-400
 		`,
-		!border && color === `secondary` && `
+  !border && color === `secondary` && `
 			text-accent-700 hover:text-accent-500
 			dark:text-accent-600 dark:hover:text-accent-400
 		`,
-		!border && color === `primary` && `
+  !border && color === `primary` && `
 			text-accent-700 hover:text-accent-500
 			dark:text-accent-600 dark:hover:text-accent-400
 		`,
-		border && color === `ok` && `
+  border && color === `ok` && `
 			text-ok-950
 			hover:text-ok-800
 			bg-ok-400
@@ -107,7 +106,7 @@
 			dark:hover:border-ok-900
 			dark:hover:shadow-ok-900/30
 		`,
-		border && color === `warning` && `
+  border && color === `warning` && `
 			text-warning-950
 			hover:text-warning-900
 			bg-warning-300
@@ -121,7 +120,7 @@
 			dark:border-warning-700
 			dark:hover:shadow-warning-900/25
 		`,
-		border && color === `danger` && `
+  border && color === `danger` && `
 			text-danger-950
 			hover:text-danger-900
 			bg-danger-400
@@ -135,11 +134,11 @@
 			dark:border-danger-950
 			dark:hover:shadow-ranger-500/10
 		`,
-		border && color === `secondary` && `
+  border && color === `secondary` && `
 			text-accent-800
 			dark:text-accent-400
 		`,
-		border && color === `primary` && `
+  border && color === `primary` && `
 			text-bg
 			hover:text-bg
 			bg-accent-600
@@ -154,94 +153,71 @@
 			dark:hover:border-accent-700
 			dark:hover:shadow-accent-900/50
 		`,
-		($attrs as any)?.class
-	)"
-	:type="$attrs.type as any ?? 'submit'"
+  $attrs?.class
+)"
+	:type="$attrs.type"
 	:tabindex="0"
 	:disabled="disabled"
 	:data-border="border"
 	:data-color="color"
 	:aria-disabled="disabled"
 	v-bind="{
-		...autoTitle,
-		...$attrs,
-		class: undefined,
-		...ariaLabel,
-	}"
+  ...autoTitle,
+  ...$attrs,
+  class: void 0,
+  ...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>
+	<slot name="label" v-bind="{ id: `label-${id ?? fallbackId}`, 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">
+			<slot name="icon"/>
+			<slot
+				v-bind="{ label }"
+			>
+				<span v-if="label && !isBlank(label)">
+					{{ label }}
+				</span>
+			</slot>
+			<slot name="icon-after"/>
+		</label>
+	</slot>
 </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()
-
-
+<script setup>
+import { isBlank } from "@alanscodelog/utils/isBlank.js";
+import { keys } from "@alanscodelog/utils/keys.js";
+import { pick } from "@alanscodelog/utils/pick.js";
+import { computed, useAttrs } from "vue";
+import { useAriaLabel } from "../../composables/useAriaLabel.js";
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
+import { twMerge } from "../../utils/twMerge.js";
+import { baseInteractiveProps, baseInteractivePropsDefaults, getFallbackId } 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)
+  name: "lib-button"
+});
+const fallbackId = getFallbackId();
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false },
+  color: { type: [String, Boolean], required: false },
+  autoTitleFromAria: { type: Boolean, required: false }
+}, {
+  color: false,
+  label: "",
+  ...baseInteractivePropsDefaults
+}));
+const ariaLabel = useAriaLabel(props, fallbackId);
 const autoTitle = computed(() => ({
-	title: props.autoTitleFromAria
-		? ($attrs["aria-label"] ?? props.label) as string
-		: undefined,
-}))
-
+  title: props.autoTitleFromAria ? $attrs["aria-label"] ?? props.label : void 0
+}));
 </script>
 
-<script lang="ts">
-type RealProps =
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		border?: boolean
-		color?: "warning" | "ok" | "danger" | "primary" | "secondary" | false
-		label?: string
-		autoTitleFromAria?: boolean
-	}
+<script>
 
-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/LibButton/LibButton.vue.d.ts

@@ -0,0 +1,36 @@
+import { type ButtonHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type ButtonProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & ButtonProps;
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindClassProp & {
+    "aria-label": string;
+}>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
+    label: string;
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    label?: (props: {
+        id: string;
+        classes: string;
+    }) => any;
+} & {
+    icon?: (props: {}) => any;
+} & {
+    default?: (props: {
+        label: any;
+    }) => any;
+} & {
+    'icon-after'?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibCheckbox/LibCheckbox.vue

@@ -1,31 +1,36 @@
 <template>
 <div
-	:class="twMerge(`
+	:class="twMerge(
+  `
+		checkbox--wrapper
 		flex
 		items-center
 		gap-1
 	`,
-		($.wrapperAttrs as any)?.class
-	)"
-	v-bind="{ ...$.wrapperAttrs, class: undefined }"
+  $.wrapperAttrs?.class
+)"
+	v-bind="{ ...$.wrapperAttrs, class: void 0 }"
 	ref="el"
 >
 	<slot name="left"/>
 	<label
-		class="flex items-center gap-1"
-		:class="twMerge(`
+		:class="twMerge(
+  `
+			checkbox--label
 			flex
 			items-center
 			gap-1
 		`,
-			($.labelAttrs as any)?.class
-		)"
-		v-bind="{ ...$.labelAttrs, class: undefined }"
+  $.labelAttrs?.class
+)"
+		v-bind="{ ...$.labelAttrs, class: void 0 }"
 		:for="id ?? fallbackId"
 	>
 		<input
 			:id="id ?? fallbackId"
-			:class="!($attrs as any).unstyle && twMerge(`
+			:class="!$attrs.unstyle && twMerge(
+  `
+				checkbox
 				focus-outline-no-offset
 				m-0
 				p-[0.4em]
@@ -33,7 +38,8 @@
 				dark:bg-fg
 				appearance-none
 				border
-				border-accent-600
+				border-neutral-500
+				focus:border-accent-600
 				rounded-sm
 				aspect-square
 				relative
@@ -50,83 +56,54 @@
 				checked:after:bg-accent-700
 				disabled:border-neutral-500
 				disabled:checked:after:bg-neutral-700
-			`, !disabled && `cursor-pointer`,
-				($.attrs as any).class
-			)"
+			`,
+  !disabled && `cursor-pointer`,
+  $.attrs.class
+)"
 			type="checkbox"
 			:disabled="disabled"
 			ref="inputEl"
 			v-model="$value"
-			v-bind="{...$.attrs, class: undefined}"
+			v-bind="{ ...$.attrs, class: void 0 }"
 		>
 		<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"
 
+<script setup>
+import { keys } from "@alanscodelog/utils/keys.js";
+import { omit } from "@alanscodelog/utils/omit.js";
+import { pick } from "@alanscodelog/utils/pick.js";
+import { computed, ref, useAttrs, useSlots } from "vue";
+import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
+import { usePreHydrationValue } from "../../composables/usePreHydrationValue.js";
+import { twMerge } from "../../utils/twMerge.js";
+import { baseInteractivePropsDefaults, getFallbackId } 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 })
-
-
+  name: "lib-checkbox",
+  inheritAttrs: false
+});
+const $ = useDivideAttrs(["label", "wrapper"]);
+const $slots = useSlots();
+const fallbackId = getFallbackId();
+const props = defineProps(/* @__PURE__ */ _mergeDefaults({
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  readonly: { type: Boolean, required: false },
+  border: { type: Boolean, required: false },
+  unstyle: { type: Boolean, required: false }
+}, {
+  ...baseInteractivePropsDefaults
+}));
+const emits = defineEmits(["submit"]);
+const el = ref(null);
+const inputEl = ref(null);
+const $value = defineModel("modelValue", { type: Boolean, ...{ default: false } });
+usePreHydrationValue(props.id ?? fallbackId, $value);
 </script>
 
-<script lang="ts">
-
-type WrapperTypes = Partial<WrapperProps<"label",HTMLAttributes, {
-	/** Tailwind classes. */
-	class?: string
-}>>
-
-type RealProps =
-
-	& LinkableByIdProps
-	& LabelProps
-	& BaseInteractiveProps
-	& {
-		unstyle?: boolean
-	}
+<script>
 
-interface Props
-	extends
-	/** @vue-ignore */
-	Partial<Omit<
-		InputHTMLAttributes,
-		"class" | "readonly" | "disabled" | "onSumbit"
-	> & TailwindClassProp>,
-	/** @vue-ignore */
-	WrapperTypes,
-	RealProps
-{}
 </script>

package/dist/runtime/components/LibCheckbox/LibCheckbox.vue.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes, type InputHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js.js";
+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 {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    modelValue?: boolean;
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    submit: (val: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    modelValue?: boolean;
+}> & Readonly<{
+    onSubmit?: ((val: boolean) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    left?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};