@epilot/spark-ui 0.10.0

package/dist/number-flow-Bch81ixZ.d.ts

@@ -0,0 +1,14 @@
+"use client";
+
+import { Format, NumberFlowProps, NumberFlowProps as NumberFlowProps$1 } from "@number-flow/react";
+
+//#region src/components/number-flow.d.ts
+declare function NumberFlow({
+  locales,
+  prefix,
+  suffix,
+  ...props
+}: NumberFlowProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { NumberFlow as n, NumberFlowProps$1 as r, Format as t };
+//# sourceMappingURL=number-flow-Bch81ixZ.d.ts.map

package/dist/styles/index.css

@@ -0,0 +1,447 @@
+/* Solid Light */
+@import '@radix-ui/colors/green.css' layer(base);
+@import '@radix-ui/colors/blue.css' layer(base);
+@import '@radix-ui/colors/red.css' layer(base);
+@import '@radix-ui/colors/orange.css' layer(base);
+@import '@radix-ui/colors/pink.css' layer(base);
+@import '@radix-ui/colors/cyan.css' layer(base);
+@import '@radix-ui/colors/tomato.css' layer(base);
+@import '@radix-ui/colors/amber.css' layer(base);
+
+/* Solid Light Alpha */
+@import '@radix-ui/colors/green-alpha.css' layer(base);
+@import '@radix-ui/colors/blue-alpha.css' layer(base);
+@import '@radix-ui/colors/red-alpha.css' layer(base);
+@import '@radix-ui/colors/orange-alpha.css' layer(base);
+@import '@radix-ui/colors/pink-alpha.css' layer(base);
+@import '@radix-ui/colors/cyan-alpha.css' layer(base);
+@import '@radix-ui/colors/tomato-alpha.css' layer(base);
+@import '@radix-ui/colors/amber-alpha.css' layer(base);
+
+/* Solid Dark */
+@import '@radix-ui/colors/green-dark.css' layer(base);
+@import '@radix-ui/colors/blue-dark.css' layer(base);
+@import '@radix-ui/colors/red-dark.css' layer(base);
+@import '@radix-ui/colors/orange-dark.css' layer(base);
+@import '@radix-ui/colors/pink-dark.css' layer(base);
+@import '@radix-ui/colors/cyan-dark.css' layer(base);
+@import '@radix-ui/colors/tomato-dark.css' layer(base);
+@import '@radix-ui/colors/amber-dark.css' layer(base);
+
+/* Solid Dark Alpha */
+@import '@radix-ui/colors/green-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/blue-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/red-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/orange-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/pink-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/cyan-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/tomato-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/amber-dark-alpha.css' layer(base);
+
+/* Grays Light */
+@import '@radix-ui/colors/gray.css' layer(base);
+@import '@radix-ui/colors/mauve.css' layer(base);
+@import '@radix-ui/colors/slate.css' layer(base);
+@import '@radix-ui/colors/sage.css' layer(base);
+@import '@radix-ui/colors/olive.css' layer(base);
+@import '@radix-ui/colors/sand.css' layer(base);
+
+/* Grays Light Alpha */
+@import '@radix-ui/colors/gray-alpha.css' layer(base);
+@import '@radix-ui/colors/mauve-alpha.css' layer(base);
+@import '@radix-ui/colors/slate-alpha.css' layer(base);
+@import '@radix-ui/colors/sage-alpha.css' layer(base);
+@import '@radix-ui/colors/olive-alpha.css' layer(base);
+@import '@radix-ui/colors/sand-alpha.css' layer(base);
+
+/* Grays Dark */
+@import '@radix-ui/colors/gray-dark.css' layer(base);
+@import '@radix-ui/colors/mauve-dark.css' layer(base);
+@import '@radix-ui/colors/slate-dark.css' layer(base);
+@import '@radix-ui/colors/sage-dark.css' layer(base);
+@import '@radix-ui/colors/olive-dark.css' layer(base);
+@import '@radix-ui/colors/sand-dark.css' layer(base);
+
+/* Grays Dark Alpha */
+@import '@radix-ui/colors/gray-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/mauve-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/slate-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/sage-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/olive-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/sand-dark-alpha.css' layer(base);
+
+/* White & Black Alpha */
+@import '@radix-ui/colors/white-alpha.css' layer(base);
+@import '@radix-ui/colors/black-alpha.css' layer(base);
+
+/* Default Spark brand scale */
+@import './spark-default.css' layer(base);
+
+@import './material-symbol.css' layer(base);
+
+/* Tailwind v4 theme: scales, semantic tokens, dark variant, safelist */
+@import './theme.css';
+@import './utilities.css';
+
+/* Tailwind animate plugin */
+@import 'tw-animate-css';
+
+/*
+ * Portal parity: ECP ships a contrast-fixed light green-a11 (opaque, darker
+ * than Radix stock #00713fde) for readable success-light text. Declared here
+ * (after the imports, directly in layer base) -- inside spark-default.css it
+ * would land in the nested base.base sub-layer and lose to Radix's direct
+ * base rules (a layer's direct rules act as its implicit final sub-layer).
+ */
+@layer base {
+  /* :where(:not(...)) keeps a dark root on the Radix dark value: a bare :root
+     here would beat the earlier .dark import at equal specificity */
+  :root:where(:not(.dark, .dark-theme)),
+  .light,
+  .light-theme {
+    --green-a11: #06784c;
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      :root:where(:not(.dark, .dark-theme)),
+      .light,
+      .light-theme {
+        --green-a11: color(display-p3 0.21 0.46 0.31);
+      }
+    }
+  }
+}
+
+/* Hit area utilities — Kian Bazarjani <https://bazza.dev> */
+@utility hit-area-debug {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+    @apply border border-dashed border-blue-9;
+    @apply bg-blue-9/10;
+  }
+  &:hover::before {
+    @apply border border-dashed border-green-9;
+    @apply bg-green-9/10;
+  }
+}
+
+@utility hit-area {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-t-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-r-* {
+  position: relative;
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-b-* {
+  position: relative;
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-l-* {
+  position: relative;
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-x-* {
+  position: relative;
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-y-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+/* >=44px hit target (WCAG 2.5.5) on coarse pointers only. Uses ::after -- not
+   ::before, which hit-area/checkbox/radio/switch already own -- sized to
+   max(box, 44px) and centered: never shrinks an already-large control, never
+   fires on a mouse. `touch-target-row` grows the box instead, for tiled rows
+   (menu/list items) where an overlay would overlap neighbours. 2.75rem matches
+   the existing min-h-[2.75rem] WCAG floors. */
+@utility touch-target {
+  @media (any-pointer: coarse) {
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      translate: -50% -50%;
+      inline-size: max(100%, 2.75rem);
+      block-size: max(100%, 2.75rem);
+      pointer-events: inherit;
+    }
+  }
+}
+
+@utility touch-target-row {
+  @media (any-pointer: coarse) {
+    min-block-size: 2.75rem;
+  }
+}
+/*
+ * Toast stacking geometry. Base UI hands each toast `--toast-index` (0 is the
+ * newest) and `--toast-offset-y` (its resting offset once the stack expands).
+ * This lives in CSS rather than utility classes because the transforms compose
+ * percentages, calc, and custom properties, which arbitrary Tailwind values
+ * express badly. The skin (color, radius, padding) stays on the component.
+ */
+@layer components {
+  [data-slot='toast'] {
+    /* Position lives here, not in a utility class: Tailwind's `utilities`
+       layer outranks `components`, so a `bottom-0` on the element would beat
+       the `bottom: auto` the top-anchored rules below rely on. */
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    /* space between toasts once the stack fans out */
+    --spark-toast-gap: 0.625rem;
+    /* how far each collapsed card peeks above the one in front. A fixed step,
+       not a percentage: our toasts are about half the height of Base UI's demo
+       ones, and a percentage makes the stack almost invisible on short toasts. */
+    --spark-toast-peek: 0.875rem;
+    /* newest paints on top */
+    z-index: calc(1000 - var(--toast-index));
+    transform-origin: bottom center;
+    /* Line each card up a fixed step above the FRONT toast's top edge. Going
+       off each card's own height instead hides the stack whenever the front
+       toast is taller than the ones behind it. */
+    transform: translateY(
+        calc(
+          var(--toast-height) * (1 - 0.05 * var(--toast-index)) -
+            var(--toast-frontmost-height) - var(--toast-index) *
+            var(--spark-toast-peek)
+        )
+      )
+      scale(calc(1 - 0.05 * var(--toast-index)));
+    transition:
+      transform 250ms cubic-bezier(0.22, 1, 0.36, 1),
+      opacity 200ms ease;
+  }
+
+  /* hovering or focusing the region fans the stack out to its real offsets */
+  [data-slot='toast'][data-expanded] {
+    transform: translateY(
+        calc(
+          (
+              var(--toast-offset-y) + var(--toast-index) *
+                var(--spark-toast-gap)
+            ) *
+            -1
+        )
+      )
+      scale(1);
+  }
+
+  [data-slot='toast'][data-starting-style] {
+    transform: translateY(150%);
+    opacity: 0;
+  }
+
+  [data-slot='toast'][data-ending-style] {
+    opacity: 0;
+  }
+
+  /* toasts past the visible limit collapse behind the stack */
+  [data-slot='toast'][data-limited] {
+    opacity: 0;
+  }
+
+  /* keeps the pointer inside the region when crossing the expanded gap */
+  [data-slot='toast']::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    height: var(--spark-toast-gap);
+  }
+
+  /* Top-anchored stacks grow downward, so the offsets and origin flip. The
+     same declarations are opted into per breakpoint: `data-side` drives the
+     desktop layout, `data-mobile-side` the layout below `sm`. */
+  @media (width >= 40rem) {
+    [data-slot='toaster'][data-side='top'] [data-slot='toast'] {
+      top: 0;
+      bottom: auto;
+      transform-origin: top center;
+      transform: translateY(
+          calc(
+            var(--toast-frontmost-height) - var(--toast-height) *
+              (1 - 0.05 * var(--toast-index)) + var(--toast-index) *
+              var(--spark-toast-peek)
+          )
+        )
+        scale(calc(1 - 0.05 * var(--toast-index)));
+    }
+
+    [data-slot='toaster'][data-side='top'] [data-slot='toast'][data-expanded] {
+      transform: translateY(
+          calc(
+            var(--toast-offset-y) + var(--toast-index) * var(--spark-toast-gap)
+          )
+        )
+        scale(1);
+    }
+
+    [data-slot='toaster'][data-side='top']
+      [data-slot='toast'][data-starting-style] {
+      transform: translateY(-150%);
+    }
+
+    [data-slot='toaster'][data-side='top'] [data-slot='toast']::after {
+      top: auto;
+      bottom: 100%;
+    }
+  }
+
+  @media (width < 40rem) {
+    [data-slot='toaster'][data-mobile-side='top'] [data-slot='toast'] {
+      top: 0;
+      bottom: auto;
+      transform-origin: top center;
+      transform: translateY(
+          calc(
+            var(--toast-frontmost-height) - var(--toast-height) *
+              (1 - 0.05 * var(--toast-index)) + var(--toast-index) *
+              var(--spark-toast-peek)
+          )
+        )
+        scale(calc(1 - 0.05 * var(--toast-index)));
+    }
+
+    [data-slot='toaster'][data-mobile-side='top']
+      [data-slot='toast'][data-expanded] {
+      transform: translateY(
+          calc(
+            var(--toast-offset-y) + var(--toast-index) * var(--spark-toast-gap)
+          )
+        )
+        scale(1);
+    }
+
+    [data-slot='toaster'][data-mobile-side='top']
+      [data-slot='toast'][data-starting-style] {
+      transform: translateY(-150%);
+    }
+
+    [data-slot='toaster'][data-mobile-side='top'] [data-slot='toast']::after {
+      top: auto;
+      bottom: 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot='toast'] {
+      transition: none;
+    }
+  }
+}

package/dist/styles/internal.css

@@ -0,0 +1,5 @@
+/* This file is just used for internally developing this package */
+@import 'tailwindcss';
+@import './index.css';
+
+@source '../**/*.{tsx,ts,jsx,js}';

package/dist/styles/material-symbol.css

@@ -0,0 +1,22 @@
+@layer base {
+  .material-symbols-rounded {
+    font-family: 'Material Symbols Rounded';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 1em;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    font-variation-settings:
+      'FILL' 0,
+      'wght' 400,
+      'GRAD' 0,
+      'opsz' 20;
+  }
+}