@clubmed/trident-ui 1.3.0-beta.7 → 1.3.0-beta.9

package/molecules/Buttons/v2/Button.js

@@ -1,32 +1,57 @@
 "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",
+import { jsx as n } from "react/jsx-runtime";
+import { c as l } from "../../../chunks/index.js";
+import { getButtonClasses as B } from "./Button.type.js";
+import { ButtonContent as c } from "../ButtonContent.js";
+function p({ component: t, disabled: r, ...a }) {
+  return t === "a" || "href" in a || typeof t == "object" ? {
+    attrs: {
+      "data-name": "ButtonAnchor",
+      "aria-disabled": r ? "true" : void 0,
+      ...a
+    },
+    Cmp: "a"
+  } : t === "span" || t === "div" ? {
+    attrs: {
+      "data-name": "FakeButton",
+      "aria-disabled": r ? "true" : void 0,
+      ...a
+    },
+    Cmp: "span"
+  } : {
+    attrs: {
+      "data-name": "Button",
+      type: "button",
+      disabled: r,
+      ...a
+    },
+    Cmp: "button"
+  };
+}
+const C = ({
+  className: t,
+  children: r,
+  color: a = "saffron",
   icon: e,
-  iconWidth: m,
-  size: r = "medium",
-  theme: a = "solid",
+  iconWidth: o,
+  size: s = "medium",
+  theme: u = "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 })
-  }
-);
+  ...m
+}) => {
+  const { Cmp: f, attrs: d } = p(m);
+  return /* @__PURE__ */ n(
+    f,
+    {
+      ...d,
+      className: l(B({ color: a, size: s, theme: u, variant: i }), t),
+      children: /* @__PURE__ */ n(c, { icon: e, iconWidth: o, children: r })
+    }
+  );
+};
+C.displayName = "Button";
 export {
-  g as Button
+  C as Button,
+  p as useButton
 };
 //# sourceMappingURL=Button.js.map

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

@@ -1 +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,UAAA,gBAAAU,EAACG,GAAA,EAAc,MAAAV,GAAY,WAAAC,GACxB,UAAAH,EAAA,CACH;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Button.js","sources":["../../../../lib/molecules/Buttons/v2/Button.tsx"],"sourcesContent":["'use client';\nimport classnames from 'classnames';\nimport type {\n  ComponentPropsWithoutRef,\n  FunctionComponent,\n  PropsWithChildren,\n  ReactElement,\n  ReactPortal,\n} from 'react';\n\nimport { type ButtonProps as Btn, getButtonClasses } from './Button.type';\nimport { ButtonContent } from '../ButtonContent';\n\nimport './Button.css';\n\nexport interface ButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'button'>, 'color'> {\n  component?: 'button';\n}\n\nexport interface ButtonAnchorProps extends Btn, Omit<ComponentPropsWithoutRef<'a'>, 'color'> {\n  component: 'a';\n  disabled?: boolean;\n}\n\nexport interface FakeButtonProps extends Btn, Omit<ComponentPropsWithoutRef<'span'>, 'color'> {\n  component: 'span' | 'div';\n  disabled?: boolean;\n}\n// For Button with React Router Link or similar components\nexport interface ReactButtonProps\n  extends Btn,\n    Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'color'> {\n  component: ReactElement | ReactPortal;\n  disabled?: boolean;\n}\n\ntype AnyButtonProps = ButtonProps | ButtonAnchorProps | FakeButtonProps | ReactButtonProps;\n\nexport function useButton({ component, disabled, ...props }: AnyButtonProps) {\n  if (component === 'a' || 'href' in props || typeof component === 'object') {\n    return {\n      attrs: {\n        'data-name': 'ButtonAnchor',\n        'aria-disabled': disabled ? 'true' : undefined,\n        ...props,\n      },\n      Cmp: 'a' as unknown as FunctionComponent<PropsWithChildren<any>>,\n    };\n  }\n\n  if (component === 'span' || component === 'div') {\n    return {\n      attrs: {\n        'data-name': 'FakeButton',\n        'aria-disabled': disabled ? 'true' : undefined,\n        ...props,\n      },\n      Cmp: 'span' as unknown as FunctionComponent<PropsWithChildren<any>>,\n    };\n  }\n\n  return {\n    attrs: {\n      'data-name': 'Button',\n      type: 'button',\n      disabled,\n      ...props,\n    },\n    Cmp: 'button' as unknown as FunctionComponent<PropsWithChildren<any>>,\n  };\n}\n\n// Main Button component that handles both button and anchor functionality\nexport const Button: FunctionComponent<AnyButtonProps> = ({\n  className,\n  children,\n  color = 'saffron',\n  icon,\n  iconWidth,\n  size = 'medium',\n  theme = 'solid',\n  variant = 'pill',\n  ...props\n}) => {\n  const { Cmp, attrs } = useButton(props);\n\n  return (\n    <Cmp\n      {...attrs}\n      className={classnames(getButtonClasses({ color, size, theme, variant }), className)}\n    >\n      <ButtonContent icon={icon} iconWidth={iconWidth}>\n        {children}\n      </ButtonContent>\n    </Cmp>\n  );\n};\n\nButton.displayName = 'Button';\n"],"names":["useButton","component","disabled","props","Button","className","children","color","icon","iconWidth","size","theme","variant","Cmp","attrs","jsx","classnames","getButtonClasses","ButtonContent"],"mappings":";;;;;AAsCO,SAASA,EAAU,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,KAAyB;AAC3E,SAAIF,MAAc,OAAO,UAAUE,KAAS,OAAOF,KAAc,WACxD;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,iBAAiBC,IAAW,SAAS;AAAA,MACrC,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA,IAILF,MAAc,UAAUA,MAAc,QACjC;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,iBAAiBC,IAAW,SAAS;AAAA,MACrC,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA,IAIF;AAAA,IACL,OAAO;AAAA,MACL,aAAa;AAAA,MACb,MAAM;AAAA,MACN,UAAAD;AAAA,MACA,GAAGC;AAAA,IAAA;AAAA,IAEL,KAAK;AAAA,EAAA;AAET;AAGO,MAAMC,IAA4C,CAAC;AAAA,EACxD,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,GAAGT;AACL,MAAM;AACJ,QAAM,EAAE,KAAAU,GAAK,OAAAC,MAAUd,EAAUG,CAAK;AAEtC,SACE,gBAAAY;AAAA,IAACF;AAAA,IAAA;AAAA,MACE,GAAGC;AAAA,MACJ,WAAWE,EAAWC,EAAiB,EAAE,OAAAV,GAAO,MAAAG,GAAM,OAAAC,GAAO,SAAAC,GAAS,GAAGP,CAAS;AAAA,MAElF,UAAA,gBAAAU,EAACG,GAAA,EAAc,MAAAV,GAAY,WAAAC,GACxB,UAAAH,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAF,EAAO,cAAc;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.3.0-beta.7",
+  "version": "1.3.0-beta.9",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -51,16 +51,16 @@
       "import": "./molecules/Forms/Checkboxes/index.js",
       "default": "./molecules/Forms/Checkboxes/index.js"
     },
-    "./molecules/Forms/Radios": {
-      "types": "./molecules/Forms/Radios/index.d.ts",
-      "import": "./molecules/Forms/Radios/index.js",
-      "default": "./molecules/Forms/Radios/index.js"
-    },
     "./molecules/Forms/Password": {
       "types": "./molecules/Forms/Password/index.d.ts",
       "import": "./molecules/Forms/Password/index.js",
       "default": "./molecules/Forms/Password/index.js"
     },
+    "./molecules/Forms/Radios": {
+      "types": "./molecules/Forms/Radios/index.d.ts",
+      "import": "./molecules/Forms/Radios/index.js",
+      "default": "./molecules/Forms/Radios/index.js"
+    },
     "./fonts/*": "./fonts/*",
     "./atoms/*": {
       "types": "./atoms/*.d.ts",
@@ -102,9 +102,7 @@
     "build:exports": "NODE_NO_WARNINGS=1 node --loader ts-node/esm tools/exports-builder/index.ts"
   },
   "dependencies": {
-    "@clubmed/trident-icons": ">=1.0.1",
     "@juggle/resize-observer": "^3.4.0",
-    "@react-spring/web": "^9.7.3",
     "@use-gesture/react": "^10.2.26",
     "@whitespace/storybook-addon-html": "6.0.5",
     "build": "^0.1.4",
@@ -118,6 +116,8 @@
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
+    "@react-spring/web": "^9.7.3",
+    "@clubmed/trident-icons": ">=1.0.1",
     "@commitlint/cli": "18.6.1",
     "@commitlint/config-conventional": "18.6.2",
     "@netsells/storybook-mockdate": "^0.3.2",
@@ -181,7 +181,26 @@
   "peerDependencies": {
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2",
-    "tailwindcss": ">=3.3.5"
+    "tailwindcss": ">=3.3.5",
+    "@clubmed/trident-icons": ">=1.0.1",
+    "@react-spring/web": ">=9"
+  },
+  "peerDependenciesMeta": {
+    "@clubmed/trident-icons": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    },
+    "react-dom": {
+      "optional": false
+    },
+    "tailwindcss": {
+      "optional": false
+    },
+    "@react-spring/web": {
+      "optional": false
+    }
   },
   "sideEffects": [
     "**/*.css"

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

@@ -1,12 +0,0 @@
-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

@@ -1,32 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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,UAAA,gBAAAW,EAACG,GAAA,EAAc,MAAAX,GAAY,WAAAC,GACxB,UAAAH,EAAA,CACH;AAAA,EAAA;AAAA;"}