@witchcraft/ui 0.1.1 → 0.1.3

package/dist/runtime/components/LibTable/LibTable.vue

@@ -1,7 +1,6 @@
 <template>
 <!-- Assumes no scrollbars on children -->
-<table :class="twMerge(
-  `table
+<table :class="twMerge(`table
 		table-fixed
 		border-separate
 		border-spacing-0
@@ -17,12 +16,12 @@
 		[&.resizable-cols-error]:cursor-not-allowed
 		[&.resizable-cols-error]:user-select-none
 		`,
-  cellBorder && `
+	cellBorder && `
 			[&_td]:border-neutral-500
 			[&_td:not(.last-row)]:border-b
 			[&_td:not(.first-col)]:border-l
 		`,
-  border && `
+	border && `
 			[&_thead_td]:bg-neutral-200
 			[&_td]:border-neutral-500
 			dark:[&_thead_td]:bg-neutral-800
@@ -32,14 +31,13 @@
 			[&_td.last-col]:border-r
 			[&_td.first-col]:border-l
 		`,
-  rounded && `
+	rounded &&`
 			[&_td.br]:rounded-br-sm
 			[&_td.bl]:rounded-bl-sm
 			[&_td.tr]:rounded-tr-sm
 			[&_td.tl]:rounded-tl-sm
-		`,
-  $attrs.class
-)"
+		`
+	, ($attrs as any).class)"
 	v-resizable-cols="resizableOptions"
 >
 	<thead v-if="header" class="table--header">
@@ -47,21 +45,25 @@
 			<template v-for="col,i of cols" :key="col">
 				<slot :name="`header-${col.toString()}`"
 					:class="[
-  extraClasses[`-1-${i}`],
-  'cell table--header-cell',
-  colConfig[col]?.resizable === false ? 'no-resize' : ''
-].join(' ')"
+						extraClasses[`-1-${i}`],
+						'cell table--header-cell',
+						(colConfig as any)[col]?.resizable === false
+							? 'no-resize'
+							: ''
+					].join(' ')"
 					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					:col-key="col"
 				>
 					<td :class="[
-  extraClasses[`-1-${i}`],
-  'cell table--header-cell',
-  colConfig[col]?.resizable === false ? 'no-resize' : ''
-].join(' ')"
+							extraClasses[`-1-${i}`] ,
+							'cell table--header-cell',
+							(colConfig as any)[col]?.resizable === false
+								? 'no-resize'
+								: ''
+						].join(' ')"
 						:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					>
-						{{ colConfig[col]?.name ?? col }}
+						{{ (colConfig as any)[col]?.name ?? col }}
 					</td>
 				</slot>
 			</template>
@@ -88,53 +90,87 @@
 </table>
 </template>
 
-<script setup>
-import { keys } from "@alanscodelog/utils/keys.js";
-import { computed, ref } from "vue";
-import { vResizableCols } from "../../directives/vResizableCols.js";
-import { twMerge } from "../../utils/twMerge.js";
+<!-- generic="T extends Record<string, any> -->"
+<script setup lang="ts" generic="T">
+import type { MakeRequired } from "@alanscodelog/utils"
+import { keys } from "@alanscodelog/utils/keys.js"
+import { computed, type PropType, ref, type TableHTMLAttributes } from "vue"
+
+import { vResizableCols } from "../../directives/vResizableCols.js"
+import type { ResizableOptions, TableColConfig } from "../../types/index.js"
+import { twMerge } from "../../utils/twMerge.js"
+import type { TailwindClassProp } from "../shared/props.js"
+
+
 defineOptions({
-  name: "lib-table"
-});
-const props = defineProps({
-  resizable: { type: Object, required: false, default: () => ({}) },
-  values: { type: Array, required: false, default: () => [] },
-  itemKey: { type: [String, Number, Symbol, Function], required: false, default: "" },
-  cols: { type: Array, required: false, default: () => [] },
-  rounded: { type: Boolean, required: false, default: true },
-  border: { type: Boolean, required: false, default: true },
-  cellBorder: { type: Boolean, required: false, default: true },
-  header: { type: Boolean, required: false, default: true },
-  colConfig: { type: null, required: false, default: () => ({}) }
-});
-const widths = ref([]);
-const resizableOptions = computed(() => ({
-  colCount: props.cols.length,
-  widths,
-  selector: ".cell",
-  ...props.resizable
-}));
-const getExtraClasses = (row, col, isHeader) => {
-  const res = {
-    bl: !isHeader && row === props.values.length - 1 && col === 0,
-    br: !isHeader && row === props.values.length - 1 && col === props.cols.length - 1,
-    tr: (isHeader || !props.header) && row === 0 && col === props.cols.length - 1,
-    tl: (isHeader || !props.header) && row === 0 && col === 0,
-    "first-row": (isHeader || !props.header) && row === 0,
-    "last-row": row === props.values.length - 1,
-    "first-col": col === 0,
-    "last-col": col === props.cols.length - 1
-  };
-  return keys(res).filter((key) => res[key]);
-};
-const extraClasses = computed(() => Object.fromEntries(
-  [...Array(props.values.length + 1).keys()].map((row) => [...Array(props.cols.length).keys()].map((col) => [
-    `${row - 1}-${col}`,
-    getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ")
-  ])).flat()
-));
-</script>
+	name: "lib-table",
+})
 
-<script>
+const props = withDefaults(defineProps<Props>(), {
+	resizable: () => ({}),
+	values: () => [] as T[],
+	itemKey: "",
+	cols: () => [] as (keyof T)[],
+	rounded: true,
+	border: true,
+	cellBorder: true,
+	header: true,
+	colConfig: () => ({}) ,
+})
 
+const widths = ref([])
+const resizableOptions = computed<MakeRequired<Partial<ResizableOptions>, "colCount" | "widths">>(() => ({
+	colCount: props.cols.length,
+	widths,
+	selector: ".cell",
+	...props.resizable,
+}))
+
+/* props.values.length instead of `props.values.length - 1` because we're creating an artificial first row for the header */
+const getExtraClasses = (row: number, col: number, isHeader: boolean): string[] => {
+	const res = {
+		bl: !isHeader && row === props.values.length - 1 && col === 0,
+		br: !isHeader && row === props.values.length - 1 && col === props.cols.length - 1,
+		tr: (isHeader || !props.header) && row === 0 && col === props.cols.length - 1,
+		tl: (isHeader || !props.header) && row === 0 && col === 0,
+		"first-row": (isHeader || !props.header) && row === 0,
+		"last-row": row === props.values.length - 1,
+		"first-col": col === 0,
+		"last-col": col === props.cols.length - 1,
+	}
+	return keys(res).filter(key => res[key])
+}
+
+const extraClasses = computed(() => Object.fromEntries([...Array(props.values.length + 1).keys()]
+	.map(row => [...Array(props.cols.length).keys()]
+		.map(col =>
+			[
+				`${row - 1}-${col}`,
+				getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" "),
+			]))
+	.flat(),
+))
+
+</script>
+<script lang="ts">
+// generic isn't working here :/
+type T = any
+	
+type RealProps = {
+	resizable?: Partial<ResizableOptions>
+	values?: T[]
+	itemKey?: keyof T | ((item: T) => string)
+	/** Let's the table know the shape of the data since values might be empty. */
+	cols?: (keyof T)[]
+	rounded?: boolean
+	border?: boolean
+	cellBorder?: boolean
+	header?: boolean
+	colConfig?: TableColConfig<T>
+}
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<TableHTMLAttributes,"class" | "readonly" | "disabled"> & TailwindClassProp>,
+	RealProps { }
 </script>

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+declare const meta: Meta<{}>;
+export default meta;
+type Story = StoryObj<{}>;
+export declare const Primary: Story;

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

@@ -0,0 +1,19 @@
+const meta = {
+  title: "Other/Reset",
+  args: {}
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: `
+			<h1>h1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h1>
+			<h2>h2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h2>
+			<h3>h3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h3>
+			<h4>h4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h4>
+			<h5>h5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h5>
+			<h6>h6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</h6>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper est at dui eleifend, et egestas libero gravida. Phasellus non erat pretium, commodo massa sit amet, accumsan nisl.</p>
+		`
+  })
+};

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+declare const meta: Meta<{}>;
+export default meta;
+type Story = StoryObj<{}>;
+export declare const Scrollbars: Story;
+export declare const TextareaResizer: Story;

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

@@ -0,0 +1,44 @@
+const meta = {
+  title: "Other/Scrolling",
+  args: {}
+};
+export default meta;
+export const Scrollbars = {
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: `
+		<div 
+			class="
+				relative
+				flex
+				flex-col
+				max-h-[300px]
+				max-w-[300px]
+				border-2
+				border-neutral-500
+			"
+			
+		>
+			<div 
+				class="overflow-auto"
+			>
+				<div class="h-[1000px] w-[1000px]"/>
+			</div>
+		</div>
+		`
+  })
+};
+export const TextareaResizer = {
+  render: (args) => ({
+    setup: () => ({ args }),
+    template: `
+			<textarea class="
+				border-2
+				border-neutral-500
+				min-w-[200px]
+				min-h-[200px]
+				[resize:both]
+			" />
+		`
+  })
+};

package/dist/runtime/components/Template/NAME.vue

@@ -1,28 +1,49 @@
+<!-- eslint-disable -->
 <template>
 <div :class="twMerge(`
 
-	`, $attrs.class)"
-	v-bind="{ ...$attrs, class: void 0 }"
+	`, ($attrs as any).class)"
+	v-bind="{...$attrs, class:undefined}"
 >
 	<slot/>
 </div>
 </template>
+<script setup  lang="ts">
+ 
+import { computed, type HTMLAttributes, onBeforeUnmount, onMounted, type PropType, reactive, type Ref, ref, watch } from "vue"
+
+import { twMerge } from "../../utils/twMerge.js"
+import { baseInteractiveProps, type TailwindClassProp } from "../shared/props.js"
+
 
-<script setup>
-import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
-import { twMerge } from "../../utils/twMerge.js";
-import { baseInteractiveProps } from "../shared/props.js";
 defineOptions({
-  name: "lib-name",
-  /* todo */
-  inheritAttrs: false
-});
-const el = ref(null);
-const modelValue = defineModel({ type: String, ...{ required: true } });
+	name: "lib-name", /* todo */
+	inheritAttrs: false,
+})
+
+
+// const props = defineProps<{}>({ })
+
+const el = ref<null | HTMLElement>(null)
+
+const modelValue = defineModel<string>({ required: true })
+
+
 </script>
 
-<script>
+<script lang="ts">
 export default {
-  name: "lib-name"
-};
+	name: "lib-name",
+}
+
+type RealProps = {
+}
+
+interface Props
+	extends
+	/** @vue-ignore */
+	Partial<Omit<HTMLAttributes, "class">
+		& TailwindClassProp
+		& RealProps
+	> { }
 </script>

package/dist/runtime/components/TestControls/TestControls.vue

@@ -7,10 +7,13 @@
 </div>
 </template>
 
-<script setup>
-import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue";
-defineOptions({ name: "test-controls" });
-defineProps({
-  showOutline: { type: Boolean, required: true }
-});
+<script setup lang="ts">
+import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue"
+
+defineOptions({ name: "test-controls" })
+defineProps< {
+	showOutline: boolean
+}>()
+
 </script>
+

package/dist/runtime/composables/useScrollNearContainerEdges.stories.d.ts

@@ -0,0 +1,7 @@
+import type { StoryObj } from "@storybook/vue3";
+declare const meta: {
+    title: string;
+};
+export default meta;
+type Story = StoryObj;
+export declare const Primary: Story;

package/dist/runtime/composables/useScrollNearContainerEdges.stories.js

@@ -0,0 +1,85 @@
+import { onMounted, ref } from "vue";
+import { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
+import { twMerge } from "../utils/twMerge.js";
+const meta = {
+  title: "Composables/ScrollNearContainerEdges"
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    setup: () => {
+      const containerEl = ref(null);
+      const {
+        resetScrollIndicator,
+        scrollEdges,
+        endScroll,
+        scrollIndicator,
+        isScrolling
+      } = useScrollNearContainerEdges({
+        containerEl,
+        scrollMargin: 20,
+        outerScrollMargin: 20
+      });
+      const pos = ref({ x: 0, y: 0 });
+      onMounted(() => {
+        pos.value.x = containerEl.value.getBoundingClientRect().left;
+        pos.value.y = containerEl.value.getBoundingClientRect().top;
+      });
+      const moveDrag = (e) => {
+        pos.value.x = e.clientX;
+        pos.value.y = e.clientY;
+        scrollEdges(e.clientX, e.clientY);
+      };
+      const endDrag = (_e) => {
+        endScroll();
+        document.removeEventListener("mousemove", moveDrag);
+        document.removeEventListener("mouseup", endDrag);
+      };
+      const startDrag = (_e) => {
+        document.addEventListener("mousemove", moveDrag);
+        document.addEventListener("mouseup", endDrag);
+      };
+      return {
+        args,
+        containerEl,
+        resetScrollIndicator,
+        scrollEdges,
+        endScroll,
+        startDrag,
+        scrollIndicator,
+        isScrolling,
+        twMerge,
+        pos
+      };
+    },
+    template: `
+		<div>
+			<p>Scroll the container by dragging the red box (which represents the dragging mouse position).</p>
+			<p>It should drag slow, then faster as the mouse nears the edges and scroll indicators should appear on the scrolling edges.</p>
+		</div>
+		<div 
+			:class="twMerge(
+				'relative flex flex-col max-h-[300px] max-w-[300px] border-2 border-red-500',
+				isScrolling && 'after:content-[\\'\\'] after:absolute after:inset-0 after:border-transparent after:border-[15px]', 
+				scrollIndicator.right && 'after:border-r-accent-500/60',
+				scrollIndicator.down && 'after:border-b-accent-500/60',
+				scrollIndicator.left && 'after:border-l-accent-500/60',
+				scrollIndicator.up && 'after:border-t-accent-500/60',
+			)"
+			
+		>
+			<div 
+				class="overflow-auto"
+				ref="containerEl"
+			>
+				<div class="h-[1000px] w-[1000px]"/>
+				<div
+					@mousedown="startDrag" 
+					:style="\`top:\${pos.y}px; left:\${pos.x}px;\`"
+					class="h-[20px] w-[20px] -ml-[10px] -mt-[10px] bg-red-500 cursor-move fixed"
+				></div>
+			</div>
+		</div>
+		`
+  })
+};

package/dist/types.d.mts

@@ -1,3 +1,7 @@
-export { default } from './module.mjs'
+import type { NuxtModule } from '@nuxt/schema'
 
-export { type ModuleOptions } from './module.mjs'
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@witchcraft/ui",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"description": "Vue component library.",
 	"type": "module",
 	"main": "./dist/runtime/main.lib.js",
@@ -65,8 +65,7 @@
 		"failOnWarn": false
 	},
 	"scripts": {
-		"//prepare": "echo Needed so that if we pull the package from git it will get built and installed properly.",
-		"prepare": "husky && pnpm gen:theme && pnpm build",
+		"prepare": "husky && pnpm gen:theme && cd playground && pnpm i",
 		"build": "nuxt-module-build prepare && nuxt-module-build build && nuxi generate playground",
 		"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
 		"dev": "nuxi dev playground",
@@ -79,7 +78,7 @@
 		"doc:dev": "pnpm storybook",
 		"lint:eslint": "eslint \"src/**/*.{js,ts,vue,cjs}\" \"*.{js,ts}\" --max-warnings=5 --report-unused-disable-directives",
 		"lint:types": "vue-tsc --noEmit --pretty --project tsconfig.types.json",
-		"lint:commits": "commitlint --from $(git rev-list --max-parents=0 HEAD) --to HEAD --verbose",
+		"lint:commits": "commitlint --from-last-tag --to HEAD --verbose",
 		"lint:imports": "madge --circular --extensions ts ./src",
 		"lint": "pnpm lint:types && pnpm lint:eslint",
 		"//actions:debug": "echo For debugging github build action locally with nektos/act. Requires act and docker. Note: Cache will never work locally because of https://github.com/nektos/act/issues/285",
@@ -88,7 +87,9 @@
 		"gen:theme": "echo src/runtime/build/generateTheme.ts"
 	},
 	"peerDependencies": {
+		"@iconify/json": "^2.2.323",
 		"tailwindcss": "^4.0.17",
+		"unplugin-icons": "^22.1.0",
 		"vue": "^3.2.47"
 	},
 	"peerDependenciesMeta": {
@@ -129,7 +130,7 @@
 		"@commitlint/cli": "^19.3.0",
 		"@internationalized/date": "^3.1.0",
 		"@nuxt/eslint-config": "^1.3.0",
-		"@nuxt/module-builder": "^1.0.2",
+		"@nuxt/module-builder": "^0.8.4",
 		"@nuxtjs/i18n": "^9.5.3",
 		"@playwright/test": "=1.50.0",
 		"@rollup/plugin-node-resolve": "^16.0.1",
@@ -201,5 +202,10 @@
 	},
 	"publishConfig": {
 		"access": "public"
+	},
+	"pnpm": {
+		"overrides": {
+			"rollup": "=4.45.0"
+		}
 	}
 }

package/src/module.ts

@@ -8,7 +8,8 @@ import {
 	useLogger,
 } from "@nuxt/kit"
 import tailwindcss from "@tailwindcss/vite"
-import { addImportsCustom, globFiles } 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/src/runtime/assets/utils.css

@@ -37,17 +37,17 @@
 }
 
 @utility focus-outline-within {
-	@apply outlined-within:outline-2 outlined-within:outline-accent-500 outlined-within:outline-offset-2;
+	@reference 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;
+	@reference outlined:outline-2 outlined:outline-accent-500 outlined:outline-offset-2;
 }
 @utility focus-outline-no-offset {
-	@apply outlined:outline-2 outlined:outline-accent-500;
+	@reference outlined:outline-2 outlined:outline-accent-500;
 }
 @utility focus-outline-hidden {
-	@apply outlined:outline-none;
+	@reference outlined:outline-none;
 }
 
 /* .bg-squares-gradient { */
@@ -217,7 +217,7 @@
 }
 
 @utility bg-transparency-squares {
-	@apply bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6;
+	@reference bg-squares-gradient square-light-white square-dark-neutral-300 square-size-6;
 }
 
 @utility link-like {

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

@@ -185,15 +185,11 @@
 
 <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 { type ButtonHTMLAttributes,computed, 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, type ButtonProps,getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp, type WrapperProps } from "../shared/props.js"
+import { type BaseInteractiveProps, baseInteractivePropsDefaults, type ButtonProps,getFallbackId, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js"
 
 
 const $attrs = useAttrs()

package/src/runtime/nuxt/plugins/vue-plugin.ts

@@ -14,6 +14,6 @@ export default defineNuxtPlugin({
 		? (await Promise.all(config.directives.map(async (name: string) => (import(`../../directives/${name}.ts`))))).map((_: any) => Object.values(_)[0])
 		// @ts-expect-error ts filetype needed for nuxt
 		: await import(`../../directives/index.ts`))
-		registerDirectives(app, Object.values(directives))
+		registerDirectives(app as any, Object.values(directives))
 	},
 })

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

@@ -1,5 +0,0 @@
-type __VLS_Props = {
-    value: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

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

@@ -1,21 +0,0 @@
-import { type HTMLAttributes } from "vue";
-/**
- * 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">> {
-}
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};