@beautinique/frontend-components 1.0.8 → 1.0.9

package/README.md

@@ -13,6 +13,13 @@ npm install @beautinique/frontend-components @beautinique/frontend-stores @beaut
 
 Peer dependencies: `react`, `react-dom`, `@iconify/react`, `@beautinique/frontend-styles` and [`@beautinique/frontend-stores`](../stores/README.md) (the toasts are kept in a store that the app makes with it, see [Toasts](#toasts); that needs `zustand` in the app).
 
+Two more are **optional**, needed only by the path that uses them (an app that never imports that path does not need them, and the bundler never looks for them):
+
+| Optional peer         | Needed by                                                                                                         |
+| --------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `hls.js`              | `/media`, only to play a stream (`.m3u8`) in a browser that cannot play it itself; it is loaded when it is needed |
+| `react-color-palette` | `/color-input` (its picker)                                                                                       |
+
 ## Setup (once per app)
 
 In the app's own `index.css`, in this order:
@@ -29,22 +36,31 @@ generated and the components come out unstyled. (The playground has a page that
 
 ## Import paths
 
-Components that most screens use live in `/ui`, `/layout`, `/theme` and `/toast`, and the root gives
+Components that most screens use live in `/ui`, `/layout`, `/inputs`, `/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                                                         |
+| Import path                                         | What it gives                                                                                                                                                                                                                    |
+| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@beautinique/frontend-components`                  | Everything `/ui`, `/layout`, `/inputs`, `/theme` and `/toast` give (the very same values), and the types                                                                                                                         |
+| `@beautinique/frontend-components/ui`               | `Badge`, `Button`, `Divider`, `GradientText`, `Tooltip`                                                                                                                                                                          |
+| `@beautinique/frontend-components/inputs`           | `Input`, `Textarea`, `Checkbox`, `Radio`, `Select`, and what they are made of: `InputLabel`, `InputError`, `InputIcon`                                                                                                           |
+| `@beautinique/frontend-components/layout`           | `ApiStatus`, `BorderGradient`, `ConfirmModal`, `Dropdown`, `LoadingPage`, `LoadingRings`, `LoadingText`, `ModalWrapper`, `NetworkStatusToaster`, `ScrollableGradientContainer`, `ScrollToTop`, `Skeleton`, `Table` and its parts |
+| `@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`, `SocialAuth`                                                                                                                                                                                           |
+| `@beautinique/frontend-components/breadcrumb`       | `Breadcrumb`, `getBreadcrumbItems`                                                                                                                                                                                               |
+| `@beautinique/frontend-components/color-input`      | `ColorInput` (needs `react-color-palette`)                                                                                                                                                                                       |
+| `@beautinique/frontend-components/file-input`       | `FileInput`, `getMediaType`                                                                                                                                                                                                      |
+| `@beautinique/frontend-components/hierarchy-select` | `HierarchySelect`                                                                                                                                                                                                                |
+| `@beautinique/frontend-components/linear-gradient`  | `LinearGradient`                                                                                                                                                                                                                 |
+| `@beautinique/frontend-components/loading-screen`   | `LoadingScreen`, `Teddy`, `WakeUpProgress`, `BEAUTY_FACTS`                                                                                                                                                                       |
+| `@beautinique/frontend-components/media`            | `VideoPlayer`, `MediaCarousel`, `MediaCarouselWithParentMedia`, `MediaCarouselWithModal`, `MediaModal`, `captureVideoPoster`, `MEDIA_LABELS`                                                                                     |
+| `@beautinique/frontend-components/resend`           | `Resend`                                                                                                                                                                                                                         |
+| `@beautinique/frontend-components/static-page`      | `StaticPageLayout`, `StaticPageHeader`, `StaticPageSection`, `InfoCardGrid`, `Checklist`, `HighlightNote`, `NumberedSteps`, `StaticPageCTA`, `EmailUsAction`, `LastUpdatedBadge`                                                 |
+| `@beautinique/frontend-components/stepper`          | `Stepper`                                                                                                                                                                                                                        |
+| `@beautinique/frontend-components/testimonials`     | `TestimonialCarousel`                                                                                                                                                                                                            |
+| `@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:
@@ -267,6 +283,196 @@ the compiler asks for `href`), `terms` and `privacy` are the props of those link
 />
 ```
 
+### Inputs (`Input`, `Textarea`, `Checkbox`, `Radio`, `Select`)
+
+```tsx
+import { Input, Select } from '@beautinique/frontend-components';
+
+<Input
+  label="Name"
+  error={errors.name?.message}
+  inputProps={{ name: 'name', placeholder: 'Your name' }}
+  register={register('name')} // React Hook Form, optional
+  icons={{ right: { icon: 'solar:close-circle-linear', label: 'Clear', onClick: clear } }}
+/>;
+
+<Select
+  label="Fruit"
+  options={[
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana', disabled: true },
+  ]}
+  selectProps={{ value, onChange: setValue, placeholder: 'Pick a fruit' }}
+/>;
+```
+
+The label sits on the border of the field and is its name (it is tied to the field by its `id`); an `error` is said as
+soon as it shows up and marks the field `aria-invalid`. An icon that does something (`onClick`) is drawn inside a
+real `<button>` and needs a `label` (the compiler asks for it). `Checkbox` is a `role="switch"`, `Radio` a real radio
+group (the arrows move the choice), and `Select` a combobox: the arrow keys, Home, End, Enter, Escape and typing a word
+work, the list is drawn in `document.body` (a parent that scrolls does not cut it) and it flips to the other side when
+there is no room.
+
+### Layout parts
+
+- `ApiStatus`: the state of a request in the middle of its place: rings while it loads, an icon with a title for `error` (said as an alert), `empty` and `success`.
+- `BorderGradient`: a card with a gradient border.
+- `Skeleton`: a grey block that pulses where something loads. It is hidden from assistive technology: say "loading" once, on the area (`aria-busy`).
+- `Table`, `TableHead`, `TableBody`, `TableRow`, `TableHeadCell`, `TableRowCell`: real `<table>` elements with the look of the apps; they take their attributes (`colSpan`...), and a header cell is `scope="col"` unless told another.
+- `ScrollableGradientContainer`: content that scrolls in a box with a fade on the edge that has more behind it; it is a tab stop while it scrolls. `scrollerRef` gives the element that scrolls.
+- `LoadingRings`, `LoadingText`, `LoadingPage`: rings and a shining word for a part of a page that loads, and a whole page of them.
+- `Dropdown`: a button that opens a panel under it (`aria-expanded`; a closed panel is `inert`, out of reach of the keyboard). `closeOnEscape`, `closeOnOutsideClick`; `children` can be a function that gets `{ close }`.
+- `ModalWrapper`: a dialog over the page, drawn in `document.body`: `role="dialog"`, named by its title or `label`, the focus is kept inside and goes back to what had it, the page behind does not scroll, Escape closes the one that is on top.
+- `ConfirmModal`: a dialog that asks for a decision (an `alertdialog`) or says how something went; `type="custom"` shows your own content. A press on the backdrop does not close it: a decision is not made by a stray click.
+- `NetworkStatusToaster`: says when the connection goes away and when it comes back, with the toaster the app gives (`status` is e.g. `useOnlineStatus().status`).
+
+```tsx
+import { ConfirmModal } from '@beautinique/frontend-components';
+
+<ConfirmModal
+  type="warning"
+  title="Delete this category?"
+  description="It cannot be undone."
+  buttons={{
+    left: { content: 'Cancel' },
+    right: { content: 'Delete', buttonProps: { onClick: remove } },
+  }}
+  modalProps={{ isOpen, onClose: () => setIsOpen(false) }}
+/>;
+```
+
+### LoadingScreen, Teddy, WakeUpProgress
+
+```tsx
+import { LoadingScreen, WakeUpProgress } from '@beautinique/frontend-components/loading-screen';
+
+<LoadingScreen>
+  <WakeUpProgress phase="services" services={['user', 'product']} awakeServices={['user']} />
+</LoadingScreen>;
+```
+
+The screen of the start of an app: the bear (or what you give it) and a fact of beauty under it that changes every 5
+seconds (`facts`, `interval`; `BEAUTY_FACTS` is the default list). A screen reader hears `label` once, not each fact.
+`WakeUpProgress` shows the steps of a backend that wakes up. `Teddy` imports its css
+(`@beautinique/frontend-styles/teddy.css`) itself.
+
+### Media
+
+```tsx
+import { MediaCarouselWithModal, VideoPlayer } from '@beautinique/frontend-components/media';
+
+const media = [
+  { type: 'image', url: '/a.webp' },
+  { type: 'video', url: 'https://cdn.example/clip.mp4' },
+];
+
+<MediaCarouselWithModal media={media} />; // thumbnails; one opens a dialog
+<VideoPlayer videoProps={{ src: 'https://cdn.example/master.m3u8', controls: true }} />;
+```
+
+- `MediaCarousel` is the row of thumbnails: buttons named "Show image 2 of 5", `aria-current` on the chosen one, an optional remove button on each; the row scrolls to the chosen one without moving the page. `MediaCarouselWithParentMedia` shows the chosen item big with previous / next buttons (they go round, the left and right arrow keys do the same, the counter "2 of 5" is read out) and the row under it. `MediaModal` shows the same in a dialog (a video there has controls) and `MediaCarouselWithModal` is the row that opens it.
+- `VideoPlayer` plays muted and inline, without controls or a loop, unless told otherwise. A **stream** (`.m3u8`) is played by the browser when it can (Safari, iOS) and by `hls.js` when it cannot: install `hls.js`; it is loaded **only then**, so a page that plays no stream never downloads it. `onStreamError` is told when a stream cannot be played; nothing is logged. `showPosterOnly` shows only the poster, which is made from the file in the browser (`captureVideoPoster`) unless you give `videoProps.poster` or `getPoster` (e.g. a poster that a CDN makes).
+- Every word said to assistive technology is in `labels` (`MEDIA_LABELS` has the English ones), e.g. `labels={{ next: 'Siguiente' }}`.
+
+### TestimonialCarousel
+
+```tsx
+import { TestimonialCarousel } from '@beautinique/frontend-components/testimonials';
+
+<TestimonialCarousel
+  testimonials={[{ name: 'Asha Rao', role: 'Founder', content: 'Lovely products.', rating: 5 }]}
+  interval={5000}
+/>;
+```
+
+One testimonial at a time, turning by itself the way a carousel that moves has to: it stops while the pointer is over it
+(a mouse, not a finger) or the focus is in it, a pause / play button stops it for good, and with the system setting for
+less motion it does not turn at all. Previous and next buttons go round. What is announced is the current slide, and only
+while it is not turning. Without an `image` the initials of the name are shown.
+
+### HierarchySelect
+
+```tsx
+import { HierarchySelect } from '@beautinique/frontend-components/hierarchy-select';
+
+<HierarchySelect
+  label="Category"
+  options={[
+    { label: 'Skin care', value: 'skin', children: [{ label: 'Cleanser', value: 'cleanser' }] },
+  ]}
+  selectProps={{ value, onChange: setValue, placeholder: 'Choose a category' }}
+/>;
+```
+
+A field that opens a tree of options with a search field above it. Only an option without children is chosen; the others
+open and close. The focus stays in the search field while the arrow keys move through the tree (Right and Left open and
+close a branch, Enter chooses, Escape closes and gives the focus back, Tab closes). A search shows the matches and the
+branches that lead to them, all open. Give `inputProps={{ value, onChange }}` to own the search (to search on a server).
+
+### ColorInput
+
+```tsx
+import { ColorInput } from '@beautinique/frontend-components/color-input';
+
+<ColorInput label="Brand colour" value={hex} onChange={setHex} />;
+```
+
+Needs `react-color-palette`. The field is one button that opens a picker (a dialog that holds the focus until it is closed
+and gives it back). `value` and what `onChange` gets are hex strings; text that is no colour is not passed on. The
+sliders need a mouse or a finger; the hex and rgb fields in the picker work from the keyboard.
+
+### FileInput
+
+```tsx
+import { FileInput } from '@beautinique/frontend-components/file-input';
+
+<FileInput
+  label="Photos"
+  fileInputProps={{ name: 'photos', multiple: true, value: files, onChange: addFiles }}
+  errors={files.map((file) => (file.size > MAX ? 'Too big' : undefined))}
+  handleRemove={removeFile}
+/>;
+```
+
+A real file input (the keyboard reaches it, the field shows the focus, the same file can be chosen again) with a thumbnail
+under it for each file in `value` (a `File`, or the address of one that is already saved). A thumbnail opens the file big
+in a dialog and can have a remove button; `errors` gives a message per file and a red border to its thumbnail. The files
+get a browser address (`URL.createObjectURL`) that is given back when the file goes. `getMediaType` says what is a picture
+and what a video (the default looks at the type and at the ending).
+
+### Breadcrumb
+
+```tsx
+import { Breadcrumb, getBreadcrumbItems } from '@beautinique/frontend-components/breadcrumb';
+
+<Breadcrumb items={getBreadcrumbItems(pathname)} onNavigate={(href) => navigate(href)} />;
+```
+
+A `nav` with a list; the last item is the current page. The links are plain `<a href>` (they work in a new tab);
+`onNavigate` is called for a plain click (not for a click with a modifier, or a middle click) so the app can go there with
+its router. `getBreadcrumbItems('/products/skin-care')` makes the items from a path.
+
+### SocialAuth
+
+```tsx
+import { SocialAuth } from '@beautinique/frontend-components/auth';
+
+<SocialAuth
+  providers={[{ name: 'Google', icon: 'logos:google-icon', href: '/auth/google' }]}
+  onProviderClick={() => sessionStorage.setItem('redirect', location.pathname)}
+/>;
+```
+
+Icons that are links ("Continue with Google"). `onProviderClick` runs before the browser leaves for the provider. An icon
+given by name comes from the Iconify API unless the app has it registered (`addIcon`).
+
+### Static page parts
+
+`StaticPageLayout`, `StaticPageHeader` (the page `h1`), `StaticPageSection` (an `h2`), `InfoCardGrid` (`h3` cards),
+`Checklist`, `HighlightNote` (a `note`), `NumberedSteps` (an ordered list), `StaticPageCTA`, `EmailUsAction` and
+`LastUpdatedBadge` (`date` is required; it is written in UTC and in a fixed language, so a server and a browser agree)
+make the pages that are only content (company, legal, information). The icons are given by name.
+
 ### Toasts
 
 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.
@@ -321,12 +527,12 @@ 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. 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
+- **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`, `/inputs`, `/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`, `/inputs`, `/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
+  `theme-icons.ts`, `inputs-icons.ts`, `media-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).
@@ -338,6 +544,9 @@ The icons of the toasts are bundled, so a toast shows its icon without a network
   import them again: importing them a second time, after the app's own css, would undo the app's
   overrides.
 - **No imports from an app.** What a component needs from its app comes in through props.
+- **One entry imports another only through its `index`** (`../ui/index.js`, never `../ui/Button.js`): the build leaves such an import as an import of the public path, so a component is never bundled twice (`entries.test.ts` checks it).
+- **Heavy or rare dependencies are optional peers, loaded when they are needed**: `hls.js` is `import()`ed when a stream is played, and `react-color-palette` is only imported by `/color-input`.
+- **Words are props.** Every sentence a component says to assistive technology has a default in English and a prop (`labels`) to change it.
 
 ## Development
 

package/dist/auth/SocialAuth.d.cts

@@ -0,0 +1,33 @@
+import type { MouseEvent, ReactElement } from 'react';
+import type { IClassName } from '../types/component.js';
+/** A service the person can sign in with. */
+export interface ISocialProvider {
+    /** The name of the service ("Google"): the link says "Continue with Google". */
+    name: string;
+    /** An icon of Iconify (`'logos:google-icon'`) or any element. */
+    icon: string | ReactElement;
+    /** Where the sign in starts. */
+    href: string;
+}
+export interface ISocialAuth extends IClassName {
+    providers: readonly ISocialProvider[];
+    /**
+     * Called when a provider is pressed, before the browser goes to its address: the place to remember
+     * where the person was, to bring them back after the sign in.
+     */
+    onProviderClick?: (provider: ISocialProvider, event: MouseEvent<HTMLAnchorElement>) => void;
+    /** What a link says to assistive technology. @default `Continue with ${provider.name}` */
+    getLabel?: (provider: ISocialProvider) => string;
+    /** The name of the group of links. @default 'Sign in with' */
+    label?: string;
+}
+/**
+ * A row of icons, each a link that starts a sign in with a service (Google, GitHub...). They are plain
+ * links, because signing in with a service leaves the app for the page of the service: an
+ * `<a href>`, named "Continue with Google", that also works when opened in a new tab.
+ *
+ * The icons that are given by name come from the Iconify API unless the app has them registered
+ * (`addIcon()`), which also makes them show without a network.
+ */
+export declare const SocialAuth: ({ providers, onProviderClick, getLabel, label, className, }: ISocialAuth) => import("react").JSX.Element | null;
+//# sourceMappingURL=SocialAuth.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SocialAuth.d.cts","sourceRoot":"","sources":["../../src/auth/SocialAuth.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,6CAA6C;AAC7C,MAAM,WAAW,eAAe;IAC9B,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,IAAI,EAAE,MAAM,GAAG,YAAY,CAAC;IAC5B,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,SAAS,EAAE,SAAS,eAAe,EAAE,CAAC;IACtC;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC5F,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,MAAM,CAAC;IACjD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,6DAMxB,WAAW,uCA6Bb,CAAC"}

package/dist/auth/SocialAuth.d.ts

@@ -0,0 +1,33 @@
+import type { MouseEvent, ReactElement } from 'react';
+import type { IClassName } from '../types/component.js';
+/** A service the person can sign in with. */
+export interface ISocialProvider {
+    /** The name of the service ("Google"): the link says "Continue with Google". */
+    name: string;
+    /** An icon of Iconify (`'logos:google-icon'`) or any element. */
+    icon: string | ReactElement;
+    /** Where the sign in starts. */
+    href: string;
+}
+export interface ISocialAuth extends IClassName {
+    providers: readonly ISocialProvider[];
+    /**
+     * Called when a provider is pressed, before the browser goes to its address: the place to remember
+     * where the person was, to bring them back after the sign in.
+     */
+    onProviderClick?: (provider: ISocialProvider, event: MouseEvent<HTMLAnchorElement>) => void;
+    /** What a link says to assistive technology. @default `Continue with ${provider.name}` */
+    getLabel?: (provider: ISocialProvider) => string;
+    /** The name of the group of links. @default 'Sign in with' */
+    label?: string;
+}
+/**
+ * A row of icons, each a link that starts a sign in with a service (Google, GitHub...). They are plain
+ * links, because signing in with a service leaves the app for the page of the service: an
+ * `<a href>`, named "Continue with Google", that also works when opened in a new tab.
+ *
+ * The icons that are given by name come from the Iconify API unless the app has them registered
+ * (`addIcon()`), which also makes them show without a network.
+ */
+export declare const SocialAuth: ({ providers, onProviderClick, getLabel, label, className, }: ISocialAuth) => import("react").JSX.Element | null;
+//# sourceMappingURL=SocialAuth.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SocialAuth.d.ts","sourceRoot":"","sources":["../../src/auth/SocialAuth.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAExD,6CAA6C;AAC7C,MAAM,WAAW,eAAe;IAC9B,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAC;IACb,iEAAiE;IACjE,IAAI,EAAE,MAAM,GAAG,YAAY,CAAC;IAC5B,gCAAgC;IAChC,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,SAAS,EAAE,SAAS,eAAe,EAAE,CAAC;IACtC;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC5F,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,MAAM,CAAC;IACjD,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,6DAMxB,WAAW,uCA6Bb,CAAC"}

package/dist/auth/index.cjs

@@ -1,33 +1,11 @@
 'use strict';
 
+var ui = require('@beautinique/frontend-components/ui');
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('@iconify/react');
 
 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,
@@ -49,7 +27,7 @@ var AuthBottomInstructions = /* @__PURE__ */ __name(({
   const Link = as ?? "a";
   return /* @__PURE__ */ jsxRuntime.jsx("p", { ...pProps, className: `text-tertiary text-xs ${className}`, children: message({
     terms: /* @__PURE__ */ jsxRuntime.jsx(
-      GradientText,
+      ui.GradientText,
       {
         ...terms,
         as: Link,
@@ -59,7 +37,7 @@ var AuthBottomInstructions = /* @__PURE__ */ __name(({
       }
     ),
     privacy: /* @__PURE__ */ jsxRuntime.jsx(
-      GradientText,
+      ui.GradientText,
       {
         ...privacy,
         as: Link,
@@ -70,7 +48,37 @@ var AuthBottomInstructions = /* @__PURE__ */ __name(({
     )
   }) });
 }, "AuthBottomInstructions");
+var defaultGetLabel = /* @__PURE__ */ __name((provider) => `Continue with ${provider.name}`, "defaultGetLabel");
+var SocialAuth = /* @__PURE__ */ __name(({
+  providers,
+  onProviderClick,
+  getLabel = defaultGetLabel,
+  label = "Sign in with",
+  className = ""
+}) => {
+  if (providers.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { "aria-label": label, className: `flex items-center justify-center gap-4 ${className}`, children: providers.map((provider) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    {
+      href: provider.href,
+      "aria-label": getLabel(provider),
+      className: "block rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c",
+      onClick: (event) => {
+        onProviderClick?.(provider, event);
+      },
+      children: typeof provider.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        react.Icon,
+        {
+          "aria-hidden": "true",
+          icon: provider.icon,
+          className: "border-primary/40 shadow-primary/50 h-12 w-12 shrink-0 rounded-xl border bg-white/90 p-2.5 shadow-sm backdrop-blur-sm transition-transform duration-500 hover:scale-110 motion-reduce:transition-none"
+        }
+      ) : provider.icon
+    }
+  ) }, provider.name)) });
+}, "SocialAuth");
 
 exports.AuthBottomInstructions = AuthBottomInstructions;
+exports.SocialAuth = SocialAuth;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/auth/index.cjs.map

@@ -1 +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"]}
+{"version":3,"sources":["../../src/auth/AuthBottomInstructions.tsx","../../src/auth/SocialAuth.tsx"],"names":["jsxs","Fragment","jsx","GradientText","Icon"],"mappings":";;;;;;;;AA6CA,IAAM,iCAAiB,MAAA,CAAA,CAAC,EAAE,KAAA,EAAO,OAAA,uBAC/BA,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,uBACEC,cAAA,CAAC,OAAG,GAAG,MAAA,EAAQ,WAAW,CAAA,sBAAA,EAAyB,SAAS,IACzD,QAAA,EAAA,OAAA,CAAQ;AAAA,IACP,KAAA,kBACEA,cAAA;AAAA,MAACC,eAAA;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,OAAA,kBACED,cAAA;AAAA,MAACC,eAAA;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;AC7BtC,IAAM,kCAAkB,MAAA,CAAA,CAAC,QAAA,KAA8B,CAAA,cAAA,EAAiB,QAAA,CAAS,IAAI,CAAA,CAAA,EAA7D,iBAAA,CAAA;AAUjB,IAAM,6BAAa,MAAA,CAAA,CAAC;AAAA,EACzB,SAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA,GAAW,eAAA;AAAA,EACX,KAAA,GAAQ,cAAA;AAAA,EACR,SAAA,GAAY;AACd,CAAA,KAAmB;AACjB,EAAA,IAAI,SAAA,CAAU,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAEnC,EAAA,uBACED,cAAAA,CAAC,IAAA,EAAA,EAAG,YAAA,EAAY,KAAA,EAAO,WAAW,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,EAClF,QAAA,EAAA,SAAA,CAAU,IAAI,CAAC,QAAA,qBACdA,cAAAA,CAAC,QACC,QAAA,kBAAAA,cAAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,MAAM,QAAA,CAAS,IAAA;AAAA,MACf,YAAA,EAAY,SAAS,QAAQ,CAAA;AAAA,MAC7B,SAAA,EAAU,8GAAA;AAAA,MACV,OAAA,EAAS,CAAC,KAAA,KAAU;AAClB,QAAA,eAAA,GAAkB,UAAU,KAAK,CAAA;AAAA,MACnC,CAAA;AAAA,MAEC,QAAA,EAAA,OAAO,QAAA,CAAS,IAAA,KAAS,QAAA,mBACxBA,cAAAA;AAAA,QAACE,UAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,MAAA;AAAA,UACZ,MAAM,QAAA,CAAS,IAAA;AAAA,UACf,SAAA,EAAU;AAAA;AAAA,UAGZ,QAAA,CAAS;AAAA;AAAA,GAEb,EAAA,EAlBO,QAAA,CAAS,IAmBlB,CACD,CAAA,EACH,CAAA;AAEJ,CAAA,EAnC0B,YAAA","file":"index.cjs","sourcesContent":["import type { ComponentProps, ComponentPropsWithRef, ElementType, ReactNode } from 'react';\n\nimport { GradientText } from '../ui/index.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","import { Icon } from '@iconify/react';\nimport type { MouseEvent, ReactElement } from 'react';\n\nimport type { IClassName } from '../types/component.js';\n\n/** A service the person can sign in with. */\nexport interface ISocialProvider {\n  /** The name of the service (\"Google\"): the link says \"Continue with Google\". */\n  name: string;\n  /** An icon of Iconify (`'logos:google-icon'`) or any element. */\n  icon: string | ReactElement;\n  /** Where the sign in starts. */\n  href: string;\n}\n\nexport interface ISocialAuth extends IClassName {\n  providers: readonly ISocialProvider[];\n  /**\n   * Called when a provider is pressed, before the browser goes to its address: the place to remember\n   * where the person was, to bring them back after the sign in.\n   */\n  onProviderClick?: (provider: ISocialProvider, event: MouseEvent<HTMLAnchorElement>) => void;\n  /** What a link says to assistive technology. @default `Continue with ${provider.name}` */\n  getLabel?: (provider: ISocialProvider) => string;\n  /** The name of the group of links. @default 'Sign in with' */\n  label?: string;\n}\n\nconst defaultGetLabel = (provider: ISocialProvider) => `Continue with ${provider.name}`;\n\n/**\n * A row of icons, each a link that starts a sign in with a service (Google, GitHub...). They are plain\n * links, because signing in with a service leaves the app for the page of the service: an\n * `<a href>`, named \"Continue with Google\", that also works when opened in a new tab.\n *\n * The icons that are given by name come from the Iconify API unless the app has them registered\n * (`addIcon()`), which also makes them show without a network.\n */\nexport const SocialAuth = ({\n  providers,\n  onProviderClick,\n  getLabel = defaultGetLabel,\n  label = 'Sign in with',\n  className = '',\n}: ISocialAuth) => {\n  if (providers.length === 0) return null;\n\n  return (\n    <ul aria-label={label} className={`flex items-center justify-center gap-4 ${className}`}>\n      {providers.map((provider) => (\n        <li key={provider.name}>\n          <a\n            href={provider.href}\n            aria-label={getLabel(provider)}\n            className=\"block rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c\"\n            onClick={(event) => {\n              onProviderClick?.(provider, event);\n            }}\n          >\n            {typeof provider.icon === 'string' ? (\n              <Icon\n                aria-hidden=\"true\"\n                icon={provider.icon}\n                className=\"border-primary/40 shadow-primary/50 h-12 w-12 shrink-0 rounded-xl border bg-white/90 p-2.5 shadow-sm backdrop-blur-sm transition-transform duration-500 hover:scale-110 motion-reduce:transition-none\"\n              />\n            ) : (\n              provider.icon\n            )}\n          </a>\n        </li>\n      ))}\n    </ul>\n  );\n};\n"]}

package/dist/auth/index.d.cts

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

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

@@ -1 +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"}
+{"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;AACrC,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/auth/index.d.ts

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

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

@@ -1 +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"}
+{"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;AACrC,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/auth/index.js

@@ -1,31 +1,9 @@
+import { GradientText } from '@beautinique/frontend-components/ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Icon } from '@iconify/react';
 
 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,
@@ -68,7 +46,36 @@ var AuthBottomInstructions = /* @__PURE__ */ __name(({
     )
   }) });
 }, "AuthBottomInstructions");
+var defaultGetLabel = /* @__PURE__ */ __name((provider) => `Continue with ${provider.name}`, "defaultGetLabel");
+var SocialAuth = /* @__PURE__ */ __name(({
+  providers,
+  onProviderClick,
+  getLabel = defaultGetLabel,
+  label = "Sign in with",
+  className = ""
+}) => {
+  if (providers.length === 0) return null;
+  return /* @__PURE__ */ jsx("ul", { "aria-label": label, className: `flex items-center justify-center gap-4 ${className}`, children: providers.map((provider) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: provider.href,
+      "aria-label": getLabel(provider),
+      className: "block rounded-xl focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c",
+      onClick: (event) => {
+        onProviderClick?.(provider, event);
+      },
+      children: typeof provider.icon === "string" ? /* @__PURE__ */ jsx(
+        Icon,
+        {
+          "aria-hidden": "true",
+          icon: provider.icon,
+          className: "border-primary/40 shadow-primary/50 h-12 w-12 shrink-0 rounded-xl border bg-white/90 p-2.5 shadow-sm backdrop-blur-sm transition-transform duration-500 hover:scale-110 motion-reduce:transition-none"
+        }
+      ) : provider.icon
+    }
+  ) }, provider.name)) });
+}, "SocialAuth");
 
-export { AuthBottomInstructions };
+export { AuthBottomInstructions, SocialAuth };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map