@beautinique/frontend-components 1.0.7 → 1.0.9

package/dist/testimonials/index.js

@@ -0,0 +1,244 @@
+import { addCollection, Icon } from '@iconify/react';
+import { useState, useEffect, useSyncExternalStore } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var QUERY = "(prefers-reduced-motion: reduce)";
+var query = /* @__PURE__ */ __name(() => window.matchMedia?.(QUERY), "query");
+var subscribe = /* @__PURE__ */ __name((onChange) => {
+  const list = query();
+  list?.addEventListener("change", onChange);
+  return () => {
+    list?.removeEventListener("change", onChange);
+  };
+}, "subscribe");
+var getSnapshot = /* @__PURE__ */ __name(() => query()?.matches ?? false, "getSnapshot");
+var getServerSnapshot = /* @__PURE__ */ __name(() => false, "getServerSnapshot");
+var usePrefersReducedMotion = /* @__PURE__ */ __name(() => useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot), "usePrefersReducedMotion");
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/testimonials/testimonials-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "streamline-ultimate-color",
+    width: 24,
+    height: 24,
+    icons: {
+      "rating-star": {
+        body: '<g fill="none"><path fill="#ffef5e" d="M11.523 1.332a.511.511 0 0 1 .957 0l2.59 7.343h7.315a.512.512 0 0 1 .332.9l-6.112 5.067l2.558 7.685a.512.512 0 0 1-.788.574L12 18.224L5.622 22.9a.511.511 0 0 1-.785-.574l2.559-7.685l-6.113-5.067a.512.512 0 0 1 .332-.9h7.316z"/><path fill="#fff9bf" d="M12 18.224L5.622 22.9a.511.511 0 0 1-.785-.574l2.559-7.685l-6.113-5.067a.512.512 0 0 1 .332-.9h7.316l2.59-7.343a.51.51 0 0 1 .48-.332z"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M11.523 1.332a.511.511 0 0 1 .957 0l2.59 7.343h7.315a.512.512 0 0 1 .332.9l-6.112 5.067l2.558 7.685a.512.512 0 0 1-.788.574L12 18.224L5.622 22.9a.511.511 0 0 1-.785-.574l2.559-7.685l-6.113-5.067a.512.512 0 0 1 .332-.9h7.316z"/></g>'
+      }
+    }
+  },
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "arrow-left-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 12H4M10 18L4 12L10 6"/>'
+      },
+      "arrow-right-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12H20M14 18L20 12L14 6"/>'
+      },
+      "pause-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M2 6C2 4.11438 2 3.17157 2.58579 2.58579C3.17157 2 4.11438 2 6 2C7.88562 2 8.82843 2 9.41421 2.58579C10 3.17157 10 4.11438 10 6V18C10 19.8856 10 20.8284 9.41421 21.4142C8.82843 22 7.88562 22 6 22C4.11438 22 3.17157 22 2.58579 21.4142C2 20.8284 2 19.8856 2 18V6Z"/><path d="M14 6C14 4.11438 14 3.17157 14.5858 2.58579C15.1716 2 16.1144 2 18 2C19.8856 2 20.8284 2 21.4142 2.58579C22 3.17157 22 4.11438 22 6V18C22 19.8856 22 20.8284 21.4142 21.4142C20.8284 22 19.8856 22 18 22C16.1144 22 15.1716 22 14.5858 21.4142C14 20.8284 14 19.8856 14 18V6Z"/></g>'
+      },
+      "play-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M20.4086 9.35258C22.5305 10.5065 22.5305 13.4935 20.4086 14.6474L7.59662 21.6145C5.53435 22.736 3 21.2763 3 18.9671L3 5.0329C3 2.72368 5.53435 1.26402 7.59661 2.38548L20.4086 9.35258Z"/>'
+      }
+    }
+  }
+];
+var { register: registerTestimonialIcons, names: TESTIMONIAL_ICON_NAMES } = createIconRegistry(ICON_SETS);
+var LABELS = {
+  carousel: "Testimonials",
+  previous: "Previous testimonial",
+  next: "Next testimonial",
+  pause: "Pause the testimonials",
+  play: "Play the testimonials",
+  rating: /* @__PURE__ */ __name((rating) => `Rated ${String(rating)} out of 5`, "rating"),
+  slide: /* @__PURE__ */ __name((index, total) => `${String(index + 1)} of ${String(total)}`, "slide")
+};
+var MAX_STARS = 5;
+var initialsOf = /* @__PURE__ */ __name((name) => name.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => Array.from(word).at(0) ?? "").join("").toUpperCase(), "initialsOf");
+var IconButton = /* @__PURE__ */ __name(({
+  icon,
+  label,
+  onClick
+}) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    "aria-label": label,
+    onClick,
+    className: "text-tertiary hover:text-primary cursor-pointer rounded-sm p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c",
+    children: /* @__PURE__ */ jsx(Icon, { icon, className: "size-5" })
+  }
+), "IconButton");
+var TestimonialCarousel = /* @__PURE__ */ __name(({
+  testimonials,
+  interval = 5e3,
+  className = "",
+  labels
+}) => {
+  registerTestimonialIcons();
+  const text = {
+    carousel: labels?.carousel ?? LABELS.carousel,
+    previous: labels?.previous ?? LABELS.previous,
+    next: labels?.next ?? LABELS.next,
+    pause: labels?.pause ?? LABELS.pause,
+    play: labels?.play ?? LABELS.play,
+    rating: labels?.rating ?? LABELS.rating,
+    slide: labels?.slide ?? LABELS.slide
+  };
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [index, setIndex] = useState(0);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [choice, setChoice] = useState(null);
+  const count = testimonials.length;
+  const shown = Math.min(index, count - 1);
+  const canTurn = count > 1 && interval > 0 && !prefersReducedMotion;
+  const isTurning = canTurn && (choice === "playing" || choice === null && !isHovered && !isFocused);
+  useEffect(() => {
+    if (!isTurning) return;
+    const timer = window.setTimeout(() => {
+      setIndex((current) => (Math.min(current, count - 1) + 1) % count);
+    }, interval);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [isTurning, shown, count, interval]);
+  if (count === 0) return null;
+  const go = /* @__PURE__ */ __name((step) => {
+    setIndex((current) => (Math.min(current, count - 1) + step + count) % count);
+  }, "go");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "carousel",
+      "aria-label": text.carousel,
+      onPointerEnter: (event) => {
+        if (event.pointerType === "mouse") setIsHovered(true);
+      },
+      onPointerLeave: () => {
+        setIsHovered(false);
+      },
+      onFocus: () => {
+        setIsFocused(true);
+      },
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setIsFocused(false);
+      },
+      className: `bg-tertiary-invert relative rounded-lg p-4 ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { "aria-live": isTurning ? "off" : "polite", children: testimonials.map((testimonial, position) => {
+          const stars = Math.max(
+            0,
+            Math.min(MAX_STARS, Math.round(testimonial.rating ?? MAX_STARS))
+          );
+          return /* @__PURE__ */ jsxs(
+            "figure",
+            {
+              role: "group",
+              "aria-roledescription": "slide",
+              "aria-label": text.slide(position, count),
+              hidden: position !== shown,
+              className: "group m-0 flex w-full flex-col gap-4",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 leading-6", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: text.rating(stars) }),
+                    Array.from({ length: stars }, (_, star) => /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        "aria-hidden": "true",
+                        icon: "streamline-ultimate-color:rating-star",
+                        className: "size-5"
+                      },
+                      star
+                    ))
+                  ] }),
+                  /* @__PURE__ */ jsx("blockquote", { children: /* @__PURE__ */ jsx("p", { className: "text-tertiary group-hover:text-primary text-xs break-words italic before:content-['\u201C'] after:content-['\u201D']", children: testimonial.content }) })
+                ] }),
+                /* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-2 pr-24", children: [
+                  testimonial.image ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: testimonial.image,
+                      alt: "",
+                      loading: "lazy",
+                      className: "bg-secondary-invert/50 border-primary/50 size-8 shrink-0 rounded-full border object-cover"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "bg-secondary-invert/50 border-primary/50 text-secondary grid size-8 shrink-0 place-items-center rounded-full border text-[10px] font-semibold",
+                      children: initialsOf(testimonial.name)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
+                    /* @__PURE__ */ jsx("cite", { className: "text-secondary text-[10px] font-semibold not-italic", children: testimonial.name }),
+                    testimonial.role && /* @__PURE__ */ jsx("span", { className: "text-tertiary text-[9px] leading-4", children: testimonial.role })
+                  ] })
+                ] })
+              ]
+            },
+            `${testimonial.name}#${String(position)}`
+          );
+        }) }),
+        count > 1 && /* @__PURE__ */ jsxs("div", { className: "absolute right-4 bottom-4 flex items-center gap-1", children: [
+          canTurn && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: choice === "paused" ? "solar:play-linear" : "solar:pause-linear",
+              label: choice === "paused" ? text.play : text.pause,
+              onClick: () => {
+                setChoice(choice === "paused" ? "playing" : "paused");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: "solar:arrow-left-linear",
+              label: text.previous,
+              onClick: () => {
+                go(-1);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              icon: "solar:arrow-right-linear",
+              label: text.next,
+              onClick: () => {
+                go(1);
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, "TestimonialCarousel");
+
+export { TestimonialCarousel };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/testimonials/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/usePrefersReducedMotion.ts","../../src/lib/icon-registry.ts","../../src/testimonials/testimonials-icons.ts","../../src/testimonials/TestimonialCarousel.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { useSyncExternalStore } from 'react';\n\nconst QUERY = '(prefers-reduced-motion: reduce)';\n\n// `matchMedia` is in every browser; a test environment such as jsdom may not have it, and then the\n// answer is \"no preference\" instead of an error.\nconst query = () => (window as Partial<Window>).matchMedia?.(QUERY);\n\nconst subscribe = (onChange: () => void) => {\n  const list = query();\n\n  list?.addEventListener('change', onChange);\n\n  return () => {\n    list?.removeEventListener('change', onChange);\n  };\n};\n\nconst getSnapshot = () => query()?.matches ?? false;\nconst getServerSnapshot = () => false;\n\n/**\n * Whether the person asked their system for less motion. It follows the setting while the page is\n * open, and is `false` on a server (a page that moves by itself starts still there and stops once the\n * browser says so).\n */\nexport const usePrefersReducedMotion = () =>\n  useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n","import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/**\n * Makes the registration of a bundled icon set: `register` puts the sets in Iconify (once, calling it\n * again does nothing) and `names` lists every icon, e.g. `solar:info-circle-linear`.\n *\n * A component calls `register` when it renders, not when its file is imported: an app that never\n * renders the component never runs it, and nothing depends on the bundler keeping an import that is\n * only there for its effect (the build says \"ignored-bare-import\" for those).\n */\nexport const createIconRegistry = (sets: readonly IconifyJSON[]) => {\n  let registered = false;\n\n  return {\n    register: () => {\n      if (registered) return;\n\n      for (const set of sets) addCollection(set);\n      registered = true;\n    },\n    names: sets.flatMap(({ prefix, icons, aliases }) =>\n      [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`),\n    ),\n  };\n};\n","import type { IconifyJSON } from '@iconify/react';\n\nimport { createIconRegistry } from '../lib/icon-registry.js';\n\n/*\n * The icons of the testimonial carousel, bundled so they show without a network and without waiting for the\n * Iconify API (see `toast/toast-icons.ts`). The data is what\n * `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'streamline-ultimate-color',\n    width: 24,\n    height: 24,\n    icons: {\n      'rating-star': {\n        body: '<g fill=\"none\"><path fill=\"#ffef5e\" d=\"M11.523 1.332a.511.511 0 0 1 .957 0l2.59 7.343h7.315a.512.512 0 0 1 .332.9l-6.112 5.067l2.558 7.685a.512.512 0 0 1-.788.574L12 18.224L5.622 22.9a.511.511 0 0 1-.785-.574l2.559-7.685l-6.113-5.067a.512.512 0 0 1 .332-.9h7.316z\"/><path fill=\"#fff9bf\" d=\"M12 18.224L5.622 22.9a.511.511 0 0 1-.785-.574l2.559-7.685l-6.113-5.067a.512.512 0 0 1 .332-.9h7.316l2.59-7.343a.51.51 0 0 1 .48-.332z\"/><path stroke=\"#191919\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.523 1.332a.511.511 0 0 1 .957 0l2.59 7.343h7.315a.512.512 0 0 1 .332.9l-6.112 5.067l2.558 7.685a.512.512 0 0 1-.788.574L12 18.224L5.622 22.9a.511.511 0 0 1-.785-.574l2.559-7.685l-6.113-5.067a.512.512 0 0 1 .332-.9h7.316z\"/></g>',\n      },\n    },\n  },\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'arrow-left-linear': {\n        body: '<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M20 12H4M10 18L4 12L10 6\"/>',\n      },\n      'arrow-right-linear': {\n        body: '<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 12H20M14 18L20 12L14 6\"/>',\n      },\n      'pause-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M2 6C2 4.11438 2 3.17157 2.58579 2.58579C3.17157 2 4.11438 2 6 2C7.88562 2 8.82843 2 9.41421 2.58579C10 3.17157 10 4.11438 10 6V18C10 19.8856 10 20.8284 9.41421 21.4142C8.82843 22 7.88562 22 6 22C4.11438 22 3.17157 22 2.58579 21.4142C2 20.8284 2 19.8856 2 18V6Z\"/><path d=\"M14 6C14 4.11438 14 3.17157 14.5858 2.58579C15.1716 2 16.1144 2 18 2C19.8856 2 20.8284 2 21.4142 2.58579C22 3.17157 22 4.11438 22 6V18C22 19.8856 22 20.8284 21.4142 21.4142C20.8284 22 19.8856 22 18 22C16.1144 22 15.1716 22 14.5858 21.4142C14 20.8284 14 19.8856 14 18V6Z\"/></g>',\n      },\n      'play-linear': {\n        body: '<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\" d=\"M20.4086 9.35258C22.5305 10.5065 22.5305 13.4935 20.4086 14.6474L7.59662 21.6145C5.53435 22.736 3 21.2763 3 18.9671L3 5.0329C3 2.72368 5.53435 1.26402 7.59661 2.38548L20.4086 9.35258Z\"/>',\n      },\n    },\n  },\n];\n\n/**\n * Registers the icons above with Iconify; the components of this entry call it when they render\n * (calling it again is harmless).\n */\nexport const { register: registerTestimonialIcons, names: TESTIMONIAL_ICON_NAMES } =\n  createIconRegistry(ICON_SETS);\n","import { Icon } from '@iconify/react';\nimport { type FocusEvent, type PointerEvent, useEffect, useState } from 'react';\n\nimport { usePrefersReducedMotion } from '../lib/usePrefersReducedMotion.js';\nimport type { IClassName } from '../types/component.js';\nimport { registerTestimonialIcons } from './testimonials-icons.js';\n\nexport interface ITestimonial {\n  /** What the person said. */\n  content: string;\n  name: string;\n  role?: string;\n  /** The address of a photo of the person. Without it their initials are shown. */\n  image?: string;\n  /** Stars, from 0 to 5. @default 5 */\n  rating?: number;\n}\n\n/** The words said to assistive technology. English by default. */\nexport interface ITestimonialLabels {\n  /** The name of the carousel. */\n  carousel: string;\n  previous: string;\n  next: string;\n  /** The button that stops the carousel turning by itself. */\n  pause: string;\n  /** The button that makes it turn by itself again. */\n  play: string;\n  /** What the stars say (\"Rated 5 out of 5\"). */\n  rating: (rating: number) => string;\n  /** The name of a slide (\"2 of 3\"). */\n  slide: (index: number, total: number) => string;\n}\n\nexport interface ITestimonialCarousel extends IClassName {\n  testimonials: readonly ITestimonial[];\n  /** How long each testimonial stays, in milliseconds. `0` never turns by itself. @default 5000 */\n  interval?: number;\n  labels?: Partial<ITestimonialLabels>;\n}\n\nconst LABELS: ITestimonialLabels = {\n  carousel: 'Testimonials',\n  previous: 'Previous testimonial',\n  next: 'Next testimonial',\n  pause: 'Pause the testimonials',\n  play: 'Play the testimonials',\n  rating: (rating) => `Rated ${String(rating)} out of 5`,\n  slide: (index, total) => `${String(index + 1)} of ${String(total)}`,\n};\n\nconst MAX_STARS = 5;\n\nconst initialsOf = (name: string) =>\n  name\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((word) => Array.from(word).at(0) ?? '')\n    .join('')\n    .toUpperCase();\n\nconst IconButton = ({\n  icon,\n  label,\n  onClick,\n}: {\n  icon: string;\n  label: string;\n  onClick: () => void;\n}) => (\n  <button\n    type=\"button\"\n    aria-label={label}\n    onClick={onClick}\n    className=\"text-tertiary hover:text-primary cursor-pointer rounded-sm p-0.5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c\"\n  >\n    <Icon icon={icon} className=\"size-5\" />\n  </button>\n);\n\n/**\n * Testimonials, one at a time, that turn by themselves. It follows what a carousel that moves has to\n * do: it stops while the pointer is over it or the focus is in it, and a button stops it (and starts\n * it again); with a system setting for less motion it does not turn at all. Previous and next buttons\n * go round, and what is announced is the slide that is current, but only while it is not turning.\n */\nexport const TestimonialCarousel = ({\n  testimonials,\n  interval = 5000,\n  className = '',\n  labels,\n}: ITestimonialCarousel) => {\n  registerTestimonialIcons();\n\n  const text = {\n    carousel: labels?.carousel ?? LABELS.carousel,\n    previous: labels?.previous ?? LABELS.previous,\n    next: labels?.next ?? LABELS.next,\n    pause: labels?.pause ?? LABELS.pause,\n    play: labels?.play ?? LABELS.play,\n    rating: labels?.rating ?? LABELS.rating,\n    slide: labels?.slide ?? LABELS.slide,\n  };\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const [index, setIndex] = useState(0);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isFocused, setIsFocused] = useState(false);\n  // what the person chose with the button; `null` while they have not\n  const [choice, setChoice] = useState<'paused' | 'playing' | null>(null);\n\n  const count = testimonials.length;\n  const shown = Math.min(index, count - 1);\n  const canTurn = count > 1 && interval > 0 && !prefersReducedMotion;\n  // the button wins over the pointer and the focus: a person who pressed \"play\" wants it to turn\n  const isTurning =\n    canTurn && (choice === 'playing' || (choice === null && !isHovered && !isFocused));\n\n  useEffect(() => {\n    if (!isTurning) return;\n\n    const timer = window.setTimeout(() => {\n      setIndex((current) => (Math.min(current, count - 1) + 1) % count);\n    }, interval);\n\n    return () => {\n      window.clearTimeout(timer);\n    };\n  }, [isTurning, shown, count, interval]);\n\n  if (count === 0) return null;\n\n  const go = (step: 1 | -1) => {\n    setIndex((current) => (Math.min(current, count - 1) + step + count) % count);\n  };\n\n  return (\n    <div\n      role=\"group\"\n      aria-roledescription=\"carousel\"\n      aria-label={text.carousel}\n      onPointerEnter={(event: PointerEvent<HTMLDivElement>) => {\n        // a touch is not \"the pointer is over it\": there is no leaving a finger\n        if (event.pointerType === 'mouse') setIsHovered(true);\n      }}\n      onPointerLeave={() => {\n        setIsHovered(false);\n      }}\n      onFocus={() => {\n        setIsFocused(true);\n      }}\n      onBlur={(event: FocusEvent<HTMLDivElement>) => {\n        if (!event.currentTarget.contains(event.relatedTarget)) setIsFocused(false);\n      }}\n      className={`bg-tertiary-invert relative rounded-lg p-4 ${className}`}\n    >\n      <div aria-live={isTurning ? 'off' : 'polite'}>\n        {testimonials.map((testimonial, position) => {\n          const stars = Math.max(\n            0,\n            Math.min(MAX_STARS, Math.round(testimonial.rating ?? MAX_STARS)),\n          );\n\n          return (\n            <figure\n              key={`${testimonial.name}#${String(position)}`}\n              role=\"group\"\n              aria-roledescription=\"slide\"\n              aria-label={text.slide(position, count)}\n              hidden={position !== shown}\n              className=\"group m-0 flex w-full flex-col gap-4\"\n            >\n              <div className=\"flex flex-col gap-4 leading-6\">\n                <div className=\"flex gap-1\">\n                  <span className=\"sr-only\">{text.rating(stars)}</span>\n                  {Array.from({ length: stars }, (_, star) => (\n                    <Icon\n                      key={star}\n                      aria-hidden=\"true\"\n                      icon=\"streamline-ultimate-color:rating-star\"\n                      className=\"size-5\"\n                    />\n                  ))}\n                </div>\n                <blockquote>\n                  <p className=\"text-tertiary group-hover:text-primary text-xs break-words italic before:content-['“'] after:content-['”']\">\n                    {testimonial.content}\n                  </p>\n                </blockquote>\n              </div>\n              <figcaption className=\"flex items-center gap-2 pr-24\">\n                {testimonial.image ? (\n                  <img\n                    src={testimonial.image}\n                    alt=\"\"\n                    loading=\"lazy\"\n                    className=\"bg-secondary-invert/50 border-primary/50 size-8 shrink-0 rounded-full border object-cover\"\n                  />\n                ) : (\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"bg-secondary-invert/50 border-primary/50 text-secondary grid size-8 shrink-0 place-items-center rounded-full border text-[10px] font-semibold\"\n                  >\n                    {initialsOf(testimonial.name)}\n                  </span>\n                )}\n                <span className=\"flex flex-col\">\n                  <cite className=\"text-secondary text-[10px] font-semibold not-italic\">\n                    {testimonial.name}\n                  </cite>\n                  {testimonial.role && (\n                    <span className=\"text-tertiary text-[9px] leading-4\">{testimonial.role}</span>\n                  )}\n                </span>\n              </figcaption>\n            </figure>\n          );\n        })}\n      </div>\n\n      {count > 1 && (\n        <div className=\"absolute right-4 bottom-4 flex items-center gap-1\">\n          {canTurn && (\n            <IconButton\n              icon={choice === 'paused' ? 'solar:play-linear' : 'solar:pause-linear'}\n              label={choice === 'paused' ? text.play : text.pause}\n              onClick={() => {\n                setChoice(choice === 'paused' ? 'playing' : 'paused');\n              }}\n            />\n          )}\n          <IconButton\n            icon=\"solar:arrow-left-linear\"\n            label={text.previous}\n            onClick={() => {\n              go(-1);\n            }}\n          />\n          <IconButton\n            icon=\"solar:arrow-right-linear\"\n            label={text.next}\n            onClick={() => {\n              go(1);\n            }}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n"]}

package/dist/testimonials/testimonials-icons.d.cts

@@ -0,0 +1,6 @@
+/**
+ * Registers the icons above with Iconify; the components of this entry call it when they render
+ * (calling it again is harmless).
+ */
+export declare const registerTestimonialIcons: () => void, TESTIMONIAL_ICON_NAMES: string[];
+//# sourceMappingURL=testimonials-icons.d.cts.map

package/dist/testimonials/testimonials-icons.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testimonials-icons.d.cts","sourceRoot":"","sources":["../../src/testimonials/testimonials-icons.ts"],"names":[],"mappings":"AAyCA;;;GAGG;AACH,eAAO,MAAkB,wBAAwB,cAAS,sBAAsB,UACjD,CAAC"}

package/dist/testimonials/testimonials-icons.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Registers the icons above with Iconify; the components of this entry call it when they render
+ * (calling it again is harmless).
+ */
+export declare const registerTestimonialIcons: () => void, TESTIMONIAL_ICON_NAMES: string[];
+//# sourceMappingURL=testimonials-icons.d.ts.map

package/dist/testimonials/testimonials-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testimonials-icons.d.ts","sourceRoot":"","sources":["../../src/testimonials/testimonials-icons.ts"],"names":[],"mappings":"AAyCA;;;GAGG;AACH,eAAO,MAAkB,wBAAwB,cAAS,sBAAsB,UACjD,CAAC"}

package/dist/theme/Theme.d.cts

@@ -0,0 +1,23 @@
+import type { TThemeStoreHook } from '@beautinique/frontend-stores';
+import type { ComponentProps } from 'react';
+export interface ITheme extends Omit<ComponentProps<'button'>, 'children' | 'onClick' | 'type' | 'aria-label'> {
+    /** The theme store of the app: what `createThemeStore()` of `@beautinique/frontend-stores` gave it. */
+    store: TThemeStoreHook;
+    /** What the button says to assistive technology, for the theme it would switch to. */
+    labels?: {
+        /** @default 'Switch to light theme' */
+        toLight?: string;
+        /** @default 'Switch to dark theme' */
+        toDark?: string;
+    };
+}
+/**
+ * A button that switches between the dark and the light theme. It shows the theme it would switch
+ * to: a sun while the theme is dark, a moon while it is light. It only changes the store; putting the
+ * theme on the page (a class on `<html>`) is the app's.
+ *
+ * The icons move; for a person who asked their system for less motion (`prefers-reduced-motion`)
+ * the button shows still ones instead.
+ */
+export declare const Theme: ({ store: useThemeStore, labels, className, ...buttonProps }: ITheme) => import("react").JSX.Element;
+//# sourceMappingURL=Theme.d.cts.map

package/dist/theme/Theme.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.d.cts","sourceRoot":"","sources":["../../src/theme/Theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,WAAW,MAAO,SAAQ,IAAI,CAClC,cAAc,CAAC,QAAQ,CAAC,EACxB,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAC/C;IACC,uGAAuG;IACvG,KAAK,EAAE,eAAe,CAAC;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE;QACP,uCAAuC;QACvC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,sCAAsC;QACtC,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAWD;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,GAAI,6DAAkE,MAAM,gCAuB7F,CAAC"}

package/dist/theme/Theme.d.ts

@@ -0,0 +1,23 @@
+import type { TThemeStoreHook } from '@beautinique/frontend-stores';
+import type { ComponentProps } from 'react';
+export interface ITheme extends Omit<ComponentProps<'button'>, 'children' | 'onClick' | 'type' | 'aria-label'> {
+    /** The theme store of the app: what `createThemeStore()` of `@beautinique/frontend-stores` gave it. */
+    store: TThemeStoreHook;
+    /** What the button says to assistive technology, for the theme it would switch to. */
+    labels?: {
+        /** @default 'Switch to light theme' */
+        toLight?: string;
+        /** @default 'Switch to dark theme' */
+        toDark?: string;
+    };
+}
+/**
+ * A button that switches between the dark and the light theme. It shows the theme it would switch
+ * to: a sun while the theme is dark, a moon while it is light. It only changes the store; putting the
+ * theme on the page (a class on `<html>`) is the app's.
+ *
+ * The icons move; for a person who asked their system for less motion (`prefers-reduced-motion`)
+ * the button shows still ones instead.
+ */
+export declare const Theme: ({ store: useThemeStore, labels, className, ...buttonProps }: ITheme) => import("react").JSX.Element;
+//# sourceMappingURL=Theme.d.ts.map

package/dist/theme/Theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/theme/Theme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,WAAW,MAAO,SAAQ,IAAI,CAClC,cAAc,CAAC,QAAQ,CAAC,EACxB,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAC/C;IACC,uGAAuG;IACvG,KAAK,EAAE,eAAe,CAAC;IACvB,sFAAsF;IACtF,MAAM,CAAC,EAAE;QACP,uCAAuC;QACvC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,sCAAsC;QACtC,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACH;AAWD;;;;;;;GAOG;AACH,eAAO,MAAM,KAAK,GAAI,6DAAkE,MAAM,gCAuB7F,CAAC"}

package/dist/theme/index.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var react = require('@iconify/react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var THEME_ICON_SETS = [
+  {
+    prefix: "line-md",
+    width: 24,
+    height: 24,
+    icons: {
+      "sunny-loop": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="34" d="M12 7c2.76 0 5 2.24 5 5c0 2.76 -2.24 5 -5 5c-2.76 0 -5 -2.24 -5 -5c0 -2.76 2.24 -5 5 -5Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="34;0"/></path><path d="M12 21v1M21 12h1M12 3v-1M3 12h-1" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.5s" to="1"/><animate fill="freeze" attributeName="d" begin="0.5s" dur="0.2s" values="M12 19v1M19 12h1M12 5v-1M5 12h-1;M12 21v1M21 12h1M12 3v-1M3 12h-1"/></path><path d="M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.7s" to="1"/><animate fill="freeze" attributeName="d" begin="0.7s" dur="0.2s" values="M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5;M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5"/></path></g>'
+      },
+      "moon-loop": {
+        body: '<path fill="none" stroke="currentColor" stroke-dasharray="56" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 6c0 6.08 4.92 11 11 11c0.53 0 1.05 -0.04 1.56 -0.11c-1.61 2.47 -4.39 4.11 -7.56 4.11c-4.97 0 -9 -4.03 -9 -9c0 -3.17 1.64 -5.95 4.11 -7.56c-0.07 0.51 -0.11 1.03 -0.11 1.56Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="56;0"/></path><g fill="currentColor"><path d="M15.22 6.03l2.53 -1.94l-3.19 -0.09l-1.06 -3l-1.06 3l-3.19 0.09l2.53 1.94l-0.91 3.06l2.63 -1.81l2.63 1.81l-0.91 -3.06Z" opacity="0"><animate attributeName="opacity" begin="0.7s" dur="6s" keyTimes="0;0.1;0.4;0.5;1" repeatCount="indefinite" values="0;1;1;0;0"/></path><path d="M19.61 12.25l1.64 -1.25l-2.06 -0.05l-0.69 -1.95l-0.69 1.95l-2.06 0.05l1.64 1.25l-0.59 1.98l1.7 -1.17l1.7 1.17l-0.59 -1.98Z" opacity="0"><animate attributeName="opacity" begin="0.7s" dur="6s" keyTimes="0;0.2;0.3;0.6;0.7;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></path><path d="M13.61 5.25l1.64 -1.25l-2.06 -0.05l-0.69 -1.95l-0.69 1.95l-2.06 0.05l1.64 1.25l-0.59 1.98l1.7 -1.17l1.7 1.17Z" opacity="0"><animate attributeName="opacity" begin="3.7s" dur="6s" keyTimes="0;0.1;0.4;0.5;1" repeatCount="indefinite" values="0;1;1;0;0"/></path><path d="M20.83 9.73l1.88 -1.44l-2.37 -0.07l-0.79 -2.22l-0.79 2.23l-2.37 0.07l1.88 1.44l-0.68 2.27l1.95 -1.34l1.95 1.34Z" opacity="0"><animate attributeName="opacity" begin="3.7s" dur="6s" keyTimes="0;0.2;0.3;0.6;0.7;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></path></g>'
+      }
+    }
+  },
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "sun-2-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 2V4"/><path d="M12 20V22"/><path d="M4 12L2 12"/><path d="M22 12L20 12"/><path d="M19.7778 4.22266L17.5558 6.25424"/><path d="M4.22217 4.22266L6.44418 6.25424"/><path d="M6.44434 17.5557L4.22211 19.7779"/><path d="M19.7778 19.7773L17.5558 17.5551"/></g>'
+      },
+      "moon-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 22C17.5228 22 22 17.5228 22 12C22 11.5373 21.3065 11.4608 21.0672 11.8568C19.9289 13.7406 17.8615 15 15.5 15C11.9101 15 9 12.0899 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>'
+      }
+    }
+  }
+];
+var THEME_ICONS = {
+  dark: { moving: "line-md:sunny-loop", still: "solar:sun-2-linear" },
+  light: { moving: "line-md:moon-loop", still: "solar:moon-linear" }
+};
+var registered = false;
+var registerThemeIcons = /* @__PURE__ */ __name(() => {
+  if (registered) return;
+  for (const iconSet of THEME_ICON_SETS) react.addCollection(iconSet);
+  registered = true;
+}, "registerThemeIcons");
+THEME_ICON_SETS.flatMap(
+  ({ prefix, icons }) => Object.keys(icons).map((name) => `${prefix}:${name}`)
+);
+var BUTTON_CSS = "relative size-5 cursor-pointer rounded-full after:absolute after:-inset-1 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c md:size-6";
+var ICON_CSS = "text-tertiary hover:text-secondary size-full [&_path]:stroke-[1.5]";
+var Theme = /* @__PURE__ */ __name(({ store: useThemeStore, labels, className = "", ...buttonProps }) => {
+  registerThemeIcons();
+  const theme = useThemeStore((state) => state.theme);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+  const isDark = theme === "dark";
+  const icons = THEME_ICONS[isDark ? "dark" : "light"];
+  const { toLight = "Switch to light theme", toDark = "Switch to dark theme" } = labels ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...buttonProps,
+      type: "button",
+      onClick: toggleTheme,
+      "aria-label": isDark ? toLight : toDark,
+      className: `${BUTTON_CSS} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: icons.moving, className: `${ICON_CSS} motion-reduce:hidden` }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: icons.still, className: `${ICON_CSS} hidden motion-reduce:block` })
+      ]
+    }
+  );
+}, "Theme");
+
+exports.Theme = Theme;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/theme/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/theme-icons.ts","../../src/theme/Theme.tsx"],"names":["addCollection","jsxs","jsx","Icon"],"mappings":";;;;;;;AAYA,IAAM,eAAA,GAAiC;AAAA,EACrC;AAAA,IACE,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,KAAA,EAAO;AAAA,MACL,YAAA,EAAc;AAAA,QACZ,IAAA,EAAM;AAAA,OACR;AAAA,MACA,WAAA,EAAa;AAAA,QACX,IAAA,EAAM;AAAA;AACR;AACF,GACF;AAAA,EACA;AAAA,IACE,MAAA,EAAQ,OAAA;AAAA,IACR,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,KAAA,EAAO;AAAA,MACL,cAAA,EAAgB;AAAA,QACd,IAAA,EAAM;AAAA,OACR;AAAA,MACA,aAAA,EAAe;AAAA,QACb,IAAA,EAAM;AAAA;AACR;AACF;AAEJ,CAAA;AAGO,IAAM,WAAA,GAAc;AAAA,EACzB,IAAA,EAAM,EAAE,MAAA,EAAQ,oBAAA,EAAsB,OAAO,oBAAA,EAAqB;AAAA,EAClE,KAAA,EAAO,EAAE,MAAA,EAAQ,mBAAA,EAAqB,OAAO,mBAAA;AAC/C,CAAA;AAEA,IAAI,UAAA,GAAa,KAAA;AAQV,IAAM,qCAAqB,MAAA,CAAA,MAAM;AACtC,EAAA,IAAI,UAAA,EAAY;AAEhB,EAAA,KAAA,MAAW,OAAA,IAAW,eAAA,EAAiBA,mBAAA,CAAc,OAAO,CAAA;AAC5D,EAAA,UAAA,GAAa,IAAA;AACf,CAAA,EALkC,oBAAA,CAAA;AAQF,eAAA,CAAgB,OAAA;AAAA,EAAQ,CAAC,EAAE,MAAA,EAAQ,KAAA,EAAM,KACvE,OAAO,IAAA,CAAK,KAAK,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,KAAS,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE;AACtD;ACvCA,IAAM,UAAA,GACJ,oMAAA;AACF,IAAM,QAAA,GAAW,oEAAA;AAUV,IAAM,KAAA,mBAAQ,MAAA,CAAA,CAAC,EAAE,KAAA,EAAO,aAAA,EAAe,QAAQ,SAAA,GAAY,EAAA,EAAI,GAAG,WAAA,EAAY,KAAc;AACjG,EAAA,kBAAA,EAAmB;AAEnB,EAAA,MAAM,KAAA,GAAQ,aAAA,CAAc,CAAC,KAAA,KAAU,MAAM,KAAK,CAAA;AAClD,EAAA,MAAM,WAAA,GAAc,aAAA,CAAc,CAAC,KAAA,KAAU,MAAM,WAAW,CAAA;AAE9D,EAAA,MAAM,SAAS,KAAA,KAAU,MAAA;AACzB,EAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,MAAA,GAAS,MAAA,GAAS,OAAO,CAAA;AACnD,EAAA,MAAM,EAAE,OAAA,GAAU,uBAAA,EAAyB,SAAS,sBAAA,EAAuB,GAAI,UAAU,EAAC;AAE1F,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,WAAA;AAAA,MACT,YAAA,EAAY,SAAS,OAAA,GAAU,MAAA;AAAA,MAC/B,SAAA,EAAW,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA;AAAA,MAGrC,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAACC,cAAK,IAAA,EAAM,KAAA,CAAM,QAAQ,SAAA,EAAW,CAAA,EAAG,QAAQ,CAAA,qBAAA,CAAA,EAAyB,CAAA;AAAA,wBACzED,cAAA,CAACC,cAAK,IAAA,EAAM,KAAA,CAAM,OAAO,SAAA,EAAW,CAAA,EAAG,QAAQ,CAAA,2BAAA,CAAA,EAA+B;AAAA;AAAA;AAAA,GAChF;AAEJ,CAAA,EAvBqB,OAAA","file":"index.cjs","sourcesContent":["import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/*\n * The icons of the theme button. Iconify downloads an icon from its API the first time it is shown,\n * which cannot work offline and leaves the button empty until it arrives, so they are bundled here and\n * registered with Iconify (the same way as the toast icons, see `toast-icons.ts`).\n *\n * For each theme there are two: one that moves (`line-md`, drawn with SMIL and never stops) and a\n * still one (`solar`) for a person who asked for less motion.\n *\n * The data is what `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst THEME_ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'line-md',\n    width: 24,\n    height: 24,\n    icons: {\n      'sunny-loop': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path stroke-dasharray=\"34\" d=\"M12 7c2.76 0 5 2.24 5 5c0 2.76 -2.24 5 -5 5c-2.76 0 -5 -2.24 -5 -5c0 -2.76 2.24 -5 5 -5Z\"><animate fill=\"freeze\" attributeName=\"stroke-dashoffset\" dur=\"0.4s\" values=\"34;0\"/></path><path d=\"M12 21v1M21 12h1M12 3v-1M3 12h-1\" opacity=\"0\"><animateTransform attributeName=\"transform\" dur=\"30s\" repeatCount=\"indefinite\" type=\"rotate\" values=\"0 12 12;360 12 12\"/><set fill=\"freeze\" attributeName=\"opacity\" begin=\"0.5s\" to=\"1\"/><animate fill=\"freeze\" attributeName=\"d\" begin=\"0.5s\" dur=\"0.2s\" values=\"M12 19v1M19 12h1M12 5v-1M5 12h-1;M12 21v1M21 12h1M12 3v-1M3 12h-1\"/></path><path d=\"M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5\" opacity=\"0\"><animateTransform attributeName=\"transform\" dur=\"30s\" repeatCount=\"indefinite\" type=\"rotate\" values=\"0 12 12;360 12 12\"/><set fill=\"freeze\" attributeName=\"opacity\" begin=\"0.7s\" to=\"1\"/><animate fill=\"freeze\" attributeName=\"d\" begin=\"0.7s\" dur=\"0.2s\" values=\"M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5;M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5\"/></path></g>',\n      },\n      'moon-loop': {\n        body: '<path fill=\"none\" stroke=\"currentColor\" stroke-dasharray=\"56\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 6c0 6.08 4.92 11 11 11c0.53 0 1.05 -0.04 1.56 -0.11c-1.61 2.47 -4.39 4.11 -7.56 4.11c-4.97 0 -9 -4.03 -9 -9c0 -3.17 1.64 -5.95 4.11 -7.56c-0.07 0.51 -0.11 1.03 -0.11 1.56Z\"><animate fill=\"freeze\" attributeName=\"stroke-dashoffset\" dur=\"0.6s\" values=\"56;0\"/></path><g fill=\"currentColor\"><path d=\"M15.22 6.03l2.53 -1.94l-3.19 -0.09l-1.06 -3l-1.06 3l-3.19 0.09l2.53 1.94l-0.91 3.06l2.63 -1.81l2.63 1.81l-0.91 -3.06Z\" opacity=\"0\"><animate attributeName=\"opacity\" begin=\"0.7s\" dur=\"6s\" keyTimes=\"0;0.1;0.4;0.5;1\" repeatCount=\"indefinite\" values=\"0;1;1;0;0\"/></path><path d=\"M19.61 12.25l1.64 -1.25l-2.06 -0.05l-0.69 -1.95l-0.69 1.95l-2.06 0.05l1.64 1.25l-0.59 1.98l1.7 -1.17l1.7 1.17l-0.59 -1.98Z\" opacity=\"0\"><animate attributeName=\"opacity\" begin=\"0.7s\" dur=\"6s\" keyTimes=\"0;0.2;0.3;0.6;0.7;1\" repeatCount=\"indefinite\" values=\"0;0;1;1;0;0\"/></path><path d=\"M13.61 5.25l1.64 -1.25l-2.06 -0.05l-0.69 -1.95l-0.69 1.95l-2.06 0.05l1.64 1.25l-0.59 1.98l1.7 -1.17l1.7 1.17Z\" opacity=\"0\"><animate attributeName=\"opacity\" begin=\"3.7s\" dur=\"6s\" keyTimes=\"0;0.1;0.4;0.5;1\" repeatCount=\"indefinite\" values=\"0;1;1;0;0\"/></path><path d=\"M20.83 9.73l1.88 -1.44l-2.37 -0.07l-0.79 -2.22l-0.79 2.23l-2.37 0.07l1.88 1.44l-0.68 2.27l1.95 -1.34l1.95 1.34Z\" opacity=\"0\"><animate attributeName=\"opacity\" begin=\"3.7s\" dur=\"6s\" keyTimes=\"0;0.2;0.3;0.6;0.7;1\" repeatCount=\"indefinite\" values=\"0;0;1;1;0;0\"/></path></g>',\n      },\n    },\n  },\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'sun-2-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"5\"/><path d=\"M12 2V4\"/><path d=\"M12 20V22\"/><path d=\"M4 12L2 12\"/><path d=\"M22 12L20 12\"/><path d=\"M19.7778 4.22266L17.5558 6.25424\"/><path d=\"M4.22217 4.22266L6.44418 6.25424\"/><path d=\"M6.44434 17.5557L4.22211 19.7779\"/><path d=\"M19.7778 19.7773L17.5558 17.5551\"/></g>',\n      },\n      'moon-linear': {\n        body: '<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 22C17.5228 22 22 17.5228 22 12C22 11.5373 21.3065 11.4608 21.0672 11.8568C19.9289 13.7406 17.8615 15 15.5 15C11.9101 15 9 12.0899 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"/>',\n      },\n    },\n  },\n];\n\n/** What the button shows while the theme is dark (a sun: it would switch to light) and light (a moon). */\nexport const THEME_ICONS = {\n  dark: { moving: 'line-md:sunny-loop', still: 'solar:sun-2-linear' },\n  light: { moving: 'line-md:moon-loop', still: 'solar:moon-linear' },\n} as const;\n\nlet registered = false;\n\n/**\n * Registers the icons above with Iconify. `Theme` calls it when it renders, not when this file is\n * imported: an app that never renders the button never runs it, and nothing depends on the bundler\n * keeping an import that is only there for its effect (see `toast-icons.ts`). Calling it again is\n * harmless.\n */\nexport const registerThemeIcons = () => {\n  if (registered) return;\n\n  for (const iconSet of THEME_ICON_SETS) addCollection(iconSet);\n  registered = true;\n};\n\n/** Every icon name registered above, e.g. `line-md:sunny-loop`. */\nexport const THEME_ICON_NAMES = THEME_ICON_SETS.flatMap(({ prefix, icons }) =>\n  Object.keys(icons).map((name) => `${prefix}:${name}`),\n);\n","import type { TThemeStoreHook } from '@beautinique/frontend-stores';\nimport { Icon } from '@iconify/react';\nimport type { ComponentProps } from 'react';\n\nimport { registerThemeIcons, THEME_ICONS } from './theme-icons.js';\n\nexport interface ITheme extends Omit<\n  ComponentProps<'button'>,\n  'children' | 'onClick' | 'type' | 'aria-label'\n> {\n  /** The theme store of the app: what `createThemeStore()` of `@beautinique/frontend-stores` gave it. */\n  store: TThemeStoreHook;\n  /** What the button says to assistive technology, for the theme it would switch to. */\n  labels?: {\n    /** @default 'Switch to light theme' */\n    toLight?: string;\n    /** @default 'Switch to dark theme' */\n    toDark?: string;\n  };\n}\n\n// The hit area is bigger than the icon (the icon is 20px on a phone): the `after` box is a part of the\n// button, so a thumb that lands next to the icon still presses it, and nothing around it moves.\n// No `outline-hidden`: in Tailwind v4 it sets `--tw-outline-style: none`, which the\n// `focus-visible:outline-2` uses for its style, so the ring would never be drawn. A button only shows\n// the browser's own ring for the keyboard anyway (`:focus-visible`), never for a click.\nconst BUTTON_CSS =\n  \"relative size-5 cursor-pointer rounded-full after:absolute after:-inset-1 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c md:size-6\";\nconst ICON_CSS = 'text-tertiary hover:text-secondary size-full [&_path]:stroke-[1.5]';\n\n/**\n * A button that switches between the dark and the light theme. It shows the theme it would switch\n * to: a sun while the theme is dark, a moon while it is light. It only changes the store; putting the\n * theme on the page (a class on `<html>`) is the app's.\n *\n * The icons move; for a person who asked their system for less motion (`prefers-reduced-motion`)\n * the button shows still ones instead.\n */\nexport const Theme = ({ store: useThemeStore, labels, className = '', ...buttonProps }: ITheme) => {\n  registerThemeIcons();\n\n  const theme = useThemeStore((state) => state.theme);\n  const toggleTheme = useThemeStore((state) => state.toggleTheme);\n\n  const isDark = theme === 'dark';\n  const icons = THEME_ICONS[isDark ? 'dark' : 'light'];\n  const { toLight = 'Switch to light theme', toDark = 'Switch to dark theme' } = labels ?? {};\n\n  return (\n    <button\n      {...buttonProps}\n      type=\"button\"\n      onClick={toggleTheme}\n      aria-label={isDark ? toLight : toDark}\n      className={`${BUTTON_CSS} ${className}`}\n    >\n      {/* Both are in the page and css picks one: no script has to ask the system about motion. */}\n      <Icon icon={icons.moving} className={`${ICON_CSS} motion-reduce:hidden`} />\n      <Icon icon={icons.still} className={`${ICON_CSS} hidden motion-reduce:block`} />\n    </button>\n  );\n};\n"]}

package/dist/theme/index.d.cts

@@ -0,0 +1,2 @@
+export { type ITheme, Theme } from './Theme.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/theme/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { type ITheme, Theme } from './Theme.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/theme/index.js

@@ -0,0 +1,74 @@
+import { Icon, addCollection } from '@iconify/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var THEME_ICON_SETS = [
+  {
+    prefix: "line-md",
+    width: 24,
+    height: 24,
+    icons: {
+      "sunny-loop": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path stroke-dasharray="34" d="M12 7c2.76 0 5 2.24 5 5c0 2.76 -2.24 5 -5 5c-2.76 0 -5 -2.24 -5 -5c0 -2.76 2.24 -5 5 -5Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.4s" values="34;0"/></path><path d="M12 21v1M21 12h1M12 3v-1M3 12h-1" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.5s" to="1"/><animate fill="freeze" attributeName="d" begin="0.5s" dur="0.2s" values="M12 19v1M19 12h1M12 5v-1M5 12h-1;M12 21v1M21 12h1M12 3v-1M3 12h-1"/></path><path d="M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.7s" to="1"/><animate fill="freeze" attributeName="d" begin="0.7s" dur="0.2s" values="M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5;M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5"/></path></g>'
+      },
+      "moon-loop": {
+        body: '<path fill="none" stroke="currentColor" stroke-dasharray="56" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 6c0 6.08 4.92 11 11 11c0.53 0 1.05 -0.04 1.56 -0.11c-1.61 2.47 -4.39 4.11 -7.56 4.11c-4.97 0 -9 -4.03 -9 -9c0 -3.17 1.64 -5.95 4.11 -7.56c-0.07 0.51 -0.11 1.03 -0.11 1.56Z"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.6s" values="56;0"/></path><g fill="currentColor"><path d="M15.22 6.03l2.53 -1.94l-3.19 -0.09l-1.06 -3l-1.06 3l-3.19 0.09l2.53 1.94l-0.91 3.06l2.63 -1.81l2.63 1.81l-0.91 -3.06Z" opacity="0"><animate attributeName="opacity" begin="0.7s" dur="6s" keyTimes="0;0.1;0.4;0.5;1" repeatCount="indefinite" values="0;1;1;0;0"/></path><path d="M19.61 12.25l1.64 -1.25l-2.06 -0.05l-0.69 -1.95l-0.69 1.95l-2.06 0.05l1.64 1.25l-0.59 1.98l1.7 -1.17l1.7 1.17l-0.59 -1.98Z" opacity="0"><animate attributeName="opacity" begin="0.7s" dur="6s" keyTimes="0;0.2;0.3;0.6;0.7;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></path><path d="M13.61 5.25l1.64 -1.25l-2.06 -0.05l-0.69 -1.95l-0.69 1.95l-2.06 0.05l1.64 1.25l-0.59 1.98l1.7 -1.17l1.7 1.17Z" opacity="0"><animate attributeName="opacity" begin="3.7s" dur="6s" keyTimes="0;0.1;0.4;0.5;1" repeatCount="indefinite" values="0;1;1;0;0"/></path><path d="M20.83 9.73l1.88 -1.44l-2.37 -0.07l-0.79 -2.22l-0.79 2.23l-2.37 0.07l1.88 1.44l-0.68 2.27l1.95 -1.34l1.95 1.34Z" opacity="0"><animate attributeName="opacity" begin="3.7s" dur="6s" keyTimes="0;0.2;0.3;0.6;0.7;1" repeatCount="indefinite" values="0;0;1;1;0;0"/></path></g>'
+      }
+    }
+  },
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "sun-2-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="12" cy="12" r="5"/><path d="M12 2V4"/><path d="M12 20V22"/><path d="M4 12L2 12"/><path d="M22 12L20 12"/><path d="M19.7778 4.22266L17.5558 6.25424"/><path d="M4.22217 4.22266L6.44418 6.25424"/><path d="M6.44434 17.5557L4.22211 19.7779"/><path d="M19.7778 19.7773L17.5558 17.5551"/></g>'
+      },
+      "moon-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 22C17.5228 22 22 17.5228 22 12C22 11.5373 21.3065 11.4608 21.0672 11.8568C19.9289 13.7406 17.8615 15 15.5 15C11.9101 15 9 12.0899 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>'
+      }
+    }
+  }
+];
+var THEME_ICONS = {
+  dark: { moving: "line-md:sunny-loop", still: "solar:sun-2-linear" },
+  light: { moving: "line-md:moon-loop", still: "solar:moon-linear" }
+};
+var registered = false;
+var registerThemeIcons = /* @__PURE__ */ __name(() => {
+  if (registered) return;
+  for (const iconSet of THEME_ICON_SETS) addCollection(iconSet);
+  registered = true;
+}, "registerThemeIcons");
+THEME_ICON_SETS.flatMap(
+  ({ prefix, icons }) => Object.keys(icons).map((name) => `${prefix}:${name}`)
+);
+var BUTTON_CSS = "relative size-5 cursor-pointer rounded-full after:absolute after:-inset-1 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c md:size-6";
+var ICON_CSS = "text-tertiary hover:text-secondary size-full [&_path]:stroke-[1.5]";
+var Theme = /* @__PURE__ */ __name(({ store: useThemeStore, labels, className = "", ...buttonProps }) => {
+  registerThemeIcons();
+  const theme = useThemeStore((state) => state.theme);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+  const isDark = theme === "dark";
+  const icons = THEME_ICONS[isDark ? "dark" : "light"];
+  const { toLight = "Switch to light theme", toDark = "Switch to dark theme" } = labels ?? {};
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...buttonProps,
+      type: "button",
+      onClick: toggleTheme,
+      "aria-label": isDark ? toLight : toDark,
+      className: `${BUTTON_CSS} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon: icons.moving, className: `${ICON_CSS} motion-reduce:hidden` }),
+        /* @__PURE__ */ jsx(Icon, { icon: icons.still, className: `${ICON_CSS} hidden motion-reduce:block` })
+      ]
+    }
+  );
+}, "Theme");
+
+export { Theme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/theme-icons.ts","../../src/theme/Theme.tsx"],"names":[],"mappings":";;;;;AAYA,IAAM,eAAA,GAAiC;AAAA,EACrC;AAAA,IACE,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,KAAA,EAAO;AAAA,MACL,YAAA,EAAc;AAAA,QACZ,IAAA,EAAM;AAAA,OACR;AAAA,MACA,WAAA,EAAa;AAAA,QACX,IAAA,EAAM;AAAA;AACR;AACF,GACF;AAAA,EACA;AAAA,IACE,MAAA,EAAQ,OAAA;AAAA,IACR,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,KAAA,EAAO;AAAA,MACL,cAAA,EAAgB;AAAA,QACd,IAAA,EAAM;AAAA,OACR;AAAA,MACA,aAAA,EAAe;AAAA,QACb,IAAA,EAAM;AAAA;AACR;AACF;AAEJ,CAAA;AAGO,IAAM,WAAA,GAAc;AAAA,EACzB,IAAA,EAAM,EAAE,MAAA,EAAQ,oBAAA,EAAsB,OAAO,oBAAA,EAAqB;AAAA,EAClE,KAAA,EAAO,EAAE,MAAA,EAAQ,mBAAA,EAAqB,OAAO,mBAAA;AAC/C,CAAA;AAEA,IAAI,UAAA,GAAa,KAAA;AAQV,IAAM,qCAAqB,MAAA,CAAA,MAAM;AACtC,EAAA,IAAI,UAAA,EAAY;AAEhB,EAAA,KAAA,MAAW,OAAA,IAAW,eAAA,EAAiB,aAAA,CAAc,OAAO,CAAA;AAC5D,EAAA,UAAA,GAAa,IAAA;AACf,CAAA,EALkC,oBAAA,CAAA;AAQF,eAAA,CAAgB,OAAA;AAAA,EAAQ,CAAC,EAAE,MAAA,EAAQ,KAAA,EAAM,KACvE,OAAO,IAAA,CAAK,KAAK,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,KAAS,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE;AACtD;ACvCA,IAAM,UAAA,GACJ,oMAAA;AACF,IAAM,QAAA,GAAW,oEAAA;AAUV,IAAM,KAAA,mBAAQ,MAAA,CAAA,CAAC,EAAE,KAAA,EAAO,aAAA,EAAe,QAAQ,SAAA,GAAY,EAAA,EAAI,GAAG,WAAA,EAAY,KAAc;AACjG,EAAA,kBAAA,EAAmB;AAEnB,EAAA,MAAM,KAAA,GAAQ,aAAA,CAAc,CAAC,KAAA,KAAU,MAAM,KAAK,CAAA;AAClD,EAAA,MAAM,WAAA,GAAc,aAAA,CAAc,CAAC,KAAA,KAAU,MAAM,WAAW,CAAA;AAE9D,EAAA,MAAM,SAAS,KAAA,KAAU,MAAA;AACzB,EAAA,MAAM,KAAA,GAAQ,WAAA,CAAY,MAAA,GAAS,MAAA,GAAS,OAAO,CAAA;AACnD,EAAA,MAAM,EAAE,OAAA,GAAU,uBAAA,EAAyB,SAAS,sBAAA,EAAuB,GAAI,UAAU,EAAC;AAE1F,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,WAAA;AAAA,MACJ,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,WAAA;AAAA,MACT,YAAA,EAAY,SAAS,OAAA,GAAU,MAAA;AAAA,MAC/B,SAAA,EAAW,CAAA,EAAG,UAAU,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA;AAAA,MAGrC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,QAAK,IAAA,EAAM,KAAA,CAAM,QAAQ,SAAA,EAAW,CAAA,EAAG,QAAQ,CAAA,qBAAA,CAAA,EAAyB,CAAA;AAAA,wBACzE,GAAA,CAAC,QAAK,IAAA,EAAM,KAAA,CAAM,OAAO,SAAA,EAAW,CAAA,EAAG,QAAQ,CAAA,2BAAA,CAAA,EAA+B;AAAA;AAAA;AAAA,GAChF;AAEJ,CAAA,EAvBqB,OAAA","file":"index.js","sourcesContent":["import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/*\n * The icons of the theme button. Iconify downloads an icon from its API the first time it is shown,\n * which cannot work offline and leaves the button empty until it arrives, so they are bundled here and\n * registered with Iconify (the same way as the toast icons, see `toast-icons.ts`).\n *\n * For each theme there are two: one that moves (`line-md`, drawn with SMIL and never stops) and a\n * still one (`solar`) for a person who asked for less motion.\n *\n * The data is what `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst THEME_ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'line-md',\n    width: 24,\n    height: 24,\n    icons: {\n      'sunny-loop': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path stroke-dasharray=\"34\" d=\"M12 7c2.76 0 5 2.24 5 5c0 2.76 -2.24 5 -5 5c-2.76 0 -5 -2.24 -5 -5c0 -2.76 2.24 -5 5 -5Z\"><animate fill=\"freeze\" attributeName=\"stroke-dashoffset\" dur=\"0.4s\" values=\"34;0\"/></path><path d=\"M12 21v1M21 12h1M12 3v-1M3 12h-1\" opacity=\"0\"><animateTransform attributeName=\"transform\" dur=\"30s\" repeatCount=\"indefinite\" type=\"rotate\" values=\"0 12 12;360 12 12\"/><set fill=\"freeze\" attributeName=\"opacity\" begin=\"0.5s\" to=\"1\"/><animate fill=\"freeze\" attributeName=\"d\" begin=\"0.5s\" dur=\"0.2s\" values=\"M12 19v1M19 12h1M12 5v-1M5 12h-1;M12 21v1M21 12h1M12 3v-1M3 12h-1\"/></path><path d=\"M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5\" opacity=\"0\"><animateTransform attributeName=\"transform\" dur=\"30s\" repeatCount=\"indefinite\" type=\"rotate\" values=\"0 12 12;360 12 12\"/><set fill=\"freeze\" attributeName=\"opacity\" begin=\"0.7s\" to=\"1\"/><animate fill=\"freeze\" attributeName=\"d\" begin=\"0.7s\" dur=\"0.2s\" values=\"M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5;M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5\"/></path></g>',\n      },\n      'moon-loop': {\n        body: '<path fill=\"none\" stroke=\"currentColor\" stroke-dasharray=\"56\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 6c0 6.08 4.92 11 11 11c0.53 0 1.05 -0.04 1.56 -0.11c-1.61 2.47 -4.39 4.11 -7.56 4.11c-4.97 0 -9 -4.03 -9 -9c0 -3.17 1.64 -5.95 4.11 -7.56c-0.07 0.51 -0.11 1.03 -0.11 1.56Z\"><animate fill=\"freeze\" attributeName=\"stroke-dashoffset\" dur=\"0.6s\" values=\"56;0\"/></path><g fill=\"currentColor\"><path d=\"M15.22 6.03l2.53 -1.94l-3.19 -0.09l-1.06 -3l-1.06 3l-3.19 0.09l2.53 1.94l-0.91 3.06l2.63 -1.81l2.63 1.81l-0.91 -3.06Z\" opacity=\"0\"><animate attributeName=\"opacity\" begin=\"0.7s\" dur=\"6s\" keyTimes=\"0;0.1;0.4;0.5;1\" repeatCount=\"indefinite\" values=\"0;1;1;0;0\"/></path><path d=\"M19.61 12.25l1.64 -1.25l-2.06 -0.05l-0.69 -1.95l-0.69 1.95l-2.06 0.05l1.64 1.25l-0.59 1.98l1.7 -1.17l1.7 1.17l-0.59 -1.98Z\" opacity=\"0\"><animate attributeName=\"opacity\" begin=\"0.7s\" dur=\"6s\" keyTimes=\"0;0.2;0.3;0.6;0.7;1\" repeatCount=\"indefinite\" values=\"0;0;1;1;0;0\"/></path><path d=\"M13.61 5.25l1.64 -1.25l-2.06 -0.05l-0.69 -1.95l-0.69 1.95l-2.06 0.05l1.64 1.25l-0.59 1.98l1.7 -1.17l1.7 1.17Z\" opacity=\"0\"><animate attributeName=\"opacity\" begin=\"3.7s\" dur=\"6s\" keyTimes=\"0;0.1;0.4;0.5;1\" repeatCount=\"indefinite\" values=\"0;1;1;0;0\"/></path><path d=\"M20.83 9.73l1.88 -1.44l-2.37 -0.07l-0.79 -2.22l-0.79 2.23l-2.37 0.07l1.88 1.44l-0.68 2.27l1.95 -1.34l1.95 1.34Z\" opacity=\"0\"><animate attributeName=\"opacity\" begin=\"3.7s\" dur=\"6s\" keyTimes=\"0;0.2;0.3;0.6;0.7;1\" repeatCount=\"indefinite\" values=\"0;0;1;1;0;0\"/></path></g>',\n      },\n    },\n  },\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'sun-2-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"5\"/><path d=\"M12 2V4\"/><path d=\"M12 20V22\"/><path d=\"M4 12L2 12\"/><path d=\"M22 12L20 12\"/><path d=\"M19.7778 4.22266L17.5558 6.25424\"/><path d=\"M4.22217 4.22266L6.44418 6.25424\"/><path d=\"M6.44434 17.5557L4.22211 19.7779\"/><path d=\"M19.7778 19.7773L17.5558 17.5551\"/></g>',\n      },\n      'moon-linear': {\n        body: '<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M12 22C17.5228 22 22 17.5228 22 12C22 11.5373 21.3065 11.4608 21.0672 11.8568C19.9289 13.7406 17.8615 15 15.5 15C11.9101 15 9 12.0899 9 8.5C9 6.13845 10.2594 4.07105 12.1432 2.93276C12.5392 2.69347 12.4627 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"/>',\n      },\n    },\n  },\n];\n\n/** What the button shows while the theme is dark (a sun: it would switch to light) and light (a moon). */\nexport const THEME_ICONS = {\n  dark: { moving: 'line-md:sunny-loop', still: 'solar:sun-2-linear' },\n  light: { moving: 'line-md:moon-loop', still: 'solar:moon-linear' },\n} as const;\n\nlet registered = false;\n\n/**\n * Registers the icons above with Iconify. `Theme` calls it when it renders, not when this file is\n * imported: an app that never renders the button never runs it, and nothing depends on the bundler\n * keeping an import that is only there for its effect (see `toast-icons.ts`). Calling it again is\n * harmless.\n */\nexport const registerThemeIcons = () => {\n  if (registered) return;\n\n  for (const iconSet of THEME_ICON_SETS) addCollection(iconSet);\n  registered = true;\n};\n\n/** Every icon name registered above, e.g. `line-md:sunny-loop`. */\nexport const THEME_ICON_NAMES = THEME_ICON_SETS.flatMap(({ prefix, icons }) =>\n  Object.keys(icons).map((name) => `${prefix}:${name}`),\n);\n","import type { TThemeStoreHook } from '@beautinique/frontend-stores';\nimport { Icon } from '@iconify/react';\nimport type { ComponentProps } from 'react';\n\nimport { registerThemeIcons, THEME_ICONS } from './theme-icons.js';\n\nexport interface ITheme extends Omit<\n  ComponentProps<'button'>,\n  'children' | 'onClick' | 'type' | 'aria-label'\n> {\n  /** The theme store of the app: what `createThemeStore()` of `@beautinique/frontend-stores` gave it. */\n  store: TThemeStoreHook;\n  /** What the button says to assistive technology, for the theme it would switch to. */\n  labels?: {\n    /** @default 'Switch to light theme' */\n    toLight?: string;\n    /** @default 'Switch to dark theme' */\n    toDark?: string;\n  };\n}\n\n// The hit area is bigger than the icon (the icon is 20px on a phone): the `after` box is a part of the\n// button, so a thumb that lands next to the icon still presses it, and nothing around it moves.\n// No `outline-hidden`: in Tailwind v4 it sets `--tw-outline-style: none`, which the\n// `focus-visible:outline-2` uses for its style, so the ring would never be drawn. A button only shows\n// the browser's own ring for the keyboard anyway (`:focus-visible`), never for a click.\nconst BUTTON_CSS =\n  \"relative size-5 cursor-pointer rounded-full after:absolute after:-inset-1 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c md:size-6\";\nconst ICON_CSS = 'text-tertiary hover:text-secondary size-full [&_path]:stroke-[1.5]';\n\n/**\n * A button that switches between the dark and the light theme. It shows the theme it would switch\n * to: a sun while the theme is dark, a moon while it is light. It only changes the store; putting the\n * theme on the page (a class on `<html>`) is the app's.\n *\n * The icons move; for a person who asked their system for less motion (`prefers-reduced-motion`)\n * the button shows still ones instead.\n */\nexport const Theme = ({ store: useThemeStore, labels, className = '', ...buttonProps }: ITheme) => {\n  registerThemeIcons();\n\n  const theme = useThemeStore((state) => state.theme);\n  const toggleTheme = useThemeStore((state) => state.toggleTheme);\n\n  const isDark = theme === 'dark';\n  const icons = THEME_ICONS[isDark ? 'dark' : 'light'];\n  const { toLight = 'Switch to light theme', toDark = 'Switch to dark theme' } = labels ?? {};\n\n  return (\n    <button\n      {...buttonProps}\n      type=\"button\"\n      onClick={toggleTheme}\n      aria-label={isDark ? toLight : toDark}\n      className={`${BUTTON_CSS} ${className}`}\n    >\n      {/* Both are in the page and css picks one: no script has to ask the system about motion. */}\n      <Icon icon={icons.moving} className={`${ICON_CSS} motion-reduce:hidden`} />\n      <Icon icon={icons.still} className={`${ICON_CSS} hidden motion-reduce:block`} />\n    </button>\n  );\n};\n"]}