@heyramzi/ui 2.23.0 → 3.0.0

package/src/effects/border-beam/index.ts

@@ -0,0 +1,10 @@
+export { default as BorderBeam } from "./BorderBeam.svelte";
+export type { BorderBeamProps } from "./types.js";
+export type {
+  BorderBeamColorVariant,
+  BorderBeamSize,
+  BorderBeamTheme,
+  SizeConfig,
+  ThemeColors,
+} from "./presets.js";
+export { sizePresets, sizeThemePresets, themeColors } from "./presets.js";

package/src/effects/image-comparison/ImageComparison.css

@@ -1,100 +1,117 @@
-/*
- * Brand hooks, all optional, set on the element's class:
- * --hr-compare-handle-color, --hr-compare-handle-width, --hr-compare-handle-shadow,
- * --hr-compare-grip-bg, --hr-compare-grip-color, --hr-compare-grip-size, --hr-compare-grip-shadow,
- * --hr-compare-badge-inset, --hr-compare-hint-duration.
- */
-.hr-compare {
-  position: relative;
-  overflow: hidden;
-  user-select: none;
-  isolation: isolate;
-}
-.hr-compare picture {
-  display: contents;
-}
-.hr-compare__img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.hr-compare__img--after {
-  position: absolute;
-  inset: 0;
-  clip-path: inset(0 0 0 calc(var(--hr-compare-pos) * 1%));
-}
-.hr-compare__badge {
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-}
-.hr-compare__badge--before {
-  inset-inline-start: var(--hr-compare-badge-inset, 0.75rem);
-}
-.hr-compare__badge--after {
-  inset-inline-end: var(--hr-compare-badge-inset, 0.75rem);
-}
-.hr-compare[data-badges="top"] .hr-compare__badge {
-  inset-block-start: var(--hr-compare-badge-inset, 0.75rem);
-}
-.hr-compare[data-badges="bottom"] .hr-compare__badge {
-  inset-block-end: var(--hr-compare-badge-inset, 0.75rem);
-}
-.hr-compare__handle {
-  position: absolute;
-  z-index: 2;
-  inset-block: 0;
-  left: calc(var(--hr-compare-pos) * 1%);
-  width: var(--hr-compare-handle-width, 2px);
-  translate: calc(var(--hr-compare-handle-width, 2px) / -2) 0;
-  background: var(--hr-compare-handle-color, white);
-  box-shadow: var(--hr-compare-handle-shadow, var(--elev-2, 0 2px 8px rgb(0 0 0 / 0.25)));
-  pointer-events: none;
-}
-.hr-compare__grip {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  translate: -50% -50%;
-  display: grid;
-  place-items: center;
-  width: var(--hr-compare-grip-size, 2rem);
-  height: var(--hr-compare-grip-size, 2rem);
-  border-radius: 999px;
-  background: var(--hr-compare-grip-bg, var(--hr-compare-handle-color, white));
-  color: var(--hr-compare-grip-color, black);
-  box-shadow: var(--hr-compare-grip-shadow, none);
-}
-/* The range covers the frame so pointer drag, touch and arrow keys all work. */
-.hr-compare__range {
-  position: absolute;
-  inset: 0;
-  z-index: 3;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  opacity: 0;
-  cursor: ew-resize;
-  appearance: none;
-  background: transparent;
-  /* A vertical swipe over the frame still scrolls the page. */
-  touch-action: pan-y pinch-zoom;
-}
-.hr-compare__range:focus-visible ~ .hr-compare__handle {
-  outline: 2px solid var(--hr-compare-handle-color, white);
-  outline-offset: 2px;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .hr-compare[data-eased] .hr-compare__img--after,
-  .hr-compare[data-eased] .hr-compare__handle {
-    transition:
-      clip-path var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out),
-      left var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+@layer theme, base, components, utilities;
+
+@layer components {
+  /*
+   * Brand hooks, all optional, set on the element's class:
+   * --hr-compare-handle-color, --hr-compare-handle-width, --hr-compare-handle-shadow,
+   * --hr-compare-grip-bg, --hr-compare-grip-color, --hr-compare-grip-size, --hr-compare-grip-shadow,
+   * --hr-compare-badge-inset, --hr-compare-hint-duration.
+   */
+  .hr-compare {
+    position: relative;
+    overflow: hidden;
+    user-select: none;
+    isolation: isolate;
+  }
+
+  .hr-compare picture {
+    display: contents;
+  }
+
+  .hr-compare__img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .hr-compare__img--after {
+    position: absolute;
+    inset: 0;
+    clip-path: inset(0 0 0 calc(var(--hr-compare-pos) * 1%));
+  }
+
+  .hr-compare__badge {
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  .hr-compare__badge--before {
+    inset-inline-start: var(--hr-compare-badge-inset, 0.75rem);
+  }
+
+  .hr-compare__badge--after {
+    inset-inline-end: var(--hr-compare-badge-inset, 0.75rem);
+  }
+
+  .hr-compare[data-badges="top"] .hr-compare__badge {
+    inset-block-start: var(--hr-compare-badge-inset, 0.75rem);
+  }
+
+  .hr-compare[data-badges="bottom"] .hr-compare__badge {
+    inset-block-end: var(--hr-compare-badge-inset, 0.75rem);
+  }
+
+  .hr-compare__handle {
+    position: absolute;
+    z-index: 2;
+    inset-block: 0;
+    left: calc(var(--hr-compare-pos) * 1%);
+    width: var(--hr-compare-handle-width, 2px);
+    translate: calc(var(--hr-compare-handle-width, 2px) / -2) 0;
+    background: var(--hr-compare-handle-color, white);
+    box-shadow: var(--hr-compare-handle-shadow, var(--elev-2, 0 2px 8px rgb(0 0 0 / 0.25)));
+    pointer-events: none;
+  }
+
+  .hr-compare__grip {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+    display: grid;
+    place-items: center;
+    width: var(--hr-compare-grip-size, 2rem);
+    height: var(--hr-compare-grip-size, 2rem);
+    border-radius: 999px;
+    background: var(--hr-compare-grip-bg, var(--hr-compare-handle-color, white));
+    color: var(--hr-compare-grip-color, black);
+    box-shadow: var(--hr-compare-grip-shadow, none);
+  }
+
+  /* The range covers the frame so pointer drag, touch and arrow keys all work. */
+  .hr-compare__range {
+    position: absolute;
+    inset: 0;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: ew-resize;
+    appearance: none;
+    background: transparent;
+    /* A vertical swipe over the frame still scrolls the page. */
+    touch-action: pan-y pinch-zoom;
+  }
+
+  .hr-compare__range:focus-visible ~ .hr-compare__handle {
+    outline: 2px solid var(--hr-compare-handle-color, white);
+    outline-offset: 2px;
   }
-  /* A slower glide while the handle hints, so the sweep reads as a gesture. */
-  .hr-compare[data-hinting] .hr-compare__img--after,
-  .hr-compare[data-hinting] .hr-compare__handle {
-    transition-duration: var(--hr-compare-hint-duration, 800ms);
+
+  @media (prefers-reduced-motion: no-preference) {
+    .hr-compare[data-eased] .hr-compare__img--after,
+    .hr-compare[data-eased] .hr-compare__handle {
+      transition:
+        clip-path var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out),
+        left var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+    }
+    /* A slower glide while the handle hints, so the sweep reads as a gesture. */
+    .hr-compare[data-hinting] .hr-compare__img--after,
+    .hr-compare[data-hinting] .hr-compare__handle {
+      transition-duration: var(--hr-compare-hint-duration, 800ms);
+    }
   }
 }

package/src/effects/image-comparison/ImageComparison.svelte.d.ts

@@ -0,0 +1,44 @@
+import type { Snippet } from "svelte";
+/** One side of the comparison. `sources` turns the image into a `<picture>`. */
+export interface ComparisonImage {
+    src: string;
+    alt: string;
+    /** Modern formats tried before `src`, such as an AVIF with the PNG as the fallback. */
+    sources?: readonly {
+        srcset: string;
+        type: string;
+    }[];
+    /** Intrinsic size, so the browser reserves the frame before the image lands. */
+    width?: number;
+    height?: number;
+}
+import "./ImageComparison.css";
+interface ImageComparisonProps {
+    /** Image shown on the left of the handle. */
+    before: ComparisonImage;
+    /** Image shown on the right of the handle. */
+    after: ComparisonImage;
+    /** Handle position, 0-100. Bind it to read it or to move the handle from outside. */
+    position?: number;
+    /** Track the pointer without a press. The handle returns to where it began. */
+    hover?: boolean;
+    /**
+     * Positions the handle visits once on mount, then it returns to where it began.
+     * It stops for good at the first touch. Tells a visitor the frame moves.
+     */
+    hint?: readonly number[];
+    /** Load both images now, ahead of the rest of the page. For a frame above the fold. */
+    eager?: boolean;
+    /** Label announced for the slider. */
+    label?: string;
+    /** A label drawn over the left side, such as "Before". */
+    beforeBadge?: Snippet;
+    /** A label drawn over the right side, such as "After". */
+    afterBadge?: Snippet;
+    /** Which edge the badges sit on. */
+    badgeEdge?: "top" | "bottom";
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<ImageComparisonProps, {}, "position">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/image-comparison/index.ts

@@ -0,0 +1,4 @@
+export {
+  default as ImageComparison,
+  type ComparisonImage,
+} from "./ImageComparison.svelte";

package/src/effects/image-reveal/ImageReveal.css

@@ -1,10 +1,15 @@
-.hr-image-reveal {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.hr-image-reveal canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
+@layer theme, base, components, utilities;
+
+@layer components {
+  .hr-image-reveal {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .hr-image-reveal canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }

package/src/effects/image-reveal/ImageReveal.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ImageRevealProps } from "./types.js";
+import "./ImageReveal.css";
+declare const $$Component: import("svelte").Component<ImageRevealProps, {
+    triggerReveal: (opts?: {
+        hold?: "auto" | "manual";
+    }) => void;
+    triggerHide: () => void;
+    isImageActive: () => boolean;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;