@developit/kinu 0.1.0

package/README.md

@@ -0,0 +1,67 @@
+# kinu - Performance-Focused Preact UI Toolkit
+
+A minimal, constraint-driven UI toolkit that enhances HTML instead of replacing it. Built for developers who value performance, simplicity, and the web platform.
+
+## Why kinu?
+
+- **🚀 Tiny Bundle**: ~5KB JS + ~6KB CSS for all components
+- **⚡ Zero Re-renders**: No state, direct DOM reactions via native `commandFor` (with fallback)
+- **🌐 Platform-Native**: Uses `<dialog>`, form validation, CSS custom properties
+- **📦 Tree-Shakeable**: Import only what you use
+- **🎨 Beautiful by Default**: Carefully crafted design system
+
+## Screenshot
+
+<img src="demo/public/kinu-1.png" width="784">
+
+## Quick Start
+
+```bash
+pnpm add kinu
+```
+
+```tsx
+import { Button, Dialog, Input } from 'kinu';
+
+function App() {
+  return (
+    <>
+      <Button variant="outline" size="lg">
+        Click me
+      </Button>
+
+      <Dialog>
+        <Dialog.Trigger>
+          <Button>Open Dialog</Button>
+        </Dialog.Trigger>
+        <Dialog.Content>
+          <h2>Hello World</h2>
+          <Input placeholder="Type something..." />
+        </Dialog.Content>
+      </Dialog>
+    </>
+  );
+}
+```
+
+## Live Demo
+
+Check out the [live demo](https://kinu-demo.netlify.app) to see all components in action.
+
+## Documentation
+
+- [Architecture Overview](./ARCHITECTURE.md) - Technical details and design decisions
+- [Component Reference](./docs/components.md) - Complete component API documentation
+
+## Development
+
+```bash
+# Run the demo app locally
+cd demo
+pnpm install
+pnpm run dev
+```
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1 @@
+[k=badge]{display:inline-flex;align-items:center;border-radius:calc(var(--k-radius) - 2px);padding:.125rem .625rem;font-size:.75rem;line-height:1rem;font-weight:600;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border:1px solid transparent;background-color:hsl(var(--k-primary));color:hsl(var(--k-primary-foreground))}[k=badge][variant=secondary]{border:1px solid transparent;background-color:hsl(var(--k-secondary));color:hsl(var(--k-secondary-foreground))}[k=badge][variant=secondary]:hover{background-color:hsl(var(--k-secondary-hover))}[k=badge][variant=destructive]{border:1px solid transparent;background-color:hsl(var(--k-destructive));color:hsl(var(--k-destructive-foreground))}[k=badge][variant=destructive]:hover{background-color:hsl(var(--k-destructive-hover))}[k=badge][variant=outline]{border-color:hsl(var(--k-border));background-color:transparent;color:hsl(var(--k-foreground))}[k=button]{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;white-space:nowrap;border-radius:var(--k-radius);font-size:.875rem;font-weight:500;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border:1px solid transparent;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:hsl(var(--k-primary));color:hsl(var(--k-primary-foreground))}[k=button]:focus-visible{outline:none;box-shadow:0 0 0 4px hsl(var(--k-ring) / .2);border-color:hsl(var(--k-ring));background-color:hsl(var(--k-primary));color:hsl(var(--k-primary-foreground))}[k=button]:hover{background-color:hsl(var(--k-primary-hover))}[k=button]:not([size]),[k=button][size=md]{height:2.5rem;padding-left:1rem;padding-right:1rem}[k=button]:disabled{pointer-events:none;opacity:.5}[k=button]:active:not(:disabled):not([loading]){transform:translateY(1px)}[k=button][loading]{pointer-events:none;opacity:.6}[k=button][variant=destructive]{background-color:hsl(var(--k-destructive));color:hsl(var(--k-destructive-foreground))}[k=button][variant=destructive]:hover{background-color:hsl(var(--k-destructive-hover))}[k=button][variant=outline]{border:1px solid hsl(var(--k-border));background-color:hsl(var(--k-background));color:hsl(var(--k-foreground))}[k=button][variant=outline]:hover{background-color:hsl(var(--k-accent));color:hsl(var(--k-accent-foreground))}[k=button][variant=secondary]{background-color:hsl(var(--k-secondary));color:hsl(var(--k-secondary-foreground))}[k=button][variant=secondary]:hover{background-color:hsl(var(--k-secondary-hover))}[k=button][variant=ghost]{background-color:transparent;color:hsl(var(--k-foreground))}[k=button][variant=ghost]:hover{background-color:hsl(var(--k-accent));color:hsl(var(--k-accent-foreground))}[k=button][variant=link]{background-color:transparent;color:hsl(var(--k-primary));text-decoration:underline;text-underline-offset:4px}[k=button][variant=link]:hover{text-decoration:none}[k=button][size=sm]{height:2.25rem;border-radius:calc(var(--k-radius) - 2px);padding-left:.75rem;padding-right:.75rem;font-size:.8125rem}[k=button][size=lg]{height:2.75rem;border-radius:calc(var(--k-radius) - 2px);padding-left:2rem;padding-right:2rem}[k=button][size=icon]{height:2.5rem;width:2.5rem;padding:0}[k=input]{display:flex;width:100%;border-radius:var(--k-radius);border:1px solid hsl(var(--k-input));background-color:hsl(var(--k-background));font:inherit;font-size:.875rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;height:2.5rem;padding-left:.75rem;padding-right:.75rem}[k=input]:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--k-ring))}[k=input]:disabled{cursor:not-allowed;opacity:.5}[k=input]::placeholder{color:hsl(var(--k-muted-foreground))}[k=input]:invalid,[k=input][invalid]{border-color:hsl(var(--k-destructive))}[k=input]:invalid:focus-visible,[k=input][invalid]:focus-visible{box-shadow:0 0 0 2px hsl(var(--k-destructive))}[k=input][size=sm]{height:2.25rem;border-radius:calc(var(--k-radius) - 2px);padding-left:.5rem;padding-right:.5rem;font-size:.8125rem}[k=input][size=lg]{height:2.75rem;padding-left:1rem;padding-right:1rem}[k=card]{border-radius:var(--k-radius);border:1px solid hsl(var(--k-border));background-color:hsl(var(--k-card));color:hsl(var(--k-card-foreground));box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;padding:1.5rem}[k=card][padding=none]{padding:0}[k=card][padding=sm]{padding:1rem}[k=card][padding=lg]{padding:2rem}[k=dialog-content]{border:none;border-radius:var(--k-radius);background-color:hsl(var(--k-background));padding:0;max-width:32rem;box-shadow:0 4px 12px #00000026;flex-direction:column;padding:1.5rem;gap:1rem;opacity:0;transform:scale(.96);transition:opacity .3s var(--k-ease),transform .3s var(--k-ease),display .3s allow-discrete,overlay .3s allow-discrete}[k=dialog-content][open]{display:flex;opacity:1;transform:scale(1);overscroll-behavior:contain}@starting-style{[k=dialog-content][open]{opacity:0;transform:scale(.96)}}[k=dialog-content]::backdrop{background-color:#000c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);overscroll-behavior:contain;overflow:auto;scrollbar-width:none;opacity:0;transition:opacity .3s var(--k-ease),display .3s allow-discrete,overlay .3s allow-discrete}[k=dialog-content][open]::backdrop{opacity:1}@starting-style{[k=dialog-content][open]::backdrop{opacity:0}}[k=accordion]{border-bottom:1px solid hsl(var(--k-border))}[k=accordion]:last-of-type{border-bottom:none}[k=accordion]>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:1rem 0;font-size:.875rem;font-weight:500;cursor:pointer;text-align:left;transition:color .2s;-webkit-user-select:none;user-select:none}[k=accordion]>summary::-webkit-details-marker{display:none}[k=accordion]>summary:hover{text-decoration:underline}[k=accordion]>summary:after{content:"";border:solid currentColor;border-width:0 2px 2px 0;display:inline-block;width:.5rem;height:.5rem;margin-left:.5rem;transform:rotate(45deg);transition:transform .2s ease-out}[k=accordion][open]>summary:after{transform:rotate(-135deg)}[k=accordion]>*:not(summary){font-size:.875rem;padding:0 0 1rem}[k=accordion]::details-content{overflow:hidden;height:0;transition:height .2s ease,content-visibility .2s linear;transition-behavior:allow-discrete}@supports (interpolate-size: allow-keywords){:root{interpolate-size:allow-keywords}[k=accordion][open]::details-content{height:auto}}@supports not (interpolate-size: allow-keywords){[k=accordion]::details-content{transition:none}[k=accordion][open]::details-content{height:auto}}[k=tablist]{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:2.25rem;width:fit-content;background:hsl(var(--k-muted));color:hsl(var(--k-muted-foreground));padding:3px;border-radius:var(--k-radius);gap:2px}[k=tab]{position:relative;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:1px solid transparent;border-radius:calc(var(--k-radius) - 2px);height:calc(100% - 1px);padding:0 .5rem;font-size:.875rem;font-weight:500;cursor:pointer;color:hsl(var(--k-foreground));display:inline-flex;align-items:center;justify-content:center;gap:.375rem;transition:color .15s,box-shadow .15s}[k=tab][aria-selected=true]{background:hsl(var(--k-background));color:hsl(var(--k-foreground));border-color:transparent;box-shadow:0 1px 3px 0 var(--k-shadow-color, rgba(0, 0, 0, .1)),0 1px 2px -1px var(--k-shadow-color, rgba(0, 0, 0, .1))}@supports (anchor-name: --k-tab-anchor) and (inset-inline-start: anchor(left)){[k=tablist]:before{content:"";position:absolute;z-index:0;top:3px;inset-inline-start:3px;block-size:calc(100% - 6px);inline-size:0;border:1px solid transparent;border-radius:calc(var(--k-radius) - 2px);background:hsl(var(--k-background));box-shadow:0 1px 3px 0 var(--k-shadow-color, rgba(0, 0, 0, .1)),0 1px 2px -1px var(--k-shadow-color, rgba(0, 0, 0, .1));pointer-events:none;transition:inset-inline-start .3s cubic-bezier(.2,.8,.2,1),inline-size .3s cubic-bezier(.2,.8,.2,1)}[k=tab][aria-selected=true]{anchor-name:--k-tab-anchor;background:transparent;border-color:transparent;box-shadow:none}[k=tablist]:has([k=tab][aria-selected=true]):before{position-anchor:--k-tab-anchor;inset-inline-start:anchor(left);inline-size:anchor-size(width)}}[k=tab]:focus-visible{outline:1px solid hsl(var(--k-ring));box-shadow:0 0 0 3px hsl(var(--k-ring) / .5)}[k=tab][disabled]{pointer-events:none;opacity:.5}[k=tab-panel]{padding-top:.5rem}[k=tooltip]{position:relative;display:inline-flex}[k=tooltip][title]:after{content:attr(title);position:absolute;left:50%;bottom:100%;--k-tl: -50%;--k-tt: 0%;--k-to: -.25rem;transform:translate(var(--k-tl),calc(var(--k-tt) + var(--k-to)));background-color:hsl(var(--k-foreground));color:hsl(var(--k-background));padding:.25rem .5rem;border-radius:calc(var(--k-radius) - 2px);font-size:.75rem;line-height:1rem;white-space:nowrap;opacity:0;pointer-events:none;display:none;transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1),display .15s allow-discrete;z-index:10}[k=tooltip][side=bottom][title]:after{bottom:auto;top:100%;--k-to: .25rem}[k=tooltip][side=left][title]:after{top:50%;left:0;--k-tt: -50%;--k-tl: -100%;--k-to: 0}[k=tooltip][side=right][title]:after{top:50%;left:100%;--k-tt: -50%;--k-tl: 0;--k-to: 0}[k=tooltip][title]:hover:after,[k=tooltip][title]:focus:after{display:block;opacity:1;transform:translate(var(--k-tl),calc(var(--k-tt) + var(--k-to) * 2))}@starting-style{[k=tooltip][title]:hover:after,[k=tooltip][title]:focus:after{opacity:0;transform:translate(var(--k-tl),calc(var(--k-tt) + var(--k-to)))}}[k=progress]{width:100%;height:.5rem;-moz-appearance:none;appearance:none;-webkit-appearance:none;overflow:hidden;border-radius:var(--k-radius);background-color:hsl(var(--k-secondary))}[k=progress]::-webkit-progress-bar{background-color:transparent}[k=progress]::-webkit-progress-value{background-color:hsl(var(--k-primary));transition:all .3s var(--k-ease)}[k=progress]::-moz-progress-bar{background-color:hsl(var(--k-primary));transition:all .3s var(--k-ease)}[k=skeleton]{position:relative;overflow:hidden;background-color:hsl(var(--k-muted));border-radius:var(--k-radius)}[k=skeleton]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:p-skeleton 1.5s infinite}@keyframes p-skeleton{0%{transform:translate(-100%)}to{transform:translate(100%)}}[k=switch]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;width:2.625rem;height:1.375rem;border-radius:9999px;background-color:hsl(var(--k-input));border:1px solid hsl(var(--k-input));cursor:pointer;padding:0;transition:background-color .15s ease,border-color .15s ease}[k=switch]:before{content:"";position:absolute;top:.125rem;left:.1875rem;width:1rem;height:1rem;border-radius:9999px;background-color:hsl(var(--k-background));transition:transform .25s var(--k-ease)}[k=switch]:checked{background-color:hsl(var(--k-primary));border-color:hsl(var(--k-primary))}[k=switch]:checked:before{transform:translate(1.2rem)}[k=switch]:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--k-ring))}[k=switch]:disabled{opacity:.5;pointer-events:none}[k=textarea]{display:block;width:100%;border-radius:var(--k-radius);border:1px solid hsl(var(--k-input));background-color:hsl(var(--k-background));font:inherit;font-size:.875rem;min-height:2.5rem;padding:.5rem .75rem;resize:vertical;transition-property:color,background-color,border-color,box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}[k=textarea]:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--k-ring))}[k=textarea]:disabled{cursor:not-allowed;opacity:.5}[k=textarea]::placeholder{color:hsl(var(--k-muted-foreground))}[k=label]{display:inline-block;font-size:.875rem;font-weight:500;color:hsl(var(--k-foreground));cursor:pointer;-webkit-user-select:none;user-select:none}[k=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1rem;height:1rem;border:1px solid hsl(var(--k-input));border-radius:calc(var(--k-radius) - 2px);background-color:hsl(var(--k-background));display:inline-grid;place-content:center;cursor:pointer;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1)}[k=checkbox]:before{content:"";width:.5rem;height:.5rem;transform:scale(0);transition:transform .15s cubic-bezier(.4,0,.2,1);background-color:hsl(var(--k-foreground));clip-path:polygon(14% 44%,0 65%,50% 100%,100% 10%,80% 0%,43% 62%)}[k=checkbox]:checked{background-color:hsl(var(--k-primary));border-color:hsl(var(--k-primary))}[k=checkbox]:checked:before{transform:scale(1);background-color:hsl(var(--k-primary-foreground))}[k=checkbox]:disabled{opacity:.5;pointer-events:none}[k=radio-group]{display:flex;gap:.5rem;align-items:center}[k=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;width:1rem;height:1rem;border-radius:9999px;border:1px solid hsl(var(--k-input));background-color:hsl(var(--k-background));display:inline-grid;place-content:center;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1)}[k=radio]:before{content:"";width:.5rem;height:.5rem;border-radius:9999px;background-color:hsl(var(--k-primary));transform:scale(0);transition:transform .15s cubic-bezier(.4,0,.2,1)}[k=radio]:checked:before{transform:scale(1)}[k=radio]:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--k-ring))}[k=radio]:disabled{opacity:.5;pointer-events:none}[k=select]{display:inline-flex;align-items:center;border-radius:var(--k-radius);border:1px solid hsl(var(--k-input));background-color:hsl(var(--k-background));height:2.5rem;padding-left:.75rem;padding-right:2rem;font-size:.875rem;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23999"><path d="M5.8 7l4.2 4.2L14.2 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" /></svg>');background-repeat:no-repeat;background-size:1.6em;background-position:right .5rem center}[k=select]:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--k-ring))}[k=select]:disabled{opacity:.5;pointer-events:none}[k=slider]{--o: 1;width:100%;height:.375rem;border-radius:var(--k-radius);background:linear-gradient(to right,hsl(var(--k-primary) / var(--o)) var(--progress),hsl(var(--k-secondary)) var(--progress));-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;font-size:1rem}[k=slider]:disabled{--o: .5}[k=slider]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1em;height:1em;border-radius:9999px;background-color:hsl(var(--k-primary-foreground));border:1px solid hsl(var(--k-primary) / var(--o));transition:box-shadow .15s ease}[k=slider]:not(:disabled)::-webkit-slider-thumb:hover,[k=slider]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px hsl(var(--k-ring) / .2)}[k=slider]::-moz-range-thumb{width:1em;height:1em;border-radius:9999px;background-color:hsl(var(--k-primary-foreground));border:1px solid hsl(var(--k-primary) / var(--o));transition:box-shadow .15s ease}[k=slider]:not(:disabled)::-moz-range-thumb:hover,[k=slider]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px hsl(var(--k-ring) / .2)}[k=separator]{width:100%;height:1px;background-color:hsl(var(--k-border))}[k=avatar]{display:inline-block;width:2rem;height:2rem;border-radius:9999px;object-fit:cover;background-color:hsl(var(--k-muted));font-size:.01em;position:relative;overflow:hidden}[k=avatar]:after{position:absolute;display:block;left:0;top:0;width:100%;height:100%;background-color:hsl(var(--k-muted));font-size:100em;display:flex;align-items:center;justify-content:center;content:attr(alt)}[k=toggle]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid hsl(var(--k-input));background-color:hsl(var(--k-background));color:hsl(var(--k-foreground));border-radius:var(--k-radius);padding:.25rem .75rem;font-size:.875rem;cursor:pointer;transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1)}[k=toggle][aria-pressed=true]{border-color:hsl(var(--k-primary));background-color:hsl(var(--k-primary) / .8);color:hsl(var(--k-primary-foreground))}[k=toggle]:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--k-ring))}[k=toggle]:disabled{pointer-events:none;opacity:.5}[k=toggle-group]{display:inline-flex;gap:0}[k=toggle-group]>[k=toggle]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}[k=toggle-group]>[k=toggle]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[k=toggle-group]>[k=toggle]+[k=toggle]{margin-left:-1px}[k=toggle-group]>[k=toggle][aria-pressed=true],[k=toggle-group]>[k=toggle]:focus-visible{position:relative;z-index:1}[k=aspect-ratio]{position:relative;width:100%;--ratio: 1 / 1;aspect-ratio:var(--ratio)}[k=aspect-ratio]>*{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}[k=scroll-area]{overflow:auto;scrollbar-width:thin}[k=alert]{border-radius:var(--k-radius);border:1px solid hsl(var(--k-border));padding:1rem;background-color:hsl(var(--k-muted));color:hsl(var(--k-foreground))}[k=alert][variant=destructive]{background-color:hsl(var(--k-destructive));color:hsl(var(--k-destructive-foreground))}[k=table]{width:100%;border-collapse:collapse;font-size:.875rem}[k=table] th,[k=table] td{border:1px solid hsl(var(--k-border));padding:.5rem}[k=table] th{background-color:hsl(var(--k-muted));text-align:left}[k=toast-container]{position:fixed;bottom:1rem;right:1rem;width:20rem;pointer-events:none;--gap: .5rem;z-index:1000}[k=toast]{position:absolute;right:0;left:0;bottom:0;--scale: 1;--offset: 0;background:hsl(var(--k-popover));font-size:.875rem;height:4rem;color:hsl(var(--k-popover-foreground) / .7);border:1px solid hsl(var(--k-border));border-radius:var(--k-radius);padding:.5rem .75rem;box-shadow:0 4px 12px #00000026;opacity:0;transform:translateY(calc(100% + var(--offset))) scale(var(--scale));pointer-events:auto;transition:transform .4s var(--k-ease-elastic),opacity .4s var(--k-ease-elastic);display:grid;grid-template:auto auto / 0fr auto 1fr;grid-auto-flow:column;grid-column-gap:.5rem;align-items:center;align-content:center}[k=toast]:after{content:"";position:absolute;top:100%;left:0;width:100%;height:.75rem}[k=toast-container]:hover [k=toast]{--gap: -4.5rem;transform:translateY(var(--offset))}[k=toast-icon]{grid-area:1 / 1 / 3 / 2}[k=toast-title]{grid-area:1 / 2 / 2 / 3}[k=toast-action]{grid-area:1 / 3 / 3 / 4}[k=toast-title]{margin:0;padding:0;font:inherit;line-height:inherit;font-weight:600;color:hsl(var(--k-popover-foreground))}[k=toast-content]{max-height:2rem;line-clamp:2;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis!important}[k=toast-title]+[k=toast-content]{font-size:.8rem}[k=toast] [k=button]{height:auto;border-radius:calc(var(--k-radius) - 2px);padding:.2rem .4rem;font-size:.8125rem}[k=toast]:nth-last-child(4){--offset: calc(3 * var(--gap));--scale: .85;z-index:0}[k=toast]:nth-last-child(3){--offset: calc(2 * var(--gap));--scale: .9;z-index:1}[k=toast]:nth-last-child(2){--offset: var(--gap);--scale: .95;z-index:2}[k=toast]:nth-last-child(1){--offset: 0;--scale: 1;z-index:3}[k=toast][data-mounted]{opacity:1;transform:translateY(calc(-1 * var(--offset))) scale(var(--scale))}[k=toast]:nth-last-child(1):not([data-mounted]){transform:translateY(calc(100% + .25rem)) scale(var(--scale))}[k=toast][data-closing]{opacity:0;transform:translateY(calc(110% + var(--offset))) scale(var(--scale))}[k=collapsible]>summary{display:none}[k=collapsible]::details-content{overflow:clip;height:0;transition:height .25s var(--k-ease),content-visibility .25s linear allow-discrete}@supports (interpolate-size: allow-keywords){:root{interpolate-size:allow-keywords}[k=collapsible][open]::details-content{height:auto}}@supports not (interpolate-size: allow-keywords){[k=collapsible]::details-content{transition:none}[k=collapsible][open]::details-content{height:auto}}[k=resizable]{resize:both;overflow:auto;border:1px solid hsl(var(--k-border));border-radius:var(--k-radius);padding:1rem;min-width:2rem;min-height:2rem}[k=sheet-content]{border:none;padding:1rem;margin:0;width:20rem;max-width:90vw;height:100vh;max-height:100vh;position:fixed;left:auto;top:0;right:0;bottom:0;background-color:hsl(var(--k-background));box-shadow:0 4px 12px #00000026;border-radius:0;overscroll-behavior:contain;transform:translate(100%);transition:transform .3s var(--k-ease),display .3s allow-discrete,overlay .3s allow-discrete}[k=sheet-content][open]{transform:translate(0)}@starting-style{[k=sheet-content][open]{transform:translate(100%)}}[k=sheet-content]::backdrop{background-color:#000c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);overscroll-behavior:contain;overflow:auto;scrollbar-width:none;opacity:0;transition:opacity .3s var(--k-ease),display .3s allow-discrete,overlay .3s allow-discrete}[k=sheet-content][open]::backdrop{opacity:1}@starting-style{[k=sheet-content][open]::backdrop{opacity:0}}[k=sidebar]{position:fixed;top:0;left:0;bottom:0;width:16rem;height:100vh;max-height:100vh;margin:0;padding:.5rem;flex-shrink:0;display:flex;flex-direction:column;border:none;border-right:1px solid hsl(var(--k-border));background-color:hsl(var(--k-sidebar));overflow:auto;overscroll-behavior:contain;transition:all .3s var(--k-ease);z-index:500;gap:.5rem}[k=sidebar] nav{display:flex;flex-direction:column}[k=sidebar] nav a,[k=sidebar] nav button{display:flex;align-items:center;padding:.35rem .75rem;border:none;background:transparent;color:hsl(var(--k-foreground));font-size:.875rem;line-height:1.25rem;border-radius:.375rem;cursor:pointer;transition:all .15s ease;text-decoration:none;width:100%}[k=sidebar] nav a:hover,[k=sidebar] nav button:hover,[k=sidebar] nav a[aria-current=page],[k=sidebar] nav button[aria-current=page]{background-color:hsl(var(--k-accent));color:hsl(var(--k-accent-foreground))}[k=sidebar] h2,[k=sidebar] h3{font-size:.75rem;font-weight:600;color:hsl(var(--k-muted-foreground));text-transform:uppercase;letter-spacing:.05em;margin:.5rem 0 0;padding:0 .75rem}@media (min-width: 641px){[k=sidebar]+*{transition:padding-left .3s var(--k-ease)}[k=sidebar]:not([hidden])+*{padding-left:16rem}[k=sidebar][hidden]{margin-right:-16rem;transform:translate(-100%);opacity:0;pointer-events:none}}@media (max-width: 640px){[k=sidebar]{--modal: 1;position:fixed;max-width:80vw;border-right:none;background-color:hsl(var(--k-background));transform:translate(-20px) translate(-100%);transition:transform .3s var(--k-ease);box-shadow:0 0 15px #00000026}[k=sidebar][open]{transform:none}[k=sidebar]::backdrop{background-color:#000c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);overscroll-behavior:contain;overflow:auto;scrollbar-width:none}}[k=breadcrumb-list]{list-style:none;display:flex;gap:.25rem;padding:0;margin:0}[k=breadcrumb-item]:after{content:"/";padding:0 .25rem}[k=breadcrumb-item]:last-child:after{content:none}[k=breadcrumb-link]{color:inherit;text-decoration:none}[k=breadcrumb-link]:hover{text-decoration:underline}[k=menubar]{display:flex;gap:.5rem}[k=menubar-item]{background:none;border:none;padding:.25rem .5rem;cursor:pointer;font:inherit;color:inherit}[k=menubar-item]:hover{background-color:hsl(var(--k-muted))}[k=navigation-menu-list]{list-style:none;display:flex;gap:.5rem;padding:0;margin:0}[k=navigation-menu-link]{text-decoration:none;color:inherit;padding:.25rem .5rem;border-radius:var(--k-radius)}[k=navigation-menu-link]:hover{background-color:hsl(var(--k-muted))}[k=pagination-list]{list-style:none;display:flex;gap:.25rem;padding:0;margin:0}[k=pagination-link]{background:none;border:1px solid hsl(var(--k-border));border-radius:var(--k-radius);padding:.25rem .5rem;cursor:pointer}[k=pagination-link]:hover{background-color:hsl(var(--k-muted))}[k=pagination-link][aria-current=page]{background-color:hsl(var(--k-primary));color:hsl(var(--k-primary-foreground));border-color:hsl(var(--k-primary))}[k=combobox]{position:relative;display:inline-block}[k=combobox-input]{display:block;width:100%;padding:.5rem .75rem;border:1px solid hsl(var(--k-input));border-radius:var(--k-radius);background-color:hsl(var(--k-background));font:inherit;font-size:.875rem}[k=combobox-list]{width:100%}[k=combobox-list] ul{list-style:none;margin:0;padding:0}body [k=context-menu]{position:fixed;left:var(--k-context-menu-client-x, 0px);top:var(--k-context-menu-client-y, 0px);--tf-x: 0;min-width:6rem;margin:0;max-inline-size:calc(100vw - .5rem);max-block-size:calc(100dvh - .5rem);overflow:auto}@position-try --k-context-menu-right-top{left:auto;right:var(--k-context-menu-client-right, 0px);top:var(--k-context-menu-client-y, 0px);bottom:auto}@position-try --k-context-menu-left-bottom{left:var(--k-context-menu-client-x, 0px);right:auto;top:auto;bottom:var(--k-context-menu-client-bottom, 0px)}@position-try --k-context-menu-right-bottom{left:auto;right:var(--k-context-menu-client-right, 0px);top:auto;bottom:var(--k-context-menu-client-bottom, 0px)}@supports (position-try-fallbacks: --k-context-menu-right-top){body [k=context-menu]{position-try-fallbacks:--k-context-menu-right-top,--k-context-menu-left-bottom,--k-context-menu-right-bottom}}[k=context-menu]::backdrop{opacity:0}[k=drawer-content]{border:none;padding:1rem;margin:0;width:100%;max-width:100vw;border-radius:0;position:fixed;top:auto;bottom:0;left:0;background-color:hsl(var(--k-background));overscroll-behavior:contain;transform:translateY(100%);transition:transform .3s var(--k-ease),display .3s allow-discrete,overlay .3s allow-discrete}[k=drawer-content][open]{transform:translateY(0)}@starting-style{[k=drawer-content][open]{transform:translateY(100%)}}[k=drawer-content]::backdrop{background-color:#000c;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);overscroll-behavior:contain;overflow:auto;scrollbar-width:none;opacity:0;transition:opacity .3s var(--k-ease),display .3s allow-discrete,overlay .3s allow-discrete}[k=drawer-content][open]::backdrop{opacity:1}@starting-style{[k=drawer-content][open]::backdrop{opacity:0}}[k=popover],[k=dropdown]{position:relative;display:inline-block;overflow:visible}[k=popover],[k=dropdown],[k=combobox]{anchor-scope:--k-trigger}[k=popover]>[commandfor],[k=dropdown]>[commandfor],[k=combobox]>[k=combobox-input]{anchor-name:--k-trigger}[k=popover-content],[k=dropdown-content],[k=context-menu],[k=combobox-list]{position:absolute;display:none;top:100%;left:50%;--tf-x: -50%;min-width:100%;transform-origin:top center;background-color:hsl(var(--k-popover));color:hsl(var(--k-popover-foreground));border-radius:var(--k-radius);border:1px solid hsl(var(--k-border));padding:0;margin:.25rem 0 0;box-shadow:0 4px 12px #00000026;pointer-events:none;opacity:0;transform:translate(var(--tf-x)) scale(.94);transition:opacity .2s var(--k-ease),transform .2s var(--k-ease),display .2s allow-discrete,overlay .2s allow-discrete;z-index:10;outline:none}[k=popover-content][open],[k=dropdown-content][open],[k=context-menu][open],[k=combobox-list][open]{display:inline-block;pointer-events:auto;opacity:1;transform:translate(var(--tf-x)) scale(1)}@starting-style{[k=popover-content][open],[k=dropdown-content][open],[k=context-menu][open],[k=combobox-list][open]{opacity:0;transform:translate(var(--tf-x)) scale(.94)}}@position-try --k-menu-right-top{left:auto;right:anchor(right);top:anchor(bottom);bottom:auto;margin:.25rem 0 0}@position-try --k-menu-left-bottom{left:anchor(left);right:auto;top:auto;bottom:anchor(top);margin:0 0 .25rem}@position-try --k-menu-right-bottom{left:auto;right:anchor(right);top:auto;bottom:anchor(top);margin:0 0 .25rem}@supports (position-anchor: --k-trigger) and (position-try-fallbacks: --k-menu-right-top){[k=popover-content],[k=dropdown-content],[k=combobox-list]{position:fixed;position-anchor:--k-trigger;left:anchor(left);right:auto;top:anchor(bottom);bottom:auto;margin:.25rem 0 0;width:max-content;max-inline-size:min(24rem,calc(100vw - 1rem));max-block-size:min(24rem,calc(100dvh - 1rem));overflow:auto;position-try-fallbacks:--k-menu-right-top,--k-menu-left-bottom,--k-menu-right-bottom}[k=popover-content]{--tf-x: 0;min-width:anchor-size(width)}[k=dropdown-content]{--tf-x: 0;min-width:max(13.5rem,anchor-size(width))}[k=combobox-list]{--tf-x: 0;min-width:anchor-size(width)}}[k=dropdown-content]{left:0;--tf-x: 0;min-width:max(13.5rem,100%)}[k=dropdown-content][to=left]{left:auto;right:0;--tf-x: 0;min-width:max(13.5rem,100%)}[k=dropdown-content],[k=context-menu],[k=combobox-list]{border-radius:calc(var(--k-radius) + .25rem);border-color:hsl(var(--k-border));padding:.5rem;box-shadow:0 14px 30px #00000024}[k=dropdown-menu-item],[k=context-menu-item],[k=combobox-option]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;gap:.5rem;width:100%;background:none;border:none;border-radius:calc(var(--k-radius) - .125rem);text-align:left;padding:.5rem .75rem;min-height:2.375rem;white-space:nowrap;font:inherit;font-size:1.05rem;line-height:1.2;cursor:pointer;color:inherit;text-decoration:none;outline:none}[k=dropdown-menu-item]:hover,[k=dropdown-menu-item]:focus-visible,[k=dropdown-menu-item][selected],[k=context-menu-item]:hover,[k=context-menu-item]:focus-visible,[k=context-menu-item][selected],[k=combobox-option]:hover,[k=combobox-option]:focus-visible,[k=combobox-option][selected]{background-color:hsl(var(--k-primary));color:hsl(var(--k-primary-foreground))}[k=dropdown-menu-item][disabled],[k=dropdown-menu-item]:disabled,[k=context-menu-item][disabled],[k=context-menu-item]:disabled,[k=combobox-option][disabled],[k=combobox-option]:disabled{opacity:.45;pointer-events:none}[k=dropdown-menu-item][shortcut]:after,[k=context-menu-item][shortcut]:after,[k=combobox-option][shortcut]:after{content:attr(shortcut);margin-left:auto;color:hsl(var(--k-muted-foreground));letter-spacing:.02em}[k=dropdown-menu-item][shortcut]:hover:after,[k=dropdown-menu-item][shortcut]:focus-visible:after,[k=dropdown-menu-item][selected]:after,[k=context-menu-item][shortcut]:hover:after,[k=context-menu-item][shortcut]:focus-visible:after,[k=context-menu-item][selected]:after,[k=combobox-option][shortcut]:hover:after,[k=combobox-option][shortcut]:focus-visible:after,[k=combobox-option][selected]:after{color:inherit;opacity:.85}[k=dropdown-menu-item][destructive],[k=context-menu-item][destructive],[k=combobox-option][destructive]{color:hsl(var(--k-destructive))}[k=dropdown-content] hr,[k=context-menu] hr,[k=combobox-list] hr,[k=dropdown-content] [role=separator],[k=context-menu] [role=separator],[k=combobox-list] [role=separator],[k=dropdown-content] [k=separator],[k=context-menu] [k=separator],[k=combobox-list] [k=separator]{border:0;border-top:1px solid hsl(var(--k-border));height:0;margin:.5rem .25rem}@supports (position-anchor: --k-trigger){[k=dropdown-content]{left:anchor(left);right:auto;--tf-x: 0;min-width:max(13.5rem,anchor-size(width))}[k=dropdown-content][to=left]{left:auto;right:anchor(right);--tf-x: 0;min-width:max(13.5rem,anchor-size(width))}}[k=hover-card]{position:relative;display:inline-block}[k=hover-card-content]{position:absolute;top:100%;left:50%;width:max-content;transform:translate(-50%) scale(.95);transform-origin:top center;background-color:hsl(var(--k-popover));color:hsl(var(--k-popover-foreground));border-radius:var(--k-radius);border:1px solid hsl(var(--k-border));padding:.5rem;margin-top:.25rem;box-shadow:0 4px 12px #00000026;opacity:0;pointer-events:none;transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);z-index:10}[k=hover-card]:hover>[k=hover-card-content]{opacity:1;pointer-events:auto;transform:translate(-50%) scale(1)}[k=calendar]{padding:.25rem .5rem;border:1px solid hsl(var(--k-input));border-radius:var(--k-radius)}[k=carousel]{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;width:100%;height:200px;scrollbar-width:none;-ms-overflow-style:none}[k=carousel]::-webkit-scrollbar{display:none}[k=carousel-item]{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;justify-content:center}[k=carousel-previous],[k=carousel-next]{position:absolute;top:50%;transform:translateY(-50%);background:#00000080;color:#fff;border:none;padding:.5rem;cursor:pointer;font-size:1.2rem;border-radius:.25rem;z-index:1}[k=carousel-previous]:hover,[k=carousel-next]:hover{background:#000000b3}[k=carousel-previous]{left:.5rem}[k=carousel-next]{right:.5rem}[k=color-picker]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:2.5rem;height:2.5rem;padding:.25rem;border:1px solid hsl(var(--k-input));border-radius:var(--k-radius);background-color:hsl(var(--k-background));cursor:pointer}[k=color-picker]::-webkit-color-swatch-wrapper{padding:0;border-radius:calc(var(--k-radius) - 4px)}[k=color-picker]::-webkit-color-swatch{border:none;border-radius:calc(var(--k-radius) - 4px)}[k=color-picker]::-moz-color-swatch{border:none;border-radius:calc(var(--k-radius) - 4px)}[k=color-picker]:focus-visible{outline:none;box-shadow:0 0 0 2px hsl(var(--k-ring))}[k=color-picker]:disabled{cursor:not-allowed;opacity:.5}[k=date-picker]{padding:.25rem .5rem;border:1px solid hsl(var(--k-input));border-radius:var(--k-radius)}[k=file-upload]{font:inherit;font-size:.875rem}[k=file-upload]::file-selector-button{margin-right:.75rem;padding:.25rem .75rem;border:1px solid hsl(var(--k-input));border-radius:var(--k-radius);background-color:hsl(var(--k-background));font:inherit;font-weight:500;cursor:pointer}[k=file-upload]::file-selector-button:hover{background-color:hsl(var(--k-accent))}[k=file-upload]:disabled{opacity:.5;cursor:not-allowed}[k=time-picker]{padding:.25rem .5rem;border:1px solid hsl(var(--k-input));border-radius:var(--k-radius)}[k=spinner]{display:inline-block;width:1.5rem;height:1.5rem;--k-spinner-color: currentColor;--k-spinner-track: hsl(var(--k-muted-foreground) / .6);border:2px solid transparent;border-top-color:var(--k-spinner-color);border-radius:9999px;animation:p-spinner-spin 1s linear infinite;flex-shrink:0;position:relative;box-sizing:border-box}[k=spinner]:before,[k=spinner]:after{box-sizing:border-box}[k=spinner][variant=primary]{--k-spinner-color: hsl(var(--k-primary))}[k=spinner][variant=secondary]{--k-spinner-color: hsl(var(--k-muted-foreground))}[k=spinner][variant=destructive]{--k-spinner-color: hsl(var(--k-destructive))}[k=spinner][size=sm]{width:1rem;height:1rem}[k=spinner][size=lg]{width:2rem;height:2rem;border-width:3px}[k=spinner][type=turn]{border:2px solid var(--k-spinner-track);animation:p-spinner-spin .9s linear infinite}[k=spinner][type=turn]:after{content:"";position:absolute;top:.175rem;right:.175rem;bottom:.175rem;left:.175rem;border-radius:9999px;border:2px solid;border-color:var(--k-spinner-color) transparent}[k=spinner][type=concentric]{border:2px solid;border-color:var(--k-spinner-track) var(--k-spinner-track) transparent;animation:p-spinner-spin 1s linear infinite}[k=spinner][type=concentric]:after{content:"";position:absolute;top:.25rem;right:.25rem;bottom:.25rem;left:.25rem;border-radius:9999px;border:2px solid;border-color:transparent var(--k-spinner-color) var(--k-spinner-color);animation:p-spinner-rotation-back .55s linear infinite}[k=spinner][type=ripple]{border:0;animation:none}[k=spinner][type=ripple]:before,[k=spinner][type=ripple]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9999px;border:2px solid var(--k-spinner-color);animation:p-spinner-ripple 1.8s linear infinite}[k=spinner][type=ripple]:after{animation-delay:.9s}[k=spinner][type=light]{border:0;border-radius:9999px;padding:2px;background:var(--k-spinner-color);--k-spinner-light-mask: conic-gradient(transparent 12%, #000), linear-gradient(#000 0 0) content-box;-webkit-mask:var(--k-spinner-light-mask);mask:var(--k-spinner-light-mask);-webkit-mask-composite:xor;mask-composite:subtract;animation:p-spinner-spin .95s linear infinite}[k=spinner][type=light]:after{content:none}[k=spinner][type=radar]{border:0;background:color-mix(in srgb,var(--k-spinner-color) 12%,transparent);border-radius:9999px;animation:p-spinner-radar-pulse 2s linear infinite}[k=spinner][type=radar]:before,[k=spinner][type=radar]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:9999px;background:var(--k-spinner-color);opacity:.25;animation:p-spinner-radar-rings 2s ease-out infinite}[k=spinner][type=radar]:after{animation-delay:1s}[k=spinner][type=bubble]{border:0;animation:p-spinner-spin .95s linear infinite}[k=spinner][type=bubble]:before,[k=spinner][type=bubble]:after{content:"";position:absolute;top:50%;left:50%;width:50%;height:50%;border-radius:9999px}[k=spinner][type=bubble]:before{background:color-mix(in srgb,var(--k-spinner-track) 85%,transparent);animation:p-spinner-bubble-muted 1s ease-in-out infinite}[k=spinner][type=bubble]:after{background:var(--k-spinner-color);animation:p-spinner-bubble-primary 1s ease-in-out infinite}[k=spinner][type=circle]{border:2px solid var(--k-spinner-color);border-radius:9999px;animation:p-spinner-circle-clip .8s infinite linear alternate,p-spinner-circle-flip 1.6s infinite linear}[k=spinner][type=dots]{border:0;border-radius:0;width:1.5rem;height:.75rem;aspect-ratio:2;--k-spinner-dot: no-repeat radial-gradient(circle closest-side, var(--k-spinner-color) 88%, transparent);background:var(--k-spinner-dot) 0% 50%,var(--k-spinner-dot) 50% 50%,var(--k-spinner-dot) 100% 50%;background-size:calc(100% / 3) 70%;animation:p-spinner-dots 1s infinite linear}[k=spinner][size=sm][variant=dots]{width:1rem;height:.5rem}[k=spinner][size=lg][variant=dots]{width:2rem;height:1rem}[k=spinner][type=fold]{border:0;transform:rotate(45deg);animation:none}[k=spinner][type=fold]:before{content:"";position:absolute;width:50%;height:50%;left:0;top:-50%;box-shadow:0 .75rem transparent,.75rem .75rem transparent,.75rem 1.5rem transparent,0 1.5rem transparent;animation:p-spinner-fold-cells 2.8s ease infinite}[k=spinner][type=fold]:after{content:"";position:absolute;width:50%;height:50%;left:0;top:0;background:color-mix(in srgb,var(--k-spinner-color) 85%,transparent);box-shadow:0 0 10px hsl(var(--k-foreground) / .12);animation:p-spinner-fold-face 1.4s ease infinite}@keyframes p-spinner-spin{to{transform:rotate(360deg)}}@keyframes p-spinner-rotation-back{to{transform:rotate(-360deg)}}@keyframes p-spinner-ripple{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:0}}@keyframes p-spinner-radar-pulse{0%,to{background:color-mix(in srgb,var(--k-spinner-color) 10%,transparent)}50%{background:color-mix(in srgb,var(--k-spinner-color) 18%,transparent)}}@keyframes p-spinner-radar-rings{0%{transform:scale(.15);opacity:.45}to{transform:scale(1);opacity:0}}@keyframes p-spinner-bubble-muted{0%,to{transform:translate(-20%,-20%) scale(.55)}50%{transform:translate(-90%,-90%) scale(1)}}@keyframes p-spinner-bubble-primary{0%,to{transform:translate(-100%,-100%) scale(.55)}50%{transform:translate(-30%,-30%) scale(1)}}@keyframes p-spinner-circle-clip{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0 100%)}}@keyframes p-spinner-circle-flip{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}@keyframes p-spinner-dots{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}@keyframes p-spinner-fold-cells{0%{box-shadow:0 .75rem transparent,.75rem .75rem transparent,.75rem 1.5rem transparent,0 1.5rem transparent}12%{box-shadow:0 .75rem var(--k-spinner-color),.75rem .75rem transparent,.75rem 1.5rem transparent,0 1.5rem transparent}25%{box-shadow:0 .75rem var(--k-spinner-color),.75rem .75rem var(--k-spinner-color),.75rem 1.5rem transparent,0 1.5rem transparent}37%{box-shadow:0 .75rem var(--k-spinner-color),.75rem .75rem var(--k-spinner-color),.75rem 1.5rem var(--k-spinner-color),0 1.5rem transparent}50%{box-shadow:0 .75rem var(--k-spinner-color),.75rem .75rem var(--k-spinner-color),.75rem 1.5rem var(--k-spinner-color),0 1.5rem var(--k-spinner-color)}62%{box-shadow:0 .75rem transparent,.75rem .75rem var(--k-spinner-color),.75rem 1.5rem var(--k-spinner-color),0 1.5rem var(--k-spinner-color)}75%{box-shadow:0 .75rem transparent,.75rem .75rem transparent,.75rem 1.5rem var(--k-spinner-color),0 1.5rem var(--k-spinner-color)}87%{box-shadow:0 .75rem transparent,.75rem .75rem transparent,.75rem 1.5rem transparent,0 1.5rem var(--k-spinner-color)}to{box-shadow:0 .75rem transparent,.75rem .75rem transparent,.75rem 1.5rem transparent,0 1.5rem transparent}}@keyframes p-spinner-fold-face{0%{transform:translate(0) rotateX(0) rotateY(0)}25%{transform:translate(100%) rotateY(180deg)}50%{transform:translate(100%,100%) rotateX(-180deg) rotateY(180deg)}75%{transform:translateY(100%) rotateX(-180deg) rotateY(360deg)}to{transform:translate(0) rotateY(360deg)}}[k=input-group]{display:flex;align-items:stretch;border:none;padding:0;margin:0}[k=input-group]>:is([k=input],[k=textarea],[k=select],input,textarea,select){flex:1}[k=input-group]>:is([k=input],[k=textarea],[k=select],[k=button],input,textarea,select,button){border-radius:0}[k=input-group]>:is([k=input],[k=textarea],[k=select],input,textarea,select):not(:last-child){border-inline-end:0}[k=input-group]>:is([k=input],[k=textarea],[k=select],[k=button],input,textarea,select,button):first-child{border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius)}[k=input-group]>:is([k=input],[k=textarea],[k=select],[k=button],input,textarea,select,button):last-child{border-start-end-radius:var(--k-radius);border-end-end-radius:var(--k-radius)}[k=input-group]>legend{float:inline-start;display:inline-flex;align-items:center;padding:0 .75rem;font-size:.875rem;font-weight:400;color:hsl(var(--k-muted-foreground));background-color:hsl(var(--k-muted));border:1px solid hsl(var(--k-input));border-inline-end:none;border-start-start-radius:var(--k-radius);border-end-start-radius:var(--k-radius)}[k=input-group]:has(>:is([k=input],[k=textarea],[k=select]):focus-visible):not(:has(>:is([k=input],[k=textarea],[k=select])~:is([k=input],[k=textarea],[k=select]))){box-shadow:0 0 0 2px hsl(var(--k-ring));border-radius:var(--k-radius)}[k=input-group]:has(>:is([k=input],[k=textarea],[k=select]):focus-visible):not(:has(>:is([k=input],[k=textarea],[k=select])~:is([k=input],[k=textarea],[k=select])))>:is([k=input],[k=textarea],[k=select]):focus-visible{box-shadow:none;border-color:hsl(var(--k-input))}[k=tree]{--k-tree-indent: 1rem;display:grid;gap:.125rem;font-size:.875rem}[k=tree-item]{margin:0}[k=tree-item]::details-content{overflow:clip;height:0;transition:height .25s var(--k-ease),content-visibility .25s linear allow-discrete}@supports (interpolate-size: allow-keywords){:root{interpolate-size:allow-keywords}[k=tree-item][open]::details-content{height:auto}}@supports not (interpolate-size: allow-keywords){[k=tree-item]::details-content{transition:none}[k=tree-item][open]::details-content{height:auto}}[k=tree-item]>[k=tree-label]{list-style:none;display:flex;align-items:center;gap:.375rem;cursor:pointer;color:hsl(var(--k-foreground));border-radius:calc(var(--k-radius) - 2px);padding:.25rem .5rem}[k=tree-item]>[k=tree-label]::-webkit-details-marker{display:none}[k=tree-item]>[k=tree-label]:before{content:"▸";color:hsl(var(--k-muted-foreground));opacity:.5;transition:transform .2s var(--k-ease)}[k=tree-item][open]>[k=tree-label]:before{transform:rotate(90deg)}[k=tree-group]{display:grid;gap:.125rem;margin-inline-start:var(--k-tree-indent);border-inline-start:1px solid hsl(var(--k-border));padding-inline-start:.5rem}[k=tree-leaf]{border:0;margin:0;background:transparent;color:hsl(var(--k-foreground));text-align:left;border-radius:calc(var(--k-radius) - 2px);padding:.25rem .5rem;font:inherit;width:100%;cursor:pointer}[k=tree-item]>[k=tree-label]:is(:hover,:focus-visible),[k=tree-leaf]:is(:hover,:focus-visible){background:hsl(var(--k-accent));color:hsl(var(--k-accent-foreground))}[k=tree-item]>[k=tree-label]:focus-visible,[k=tree-leaf]:focus-visible{outline:2px solid hsl(var(--k-ring));outline-offset:1px}:root{--k-background: 0 0% 100%;--k-foreground: 222.2 84% 4.9%;--k-card: 0 0% 100%;--k-card-foreground: 222.2 84% 4.9%;--k-popover: 0 0% 100%;--k-popover-foreground: 222.2 84% 4.9%;--k-sidebar: 0 0% 98%;--k-primary: 222.2 47.4% 11.2%;--k-primary-foreground: 210 40% 98%;--k-primary-hover: 222.2 47.4% 8.2%;--k-secondary: 210 40% 96%;--k-secondary-foreground: 222.2 84% 4.9%;--k-secondary-hover: 210 40% 92%;--k-muted: 210 40% 96%;--k-muted-foreground: 215.4 16.3% 46.9%;--k-accent: 210 40% 95%;--k-accent-foreground: 222.2 84% 4.9%;--k-destructive: 0 84.2% 60.2%;--k-destructive-foreground: 210 40% 98%;--k-destructive-hover: 0 84.2% 50.2%;--k-border: 214.3 31.8% 91.4%;--k-input: 214.3 31.8% 91.4%;--k-ring: 222.2 84% 4.9%;--k-radius: .5rem;--k-ease-fallback: cubic-bezier(.4, 0, .2, 1);--k-ease-out: var(--k-ease-fallback);--k-ease-elastic: var(--k-ease-fallback);--k-ease-spring: var(--k-ease-fallback);--k-ease-out: linear( 0, .012 .9%, .049 2%, .409 9.3%, .513 11.9%, .606 14.7%, .691 17.9%, .762 21.3%, .82 25%, .868 29.1%, .907 33.6%, .937 38.7%, .976 51.3%, .994 68.8%, 1 );--k-ease-elastic: linear( 0, .007 1.2%, .027 2.5%, .109 5.4%, .573 16.5%, .766 22.1%, .838 24.8%, .898 27.6%, .946 30.5%, .983 33.5%, 1.021 39.1%, 1.035 46%, 1.004 74.2%, 1 );--k-ease-spring: linear( 0, -.012 8.8%, -.081 25.4%, -.078 29.8%, -.052 33.7%, .024 38.6%, .149 43%, .318 46.9%, .785 55.3%, .924 59.3%, 1.017 63.6%, 1.068 68.2%, 1.082 73.4%, 1.07 78.2%, 1.011 91.5%, 1 );--k-ease: var(--k-ease-out)}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--k-background: 222.2 50% 7%;--k-foreground: 210 40% 98%;--k-card: 222.2 84% 4.9%;--k-card-foreground: 210 40% 98%;--k-popover: 222.2 84% 4.9%;--k-popover-foreground: 210 40% 98%;--k-sidebar: 222.2 50% 9%;--k-primary: 210 40% 98%;--k-primary-foreground: 222.2 47.4% 11.2%;--k-primary-hover: 210 40% 90%;--k-secondary: 217.2 32.6% 17.5%;--k-secondary-foreground: 210 40% 98%;--k-secondary-hover: 217.2 32.6% 25%;--k-muted: 217.2 32.6% 17.5%;--k-muted-foreground: 215 20.2% 65.1%;--k-accent: 217.2 32.6% 17.5%;--k-accent-foreground: 210 40% 98%;--k-destructive: 0 62.8% 30.6%;--k-destructive-foreground: 210 40% 98%;--k-destructive-hover: 0 62.8% 40%;--k-border: 217.2 32.6% 17.5%;--k-input: 217.2 32.6% 17.5%;--k-ring: 212.7 26.8% 83.9%}}.dark{color-scheme:dark;--k-background: 222.2 50% 7%;--k-foreground: 210 40% 98%;--k-card: 222.2 84% 4.9%;--k-card-foreground: 210 40% 98%;--k-popover: 222.2 84% 4.9%;--k-popover-foreground: 210 40% 98%;--k-sidebar: 222.2 50% 9%;--k-primary: 210 40% 98%;--k-primary-foreground: 222.2 47.4% 11.2%;--k-primary-hover: 210 40% 90%;--k-secondary: 217.2 32.6% 17.5%;--k-secondary-foreground: 210 40% 98%;--k-secondary-hover: 217.2 32.6% 25%;--k-muted: 217.2 32.6% 17.5%;--k-muted-foreground: 215 20.2% 65.1%;--k-accent: 217.2 32.6% 17.5%;--k-accent-foreground: 210 40% 98%;--k-destructive: 0 62.8% 30.6%;--k-destructive-foreground: 210 40% 98%;--k-destructive-hover: 0 62.8% 40%;--k-border: 217.2 32.6% 17.5%;--k-input: 217.2 32.6% 17.5%;--k-ring: 212.7 26.8% 83.9%}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.1}p{margin:.5rem 0}ul,ol{margin-left:1.25rem;padding:0}

package/dist/index.js

@@ -0,0 +1,820 @@
+import { options as q, h as O, cloneElement as H, createContext as g } from "preact";
+import { jsx as u, jsxs as W } from "preact/jsx-runtime";
+import { useId as v, useContext as m, useState as z, useEffect as U } from "preact/hooks";
+let B;
+function b() {
+  B || typeof document > "u" || (B = !0, !("commandFor" in HTMLButtonElement.prototype) && addEventListener("click", V));
+}
+function R(t) {
+  return "closest" in t ? t : t.parentNode;
+}
+function V(t) {
+  var a;
+  const e = R(t.target), n = e.closest("[command]");
+  if (!n || t.defaultPrevented) return;
+  const o = n.getAttribute("commandfor"), i = o ? document.getElementById(o) : e;
+  if (!i) return;
+  t.preventDefault();
+  const c = n.getAttribute("command") || "toggle-popover";
+  if (c[0] === "-") {
+    const d = Object.defineProperties(
+      new Event("command", { bubbles: !0, cancelable: !0 }),
+      {
+        source: { value: n },
+        command: { value: c }
+      }
+    );
+    i.dispatchEvent(d);
+    return;
+  }
+  const s = c.replace(/-([a-z])/g, (d, l) => l.toUpperCase());
+  (a = i[s]) == null || a.call(i);
+}
+let F;
+function k() {
+  F || typeof document > "u" || (F = !0, addEventListener("click", X, !0));
+}
+function X(t) {
+  const e = t.target;
+  if (e.localName === "dialog" && e.getAttribute("k")) {
+    const { clientX: n, clientY: o } = t, { left: i, right: c, top: s, bottom: a } = e.getBoundingClientRect();
+    if (n < i || n > c || o < s || o > a) {
+      e.close(), t.preventDefault();
+      return;
+    }
+  }
+  for (const n of Array.from(
+    document.querySelectorAll(
+      '[k="dropdown-content"],[k="popover-content"]'
+    )
+  ))
+    n.contains(e) || n.close();
+}
+let _;
+function j() {
+  _ || typeof document > "u" || (_ = !0, addEventListener("keydown", Y));
+}
+function Y(t) {
+  const e = R(t.target);
+  let n = e.closest("dialog[k]"), o = !0;
+  if (n || (n = e.parentNode.querySelector("dialog[k][open]"), o = !1), !n) return;
+  const i = n.querySelector(
+    o ? "[k]:focus" : "[k][selected]"
+  );
+  if (t.key === "Enter" && !o) {
+    t.preventDefault(), i == null || i.click();
+    return;
+  }
+  const c = t.key === "ArrowDown" ? 1 : t.key === "ArrowUp" ? -1 : 0;
+  if (!c) return;
+  if (t.preventDefault(), !i) {
+    const d = n.querySelectorAll("button[k],[k][tabindex]"), l = d[c > 0 ? 0 : d.length - 1];
+    o ? l == null || l.focus() : l == null || l.toggleAttribute("selected", !0);
+    return;
+  }
+  const s = i.getAttribute("k");
+  if (!i) return;
+  let a = i;
+  for (; a = a[c > 0 ? "nextElementSibling" : "previousElementSibling"]; )
+    if (a.getAttribute("k") === s) {
+      o ? a.focus() : (i.toggleAttribute("selected", !1), a.toggleAttribute("selected", !0)), t.preventDefault();
+      break;
+    }
+}
+const N = q.__b;
+q.__b = (t) => {
+  const e = t.type;
+  if (typeof e == "function" && "_pf" in e) {
+    const n = t.ref;
+    n && (t.props.ref = n, t.ref = null);
+  }
+  N && N(t);
+};
+function K(t) {
+  function e(n) {
+    const o = n.ref;
+    return o && (n.ref = void 0), t.call(this, n, o);
+  }
+  return e._pf = e;
+}
+function r(t, e = "div", n, o) {
+  const i = Object.getOwnPropertyDescriptors(n || {});
+  function c(a) {
+    let d;
+    this && (typeof this == "function" ? d = this(a) : this.current = a);
+    const l = o == null ? void 0 : o(a);
+    return () => {
+      d && d(), l && l();
+    };
+  }
+  const s = K(function(d, l) {
+    let p = d;
+    if (n || o) {
+      const G = Object.create(d, i);
+      p = Object.assign(
+        {},
+        G,
+        d
+      ), p.ref = this.$_ref || (this.$_ref = c.bind(l || d.ref));
+    }
+    p.k = t;
+    const h = typeof e == "function" ? e(d) : e;
+    return O(h, p);
+  });
+  return s.displayName = t, s;
+}
+const yt = r("badge", "span"), wt = r(
+  "button",
+  (t) => t.href ? "a" : "button"
+), Tt = r(
+  "input",
+  "input"
+), Et = r("card", "div");
+function f(t, e) {
+  if (!t || typeof t != "object") return t;
+  if (!Array.isArray(t))
+    return H(t, e);
+  const n = [];
+  for (const o of t)
+    n.push(f(o, e));
+  return n;
+}
+const C = g(void 0);
+function x({ id: t, children: e }) {
+  const n = v(), o = t ?? n;
+  return /* @__PURE__ */ u(C.Provider, { value: o, children: e });
+}
+function J({
+  children: t,
+  ...e
+}) {
+  b(), k();
+  const n = m(C);
+  return f(t, {
+    ...e,
+    commandfor: n,
+    command: "show-modal"
+  });
+}
+function Q({
+  id: t,
+  ...e
+}) {
+  const n = m(C);
+  return /* @__PURE__ */ u("dialog", { k: "dialog-content", id: t ?? n, ...e });
+}
+function Z({
+  children: t,
+  ...e
+}) {
+  const n = m(C);
+  return f(t, {
+    ...e,
+    commandfor: n,
+    command: "close"
+  });
+}
+x.Trigger = J;
+x.Content = Q;
+x.Close = Z;
+const Lt = r(
+  "accordion",
+  "details"
+), At = r(
+  "tablist",
+  "div"
+), Dt = r("tab", "button"), It = r(
+  "tab-panel",
+  "div"
+), St = r(
+  "tooltip",
+  "span"
+), Pt = r(
+  "progress",
+  "progress"
+), Mt = r(
+  "skeleton",
+  "div"
+), Bt = r(
+  "switch",
+  "input",
+  {
+    role: "switch",
+    type: "checkbox"
+  }
+), Ft = r(
+  "textarea",
+  "textarea"
+), _t = r(
+  "label",
+  "label"
+), Nt = r(
+  "checkbox",
+  "input",
+  { type: "checkbox" }
+), $t = r(
+  "radio-group",
+  "div"
+), qt = r(
+  "radio",
+  "input",
+  { type: "radio" }
+), Rt = r(
+  "select",
+  "select"
+);
+function E() {
+  const t = `${((+this.min || 0) + +this.value) / (+this.max || 100) * 100}%`;
+  this.style.setProperty("--progress", t);
+}
+const jt = r(
+  "slider",
+  "input",
+  { type: "range" },
+  (t) => (t.addEventListener("input", E), E.call(t), () => t.removeEventListener("input", E))
+), Gt = r(
+  "separator",
+  "div"
+);
+function Ot({ children: t, alt: e, ...n }) {
+  return /* @__PURE__ */ u("img", { k: "avatar", alt: String(t ?? e ?? ""), ...n });
+}
+const Ht = r(
+  "toggle",
+  "button",
+  {
+    get "aria-pressed"() {
+      return this.pressed;
+    },
+    onClickCapture(t) {
+      var n, o;
+      const e = t.currentTarget;
+      (o = (n = e.closest('[k="toggle-group"]')) == null ? void 0 : n.querySelector("[aria-pressed]")) == null || o.removeAttribute("aria-pressed"), e.hasAttribute("aria-pressed") ? e.removeAttribute("aria-pressed") : e.setAttribute("aria-pressed", "true");
+    }
+  }
+), Wt = r(
+  "toggle-group",
+  "div"
+);
+function zt({ ratio: t, style: e, ...n }) {
+  const o = t ? {
+    ...typeof e == "object" && e ? e : {},
+    "--ratio": t
+  } : e;
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      k: "aspect-ratio",
+      ...n,
+      style: o
+    }
+  );
+}
+const Ut = r(
+  "scroll-area",
+  "div"
+), D = g(void 0);
+function Vt({ id: t, children: e }) {
+  b();
+  const n = v(), o = t ?? n;
+  return /* @__PURE__ */ u(D.Provider, { value: o, children: /* @__PURE__ */ u("span", { k: "popover", children: e }) });
+}
+function Xt({
+  children: t,
+  ...e
+}) {
+  const n = m(D);
+  return f(t, {
+    ...e,
+    commandfor: n,
+    command: "show"
+  });
+}
+function Yt({
+  id: t,
+  ...e
+}) {
+  const n = m(D);
+  return /* @__PURE__ */ u("dialog", { k: "popover-content", id: t ?? n, ...e });
+}
+const Kt = r("alert", "div"), Jt = x, Qt = r(
+  "table",
+  "table"
+), A = "kinu-toast-show";
+let tt = Date.now();
+function et(t, e = {}) {
+  const n = { content: t, ...e };
+  dispatchEvent(new CustomEvent(A, { detail: n }));
+}
+const Zt = { show: et };
+function te() {
+  const [t, e] = z([]);
+  U(() => {
+    const o = (i) => {
+      const c = i.detail;
+      c.id = tt++, e((s) => s.slice(-3).concat(c)), requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          e(
+            (s) => s.map((a) => a.id === c.id ? { ...a, mounted: !0 } : a)
+          );
+        });
+      }), setTimeout(n, c.duration || 3e3, c.id);
+    };
+    return addEventListener(A, o), () => {
+      removeEventListener(A, o);
+    };
+  }, []);
+  function n(o) {
+    e((i) => {
+      const c = i.find((s) => s.id === o);
+      return !c || c.closing ? i : (setTimeout(() => {
+        e((s) => s.filter((a) => a.id !== o));
+      }, 400), i.map((s) => s.id === o ? { ...s, closing: !0 } : s));
+    });
+  }
+  return /* @__PURE__ */ u("div", { k: "toast-container", children: t.map((o) => /* @__PURE__ */ W(
+    "div",
+    {
+      k: "toast",
+      "data-toast": o.id,
+      "data-mounted": o.mounted || void 0,
+      "data-closing": o.closing || void 0,
+      children: [
+        o.title && /* @__PURE__ */ u("h6", { k: "toast-title", children: o.title }),
+        /* @__PURE__ */ u("div", { k: "toast-content", children: o.content }),
+        /* @__PURE__ */ u("div", { k: "toast-icon", children: o.icon }),
+        o.action && /* @__PURE__ */ u("div", { k: "toast-action", children: o.action })
+      ]
+    },
+    o.id
+  )) });
+}
+const ee = r(
+  "collapsible",
+  "details",
+  {},
+  (t) => {
+    t.addEventListener("command", () => {
+      t.open = !t.open;
+    }), t.insertBefore(document.createElement("summary"), t.firstChild);
+  }
+), ne = r(
+  "resizable",
+  "div"
+), y = g(void 0);
+function I({ id: t, children: e }) {
+  b(), k();
+  const n = v(), o = t ?? n;
+  return /* @__PURE__ */ u(y.Provider, { value: o, children: /* @__PURE__ */ u("div", { k: "sheet", children: e }) });
+}
+function nt({
+  children: t,
+  ...e
+}) {
+  const n = m(y);
+  return f(t, {
+    ...e,
+    commandfor: n,
+    command: "show-modal"
+  });
+}
+function ot({
+  id: t,
+  ...e
+}) {
+  const n = m(y);
+  return /* @__PURE__ */ u("dialog", { k: "sheet-content", id: t || n, ...e });
+}
+function rt({
+  children: t,
+  ...e
+}) {
+  const n = m(y);
+  return f(t, {
+    ...e,
+    commandfor: n,
+    command: "close"
+  });
+}
+I.Trigger = nt;
+I.Content = ot;
+I.Close = rt;
+const oe = r(
+  "sidebar-trigger",
+  "button",
+  {},
+  (t) => {
+    function e(n) {
+      var i;
+      let o = t;
+      for (; o; ) {
+        const c = t.getAttribute("commandfor"), s = (i = o.querySelector) == null ? void 0 : i.call(
+          o,
+          c ? `#${c}` : '[k="sidebar"]'
+        );
+        if (s) {
+          getComputedStyle(s).getPropertyValue("--modal") ? (s.toggleAttribute("hidden", !1), s.showModal()) : s.toggleAttribute("hidden");
+          return;
+        }
+        o = o.parentNode;
+      }
+    }
+    return t.addEventListener("click", e), () => t.removeEventListener("click", e);
+  }
+), re = r(
+  "sidebar",
+  "dialog",
+  {
+    tabIndex: -1
+  },
+  () => {
+    b(), k();
+  }
+), ie = r(
+  "breadcrumb",
+  "nav"
+), ce = r("breadcrumb-list", "ol"), se = r("breadcrumb-item", "li"), ae = r("breadcrumb-link", "a"), ue = r(
+  "menubar",
+  "nav"
+), de = r(
+  "menubar-item",
+  "button",
+  {
+    onMouseEnterCapture(t) {
+      var n;
+      ((n = t.currentTarget.closest('[k="menubar"]')) == null ? void 0 : n.querySelector('[k="dropdown-content"][open]')) && t.currentTarget.click();
+    }
+  }
+), le = r("navigation-menu", "nav"), me = r("navigation-menu-list", "ul"), fe = r("navigation-menu-item", "li"), pe = r("navigation-menu-link", "a"), ge = r(
+  "pagination",
+  "nav"
+), ve = r(
+  "pagination-list",
+  "ul"
+), be = r(
+  "pagination-item",
+  "li"
+), ke = r("pagination-link", "button"), it = r(
+  "combobox",
+  "span",
+  {},
+  () => {
+    j();
+  }
+), ct = r(
+  "combobox-input",
+  "input",
+  {},
+  (t) => {
+    const e = () => {
+      var c;
+      return (c = t.closest('[k="combobox"]')) == null ? void 0 : c.querySelector('[k="combobox-list"]');
+    };
+    function n(c) {
+      i(c.type !== "input"), e().show(), t.focus();
+    }
+    function o(c) {
+      const s = c.relatedTarget, a = e();
+      s && (a != null && a.contains(s)) || a.close();
+    }
+    function i(c) {
+      const s = t.value.toLowerCase(), a = e().querySelectorAll(
+        '[k="combobox-option"]'
+      );
+      let d = !1;
+      for (const l of a) {
+        const p = l.textContent.toLowerCase().includes(s);
+        l.removeAttribute("selected");
+        const h = c || p;
+        l.style.display = h ? "" : "none", (c ? p : h) && !d && (l.toggleAttribute("selected", !0), d = !0);
+      }
+    }
+    return t.addEventListener("input", n), t.addEventListener("click", n), t.addEventListener("focus", n), t.addEventListener("blur", o), () => {
+      t.removeEventListener("input", n), t.removeEventListener("click", n), t.removeEventListener("focus", n), t.removeEventListener("blur", o);
+    };
+  }
+), st = r(
+  "combobox-list",
+  "dialog",
+  {
+    onMouseDown: (t) => t.preventDefault(),
+    onClick: (t) => t.currentTarget.close()
+  }
+), at = r(
+  "combobox-option",
+  "button",
+  {
+    tabIndex: -1
+  },
+  (t) => {
+    function e(n) {
+      n.preventDefault();
+      const o = document.activeElement;
+      o.value = t.textContent || "", o.dispatchEvent(new Event("input", { bubbles: !0 })), o.focus();
+    }
+    return t.addEventListener("click", e), () => t.removeEventListener("click", e);
+  }
+), he = Object.assign(it, {
+  Input: ct,
+  List: st,
+  Option: at
+}), S = g(void 0);
+let L = null;
+function ut(t) {
+  t.preventDefault();
+  const e = t.currentTarget;
+  L && (L.style.anchorName = ""), L = e, e.style.anchorName = "--k-context-menu";
+  const n = e.ownerDocument.getElementById(
+    e.getAttribute("commandfor")
+  );
+  if (!n) return;
+  const i = e.ownerDocument.defaultView;
+  i && (n.style.setProperty("--k-context-menu-client-x", `${t.clientX}px`), n.style.setProperty("--k-context-menu-client-y", `${t.clientY}px`), n.style.setProperty("--k-context-menu-client-right", `${i.innerWidth - t.clientX}px`), n.style.setProperty("--k-context-menu-client-bottom", `${i.innerHeight - t.clientY}px`), n.showModal());
+}
+function Ce({
+  children: t
+}) {
+  const e = m(S);
+  return f(t, {
+    commandfor: e,
+    onContextMenu: ut
+  });
+}
+function xe({ id: t, children: e }) {
+  k();
+  const n = v(), o = t ?? n;
+  return /* @__PURE__ */ u(S.Provider, { value: o, children: e });
+}
+function $(t) {
+  t.defaultPrevented || (t.preventDefault(), t.currentTarget.close());
+}
+function ye({
+  id: t,
+  ...e
+}) {
+  const n = m(S);
+  return /* @__PURE__ */ u(
+    "dialog",
+    {
+      k: "context-menu",
+      id: t ?? n,
+      onClickCapture: $,
+      onContextMenuCapture: $,
+      ...e
+    }
+  );
+}
+const we = r("context-menu-item", "button", { tabIndex: 0 }), w = g(void 0);
+function P({ id: t, children: e }) {
+  b(), k();
+  const n = v(), o = t ?? n;
+  return /* @__PURE__ */ u(w.Provider, { value: o, children: /* @__PURE__ */ u("div", { k: "drawer", children: e }) });
+}
+function dt({
+  children: t,
+  ...e
+}) {
+  const n = m(w);
+  return f(t, {
+    ...e,
+    commandfor: n,
+    command: "show-modal"
+  });
+}
+function lt({
+  id: t,
+  ...e
+}) {
+  const n = m(w);
+  return /* @__PURE__ */ u("dialog", { k: "drawer-content", id: t ?? n, ...e });
+}
+function mt({
+  children: t,
+  ...e
+}) {
+  const n = m(w);
+  return f(t, {
+    ...e,
+    commandfor: n,
+    command: "close"
+  });
+}
+P.Trigger = dt;
+P.Content = lt;
+P.Close = mt;
+const M = g(void 0);
+function Te({ id: t, children: e }) {
+  b(), k(), j();
+  const n = v(), o = t ?? n;
+  return /* @__PURE__ */ u(M.Provider, { value: o, children: /* @__PURE__ */ u("span", { k: "dropdown", children: e }) });
+}
+function Ee({
+  children: t,
+  ...e
+}) {
+  const n = m(M);
+  return f(t, {
+    ...e,
+    commandFor: n,
+    command: "show"
+  });
+}
+function Le({
+  id: t,
+  command: e = "close",
+  commandFor: n,
+  ...o
+}) {
+  const i = m(M), c = t ?? i;
+  return /* @__PURE__ */ u(
+    "dialog",
+    {
+      k: "dropdown-content",
+      id: c,
+      command: e,
+      commandFor: n ?? c,
+      ...o
+    }
+  );
+}
+const Ae = r("dropdown-menu-item", (t) => t.href ? "a" : "button"), De = r(
+  "hover-card",
+  "div"
+), Ie = r("hover-card-trigger", "span"), Se = r("hover-card-content", "div"), Pe = r(
+  "calendar",
+  "input",
+  { type: "date" }
+), T = g(void 0);
+function Me({ id: t, children: e }) {
+  b();
+  const n = t ?? v();
+  return /* @__PURE__ */ u(T.Provider, { value: n, children: /* @__PURE__ */ u("div", { style: { position: "relative" }, children: e }) });
+}
+const ft = r(
+  "carousel",
+  "div",
+  {},
+  (t) => {
+    const e = (n) => {
+      const o = t.clientWidth, i = n.command;
+      i === "--prev" ? t.scrollBy({ left: -o, behavior: "smooth" }) : i === "--next" ? t.scrollBy({ left: o, behavior: "smooth" }) : t.scrollTo({ left: i.slice(7) * o, behavior: "smooth" });
+    };
+    return t.addEventListener("command", e), () => t.removeEventListener("command", e);
+  }
+);
+function Be({ children: t }) {
+  const e = m(T);
+  return /* @__PURE__ */ u(ft, { id: e, children: t });
+}
+const Fe = r(
+  "carousel-item",
+  "div"
+);
+function _e({
+  children: t,
+  commandFor: e,
+  command: n,
+  ...o
+}) {
+  const i = m(T);
+  return /* @__PURE__ */ u("button", { ...o, k: "carousel-previous", command: "--prev", commandfor: i ?? void 0, children: t });
+}
+function Ne({
+  children: t,
+  commandFor: e,
+  command: n,
+  ...o
+}) {
+  const i = m(T);
+  return /* @__PURE__ */ u("button", { ...o, k: "carousel-next", command: "--next", commandfor: i ?? void 0, children: t });
+}
+const $e = r(
+  "color-picker",
+  "input",
+  { type: "color" }
+), qe = r(
+  "date-picker",
+  "input",
+  { type: "date" }
+), Re = r(
+  "file-upload",
+  "input",
+  { type: "file" }
+), je = r(
+  "time-picker",
+  "input",
+  { type: "time" }
+), Ge = r(
+  "spinner",
+  "span"
+), Oe = r(
+  "input-group",
+  "fieldset"
+), pt = r("tree", "div"), gt = r(
+  "tree-item",
+  "details"
+), vt = r(
+  "tree-label",
+  "summary"
+), bt = r(
+  "tree-group",
+  "div"
+), kt = r(
+  "tree-leaf",
+  "button"
+), He = Object.assign(pt, {
+  Group: gt,
+  GroupLabel: vt,
+  GroupItems: bt,
+  Item: kt
+});
+export {
+  Lt as Accordion,
+  Kt as Alert,
+  Jt as AlertDialog,
+  zt as AspectRatio,
+  Ot as Avatar,
+  yt as Badge,
+  ie as Breadcrumb,
+  se as BreadcrumbItem,
+  ae as BreadcrumbLink,
+  ce as BreadcrumbList,
+  wt as Button,
+  Pe as Calendar,
+  Et as Card,
+  Me as Carousel,
+  Be as CarouselContent,
+  Fe as CarouselItem,
+  Ne as CarouselNext,
+  _e as CarouselPrevious,
+  Nt as Checkbox,
+  ee as Collapsible,
+  $e as ColorPicker,
+  he as Combobox,
+  ct as ComboboxInput,
+  st as ComboboxList,
+  at as ComboboxOption,
+  xe as ContextMenu,
+  ye as ContextMenuContent,
+  we as ContextMenuItem,
+  Ce as ContextMenuTrigger,
+  qe as DatePicker,
+  x as Dialog,
+  P as Drawer,
+  mt as DrawerClose,
+  lt as DrawerContent,
+  dt as DrawerTrigger,
+  Te as DropdownMenu,
+  Le as DropdownMenuContent,
+  Ae as DropdownMenuItem,
+  Ee as DropdownMenuTrigger,
+  Re as FileUpload,
+  De as HoverCard,
+  Se as HoverCardContent,
+  Ie as HoverCardTrigger,
+  Tt as Input,
+  Oe as InputGroup,
+  _t as Label,
+  ue as Menubar,
+  de as MenubarItem,
+  le as NavigationMenu,
+  fe as NavigationMenuItem,
+  pe as NavigationMenuLink,
+  me as NavigationMenuList,
+  ge as Pagination,
+  be as PaginationItem,
+  ke as PaginationLink,
+  ve as PaginationList,
+  Vt as Popover,
+  Yt as PopoverContent,
+  Xt as PopoverTrigger,
+  Pt as Progress,
+  qt as Radio,
+  $t as RadioGroup,
+  ne as Resizable,
+  Ut as ScrollArea,
+  Rt as Select,
+  Gt as Separator,
+  I as Sheet,
+  rt as SheetClose,
+  ot as SheetContent,
+  nt as SheetTrigger,
+  re as Sidebar,
+  oe as SidebarTrigger,
+  Mt as Skeleton,
+  jt as Slider,
+  Ge as Spinner,
+  Bt as Switch,
+  Dt as Tab,
+  At as TabList,
+  It as TabPanel,
+  Qt as Table,
+  Ft as Textarea,
+  je as TimePicker,
+  te as ToastContainer,
+  Ht as Toggle,
+  Wt as ToggleGroup,
+  St as Tooltip,
+  He as Tree,
+  Zt as toast
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@developit/kinu",
+  "version": "0.1.0",
+  "description": "Performance-focused Preact UI toolkit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/developit/pui.git"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "style": "./dist/index.css",
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "build:demo": "cd demo && pnpm build",
+    "lint": "tsc && biome lint",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "changeset publish"
+  },
+  "peerDependencies": {
+    "preact": "^10.26.8"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@changesets/cli": "^2.29.8",
+    "@preact/preset-vite": "^2.10.1",
+    "@types/node": "^22.15.30",
+    "preact": "^10.26.9",
+    "preact-forwardref": "^0.2.0",
+    "preact-render-to-string": "^6.5.11",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vitest": "^3.0.6"
+  },
+  "keywords": [
+    "preact",
+    "ui",
+    "ui-toolkit",
+    "kinu"
+  ],
+  "author": "Jason Miller (http://developit.dev)",
+  "license": "MIT",
+  "pnpm": {
+    "patchedDependencies": {
+      "preact-iso": "patches/preact-iso.patch"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  }
+}