@beautinique/frontend-components 1.0.8 → 1.0.9

package/dist/auth/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../../src/auth/AuthBottomInstructions.tsx","../../src/auth/SocialAuth.tsx"],"names":["jsx"],"mappings":";;;;;;AA6CA,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,uBACE,GAAA,CAAC,OAAG,GAAG,MAAA,EAAQ,WAAW,CAAA,sBAAA,EAAyB,SAAS,IACzD,QAAA,EAAA,OAAA,CAAQ;AAAA,IACP,KAAA,kBACE,GAAA;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,OAAA,kBACE,GAAA;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;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,uBACEA,GAAAA,CAAC,IAAA,EAAA,EAAG,YAAA,EAAY,KAAA,EAAO,WAAW,CAAA,uCAAA,EAA0C,SAAS,CAAA,CAAA,EAClF,QAAA,EAAA,SAAA,CAAU,IAAI,CAAC,QAAA,qBACdA,GAAAA,CAAC,QACC,QAAA,kBAAAA,GAAAA;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,GAAAA;AAAA,QAAC,IAAA;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.js","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/breadcrumb/Breadcrumb.d.cts

@@ -0,0 +1,34 @@
+import type { MouseEvent, ReactNode } from 'react';
+import type { IClassName } from '../types/component.js';
+export interface IBreadcrumbItem {
+    /** What is written for the item. */
+    label: ReactNode;
+    /**
+     * Where the item goes. Without one it is plain text. The last item is the page the person is on: it
+     * is never a link, whatever it has.
+     */
+    href?: string;
+}
+export interface IBreadcrumb extends IClassName {
+    /** The path to the page, from the top: the last one is the page itself. */
+    items: readonly IBreadcrumbItem[];
+    /**
+     * Called when an item is pressed with a plain click, in place of the browser going to the address:
+     * the app goes there itself, with its router, without loading the page. A click with a modifier
+     * (new tab, new window) and a middle click are left to the browser, so the links keep working as
+     * links. Without it the links are plain links.
+     */
+    onNavigate?: (href: string, event: MouseEvent<HTMLAnchorElement>) => void;
+    /** The name of the navigation, for assistive technology. @default 'Breadcrumb' */
+    label?: string;
+}
+/**
+ * Where the person is in the site (Home › Products › Face), each step but the last a link to the page
+ * above it. It is a list in a `nav`, the last item is marked as the current page, and the arrows
+ * between the items are not read out. A path that is too long for the width scrolls, with a fade.
+ *
+ * The router is the app's: the links are plain `<a href>`; give `onNavigate` to go there without
+ * loading the page. `getBreadcrumbItems()` makes the items from a path.
+ */
+export declare const Breadcrumb: ({ items, onNavigate, label, className, }: IBreadcrumb) => import("react").JSX.Element | null;
+//# sourceMappingURL=Breadcrumb.d.cts.map

package/dist/breadcrumb/Breadcrumb.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.cts","sourceRoot":"","sources":["../../src/breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,2EAA2E;IAC3E,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1E,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAWD;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,0CAKxB,WAAW,uCAkDb,CAAC"}

package/dist/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,34 @@
+import type { MouseEvent, ReactNode } from 'react';
+import type { IClassName } from '../types/component.js';
+export interface IBreadcrumbItem {
+    /** What is written for the item. */
+    label: ReactNode;
+    /**
+     * Where the item goes. Without one it is plain text. The last item is the page the person is on: it
+     * is never a link, whatever it has.
+     */
+    href?: string;
+}
+export interface IBreadcrumb extends IClassName {
+    /** The path to the page, from the top: the last one is the page itself. */
+    items: readonly IBreadcrumbItem[];
+    /**
+     * Called when an item is pressed with a plain click, in place of the browser going to the address:
+     * the app goes there itself, with its router, without loading the page. A click with a modifier
+     * (new tab, new window) and a middle click are left to the browser, so the links keep working as
+     * links. Without it the links are plain links.
+     */
+    onNavigate?: (href: string, event: MouseEvent<HTMLAnchorElement>) => void;
+    /** The name of the navigation, for assistive technology. @default 'Breadcrumb' */
+    label?: string;
+}
+/**
+ * Where the person is in the site (Home › Products › Face), each step but the last a link to the page
+ * above it. It is a list in a `nav`, the last item is marked as the current page, and the arrows
+ * between the items are not read out. A path that is too long for the width scrolls, with a fade.
+ *
+ * The router is the app's: the links are plain `<a href>`; give `onNavigate` to go there without
+ * loading the page. `getBreadcrumbItems()` makes the items from a path.
+ */
+export declare const Breadcrumb: ({ items, onNavigate, label, className, }: IBreadcrumb) => import("react").JSX.Element | null;
+//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/breadcrumb/Breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["../../src/breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,KAAK,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,2EAA2E;IAC3E,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAClC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC1E,kFAAkF;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAWD;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,GAAI,0CAKxB,WAAW,uCAkDb,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-icons.d.cts","sourceRoot":"","sources":["../../src/breadcrumb/breadcrumb-icons.ts"],"names":[],"mappings":"AAsBA;;;GAGG;AACH,eAAO,MAAkB,uBAAuB,cAAS,qBAAqB,UAC/C,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-icons.d.ts","sourceRoot":"","sources":["../../src/breadcrumb/breadcrumb-icons.ts"],"names":[],"mappings":"AAsBA;;;GAGG;AACH,eAAO,MAAkB,uBAAuB,cAAS,qBAAqB,UAC/C,CAAC"}

package/dist/breadcrumb/getBreadcrumbItems.d.cts

@@ -0,0 +1,16 @@
+import type { IBreadcrumbItem } from './Breadcrumb.js';
+export interface IBreadcrumbPathOptions {
+    /** What the first item says. @default 'Home' */
+    homeLabel?: string;
+    /** Where the first item goes. @default '/' */
+    homeHref?: string;
+    /** Makes the text of a step from its part of the path. The default turns `skin-care` into `skin care`. */
+    formatSegment?: (segment: string) => string;
+}
+/**
+ * The items of a breadcrumb for an address: `/products/skin-care/serum` is Home, products, skin care
+ * and serum, each with the address of the page it goes to. The query string and the hash are left out,
+ * and so are empty parts (`//`, a slash at the end).
+ */
+export declare const getBreadcrumbItems: (pathname: string, { homeLabel, homeHref, formatSegment, }?: IBreadcrumbPathOptions) => IBreadcrumbItem[];
+//# sourceMappingURL=getBreadcrumbItems.d.cts.map

package/dist/breadcrumb/getBreadcrumbItems.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBreadcrumbItems.d.cts","sourceRoot":"","sources":["../../src/breadcrumb/getBreadcrumbItems.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,WAAW,sBAAsB;IACrC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0GAA0G;IAC1G,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAcD;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,UAAU,MAAM,EAChB,0CAIG,sBAA2B,KAC7B,eAAe,EAWjB,CAAC"}

package/dist/breadcrumb/getBreadcrumbItems.d.ts

@@ -0,0 +1,16 @@
+import type { IBreadcrumbItem } from './Breadcrumb.js';
+export interface IBreadcrumbPathOptions {
+    /** What the first item says. @default 'Home' */
+    homeLabel?: string;
+    /** Where the first item goes. @default '/' */
+    homeHref?: string;
+    /** Makes the text of a step from its part of the path. The default turns `skin-care` into `skin care`. */
+    formatSegment?: (segment: string) => string;
+}
+/**
+ * The items of a breadcrumb for an address: `/products/skin-care/serum` is Home, products, skin care
+ * and serum, each with the address of the page it goes to. The query string and the hash are left out,
+ * and so are empty parts (`//`, a slash at the end).
+ */
+export declare const getBreadcrumbItems: (pathname: string, { homeLabel, homeHref, formatSegment, }?: IBreadcrumbPathOptions) => IBreadcrumbItem[];
+//# sourceMappingURL=getBreadcrumbItems.d.ts.map

package/dist/breadcrumb/getBreadcrumbItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getBreadcrumbItems.d.ts","sourceRoot":"","sources":["../../src/breadcrumb/getBreadcrumbItems.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,WAAW,sBAAsB;IACrC,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0GAA0G;IAC1G,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;CAC7C;AAcD;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,UAAU,MAAM,EAChB,0CAIG,sBAA2B,KAC7B,eAAe,EAWjB,CAAC"}

package/dist/breadcrumb/index.cjs

@@ -0,0 +1,110 @@
+'use strict';
+
+var react = require('@iconify/react');
+var layout = require('@beautinique/frontend-components/layout');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) react.addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/breadcrumb/breadcrumb-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "alt-arrow-right-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5L15 12L9 19"/>'
+      }
+    }
+  }
+];
+var { register: registerBreadcrumbIcons, names: BREADCRUMB_ICON_NAMES } = createIconRegistry(ICON_SETS);
+var isPlainClick = /* @__PURE__ */ __name((event) => event.button === 0 && !event.defaultPrevented && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey && (event.currentTarget.target === "" || event.currentTarget.target === "_self"), "isPlainClick");
+var Breadcrumb = /* @__PURE__ */ __name(({
+  items,
+  onNavigate,
+  label = "Breadcrumb",
+  className = ""
+}) => {
+  registerBreadcrumbIcons();
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(layout.ScrollableGradientContainer, { direction: "horizontal", className: "[&>div]:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": label, className: `text-secondary ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-2", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const href = isLast ? void 0 : item.href;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-2 truncate", children: [
+      href === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-current": isLast ? "page" : void 0,
+          className: `truncate capitalize ${isLast ? "opacity-80" : ""}`,
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href,
+          className: "cursor-pointer truncate capitalize focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c",
+          onClick: (event) => {
+            if (!onNavigate || !isPlainClick(event)) return;
+            event.preventDefault();
+            onNavigate(href, event);
+          },
+          children: item.label
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsxRuntime.jsx(
+        react.Icon,
+        {
+          "aria-hidden": "true",
+          icon: "solar:alt-arrow-right-linear",
+          className: "shrink-0"
+        }
+      )
+    ] }, index);
+  }) }) }) });
+}, "Breadcrumb");
+
+// src/breadcrumb/getBreadcrumbItems.ts
+var safeDecode = /* @__PURE__ */ __name((segment) => {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}, "safeDecode");
+var defaultFormat = /* @__PURE__ */ __name((segment) => safeDecode(segment).replaceAll(/[-_]+/g, " "), "defaultFormat");
+var getBreadcrumbItems = /* @__PURE__ */ __name((pathname, {
+  homeLabel = "Home",
+  homeHref = "/",
+  formatSegment = defaultFormat
+} = {}) => {
+  const path = pathname.split(/[?#]/, 1).at(0) ?? "";
+  const segments = path.split("/").filter(Boolean);
+  return [
+    { label: homeLabel, href: homeHref },
+    ...segments.map((segment, index) => ({
+      label: formatSegment(segment),
+      href: `/${segments.slice(0, index + 1).join("/")}`
+    }))
+  ];
+}, "getBreadcrumbItems");
+
+exports.Breadcrumb = Breadcrumb;
+exports.getBreadcrumbItems = getBreadcrumbItems;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/breadcrumb/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/icon-registry.ts","../../src/breadcrumb/breadcrumb-icons.ts","../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/getBreadcrumbItems.ts"],"names":["addCollection","jsx","ScrollableGradientContainer","jsxs","Icon"],"mappings":";;;;;;;;AAUO,IAAM,kBAAA,2BAAsB,IAAA,KAAiC;AAClE,EAAA,IAAI,UAAA,GAAa,KAAA;AAEjB,EAAA,OAAO;AAAA,IACL,0BAAU,MAAA,CAAA,MAAM;AACd,MAAA,IAAI,UAAA,EAAY;AAEhB,MAAA,KAAA,MAAW,GAAA,IAAO,IAAA,EAAMA,mBAAA,CAAc,GAAG,CAAA;AACzC,MAAA,UAAA,GAAa,IAAA;AAAA,IACf,CAAA,EALU,UAAA,CAAA;AAAA,IAMV,OAAO,IAAA,CAAK,OAAA;AAAA,MAAQ,CAAC,EAAE,MAAA,EAAQ,KAAA,EAAO,OAAA,EAAQ,KAC5C,CAAC,GAAG,MAAA,CAAO,IAAA,CAAK,KAAK,CAAA,EAAG,GAAG,MAAA,CAAO,IAAA,CAAK,OAAA,IAAW,EAAE,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,KAAS,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,IAAI,CAAA,CAAE;AAAA;AAC1F,GACF;AACF,CAAA,EAdkC,oBAAA,CAAA;;;ACDlC,IAAM,SAAA,GAA2B;AAAA,EAC/B;AAAA,IACE,MAAA,EAAQ,OAAA;AAAA,IACR,KAAA,EAAO,EAAA;AAAA,IACP,MAAA,EAAQ,EAAA;AAAA,IACR,KAAA,EAAO;AAAA,MACL,wBAAA,EAA0B;AAAA,QACxB,IAAA,EAAM;AAAA;AACR;AACF;AAEJ,CAAA;AAMO,IAAM,EAAE,QAAA,EAAU,uBAAA,EAAyB,OAAO,qBAAA,EAAsB,GAC7E,mBAAmB,SAAS,CAAA;ACI9B,IAAM,YAAA,mBAAe,MAAA,CAAA,CAAC,KAAA,KACpB,KAAA,CAAM,MAAA,KAAW,CAAA,IACjB,CAAC,KAAA,CAAM,gBAAA,IACP,CAAC,KAAA,CAAM,OAAA,IACP,CAAC,KAAA,CAAM,OAAA,IACP,CAAC,KAAA,CAAM,QAAA,IACP,CAAC,KAAA,CAAM,MAAA,KACN,KAAA,CAAM,aAAA,CAAc,MAAA,KAAW,EAAA,IAAM,KAAA,CAAM,aAAA,CAAc,MAAA,KAAW,OAAA,CAAA,EAPlD,cAAA,CAAA;AAiBd,IAAM,6BAAa,MAAA,CAAA,CAAC;AAAA,EACzB,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA,GAAQ,YAAA;AAAA,EACR,SAAA,GAAY;AACd,CAAA,KAAmB;AACjB,EAAA,uBAAA,EAAwB;AAExB,EAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAE/B,EAAA,uBACEC,cAAA,CAACC,sCAA4B,SAAA,EAAU,YAAA,EAAa,WAAU,uBAAA,EAC5D,QAAA,kBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAY,KAAA,EAAO,SAAA,EAAW,kBAAkB,SAAS,CAAA,CAAA,EAC5D,yCAAC,IAAA,EAAA,EAAG,SAAA,EAAU,2BACX,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAC1B,IAAA,MAAM,MAAA,GAAS,KAAA,KAAU,KAAA,CAAM,MAAA,GAAS,CAAA;AACxC,IAAA,MAAM,IAAA,GAAO,MAAA,GAAS,MAAA,GAAY,IAAA,CAAK,IAAA;AAEvC,IAAA,uBACEE,eAAA,CAAC,IAAA,EAAA,EAAe,SAAA,EAAU,kCAAA,EACvB,QAAA,EAAA;AAAA,MAAA,IAAA,KAAS,MAAA,mBACRF,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,cAAA,EAAc,SAAS,MAAA,GAAS,MAAA;AAAA,UAChC,SAAA,EAAW,CAAA,oBAAA,EAAuB,MAAA,GAAS,YAAA,GAAe,EAAE,CAAA,CAAA;AAAA,UAE3D,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,OACR,mBAEAA,cAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,IAAA;AAAA,UACA,SAAA,EAAU,gIAAA;AAAA,UACV,OAAA,EAAS,CAAC,KAAA,KAAU;AAClB,YAAA,IAAI,CAAC,UAAA,IAAc,CAAC,YAAA,CAAa,KAAK,CAAA,EAAG;AAEzC,YAAA,KAAA,CAAM,cAAA,EAAe;AACrB,YAAA,UAAA,CAAW,MAAM,KAAK,CAAA;AAAA,UACxB,CAAA;AAAA,UAEC,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,OACR;AAAA,MAED,CAAC,MAAA,oBACAA,cAAA;AAAA,QAACG,UAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,MAAA;AAAA,UACZ,IAAA,EAAK,8BAAA;AAAA,UACL,SAAA,EAAU;AAAA;AAAA;AACZ,KAAA,EAAA,EA3BK,KA6BT,CAAA;AAAA,EAEJ,CAAC,CAAA,EACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ,CAAA,EAvD0B,YAAA;;;ACrC1B,IAAM,UAAA,2BAAc,OAAA,KAAoB;AACtC,EAAA,IAAI;AACF,IAAA,OAAO,mBAAmB,OAAO,CAAA;AAAA,EACnC,CAAA,CAAA,MAAQ;AAEN,IAAA,OAAO,OAAA;AAAA,EACT;AACF,CAAA,EAPmB,YAAA,CAAA;AAUnB,IAAM,aAAA,2BAAiB,OAAA,KAAoB,UAAA,CAAW,OAAO,CAAA,CAAE,UAAA,CAAW,QAAA,EAAU,GAAG,CAAA,EAAjE,eAAA,CAAA;AAOf,IAAM,kBAAA,2BACX,QAAA,EACA;AAAA,EACE,SAAA,GAAY,MAAA;AAAA,EACZ,QAAA,GAAW,GAAA;AAAA,EACX,aAAA,GAAgB;AAClB,CAAA,GAA4B,EAAC,KACP;AACtB,EAAA,MAAM,IAAA,GAAO,SAAS,KAAA,CAAM,MAAA,EAAQ,CAAC,CAAA,CAAE,EAAA,CAAG,CAAC,CAAA,IAAK,EAAA;AAChD,EAAA,MAAM,WAAW,IAAA,CAAK,KAAA,CAAM,GAAG,CAAA,CAAE,OAAO,OAAO,CAAA;AAE/C,EAAA,OAAO;AAAA,IACL,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,EAAM,QAAA,EAAS;AAAA,IACnC,GAAG,QAAA,CAAS,GAAA,CAAI,CAAC,SAAS,KAAA,MAAW;AAAA,MACnC,KAAA,EAAO,cAAc,OAAO,CAAA;AAAA,MAC5B,IAAA,EAAM,CAAA,CAAA,EAAI,QAAA,CAAS,KAAA,CAAM,CAAA,EAAG,QAAQ,CAAC,CAAA,CAAE,IAAA,CAAK,GAAG,CAAC,CAAA;AAAA,KAClD,CAAE;AAAA,GACJ;AACF,CAAA,EAlBkC,oBAAA","file":"index.cjs","sourcesContent":["import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/**\n * Makes the registration of a bundled icon set: `register` puts the sets in Iconify (once, calling it\n * again does nothing) and `names` lists every icon, e.g. `solar:info-circle-linear`.\n *\n * A component calls `register` when it renders, not when its file is imported: an app that never\n * renders the component never runs it, and nothing depends on the bundler keeping an import that is\n * only there for its effect (the build says \"ignored-bare-import\" for those).\n */\nexport const createIconRegistry = (sets: readonly IconifyJSON[]) => {\n  let registered = false;\n\n  return {\n    register: () => {\n      if (registered) return;\n\n      for (const set of sets) addCollection(set);\n      registered = true;\n    },\n    names: sets.flatMap(({ prefix, icons, aliases }) =>\n      [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`),\n    ),\n  };\n};\n","import type { IconifyJSON } from '@iconify/react';\n\nimport { createIconRegistry } from '../lib/icon-registry.js';\n\n/*\n * The icons of the separator of the breadcrumb, bundled so they show without a network and without waiting for the\n * Iconify API (see `toast/toast-icons.ts`). The data is what\n * `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'alt-arrow-right-linear': {\n        body: '<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 5L15 12L9 19\"/>',\n      },\n    },\n  },\n];\n\n/**\n * Registers the icons above with Iconify; the components of this entry call it when they render\n * (calling it again is harmless).\n */\nexport const { register: registerBreadcrumbIcons, names: BREADCRUMB_ICON_NAMES } =\n  createIconRegistry(ICON_SETS);\n","import { Icon } from '@iconify/react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { ScrollableGradientContainer } from '../layout/index.js';\nimport type { IClassName } from '../types/component.js';\nimport { registerBreadcrumbIcons } from './breadcrumb-icons.js';\n\nexport interface IBreadcrumbItem {\n  /** What is written for the item. */\n  label: ReactNode;\n  /**\n   * Where the item goes. Without one it is plain text. The last item is the page the person is on: it\n   * is never a link, whatever it has.\n   */\n  href?: string;\n}\n\nexport interface IBreadcrumb extends IClassName {\n  /** The path to the page, from the top: the last one is the page itself. */\n  items: readonly IBreadcrumbItem[];\n  /**\n   * Called when an item is pressed with a plain click, in place of the browser going to the address:\n   * the app goes there itself, with its router, without loading the page. A click with a modifier\n   * (new tab, new window) and a middle click are left to the browser, so the links keep working as\n   * links. Without it the links are plain links.\n   */\n  onNavigate?: (href: string, event: MouseEvent<HTMLAnchorElement>) => void;\n  /** The name of the navigation, for assistive technology. @default 'Breadcrumb' */\n  label?: string;\n}\n\nconst isPlainClick = (event: MouseEvent<HTMLAnchorElement>) =>\n  event.button === 0 &&\n  !event.defaultPrevented &&\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.shiftKey &&\n  !event.altKey &&\n  (event.currentTarget.target === '' || event.currentTarget.target === '_self');\n\n/**\n * Where the person is in the site (Home › Products › Face), each step but the last a link to the page\n * above it. It is a list in a `nav`, the last item is marked as the current page, and the arrows\n * between the items are not read out. A path that is too long for the width scrolls, with a fade.\n *\n * The router is the app's: the links are plain `<a href>`; give `onNavigate` to go there without\n * loading the page. `getBreadcrumbItems()` makes the items from a path.\n */\nexport const Breadcrumb = ({\n  items,\n  onNavigate,\n  label = 'Breadcrumb',\n  className = '',\n}: IBreadcrumb) => {\n  registerBreadcrumbIcons();\n\n  if (items.length === 0) return null;\n\n  return (\n    <ScrollableGradientContainer direction=\"horizontal\" className=\"[&>div]:justify-start\">\n      <nav aria-label={label} className={`text-secondary ${className}`}>\n        <ol className=\"flex items-center gap-2\">\n          {items.map((item, index) => {\n            const isLast = index === items.length - 1;\n            const href = isLast ? undefined : item.href;\n\n            return (\n              <li key={index} className=\"flex items-center gap-2 truncate\">\n                {href === undefined ? (\n                  <span\n                    aria-current={isLast ? 'page' : undefined}\n                    className={`truncate capitalize ${isLast ? 'opacity-80' : ''}`}\n                  >\n                    {item.label}\n                  </span>\n                ) : (\n                  <a\n                    href={href}\n                    className=\"cursor-pointer truncate capitalize focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c\"\n                    onClick={(event) => {\n                      if (!onNavigate || !isPlainClick(event)) return;\n\n                      event.preventDefault();\n                      onNavigate(href, event);\n                    }}\n                  >\n                    {item.label}\n                  </a>\n                )}\n                {!isLast && (\n                  <Icon\n                    aria-hidden=\"true\"\n                    icon=\"solar:alt-arrow-right-linear\"\n                    className=\"shrink-0\"\n                  />\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </nav>\n    </ScrollableGradientContainer>\n  );\n};\n","import type { IBreadcrumbItem } from './Breadcrumb.js';\n\nexport interface IBreadcrumbPathOptions {\n  /** What the first item says. @default 'Home' */\n  homeLabel?: string;\n  /** Where the first item goes. @default '/' */\n  homeHref?: string;\n  /** Makes the text of a step from its part of the path. The default turns `skin-care` into `skin care`. */\n  formatSegment?: (segment: string) => string;\n}\n\nconst safeDecode = (segment: string) => {\n  try {\n    return decodeURIComponent(segment);\n  } catch {\n    // a `%` that is not an escape: the text as it is\n    return segment;\n  }\n};\n\n/** `skin-care` and `skin_care` read `skin care`; `%20` is a space. */\nconst defaultFormat = (segment: string) => safeDecode(segment).replaceAll(/[-_]+/g, ' ');\n\n/**\n * The items of a breadcrumb for an address: `/products/skin-care/serum` is Home, products, skin care\n * and serum, each with the address of the page it goes to. The query string and the hash are left out,\n * and so are empty parts (`//`, a slash at the end).\n */\nexport const getBreadcrumbItems = (\n  pathname: string,\n  {\n    homeLabel = 'Home',\n    homeHref = '/',\n    formatSegment = defaultFormat,\n  }: IBreadcrumbPathOptions = {},\n): IBreadcrumbItem[] => {\n  const path = pathname.split(/[?#]/, 1).at(0) ?? '';\n  const segments = path.split('/').filter(Boolean);\n\n  return [\n    { label: homeLabel, href: homeHref },\n    ...segments.map((segment, index) => ({\n      label: formatSegment(segment),\n      href: `/${segments.slice(0, index + 1).join('/')}`,\n    })),\n  ];\n};\n"]}

package/dist/breadcrumb/index.d.cts

@@ -0,0 +1,3 @@
+export { Breadcrumb, type IBreadcrumb, type IBreadcrumbItem } from './Breadcrumb.js';
+export { getBreadcrumbItems, type IBreadcrumbPathOptions } from './getBreadcrumbItems.js';
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+export { Breadcrumb, type IBreadcrumb, type IBreadcrumbItem } from './Breadcrumb.js';
+export { getBreadcrumbItems, type IBreadcrumbPathOptions } from './getBreadcrumbItems.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACrF,OAAO,EAAE,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/breadcrumb/index.js

@@ -0,0 +1,107 @@
+import { addCollection, Icon } from '@iconify/react';
+import { ScrollableGradientContainer } from '@beautinique/frontend-components/layout';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/breadcrumb/breadcrumb-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "alt-arrow-right-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5L15 12L9 19"/>'
+      }
+    }
+  }
+];
+var { register: registerBreadcrumbIcons, names: BREADCRUMB_ICON_NAMES } = createIconRegistry(ICON_SETS);
+var isPlainClick = /* @__PURE__ */ __name((event) => event.button === 0 && !event.defaultPrevented && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey && (event.currentTarget.target === "" || event.currentTarget.target === "_self"), "isPlainClick");
+var Breadcrumb = /* @__PURE__ */ __name(({
+  items,
+  onNavigate,
+  label = "Breadcrumb",
+  className = ""
+}) => {
+  registerBreadcrumbIcons();
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(ScrollableGradientContainer, { direction: "horizontal", className: "[&>div]:justify-start", children: /* @__PURE__ */ jsx("nav", { "aria-label": label, className: `text-secondary ${className}`, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-2", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    const href = isLast ? void 0 : item.href;
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 truncate", children: [
+      href === void 0 ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-current": isLast ? "page" : void 0,
+          className: `truncate capitalize ${isLast ? "opacity-80" : ""}`,
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className: "cursor-pointer truncate capitalize focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c",
+          onClick: (event) => {
+            if (!onNavigate || !isPlainClick(event)) return;
+            event.preventDefault();
+            onNavigate(href, event);
+          },
+          children: item.label
+        }
+      ),
+      !isLast && /* @__PURE__ */ jsx(
+        Icon,
+        {
+          "aria-hidden": "true",
+          icon: "solar:alt-arrow-right-linear",
+          className: "shrink-0"
+        }
+      )
+    ] }, index);
+  }) }) }) });
+}, "Breadcrumb");
+
+// src/breadcrumb/getBreadcrumbItems.ts
+var safeDecode = /* @__PURE__ */ __name((segment) => {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}, "safeDecode");
+var defaultFormat = /* @__PURE__ */ __name((segment) => safeDecode(segment).replaceAll(/[-_]+/g, " "), "defaultFormat");
+var getBreadcrumbItems = /* @__PURE__ */ __name((pathname, {
+  homeLabel = "Home",
+  homeHref = "/",
+  formatSegment = defaultFormat
+} = {}) => {
+  const path = pathname.split(/[?#]/, 1).at(0) ?? "";
+  const segments = path.split("/").filter(Boolean);
+  return [
+    { label: homeLabel, href: homeHref },
+    ...segments.map((segment, index) => ({
+      label: formatSegment(segment),
+      href: `/${segments.slice(0, index + 1).join("/")}`
+    }))
+  ];
+}, "getBreadcrumbItems");
+
+export { Breadcrumb, getBreadcrumbItems };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/breadcrumb/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/icon-registry.ts","../../src/breadcrumb/breadcrumb-icons.ts","../../src/breadcrumb/Breadcrumb.tsx","../../src/breadcrumb/getBreadcrumbItems.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/**\n * Makes the registration of a bundled icon set: `register` puts the sets in Iconify (once, calling it\n * again does nothing) and `names` lists every icon, e.g. `solar:info-circle-linear`.\n *\n * A component calls `register` when it renders, not when its file is imported: an app that never\n * renders the component never runs it, and nothing depends on the bundler keeping an import that is\n * only there for its effect (the build says \"ignored-bare-import\" for those).\n */\nexport const createIconRegistry = (sets: readonly IconifyJSON[]) => {\n  let registered = false;\n\n  return {\n    register: () => {\n      if (registered) return;\n\n      for (const set of sets) addCollection(set);\n      registered = true;\n    },\n    names: sets.flatMap(({ prefix, icons, aliases }) =>\n      [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`),\n    ),\n  };\n};\n","import type { IconifyJSON } from '@iconify/react';\n\nimport { createIconRegistry } from '../lib/icon-registry.js';\n\n/*\n * The icons of the separator of the breadcrumb, bundled so they show without a network and without waiting for the\n * Iconify API (see `toast/toast-icons.ts`). The data is what\n * `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'alt-arrow-right-linear': {\n        body: '<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 5L15 12L9 19\"/>',\n      },\n    },\n  },\n];\n\n/**\n * Registers the icons above with Iconify; the components of this entry call it when they render\n * (calling it again is harmless).\n */\nexport const { register: registerBreadcrumbIcons, names: BREADCRUMB_ICON_NAMES } =\n  createIconRegistry(ICON_SETS);\n","import { Icon } from '@iconify/react';\nimport type { MouseEvent, ReactNode } from 'react';\n\nimport { ScrollableGradientContainer } from '../layout/index.js';\nimport type { IClassName } from '../types/component.js';\nimport { registerBreadcrumbIcons } from './breadcrumb-icons.js';\n\nexport interface IBreadcrumbItem {\n  /** What is written for the item. */\n  label: ReactNode;\n  /**\n   * Where the item goes. Without one it is plain text. The last item is the page the person is on: it\n   * is never a link, whatever it has.\n   */\n  href?: string;\n}\n\nexport interface IBreadcrumb extends IClassName {\n  /** The path to the page, from the top: the last one is the page itself. */\n  items: readonly IBreadcrumbItem[];\n  /**\n   * Called when an item is pressed with a plain click, in place of the browser going to the address:\n   * the app goes there itself, with its router, without loading the page. A click with a modifier\n   * (new tab, new window) and a middle click are left to the browser, so the links keep working as\n   * links. Without it the links are plain links.\n   */\n  onNavigate?: (href: string, event: MouseEvent<HTMLAnchorElement>) => void;\n  /** The name of the navigation, for assistive technology. @default 'Breadcrumb' */\n  label?: string;\n}\n\nconst isPlainClick = (event: MouseEvent<HTMLAnchorElement>) =>\n  event.button === 0 &&\n  !event.defaultPrevented &&\n  !event.metaKey &&\n  !event.ctrlKey &&\n  !event.shiftKey &&\n  !event.altKey &&\n  (event.currentTarget.target === '' || event.currentTarget.target === '_self');\n\n/**\n * Where the person is in the site (Home › Products › Face), each step but the last a link to the page\n * above it. It is a list in a `nav`, the last item is marked as the current page, and the arrows\n * between the items are not read out. A path that is too long for the width scrolls, with a fade.\n *\n * The router is the app's: the links are plain `<a href>`; give `onNavigate` to go there without\n * loading the page. `getBreadcrumbItems()` makes the items from a path.\n */\nexport const Breadcrumb = ({\n  items,\n  onNavigate,\n  label = 'Breadcrumb',\n  className = '',\n}: IBreadcrumb) => {\n  registerBreadcrumbIcons();\n\n  if (items.length === 0) return null;\n\n  return (\n    <ScrollableGradientContainer direction=\"horizontal\" className=\"[&>div]:justify-start\">\n      <nav aria-label={label} className={`text-secondary ${className}`}>\n        <ol className=\"flex items-center gap-2\">\n          {items.map((item, index) => {\n            const isLast = index === items.length - 1;\n            const href = isLast ? undefined : item.href;\n\n            return (\n              <li key={index} className=\"flex items-center gap-2 truncate\">\n                {href === undefined ? (\n                  <span\n                    aria-current={isLast ? 'page' : undefined}\n                    className={`truncate capitalize ${isLast ? 'opacity-80' : ''}`}\n                  >\n                    {item.label}\n                  </span>\n                ) : (\n                  <a\n                    href={href}\n                    className=\"cursor-pointer truncate capitalize focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-crayola-c\"\n                    onClick={(event) => {\n                      if (!onNavigate || !isPlainClick(event)) return;\n\n                      event.preventDefault();\n                      onNavigate(href, event);\n                    }}\n                  >\n                    {item.label}\n                  </a>\n                )}\n                {!isLast && (\n                  <Icon\n                    aria-hidden=\"true\"\n                    icon=\"solar:alt-arrow-right-linear\"\n                    className=\"shrink-0\"\n                  />\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </nav>\n    </ScrollableGradientContainer>\n  );\n};\n","import type { IBreadcrumbItem } from './Breadcrumb.js';\n\nexport interface IBreadcrumbPathOptions {\n  /** What the first item says. @default 'Home' */\n  homeLabel?: string;\n  /** Where the first item goes. @default '/' */\n  homeHref?: string;\n  /** Makes the text of a step from its part of the path. The default turns `skin-care` into `skin care`. */\n  formatSegment?: (segment: string) => string;\n}\n\nconst safeDecode = (segment: string) => {\n  try {\n    return decodeURIComponent(segment);\n  } catch {\n    // a `%` that is not an escape: the text as it is\n    return segment;\n  }\n};\n\n/** `skin-care` and `skin_care` read `skin care`; `%20` is a space. */\nconst defaultFormat = (segment: string) => safeDecode(segment).replaceAll(/[-_]+/g, ' ');\n\n/**\n * The items of a breadcrumb for an address: `/products/skin-care/serum` is Home, products, skin care\n * and serum, each with the address of the page it goes to. The query string and the hash are left out,\n * and so are empty parts (`//`, a slash at the end).\n */\nexport const getBreadcrumbItems = (\n  pathname: string,\n  {\n    homeLabel = 'Home',\n    homeHref = '/',\n    formatSegment = defaultFormat,\n  }: IBreadcrumbPathOptions = {},\n): IBreadcrumbItem[] => {\n  const path = pathname.split(/[?#]/, 1).at(0) ?? '';\n  const segments = path.split('/').filter(Boolean);\n\n  return [\n    { label: homeLabel, href: homeHref },\n    ...segments.map((segment, index) => ({\n      label: formatSegment(segment),\n      href: `/${segments.slice(0, index + 1).join('/')}`,\n    })),\n  ];\n};\n"]}

package/dist/color-input/ColorInput.d.cts

@@ -0,0 +1,33 @@
+
+import { type IFieldBase } from '../inputs/index.js';
+import { type TDropdownPlacement } from '../lib/dropdown-position.js';
+export interface IColorInput extends IFieldBase {
+    /** The colour, in hexadecimal (`#ff00aa`). Anything else is shown as black. */
+    value?: string;
+    /** Gets the colour, in hexadecimal, as the person changes it. */
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    /** What the field says while there is no `value`. */
+    placeholder?: string;
+    /** The `id` of the field, for something that has to point at it. */
+    id?: string;
+    /** Which side of the field the picker opens on, unless there is no room there. @default 'bottom' */
+    position?: TDropdownPlacement;
+    /** Leave out the slider and the field of the alpha (the transparency). @default false */
+    hideAlpha?: boolean;
+    /** The name of the picker for assistive technology, when the field has no `label`. @default 'Colour picker' */
+    pickerLabel?: string;
+}
+/**
+ * A field that shows a colour and opens a picker to change it (`react-color-palette`, which this
+ * entry needs: install it). The field is one button, so the keyboard reaches it; the picker is a
+ * dialog that holds the focus until it is closed (Escape, a press outside, or the field again) and
+ * gives it back. The sliders need a mouse or a finger; the fields in the picker (hex, rgb) do not:
+ * the colour can be typed.
+ *
+ * The picker is drawn in `document.body`, so a parent that scrolls or hides what overflows does not
+ * cut it; it opens on the other side when there is no room, and follows the field while the page
+ * scrolls.
+ */
+export declare const ColorInput: ({ label, value, error, disabled, placeholder, onChange, id, containerClassName, className, position, hideAlpha, pickerLabel, }: IColorInput) => import("react").JSX.Element;
+//# sourceMappingURL=ColorInput.d.cts.map

package/dist/color-input/ColorInput.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.d.cts","sourceRoot":"","sources":["../../src/color-input/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,8CAA8C,CAAC;AAOtD,OAAO,EAAE,KAAK,UAAU,EAA0B,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAoB,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAQxF,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oGAAoG;IACpG,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+GAA+G;IAC/G,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAKD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GAAI,gIAaxB,WAAW,gCAuHb,CAAC"}

package/dist/color-input/ColorInput.d.ts

@@ -0,0 +1,33 @@
+
+import { type IFieldBase } from '../inputs/index.js';
+import { type TDropdownPlacement } from '../lib/dropdown-position.js';
+export interface IColorInput extends IFieldBase {
+    /** The colour, in hexadecimal (`#ff00aa`). Anything else is shown as black. */
+    value?: string;
+    /** Gets the colour, in hexadecimal, as the person changes it. */
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    /** What the field says while there is no `value`. */
+    placeholder?: string;
+    /** The `id` of the field, for something that has to point at it. */
+    id?: string;
+    /** Which side of the field the picker opens on, unless there is no room there. @default 'bottom' */
+    position?: TDropdownPlacement;
+    /** Leave out the slider and the field of the alpha (the transparency). @default false */
+    hideAlpha?: boolean;
+    /** The name of the picker for assistive technology, when the field has no `label`. @default 'Colour picker' */
+    pickerLabel?: string;
+}
+/**
+ * A field that shows a colour and opens a picker to change it (`react-color-palette`, which this
+ * entry needs: install it). The field is one button, so the keyboard reaches it; the picker is a
+ * dialog that holds the focus until it is closed (Escape, a press outside, or the field again) and
+ * gives it back. The sliders need a mouse or a finger; the fields in the picker (hex, rgb) do not:
+ * the colour can be typed.
+ *
+ * The picker is drawn in `document.body`, so a parent that scrolls or hides what overflows does not
+ * cut it; it opens on the other side when there is no room, and follows the field while the page
+ * scrolls.
+ */
+export declare const ColorInput: ({ label, value, error, disabled, placeholder, onChange, id, containerClassName, className, position, hideAlpha, pickerLabel, }: IColorInput) => import("react").JSX.Element;
+//# sourceMappingURL=ColorInput.d.ts.map

package/dist/color-input/ColorInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../src/color-input/ColorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,8CAA8C,CAAC;AAOtD,OAAO,EAAE,KAAK,UAAU,EAA0B,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAoB,KAAK,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAQxF,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oGAAoG;IACpG,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+GAA+G;IAC/G,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAKD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,UAAU,GAAI,gIAaxB,WAAW,gCAuHb,CAAC"}

package/dist/color-input/color-input-icons.d.cts

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

package/dist/color-input/color-input-icons.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-input-icons.d.cts","sourceRoot":"","sources":["../../src/color-input/color-input-icons.ts"],"names":[],"mappings":"AAmCA;;;GAGG;AACH,eAAO,MAAkB,uBAAuB,cAAS,sBAAsB,UAChD,CAAC"}

package/dist/color-input/color-input-icons.d.ts

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

package/dist/color-input/color-input-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-input-icons.d.ts","sourceRoot":"","sources":["../../src/color-input/color-input-icons.ts"],"names":[],"mappings":"AAmCA;;;GAGG;AACH,eAAO,MAAkB,uBAAuB,cAAS,sBAAsB,UAChD,CAAC"}

package/dist/color-input/color.d.cts

@@ -0,0 +1,10 @@
+import { type IColor } from 'react-color-palette';
+/** The colour used when there is none, or the text is not a colour. */
+export declare const FALLBACK_COLOR = "#000000";
+/** Whether `value` is a colour written in hexadecimal (`#fff`, `#ff00aa`, `#ff00aa80`). */
+export declare const isHexColor: (value: string | undefined) => value is string;
+/** The colour of a hexadecimal text; black for nothing and for text that is not a colour. */
+export declare const toColor: (value: string | undefined) => IColor;
+/** Two ways to write the same colour (`#FFF` and `#fff`)? Only the case is looked at. */
+export declare const isSameHex: (a: string | undefined, b: string | undefined) => boolean;
+//# sourceMappingURL=color.d.cts.map

package/dist/color-input/color.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.cts","sourceRoot":"","sources":["../../src/color-input/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAKhE,uEAAuE;AACvE,eAAO,MAAM,cAAc,YAAY,CAAC;AAExC,2FAA2F;AAC3F,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,GAAG,SAAS,KAAG,KAAK,IAAI,MACxB,CAAC;AAEzC,6FAA6F;AAC7F,eAAO,MAAM,OAAO,GAAI,OAAO,MAAM,GAAG,SAAS,KAAG,MACqB,CAAC;AAE1E,yFAAyF;AACzF,eAAO,MAAM,SAAS,GAAI,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,MAAM,GAAG,SAAS,YAC/B,CAAC"}

package/dist/color-input/color.d.ts

@@ -0,0 +1,10 @@
+import { type IColor } from 'react-color-palette';
+/** The colour used when there is none, or the text is not a colour. */
+export declare const FALLBACK_COLOR = "#000000";
+/** Whether `value` is a colour written in hexadecimal (`#fff`, `#ff00aa`, `#ff00aa80`). */
+export declare const isHexColor: (value: string | undefined) => value is string;
+/** The colour of a hexadecimal text; black for nothing and for text that is not a colour. */
+export declare const toColor: (value: string | undefined) => IColor;
+/** Two ways to write the same colour (`#FFF` and `#fff`)? Only the case is looked at. */
+export declare const isSameHex: (a: string | undefined, b: string | undefined) => boolean;
+//# sourceMappingURL=color.d.ts.map

package/dist/color-input/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/color-input/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAKhE,uEAAuE;AACvE,eAAO,MAAM,cAAc,YAAY,CAAC;AAExC,2FAA2F;AAC3F,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,GAAG,SAAS,KAAG,KAAK,IAAI,MACxB,CAAC;AAEzC,6FAA6F;AAC7F,eAAO,MAAM,OAAO,GAAI,OAAO,MAAM,GAAG,SAAS,KAAG,MACqB,CAAC;AAE1E,yFAAyF;AACzF,eAAO,MAAM,SAAS,GAAI,GAAG,MAAM,GAAG,SAAS,EAAE,GAAG,MAAM,GAAG,SAAS,YAC/B,CAAC"}