winduum 1.2.1 → 2.0.0-next.1

package/src/main.css

@@ -1,3 +1,2 @@
 @import "base/index.css";
-@import "ui/index.css";
 @import "components/index.css";

package/src/utilities/common.css

@@ -1,12 +1,8 @@
-.animate {
-  animation-duration: var(--duration);
+.animation {
+  animation-duration: var(--default-transition-duration);
   animation-fill-mode: both;
 }
 
-.flex-col {
-  display: flex;
-}
-
 [hidden] {
   display: none;
 }

package/src/utilities/container/default.css

@@ -1,13 +1,12 @@
 .grid-cols-container {
-  display: grid;
   grid-template-columns:
     [container-full-start] minmax(var(--container-padding), 1fr)
     [container-lg-start] minmax(0, calc((var(--container-lg-width) - var(--container-width)) / 2))
     [container-start] min(100% - (var(--container-padding) * 2), var(--container-width)) [container-end]
     minmax(0, calc((var(--container-lg-width) - var(--container-width)) / 2)) [container-lg-end]
     minmax(var(--container-padding), 1fr) [container-full-end];
-}
 
-:where(.grid-cols-container > *) {
-  grid-column: container;
+  & > :where(*) {
+    grid-column: container;
+  }
 }

package/src/utilities/container/index.css

@@ -1,2 +1,2 @@
 @import "default.css";
-@import "default-props.css";
+@import "props/default.css";

package/src/utilities/divider.css

@@ -1,6 +1,5 @@
 .divider {
   --color-accent: currentColor;
-  --tw-border-opacity: 0.15;
 
   display: flex;
   align-items: center;
@@ -13,13 +12,13 @@
   &::before, &::after {
     content: "";
     flex-grow: 1;
-    border-block-start: 1px solid color-mix(in var(--space), var(--color-accent) calc(var(--tw-border-opacity) * 100%), transparent);
+    border-block-start: 1px solid color-mix(in var(--default-color-space), var(--color-accent) 15%, transparent);
   }
 
   &:where(.flex-col) {
     &::before, &::after {
       border-block-start: 0;
-      border-inline-start: 1px solid color-mix(in var(--space), var(--color-accent) calc(var(--tw-border-opacity) * 100%), transparent);
+      border-inline-start: 1px solid color-mix(in var(--default-color-space), var(--color-accent) 15%, transparent);
     }
   }
 }

package/src/utilities/ripple/index.css

@@ -1,7 +1,5 @@
 .ripple {
-  --tw-bg-opacity: 0.4;
-
-  background-color: color-mix(in var(--space), currentcolor calc(var(--tw-bg-opacity) * 100%), transparent);
+  background-color: color-mix(in var(--default-color-space), currentcolor 40%, transparent);
   position: absolute;
   border-radius: 50%;
   transform: scale(0);

package/src/utilities/skeleton/index.css

@@ -1,2 +1,2 @@
 @import "default.css";
-@import "default-props.css";
+@import "props/default.css";

package/src/utilities/skeleton/props/default.css

@@ -0,0 +1,5 @@
+:root, :host {
+  --skeleton-opacity: 0.5;
+  --skeleton-from: color-mix(in var(--default-color-space), var(--color-body) 50%, var(--color-main));
+  --skeleton-to: color-mix(in var(--default-color-space), var(--color-body) 80%, var(--color-main));
+}

package/src/utilities/swap/default.css

@@ -1,11 +1,11 @@
 .swap {
   display: inline-grid;
-  cursor: var(--cursor, pointer);
+  cursor: var(--cursor-pointer, pointer);
 
   > :where(*) {
-    transition-property: var(--transition);
-    transition-timing-function: var(--ease-in-out);
-    transition-duration: var(--duration);
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--transition-timing-function-in-out);
+    transition-duration: var(--default-transition-duration);
     grid-area: 1/-1;
     opacity: 0;
   }

package/src/utilities/underline.css

@@ -1,13 +1,13 @@
 .underline {
-  text-underline-offset: var(--tw-underline-offset, 0.125em);
+  text-underline-offset: var(--default-underline-offset, 0.125em);
 }
 
 .underline-transparent {
   &:where(:any-link, button:enabled, [role="button"]) {
-    transition: all var(--duration) var(--ease-in-out);
+    transition: all var(--default-transition-duration) var(--transition-timing-function-in-out);
 
     &:not(:hover, :focus-visible) {
-      text-underline-offset: var(--tw-underline-transparent-offset, -0.25em);
+      text-underline-offset: var(--default-underline-transparent-offset, -0.25em);
       text-decoration-color: transparent;
     }
   }

package/types/index.d.ts

@@ -96,28 +96,13 @@ declare module 'winduum/src/components/dialog' {
 		remove?: boolean | null
 		closable?: boolean | null
 		openClass?: string
+		overflowClass?: string
 		scrollbarWidthProperty?: string
 	}
 
-	export interface InsertDialogOptions {
-		selector?: string | null
-		class?: string | null
-		append?: boolean | null
-		show?: DefaultOptions
-	}
-
-	export interface FetchDialogOptions {
-		url: string
-		insert?: InsertDialogOptions
-	}
-
 	export const defaultOptions: DefaultOptions
-	export function dialogSelector(selector: string): HTMLDialogElement
-	export function dismissDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
-	export function showDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
-	export function closeDialog(element: HTMLDialogElement, options?: DefaultOptions): Promise<void>
-	export function insertDialog(content: string, options?: InsertDialogOptions): Promise<void>
-	export function fetchDialog({ url, insert }: FetchDialogOptions): Promise<void>
+	export function showDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
+	export function closeDialog(element: HTMLDialogElement | HTMLElement, options?: DefaultOptions): Promise<void>
 }
 
 declare module 'winduum/src/components/drawer' {
@@ -224,7 +209,7 @@ declare module 'winduum/src/components/popover' {
 	export function togglePopover(element: HTMLElement | Element, options?: ShowPopoverOptions): Promise<void>
 }
 
-declare module 'winduum/src/ui/range' {
+declare module 'winduum/src/components/range' {
 	export interface SetTrackPropertyOptions {
 		element: HTMLElement | Element
 		value: string

package/types/index.d.ts.map

@@ -27,14 +27,8 @@
 		"showDetails",
 		"closeDetails",
 		"toggleDetails",
-		"InsertDialogOptions",
-		"FetchDialogOptions",
-		"dialogSelector",
-		"dismissDialog",
 		"showDialog",
 		"closeDialog",
-		"insertDialog",
-		"fetchDialog",
 		"ScrollDrawerOptions",
 		"showDrawer",
 		"closeDrawer",
@@ -77,7 +71,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 +90,6 @@
 		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;;;;;;;;;;iBAUnBC,WAAWA;iBACXC,WAAWA;iBACXC,aAAaA;;;;kBCdZC,uBAAuBA;;;;;;kBAMvBC,eAAeA;;;;;kBAKfC,gBAAgBA;;;;;iBAKjBC,gBAAgBA;iBAChBC,QAAQA;iBACRC,cAAcA;;;;iBClBdC,UAAUA;;;;iBCAVC,UAAUA",
+	"ignoreList": []
 }

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/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/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);
-}