@clubmed/trident-ui 1.3.0-beta.4 → 1.3.0-beta.5

package/molecules/Buttons/ButtonAnchor.js

@@ -1,40 +1,18 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as C } from "../../chunks/index.js";
-/* empty css                  */
-import "react";
-import { variants as y, rootClassName as B } from "./Button.helpers.js";
-import { themes as w } from "./Button.themes.js";
-import { ButtonContent as A } from "./ButtonContent.js";
-const D = ({
-  theme: s = "yellow",
-  component: r = "a",
-  backgroundOverride: e,
-  variant: t = "text",
-  className: n,
-  label: o,
-  children: a,
-  title: c,
-  icon: p,
-  dataTestId: i,
-  href: l,
-  groupName: f = "",
-  ...h
-}) => {
-  const u = t === "text", d = y[t], x = w(s, e, f);
-  return /* @__PURE__ */ m(
-    r,
-    {
-      "data-name": "ButtonAnchor",
-      "data-testid": i,
-      className: C(B, x, d, t, n),
-      title: c || o,
-      href: l,
-      ...h,
-      children: /* @__PURE__ */ m(A, { showLabel: u, label: o, icon: p, children: a })
-    }
-  );
+import { jsxs as n } from "react/jsx-runtime";
+import { ButtonAnchor as r } from "./v2/ButtonAnchor.js";
+import { BUTTON_THEME_LEGACY as c, BUTTON_VARIANT_LEGACY as e } from "./Button.js";
+const i = (t) => {
+  const o = {
+    ...t,
+    ...c[t.theme] || {},
+    ...e[t.variant] || {}
+  };
+  return /* @__PURE__ */ n(r, { ...o, children: [
+    o.label,
+    t.children
+  ] });
 };
 export {
-  D as ButtonAnchor
+  i as ButtonAnchor
 };
 //# sourceMappingURL=ButtonAnchor.js.map

package/molecules/Buttons/ButtonAnchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonAnchor.js","sources":["../../../lib/molecules/Buttons/ButtonAnchor.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\nimport './button.css';\nimport { type CommonButtonProps } from './Button';\nimport { rootClassName, variants } from './Button.helpers';\nimport { themes } from './Button.themes';\nimport { ButtonContent } from './ButtonContent';\n\ninterface ButtonAnchorProps extends CommonButtonProps, AnchorHTMLAttributes<HTMLAnchorElement> {\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const ButtonAnchor: FunctionComponent<ButtonAnchorProps> = ({\n  theme = 'yellow',\n  component = 'a',\n  backgroundOverride,\n  variant = 'text',\n  className,\n  label,\n  children,\n  title,\n  icon,\n  dataTestId,\n  href,\n  groupName = '',\n  ...rest\n}) => {\n  const showLabel = variant === 'text';\n  const layout = variants[variant];\n  const style = themes(theme, backgroundOverride, groupName);\n  const Cmp = component as FunctionComponent<PropsWithChildren<ButtonAnchorProps>>;\n\n  return (\n    <Cmp\n      data-name=\"ButtonAnchor\"\n      data-testid={dataTestId}\n      className={classNames(rootClassName, style, layout, variant, className)}\n      title={title || label}\n      href={href}\n      {...rest}\n    >\n      <ButtonContent showLabel={showLabel} label={label} icon={icon}>\n        {children}\n      </ButtonContent>\n    </Cmp>\n  );\n};\n"],"names":["ButtonAnchor","theme","component","backgroundOverride","variant","className","label","children","title","icon","dataTestId","href","groupName","rest","showLabel","layout","variants","style","themes","jsx","classNames","rootClassName","ButtonContent"],"mappings":";;;;;;;AAYO,MAAMA,IAAqD,CAAC;AAAA,EACjE,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,oBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAYV,MAAY,QACxBW,IAASC,EAASZ,CAAO,GACzBa,IAAQC,EAAOjB,GAAOE,GAAoBS,CAAS;AAIvD,SAAA,gBAAAO;AAAA,IAHUjB;AAAA,IAGT;AAAA,MACC,aAAU;AAAA,MACV,eAAaQ;AAAA,MACb,WAAWU,EAAWC,GAAeJ,GAAOF,GAAQX,GAASC,CAAS;AAAA,MACtE,OAAOG,KAASF;AAAA,MAChB,MAAAK;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAC,gBAAAM,EAAAG,GAAA,EAAc,WAAAR,GAAsB,OAAAR,GAAc,MAAAG,GAChD,UAAAF,GACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ButtonAnchor.js","sources":["../../../lib/molecules/Buttons/ButtonAnchor.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, FunctionComponent, PropsWithChildren } from 'react';\nimport { ButtonAnchor as ButtonAnchorV2 } from './v2/ButtonAnchor';\nimport { BUTTON_THEME_LEGACY, BUTTON_VARIANT_LEGACY, type CommonButtonProps } from './Button';\n\ntype ButtonAnchorProps = CommonButtonProps & {\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n} & AnchorHTMLAttributes<HTMLAnchorElement>;\n\nexport const ButtonAnchor: FunctionComponent<ButtonAnchorProps> = (props) => {\n  const opts = {\n    ...props,\n    ...(BUTTON_THEME_LEGACY[props.theme!] || {}),\n    ...(BUTTON_VARIANT_LEGACY[props.variant!] || {}),\n  };\n\n  return (\n    <ButtonAnchorV2 {...opts}>\n      {opts.label}\n      {props.children}\n    </ButtonAnchorV2>\n  );\n};\n"],"names":["ButtonAnchor","props","opts","BUTTON_THEME_LEGACY","BUTTON_VARIANT_LEGACY","jsxs","ButtonAnchorV2"],"mappings":";;;AAQa,MAAAA,IAAqD,CAACC,MAAU;AAC3E,QAAMC,IAAO;AAAA,IACX,GAAGD;AAAA,IACH,GAAIE,EAAoBF,EAAM,KAAM,KAAK,CAAC;AAAA,IAC1C,GAAIG,EAAsBH,EAAM,OAAQ,KAAK,CAAC;AAAA,EAAA;AAI9C,SAAA,gBAAAI,EAACC,GAAgB,EAAA,GAAGJ,GACjB,UAAA;AAAA,IAAKA,EAAA;AAAA,IACLD,EAAM;AAAA,EACT,EAAA,CAAA;AAEJ;"}

package/molecules/Buttons/ButtonContent.d.ts

@@ -1,9 +1,17 @@
 import type { FunctionComponent, ReactNode } from 'react';
 import { type IconicNames, type IconicTypes } from '../../atoms/Icons';
-export declare const ButtonContent: FunctionComponent<{
-    showLabel: boolean;
+export type ButtonContentProps = {
+    /**
+     * @deprecated
+     */
+    showLabel?: boolean;
+    /**
+     * @deprecated
+     */
     label?: string;
     children?: ReactNode;
     icon?: IconicNames;
     iconType?: IconicTypes;
-}>;
+    iconWidth?: string;
+};
+export declare const ButtonContent: FunctionComponent<ButtonContentProps>;

package/molecules/Buttons/ButtonContent.js

@@ -1,12 +1,19 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { Icon as p } from "../../atoms/Icons/Icon.js";
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { Icon as c } from "../../atoms/Icons/Icon.js";
 import "@clubmed/trident-icons";
-const l = ({ showLabel: r, label: t, children: s, icon: e, iconType: o }) => /* @__PURE__ */ m("span", { className: "flex items-center justify-center gap-x-8 w-full", children: [
-  r ? t : /* @__PURE__ */ n("span", { className: "sr-only", children: t }),
+const f = ({
+  showLabel: r,
+  label: t,
+  children: s,
+  icon: e,
+  iconType: o,
+  iconWidth: m
+}) => /* @__PURE__ */ p("span", { className: "flex items-center justify-center gap-x-8 w-full", children: [
+  r ? t : t && /* @__PURE__ */ n("span", { className: "sr-only", children: t }),
   s,
-  e && /* @__PURE__ */ n(p, { width: "24px", name: e, type: o })
+  e && /* @__PURE__ */ n(c, { name: e, width: m ?? "24px", type: o })
 ] });
 export {
-  l as ButtonContent
+  f as ButtonContent
 };
 //# sourceMappingURL=ButtonContent.js.map

package/molecules/Buttons/ButtonContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonContent.js","sources":["../../../lib/molecules/Buttons/ButtonContent.tsx"],"sourcesContent":["import type { FunctionComponent, ReactNode } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@/atoms/Icons';\n\nexport const ButtonContent: FunctionComponent<{\n  showLabel: boolean;\n  label?: string;\n  children?: ReactNode;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n}> = ({ showLabel, label, children, icon, iconType }) => {\n  return (\n    <span className=\"flex items-center justify-center gap-x-8 w-full\">\n      {showLabel ? label : <span className=\"sr-only\">{label}</span>}\n      {children}\n      {icon && <Icon width=\"24px\" name={icon} type={iconType} />}\n    </span>\n  );\n};\n"],"names":["ButtonContent","showLabel","label","children","icon","iconType","jsxs","jsx","Icon"],"mappings":";;;AAIa,MAAAA,IAMR,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,UAAAC,GAAU,MAAAC,GAAM,UAAAC,QAEtC,gBAAAC,EAAC,QAAK,EAAA,WAAU,mDACb,UAAA;AAAA,EAAAL,IAAYC,IAAQ,gBAAAK,EAAC,QAAK,EAAA,WAAU,WAAW,UAAML,GAAA;AAAA,EACrDC;AAAA,EACAC,uBAASI,GAAK,EAAA,OAAM,QAAO,MAAMJ,GAAM,MAAMC,GAAU;AAC1D,EAAA,CAAA;"}
+{"version":3,"file":"ButtonContent.js","sources":["../../../lib/molecules/Buttons/ButtonContent.tsx"],"sourcesContent":["import type { FunctionComponent, ReactNode } from 'react';\n\nimport { Icon, type IconicNames, type IconicTypes } from '@/atoms/Icons';\n\nexport type ButtonContentProps = {\n  /**\n   * @deprecated\n   */\n  showLabel?: boolean;\n  /**\n   * @deprecated\n   */\n  label?: string;\n  children?: ReactNode;\n  icon?: IconicNames;\n  iconType?: IconicTypes;\n  iconWidth?: string;\n};\n\nexport const ButtonContent: FunctionComponent<ButtonContentProps> = ({\n  showLabel,\n  label,\n  children,\n  icon,\n  iconType,\n  iconWidth,\n}) => {\n  return (\n    <span className=\"flex items-center justify-center gap-x-8 w-full\">\n      {showLabel ? label : label && <span className=\"sr-only\">{label}</span>}\n      {children}\n      {icon && <Icon name={icon} width={iconWidth ?? '24px'} type={iconType} />}\n    </span>\n  );\n};\n"],"names":["ButtonContent","showLabel","label","children","icon","iconType","iconWidth","jsxs","jsx","Icon"],"mappings":";;;AAmBO,MAAMA,IAAuD,CAAC;AAAA,EACnE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAEI,gBAAAC,EAAC,QAAK,EAAA,WAAU,mDACb,UAAA;AAAA,EAAAN,IAAYC,IAAQA,KAAS,gBAAAM,EAAC,QAAK,EAAA,WAAU,WAAW,UAAMN,GAAA;AAAA,EAC9DC;AAAA,EACAC,uBAASK,GAAK,EAAA,MAAML,GAAM,OAAOE,KAAa,QAAQ,MAAMD,EAAU,CAAA;AACzE,EAAA,CAAA;"}

package/molecules/Buttons/InertButton.d.ts

@@ -1,3 +1,7 @@
 import type { FunctionComponent } from 'react';
 import { type CommonButtonProps } from './Button';
+/**
+ * @deprecated Use `FakeButton` instead.
+ * @param props
+ */
 export declare const InertButton: FunctionComponent<CommonButtonProps>;

package/molecules/Buttons/InertButton.js

@@ -1,35 +1,18 @@
-import { jsx as s } from "react/jsx-runtime";
-import { c as d } from "../../chunks/index.js";
-import "react";
-/* empty css                  */
-import { variants as x, rootClassName as h } from "./Button.helpers.js";
-import { themes as y } from "./Button.themes.js";
-import { ButtonContent as B } from "./ButtonContent.js";
-const g = ({
-  theme: e = "yellow",
-  backgroundOverride: r,
-  variant: t = "text",
-  className: m,
-  label: o,
-  children: n,
-  title: a,
-  icon: i,
-  dataTestId: p,
-  groupName: c = ""
-}) => {
-  const l = t === "text", f = x[t], u = y(e, r, c);
-  return /* @__PURE__ */ s(
-    "span",
-    {
-      "data-name": "InertButton",
-      "data-testid": p,
-      className: d(h, u, f, t, m),
-      title: a || o,
-      children: /* @__PURE__ */ s(B, { showLabel: l, label: o, icon: i, children: n })
-    }
-  );
+import { jsxs as e } from "react/jsx-runtime";
+import { BUTTON_THEME_LEGACY as n, BUTTON_VARIANT_LEGACY as o } from "./Button.js";
+import { FakeButton as m } from "./v2/FakeButton.js";
+const c = (t) => {
+  const r = {
+    ...t,
+    ...n[t.theme] || {},
+    ...o[t.variant] || {}
+  };
+  return /* @__PURE__ */ e(m, { ...r, children: [
+    r.label,
+    t.children
+  ] });
 };
 export {
-  g as InertButton
+  c as InertButton
 };
 //# sourceMappingURL=InertButton.js.map

package/molecules/Buttons/InertButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"InertButton.js","sources":["../../../lib/molecules/Buttons/InertButton.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport type { FunctionComponent } from 'react';\n\nimport { type CommonButtonProps } from './Button';\nimport { rootClassName, variants } from './Button.helpers';\nimport { themes } from './Button.themes';\nimport { ButtonContent } from './ButtonContent';\n\nexport const InertButton: FunctionComponent<CommonButtonProps> = ({\n  theme = 'yellow',\n  backgroundOverride,\n  variant = 'text',\n  className,\n  label,\n  children,\n  title,\n  icon,\n  dataTestId,\n  groupName = '',\n}) => {\n  const showLabel = variant === 'text';\n  const layout = variants[variant];\n  const style = themes(theme, backgroundOverride, groupName);\n\n  return (\n    <span\n      data-name=\"InertButton\"\n      data-testid={dataTestId}\n      className={classNames(rootClassName, style, layout, variant, className)}\n      title={title || label}\n    >\n      <ButtonContent showLabel={showLabel} label={label} icon={icon}>\n        {children}\n      </ButtonContent>\n    </span>\n  );\n};\n"],"names":["InertButton","theme","backgroundOverride","variant","className","label","children","title","icon","dataTestId","groupName","showLabel","layout","variants","style","themes","jsx","classNames","rootClassName","ButtonContent"],"mappings":";;;;;;;AAQO,MAAMA,IAAoD,CAAC;AAAA,EAChE,OAAAC,IAAQ;AAAA,EACR,oBAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAAM;AACJ,QAAMC,IAAYR,MAAY,QACxBS,IAASC,EAASV,CAAO,GACzBW,IAAQC,EAAOd,GAAOC,GAAoBQ,CAAS;AAGvD,SAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,eAAaP;AAAA,MACb,WAAWQ,EAAWC,GAAeJ,GAAOF,GAAQT,GAASC,CAAS;AAAA,MACtE,OAAOG,KAASF;AAAA,MAEhB,UAAC,gBAAAW,EAAAG,GAAA,EAAc,WAAAR,GAAsB,OAAAN,GAAc,MAAAG,GAChD,UAAAF,GACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"InertButton.js","sources":["../../../lib/molecules/Buttons/InertButton.tsx"],"sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { BUTTON_THEME_LEGACY, BUTTON_VARIANT_LEGACY, type CommonButtonProps } from './Button';\nimport { FakeButton } from '@/molecules/Buttons/v2/FakeButton';\n\n/**\n * @deprecated Use `FakeButton` instead.\n * @param props\n */\nexport const InertButton: FunctionComponent<CommonButtonProps> = (props) => {\n  const opts = {\n    ...props,\n    ...(BUTTON_THEME_LEGACY[props.theme!] || {}),\n    ...(BUTTON_VARIANT_LEGACY[props.variant!] || {}),\n  };\n\n  return (\n    <FakeButton {...opts}>\n      {opts.label}\n      {props.children}\n    </FakeButton>\n  );\n};\n"],"names":["InertButton","props","opts","BUTTON_THEME_LEGACY","BUTTON_VARIANT_LEGACY","jsxs","FakeButton"],"mappings":";;;AASa,MAAAA,IAAoD,CAACC,MAAU;AAC1E,QAAMC,IAAO;AAAA,IACX,GAAGD;AAAA,IACH,GAAIE,EAAoBF,EAAM,KAAM,KAAK,CAAC;AAAA,IAC1C,GAAIG,EAAsBH,EAAM,OAAQ,KAAK,CAAC;AAAA,EAAA;AAI9C,SAAA,gBAAAI,EAACC,GAAY,EAAA,GAAGJ,GACb,UAAA;AAAA,IAAKA,EAAA;AAAA,IACLD,EAAM;AAAA,EACT,EAAA,CAAA;AAEJ;"}

package/molecules/Buttons/v2/Button.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { type ButtonProps as Btn } from './Button.type';
+import './Button.css';
+export interface ButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'button'>, 'color'> {
+    /**
+     * @deprecated use `data-testid` instead
+     */
+    dataTestId?: string;
+}
+export declare const Button: FunctionComponent<ButtonProps>;

package/molecules/Buttons/v2/Button.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { c as p } from "../../../chunks/index.js";
+import { getButtonClasses as c } from "./Button.type.js";
+import { ButtonContent as d } from "../ButtonContent.js";
+/* empty css                     */
+const g = ({
+  className: o,
+  children: n,
+  color: s = "saffron",
+  icon: e,
+  iconWidth: m,
+  size: r = "medium",
+  theme: a = "solid",
+  variant: i = "pill",
+  dataTestId: u,
+  ...l
+}) => /* @__PURE__ */ t(
+  "button",
+  {
+    type: "button",
+    "data-testid": u,
+    ...l,
+    className: p(c({ color: s, size: r, theme: a, variant: i }), o),
+    "data-name": "Button",
+    children: /* @__PURE__ */ t(d, { icon: e, iconWidth: m, children: n })
+  }
+);
+export {
+  g as Button
+};
+//# sourceMappingURL=Button.js.map

package/molecules/Buttons/v2/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../lib/molecules/Buttons/v2/Button.tsx"],"sourcesContent":["'use client';\nimport classnames from 'classnames';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport { getButtonClasses, type ButtonProps as Btn } from './Button.type';\nimport { ButtonContent } from '../ButtonContent';\n\nimport './Button.css';\n\nexport interface ButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'button'>, 'color'> {\n  /**\n   * @deprecated use `data-testid` instead\n   */\n  dataTestId?: string;\n}\n\nexport const Button: FunctionComponent<ButtonProps> = ({\n  className,\n  children,\n  color = 'saffron',\n  icon,\n  iconWidth,\n  size = 'medium',\n  theme = 'solid',\n  variant = 'pill',\n  dataTestId,\n  ...attrs\n}) => {\n  return (\n    <button\n      type=\"button\"\n      data-testid={dataTestId}\n      {...attrs}\n      className={classnames(getButtonClasses({ color, size, theme, variant }), className)}\n      data-name=\"Button\"\n    >\n      <ButtonContent icon={icon} iconWidth={iconWidth}>\n        {children}\n      </ButtonContent>\n    </button>\n  );\n};\n"],"names":["Button","className","children","color","icon","iconWidth","size","theme","variant","dataTestId","attrs","jsx","classnames","getButtonClasses","ButtonContent"],"mappings":";;;;;;AAgBO,MAAMA,IAAyC,CAAC;AAAA,EACrD,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,YAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,eAAaF;AAAA,IACZ,GAAGC;AAAA,IACJ,WAAWE,EAAWC,EAAiB,EAAE,OAAAV,GAAO,MAAAG,GAAM,OAAAC,GAAO,SAAAC,GAAS,GAAGP,CAAS;AAAA,IAClF,aAAU;AAAA,IAEV,UAAC,gBAAAU,EAAAG,GAAA,EAAc,MAAAV,GAAY,WAAAC,GACxB,UAAAH,GACH;AAAA,EAAA;AAAA;"}

package/molecules/Buttons/v2/Button.type.d.ts

@@ -0,0 +1,54 @@
+import type { Colors } from '../../../types/Colors';
+import type { IconicNames, IconicTypes } from '../../../atoms/Icons';
+export interface ButtonProps {
+    color?: Colors;
+    /**
+     * Optional icon name
+     */
+    icon?: IconicNames;
+    /**
+     * Force the icon type to be svg, font or default
+     */
+    iconType?: IconicTypes;
+    iconWidth?: string;
+    size?: 'small' | 'medium' | 'large';
+    theme?: 'outline' | 'solid';
+    variant?: 'circle' | 'pill';
+}
+type Params = {
+    color: ButtonProps['color'];
+    size: ButtonProps['size'];
+    theme: ButtonProps['theme'];
+    variant: ButtonProps['variant'];
+};
+export declare const BUTTON_COLORS: {
+    readonly black: "button-black";
+    readonly green: "button-green";
+    readonly lavender: "button-lavender";
+    readonly lightSand: "button-lightSand";
+    readonly marygold: "button-marygold";
+    readonly orange: "button-orange";
+    readonly red: "button-red";
+    readonly saffron: "button-saffron";
+    readonly sand: "button-sand";
+    readonly sienna: "button-sienna";
+    readonly ultramarine: "button-ultramarine";
+    readonly verdigris: "button-verdigris";
+    readonly wave: "button-wave";
+    readonly white: "button-white";
+};
+export declare const BUTTON_THEMES: {
+    readonly outline: "button-outline";
+    readonly solid: "button-solid";
+};
+export declare const BUTTON_VARIANTS: {
+    readonly circle: "button-circle";
+    readonly pill: "button-pill";
+};
+export declare const BUTTON_SIZES: {
+    readonly small: "button-small";
+    readonly medium: "button-medium";
+    readonly large: "button-large";
+};
+export declare const getButtonClasses: ({ color, size, theme, variant }: Params) => string;
+export {};

package/molecules/Buttons/v2/Button.type.js

@@ -0,0 +1,42 @@
+import { c as r } from "../../../chunks/index.js";
+const u = {
+  black: "button-black",
+  green: "button-green",
+  lavender: "button-lavender",
+  lightSand: "button-lightSand",
+  marygold: "button-marygold",
+  orange: "button-orange",
+  red: "button-red",
+  saffron: "button-saffron",
+  sand: "button-sand",
+  sienna: "button-sienna",
+  ultramarine: "button-ultramarine",
+  verdigris: "button-verdigris",
+  wave: "button-wave",
+  white: "button-white"
+}, a = (t) => u[t || "saffron"], l = {
+  outline: "button-outline",
+  solid: "button-solid"
+}, s = (t) => l[t || "solid"], i = {
+  circle: "button-circle",
+  pill: "button-pill"
+}, b = (t) => i[t || "pill"], d = {
+  small: "button-small",
+  medium: "button-medium",
+  large: "button-large"
+}, c = (t) => d[t || "medium"], m = ({ color: t, size: n, theme: o, variant: e }) => r(
+  "flex",
+  "button",
+  s(o),
+  a(t),
+  b(e),
+  c(n)
+);
+export {
+  u as BUTTON_COLORS,
+  d as BUTTON_SIZES,
+  l as BUTTON_THEMES,
+  i as BUTTON_VARIANTS,
+  m as getButtonClasses
+};
+//# sourceMappingURL=Button.type.js.map

package/molecules/Buttons/v2/Button.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.type.js","sources":["../../../../lib/molecules/Buttons/v2/Button.type.ts"],"sourcesContent":["import classnames from 'classnames';\n\nimport type { Colors } from '@/types/Colors';\nimport type { IconicNames, IconicTypes } from '@/atoms/Icons';\n\nexport interface ButtonProps {\n  color?: Colors;\n  /**\n   * Optional icon name\n   */\n  icon?: IconicNames;\n  /**\n   * Force the icon type to be svg, font or default\n   */\n  iconType?: IconicTypes;\n  iconWidth?: string;\n  size?: 'small' | 'medium' | 'large';\n  theme?: 'outline' | 'solid';\n  variant?: 'circle' | 'pill';\n}\n\ntype Params = {\n  color: ButtonProps['color'];\n  size: ButtonProps['size'];\n  theme: ButtonProps['theme'];\n  variant: ButtonProps['variant'];\n};\n\nexport const BUTTON_COLORS = {\n  black: 'button-black',\n  green: 'button-green',\n  lavender: 'button-lavender',\n  lightSand: 'button-lightSand',\n  marygold: 'button-marygold',\n  orange: 'button-orange',\n  red: 'button-red',\n  saffron: 'button-saffron',\n  sand: 'button-sand',\n  sienna: 'button-sienna',\n  ultramarine: 'button-ultramarine',\n  verdigris: 'button-verdigris',\n  wave: 'button-wave',\n  white: 'button-white',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonColor = (color: ButtonProps['color']) => {\n  return BUTTON_COLORS[color || 'saffron'];\n};\n\nexport const BUTTON_THEMES = {\n  outline: 'button-outline',\n  solid: 'button-solid',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonTheme = (theme: ButtonProps['theme']) => {\n  return BUTTON_THEMES[theme || 'solid'];\n};\n\nexport const BUTTON_VARIANTS = {\n  circle: 'button-circle',\n  pill: 'button-pill',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonVariant = (variant: ButtonProps['variant']) => {\n  return BUTTON_VARIANTS[variant || 'pill'];\n};\n\nexport const BUTTON_SIZES = {\n  small: 'button-small',\n  medium: 'button-medium',\n  large: 'button-large',\n} as const satisfies Record<string, `button-${string}`>;\n\nconst getButtonSize = (size: ButtonProps['size']) => {\n  return BUTTON_SIZES[size || 'medium'];\n};\n\nexport const getButtonClasses = ({ color, size, theme, variant }: Params) => {\n  /* keep the \"flex\" class outside of \"button-*\" so that it can be overridden in responsive */\n  return classnames(\n    'flex',\n    'button',\n    getButtonTheme(theme),\n    getButtonColor(color),\n    getButtonVariant(variant),\n    getButtonSize(size),\n  );\n};\n"],"names":["BUTTON_COLORS","getButtonColor","color","BUTTON_THEMES","getButtonTheme","theme","BUTTON_VARIANTS","getButtonVariant","variant","BUTTON_SIZES","getButtonSize","size","getButtonClasses","classnames"],"mappings":";AA4BO,MAAMA,IAAgB;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,WAAW;AAAA,EACX,MAAM;AAAA,EACN,OAAO;AACT,GAEMC,IAAiB,CAACC,MACfF,EAAcE,KAAS,SAAS,GAG5BC,IAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AACT,GAEMC,IAAiB,CAACC,MACfF,EAAcE,KAAS,OAAO,GAG1BC,IAAkB;AAAA,EAC7B,QAAQ;AAAA,EACR,MAAM;AACR,GAEMC,IAAmB,CAACC,MACjBF,EAAgBE,KAAW,MAAM,GAG7BC,IAAe;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT,GAEMC,IAAgB,CAACC,MACdF,EAAaE,KAAQ,QAAQ,GAGzBC,IAAmB,CAAC,EAAE,OAAAV,GAAO,MAAAS,GAAM,OAAAN,GAAO,SAAAG,QAE9CK;AAAA,EACL;AAAA,EACA;AAAA,EACAT,EAAeC,CAAK;AAAA,EACpBJ,EAAeC,CAAK;AAAA,EACpBK,EAAiBC,CAAO;AAAA,EACxBE,EAAcC,CAAI;AAAA;"}

package/molecules/Buttons/v2/ButtonAnchor.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef, FunctionComponent, PropsWithChildren } from 'react';
+import { type ButtonProps } from './Button.type';
+import './Button.css';
+export interface ButtonAnchorProps extends ButtonProps, Omit<ComponentPropsWithoutRef<'a'>, 'color'> {
+    href: string;
+    /**
+     * @deprecated use `data-testid` instead
+     */
+    dataTestId?: string;
+    component?: FunctionComponent<PropsWithChildren<any>> | string;
+}
+export declare const ButtonAnchor: FunctionComponent<ButtonAnchorProps>;

package/molecules/Buttons/v2/ButtonAnchor.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { c as u } from "../../../chunks/index.js";
+import { getButtonClasses as d } from "./Button.type.js";
+import { ButtonContent as f } from "../ButtonContent.js";
+/* empty css                     */
+const j = ({
+  className: o,
+  children: m,
+  color: n = "saffron",
+  icon: r,
+  iconWidth: s,
+  size: a = "medium",
+  theme: e = "solid",
+  variant: i = "pill",
+  component: c = "a",
+  dataTestId: p,
+  ...l
+}) => /* @__PURE__ */ t(
+  c,
+  {
+    "data-testid": p,
+    ...l,
+    className: u(d({ color: n, size: a, theme: e, variant: i }), o),
+    "data-name": "ButtonAnchor",
+    children: /* @__PURE__ */ t(f, { icon: r, iconWidth: s, children: m })
+  }
+);
+export {
+  j as ButtonAnchor
+};
+//# sourceMappingURL=ButtonAnchor.js.map

package/molecules/Buttons/v2/ButtonAnchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAnchor.js","sources":["../../../../lib/molecules/Buttons/v2/ButtonAnchor.tsx"],"sourcesContent":["'use client';\n\nimport classnames from 'classnames';\nimport type { ComponentPropsWithoutRef, FunctionComponent, PropsWithChildren } from 'react';\n\nimport { getButtonClasses, type ButtonProps } from './Button.type';\nimport { ButtonContent } from '../ButtonContent';\n\nimport './Button.css';\n\nexport interface ButtonAnchorProps\n  extends ButtonProps,\n    Omit<ComponentPropsWithoutRef<'a'>, 'color'> {\n  href: string;\n  /**\n   * @deprecated use `data-testid` instead\n   */\n  dataTestId?: string;\n\n  component?: FunctionComponent<PropsWithChildren<any>> | string;\n}\n\nexport const ButtonAnchor: FunctionComponent<ButtonAnchorProps> = ({\n  className,\n  children,\n  color = 'saffron',\n  icon,\n  iconWidth,\n  size = 'medium',\n  theme = 'solid',\n  variant = 'pill',\n  component = 'a',\n  dataTestId,\n  ...attrs\n}) => {\n  const Cmp = component as FunctionComponent<PropsWithChildren<ButtonAnchorProps>>;\n  return (\n    <Cmp\n      data-testid={dataTestId}\n      {...attrs}\n      className={classnames(getButtonClasses({ color, size, theme, variant }), className)}\n      data-name=\"ButtonAnchor\"\n    >\n      <ButtonContent icon={icon} iconWidth={iconWidth}>\n        {children}\n      </ButtonContent>\n    </Cmp>\n  );\n};\n"],"names":["ButtonAnchor","className","children","color","icon","iconWidth","size","theme","variant","component","dataTestId","attrs","jsx","classnames","getButtonClasses","ButtonContent"],"mappings":";;;;;;AAsBO,MAAMA,IAAqD,CAAC;AAAA,EACjE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,YAAAC;AAAA,EACA,GAAGC;AACL,MAGI,gBAAAC;AAAA,EAFUH;AAAA,EAET;AAAA,IACC,eAAaC;AAAA,IACZ,GAAGC;AAAA,IACJ,WAAWE,EAAWC,EAAiB,EAAE,OAAAX,GAAO,MAAAG,GAAM,OAAAC,GAAO,SAAAC,GAAS,GAAGP,CAAS;AAAA,IAClF,aAAU;AAAA,IAEV,UAAC,gBAAAW,EAAAG,GAAA,EAAc,MAAAX,GAAY,WAAAC,GACxB,UAAAH,GACH;AAAA,EAAA;AAAA;"}

package/molecules/Buttons/v2/FakeButton.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef, FunctionComponent } from 'react';
+import { type ButtonProps } from './Button.type';
+import './Button.css';
+interface Props extends ButtonProps, Omit<ComponentPropsWithoutRef<'span'>, 'color'> {
+}
+export declare const FakeButton: FunctionComponent<Props>;
+export {};

package/molecules/Buttons/v2/FakeButton.js

@@ -0,0 +1,27 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as l } from "../../../chunks/index.js";
+import { getButtonClasses as f } from "./Button.type.js";
+import { ButtonContent as c } from "../ButtonContent.js";
+/* empty css                     */
+const g = ({
+  className: t,
+  children: r,
+  color: s = "saffron",
+  icon: m,
+  iconWidth: n,
+  size: e = "medium",
+  theme: a = "solid",
+  variant: i = "pill",
+  ...p
+}) => /* @__PURE__ */ o(
+  "span",
+  {
+    ...p,
+    className: l(f({ color: s, size: e, theme: a, variant: i }), t),
+    children: /* @__PURE__ */ o(c, { icon: m, iconWidth: n, children: r })
+  }
+);
+export {
+  g as FakeButton
+};
+//# sourceMappingURL=FakeButton.js.map

package/molecules/Buttons/v2/FakeButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FakeButton.js","sources":["../../../../lib/molecules/Buttons/v2/FakeButton.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport type { ComponentPropsWithoutRef, FunctionComponent } from 'react';\n\nimport { getButtonClasses, type ButtonProps } from './Button.type';\n\nimport { ButtonContent } from '../ButtonContent';\n\nimport './Button.css';\n\ninterface Props extends ButtonProps, Omit<ComponentPropsWithoutRef<'span'>, 'color'> {}\n\nexport const FakeButton: FunctionComponent<Props> = ({\n  className,\n  children,\n  color = 'saffron',\n  icon,\n  iconWidth,\n  size = 'medium',\n  theme = 'solid',\n  variant = 'pill',\n  ...attrs\n}) => {\n  return (\n    <span\n      {...attrs}\n      className={classnames(getButtonClasses({ color, size, theme, variant }), className)}\n    >\n      <ButtonContent icon={icon} iconWidth={iconWidth}>\n        {children}\n      </ButtonContent>\n    </span>\n  );\n};\n"],"names":["FakeButton","className","children","color","icon","iconWidth","size","theme","variant","attrs","jsx","classnames","getButtonClasses","ButtonContent"],"mappings":";;;;;AAWO,MAAMA,IAAuC,CAAC;AAAA,EACnD,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACE,GAAGD;AAAA,IACJ,WAAWE,EAAWC,EAAiB,EAAE,OAAAT,GAAO,MAAAG,GAAM,OAAAC,GAAO,SAAAC,GAAS,GAAGP,CAAS;AAAA,IAElF,UAAC,gBAAAS,EAAAG,GAAA,EAAc,MAAAT,GAAY,WAAAC,GACxB,UAAAH,GACH;AAAA,EAAA;AAAA;"}

package/molecules/Forms/NumberField.d.ts

@@ -21,13 +21,16 @@ export declare function useNumberField(props: NumberFieldProps): {
     errorMessage?: string | undefined;
     children?: import("react").ReactNode;
     defaultValue?: string | number | readonly string[] | undefined;
+    color?: string | undefined;
+    size?: number | undefined;
     className?: string | undefined;
     width?: string | number | undefined;
     type?: import("react").HTMLInputTypeAttribute | undefined;
-    onClick?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLLabelElement>) | undefined;
-    tabIndex?: number | undefined;
-    title?: string | undefined;
     form?: string | undefined;
+    slot?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+    title?: string | undefined;
+    pattern?: string | undefined;
     formAction?: string | undefined;
     formEncType?: string | undefined;
     formMethod?: string | undefined;
@@ -45,9 +48,8 @@ export declare function useNumberField(props: NumberFieldProps): {
     hidden?: boolean | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
-    slot?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
@@ -65,7 +67,6 @@ export declare function useNumberField(props: NumberFieldProps): {
     autoCapitalize?: string | undefined;
     autoCorrect?: string | undefined;
     autoSave?: string | undefined;
-    color?: string | undefined;
     itemProp?: string | undefined;
     itemScope?: boolean | undefined;
     itemType?: string | undefined;
@@ -78,7 +79,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "list" | "both" | "inline" | undefined;
+    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -88,17 +89,17 @@ export declare function useNumberField(props: NumberFieldProps): {
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "true" | "false" | "time" | "page" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -115,7 +116,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
@@ -217,6 +218,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     onWaitingCapture?: (import("react").ReactEventHandler<HTMLInputElement> & import("react").ReactEventHandler<HTMLLabelElement>) | undefined;
     onAuxClick?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLLabelElement>) | undefined;
     onAuxClickCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLLabelElement>) | undefined;
+    onClick?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLLabelElement>) | undefined;
     onClickCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLLabelElement>) | undefined;
     onContextMenu?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLLabelElement>) | undefined;
     onContextMenuCapture?: (import("react").MouseEventHandler<HTMLInputElement> & import("react").MouseEventHandler<HTMLLabelElement>) | undefined;
@@ -293,25 +295,23 @@ export declare function useNumberField(props: NumberFieldProps): {
     onTransitionEnd?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLLabelElement>) | undefined;
     onTransitionEndCapture?: (import("react").TransitionEventHandler<HTMLInputElement> & import("react").TransitionEventHandler<HTMLLabelElement>) | undefined;
     list?: string | undefined;
-    pattern?: string | undefined;
+    step?: string | number | undefined;
     alt?: string | undefined;
     src?: string | undefined;
     height?: string | number | undefined;
     layout?: "horizontal" | "vertical" | undefined;
-    size?: number | undefined;
     multiple?: boolean | undefined;
     htmlFor?: string | undefined;
     autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
     accept?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     checked?: boolean | undefined;
-    enterKeyHint?: "search" | "next" | "enter" | "previous" | "done" | "go" | "send" | undefined;
+    enterKeyHint?: "search" | "next" | "previous" | "enter" | "done" | "go" | "send" | undefined;
     maxLength?: number | undefined;
     minLength?: number | undefined;
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
-    step?: string | number | undefined;
     description?: string | undefined;
     hideRequiredStar?: boolean | undefined;
 };