@pienter/ui 0.2.0

package/components/overlay/sheet/Sheet.vue

@@ -0,0 +1,88 @@
+<template>
+    <dialog
+        ref="rootRef"
+        v-bind="$attrs"
+        class="pui-sheet"
+        data-state="closed"
+        :data-side="side"
+        data-pui-sheet
+        :aria-labelledby="titleId"
+    >
+        <div class="pui-sheet__head">
+            <h2 :id="titleId" class="pui-sheet__title">{{ title }}</h2>
+            <p v-if="subtitle" class="pui-sheet__sub">{{ subtitle }}</p>
+        </div>
+        <div class="pui-sheet__body"><slot /></div>
+        <div v-if="$slots.footer" class="pui-sheet__foot">
+            <slot name="footer" />
+        </div>
+    </dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { generateId } from '../../../utils/a11y/id.js';
+import {
+    mountDialog,
+    type DialogControl,
+} from '../../../utils/controllers/dialog.js';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+    defineProps<{
+        open: boolean;
+        title: string;
+        subtitle?: string;
+        side?: 'left' | 'right' | 'top' | 'bottom';
+        persistent?: boolean;
+    }>(),
+    {
+        subtitle: undefined,
+        side: 'right',
+        persistent: false,
+    },
+);
+
+const emit = defineEmits<{
+    'update:open': [value: boolean];
+    close: [];
+}>();
+
+const rootRef = ref<HTMLDialogElement | null>(null);
+const titleId = generateId('sheet-title');
+let control: DialogControl | null = null;
+
+function requestClose(): void {
+    emit('update:open', false);
+    emit('close');
+}
+
+onMounted(() => {
+    if (!rootRef.value) return;
+    control = mountDialog(rootRef.value, {
+        role: 'dialog',
+        persistent: props.persistent,
+        onClose: requestClose,
+    });
+    if (props.open) control.open();
+});
+
+watch(
+    () => props.open,
+    (isOpen) => {
+        if (!control) return;
+        if (isOpen) control.open();
+        else control.close();
+    },
+);
+
+onBeforeUnmount(() => {
+    control?.teardown();
+    control = null;
+});
+</script>
+
+<style>
+@import './sheet.css';
+</style>

package/components/overlay/sheet/sheet.css

@@ -0,0 +1,108 @@
+@layer components {
+    .pui-sheet {
+        /* Reset native <dialog> chrome — the side-anchored placement supplies
+       its own positioning per [data-side]. */
+        margin: 0;
+        padding: 0;
+        border: 0;
+        inset: auto;
+
+        /* Surface */
+        background: var(--bg-clr-surface);
+        box-shadow: var(--shadow-spark-lg);
+
+        /* Side-anchored positioning is set per [data-side] below. The base
+       rule keeps display off — the browser default for
+       <dialog>:not([open]) is display: none — preserve that by NOT
+       declaring display in the base rule. The data-state="closed"
+       attribute is preserved as a CSS hook for future transition work. */
+        position: fixed;
+    }
+
+    /* Right side (default): anchored to right edge, full height, fixed width. */
+    .pui-sheet[data-side='right'] {
+        top: 0;
+        bottom: 0;
+        right: 0;
+        width: min(28rem, 100vw - var(--space-l));
+        max-width: 100vw;
+        border-inline-start: var(--stroke-md) solid var(--border-clr-strong);
+    }
+
+    /* Left side: anchored to left edge, full height, fixed width. */
+    .pui-sheet[data-side='left'] {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: min(28rem, 100vw - var(--space-l));
+        max-width: 100vw;
+        border-inline-end: var(--stroke-md) solid var(--border-clr-strong);
+    }
+
+    /* Top side: anchored to top edge, full width, fixed height. */
+    .pui-sheet[data-side='top'] {
+        top: 0;
+        left: 0;
+        right: 0;
+        height: min(20rem, 100vh - var(--space-l));
+        max-height: 100vh;
+        border-block-end: var(--stroke-md) solid var(--border-clr-strong);
+    }
+
+    /* Bottom side: anchored to bottom edge, full width, fixed height. */
+    .pui-sheet[data-side='bottom'] {
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: min(20rem, 100vh - var(--space-l));
+        max-height: 100vh;
+        border-block-start: var(--stroke-md) solid var(--border-clr-strong);
+    }
+
+    /* Apply layout-driving display only when the sheet is actually open.
+     Same [open] guard pattern as Modal — preserves the browser default
+     of display: none for closed <dialog>s. */
+    .pui-sheet[open] {
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+    }
+
+    .pui-sheet::backdrop {
+        background: hsl(from var(--border-clr-strong) h s l / 0.5);
+    }
+
+    .pui-sheet:focus-visible {
+        outline: 3px solid var(--outline-clr-base);
+        outline-offset: 2px;
+    }
+
+    .pui-sheet__head {
+        padding: var(--space-m) var(--space-m) 0;
+        display: grid;
+        gap: var(--space-2xs);
+    }
+    .pui-sheet__title {
+        font-family: var(--ff-display);
+        font-weight: var(--fw-display);
+        letter-spacing: var(--ls-display);
+        font-size: var(--step-1);
+        margin: 0;
+    }
+    .pui-sheet__sub {
+        color: var(--text-clr-muted);
+        margin: 0;
+        font-size: var(--step--1);
+    }
+    .pui-sheet__body {
+        padding: var(--space-s) var(--space-m);
+        overflow-y: auto;
+    }
+    .pui-sheet__foot {
+        padding: var(--space-xs) var(--space-m) var(--space-m);
+        display: flex;
+        gap: var(--space-2xs);
+        justify-content: flex-end;
+        border-block-start: var(--stroke-sm) solid var(--border-clr-base);
+        margin-block-start: var(--space-2xs);
+    }
+}

package/components/overlay/tooltip/Tooltip.vue

@@ -0,0 +1,210 @@
+<template>
+    <span ref="wrapRef" class="pui-tooltip-wrap">
+        <slot />
+        <span
+            :id="tooltipId"
+            ref="tooltipRef"
+            class="pui-tooltip"
+            role="tooltip"
+            >{{ label }}</span
+        >
+    </span>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import {
+    mountPopover,
+    type PopoverControl,
+    type Placement,
+} from '../../../utils/controllers/popover.js';
+import { generateId } from '../../../utils/a11y/id.js';
+
+const props = withDefaults(
+    defineProps<{
+        /**
+         * Tooltip text content. Plain string by design — tooltips
+         * announce a short, descriptive label for the focused trigger
+         * (`aria-describedby` on the trigger points at this surface).
+         * Rich content (multiple paragraphs, interactive elements,
+         * headings) belongs in `<Popover>`; tooltips are a
+         * descriptive, non-interactive layer.
+         */
+        label: string;
+        /**
+         * Initial placement; the controller flips automatically on
+         * viewport collision. Default: `'top'` (the WAI-ARIA tooltip
+         * convention places the tooltip above the trigger by default).
+         */
+        placement?: Placement;
+        /**
+         * Hover-open delay in ms — the trigger must be hovered for at
+         * least this long before the tooltip opens. Mitigates accidental
+         * hover (cursor crossing the trigger en route to elsewhere).
+         * Default: `200`.
+         */
+        openDelay?: number;
+        /**
+         * Hover-close delay in ms — when the cursor leaves the trigger
+         * (or the tooltip itself), the tooltip stays open this long
+         * before closing. Lets the user move the cursor onto the
+         * tooltip surface to read longer content. Default: `100`.
+         */
+        closeDelay?: number;
+    }>(),
+    {
+        placement: 'top',
+        openDelay: 200,
+        closeDelay: 100,
+    },
+);
+
+const wrapRef = ref<HTMLElement | null>(null);
+const tooltipRef = ref<HTMLElement | null>(null);
+// `generateId` runs at script-setup execution time — safe in SSR/hydration
+// because the same id is produced in the same order on each render path.
+const tooltipId = generateId('tooltip');
+let control: PopoverControl | null = null;
+let openTimer: number | null = null;
+let closeTimer: number | null = null;
+let trigger: HTMLElement | null = null;
+
+function clearTimers(): void {
+    if (openTimer != null) {
+        clearTimeout(openTimer);
+        openTimer = null;
+    }
+    if (closeTimer != null) {
+        clearTimeout(closeTimer);
+        closeTimer = null;
+    }
+}
+
+function scheduleOpen(): void {
+    clearTimers();
+    openTimer = window.setTimeout(() => {
+        control?.show();
+        openTimer = null;
+    }, props.openDelay);
+}
+
+function scheduleClose(): void {
+    clearTimers();
+    closeTimer = window.setTimeout(() => {
+        control?.hide();
+        closeTimer = null;
+    }, props.closeDelay);
+}
+
+function onPointerEnter(): void {
+    scheduleOpen();
+}
+
+function onPointerLeave(): void {
+    scheduleClose();
+}
+
+// Focus shows the tooltip immediately — per WAI-ARIA's tooltip
+// pattern the descriptive content must be available without delay
+// when the trigger receives keyboard focus. Hover-intent delays
+// are a mouse-only affordance.
+function onFocus(): void {
+    clearTimers();
+    control?.show();
+}
+
+function onBlur(): void {
+    clearTimers();
+    control?.hide();
+}
+
+function onTooltipPointerEnter(): void {
+    // Cursor entered the tooltip surface — cancel any pending close
+    // so the user can read longer content / interact with links if
+    // future tooltip variants ship with embedded links.
+    clearTimers();
+}
+
+function onTooltipPointerLeave(): void {
+    scheduleClose();
+}
+
+onMounted(() => {
+    if (!wrapRef.value || !tooltipRef.value) return;
+
+    // Find the first element child that isn't the tooltip itself —
+    // this is the trigger. `display: contents` on the wrap means
+    // the wrapper has no box; the slot's first element is the
+    // accessible trigger surface.
+    const tooltipEl = tooltipRef.value;
+    let candidate: Element | null = wrapRef.value.firstElementChild;
+    while (candidate && candidate === tooltipEl) {
+        candidate = candidate.nextElementSibling;
+    }
+    trigger = candidate as HTMLElement | null;
+    if (!trigger) return;
+
+    // Append our id to any existing `aria-describedby` (idempotent
+    // tokenized list — tooltip ids stack alongside form-error ids
+    // so a single trigger can be described by both a tooltip and
+    // a field-hint).
+    const existing = trigger.getAttribute('aria-describedby');
+    trigger.setAttribute(
+        'aria-describedby',
+        existing ? `${existing} ${tooltipId}` : tooltipId,
+    );
+
+    control = mountPopover(tooltipEl, {
+        anchor: trigger,
+        placement: props.placement,
+        offset: 6,
+        modal: false,
+    });
+
+    trigger.addEventListener('pointerenter', onPointerEnter);
+    trigger.addEventListener('pointerleave', onPointerLeave);
+    trigger.addEventListener('focus', onFocus);
+    trigger.addEventListener('blur', onBlur);
+
+    tooltipEl.addEventListener('pointerenter', onTooltipPointerEnter);
+    tooltipEl.addEventListener('pointerleave', onTooltipPointerLeave);
+});
+
+onBeforeUnmount(() => {
+    clearTimers();
+    if (trigger) {
+        trigger.removeEventListener('pointerenter', onPointerEnter);
+        trigger.removeEventListener('pointerleave', onPointerLeave);
+        trigger.removeEventListener('focus', onFocus);
+        trigger.removeEventListener('blur', onBlur);
+        // Subtract our id from the tokenized list rather than blowing
+        // away whatever the consumer (or other Tooltips) added.
+        const existing = trigger.getAttribute('aria-describedby');
+        if (existing) {
+            const cleaned = existing
+                .split(/\s+/)
+                .filter((id) => id && id !== tooltipId)
+                .join(' ');
+            if (cleaned) trigger.setAttribute('aria-describedby', cleaned);
+            else trigger.removeAttribute('aria-describedby');
+        }
+    }
+    if (tooltipRef.value) {
+        tooltipRef.value.removeEventListener(
+            'pointerenter',
+            onTooltipPointerEnter,
+        );
+        tooltipRef.value.removeEventListener(
+            'pointerleave',
+            onTooltipPointerLeave,
+        );
+    }
+    control?.teardown();
+    control = null;
+    trigger = null;
+});
+</script>
+
+<style>
+@import './tooltip.css';
+</style>

package/components/overlay/tooltip/tooltip.css

@@ -0,0 +1,50 @@
+@layer components {
+    .pui-tooltip-wrap {
+        /* Inline wrapper — `display: contents` removes the wrapper
+       box so the trigger element occupies the same place in the
+       layout it would without the Tooltip wrapper. The wrap is
+       still a real DOM node (so `wrapRef.firstElementChild` finds
+       the trigger) but contributes no box of its own. */
+        display: contents;
+    }
+
+    .pui-tooltip {
+        /* Reset native popover defaults — the user-agent centers
+       a popover at the viewport origin via inset/margin/padding
+       defaults that interfere with anchor positioning. */
+        margin: 0;
+        border: 0;
+        inset: auto;
+
+        /* Tooltip surface — small, contrast-bumped, dark-background
+       affordance. Distinct from <Popover>'s surface tokens to
+       signal "this is descriptive metadata, not interactive
+       content". */
+        padding: var(--space-2xs) var(--space-xs);
+        background: var(--bg-clr-dark);
+        color: var(--text-clr-inverse);
+        border-radius: var(--radius-xs);
+        font-size: var(--step--2);
+        line-height: 1.4;
+        box-shadow: var(--shadow-spark);
+        max-width: 14rem;
+
+        /* Position is set by the controller via inline `left`/`top`.
+       `position: fixed` is declared explicitly for self-doc — the
+       Popover API's top-layer rendering already produces the same
+       effect via the user-agent rule. */
+        position: fixed;
+
+        /* Allow hovering over the tooltip surface to keep it open
+       (the component's `onTooltipPointerEnter` cancels the close
+       timer). The user-agent default for popovers is
+       `pointer-events: auto` once visible; we re-declare to make
+       the contract explicit. */
+        pointer-events: auto;
+    }
+
+    /* Tooltips are NOT focus targets — the trigger keeps focus and
+     the tooltip describes it via `aria-describedby`. We do not
+     style `:focus-visible` on `.pui-tooltip` because the surface
+     should never receive focus. */
+}

package/composables/useUrlSort.ts

@@ -0,0 +1,48 @@
+import { computed, type ComputedRef } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import {
+    formatSort,
+    parseSort,
+    toggleSort,
+    type SortState,
+} from '../utils/sort/index.js';
+
+export interface UrlSort {
+    /** Current sort, derived from the query string. Bind to `:sort`. */
+    sort: ComputedRef<SortState>;
+    /** Bind to `@sort`. Applies the standard cycle to the activated column and writes the URL. */
+    onSort: (key: string) => void;
+}
+
+/**
+ * Keeps a `Table`/`DataTable` sort in the URL query, the single source of truth, so a
+ * shared link or a reload renders the right header. Serialized as `?sort=title` /
+ * `?sort=-title`; ordering the rows stays the consumer's job (ADR 0005). `onSort` bakes
+ * in the asc → desc → unsorted cycle. Requires the optional `vue-router` peer dependency.
+ *
+ * @param param - query parameter name; defaults to `'sort'`.
+ * @param mode - `'replace'` (default) keeps sorting out of the back stack.
+ */
+export function useUrlSort(
+    param = 'sort',
+    mode: 'replace' | 'push' = 'replace',
+): UrlSort {
+    const route = useRoute();
+    const router = useRouter();
+
+    const sort = computed<SortState>(() => {
+        const raw = route.query[param];
+        return parseSort(Array.isArray(raw) ? raw[0] : raw);
+    });
+
+    function onSort(key: string) {
+        const query = { ...route.query };
+        const value = formatSort(toggleSort(sort.value, key));
+        // an unsorted state drops the parameter rather than writing an empty one
+        if (value) query[param] = value;
+        else delete query[param];
+        router[mode]({ query });
+    }
+
+    return { sort, onSort };
+}

package/icons/alert-triangle.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01"/></svg>';

package/icons/arrow-down.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 5v14m7-7-7 7-7-7"/></svg>';

package/icons/arrow-up-down.ts

@@ -0,0 +1,5 @@
+// Two-tone capable: the up and down arrows stay separate paths so each can be coloured
+// independently via --pui-icon-clr-up / --pui-icon-clr-down (both falling back to the
+// shared --pui-icon-clr, then currentColor). Keep them split — merging the subpaths into
+// a single `d` collapses the two tones back into one.
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path stroke="var(--pui-icon-clr-up, var(--pui-icon-clr, currentColor))" d="m3 8 4-4 4 4M7 4v16"/><path stroke="var(--pui-icon-clr-down, var(--pui-icon-clr, currentColor))" d="m21 16-4 4-4-4m4 4V4"/></svg>';

package/icons/arrow-up.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m5 12 7-7 7 7m-7 7V5"/></svg>';

package/icons/bell.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9m-4.27 13a2 2 0 0 1-3.46 0"/></svg>';

package/icons/check.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>';

package/icons/chevron-down.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>';

package/icons/chevron-left.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>';

package/icons/chevron-right.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>';

package/icons/chevron-up-down.ts

@@ -0,0 +1,5 @@
+// Two-tone capable: the up and down chevrons stay separate paths so each can be coloured
+// independently via --pui-icon-clr-up / --pui-icon-clr-down (both falling back to the
+// shared --pui-icon-clr, then currentColor). Keep them split — merging the subpaths into
+// a single `d` collapses the two tones back into one.
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path stroke="var(--pui-icon-clr-up, var(--pui-icon-clr, currentColor))" d="m18 10-6-6-6 6"/><path stroke="var(--pui-icon-clr-down, var(--pui-icon-clr, currentColor))" d="m6 14 6 6 6-6"/></svg>';

package/icons/chevron-up.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></svg>';

package/icons/circle-alert.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 8v4m0 4h.01"/></svg>';

package/icons/circle-check.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>';

package/icons/clipboard.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/></svg>';

package/icons/download.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4m4-5 5 5 5-5m-5 5V3"/></svg>';

package/icons/edit.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>';

package/icons/external-link.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6m4-3h6v6m-11 5L21 3"/></svg>';

package/icons/eye.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>';

package/icons/file.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M13 2v7h7"/></svg>';

package/icons/filter.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M22 3H2l8 9.46V19l4 2v-8.54z"/></svg>';

package/icons/folder.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>';

package/icons/image.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>';

package/icons/inbox.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11"/></svg>';