@thasmo/ui 1.0.0

package/README.md

@@ -0,0 +1,11 @@
+# UI
+
+> Personal UI.
+
+---
+
+**install**
+
+```sh
+pnpm add @thasmo/ui
+```

package/dist/preset.d.ts

@@ -0,0 +1,6 @@
+import { Preset } from 'unocss';
+
+declare function preset(): Preset;
+export default preset;
+
+export { }

package/dist/preset.js

@@ -0,0 +1,71 @@
+import { definePreset as l, transformerVariantGroup as x, presetWind4 as d, presetIcons as f } from "unocss";
+const z = l(() => ({
+  name: "basic",
+  presets: [
+    d({
+      preflights: {
+        reset: !0
+      }
+    }),
+    f()
+  ],
+  transformers: [x()]
+})), F = 320, S = 1, h = 1.125, y = 1920, g = 1.25, $ = 1.25;
+function e(r, i = F, t = S, n = h, s = y, c = g, p = $) {
+  const o = t * n ** r, a = c * p ** r, m = (a - o) / ((s - i) / 16), u = -i / 16 * m + o;
+  return `clamp(${o.toFixed(3)}rem, ${u.toFixed(3)}rem + ${(m * 100).toFixed(3)}vw, ${a.toFixed(3)}rem)`;
+}
+function D() {
+  return {
+    name: "thasmo-ui",
+    presets: [
+      z()
+    ],
+    layers: {
+      theme: 1
+    },
+    outputToCssLayers: !0,
+    theme: {
+      fontFamily: {
+        sans: "Fira Sans",
+        serif: "Sentient"
+      },
+      breakpoint: {
+        lg: "1400px",
+        md: "1000px",
+        sm: "600px"
+      },
+      colors: {
+        primary: {
+          DEFAULT: "#27374D"
+        }
+      },
+      text: {
+        sizes: {
+          heading: {
+            1: e(5),
+            2: e(4),
+            3: e(3),
+            4: e(2),
+            5: e(1),
+            6: e(0)
+          },
+          text: {
+            regular: e(0),
+            small: e(-1)
+          }
+        }
+      }
+    },
+    rules: [
+      [/^fluid-([^-]+)-([^-]+)$/, (r, { theme: i }) => {
+        const [, t, n] = r, s = i.text?.sizes;
+        if (t && n && s && s[t] && s[t][n])
+          return { "font-size": s[t][n] };
+      }]
+    ]
+  };
+}
+export {
+  D as default
+};

package/dist/ui.css

@@ -0,0 +1 @@
+@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--un-leading:initial;--un-text-opacity:100%;--un-bg-opacity:100%}}@property --un-text-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}@property --un-leading{syntax:"*";inherits:false;}@property --un-bg-opacity{syntax:"<percentage>";inherits:false;initial-value:100%;}:root,:host{--leading-snug: 1.375;--spacing: .25rem;--font-serif: ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-sans: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--leading-tight: 1.25;--leading-none: 1;--colors-white: #fff;--colors-gray-900: oklch(21% .034 264.665);--colors-gray-800: oklch(27.8% .033 256.848);--colors-gray-600: oklch(44.6% .03 256.802);--colors-gray-300: oklch(87.2% .01 258.338);--colors-gray-200: oklch(92.8% .006 264.531);--colors-gray-700: oklch(37.3% .034 259.733);--colors-gray-100: oklch(96.7% .003 264.542);--font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--default-font-family: var(--font-sans);--default-monoFont-family: var(--font-mono)}*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var( --default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" );font-feature-settings:var(--default-font-featureSettings, normal);font-variation-settings:var(--default-font-variationSettings, normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var( --default-monoFont-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace );font-feature-settings:var(--default-monoFont-featureSettings, normal);font-variation-settings:var(--default-monoFont-variationSettings, normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden~=until-found])){display:none!important}.i-ri-arrow-right-up-long-line{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m5.636 19.778l-1.414-1.414L15.657 6.93h-5.586v-2h9v9h-2V8.343z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em}.i-ri-hashtag{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m7.784 14l.42-4H4V8h4.415l.525-5h2.011l-.525 5h3.989l.525-5h2.011l-.525 5H20v2h-3.784l-.42 4H20v2h-4.415l-.525 5h-2.011l.525-5H9.585l-.525 5H7.049l.525-5H4v-2zm2.011 0h3.99l.42-4h-3.99z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;width:1em;height:1em}.fluid-heading-1{font-size:clamp(1.802rem,1.399rem + 2.013vw,3.815rem)}.fluid-heading-2{font-size:clamp(1.602rem,1.312rem + 1.45vw,3.052rem)}.fluid-heading-3{font-size:clamp(1.424rem,1.22rem + 1.018vw,2.441rem)}.fluid-heading-4{font-size:clamp(1.266rem,1.128rem + .688vw,1.953rem)}.fluid-heading-5{font-size:clamp(1.125rem,1.038rem + .438vw,1.563rem)}.fluid-heading-6,.fluid-text-regular{font-size:clamp(1rem,.95rem + .25vw,1.25rem)}.fluid-text-small{font-size:clamp(.889rem,.867rem + .111vw,1rem)}.text-1\.25rem{font-size:1.25rem}.text-1\.5rem{font-size:1.5rem}.text-1rem{font-size:1rem}.dark .dark\:text-gray-200{color:color-mix(in srgb,var(--colors-gray-200) var(--un-text-opacity),transparent)}.dark .dark\:text-gray-300{color:color-mix(in srgb,var(--colors-gray-300) var(--un-text-opacity),transparent)}.dark .dark\:text-gray-900{color:color-mix(in srgb,var(--colors-gray-900) var(--un-text-opacity),transparent)}.text-gray-600{color:color-mix(in srgb,var(--colors-gray-600) var(--un-text-opacity),transparent)}.text-gray-800{color:color-mix(in srgb,var(--colors-gray-800) var(--un-text-opacity),transparent)}.text-white{color:color-mix(in srgb,var(--colors-white) var(--un-text-opacity),transparent)}.leading-0{--un-leading:0;line-height:0}.leading-none{--un-leading:var(--leading-none);line-height:var(--leading-none)}.leading-snug{--un-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--un-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-500{--un-font-weight:500;font-weight:500}.font-sans{font-family:var(--font-sans)}.font-serif{font-family:var(--font-serif)}.p-0\.5rem{padding:.5rem}.p-y-0\.5em,.py-0\.5em{padding-block:.5em}.px-0\.5em{padding-inline:.5em}.px-1\.25em{padding-inline:1.25em}.px-2rem{padding-inline:2rem}.py-0\.125em{padding-block:.125em}.py-0\.75rem{padding-block:.75rem}.p-l-1rem{padding-left:1rem}.p-r-1rem{padding-right:1rem}.text-align-center{text-align:center}.align-middle{vertical-align:middle}.rounded-0\.25rem{border-radius:.25rem}.rounded-full{border-radius:calc(infinity * 1px)}.bg-current{background-color:currentColor}.bg-gray-300{background-color:color-mix(in srgb,var(--colors-gray-300) var(--un-bg-opacity),transparent)}.bg-gray-900{background-color:color-mix(in srgb,var(--colors-gray-900) var(--un-bg-opacity),transparent)}.dark .dark\:bg-gray-100{background-color:color-mix(in srgb,var(--colors-gray-100) var(--un-bg-opacity),transparent)}.dark .dark\:bg-gray-700{background-color:color-mix(in srgb,var(--colors-gray-700) var(--un-bg-opacity),transparent)}.dark .dark\:hover\:bg-gray-300:hover{background-color:color-mix(in srgb,var(--colors-gray-300) var(--un-bg-opacity),transparent)}.hover\:bg-gray-700:hover{background-color:color-mix(in srgb,var(--colors-gray-700) var(--un-bg-opacity),transparent)}.opacity-25{opacity:25%}.opacity-50{opacity:50%}.group\/link:hover .group-hover\/link\:opacity-100,.group\/link:focus .group-focus\/link\:opacity-100{opacity:100%}.group\/link:hover .group-hover\/link\:underline{text-decoration-line:underline}.decoration-2px{text-decoration-thickness:2px}.underline-offset-0\.25em{text-underline-offset:.25em}.flex{display:flex}.inline-flex{display:inline-flex}.shrink-0{flex-shrink:0}.grow-0{flex-grow:0}.grow-1{flex-grow:1}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.gap-0{gap:calc(var(--spacing) * 0)}.gap-0\.125em{gap:.125em}.gap-0\.25em{gap:.25em}.gap-0\.5em{gap:.5em}.gap-0\.5rem{gap:.5rem}.gap-1em{gap:1em}.gap-1rem{gap:1rem}.gap-2\.25rem{gap:2.25rem}.h-3px{height:3px}.min-w-fit{min-width:fit-content}.w-full{width:100%}.aspect-square{aspect-ratio:1/1}.inline-block{display:inline-block}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.items-start{align-items:flex-start}.items-center{align-items:center}.bottom-0\.1em{bottom:.1em}.justify-center{justify-content:center}.pos-relative{position:relative}.mask-center{-webkit-mask-position:center;mask-position:center}.mask-no-repeat{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.mask-contain{-webkit-mask-size:contain;mask-size:contain}@layer theme{.dark .dark\:layer-theme\:text-gray-100{color:color-mix(in srgb,var(--colors-gray-100) var(--un-text-opacity),transparent)}.dark .layer-theme\:dark\:text-gray-300{color:color-mix(in srgb,var(--colors-gray-300) var(--un-text-opacity),transparent)}.layer-theme\:text-gray-600{color:color-mix(in srgb,var(--colors-gray-600) var(--un-text-opacity),transparent)}.layer-theme\:text-gray-900{color:color-mix(in srgb,var(--colors-gray-900) var(--un-text-opacity),transparent)}.dark .dark\:layer-theme\:bg-gray-800,.dark .layer-theme\:dark\:bg-gray-800{background-color:color-mix(in srgb,var(--colors-gray-800) var(--un-bg-opacity),transparent)}.layer-theme\:bg-gray-200{background-color:color-mix(in srgb,var(--colors-gray-200) var(--un-bg-opacity),transparent)}.dark .dark\:layer-theme\:hover\:bg-gray-700:hover{background-color:color-mix(in srgb,var(--colors-gray-700) var(--un-bg-opacity),transparent)}.layer-theme\:hover\:bg-gray-300:hover{background-color:color-mix(in srgb,var(--colors-gray-300) var(--un-bg-opacity),transparent)}}@media print{.print\:gap-1\.25rem{gap:1.25rem}.print\:hidden{display:none}}@supports (color: color-mix(in lab,red,red)){.dark .dark\:text-gray-200{color:color-mix(in oklab,var(--colors-gray-200) var(--un-text-opacity),transparent)}.dark .dark\:text-gray-300{color:color-mix(in oklab,var(--colors-gray-300) var(--un-text-opacity),transparent)}.dark .dark\:text-gray-900{color:color-mix(in oklab,var(--colors-gray-900) var(--un-text-opacity),transparent)}.text-gray-600{color:color-mix(in oklab,var(--colors-gray-600) var(--un-text-opacity),transparent)}.text-gray-800{color:color-mix(in oklab,var(--colors-gray-800) var(--un-text-opacity),transparent)}.text-white{color:color-mix(in oklab,var(--colors-white) var(--un-text-opacity),transparent)}.bg-gray-300{background-color:color-mix(in oklab,var(--colors-gray-300) var(--un-bg-opacity),transparent)}.bg-gray-900{background-color:color-mix(in oklab,var(--colors-gray-900) var(--un-bg-opacity),transparent)}.dark .dark\:bg-gray-100{background-color:color-mix(in oklab,var(--colors-gray-100) var(--un-bg-opacity),transparent)}.dark .dark\:bg-gray-700{background-color:color-mix(in oklab,var(--colors-gray-700) var(--un-bg-opacity),transparent)}.dark .dark\:hover\:bg-gray-300:hover{background-color:color-mix(in oklab,var(--colors-gray-300) var(--un-bg-opacity),transparent)}.hover\:bg-gray-700:hover{background-color:color-mix(in oklab,var(--colors-gray-700) var(--un-bg-opacity),transparent)}}@supports (color: color-mix(in lab,red,red)){@layer theme{.dark .dark\:layer-theme\:text-gray-100{color:color-mix(in oklab,var(--colors-gray-100) var(--un-text-opacity),transparent)}.dark .layer-theme\:dark\:text-gray-300{color:color-mix(in oklab,var(--colors-gray-300) var(--un-text-opacity),transparent)}.layer-theme\:text-gray-600{color:color-mix(in oklab,var(--colors-gray-600) var(--un-text-opacity),transparent)}.layer-theme\:text-gray-900{color:color-mix(in oklab,var(--colors-gray-900) var(--un-text-opacity),transparent)}.dark .dark\:layer-theme\:bg-gray-800,.dark .layer-theme\:dark\:bg-gray-800{background-color:color-mix(in oklab,var(--colors-gray-800) var(--un-bg-opacity),transparent)}.layer-theme\:bg-gray-200{background-color:color-mix(in oklab,var(--colors-gray-200) var(--un-bg-opacity),transparent)}.dark .dark\:layer-theme\:hover\:bg-gray-700:hover{background-color:color-mix(in oklab,var(--colors-gray-700) var(--un-bg-opacity),transparent)}.layer-theme\:hover\:bg-gray-300:hover{background-color:color-mix(in oklab,var(--colors-gray-300) var(--un-bg-opacity),transparent)}}}

package/dist/ui.d.ts

@@ -0,0 +1,244 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { PublicProps } from 'vue';
+
+declare const __VLS_component: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLAnchorElement>;
+
+declare const __VLS_component_2: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {
+level: 1 | 2 | 3 | 4 | 5 | 6;
+separator: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_3: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_4: DefineComponent<__VLS_Props_6, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_6> & Readonly<{}>, {
+external: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLAnchorElement>;
+
+declare const __VLS_component_5: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+declare const __VLS_component_6: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_9> & Readonly<{}>, {
+level: 1 | 2 | 3 | 4 | 5 | 6;
+separator: boolean;
+tag: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare const __VLS_component_7: DefineComponent<__VLS_Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_11> & Readonly<{}>, {
+small: boolean;
+tag: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+declare type __VLS_Props = {
+    icon?: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+};
+
+declare type __VLS_Props_10 = {
+    label: string;
+    icon?: string;
+    large?: boolean;
+};
+
+declare type __VLS_Props_11 = {
+    tag?: string;
+    small?: boolean;
+};
+
+declare type __VLS_Props_2 = {
+    value: string;
+    label: string;
+};
+
+declare type __VLS_Props_3 = {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: 1 | 2 | 3 | 4 | 5 | 6;
+    separator?: boolean;
+    tag?: string;
+};
+
+declare type __VLS_Props_4 = {
+    name: string;
+    scale?: number;
+};
+
+declare type __VLS_Props_5 = {
+    text?: string;
+    icon?: string;
+};
+
+declare type __VLS_Props_6 = {
+    text?: string;
+    url: string;
+    external?: boolean;
+};
+
+declare type __VLS_Props_7 = {
+    shape?: 'circle' | 'squircle' | string;
+};
+
+declare type __VLS_Props_8 = {
+    text?: string;
+    icon?: string;
+};
+
+declare type __VLS_Props_9 = {
+    heading: string;
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: 1 | 2 | 3 | 4 | 5 | 6;
+    separator?: boolean;
+    anchor?: string;
+    tag?: string;
+};
+
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLAnchorElement;
+};
+
+declare function __VLS_template_2(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+        suffix?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_3(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_4(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLAnchorElement;
+};
+
+declare function __VLS_template_5(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_6(): {
+    attrs: Partial<{}>;
+    slots: {
+        suffix?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare function __VLS_template_7(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+
+declare type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+
+declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
+
+declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
+
+declare type __VLS_TemplateResult_4 = ReturnType<typeof __VLS_template_4>;
+
+declare type __VLS_TemplateResult_5 = ReturnType<typeof __VLS_template_5>;
+
+declare type __VLS_TemplateResult_6 = ReturnType<typeof __VLS_template_6>;
+
+declare type __VLS_TemplateResult_7 = ReturnType<typeof __VLS_template_7>;
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_2<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_3<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_4<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_5<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_6<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare type __VLS_WithTemplateSlots_7<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export declare const Button: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+
+export declare const Definition: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+export declare const Heading: __VLS_WithTemplateSlots_2<typeof __VLS_component_2, __VLS_TemplateResult_2["slots"]>;
+
+export declare const Icon: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{}>, {
+scale: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+
+export declare const Label: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
+
+export declare const Link: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
+
+export declare const Mask: __VLS_WithTemplateSlots_5<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
+
+export declare const Pill: DefineComponent<__VLS_Props_8, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_8> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+
+export declare const Section: __VLS_WithTemplateSlots_6<typeof __VLS_component_6, __VLS_TemplateResult_6["slots"]>;
+
+export declare const Tag: DefineComponent<__VLS_Props_10, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_10> & Readonly<{}>, {
+large: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLSpanElement>;
+
+declare const Text_2: __VLS_WithTemplateSlots_7<typeof __VLS_component_7, __VLS_TemplateResult_7["slots"]>;
+export { Text_2 as Text }
+
+export { }

package/dist/ui.js

@@ -0,0 +1,305 @@
+import { defineComponent as r, computed as d, openBlock as a, createElementBlock as l, createElementVNode as m, normalizeStyle as k, normalizeClass as g, renderSlot as u, createBlock as i, createCommentVNode as c, toDisplayString as f, resolveDynamicComponent as y, withCtx as h, Fragment as v, ref as $, createTextVNode as b } from "vue";
+const w = {
+  class: "inline-block leading-0 print:hidden",
+  "aria-hidden": "true"
+}, x = /* @__PURE__ */ r({
+  __name: "icon",
+  props: {
+    name: {},
+    scale: { default: 1 }
+  },
+  setup(e) {
+    const t = e, s = d(() => ({
+      "font-size": `${t.scale}em`
+    }));
+    return (n, o) => (a(), l("span", w, [
+      m("span", {
+        class: g([e.name, "inline-block"]),
+        style: k(s.value)
+      }, null, 6)
+    ]));
+  }
+}), _ = ["href", "target", "rel"], z = { class: "min-w-fit" }, P = /* @__PURE__ */ r({
+  __name: "button",
+  props: {
+    icon: {},
+    href: {},
+    target: {},
+    rel: {}
+  },
+  setup(e) {
+    const t = [
+      "inline-flex",
+      "flex-row",
+      "items-center",
+      "gap-1rem",
+      "cursor-pointer",
+      "text-align-center",
+      "leading-snug",
+      "px-2rem",
+      "py-0.75rem",
+      "text-1.25rem",
+      "text-white",
+      "font-500",
+      "bg-gray-900",
+      "rounded-0.25rem",
+      "hover:bg-gray-700",
+      "dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300"
+    ];
+    return (s, n) => (a(), l("a", {
+      href: e.href,
+      target: e.target,
+      rel: e.rel,
+      class: g(t)
+    }, [
+      m("span", z, [
+        u(s.$slots, "default")
+      ]),
+      e.icon ? (a(), i(x, {
+        key: 0,
+        name: e.icon
+      }, null, 8, ["name"])) : c("", !0)
+    ], 8, _));
+  }
+}), B = { class: "flex flex-col gap-0" }, C = { class: "text-1.5rem text-gray-800 font-500 dark:text-gray-200" }, M = { class: "text-1.25rem text-gray-600 dark:text-gray-300" }, R = /* @__PURE__ */ r({
+  __name: "definition",
+  props: {
+    value: {},
+    label: {}
+  },
+  setup(e) {
+    return (t, s) => (a(), l("div", B, [
+      m("p", C, f(e.value), 1),
+      m("p", M, f(e.label), 1)
+    ]));
+  }
+}), S = { class: "min-w-fit" }, D = {
+  key: 0,
+  class: "rounded-full bg-current grow-1 h-3px w-full print:hidden",
+  "aria-hidden": "true"
+}, N = /* @__PURE__ */ r({
+  __name: "heading",
+  props: {
+    level: { default: 1 },
+    size: {},
+    separator: { type: Boolean, default: !1 },
+    tag: {}
+  },
+  setup(e) {
+    const t = e, s = d(() => t.tag || `h${t.level}`), n = d(() => t.size || t.level), o = d(() => ({
+      "fluid-heading-1": n.value === 1,
+      "fluid-heading-2": n.value === 2,
+      "fluid-heading-3": n.value === 3,
+      "fluid-heading-4": n.value === 4,
+      "fluid-heading-5": n.value === 5,
+      "fluid-heading-6": n.value === 6,
+      "font-serif": n.value < 4,
+      "font-sans": n.value >= 4
+    }));
+    return (p, F) => (a(), i(y(s.value), {
+      class: g([o.value, "flex flex-row gap-0.5em items-center leading-tight font-500"])
+    }, {
+      default: h(() => [
+        m("span", S, [
+          u(p.$slots, "default")
+        ]),
+        e.separator ? (a(), l("span", D)) : c("", !0),
+        u(p.$slots, "suffix")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), T = { class: "text-1rem text-gray-600 flex flex-row gap-0.5rem items-center dark:text-gray-300" }, V = { key: 1 }, j = { key: 2 }, U = /* @__PURE__ */ r({
+  __name: "label",
+  props: {
+    text: {},
+    icon: {}
+  },
+  setup(e) {
+    return (t, s) => (a(), l("div", T, [
+      e.icon ? (a(), i(x, {
+        key: 0,
+        name: e.icon
+      }, null, 8, ["name"])) : c("", !0),
+      t.$slots.default ? (a(), l("div", V, [
+        u(t.$slots, "default")
+      ])) : e.text ? (a(), l("p", j, f(e.text), 1)) : c("", !0)
+    ]));
+  }
+}), q = ["href", "target"], E = { class: "decoration-2px underline-offset-0.25em group-hover/link:underline" }, Z = /* @__PURE__ */ r({
+  __name: "link",
+  props: {
+    text: {},
+    url: {},
+    external: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (t, s) => (a(), l("a", {
+      class: "group/link",
+      href: e.url,
+      target: e.external ? "_blank" : "_self",
+      rel: "noopener noreferrer"
+    }, [
+      t.$slots.default ? u(t.$slots, "default", { key: 0 }) : e.text ? (a(), l(v, { key: 1 }, [
+        m("span", E, f(e.text), 1),
+        e.external ? (a(), i(x, {
+          key: 0,
+          name: "i-ri-arrow-right-up-long-line",
+          class: "pos-relative bottom-0.1em align-middle opacity-25 group-hover/link:opacity-100 group-focus/link:opacity-100"
+        })) : c("", !0)
+      ], 64)) : c("", !0)
+    ], 8, q));
+  }
+}), G = /* @__PURE__ */ r({
+  __name: "mask",
+  props: {
+    shape: {}
+  },
+  setup(e) {
+    const t = {
+      circle: '<circle cx=".5" cy=".5" r=".5" />',
+      squircle: '<path d="M .5,0 C .1,0 0,.1 0,.5 0,.9 .1,1 .5,1 .9,1 1,.9 1,.5 1,.1 .9,0 .5,0 Z" />'
+    }, s = d(() => {
+      if (!e.shape)
+        return;
+      const o = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">${t[e.shape] || `<path d="${e.shape}" />`}</svg>`;
+      return `url("data:image/svg+xml,${encodeURIComponent(o)}")`;
+    });
+    return (n, o) => (a(), l("div", {
+      class: "aspect-square inline-flex select-none items-center justify-center align-middle mask-contain mask-center mask-no-repeat bg-gray-300 dark:bg-gray-700",
+      style: k({ "mask-image": s.value })
+    }, [
+      u(n.$slots, "default")
+    ], 4));
+  }
+}), I = {
+  key: 1,
+  class: "font-500 font-serif leading-none shrink-0 grow-0 p-y-0.5em"
+}, L = /* @__PURE__ */ r({
+  __name: "pill",
+  props: {
+    text: {},
+    icon: {}
+  },
+  setup(e) {
+    const t = e, s = d(() => ({
+      "p-r-1rem": t.text,
+      "p-l-1rem": t.text && !t.icon
+    }));
+    return (n, o) => (a(), l("span", {
+      class: g([[s.value], "flex flex-row gap-0.125em items-center rounded-full text-1.25rem layer-theme:text-gray-900 layer-theme:bg-gray-200 layer-theme:hover:bg-gray-300 dark:layer-theme:text-gray-100 dark:layer-theme:bg-gray-800 dark:layer-theme:hover:bg-gray-700"])
+    }, [
+      e.icon ? (a(), i(x, {
+        key: 0,
+        name: e.icon,
+        scale: 1.25,
+        class: g([{ "opacity-50": e.text }, "p-0.5rem shrink-0 grow-0"])
+      }, null, 8, ["name", "class"])) : c("", !0),
+      e.text ? (a(), l("span", I, f(e.text), 1)) : c("", !0)
+    ], 2));
+  }
+}), A = ["href"], J = /* @__PURE__ */ r({
+  __name: "section",
+  props: {
+    heading: {},
+    level: { default: 2 },
+    size: {},
+    separator: { type: Boolean, default: !0 },
+    anchor: {},
+    tag: { default: "section" }
+  },
+  setup(e) {
+    const t = $(!1);
+    return (s, n) => (a(), i(y(e.tag), {
+      id: e.anchor,
+      class: "group/section flex flex-col gap-2.25rem print:gap-1.25rem"
+    }, {
+      default: h(() => [
+        e.heading ? (a(), i(N, {
+          key: 0,
+          level: e.level,
+          separator: e.separator,
+          size: e.size
+        }, {
+          suffix: h(() => [
+            t.value ? (a(), i(L, {
+              key: 0,
+              icon: "i-ri-hashtag"
+            })) : u(s.$slots, "suffix", { key: 1 })
+          ]),
+          default: h(() => [
+            e.anchor ? (a(), l("a", {
+              key: 0,
+              href: `#${e.anchor}`,
+              class: "flex items-center",
+              onMouseenter: n[0] || (n[0] = (o) => t.value = !0),
+              onMouseleave: n[1] || (n[1] = (o) => t.value = !1)
+            }, f(e.heading), 41, A)) : (a(), l(v, { key: 1 }, [
+              b(f(e.heading), 1)
+            ], 64))
+          ]),
+          _: 3
+        }, 8, ["level", "separator", "size"])) : c("", !0),
+        m("div", null, [
+          u(s.$slots, "default")
+        ])
+      ]),
+      _: 3
+    }, 8, ["id"]));
+  }
+}), K = /* @__PURE__ */ r({
+  __name: "tag",
+  props: {
+    label: {},
+    icon: {},
+    large: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, s = d(() => ({
+      "px-0.5em py-0.125em": !t.large,
+      "text-1.25rem px-1.25em py-0.5em": t.large
+    }));
+    return (n, o) => (a(), l("span", {
+      class: g([s.value, "flex flex-row gap-0.25em items-center justify-center rounded-0.25rem layer-theme:text-gray-600 layer-theme:bg-gray-200 layer-theme:dark:text-gray-300 layer-theme:dark:bg-gray-800"])
+    }, [
+      m("span", null, f(e.label), 1),
+      e.icon ? (a(), i(x, {
+        key: 0,
+        name: e.icon
+      }, null, 8, ["name"])) : c("", !0)
+    ], 2));
+  }
+}), O = /* @__PURE__ */ r({
+  __name: "text",
+  props: {
+    tag: { default: "div" },
+    small: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, s = d(() => ({
+      "fluid-text-regular": !t.small,
+      "fluid-text-small": t.small
+    }));
+    return (n, o) => (a(), i(y(e.tag), {
+      class: g([s.value, "flex flex-col items-start gap-1em leading-snug"])
+    }, {
+      default: h(() => [
+        u(n.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+});
+export {
+  P as Button,
+  R as Definition,
+  N as Heading,
+  x as Icon,
+  U as Label,
+  Z as Link,
+  G as Mask,
+  L as Pill,
+  J as Section,
+  K as Tag,
+  O as Text
+};

package/package.json

@@ -0,0 +1,90 @@
+{
+	"name": "@thasmo/ui",
+	"type": "module",
+	"version": "1.0.0",
+	"packageManager": "pnpm@10.28.1",
+	"description": "UI for personal web projects.",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/thasmo/ui.git"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/ui.d.ts",
+			"import": "./dist/ui.js"
+		},
+		"./preset": {
+			"types": "./dist/preset.d.ts",
+			"import": "./dist/preset.js"
+		},
+		"./styles": "./dist/ui.css"
+	},
+	"main": "./dist/ui.js",
+	"types": "./dist/ui.d.ts",
+	"files": [
+		"./dist/"
+	],
+	"engines": {
+		"node": ">=24",
+		"pnpm": ">=10"
+	},
+	"scripts": {
+		"dev": "concurrently --group --prefix-colors 'auto' 'pnpm:dev:*'",
+		"dev:watch": "vite build --watch",
+		"dev:storybook": "storybook dev",
+		"build": "vite build",
+		"prepack": "vite build",
+		"prepare": "concurrently --group --prefix-colors 'auto' 'pnpm:prepare:*'",
+		"prepare:husky": "husky",
+		"lint": "concurrently --group --prefix-colors 'auto' 'pnpm:lint:*'",
+		"lint:types": "vue-tsc --build",
+		"lint:eslint": "eslint .",
+		"lint:cspell": "cspell --no-progress --no-summary --no-must-find-files .",
+		"lint:knip": "knip --no-progress",
+		"fix": "concurrently --group --prefix-colors 'auto' 'pnpm:fix:*'",
+		"fix:eslint": "eslint --fix .",
+		"fix:knip": "knip --fix --no-progress --workspace ."
+	},
+	"peerDependencies": {
+		"unocss": "^66.6.0",
+		"vue": "^3.5.26"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^20.0.0",
+		"@iconify-json/ri": "^1.2.8",
+		"@somehow-digital/commitlint-config": "^1.0.0",
+		"@somehow-digital/cspell-dictionary": "^2.0.0",
+		"@somehow-digital/eslint-config": "^4.0.0",
+		"@somehow-digital/semantic-release-config": "^2.0.0",
+		"@somehow-digital/unocss-preset": "^2.0.0",
+		"@storybook/addon-docs": "^10.2.0",
+		"@storybook/addon-themes": "^10.2.0",
+		"@storybook/vue3-vite": "^10.2.0",
+		"@tsconfig/node24": "^24.0.4",
+		"@types/node": "^24.10.9",
+		"@unocss/preset-web-fonts": "^66.6.0",
+		"@vitejs/plugin-vue": "^6.0.3",
+		"@vue/tsconfig": "^0.8.1",
+		"concurrently": "^9.1.0",
+		"cspell": "^9.0.0",
+		"eslint": "^9.17.0",
+		"husky": "^9.1.7",
+		"knip": "^5.40.0",
+		"lint-staged": "^16.0.0",
+		"semantic-release": "^25.0.2",
+		"storybook": "^10.2.0",
+		"typescript": "^5.9.3",
+		"unocss": "^66.0.0",
+		"vite": "^7.3.1",
+		"vite-plugin-dts": "^4.5.4",
+		"vite-plugin-vue-devtools": "^8.0.5",
+		"vue-tsc": "^3.2.2"
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"esbuild",
+			"vue-demi"
+		]
+	}
+}