@witchcraft/ui 0.1.1 → 0.1.3

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -0,0 +1,36 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const knownDirectives: readonly ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"];
+declare module "@nuxt/schema" {
+    interface PublicRuntimeConfig {
+        witchcraftUi: Pick<ModuleOptions, "directives">;
+    }
+}
+interface ModuleOptions {
+    /**
+     * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
+     *
+     * @default true
+     */
+    includeUnpluginIconsPlugins?: boolean;
+    directives: (typeof knownDirectives[number])[];
+    /**
+        * Which components (without a prefix) to register for auto-importing globally.
+        */
+    globalComponents: string[];
+    /**
+     * @default "W"
+     */
+    componentPrefix: string;
+    debug?: boolean;
+    /**
+     * @default "~/assets/css/tailwind.css" if it exists.
+     */
+    mainCssFile?: string;
+    /** @internal */
+    _playgroundWorkaround?: boolean;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/module-builder": "0.8.4",
     "unbuild": "3.6.0"
   }
 }

package/dist/module.mjs

@@ -1,7 +1,8 @@
 import { indent, crop } from '@alanscodelog/utils';
 import { createResolver, defineNuxtModule, useLogger, addTemplate, addComponent, addImports, installModule, addTypeTemplate } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
-import { globFiles, addImportsCustom } from '@witchcraft/nuxt-utils/utils';
+import { addImportsCustom } from '@witchcraft/nuxt-utils/utils/addImportsCustom.js';
+import { globFiles } from '@witchcraft/nuxt-utils/utils/globFiles.js';
 import { defu } from 'defu';
 import fs from 'fs';
 import { themeAsTailwindCss } from 'metamorphosis/tailwind';

package/dist/runtime/assets/utils.css

@@ -1 +1 @@
-@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2}@utility focus-outline{@apply outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2}@utility focus-outline-no-offset{@apply outlined:outline-2 outlined:outline-accent-500}@utility focus-outline-hidden{@apply outlined:outline-none}@utility bg-squares-gradient{--_square:var(--squareSize,5px);--_double_square:calc(var(--_square)*2);--_light_square:var(--lightSquare,var(--color-white));--_dark_square:var(--darkSquare,var(--color-black));background-color:var(--_light_square);background:repeating-conic-gradient(var(--_dark_square) 0 25%,var(--_light_square) 0 50%) 50% /var(--_double_square) var(--_double_square)}@utility square-light-*{--lightSquare:--value(--color- *)}@utility square-dark-*{--darkSquare:--value(--color- *)}@utility square-size-*{--squareSize:calc(--value(integer) * 1px)}@utility bg-bars-gradient{--_bg_color:var(--bars-bg-color,var(--color-accent-700));--_fg_color:var(--bars-fg-color,var(--color-accent-800));--_angle:var(--bars-angle,45deg);--_fg_width:var(--bars-fg-width,50%);--_bg_width:calc(100% - var(--_fg_width));background-color:var(--_bg_color);--_pos_1:calc(var(--_bg_width)/2);--_pos_2:calc(var(--_bg_width)/2 + var(--_fg_width)/2);--_pos_3:calc(var(--_bg_width) + var(--_fg_width)/2);background-image:repeating-linear-gradient(var(--_angle),var(--_bg_color),var(--_bg_color) var(--_pos_1),var(--_fg_color) var(--_pos_1),var(--_fg_color) var(--_pos_2),var(--_bg_color) var(--_pos_2),var(--_bg_color) var(--_pos_3),var(--_fg_color) var(--_pos_3),var(--_fg_color))}@utility bars-angle-*{--bars-angle:var(--value(integer) * 1deg)}@utility bars-fg-*{--bars-fg-color:--value(--color-*)}@utility bars-bg-*{--bars-bg-color:--value(--color-*)}@utility bars-w-*{--bars-fg-width:calc(--value(integer) * 1%, 50%)}@utility scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}@utility styled-scrollbar{--_scrollbar_width:var(--scrollbar-width,calc(var(--spacing)*3));--_scrollbar_border_width:var(--scrollbar-border-width,calc(var(--spacing)/2));--_scrollbar_color:var(--scrollbar-color,--alpha(var(--color-accent-500)/40%));--_scrollbar_hover_color:var(--scrollbar-hover-color,--alpha(var(--color-accent-500)/80%));--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-bg));.dark &{--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-fg))}&::-webkit-scrollbar{height:var(--_scrollbar_width);width:var(--_scrollbar_width)}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track{background-color:transparent}&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track{border-radius:var(--_scrollbar_width)}&::-webkit-scrollbar-thumb{background-color:var(--_scrollbar_color);border:var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color)}&::-webkit-scrollbar-thumb:hover{cursor:pointer}&::-webkit-scrollbar-thumb:active,&::-webkit-scrollbar-thumb:hover{background-color:var(--_scrollbar_hover_color);border-radius:var(--_scrollbar_width)}}@utility styled-scrollbar-w-*{--scrollbar-width:--value(integer)}@utility styled-scrollbar-border-w-*{--scrollbar-border-width:--value(integer)}@utility styled-scrollbar-*{--scrollbar-color:--value(--color-*)}@utility styled-scrollbar-bg-*{--scrollbar-bg-color:--value(--color-*)}@utility styled-resizer{--_resizer_width:var(--resizer-width,8px);--_resizer_color:var(--resizer-color,var(--color-neutral-300));.dark &{--_resizer_color:var(--resizer-color,var(--color-neutral-700))}&::-webkit-resizer{border-bottom-color:var(--_resizer_color);border-left-color:transparent;border-right-color:var(--_resizer_color);border-style:solid;border-top-color:transparent;border-width:var(--_resizer_width)}}@utility styled-resizer-w-*{--resizer-width:--value(integer)}@utility styled-resizer-color-*{--resizer-color:--value(--color-*)}@utility content-vertical-holder{--tw-content:"\200b";content:var(--tw-content)}@utility no-touch-action{touch-action:none}@utility bg-transparency-squares{@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6}@utility link-like{@apply cursor-pointer hover:text-accent-500}
+@custom-variant dark (&:where(.dark, .dark *));@utility focus-outline-within{@reference 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}@utility focus-outline-no-offset{@reference outlined:outline-2 outlined:outline-accent-500}@utility focus-outline-hidden{@reference outlined:outline-none}@utility bg-squares-gradient{--_square:var(--squareSize,5px);--_double_square:calc(var(--_square)*2);--_light_square:var(--lightSquare,var(--color-white));--_dark_square:var(--darkSquare,var(--color-black));background-color:var(--_light_square);background:repeating-conic-gradient(var(--_dark_square) 0 25%,var(--_light_square) 0 50%) 50% /var(--_double_square) var(--_double_square)}@utility square-light-*{--lightSquare:--value(--color- *)}@utility square-dark-*{--darkSquare:--value(--color- *)}@utility square-size-*{--squareSize:calc(--value(integer) * 1px)}@utility bg-bars-gradient{--_bg_color:var(--bars-bg-color,var(--color-accent-700));--_fg_color:var(--bars-fg-color,var(--color-accent-800));--_angle:var(--bars-angle,45deg);--_fg_width:var(--bars-fg-width,50%);--_bg_width:calc(100% - var(--_fg_width));background-color:var(--_bg_color);--_pos_1:calc(var(--_bg_width)/2);--_pos_2:calc(var(--_bg_width)/2 + var(--_fg_width)/2);--_pos_3:calc(var(--_bg_width) + var(--_fg_width)/2);background-image:repeating-linear-gradient(var(--_angle),var(--_bg_color),var(--_bg_color) var(--_pos_1),var(--_fg_color) var(--_pos_1),var(--_fg_color) var(--_pos_2),var(--_bg_color) var(--_pos_2),var(--_bg_color) var(--_pos_3),var(--_fg_color) var(--_pos_3),var(--_fg_color))}@utility bars-angle-*{--bars-angle:var(--value(integer) * 1deg)}@utility bars-fg-*{--bars-fg-color:--value(--color-*)}@utility bars-bg-*{--bars-bg-color:--value(--color-*)}@utility bars-w-*{--bars-fg-width:calc(--value(integer) * 1%, 50%)}@utility scrollbar-hidden{-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none}}@utility styled-scrollbar{--_scrollbar_width:var(--scrollbar-width,calc(var(--spacing)*3));--_scrollbar_border_width:var(--scrollbar-border-width,calc(var(--spacing)/2));--_scrollbar_color:var(--scrollbar-color,--alpha(var(--color-accent-500)/40%));--_scrollbar_hover_color:var(--scrollbar-hover-color,--alpha(var(--color-accent-500)/80%));--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-bg));.dark &{--_scrollbar_bg_color:var(--scrollbar-bg-color,var(--color-fg))}&::-webkit-scrollbar{height:var(--_scrollbar_width);width:var(--_scrollbar_width)}&::-webkit-scrollbar-corner,&::-webkit-scrollbar-track{background-color:transparent}&::-webkit-scrollbar-thumb,&::-webkit-scrollbar-track{border-radius:var(--_scrollbar_width)}&::-webkit-scrollbar-thumb{background-color:var(--_scrollbar_color);border:var(--_scrollbar_border_width) solid var(--_scrollbar_bg_color)}&::-webkit-scrollbar-thumb:hover{cursor:pointer}&::-webkit-scrollbar-thumb:active,&::-webkit-scrollbar-thumb:hover{background-color:var(--_scrollbar_hover_color);border-radius:var(--_scrollbar_width)}}@utility styled-scrollbar-w-*{--scrollbar-width:--value(integer)}@utility styled-scrollbar-border-w-*{--scrollbar-border-width:--value(integer)}@utility styled-scrollbar-*{--scrollbar-color:--value(--color-*)}@utility styled-scrollbar-bg-*{--scrollbar-bg-color:--value(--color-*)}@utility styled-resizer{--_resizer_width:var(--resizer-width,8px);--_resizer_color:var(--resizer-color,var(--color-neutral-300));.dark &{--_resizer_color:var(--resizer-color,var(--color-neutral-700))}&::-webkit-resizer{border-bottom-color:var(--_resizer_color);border-left-color:transparent;border-right-color:var(--_resizer_color);border-style:solid;border-top-color:transparent;border-width:var(--_resizer_width)}}@utility styled-resizer-w-*{--resizer-width:--value(integer)}@utility styled-resizer-color-*{--resizer-color:--value(--color-*)}@utility content-vertical-holder{--tw-content:"\200b";content:var(--tw-content)}@utility no-touch-action{touch-action:none}@utility bg-transparency-squares{@reference bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6}@utility link-like{@apply cursor-pointer hover:text-accent-500}

package/dist/runtime/components/Aria/Aria.vue

@@ -2,11 +2,15 @@
 <div tabindex="0">{{ value }}</div>
 </template>
 
-<script setup>
-defineOptions({ name: "aria" });
-defineProps({
-  value: { type: String, required: true }
-});
+<script  setup lang="ts">
+import type { PropType } from "vue"
+
+
+defineOptions({ name: "aria" })
+defineProps<{
+	// eslint-disable-next-line vue/no-restricted-props
+	value: string
+}>()
 </script>
 
 <style scoped>

package/dist/runtime/components/Focus.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+/**
+ * For testing the focus styles. The (still WIP) idea is that normally the outlined class is set by whether the user is using the keyboard or not. When true, outlines generated by the focus-outline-* or outlined-* utilities are allowed (they might not always appear since most components have focus-visible styles), when false, they are not allowed, but components can still set custom focus styles that will always appear. Either or is usually not a good idea unless all components set custom focus styles. For something like a web app, focus-visible should be allowed. For an app, this setup allows that to be configurable.
+ */
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<{}>;
+export declare const Primary: Story;
+export declare const OutlineForcedTrue: Story;
+export declare const OutlineFalse: Story;
+export declare const AlwaysAllowFocusVisible: Story;

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

@@ -0,0 +1,53 @@
+import { onMounted, ref } from "vue";
+import * as components from "./index.js";
+const meta = {
+  title: "Other/Focus",
+  args: {
+    outline: true
+  }
+};
+const template = `
+			<div class="focus-outline-no-offset border border-accent-600" tabindex="0">focus-outline-no-offset (outlined i.e. outlined-focus-visible)</div>
+			<div class="focus-outline border border-accent-600" tabindex="0">focus-outline (outlined i.e. outlined-focus-visible)</div>
+			<div class="outline-hidden outlined-focus:border-danger-500 border border-accent-600" tabindex="0">outlined-focus</div>
+			<div class="outline-hidden outlined-within:border-danger-500 border border-accent-600" >
+				outlined-within<div tabindex="0">Inner</div>
+			</div>
+			<div class="outline-hidden focus:border-danger-500 border border-accent-600" tabindex="0">Has Manual Focus Classes</div>
+		`;
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    setup: () => {
+      const el = ref(null);
+      onMounted(() => {
+      });
+      return { ...args, el };
+    },
+    template
+  })
+};
+export const OutlineForcedTrue = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    forceOutline: true
+  }
+};
+export const OutlineFalse = {
+  ...Primary,
+  args: {
+    ...Primary.args,
+    outline: false
+  }
+};
+export const AlwaysAllowFocusVisible = {
+  render: (args) => ({
+    components,
+    setup: () => args,
+    template: `
+		<div class="outlined-visible group">${template}</div>
+		`
+  })
+};

package/dist/runtime/components/Icon/Icon.vue

@@ -1,23 +1,43 @@
 <template>
 <div
 	:class="twMerge('icon inline-block', $attrs?.class)"
-	v-bind="{ ...$attrs, class: void 0 }"
+	v-bind="{...$attrs, class:undefined}"
 >
 	<slot/>
 </div>
 </template>
 
-<script setup>
-import { computed, useAttrs } from "vue";
-import { twMerge } from "../../utils/twMerge.js";
+<script setup lang="ts">
+import { computed, type HTMLAttributes,useAttrs } from "vue"
+
+import { twMerge } from "../../utils/twMerge.js"
+
 defineOptions({
-  name: "icon",
-  inheritAttrs: false
-});
-const $attrs = useAttrs();
-const props = defineProps({});
+	name: "icon",
+	inheritAttrs: false,
+})
+
+
+const $attrs = useAttrs() as any
+
+const props = defineProps<Props>()
+
+
 </script>
 
-<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>
+ * ``
+ */
 
+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

@@ -1,8 +1,7 @@
 <template>
 <button
 	:id="id ?? fallbackId"
-	:class="!$attrs.unstyle && twMerge(
-  `
+	:class="!($attrs as any).unstyle && twMerge(`
 		button
 		flex
 		cursor-pointer
@@ -23,8 +22,8 @@
 		dark:disabled:text-neutral-500
 		dark:disabled:hover:text-neutral-500
 	`,
-  !color && `active:text-neutral-800`,
-  border && `
+		!color && `active:text-neutral-800` /* todo for colors */,
+		border && `
 			transition-all
 			bg-neutral-100
 			dark:bg-neutral-900
@@ -61,37 +60,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
@@ -106,7 +105,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
@@ -120,7 +119,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
@@ -134,11 +133,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
@@ -153,28 +152,28 @@
 			dark:hover:border-accent-700
 			dark:hover:shadow-accent-900/50
 		`,
-  $attrs?.class
-)"
-	:type="$attrs.type"
+		($attrs as any)?.class
+	)"
+	:type="$attrs.type as any"
 	:tabindex="0"
 	:disabled="disabled"
 	:data-border="border"
 	:data-color="color"
 	:aria-disabled="disabled"
 	v-bind="{
-  ...autoTitle,
-  ...$attrs,
-  class: void 0,
-  ...ariaLabel
-}"
+		...autoTitle,
+		...$attrs,
+		class: undefined,
+		...ariaLabel,
+	}"
 >
-	<slot name="label" v-bind="{ id: `label-${id ?? fallbackId}`, classes: 'button--label pointer-events-none flex flex-1 items-center justify-center gap-1' }">
+	<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 }"
+				v-bind="{ label}"
 			>
-				<span v-if="label && !isBlank(label)">
+				<span v-if="label && !isBlank(label!)">
 					{{ label }}
 				</span>
 			</slot>
@@ -184,40 +183,55 @@
 </button>
 </template>
 
-<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();
+<script setup  lang="ts">
+import { isBlank } from "@alanscodelog/utils/isBlank.js"
+import { type ButtonHTMLAttributes,computed, useAttrs } from "vue"
+
+import { useAriaLabel } from "../../composables/useAriaLabel.js"
+import { twMerge } from "../../utils/twMerge.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, type ButtonProps,getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
+
+
+const $attrs = useAttrs()
+
+
 defineOptions({
-  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);
+	name: "lib-button",
+})
+
+const fallbackId = getFallbackId()
+
+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 : void 0
-}));
+	title: props.autoTitleFromAria
+		? ($attrs["aria-label"] ?? props.label) as string
+		: undefined,
+}))
+
 </script>
 
-<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?
+		"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
+  }
+};