rei-kit 2.2.0 → 2.3.0

package/dist/mobile.css

@@ -22,6 +22,7 @@
 @import './shell/mobile.css';
 @import './materials.css';
 @import './palettes.css';
+@import './motion.css';
 @import './styles.css';
 
 @source './**/*.js';

package/dist/motion/BaseMarquee.vue.d.ts

@@ -0,0 +1,37 @@
+/**
+ * A row that scrolls sideways without end: logos, testimonials, a ticker.
+ *
+ * The content is rendered twice and the track moves by exactly one copy, so
+ * the loop has no seam and no measuring. The second copy is `inert` and
+ * hidden from assistive tech — a keyboard or screen-reader user meets each
+ * item once.
+ *
+ * It stops while hovered or focused, and on `paused`. For a reader who asked
+ * for less motion it does not move at all: it becomes a row that scrolls by
+ * hand, so nothing in it is out of reach.
+ */
+type __VLS_Props = {
+    /** Seconds for one full pass. Longer is slower; the speed does not change with the content's length. */
+    duration?: number | undefined;
+    /** Move left to right instead. */
+    reverse?: boolean | undefined;
+    /** Holds it still. */
+    paused?: boolean | undefined;
+    /** Fade the content out at both edges instead of cutting it. */
+    fade?: boolean | undefined;
+    /** Space between items, and between the end of one pass and the start of the next. Any CSS length. */
+    gap?: string | undefined;
+};
+type __VLS_Slots = {
+    /** The items. Rendered twice, the second copy inert. */
+    default: () => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/motion/BaseReveal.vue.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Content that fades or rises into place as it scrolls into view.
+ *
+ * Visible by default and hidden only once it has mounted and found itself
+ * below the fold, so a page rendered on a server, or read without
+ * JavaScript, never has content stuck at zero opacity. For a reader who
+ * asked for less motion it is never hidden at all.
+ *
+ * For a staggered list, give each item a growing `delay`:
+ * `:delay="index * 60"`.
+ */
+type __VLS_Props = {
+    /** How it arrives: fading in, rising a little as it does, or growing to size. */
+    effect?: 'fade' | 'rise' | 'scale' | undefined;
+    /** Milliseconds to wait once it is in view — the stagger in a list. */
+    delay?: number | undefined;
+    /** Reveal once and stay. Off, it hides again each time it leaves the screen. */
+    once?: boolean | undefined;
+    /** The element to render. */
+    as?: string | undefined;
+};
+type __VLS_Slots = {
+    /** What is revealed. */
+    default: () => unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/motion/CountUp.vue.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A number that counts up to its value once it scrolls into view.
+ *
+ * Where `NumberTicker` rolls digits, this passes through every value on the
+ * way — the right choice for a statistic a reader should watch grow, and for
+ * decimals, where rolling columns would spin without meaning anything.
+ *
+ * It waits until it is on screen, so a count below the fold is not over
+ * before anyone sees it. It eases out: fast at first, settling on the value,
+ * which reads as arriving rather than stopping. A screen reader hears the
+ * final value only. On a server, and for a reader who asked for less motion,
+ * it is the value from the start.
+ */
+type __VLS_Props = {
+    /** The number to count to. Change it and it counts on from where it is. */
+    value: number;
+    /** Where the first count starts. */
+    from?: number | undefined;
+    /** How long a count takes, in milliseconds. */
+    duration?: number | undefined;
+    /** Passed to `Intl.NumberFormat`. Set `maximumFractionDigits` to count in decimals. */
+    format?: Intl.NumberFormatOptions | undefined;
+    /** A BCP 47 tag. Unset, the kit's active formatting locale. */
+    locale?: string | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/motion/NumberTicker.vue.d.ts

@@ -0,0 +1,33 @@
+/**
+ * A number whose digits roll to their new value, like an odometer or a note
+ * counter.
+ *
+ * Each digit is a column of 0–9 moved into place, so going from 19 to 20
+ * turns the tens over rather than redrawing the whole number — the eye
+ * follows what changed. Positions are counted from the right, which keeps the
+ * units column the units column when the number grows a digit, and keeps a
+ * thousands separator where it was.
+ *
+ * Formatting is `Intl.NumberFormat`, so currency, percent, grouping and
+ * decimals are the locale's, and change with it. A screen reader hears the
+ * value once, as formatted text; the rolling columns are hidden from it.
+ *
+ * On a server, and for a reader who asked for less motion, it is the number
+ * and nothing else.
+ */
+type __VLS_Props = {
+    /** The number to show. Change it and the digits roll to the new one. */
+    value: number;
+    /**
+     * Where the digits start when the component mounts, so a count can roll up
+     * as the page opens. Unset, the first frame is already the value.
+     */
+    from?: number | undefined;
+    /** Passed to `Intl.NumberFormat`: `{ style: 'currency', currency: 'TRY' }`, decimals, grouping. */
+    format?: Intl.NumberFormatOptions | undefined;
+    /** A BCP 47 tag. Unset, the kit's active formatting locale. */
+    locale?: string | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/motion/TextRotate.vue.d.ts

@@ -0,0 +1,24 @@
+/**
+ * One word in a sentence that changes on its own: "Build it *glass*",
+ * then *brutal*, then *soft*.
+ *
+ * It stops while the pointer rests on it or it holds focus, and an app can
+ * stop it with `paused`. That is not a courtesy: content that moves on its
+ * own for more than five seconds needs a way to stop it, and hovering is
+ * where a reader's attention already is.
+ *
+ * For a reader who asked for less motion it does not rotate at all — the
+ * first word stands, which is a complete sentence. On a server it is the
+ * first word too.
+ */
+type __VLS_Props = {
+    /** The words, in order. The first is the one a server and a still page show. */
+    words: readonly string[];
+    /** How long each word stays, in milliseconds. */
+    interval?: number | undefined;
+    /** Holds the current word. For a pause button, or a section out of view. */
+    paused?: boolean | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/motion/TypeWriter.vue.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Text that types itself out, and — given several lines — deletes each one
+ * and types the next.
+ *
+ * A screen reader hears the whole line, never a half-typed word: the typing
+ * is hidden from it and the full text sits beside it. The server and a
+ * reader who asked for less motion get the first line, complete.
+ *
+ * It stops while hovered or focused, and on `paused`, for the same reason
+ * `TextRotate` does.
+ */
+type __VLS_Props = {
+    /** One line to type, or several to type in turn. */
+    text: string | readonly string[];
+    /** Milliseconds per character typed. */
+    speed?: number | undefined;
+    /** Milliseconds per character deleted. */
+    deleteSpeed?: number | undefined;
+    /** How long a finished line stays before it is deleted, in milliseconds. */
+    hold?: number | undefined;
+    /** With several lines, start again after the last. With one, it is typed once. */
+    loop?: boolean | undefined;
+    /** Show a blinking caret after the text. */
+    cursor?: boolean | undefined;
+    /** Stops where it is. */
+    paused?: boolean | undefined;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/motion/environment.d.ts

@@ -0,0 +1,21 @@
+/**
+ * What every moving part asks before it moves.
+ *
+ * Kept in one place so the answers cannot drift apart: a counter that honoured
+ * reduced motion beside a marquee that did not would be worse than neither.
+ * Each is safe to call on a server, where the answer is "do not move" — the
+ * server renders the final state, and that is what a reader without
+ * JavaScript should see.
+ */
+/** Whether the reader has asked the operating system for less motion. */
+export declare function prefersReducedMotion(): boolean;
+/** One frame from now, or the nearest thing to it where frames do not exist. */
+export declare function nextFrame(callback: () => void): () => void;
+/**
+ * Calls `callback` with whether `element` is on screen, each time that
+ * changes. Returns the function that stops watching.
+ *
+ * Without `IntersectionObserver` the element counts as visible straight away:
+ * an animation that never starts is a missing number, not a missing flourish.
+ */
+export declare function watchVisibility(element: Element, callback: (visible: boolean) => void, threshold?: number): () => void;

package/dist/motion/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * rei-kit/motion — numbers that count, words that change, content that
+ * arrives.
+ *
+ * Every part here renders its final state on a server and for a reader who
+ * asked for less motion, keeps assistive tech to the finished value, and
+ * stops when hovered or focused if it moves on its own. The utilities that go
+ * with them are in `rei-kit/motion.css`, which both presets include.
+ */
+export { default as NumberTicker } from './NumberTicker.vue';
+export { default as CountUp } from './CountUp.vue';
+export { default as TextRotate } from './TextRotate.vue';
+export { default as TypeWriter } from './TypeWriter.vue';
+export { default as BaseReveal } from './BaseReveal.vue';
+export { default as BaseMarquee } from './BaseMarquee.vue';

package/dist/motion.css

@@ -0,0 +1,119 @@
+/* rei-kit — motion utilities.
+ *
+ * Small loops and entrances for the things a page wants to draw the eye to:
+ *
+ *   animate-float        drifts up and down — a badge, an illustration
+ *   animate-pulse-soft   breathes — a live indicator, a call to action
+ *   animate-glow         a ring that swells and fades, in the primary colour
+ *   animate-wiggle       a small shake — "look here", once in a while
+ *   animate-pop          grows into place once — something that just arrived
+ *   text-shimmer         light passing across text, in the palette's colours
+ *
+ * Declared as theme animations, so Tailwind emits a keyframe only for the
+ * utilities an app actually uses. Colours come from the roles, so every one
+ * follows the palette. All of them stop for a reader who asked for less
+ * motion — here, once, rather than left to each app to remember
+ * `motion-safe:`. */
+@theme {
+  --animate-float: rk-float 3.2s ease-in-out infinite;
+  --animate-pulse-soft: rk-pulse-soft 2.4s ease-in-out infinite;
+  --animate-glow: rk-glow 2.4s ease-out infinite;
+  --animate-wiggle: rk-wiggle 2.8s ease-in-out infinite;
+  --animate-pop: rk-pop 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
+
+  @keyframes rk-float {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-6px);
+    }
+  }
+
+  @keyframes rk-pulse-soft {
+    0%,
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    50% {
+      opacity: 0.72;
+      transform: scale(0.97);
+    }
+  }
+
+  @keyframes rk-glow {
+    0% {
+      box-shadow: 0 0 0 0 color-mix(in oklab, var(--color-primary) 45%, transparent);
+    }
+    100% {
+      box-shadow: 0 0 0 12px color-mix(in oklab, var(--color-primary) 0%, transparent);
+    }
+  }
+
+  /* Still for most of the loop: a wiggle that never stops is noise. */
+  @keyframes rk-wiggle {
+    0%,
+    80%,
+    100% {
+      transform: rotate(0);
+    }
+    84% {
+      transform: rotate(-6deg);
+    }
+    88% {
+      transform: rotate(5deg);
+    }
+    92% {
+      transform: rotate(-3deg);
+    }
+    96% {
+      transform: rotate(2deg);
+    }
+  }
+
+  @keyframes rk-pop {
+    from {
+      opacity: 0;
+      transform: scale(0.85);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes rk-shimmer {
+    to {
+      background-position: -200% 0;
+    }
+  }
+}
+
+/* Text painted with a band of light moving across it. The ink stays readable
+   the whole way: the band is the primary colour, not white. */
+@utility text-shimmer {
+  background: linear-gradient(
+      100deg,
+      var(--color-ink) 40%,
+      var(--color-primary) 50%,
+      var(--color-ink) 60%
+    )
+    0 0 / 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: rk-shimmer 2.8s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-float,
+  .animate-pulse-soft,
+  .animate-glow,
+  .animate-wiggle,
+  .animate-pop,
+  .text-shimmer {
+    animation: none;
+  }
+}