@beautinique/frontend-components 1.0.6 → 1.0.8

package/README.md

@@ -29,21 +29,31 @@ generated and the components come out unstyled. (The playground has a page that
 
 ## Import paths
 
-Components that most screens use live in `/ui` (and, later, `/layout`). Components that few screens
-use have a path of their own, so an app only bundles what it imports.
-
-| Import path                                   | What it gives                                                                             |
-| --------------------------------------------- | ----------------------------------------------------------------------------------------- |
-| `@beautinique/frontend-components`            | Everything `/ui` and `/toast` give (the very same values), and the types (`IButton`, ...) |
-| `@beautinique/frontend-components/ui`         | `Button`, `Tooltip`                                                                       |
-| `@beautinique/frontend-components/toast`      | `ToastContainer`, `createToaster`, and the helpers and types of toasts                    |
-| `@beautinique/frontend-components/source.css` | The `@source` line of the setup above                                                     |
-
-`Button` can be imported from the root or from `/ui`, it is the same component either way:
+Components that most screens use live in `/ui`, `/layout`, `/theme` and `/toast`, and the root gives
+all of them. Components that few screens use have a path of their own and are **not** in the root, so
+an app only bundles what it imports.
+
+| Import path                                        | What it gives                                                                                 |
+| -------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `@beautinique/frontend-components`                 | Everything `/ui`, `/layout`, `/theme` and `/toast` give (the very same values), and the types |
+| `@beautinique/frontend-components/ui`              | `Badge`, `Button`, `Divider`, `GradientText`, `Tooltip`                                       |
+| `@beautinique/frontend-components/layout`          | `ScrollToTop`                                                                                 |
+| `@beautinique/frontend-components/theme`           | `Theme` (the dark / light button)                                                             |
+| `@beautinique/frontend-components/toast`           | `ToastContainer`, `Toaster`, the types of the toasts, and what works out what a toast shows   |
+| `@beautinique/frontend-components/auth`            | `AuthBottomInstructions`                                                                      |
+| `@beautinique/frontend-components/linear-gradient` | `LinearGradient`                                                                              |
+| `@beautinique/frontend-components/resend`          | `Resend`                                                                                      |
+| `@beautinique/frontend-components/stepper`         | `Stepper`                                                                                     |
+| `@beautinique/frontend-components/source.css`      | The `@source` line of the setup above                                                         |
+
+What the root gives can be imported from the root or from its own path, it is the same component
+either way:
 
 ```ts
 import { Button } from '@beautinique/frontend-components'; // or
 import { Button } from '@beautinique/frontend-components/ui';
+
+import { Stepper } from '@beautinique/frontend-components/stepper'; // only from its own path
 ```
 
 The root only re-exports, it does not copy: an app that imports only `Button` from the root bundles the
@@ -110,9 +120,156 @@ const hint = (
   that is not there at all: the content is one level deeper in the DOM, so a css rule that looks at
   the parent of the content (`space-y-*` on a parent, `> :first-child`) sees the wrapper.
 
+### Badge, Divider, GradientText
+
+```tsx
+import { Badge, Divider, GradientText } from '@beautinique/frontend-components';
+
+<Badge content="New" />; // `content` is any React content: text, a number, an icon and a text
+<Badge content={count > 0 && count} />; // nothing to show (null, undefined, false, '') draws no badge; 0 is shown
+<Divider aria-hidden="true" />; // an <hr>; hide it from screen readers when it is only a line
+<GradientText type="accent" text="Terms" />; // or <GradientText type="silver">any <b>content</b></GradientText>
+<GradientText as={Link} to="/terms" type="accent" text="Terms" />; // the Link of the router, with its props
+```
+
+- All three take the attributes of their element (`id`, `data-*`, `aria-*`, `ref`...), and the
+  classes you give are added after their own.
+- `GradientText` takes `text` **or** `children`, not both (the compiler says so). In forced-colors mode
+  (Windows high contrast), where a gradient is not drawn, the text takes the colour of the system
+  instead of vanishing.
+
+### LinearGradient
+
+```tsx
+import { LinearGradient } from '@beautinique/frontend-components/linear-gradient';
+
+<div className="relative overflow-x-auto">
+  <LinearGradient position="left" />
+  {/* the scrolling content */}
+  <LinearGradient position="right" />
+</div>;
+```
+
+A fade in the background colour over one edge (`top`, `bottom`, `left` or `right`) of a `relative`
+container: it shows that there is more to scroll. It is decoration: the pointer goes through it and
+assistive technology skips it.
+
+### Stepper
+
+```tsx
+import { Stepper } from '@beautinique/frontend-components/stepper';
+
+<Stepper
+  label="Checkout progress"
+  activeStep={1}
+  steps={[
+    { title: 'Account', description: 'Create your account' },
+    { title: 'Address', description: 'Where to deliver', icon: 'solar:map-point-linear' },
+    { title: 'Payment', disabled: true },
+  ]}
+  onStepClick={(index) => setStep(index)} // optional: with it the steps are buttons
+>
+  {/* optional: shown under the steps */}
+</Stepper>;
+```
+
+- The steps are an ordered list and the current one has `aria-current="step"`. A completed step shows a
+  tick, and says "Completed" to a screen reader (`completedLabel` for another word).
+- `activeStep` is kept inside the steps (`99` is the last one, `NaN` the first).
+- With `onStepClick` the steps are real buttons (keyboard, focus ring); a step with `disabled` cannot be
+  clicked. Without it nothing in the stepper is a button.
+- The tick is bundled with the package (registered with Iconify when a stepper renders), so it needs no
+  network. The `icon` of a step is an Iconify name that Iconify downloads the first time it is shown;
+  to have one offline, add it to the app with `addCollection`.
+
+### Resend
+
+```tsx
+import { Resend } from '@beautinique/frontend-components/resend';
+
+<Resend
+  label="Not received OTP?"
+  count={sendCount >= 3 ? 0 : 30} // seconds to wait; 0 = no wait
+  onResend={handleResendOtp} // may return a promise
+/>;
+```
+
+- "Resend in 30s", and when the wait is over a button. The wait starts when the component is shown and
+  again after each resend, with the `count` of that moment. A new email address? Give it a new `key`.
+- **It is measured against the clock**, not counted tick by tick: a background tab, or a laptop that
+  slept, does not make people wait longer than the time that really went by.
+- If `onResend` returns a promise the button waits for it (disabled, "Sending…", no double click)
+  and the wait starts when it resolves. If it rejects there is no wait, the button can be pressed
+  again and the error is reported to `window` (`reportError`). Handle the errors you can recover
+  from (a toast) inside it.
+- A screen reader is not told the number every second (`role="timer"`), but is told once when the
+  button is back. The words (`resendLabel`, `countdownLabel`, `sendingLabel`, `readyLabel`,
+  `formatSeconds`) can be changed for another language.
+
+### Theme
+
+```tsx
+import { Theme } from '@beautinique/frontend-components';
+import { createThemeStore } from '@beautinique/frontend-stores';
+
+export const useThemeStore = createThemeStore(); // once, in a module of the app
+
+<Theme store={useThemeStore} />;
+```
+
+A button that switches between the dark and the light theme (a sun while it is dark, a moon while it
+is light). It only changes the store, which remembers the choice; putting the theme on the page is the
+app's. Its name for assistive technology follows the theme ("Switch to light theme"; `labels` changes
+the words). The icons move; for a person who asked for less motion (`prefers-reduced-motion`) it
+shows still ones.
+
+### ScrollToTop
+
+```tsx
+import { ScrollToTop } from '@beautinique/frontend-components';
+
+const { pathname } = useLocation(); // from the router of the app
+
+<div id="main">
+  <ScrollToTop pathname={pathname} />
+</div>;
+```
+
+Scrolls the element with `id="main"` to its top each time `pathname` changes (a router does not do it
+for a single page app). It draws nothing. `id`, `behavior`, `block` and `inline` are the `id` of the
+element and the options of `scrollIntoView` (`'auto'`, `'start'` and `'nearest'` unless told another);
+a `'smooth'` scroll is made `'auto'` for a person who asked for less motion. `skipInitial` leaves the
+first page where it is (when the browser restores the scroll on a reload).
+
+### AuthBottomInstructions
+
+```tsx
+import { AuthBottomInstructions } from '@beautinique/frontend-components/auth';
+import { Link } from 'react-router-dom';
+
+<AuthBottomInstructions as={Link} terms={{ to: '/terms' }} privacy={{ to: '/privacy' }} />;
+// "By continuing, you agree to our Terms & Conditions and Privacy Policy."
+```
+
+The small print under a sign-in form. `as` is what makes the links (`'a'` unless told another; for `'a'`
+the compiler asks for `href`), `terms` and `privacy` are the props of those links. `termsLabel`,
+`privacyLabel` and `message` change the words:
+
+```tsx
+<AuthBottomInstructions
+  terms={{ href: '/terms' }}
+  privacy={{ href: '/privacy' }}
+  message={({ terms, privacy }) => (
+    <>
+      Entering means you accept our {terms} and our {privacy}.
+    </>
+  )}
+/>
+```
+
 ### Toasts
 
-The toasts are kept in a store that **the app makes**, once, with the toasts of this package, and gives to the two things that need it: the `ToastContainer` that draws them, and `createToaster` that shows them. The package holds no store of its own, and exports none.
+This package draws the toasts; the store that keeps them and the `toaster` that shows them are [`@beautinique/frontend-stores`](../stores/README.md)'s. The store is **made by the app**, once, with the toasts of this package, and given to the two things that need it: the `ToastContainer` here, as a prop, and `createToaster` of the stores package. This package holds no store and no toaster of its own, and exports none.
 
 ```ts
 // src/stores/toast.store.ts
@@ -124,7 +281,7 @@ export const useToastStore = createToastStore<TToast>();
 
 ```ts
 // src/utils/toaster.ts - the toaster and the helpers, for the rest of the app to import
-import { createToaster } from '@beautinique/frontend-components';
+import { createToaster } from '@beautinique/frontend-stores';
 
 import { useToastStore } from '@/stores/toast.store';
 
@@ -156,19 +313,26 @@ toaster.custom({ type: 'custom', children: <p>Any React content</p> });
 ```
 
 Toasts that follow uploads (`withProgressToast` for one request, `createUploadsToast`,
-`withUploadsToast` and `runUploadsInToast` for several) come out of `createToaster` too, and are described in `src/toast/uploads.ts`.
-`runUploadsInToast` shows one toast for the uploads of several fields: the overall progress on the
-left and a row (waiting, uploading, done or failed) for each field that has files.
+`withUploadsToast` and `runUploadsInToast` for several) come out of `createToaster` too, and are described in the [stores README](../stores/README.md#createtoasterstore). The toast draws what they show: the overall progress on the left and a row (waiting, uploading, done or failed) for each upload.
 
-**The store has to be one.** The container and `createToaster` must be given the same store: a toast added to a store that no container draws is never shown. Make it once (a module of the app, imported from there) and the two cannot differ. `createToaster` is also checked by the compiler: it takes a store of this package's `TToast`, nothing else.
+**The store has to be one.** The container and `createToaster` must be given the same store: a toast added to a store that no container draws is never shown. Make it once (a module of the app, imported from there) and the two cannot differ. The compiler checks it: the container takes a store of this package's `TToast`, and `createToaster` takes its types from the store it is given.
 
 The icons of the toasts are bundled, so a toast shows its icon without a network.
 
 ## Rules for the code of this package
 
-- **The package holds no state.** The toast store is made by the app (`createToastStore` of `@beautinique/frontend-stores`, with this package's `TToast`) and given in, to the `ToastContainer` as a prop and to `createToaster`. Nothing here makes a store or exports one, so the package can never be the cause of two of them. The root only re-exports `/ui` and `/toast` (`tsup.config.ts` keeps them external, and `built-files.test.ts` checks the built files after `npm run build`).
-- **The root has what most screens use** (`/ui`, later `/layout`, and `/toast`). A component that few
-  screens use gets a path of its own and is not in the root.
+- **The package holds no state.** The toast store is made by the app (`createToastStore` of `@beautinique/frontend-stores`, with this package's `TToast`) and given in, to the `ToastContainer` as a prop. The toaster is the stores package's too (`createToaster`). Nothing here makes a store or a toaster, or exports one, so the package can never be the cause of two stores. The root only re-exports `/ui`, `/layout`, `/theme` and `/toast` (`tsup.config.ts` keeps them external, and `built-files.test.ts` checks the built files after `npm run build`).
+- **The root has what most screens use** (`/ui`, `/layout`, `/theme` and `/toast`). A component that
+  few screens use gets a path of its own and is not in the root.
+- **Icons are Iconify icons, bundled and registered.** A component draws its icons with Iconify's
+  `Icon`, and the icon data is in the package (`toast-icons.ts`, `stepper-icons.ts`,
+  `theme-icons.ts`, registered with `addCollection`), so they show without a network and without
+  waiting for the Iconify API. A component registers its own icons when it renders (not when its file
+  is imported), so an app only carries the icons of the components it uses. Iconify draws icons in the
+  browser only: on a server a placeholder is in their place (fine for the Vite apps).
+- **Components are accessible by default**: real elements (`button`, `ol`, `hr`), names for what has no
+  text, a focus ring for the keyboard (`focus-visible`), `prefers-reduced-motion` and forced-colors
+  mode taken care of, and nothing that moves or announces every second.
 - **A component's own css lives next to the component** and is imported by it, not by the styles
   package. It uses the variables of the styles package (`var(--smoke-eerie)`, ...) and does not
   import them again: importing them a second time, after the app's own css, would undo the app's

package/dist/auth/AuthBottomInstructions.d.cts

@@ -0,0 +1,42 @@
+import type { ComponentProps, ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+/**
+ * What the link to a page needs, as the component that makes the link asks for it: `{ to: '/terms' }`
+ * for the `Link` of a router, `{ href: '/terms' }` for a plain `<a>` (which has to have one).
+ */
+export type TAuthLinkProps<TAs extends ElementType> = Omit<ComponentPropsWithRef<TAs>, 'children' | 'className' | 'text' | 'type'> & (TAs extends 'a' ? {
+    href: string;
+} : unknown);
+/** The two links of the sentence, ready to be put in it. */
+export interface IAuthLinks {
+    terms: ReactNode;
+    privacy: ReactNode;
+}
+interface IAuthBottomInstructionsOwnProps<TAs extends ElementType> {
+    /**
+     * What makes the links: `'a'`, or the `Link` of the router of the app. The router is the app's,
+     * not this package's.
+     * @default 'a'
+     */
+    as?: TAs;
+    /** The link to the terms and conditions, in the props of `as`. */
+    terms: TAuthLinkProps<TAs>;
+    /** The link to the privacy policy, in the props of `as`. */
+    privacy: TAuthLinkProps<TAs>;
+    /** @default 'Terms & Conditions' */
+    termsLabel?: string;
+    /** @default 'Privacy Policy' */
+    privacyLabel?: string;
+    /**
+     * The sentence around the two links, for another wording or another language.
+     * @default ({ terms, privacy }) => <>By continuing, you agree to our {terms} and {privacy}.</>
+     */
+    message?: (links: IAuthLinks) => ReactNode;
+}
+export type IAuthBottomInstructions<TAs extends ElementType = 'a'> = IAuthBottomInstructionsOwnProps<TAs> & Omit<ComponentProps<'p'>, 'children'>;
+/**
+ * The small print under a sign-in or sign-up form: that going on means accepting the terms and the
+ * privacy policy, with a link to each.
+ */
+export declare const AuthBottomInstructions: <TAs extends ElementType = "a">({ as, terms, privacy, termsLabel, privacyLabel, message, className, ...pProps }: IAuthBottomInstructions<TAs>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AuthBottomInstructions.d.cts.map

package/dist/auth/AuthBottomInstructions.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthBottomInstructions.d.cts","sourceRoot":"","sources":["../../src/auth/AuthBottomInstructions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3F;;;GAGG;AACH,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,WAAW,IAAI,IAAI,CACxD,qBAAqB,CAAC,GAAG,CAAC,EAC1B,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAC3C,GACC,CAAC,GAAG,SAAS,GAAG,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,CAAC;AAEjD,4DAA4D;AAC5D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,+BAA+B,CAAC,GAAG,SAAS,WAAW;IAC/D;;;;OAIG;IACH,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,kEAAkE;IAClE,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC3B,4DAA4D;IAC5D,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC7B,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC;CAC5C;AAED,MAAM,MAAM,uBAAuB,CAAC,GAAG,SAAS,WAAW,GAAG,GAAG,IAC/D,+BAA+B,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC;AAU/E;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GAAI,GAAG,SAAS,WAAW,GAAG,GAAG,EAAE,iFASnE,uBAAuB,CAAC,GAAG,CAAC,gCA2B9B,CAAC"}

package/dist/auth/AuthBottomInstructions.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentProps, ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+/**
+ * What the link to a page needs, as the component that makes the link asks for it: `{ to: '/terms' }`
+ * for the `Link` of a router, `{ href: '/terms' }` for a plain `<a>` (which has to have one).
+ */
+export type TAuthLinkProps<TAs extends ElementType> = Omit<ComponentPropsWithRef<TAs>, 'children' | 'className' | 'text' | 'type'> & (TAs extends 'a' ? {
+    href: string;
+} : unknown);
+/** The two links of the sentence, ready to be put in it. */
+export interface IAuthLinks {
+    terms: ReactNode;
+    privacy: ReactNode;
+}
+interface IAuthBottomInstructionsOwnProps<TAs extends ElementType> {
+    /**
+     * What makes the links: `'a'`, or the `Link` of the router of the app. The router is the app's,
+     * not this package's.
+     * @default 'a'
+     */
+    as?: TAs;
+    /** The link to the terms and conditions, in the props of `as`. */
+    terms: TAuthLinkProps<TAs>;
+    /** The link to the privacy policy, in the props of `as`. */
+    privacy: TAuthLinkProps<TAs>;
+    /** @default 'Terms & Conditions' */
+    termsLabel?: string;
+    /** @default 'Privacy Policy' */
+    privacyLabel?: string;
+    /**
+     * The sentence around the two links, for another wording or another language.
+     * @default ({ terms, privacy }) => <>By continuing, you agree to our {terms} and {privacy}.</>
+     */
+    message?: (links: IAuthLinks) => ReactNode;
+}
+export type IAuthBottomInstructions<TAs extends ElementType = 'a'> = IAuthBottomInstructionsOwnProps<TAs> & Omit<ComponentProps<'p'>, 'children'>;
+/**
+ * The small print under a sign-in or sign-up form: that going on means accepting the terms and the
+ * privacy policy, with a link to each.
+ */
+export declare const AuthBottomInstructions: <TAs extends ElementType = "a">({ as, terms, privacy, termsLabel, privacyLabel, message, className, ...pProps }: IAuthBottomInstructions<TAs>) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AuthBottomInstructions.d.ts.map

package/dist/auth/AuthBottomInstructions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthBottomInstructions.d.ts","sourceRoot":"","sources":["../../src/auth/AuthBottomInstructions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3F;;;GAGG;AACH,MAAM,MAAM,cAAc,CAAC,GAAG,SAAS,WAAW,IAAI,IAAI,CACxD,qBAAqB,CAAC,GAAG,CAAC,EAC1B,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAC3C,GACC,CAAC,GAAG,SAAS,GAAG,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,CAAC;AAEjD,4DAA4D;AAC5D,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;CACpB;AAED,UAAU,+BAA+B,CAAC,GAAG,SAAS,WAAW;IAC/D;;;;OAIG;IACH,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,kEAAkE;IAClE,KAAK,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC3B,4DAA4D;IAC5D,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC7B,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,SAAS,CAAC;CAC5C;AAED,MAAM,MAAM,uBAAuB,CAAC,GAAG,SAAS,WAAW,GAAG,GAAG,IAC/D,+BAA+B,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,CAAC;AAU/E;;;GAGG;AACH,eAAO,MAAM,sBAAsB,GAAI,GAAG,SAAS,WAAW,GAAG,GAAG,EAAE,iFASnE,uBAAuB,CAAC,GAAG,CAAC,gCA2B9B,CAAC"}

package/dist/auth/index.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var BASE_CSS = "text-fill-transparent w-fit";
+var FORCED_COLORS_CSS = "forced-colors:bg-none forced-colors:[-webkit-text-fill-color:currentColor]";
+var GRADIENT_CSS = {
+  accent: "bg-accent-duo",
+  silver: "bg-silver-duo"
+};
+var GradientText = /* @__PURE__ */ __name(({
+  as,
+  type,
+  text,
+  children,
+  className = "",
+  ...rest
+}) => {
+  const Component = as ?? "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      ...rest,
+      className: `${BASE_CSS} ${GRADIENT_CSS[type]} ${FORCED_COLORS_CSS} ${className}`,
+      children: children ?? text
+    }
+  );
+}, "GradientText");
+var defaultMessage = /* @__PURE__ */ __name(({ terms, privacy }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  "By continuing, you agree to our ",
+  terms,
+  " and ",
+  privacy,
+  "."
+] }), "defaultMessage");
+var LINK_CSS = "font-medium";
+var AuthBottomInstructions = /* @__PURE__ */ __name(({
+  as,
+  terms,
+  privacy,
+  termsLabel = "Terms & Conditions",
+  privacyLabel = "Privacy Policy",
+  message = defaultMessage,
+  className = "",
+  ...pProps
+}) => {
+  const Link = as ?? "a";
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { ...pProps, className: `text-tertiary text-xs ${className}`, children: message({
+    terms: /* @__PURE__ */ jsxRuntime.jsx(
+      GradientText,
+      {
+        ...terms,
+        as: Link,
+        type: "accent",
+        text: termsLabel,
+        className: LINK_CSS
+      }
+    ),
+    privacy: /* @__PURE__ */ jsxRuntime.jsx(
+      GradientText,
+      {
+        ...privacy,
+        as: Link,
+        type: "accent",
+        text: privacyLabel,
+        className: LINK_CSS
+      }
+    )
+  }) });
+}, "AuthBottomInstructions");
+
+exports.AuthBottomInstructions = AuthBottomInstructions;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/auth/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/GradientText.tsx","../../src/auth/AuthBottomInstructions.tsx"],"names":["jsx","jsxs","Fragment"],"mappings":";;;;;;AAwBA,IAAM,QAAA,GAAW,6BAAA;AAGjB,IAAM,iBAAA,GACJ,4EAAA;AAEF,IAAM,YAAA,GAAkD;AAAA,EACtD,MAAA,EAAQ,eAAA;AAAA,EACR,MAAA,EAAQ;AACV,CAAA;AAOO,IAAM,+BAAe,MAAA,CAAA,CAAmC;AAAA,EAC7D,EAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAA0B;AACxB,EAAA,MAAM,YAAyB,EAAA,IAAM,MAAA;AAErC,EAAA,uBACEA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,YAAA,CAAa,IAAI,CAAC,CAAA,CAAA,EAAI,iBAAiB,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA;AAAA,MAE7E,QAAA,EAAA,QAAA,IAAY;AAAA;AAAA,GACf;AAEJ,CAAA,EAlB4B,cAAA,CAAA;ACK5B,IAAM,iCAAiB,MAAA,CAAA,CAAC,EAAE,KAAA,EAAO,OAAA,uBAC/BC,eAAA,CAAAC,mBAAA,EAAA,EAAE,QAAA,EAAA;AAAA,EAAA,kCAAA;AAAA,EACiC,KAAA;AAAA,EAAM,OAAA;AAAA,EAAM,OAAA;AAAA,EAAQ;AAAA,CAAA,EACvD,CAAA,EAHqB,gBAAA,CAAA;AAMvB,IAAM,QAAA,GAAW,aAAA;AAMV,IAAM,yCAAyB,MAAA,CAAA,CAAgC;AAAA,EACpE,EAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,oBAAA;AAAA,EACb,YAAA,GAAe,gBAAA;AAAA,EACf,OAAA,GAAU,cAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAoC;AAClC,EAAA,MAAM,OAAoB,EAAA,IAAM,GAAA;AAEhC,EAAA,uBACEF,eAAC,GAAA,EAAA,EAAG,GAAG,QAAQ,SAAA,EAAW,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,EACzD,QAAA,EAAA,OAAA,CAAQ;AAAA,IACP,uBACEA,cAAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAI,KAAA;AAAA,QACL,EAAA,EAAI,IAAA;AAAA,QACJ,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAM,UAAA;AAAA,QACN,SAAA,EAAW;AAAA;AAAA,KACb;AAAA,IAEF,yBACEA,cAAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAI,OAAA;AAAA,QACL,EAAA,EAAI,IAAA;AAAA,QACJ,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAM,YAAA;AAAA,QACN,SAAA,EAAW;AAAA;AAAA;AACb,GAEH,CAAA,EACH,CAAA;AAEJ,CAAA,EApCsC,wBAAA","file":"index.cjs","sourcesContent":["import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';\n\n/** `accent`: the blue gradient of the brand. `silver`: the quiet grey one. */\nexport type TGradientTextType = 'accent' | 'silver';\n\n/** The text is given as `text`, or as `children` (anything React can show), not both. */\ntype TGradientTextContent =\n  { text: string; children?: never } | { children: ReactNode; text?: never };\n\ninterface IGradientTextOwnProps<TAs extends ElementType> {\n  /**\n   * What renders the text: an element (`'a'`, `'p'`, ...) or a component, e.g. the `Link` of the\n   * router, which then gets its own props (`to`) next to these.\n   * @default 'span'\n   */\n  as?: TAs;\n  type: TGradientTextType;\n  className?: string;\n}\n\nexport type IGradientText<TAs extends ElementType = 'span'> = IGradientTextOwnProps<TAs> &\n  TGradientTextContent &\n  Omit<ComponentPropsWithRef<TAs>, 'as' | 'type' | 'className' | 'text' | 'children'>;\n\nconst BASE_CSS = 'text-fill-transparent w-fit';\n// In forced-colors mode (Windows high contrast) the browser draws no background, so a text that is\n// only a transparent fill over a gradient would vanish: there it takes the colour of the system.\nconst FORCED_COLORS_CSS =\n  'forced-colors:bg-none forced-colors:[-webkit-text-fill-color:currentColor]';\n\nconst GRADIENT_CSS: Record<TGradientTextType, string> = {\n  accent: 'bg-accent-duo',\n  silver: 'bg-silver-duo',\n};\n\n/**\n * Text filled with a gradient. A link is a text that is rendered by a link component:\n * `<GradientText as={Link} to=\"/terms\" type=\"accent\" text=\"Terms\" />`; the router is the app's, not\n * this package's.\n */\nexport const GradientText = <TAs extends ElementType = 'span'>({\n  as,\n  type,\n  text,\n  children,\n  className = '',\n  ...rest\n}: IGradientText<TAs>) => {\n  const Component: ElementType = as ?? 'span';\n\n  return (\n    <Component\n      {...rest}\n      className={`${BASE_CSS} ${GRADIENT_CSS[type]} ${FORCED_COLORS_CSS} ${className}`}\n    >\n      {children ?? text}\n    </Component>\n  );\n};\n","import type { ComponentProps, ComponentPropsWithRef, ElementType, ReactNode } from 'react';\n\nimport { GradientText } from '../ui/GradientText.js';\n\n/**\n * What the link to a page needs, as the component that makes the link asks for it: `{ to: '/terms' }`\n * for the `Link` of a router, `{ href: '/terms' }` for a plain `<a>` (which has to have one).\n */\nexport type TAuthLinkProps<TAs extends ElementType> = Omit<\n  ComponentPropsWithRef<TAs>,\n  'children' | 'className' | 'text' | 'type'\n> &\n  (TAs extends 'a' ? { href: string } : unknown);\n\n/** The two links of the sentence, ready to be put in it. */\nexport interface IAuthLinks {\n  terms: ReactNode;\n  privacy: ReactNode;\n}\n\ninterface IAuthBottomInstructionsOwnProps<TAs extends ElementType> {\n  /**\n   * What makes the links: `'a'`, or the `Link` of the router of the app. The router is the app's,\n   * not this package's.\n   * @default 'a'\n   */\n  as?: TAs;\n  /** The link to the terms and conditions, in the props of `as`. */\n  terms: TAuthLinkProps<TAs>;\n  /** The link to the privacy policy, in the props of `as`. */\n  privacy: TAuthLinkProps<TAs>;\n  /** @default 'Terms & Conditions' */\n  termsLabel?: string;\n  /** @default 'Privacy Policy' */\n  privacyLabel?: string;\n  /**\n   * The sentence around the two links, for another wording or another language.\n   * @default ({ terms, privacy }) => <>By continuing, you agree to our {terms} and {privacy}.</>\n   */\n  message?: (links: IAuthLinks) => ReactNode;\n}\n\nexport type IAuthBottomInstructions<TAs extends ElementType = 'a'> =\n  IAuthBottomInstructionsOwnProps<TAs> & Omit<ComponentProps<'p'>, 'children'>;\n\nconst defaultMessage = ({ terms, privacy }: IAuthLinks) => (\n  <>\n    By continuing, you agree to our {terms} and {privacy}.\n  </>\n);\n\nconst LINK_CSS = 'font-medium';\n\n/**\n * The small print under a sign-in or sign-up form: that going on means accepting the terms and the\n * privacy policy, with a link to each.\n */\nexport const AuthBottomInstructions = <TAs extends ElementType = 'a'>({\n  as,\n  terms,\n  privacy,\n  termsLabel = 'Terms & Conditions',\n  privacyLabel = 'Privacy Policy',\n  message = defaultMessage,\n  className = '',\n  ...pProps\n}: IAuthBottomInstructions<TAs>) => {\n  const Link: ElementType = as ?? 'a';\n\n  return (\n    <p {...pProps} className={`text-tertiary text-xs ${className}`}>\n      {message({\n        terms: (\n          <GradientText\n            {...(terms as object)}\n            as={Link}\n            type=\"accent\"\n            text={termsLabel}\n            className={LINK_CSS}\n          />\n        ),\n        privacy: (\n          <GradientText\n            {...(privacy as object)}\n            as={Link}\n            type=\"accent\"\n            text={privacyLabel}\n            className={LINK_CSS}\n          />\n        ),\n      })}\n    </p>\n  );\n};\n"]}

package/dist/auth/index.d.cts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,MAAM,6BAA6B,CAAC"}

package/dist/auth/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/auth/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,sBAAsB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,MAAM,6BAA6B,CAAC"}

package/dist/auth/index.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var BASE_CSS = "text-fill-transparent w-fit";
+var FORCED_COLORS_CSS = "forced-colors:bg-none forced-colors:[-webkit-text-fill-color:currentColor]";
+var GRADIENT_CSS = {
+  accent: "bg-accent-duo",
+  silver: "bg-silver-duo"
+};
+var GradientText = /* @__PURE__ */ __name(({
+  as,
+  type,
+  text,
+  children,
+  className = "",
+  ...rest
+}) => {
+  const Component = as ?? "span";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...rest,
+      className: `${BASE_CSS} ${GRADIENT_CSS[type]} ${FORCED_COLORS_CSS} ${className}`,
+      children: children ?? text
+    }
+  );
+}, "GradientText");
+var defaultMessage = /* @__PURE__ */ __name(({ terms, privacy }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  "By continuing, you agree to our ",
+  terms,
+  " and ",
+  privacy,
+  "."
+] }), "defaultMessage");
+var LINK_CSS = "font-medium";
+var AuthBottomInstructions = /* @__PURE__ */ __name(({
+  as,
+  terms,
+  privacy,
+  termsLabel = "Terms & Conditions",
+  privacyLabel = "Privacy Policy",
+  message = defaultMessage,
+  className = "",
+  ...pProps
+}) => {
+  const Link = as ?? "a";
+  return /* @__PURE__ */ jsx("p", { ...pProps, className: `text-tertiary text-xs ${className}`, children: message({
+    terms: /* @__PURE__ */ jsx(
+      GradientText,
+      {
+        ...terms,
+        as: Link,
+        type: "accent",
+        text: termsLabel,
+        className: LINK_CSS
+      }
+    ),
+    privacy: /* @__PURE__ */ jsx(
+      GradientText,
+      {
+        ...privacy,
+        as: Link,
+        type: "accent",
+        text: privacyLabel,
+        className: LINK_CSS
+      }
+    )
+  }) });
+}, "AuthBottomInstructions");
+
+export { AuthBottomInstructions };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/auth/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/GradientText.tsx","../../src/auth/AuthBottomInstructions.tsx"],"names":["jsx"],"mappings":";;;;AAwBA,IAAM,QAAA,GAAW,6BAAA;AAGjB,IAAM,iBAAA,GACJ,4EAAA;AAEF,IAAM,YAAA,GAAkD;AAAA,EACtD,MAAA,EAAQ,eAAA;AAAA,EACR,MAAA,EAAQ;AACV,CAAA;AAOO,IAAM,+BAAe,MAAA,CAAA,CAAmC;AAAA,EAC7D,EAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAA0B;AACxB,EAAA,MAAM,YAAyB,EAAA,IAAM,MAAA;AAErC,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,CAAA,EAAG,QAAQ,CAAA,CAAA,EAAI,YAAA,CAAa,IAAI,CAAC,CAAA,CAAA,EAAI,iBAAiB,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA;AAAA,MAE7E,QAAA,EAAA,QAAA,IAAY;AAAA;AAAA,GACf;AAEJ,CAAA,EAlB4B,cAAA,CAAA;ACK5B,IAAM,iCAAiB,MAAA,CAAA,CAAC,EAAE,KAAA,EAAO,OAAA,uBAC/B,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,EAAA,kCAAA;AAAA,EACiC,KAAA;AAAA,EAAM,OAAA;AAAA,EAAM,OAAA;AAAA,EAAQ;AAAA,CAAA,EACvD,CAAA,EAHqB,gBAAA,CAAA;AAMvB,IAAM,QAAA,GAAW,aAAA;AAMV,IAAM,yCAAyB,MAAA,CAAA,CAAgC;AAAA,EACpE,EAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,oBAAA;AAAA,EACb,YAAA,GAAe,gBAAA;AAAA,EACf,OAAA,GAAU,cAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAoC;AAClC,EAAA,MAAM,OAAoB,EAAA,IAAM,GAAA;AAEhC,EAAA,uBACEA,IAAC,GAAA,EAAA,EAAG,GAAG,QAAQ,SAAA,EAAW,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,EACzD,QAAA,EAAA,OAAA,CAAQ;AAAA,IACP,uBACEA,GAAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAI,KAAA;AAAA,QACL,EAAA,EAAI,IAAA;AAAA,QACJ,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAM,UAAA;AAAA,QACN,SAAA,EAAW;AAAA;AAAA,KACb;AAAA,IAEF,yBACEA,GAAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAI,OAAA;AAAA,QACL,EAAA,EAAI,IAAA;AAAA,QACJ,IAAA,EAAK,QAAA;AAAA,QACL,IAAA,EAAM,YAAA;AAAA,QACN,SAAA,EAAW;AAAA;AAAA;AACb,GAEH,CAAA,EACH,CAAA;AAEJ,CAAA,EApCsC,wBAAA","file":"index.js","sourcesContent":["import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';\n\n/** `accent`: the blue gradient of the brand. `silver`: the quiet grey one. */\nexport type TGradientTextType = 'accent' | 'silver';\n\n/** The text is given as `text`, or as `children` (anything React can show), not both. */\ntype TGradientTextContent =\n  { text: string; children?: never } | { children: ReactNode; text?: never };\n\ninterface IGradientTextOwnProps<TAs extends ElementType> {\n  /**\n   * What renders the text: an element (`'a'`, `'p'`, ...) or a component, e.g. the `Link` of the\n   * router, which then gets its own props (`to`) next to these.\n   * @default 'span'\n   */\n  as?: TAs;\n  type: TGradientTextType;\n  className?: string;\n}\n\nexport type IGradientText<TAs extends ElementType = 'span'> = IGradientTextOwnProps<TAs> &\n  TGradientTextContent &\n  Omit<ComponentPropsWithRef<TAs>, 'as' | 'type' | 'className' | 'text' | 'children'>;\n\nconst BASE_CSS = 'text-fill-transparent w-fit';\n// In forced-colors mode (Windows high contrast) the browser draws no background, so a text that is\n// only a transparent fill over a gradient would vanish: there it takes the colour of the system.\nconst FORCED_COLORS_CSS =\n  'forced-colors:bg-none forced-colors:[-webkit-text-fill-color:currentColor]';\n\nconst GRADIENT_CSS: Record<TGradientTextType, string> = {\n  accent: 'bg-accent-duo',\n  silver: 'bg-silver-duo',\n};\n\n/**\n * Text filled with a gradient. A link is a text that is rendered by a link component:\n * `<GradientText as={Link} to=\"/terms\" type=\"accent\" text=\"Terms\" />`; the router is the app's, not\n * this package's.\n */\nexport const GradientText = <TAs extends ElementType = 'span'>({\n  as,\n  type,\n  text,\n  children,\n  className = '',\n  ...rest\n}: IGradientText<TAs>) => {\n  const Component: ElementType = as ?? 'span';\n\n  return (\n    <Component\n      {...rest}\n      className={`${BASE_CSS} ${GRADIENT_CSS[type]} ${FORCED_COLORS_CSS} ${className}`}\n    >\n      {children ?? text}\n    </Component>\n  );\n};\n","import type { ComponentProps, ComponentPropsWithRef, ElementType, ReactNode } from 'react';\n\nimport { GradientText } from '../ui/GradientText.js';\n\n/**\n * What the link to a page needs, as the component that makes the link asks for it: `{ to: '/terms' }`\n * for the `Link` of a router, `{ href: '/terms' }` for a plain `<a>` (which has to have one).\n */\nexport type TAuthLinkProps<TAs extends ElementType> = Omit<\n  ComponentPropsWithRef<TAs>,\n  'children' | 'className' | 'text' | 'type'\n> &\n  (TAs extends 'a' ? { href: string } : unknown);\n\n/** The two links of the sentence, ready to be put in it. */\nexport interface IAuthLinks {\n  terms: ReactNode;\n  privacy: ReactNode;\n}\n\ninterface IAuthBottomInstructionsOwnProps<TAs extends ElementType> {\n  /**\n   * What makes the links: `'a'`, or the `Link` of the router of the app. The router is the app's,\n   * not this package's.\n   * @default 'a'\n   */\n  as?: TAs;\n  /** The link to the terms and conditions, in the props of `as`. */\n  terms: TAuthLinkProps<TAs>;\n  /** The link to the privacy policy, in the props of `as`. */\n  privacy: TAuthLinkProps<TAs>;\n  /** @default 'Terms & Conditions' */\n  termsLabel?: string;\n  /** @default 'Privacy Policy' */\n  privacyLabel?: string;\n  /**\n   * The sentence around the two links, for another wording or another language.\n   * @default ({ terms, privacy }) => <>By continuing, you agree to our {terms} and {privacy}.</>\n   */\n  message?: (links: IAuthLinks) => ReactNode;\n}\n\nexport type IAuthBottomInstructions<TAs extends ElementType = 'a'> =\n  IAuthBottomInstructionsOwnProps<TAs> & Omit<ComponentProps<'p'>, 'children'>;\n\nconst defaultMessage = ({ terms, privacy }: IAuthLinks) => (\n  <>\n    By continuing, you agree to our {terms} and {privacy}.\n  </>\n);\n\nconst LINK_CSS = 'font-medium';\n\n/**\n * The small print under a sign-in or sign-up form: that going on means accepting the terms and the\n * privacy policy, with a link to each.\n */\nexport const AuthBottomInstructions = <TAs extends ElementType = 'a'>({\n  as,\n  terms,\n  privacy,\n  termsLabel = 'Terms & Conditions',\n  privacyLabel = 'Privacy Policy',\n  message = defaultMessage,\n  className = '',\n  ...pProps\n}: IAuthBottomInstructions<TAs>) => {\n  const Link: ElementType = as ?? 'a';\n\n  return (\n    <p {...pProps} className={`text-tertiary text-xs ${className}`}>\n      {message({\n        terms: (\n          <GradientText\n            {...(terms as object)}\n            as={Link}\n            type=\"accent\"\n            text={termsLabel}\n            className={LINK_CSS}\n          />\n        ),\n        privacy: (\n          <GradientText\n            {...(privacy as object)}\n            as={Link}\n            type=\"accent\"\n            text={privacyLabel}\n            className={LINK_CSS}\n          />\n        ),\n      })}\n    </p>\n  );\n};\n"]}

package/dist/index.cjs

@@ -1,10 +1,24 @@
 'use strict';
 
+var layout = require('@beautinique/frontend-components/layout');
+var theme = require('@beautinique/frontend-components/theme');
 var toast = require('@beautinique/frontend-components/toast');
 var ui = require('@beautinique/frontend-components/ui');
 
 
 
+Object.keys(layout).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return layout[k]; }
+	});
+});
+Object.keys(theme).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return theme[k]; }
+	});
+});
 Object.keys(toast).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/index.d.cts

@@ -1,3 +1,5 @@
+export * from './layout/index.js';
+export * from './theme/index.js';
 export * from './toast/index.js';
 export type * from './types/component.js';
 export * from './ui/index.js';

package/dist/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,sBAAsB,CAAC;AAC1C,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,sBAAsB,CAAC;AAC1C,cAAc,eAAe,CAAC"}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export * from './layout/index.js';
+export * from './theme/index.js';
 export * from './toast/index.js';
 export type * from './types/component.js';
 export * from './ui/index.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,sBAAsB,CAAC;AAC1C,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,sBAAsB,CAAC;AAC1C,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -1,3 +1,5 @@
+export * from '@beautinique/frontend-components/layout';
+export * from '@beautinique/frontend-components/theme';
 export * from '@beautinique/frontend-components/toast';
 export * from '@beautinique/frontend-components/ui';
 //# sourceMappingURL=index.js.map

package/dist/layout/ScrollToTop.d.cts

@@ -0,0 +1,36 @@
+export interface IScrollToTop {
+    /**
+     * The current path of the page, from the router (`useLocation().pathname`). The scroll happens
+     * when it changes. The query and the hash are not part of it: a search that only changes `?page=2`
+     * does not throw people back to the top.
+     */
+    pathname: string;
+    /**
+     * The `id` of the element that scrolls: the one that holds the page. Nothing happens when the page
+     * has no element with this id.
+     * @default 'main'
+     */
+    id?: string;
+    /**
+     * `'smooth'` is turned into `'auto'` for a person who asked their system for less motion.
+     * @default 'auto'
+     */
+    behavior?: ScrollBehavior;
+    /** @default 'start' */
+    block?: ScrollLogicalPosition;
+    /** @default 'nearest' */
+    inline?: ScrollLogicalPosition;
+    /**
+     * Leaves the page where it is when the component first shows, and scrolls only on the changes of
+     * `pathname` after that. Needed when the browser puts the page back where it was on a reload.
+     * @default false
+     */
+    skipInitial?: boolean;
+}
+/**
+ * Scrolls an element of the page (`#main` unless told another) to the top each time the path
+ * changes, as a router does not do it for a single page app. It draws nothing; put it once, inside
+ * the layout that has the element.
+ */
+export declare const ScrollToTop: ({ pathname, id, behavior, block, inline, skipInitial, }: IScrollToTop) => null;
+//# sourceMappingURL=ScrollToTop.d.cts.map