winduum 2.2.0-next.1 → 2.2.0-next.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.2.0-next.1",
+  "version": "2.2.0-next.2",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",

package/tailwindcss/utilities/divider.css

@@ -0,0 +1,34 @@
+@utility divider {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+
+  &:where(:not(:empty)) {
+    gap: var(--divider-gap, calc(var(--spacing) * 3));
+  }
+
+  &::before, &::after {
+    content: "";
+    flex-grow: 1;
+    border-block-start:
+      1px solid color-mix(
+        in var(--divider-border-block-color-space, srgb),
+        var(--divider-border-block-color, currentColor) var(--divider-border-block-color-opacity, 15%),
+        var(--divider-border-block-color-mix, transparent)
+      );
+  }
+}
+
+@utility divder-vertical {
+  flex-direction: column;
+
+  &::before, &::after {
+    border-block-start: 0;
+    border-inline-start:
+      1px solid color-mix(
+        in var(--divider-border-inline-color-space, srgb),
+        var(--divider-border-inline-color, currentColor) var(--divider-border-inline-color-opacity, 15%),
+        var(--divider-border-inline-color-mix, transparent)
+      );
+  }
+}

package/tailwindcss/utilities/dot.css

@@ -0,0 +1,10 @@
+@utility dot {
+  display: inline-flex;
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: var(--radius-full);
+  background-color: currentColor;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+}

package/tailwindcss/utilities/grid-cols-container.css

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

package/tailwindcss/utilities/index.css

@@ -1,3 +1,12 @@
 @import "./accent.css";
 @import "./animation.css";
 @import "./divide-gap.css";
+@import "./divider.css";
+@import "./dot.css";
+@import "./grid-cols-container.css";
+@import "./ripple.css";
+@import "./skeleton.css";
+@import "./spinner.css";
+@import "./swap.css";
+@import "./underline.css";
+@import "./view-transition.css";

package/tailwindcss/utilities/ripple.css

@@ -0,0 +1,16 @@
+@utility ripple {
+  inline-size: var(--ripple-size, 5rem);
+  block-size: var(--ripple-size, 5rem);
+  background-color:
+    color-mix(
+      in var(--ripple-background-color-space, srgb),
+      var(--ripple-background-color, currentColor) var(--ripple-background-color-opacity, 15%),
+      var(--ripple-background-color-mix, transparent)
+    );
+  animation-duration: var(--ripple-animation-duration, 500ms);
+  animation-timing-function: var(--ripple-animation-timing-function, var(--ease-in-out));
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  pointer-events: none;
+}

package/tailwindcss/utilities/skeleton.css

@@ -0,0 +1,14 @@
+@utility skeleton {
+  background:
+    linear-gradient(
+      to right,
+      var(--skeleton-gradient-from),
+      var(--skeleton-gradient-to),
+      var(--skeleton-gradient-to),
+      var(--skeleton-gradient-from)
+    );
+  opacity: var(--skeleton-opacity);
+  transition: var(--transition-opacity);
+  animation: move-indeterminate 1.5s linear infinite;
+  background-size: 400% 100%;
+}

package/tailwindcss/utilities/spinner.css

@@ -0,0 +1,35 @@
+@utility spinner {
+  inline-size: var(--spinner-inline-size, 1rem);
+  block-size: var(--spinner-block-size, 1rem);
+  border-radius: 50%;
+  border-width: var(--spinner-border-width, 2px);
+  border-color:
+    color-mix(in var(--default-color-space), currentColor var(--spinner-border-block-start-color-opacity, 100%), transparent)
+    color-mix(in var(--default-color-space), currentColor var(--spinner-border-inline-end-color-opacity, 100%), transparent)
+    color-mix(in var(--default-color-space), currentColor var(--spinner-border-block-end-color-opacity, 100%), transparent)
+    color-mix(in var(--default-color-space), currentColor var(--spinner-border-inline-start-color-opacity, 0%), transparent);
+  border-style: solid;
+  animation: linear var(--spinner-animation-duration, 1s) infinite spin;
+}
+
+@utility spinner-circle {
+  --spinner-border-inline-start-color-opacity: 25%;
+  --spinner-border-inline-end-color-opacity: 25%;
+  --spinner-border-block-end-color-opacity: 25%;
+}
+
+@utility spinner-ring {
+  --spinner-animation-duration: 2s;
+
+  transform-origin: center;
+  border: 0;
+
+  circle {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    animation: spinner-ring-stretch calc(var(--spinner-animation-duration) * 0.75) ease-in-out infinite;
+    fill: none;
+    stroke: currentColor;
+  }
+}

package/tailwindcss/utilities/swap.css

@@ -0,0 +1,21 @@
+@utility swap {
+  cursor: var(--cursor-pointer, pointer);
+  display: inline-grid;
+
+  > :where(*) {
+    transition-property: var(--default-transition-property);
+    transition-timing-function: var(--ease-in-out);
+    transition-duration: var(--default-transition-duration);
+    grid-area: 1/-1;
+    opacity: 0%;
+  }
+
+  > [aria-hidden="false"],
+  input:not(:checked, :indeterminate) + :where(*),
+  input:indeterminate ~ :where(*:nth-last-child(2)),
+  input:checked ~ :where(*:last-child) {
+    transform: none;
+    rotate: none;
+    opacity: 100%;
+  }
+}

package/tailwindcss/utilities/underline.css

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

package/tailwindcss/utilities/view-transition.css

@@ -0,0 +1,3 @@
+@utility view-transition-main {
+  view-transition-name: main;
+}