winduum 1.2.1 → 2.0.0-next.10

package/types/index.d.ts.map

@@ -27,14 +27,8 @@
 		"showDetails",
 		"closeDetails",
 		"toggleDetails",
-		"InsertDialogOptions",
-		"FetchDialogOptions",
-		"dialogSelector",
-		"dismissDialog",
 		"showDialog",
 		"closeDialog",
-		"insertDialog",
-		"fetchDialog",
 		"ScrollDrawerOptions",
 		"showDrawer",
 		"closeDrawer",
@@ -54,6 +48,7 @@
 		"insertToast",
 		"closeToaster",
 		"ShowPopoverOptions",
+		"HidePopoverOptions",
 		"showPopover",
 		"hidePopover",
 		"togglePopover",
@@ -77,7 +72,7 @@
 		"../src/components/tabs/index.d.ts",
 		"../src/components/toaster/index.d.ts",
 		"../src/components/popover/index.d.ts",
-		"../src/ui/range/index.d.ts",
+		"../src/components/range/index.d.ts",
 		"../src/utilities/ripple/index.d.ts",
 		"../src/utilities/swap/index.d.ts"
 	],
@@ -96,5 +91,5 @@
 		null,
 		null
 	],
-	"mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;;;;;kBCtBTC,sBAAsBA;;;;;;;;kBAQtBC,yBAAyBA;;;;;;kBAMzBC,qBAAqBA;;;;;;;;kBAQrBC,uBAAuBA;;;;;kBAKvBC,mBAAmBA;;;;iBAIpBC,UAAUA;iBACVC,UAAUA;iBACVC,QAAQA;iBACRC,YAAYA;iBACZC,eAAeA;iBACfC,cAAcA;iBACdC,kBAAkBA;iBAClBC,gBAAgBA;iBAChBC,YAAYA;;;;kBCvCXC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;kBCPXC,cAAcA;;;;;cAKlBC,cAAcA;iBACXC,WAAWA;iBACXC,YAAYA;iBACZC,aAAaA;;;;kBCRZJ,cAAcA;;;;;;;kBAOdK,mBAAmBA;;;;;;;kBAOnBC,kBAAkBA;;;;;cAKtBL,cAAcA;iBACXM,cAAcA;iBACdC,aAAaA;iBACbC,UAAUA;iBACVC,WAAWA;iBACXC,YAAYA;iBACZC,WAAWA;;;;kBCzBVC,mBAAmBA;;;;;;;;;;iBAUpBC,UAAUA;iBACVC,WAAWA;iBACXC,YAAYA;;;;kBCZXC,mBAAmBA;;;;;;kBAMnBC,oBAAoBA;;;;;;;;;;;;;;;;;;iBAkBrBC,YAAYA;iBACZC,aAAaA;;;;;;;;;iBCpBbC,SAASA;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;kBAKjBC,oBAAoBA;;;;kBAIpBC,kBAAkBA;;;;;;;;;iBASnBC,UAAUA;iBACVC,SAASA;iBACTC,aAAaA;iBACbC,WAAWA;iBACXC,YAAYA;;;;;kBC3BXC,kBAAkBA;;;;;;;;;;iBAUnBC,WAAWA;iBACXC,WAAWA;iBACXC,aAAaA;;;;kBCdZC,uBAAuBA;;;;;;kBAMvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;iBClBdC,UAAUA;;;;iBCAVC,UAAUA"
+	"mappings": ";;kBAEiBA,aAAaA;;;;;;;;;;;;;;;;;;;;cAoBjBC,aAAaA;;;;;;;;kBCtBTC,sBAAsBA;;;;;;;;kBAQtBC,yBAAyBA;;;;;;kBAMzBC,qBAAqBA;;;;;;;;kBAQrBC,uBAAuBA;;;;;kBAKvBC,mBAAmBA;;;;iBAIpBC,UAAUA;iBACVC,UAAUA;iBACVC,QAAQA;iBACRC,YAAYA;iBACZC,eAAeA;iBACfC,cAAcA;iBACdC,kBAAkBA;iBAClBC,gBAAgBA;iBAChBC,YAAYA;;;;;;kBCvCXC,kBAAkBA;;;;;iBAKnBC,WAAWA;iBACXC,eAAeA;iBACfC,YAAYA;;;;;;kBCPXC,cAAcA;;;;;cAKlBC,cAAcA;iBACXC,WAAWA;iBACXC,YAAYA;iBACZC,aAAaA;;;;;;kBCRZJ,cAAcA;;;;;;;;cAQlBC,cAAcA;iBACXI,UAAUA;iBACVC,WAAWA;;;;;;kBCVVC,mBAAmBA;;;;;;;;;;iBAUpBC,UAAUA;iBACVC,WAAWA;iBACXC,YAAYA;;;;;;kBCZXC,mBAAmBA;;;;;;kBAMnBC,oBAAoBA;;;;;;;;;;;;;;;;;;iBAkBrBC,YAAYA;iBACZC,aAAaA;;;;;;;;;;;iBCpBbC,SAASA;;;;;;kBCLRC,gBAAgBA;;;;;;;kBAOhBC,iBAAiBA;;;;;kBAKjBC,oBAAoBA;;;;kBAIpBC,kBAAkBA;;;;;;;;;iBASnBC,UAAUA;iBACVC,SAASA;iBACTC,aAAaA;iBACbC,WAAWA;iBACXC,YAAYA;;;;;;;kBC3BXC,kBAAkBA;;;;;;;;;;kBAUlBC,kBAAkBA;;;;iBAInBC,WAAWA;iBACXC,WAAWA;iBACXC,aAAaA;;;;;;kBClBZC,uBAAuBA;;;;;;kBAMvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;;;iBClBdC,UAAUA;;;;;;iBCAVC,UAAUA"
 }

package/plugin/utilities/flex.js

@@ -1,12 +0,0 @@
-export default {
-    '.flex-center': {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 'var(--spacing-sm)'
-    },
-    '.flex-between': {
-        display: 'flex',
-        justifyContent: 'space-between',
-        gap: 'var(--spacing-sm)'
-    }
-}

package/src/base/config/text.css

@@ -1,15 +0,0 @@
-:root, :host {
-  --text-xs: 0.75rem;
-  --text-sm: 0.875rem;
-  --text-base: 1rem;
-  --text-lg: 1.125rem;
-  --text-xl: 1.25rem;
-  --text-2xl: 1.5rem;
-  --text-3xl: 1.875rem;
-  --text-4xl: 2.25rem;
-  --text-5xl: 3rem;
-  --text-6xl: 3.75rem;
-  --text-7xl: 4.5rem;
-  --text-8xl: 6rem;
-  --text-9xl: 8rem;
-}

package/src/components/breadcrumb/default-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --c-breadcrumb-marker-size: 0.875rem;
-  --c-breadcrumb-marker: var(--mask-chevron-right);
-  --c-breadcrumb-gap: var(--spacing-xs);
-}

package/src/components/card/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --c-card-py: var(--spacing-2xl);
-  --c-card-px: var(--spacing-3xl);
-}

package/src/components/dialog/content-props.css

@@ -1,5 +0,0 @@
-:root, :host {
-  --c-dialog-content-py: 2rem;
-  --c-dialog-content-px: 1.5rem;
-  --c-dialog-content-width: 35rem;
-}

package/src/components/dialog/default-props.css

@@ -1,6 +0,0 @@
-:root, :host {
-  --c-dialog-py: 2rem;
-  --c-dialog-px: 1.5rem;
-  --c-dialog-bg: var(--color-dark);
-  --c-dialog-bg-opacity: 0.8;
-}

package/src/components/drawer/content-props.css

@@ -1,6 +0,0 @@
-:root, :host {
-  --c-drawer-content-py: 2rem;
-  --c-drawer-content-px: 1.5rem;
-  --c-drawer-content-width: calc(100vw - 4rem);
-  --c-drawer-content-height: 100%;
-}

package/src/components/drawer/default-props.css

@@ -1,3 +0,0 @@
-:root, :host {
-  --c-drawer-bg-opacity: 0.75;
-}

package/src/components/popover/content-props.css

@@ -1,8 +0,0 @@
-:root, :host {
-  --c-popover-content-bg: var(--color-body-primary);
-  --c-popover-content-border-radius: var(--rounded);
-  --c-popover-content-py: var(--spacing-sm);
-  --c-popover-content-px: var(--spacing-sm);
-  --c-popover-content-scale-y: 0.75;
-  --c-popover-content-scale-x: 0.75;
-}

package/src/components/table/default-props.css

@@ -1,8 +0,0 @@
-:root, :host {
-  --c-table-border-radius: var(--rounded);
-  --c-table-px: 1rem;
-  --c-table-cell-spacing-x: 0.625rem;
-  --c-table-cell-spacing-y: 0.875rem;
-  --c-table-cell-height: auto;
-  --c-table-cell-border-block-width: 1px;
-}

package/src/components/table/interactive-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --c-table-outline-bg-opacity: 0.05;
-  --c-table-outline-width: 1px;
-}

package/src/components/tabs/default.css

@@ -1,8 +0,0 @@
-.c-tabs {
-  background-color: var(--color-body-secondary);
-  display: flex;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-xs);
-  border-radius: var(--rounded);
-  width: max-content;
-}

package/src/components/toast/content-props.css

@@ -1,7 +0,0 @@
-:root, :host {
-  --c-toast-content-border-radius: var(--rounded-2xl);
-  --c-toast-content-py: var(--spacing-md);
-  --c-toast-content-px: var(--spacing-lg);
-  --c-toast-content-gap: var(--spacing-xl);
-  --c-toast-content-bg: var(--color-body-primary);
-}

package/src/components/toast/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --c-toast-width: 20rem;
-  --c-toast-duration: calc(var(--duration) * 2);
-}

package/src/components/toaster/default-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --c-toaster-p: var(--spacing-xl);
-  --c-toaster-spacing-y: var(--spacing-xs);
-}

package/src/components/tooltip/default-props.css

@@ -1,12 +0,0 @@
-:root, :host {
-  --c-tooltip-bg: var(--color-main);
-  --c-tooltip-color: var(--color-main-foreground);
-  --c-tooltip-border-radius: var(--rounded-md);
-  --c-tooltip-font-size: var(--text-sm);
-  --c-tooltip-py: var(--spacing-xs);
-  --c-tooltip-px: var(--spacing-sm);
-  --c-tooltip-margin-block: var(--spacing-xs);
-  --c-tooltip-margin-inline: var(--spacing-xs);
-  --c-tooltip-scale-x: 0.75;
-  --c-tooltip-scale-y: 0.75;
-}

package/src/ui/badge/bordered.css

@@ -1,16 +0,0 @@
-.ui-badge {
-  &:where(.bordered) {
-    --ui-badge-border-color: var(--color-accent);
-    --ui-badge-border-width: 1px;
-    --tw-border-opacity: 1;
-    --tw-border-mix: transparent;
-
-    border: var(--ui-badge-border-width) solid color-mix(in var(--space), var(--ui-badge-border-color) calc(var(--tw-border-opacity) * 100%), var(--tw-border-mix));
-    padding-inline: calc(var(--ui-badge-px) - var(--ui-badge-border-width));
-  }
-
-  &:is(.bordered) {
-    --ui-badge-color: var(--color-accent);
-    --tw-bg-opacity: 0;
-  }
-}

package/src/ui/badge/circle.css

@@ -1,5 +0,0 @@
-.ui-badge:is(.circle) {
-  --ui-badge-px: var(--ui-badge-py);
-  --ui-badge-width: var(--ui-badge-height);
-  --ui-badge-border-radius: var(--rounded-full);
-}

package/src/ui/badge/default-props.css

@@ -1,8 +0,0 @@
-:root, :host {
-  --ui-badge-font-size: var(--text-xs);
-  --ui-badge-height: 1.5rem;
-  --ui-badge-py: 0;
-  --ui-badge-px: 0.5rem;
-  --ui-badge-gap: var(--spacing-xs);
-  --ui-badge-border-radius: var(--rounded-lg);
-}

package/src/ui/badge/default.css

@@ -1,26 +0,0 @@
-.ui-badge {
-  --ui-badge-bg: var(--color-accent);
-  --ui-badge-color: var(--color-accent-foreground);
-  --tw-bg-opacity: 1;
-  --tw-text-opacity: 1;
-  --tw-bg-mix: transparent;
-  --tw-text-mix: transparent;
-
-  width: var(--ui-badge-width);
-  height: var(--ui-badge-height);
-  padding: var(--ui-badge-py) var(--ui-badge-px);
-  border-radius: var(--ui-badge-border-radius);
-  font-family: var(--ui-badge-font-family);
-  font-weight: var(--ui-badge-font-weight);
-  font-size: var(--ui-badge-font-size);
-  letter-spacing: var(--ui-badge-letter-spacing);
-  background-color: color-mix(in var(--space), var(--ui-badge-bg) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-  color: color-mix(in var(--space), var(--ui-badge-color) calc(var(--tw-text-opacity) * 100%), var(--tw-text-mix));
-  gap: var(--ui-badge-gap);
-  display: inline-flex;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  flex-shrink: 0;
-}

package/src/ui/badge/lg.css

@@ -1,3 +0,0 @@
-.ui-badge:is(.lg) {
-  --ui-badge-height: 1.75rem;
-}

package/src/ui/badge/muted.css

@@ -1,4 +0,0 @@
-.ui-badge:is(.muted) {
-  --ui-badge-color: var(--color-accent);
-  --tw-bg-opacity: 0.1;
-}

package/src/ui/badge/readme.md

@@ -1,37 +0,0 @@
-# [Badge](https://winduum.dev/docs/ui/badge.html)
-
-## Installation
-```shell
-npm i winduum
-```
-Learn more how to set up Winduum [here](https://winduum.dev/docs/).
-Include CSS either globally or to your component _([you can't use TailwindCSS layers in per-component CSS](https://tailwindcss.com/docs/adding-custom-styles#layers-and-per-component-css))_
-
-```css
-@import "winduum/src/ui/badge/index.css" layer(components);
-```
-
-or modular (you can use your own props or CSS)
-
-```css
-@import "winduum/src/ui/badge/default.css" layer(components);
-@import "winduum/src/ui/badge/default-props.css" layer(components);
-@import "winduum/src/ui/badge/sm.css" layer(components);
-@import "winduum/src/ui/badge/lg.css" layer(components);
-@import "winduum/src/ui/badge/bordered.css" layer(components);
-@import "winduum/src/ui/badge/muted.css" layer(components);
-@import "winduum/src/ui/badge/square.css" layer(components);
-@import "winduum/src/ui/badge/circle.css" layer(components);
-
-```
-
-### Local imports
-By default, imports are directly from `npm` so you can leverage updates.
-You can also copy and paste the code from this directory to your project and remap the imports to local.
-
-```css
-@import "@/components/ui/badge/assets/index.css" layer(components);
-```
-
-### Docs
-Visit [docs](https://winduum.dev/docs/ui/badge.html) to learn more about usage examples.

package/src/ui/badge/sm.css

@@ -1,4 +0,0 @@
-.ui-badge:is(.sm) {
-  --ui-badge-height: 1.25rem;
-  --ui-badge-font-size: 0.625rem;
-}

package/src/ui/badge/square.css

@@ -1,4 +0,0 @@
-.ui-badge:is(.square) {
-  --ui-badge-px: var(--ui-badge-py);
-  --ui-badge-width: var(--ui-badge-height);
-}

package/src/ui/btn/bordered.css

@@ -1,21 +0,0 @@
-.ui-btn {
-  &:where(.bordered) {
-    --ui-btn-border-width: 1px;
-    --ui-btn-border-color: var(--color-accent);
-    --tw-border-opacity: 0.3;
-    --tw-border-mix: transparent;
-
-    border: var(--ui-btn-border-width) solid color-mix(in var(--space), var(--ui-btn-border-color) calc(var(--tw-border-opacity) * 100%), var(--tw-border-mix));
-    padding-inline: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
-  }
-
-  &:is(.bordered) {
-    --ui-btn-hover-bg-mix: transparent;
-    --ui-btn-hover-bg-opacity: 0.1;
-    --ui-btn-active-bg-mix: transparent;
-    --ui-btn-active-bg-opacity: 0.2;
-    --ui-btn-focus-outline-offset: -2px;
-    --ui-btn-color: var(--color-accent);
-    --tw-bg-opacity: 0;
-  }
-}

package/src/ui/btn/circle.css

@@ -1,6 +0,0 @@
-.ui-btn:is(.circle) {
-  --ui-btn-py: 0;
-  --ui-btn-px: 0;
-  --ui-btn-width: var(--ui-btn-height);
-  --ui-btn-border-radius: var(--rounded-full);
-}

package/src/ui/btn/default-props.css

@@ -1,10 +0,0 @@
-:root, :host {
-  --ui-btn-border-radius: var(--rounded);
-  --ui-btn-font-size: var(--text-sm);
-  --ui-btn-font-weight: var(--font-medium);
-  --ui-btn-gap: var(--spacing-sm);
-  --ui-btn-outline-width: 2px;
-  --ui-btn-height: 2.25rem;
-  --ui-btn-py: 0.375rem;
-  --ui-btn-px: 0.75rem;
-}

package/src/ui/btn/default.css

@@ -1,49 +0,0 @@
-.ui-btn {
-  --ui-btn-bg: var(--color-accent);
-  --ui-btn-color: var(--color-accent-foreground);
-  --ui-btn-outline-color: var(--color-accent);
-  --tw-bg-opacity: 1;
-  --tw-bg-mix: transparent;
-  --tw-text-opacity: 1;
-  --tw-text-mix: transparent;
-  --tw-outline-opacity: 0;
-  --tw-outline-mix: transparent;
-
-  inline-size: var(--ui-btn-width);
-  block-size: var(--ui-btn-height);
-  padding: var(--ui-btn-py) var(--ui-btn-px);
-  border-radius: var(--ui-btn-border-radius);
-  font-family: var(--ui-btn-font-family);
-  font-size: var(--ui-btn-font-size);
-  font-weight: var(--ui-btn-font-weight);
-  letter-spacing: var(--ui-btn-letter-spacing);
-  background-color: color-mix(in var(--space), var(--ui-btn-bg) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
-  color: color-mix(in var(--space), var(--ui-btn-color) calc(var(--tw-text-opacity) * 100%), var(--tw-text-mix));
-  outline:
-    var(--ui-btn-outline-width) solid
-    color-mix(
-      in var(--space),
-      var(--ui-btn-outline-color) calc(var(--tw-outline-opacity) * 100%),
-      var(--tw-outline-mix)
-    );
-  outline-offset: var(--ui-btn-outline-offset);
-  gap: var(--ui-btn-gap);
-  user-select: none;
-  overflow: clip;
-  display: inline-flex;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  line-height: 1;
-  flex-shrink: 0;
-  z-index: 0;
-
-  :where(*) {
-    pointer-events: none;
-  }
-
-  &:where(input)::after {
-    content: attr(aria-label);
-  }
-}

package/src/ui/btn/fill.css

@@ -1,6 +0,0 @@
-.ui-btn:is(.fill) {
-  --ui-btn-hover-bg-mix: var(--color-dark);
-  --ui-btn-hover-bg-opacity: 1;
-  --ui-btn-active-bg-mix: var(--color-dark);
-  --ui-btn-active-bg-opacity: 0.9;
-}

package/src/ui/btn/ghosted.css

@@ -1,9 +0,0 @@
-.ui-btn:is(.ghosted) {
-  --ui-btn-hover-bg-mix: transparent;
-  --ui-btn-hover-bg-opacity: 0.1;
-  --ui-btn-active-bg-mix: transparent;
-  --ui-btn-active-bg-opacity: 0.2;
-  --ui-btn-focus-outline-offset: -2px;
-  --ui-btn-color: var(--color-accent);
-  --tw-bg-opacity: 0;
-}

package/src/ui/btn/gradient-bordered.css

@@ -1,24 +0,0 @@
-.ui-btn {
-  &:where(.gradient-bordered) {
-    &::before {
-      content: "";
-      position: absolute;
-      background-color: color-mix(in var(--space), var(--color-body) calc(100% - var(--tw-bg-opacity) * 100%), transparent);
-      inset: var(--ui-btn-border-width);
-      border-radius: calc(var(--ui-btn-border-radius) / 1.25);
-      z-index: -1;
-      transition: var(--transition-background);
-    }
-  }
-
-  &:is(.gradient-bordered) {
-    --ui-btn-hover-bg-mix: transparent;
-    --ui-btn-hover-bg-opacity: 0.1;
-    --ui-btn-active-bg-mix: transparent;
-    --ui-btn-active-bg-opacity: 0.2;
-    --ui-btn-focus-outline-offset: 0;
-    --ui-btn-border-width: 2px;
-    --ui-btn-color: currentColor;
-    --tw-bg-opacity: 0;
-  }
-}

package/src/ui/btn/gradient.css

@@ -1,10 +0,0 @@
-.ui-btn:where(.gradient) {
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background-color: color-mix(in var(--space), var(--tw-bg-mix) calc(100% - var(--tw-bg-opacity) * 100%), transparent);
-    z-index: -1;
-    transition: var(--transition-background);
-  }
-}

package/src/ui/btn/interactive-props.css

@@ -1,9 +0,0 @@
-:root, :host {
-  --ui-btn-hover-bg-mix: var(--color-dark);
-  --ui-btn-hover-bg-opacity: 0.8;
-  --ui-btn-focus-outline-offset: 2px;
-  --ui-btn-focus-outline-opacity: 0.5;
-  --ui-btn-active-bg-mix: var(--color-dark);
-  --ui-btn-active-bg-opacity: 0.9;
-  --ui-btn-disabled-opacity: 0.75;
-}

package/src/ui/btn/interactive.css

@@ -1,53 +0,0 @@
-.ui-btn {
-  transition-property: var(--transition);
-  transition-timing-function: var(--ease-in-out);
-  transition-duration: var(--duration);
-
-  &:where(.accent-main) {
-    --ui-btn-hover-bg-mix: var(--color-main-foreground);
-  }
-
-  &:where(.accent-body) {
-    --ui-btn-hover-bg-mix: var(--color-body-foreground);
-  }
-
-  &:where(.accent-light) {
-    --ui-btn-hover-bg-mix: var(--color-light-foreground);
-  }
-
-  &:where(.accent-dark) {
-    --ui-btn-hover-bg-mix: var(--color-dark-foreground);
-  }
-
-  &:is(:any-link, button, [role="button"], input) {
-    cursor: var(--cursor, pointer);
-
-    &:disabled {
-      opacity: var(--ui-btn-disabled-opacity);
-      cursor: not-allowed;
-    }
-
-    &:not(:disabled) {
-      &:hover {
-        @media (hover: hover) and (pointer: fine) {
-          --ui-btn-bg: var(--ui-btn-hover-bg, var(--color-accent));
-          --ui-btn-border-color: var(--ui-btn-hover-border-color, var(--color-accent));
-          --tw-bg-mix: var(--ui-btn-hover-bg-mix);
-          --tw-bg-opacity: var(--ui-btn-hover-bg-opacity);
-        }
-      }
-
-      &:focus {
-        --ui-btn-outline-offset: var(--ui-btn-focus-outline-offset);
-        --tw-outline-opacity: var(--ui-btn-focus-outline-opacity);
-      }
-
-      &:active, &:checked, &.active {
-        --ui-btn-bg: var(--ui-btn-active-bg, var(--color-accent));
-        --ui-btn-border-color: var(--ui-btn-active-border-color, var(--color-accent));
-        --tw-bg-mix: var(--ui-btn-active-bg-mix);
-        --tw-bg-opacity: var(--ui-btn-active-bg-opacity);
-      }
-    }
-  }
-}

package/src/ui/btn/lg.css

@@ -1,4 +0,0 @@
-.ui-btn:is(.lg) {
-  --ui-btn-height: 3rem;
-  --ui-btn-px: 1.75rem;
-}

package/src/ui/btn/loading-props.css

@@ -1,4 +0,0 @@
-:root, :host {
-  --ui-btn-loading-width: 1rem;
-  --ui-btn-loading-border-width: 2px;
-}

package/src/ui/btn/loading.css

@@ -1,24 +0,0 @@
-.ui-btn:is(.loading) {
-  pointer-events: none;
-  color: transparent;
-
-  > * {
-    opacity: 0;
-  }
-
-  &::after {
-    z-index: 1;
-    width: var(--ui-btn-loading-width);
-    height: var(--ui-btn-loading-width);
-    content: "";
-    border: var(--ui-btn-loading-border-width) solid var(--ui-btn-color);
-    border-right-color: transparent;
-    border-radius: 50%;
-    animation: spin 0.5s infinite linear;
-    position: absolute;
-    margin-left: calc(var(--ui-btn-loading-width) / 2 * -1);
-    margin-top: calc(var(--ui-btn-loading-width) / 2 * -1);
-    left: 50%;
-    top: 50%;
-  }
-}

package/src/ui/btn/muted.css

@@ -1,9 +0,0 @@
-.ui-btn:is(.muted) {
-  --ui-btn-hover-bg-mix: transparent;
-  --ui-btn-hover-bg-opacity: 0.3;
-  --ui-btn-active-bg-mix: transparent;
-  --ui-btn-active-bg-opacity: 0.2;
-  --ui-btn-focus-outline-offset: -2px;
-  --ui-btn-color: var(--color-accent);
-  --tw-bg-opacity: 0.1;
-}

package/src/ui/btn/raised.css

@@ -1,7 +0,0 @@
-.ui-btn:where(.raised) {
-  --ui-btn-border-width: 2px;
-  --tw-border-opacity: 0.85;
-
-  border: var(--ui-btn-border-width) solid color-mix(in var(--space), var(--ui-btn-bg) calc(var(--tw-border-opacity) * 100%), var(--ui-btn-color));
-  padding-inline: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
-}

package/src/ui/btn/readme.md

@@ -1,51 +0,0 @@
-# [Button](https://winduum.dev/docs/ui/button.html)
-
-## Installation
-```shell
-npm i winduum
-```
-Learn more how to set up Winduum [here](https://winduum.dev/docs/).
-Include CSS either globally or to your component _([you can't use TailwindCSS layers in per-component CSS](https://tailwindcss.com/docs/adding-custom-styles#layers-and-per-component-css))_
-
-```css
-@import "winduum/src/ui/btn/index.css" layer(components);
-```
-
-or modular (you can use your own props or CSS)
-
-```css
-@import "winduum/src/ui/btn/default.css" layer(components);
-@import "winduum/src/ui/btn/default-props.css" layer(components);
-@import "winduum/src/ui/btn/interactive.css" layer(components);
-@import "winduum/src/ui/btn/interactive-props.css" layer(components);
-@import "winduum/src/ui/btn/sm.css" layer(components);
-@import "winduum/src/ui/btn/lg.css" layer(components);
-@import "winduum/src/ui/btn/loading.css" layer(components);
-@import "winduum/src/ui/btn/loading-props.css" layer(components);
-@import "winduum/src/ui/btn/wide.css" layer(components);
-@import "winduum/src/ui/btn/bordered.css" layer(components);
-@import "winduum/src/ui/btn/ghosted.css" layer(components);
-@import "winduum/src/ui/btn/hover-fill.css" layer(components);
-@import "winduum/src/ui/btn/gradient.css" layer(components);
-@import "winduum/src/ui/btn/gradient-bordered.css" layer(components);
-@import "winduum/src/ui/btn/muted.css" layer(components);
-@import "winduum/src/ui/btn/raised.css" layer(components);
-@import "winduum/src/ui/btn/square.css" layer(components);
-@import "winduum/src/ui/btn/circle.css" layer(components);
-```
-
-
-### Local imports
-By default, imports are directly from `npm` so you can leverage updates.
-You can also copy and paste the code from this directory to your project and remap the imports to local.
-
-```css
-@import "@/components/ui/btn/assets/index.css" layer(components);
-```
-
-### Docs
-Visit [docs](https://winduum.dev/docs/ui/button.html) to learn more about usage examples.
-
-### Frameworks
-* [winduum/winduum-vue](https://github.com/winduum/winduum-vue/blob/main/src/ui/btn)
-* [winduum/winduum-react](https://github.com/winduum/winduum-react/blob/main/src/ui/btn)

package/src/ui/btn/sm.css

@@ -1,4 +0,0 @@
-.ui-btn:is(.sm) {
-  --ui-btn-height: 2rem;
-  --ui-btn-px: 1rem;
-}

package/src/ui/btn/square.css

@@ -1,5 +0,0 @@
-.ui-btn:is(.square) {
-  --ui-btn-py: 0;
-  --ui-btn-px: 0;
-  --ui-btn-width: var(--ui-btn-height);
-}

package/src/ui/btn/wide.css

@@ -1,3 +0,0 @@
-.ui-btn:where(.wide) {
-  padding-inline: calc(var(--ui-btn-px) * 1.5);
-}