@clubmed/trident-ui 1.0.0-beta.5 → 1.0.0-beta.6

package/fonts/Utilities/tui-utilities.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717405081142'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717405081142#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717405081142") format("woff2"),
+  url("tui-utilities.woff?t=1717405081142") format("woff"),
+  url('tui-utilities.ttf?t=1717405081142') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717405081142#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717405081142'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717405081142#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717405081142") format("woff2"),
+  url("tui-utilities.woff?t=1717405081142") format("woff"),
+  url('tui-utilities.ttf?t=1717405081142') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717405081142#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.module.less

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717405081142'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717405081142#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717405081142") format("woff2"),
+  url("tui-utilities.woff?t=1717405081142") format("woff"),
+  url('tui-utilities.ttf?t=1717405081142') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717405081142#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.scss

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717405081142'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717405081142#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717405081142") format("woff2"),
+  url("tui-utilities.woff?t=1717405081142") format("woff"),
+  url('tui-utilities.ttf?t=1717405081142') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717405081142#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/fonts/Utilities/tui-utilities.styl

@@ -1,10 +1,10 @@
 @font-face {font-family: "tui-utilities";
-  src: url('tui-utilities.eot?t=1717077244183'); /* IE9*/
-  src: url('tui-utilities.eot?t=1717077244183#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url("tui-utilities.woff2?t=1717077244183") format("woff2"),
-  url("tui-utilities.woff?t=1717077244183") format("woff"),
-  url('tui-utilities.ttf?t=1717077244183') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('tui-utilities.svg?t=1717077244183#tui-utilities') format('svg'); /* iOS 4.1- */
+  src: url('tui-utilities.eot?t=1717405081142'); /* IE9*/
+  src: url('tui-utilities.eot?t=1717405081142#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url("tui-utilities.woff2?t=1717405081142") format("woff2"),
+  url("tui-utilities.woff?t=1717405081142") format("woff"),
+  url('tui-utilities.ttf?t=1717405081142') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('tui-utilities.svg?t=1717405081142#tui-utilities') format('svg'); /* iOS 4.1- */
 }
 
 [class^="tui-utilities-"], [class*=" tui-utilities-"] {

package/molecules/Forms/FormLabel.js

@@ -20,7 +20,7 @@ const c = {
     "data-name": "InputLabel",
     children: [
       l || t,
-      e && /* @__PURE__ */ m("span", { className: "text-b4 text-middleGrey inline-block font-normal", children: e })
+      e && /* @__PURE__ */ m("span", { className: "text-b4 text-grey inline-block font-normal", children: e })
     ]
   }
 );

package/molecules/Forms/Select.d.ts

@@ -0,0 +1,10 @@
+import { FormControlProps } from './FormControl.js';
+import { IconicTypes } from '../../atoms/Icons';
+import { SelectHTMLAttributes } from 'react';
+export interface SelectProps<Value> extends FormControlProps<Value, SelectHTMLAttributes<HTMLSelectElement>> {
+    description?: string;
+    iconType?: IconicTypes;
+    errorMessage?: string;
+    dataTestId?: string;
+}
+export declare const Select: <Value = string>(props: SelectProps<Value>) => import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/Select.js

@@ -0,0 +1,99 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { c as l } from "../../index-Cu0xwYjD.js";
+import { useValue as C } from "../../hooks/useValue.js";
+import { useInternalStatus as D } from "../../hooks/useInternalStatus.js";
+import { FormControl as I } from "./FormControl.js";
+import { Icon as n } from "../../atoms/Icons/Icon.js";
+import "../../atoms/Icons/contexts/IconsContext.js";
+import { useId as S } from "react";
+const $ = (c) => {
+  const p = S(), {
+    id: r = `select-${p}`,
+    name: a = r,
+    label: u,
+    value: m,
+    description: b,
+    validationStatus: o = "default",
+    iconType: i,
+    errorMessage: x,
+    disabled: s = !1,
+    className: f,
+    dataTestId: g = r,
+    onChange: h,
+    children: v,
+    ...y
+  } = c, { value: w, setValue: N } = C({ name: a, initialValue: m, onChange: h }), e = D({
+    isDisabled: s,
+    validationStatus: o
+  });
+  return /* @__PURE__ */ t(
+    I,
+    {
+      id: r,
+      label: u,
+      description: b,
+      dataName: "TextField",
+      dataTestId: g,
+      disabled: s,
+      validationStatus: o,
+      errorMessage: x,
+      children: /* @__PURE__ */ d(
+        "div",
+        {
+          className: l("relative rounded-pill z-0", {
+            "bg-white": e !== "disabled",
+            "bg-pearl": e === "disabled"
+          }),
+          children: [
+            /* @__PURE__ */ t(
+              "select",
+              {
+                ...y,
+                id: r,
+                name: a,
+                disabled: s,
+                value: w,
+                onChange: (k) => N(k.target.value),
+                className: l(
+                  "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none appearance-none bg-transparent",
+                  {
+                    "border-lightGrey focus:border-black active:border-black pe-[52px]": e === "default",
+                    "pe-[84px]": e === "error" || e === "success",
+                    "text-black": e !== "disabled",
+                    "text-grey": e === "disabled",
+                    "border-red": e === "error",
+                    "border-green": e === "success"
+                  },
+                  f
+                ),
+                "aria-label": a,
+                children: v
+              }
+            ),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: l(
+                  "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12 -z-1",
+                  {
+                    "text-grey": e === "disabled",
+                    "text-red": e === "error",
+                    "text-green": e === "success"
+                  }
+                ),
+                children: /* @__PURE__ */ d("span", { className: "ms-auto flex gap-x-8", children: [
+                  e === "error" && /* @__PURE__ */ t(n, { name: "CrossDefault", width: "24px", type: i }),
+                  e === "success" && /* @__PURE__ */ t(n, { name: "CheckDefault", width: "24px", type: i }),
+                  /* @__PURE__ */ t("button", { className: "pointer-events-auto inline-flex", children: /* @__PURE__ */ t(n, { name: "ArrowDefaultDown", type: "svg", width: "24px", color: "black" }) })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  $ as Select
+};

package/molecules/Forms/TextField.d.ts

@@ -5,7 +5,6 @@ export interface TextFieldProps<Value> extends FormControlProps<Value> {
      * Description text
      */
     description?: string;
-    hasDropdown?: boolean;
     icon?: IconicNames;
     iconType?: IconicTypes;
     errorMessage?: string;

package/molecules/Forms/TextField.js

@@ -1,60 +1,58 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
-import { c as p } from "../../index-Cu0xwYjD.js";
-import { useValue as C } from "../../hooks/useValue.js";
-import { useInternalStatus as I } from "../../hooks/useInternalStatus.js";
-import { FormControl as T } from "./FormControl.js";
-import { Icon as r } from "../../atoms/Icons/Icon.js";
+import { jsx as t, jsxs as o } from "react/jsx-runtime";
+import { c } from "../../index-Cu0xwYjD.js";
+import { useValue as I } from "../../hooks/useValue.js";
+import { useInternalStatus as T } from "../../hooks/useInternalStatus.js";
+import { FormControl as k } from "./FormControl.js";
+import { Icon as i } from "../../atoms/Icons/Icon.js";
 import "../../atoms/Icons/contexts/IconsContext.js";
 import { useId as F } from "react";
-const B = (u) => {
-  const m = F(), {
-    id: a = m,
-    name: s = a,
-    label: x,
-    value: b,
-    description: f,
-    validationStatus: c = "default",
-    hasDropdown: o = !1,
-    icon: l,
-    iconType: n,
-    errorMessage: h,
-    disabled: i = !1,
+const A = (m) => {
+  const p = F(), {
+    id: r = p,
+    name: a = r,
+    label: u,
+    value: x,
+    description: b,
+    validationStatus: n = "default",
+    icon: s,
+    iconType: d,
+    errorMessage: f,
+    disabled: l = !1,
     className: g,
-    dataTestId: v = "TextField",
-    onChange: w,
+    dataTestId: h = "TextField",
+    onChange: v,
     ...y
-  } = u, { value: N, setValue: D } = C({ name: s, initialValue: b, onChange: w }), e = I({
-    isDisabled: i,
-    validationStatus: c
+  } = m, { value: w, setValue: N } = I({ name: a, initialValue: x, onChange: v }), e = T({
+    isDisabled: l,
+    validationStatus: n
   });
   return /* @__PURE__ */ t(
-    T,
+    k,
     {
-      id: a,
-      label: x,
-      description: f,
+      id: r,
+      label: u,
+      description: b,
       dataName: "TextField",
-      dataTestId: v,
-      disabled: i,
-      validationStatus: c,
-      errorMessage: h,
-      children: /* @__PURE__ */ d("div", { className: "relative", children: [
+      dataTestId: h,
+      disabled: l,
+      validationStatus: n,
+      errorMessage: f,
+      children: /* @__PURE__ */ o("div", { className: "relative", children: [
         /* @__PURE__ */ t(
           "input",
           {
             ...y,
-            id: a,
-            name: s,
-            disabled: i,
-            value: N,
-            onChange: (k) => D(k.target.value),
-            className: p(
+            id: r,
+            name: a,
+            disabled: l,
+            value: w,
+            onChange: (C) => N(C.target.value),
+            className: c(
               "text-b3 rounded-pill w-full border px-20 py-12 font-normal outline-none",
               {
                 "border-lightGrey focus:border-black active:border-black": e === "default",
-                "ps-[52px]": l,
-                "pe-[52px]": o || e === "error" || e === "success",
-                "pe-[84px]": o && (e === "error" || e === "success"),
+                "ps-[52px]": s,
+                "pe-[52px]": e === "error" || e === "success",
                 "bg-white text-black": e !== "disabled",
                 "bg-pearl text-grey": e === "disabled",
                 "border-red": e === "error",
@@ -62,13 +60,13 @@ const B = (u) => {
               },
               g
             ),
-            "aria-label": s
+            "aria-label": a
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: p(
+            className: c(
               "pointer-events-none absolute inset-0 flex items-center justify-between px-20 py-12",
               {
                 "text-grey": e === "disabled",
@@ -77,11 +75,10 @@ const B = (u) => {
               }
             ),
             children: [
-              l && /* @__PURE__ */ t(r, { name: l, width: "24px" }),
-              /* @__PURE__ */ d("span", { className: "ms-auto flex gap-x-8", children: [
-                e === "error" && /* @__PURE__ */ t(r, { name: "CrossDefault", width: "24px", type: n }),
-                e === "success" && /* @__PURE__ */ t(r, { name: "CheckDefault", width: "24px", type: n }),
-                o && /* @__PURE__ */ t("button", { className: "pointer-events-auto", children: /* @__PURE__ */ t(r, { name: "ArrowDefaultDown", width: "24px", color: "black", type: n }) })
+              s && /* @__PURE__ */ t(i, { name: s, width: "24px" }),
+              /* @__PURE__ */ o("span", { className: "ms-auto flex gap-x-8", children: [
+                e === "error" && /* @__PURE__ */ t(i, { name: "CrossDefault", width: "24px", type: d }),
+                e === "success" && /* @__PURE__ */ t(i, { name: "CheckDefault", width: "24px", type: d })
               ] })
             ]
           }
@@ -91,5 +88,5 @@ const B = (u) => {
   );
 };
 export {
-  B as TextField
+  A as TextField
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.6",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [

package/styles/globals.css

@@ -84,6 +84,10 @@
     appearance: none;
   }
 
+  select:invalid {
+    @apply text-middleGrey;
+  }
+
   .date-field {
     @apply appearance-none;
   }