@clubmed/trident-ui 2.0.0-beta.42 → 2.0.0-beta.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/ui/forms/Filter.d.ts +2 -1
- package/ui/forms/Filter.js +4 -3
- package/ui/forms/Filter.js.map +1 -1
- package/ui/forms/Switch.d.ts +3 -2
- package/ui/forms/Switch.js +10 -9
- package/ui/forms/Switch.js.map +1 -1
- package/ui/forms/checkboxes/Checkbox.d.ts +2 -1
- package/ui/forms/checkboxes/Checkbox.js +12 -11
- package/ui/forms/checkboxes/Checkbox.js.map +1 -1
package/package.json
CHANGED
package/ui/forms/Filter.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {
|
|
2
|
+
export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {
|
|
3
3
|
/**
|
|
4
4
|
* Is it attached to a dropdown?
|
|
5
5
|
*/
|
|
@@ -9,6 +9,7 @@ export interface FilterProps extends Omit<ComponentPropsWithoutRef<'input'>, 'si
|
|
|
9
9
|
*/
|
|
10
10
|
dataTestId?: string;
|
|
11
11
|
'data-testid'?: string;
|
|
12
|
+
value?: string | number | boolean;
|
|
12
13
|
onChange?: (event: Event, value: boolean) => void;
|
|
13
14
|
}
|
|
14
15
|
export declare function Filter(props: FilterProps): import("react/jsx-runtime").JSX.Element;
|
package/ui/forms/Filter.js
CHANGED
|
@@ -4,20 +4,21 @@ import { Icon as n } from "@clubmed/trident-icons";
|
|
|
4
4
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
5
5
|
//#region lib/ui/forms/Filter.tsx
|
|
6
6
|
function a(a) {
|
|
7
|
-
let o = t(), { id: s = o, name: c = s, className: l, dataTestId: u, disabled: d = !1, "data-testid": f, tabIndex: p = 0, hasDropdown: m, onChange: h,
|
|
7
|
+
let o = t(), { id: s = o, name: c = s, className: l, dataTestId: u, disabled: d = !1, "data-testid": f, tabIndex: p = 0, hasDropdown: m, onChange: h, value: g, children: _, ...v } = a;
|
|
8
8
|
return /* @__PURE__ */ r("div", {
|
|
9
9
|
className: e(l, "relative"),
|
|
10
10
|
children: /* @__PURE__ */ i("label", {
|
|
11
11
|
"data-testid": `filter-container-${s}`,
|
|
12
12
|
className: "relative",
|
|
13
13
|
children: [/* @__PURE__ */ r("input", {
|
|
14
|
-
...
|
|
14
|
+
...v,
|
|
15
15
|
id: s,
|
|
16
16
|
name: c,
|
|
17
17
|
"data-testid": f ?? u,
|
|
18
18
|
type: "checkbox",
|
|
19
19
|
tabIndex: p,
|
|
20
20
|
"data-name": "Filter",
|
|
21
|
+
value: typeof g == "boolean" ? String(g) : g,
|
|
21
22
|
disabled: d,
|
|
22
23
|
onChange: (e) => {
|
|
23
24
|
h?.(e.nativeEvent, e.target.checked);
|
|
@@ -25,7 +26,7 @@ function a(a) {
|
|
|
25
26
|
}), /* @__PURE__ */ i("span", { children: [
|
|
26
27
|
/* @__PURE__ */ r("span", {
|
|
27
28
|
className: "font-semibold",
|
|
28
|
-
children:
|
|
29
|
+
children: _
|
|
29
30
|
}),
|
|
30
31
|
/* @__PURE__ */ r(n, {
|
|
31
32
|
className: "check",
|
package/ui/forms/Filter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface FilterProps
|
|
1
|
+
{"version":3,"file":"Filter.js","names":[],"sources":["../../../lib/ui/forms/Filter.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\n\nexport interface FilterProps\n extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {\n /**\n * Is it attached to a dropdown?\n */\n hasDropdown?: boolean;\n /**\n * @deprecated use [\"data-testid\"] instead\n */\n dataTestId?: string;\n 'data-testid'?: string;\n value?: string | number | boolean;\n onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Filter(props: FilterProps) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled = false,\n 'data-testid': dataTestIdProp,\n tabIndex = 0,\n hasDropdown,\n onChange,\n value,\n children,\n ...rest\n } = props;\n\n return (\n <div className={clsx(className, 'relative')}>\n <label data-testid={`filter-container-${id}`} className=\"relative\">\n <input\n {...rest}\n id={id}\n name={name}\n data-testid={dataTestIdProp ?? dataTestId}\n type=\"checkbox\"\n tabIndex={tabIndex}\n data-name=\"Filter\"\n value={typeof value === 'boolean' ? String(value) : value}\n disabled={disabled}\n onChange={(e) => {\n onChange?.(e.nativeEvent, e.target.checked);\n }}\n />\n <span>\n <span className=\"font-semibold\">{children}</span>\n\n <Icon className=\"check\" width={null} name=\"CheckDefault\" color=\"black\" />\n\n {hasDropdown && (\n <Icon name=\"ArrowDefaultDown\" className=\"ml-8\" width=\"24px\" color=\"black\" />\n )}\n </span>\n </label>\n </div>\n );\n}\n"],"mappings":";;;;;AAmBA,SAAgB,EAAO,GAAoB;CACzC,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,eACA,cAAW,IACX,eAAe,GACf,cAAW,GACX,gBACA,aACA,UACA,aACA,GAAG,MACD;AAEJ,QACE,kBAAC,OAAD;EAAK,WAAW,EAAK,GAAW,WAAW;YACzC,kBAAC,SAAD;GAAO,eAAa,oBAAoB;GAAM,WAAU;aAAxD,CACE,kBAAC,SAAD;IACE,GAAI;IACA;IACE;IACN,eAAa,KAAkB;IAC/B,MAAK;IACK;IACV,aAAU;IACV,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;IAC1C;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA,EACF,kBAAC,QAAD,EAAA,UAAA;IACE,kBAAC,QAAD;KAAM,WAAU;KAAiB;KAAgB,CAAA;IAEjD,kBAAC,GAAD;KAAM,WAAU;KAAQ,OAAO;KAAM,MAAK;KAAe,OAAM;KAAU,CAAA;IAExE,KACC,kBAAC,GAAD;KAAM,MAAK;KAAmB,WAAU;KAAO,OAAM;KAAO,OAAM;KAAU,CAAA;IAEzE,EAAA,CAAA,CACD;;EACJ,CAAA"}
|
package/ui/forms/Switch.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import { Colors } from '../types/Colors';
|
|
3
|
-
export interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'defaultChecked' | 'onChange'> {
|
|
3
|
+
export interface SwitchProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'defaultChecked' | 'onChange' | 'value'> {
|
|
4
4
|
checked: boolean;
|
|
5
5
|
color?: Colors;
|
|
6
|
+
value?: string | number | boolean;
|
|
6
7
|
onChange?: (event: Event, value: boolean) => void;
|
|
7
8
|
}
|
|
8
|
-
export declare function Switch({ id, name, checked, className, color, onChange, disabled, tabIndex, children, role, ...attrs }: SwitchProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function Switch({ id, name, checked, className, color, onChange, disabled, tabIndex, children, role, value, ...attrs }: SwitchProps): import("react/jsx-runtime").JSX.Element;
|
package/ui/forms/Switch.js
CHANGED
|
@@ -4,26 +4,27 @@ import { getBgColor as t } from "../helpers/colors/colors.js";
|
|
|
4
4
|
import { useId as n } from "react";
|
|
5
5
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
6
|
//#region lib/ui/forms/Switch.tsx
|
|
7
|
-
function a({ id: a, name: o, checked: s, className: c, color: l = "saffron", onChange: u, disabled: d = !1, tabIndex: f = 0, children: p, role: m = "switch",
|
|
8
|
-
let
|
|
9
|
-
"gap-4":
|
|
7
|
+
function a({ id: a, name: o, checked: s, className: c, color: l = "saffron", onChange: u, disabled: d = !1, tabIndex: f = 0, children: p, role: m = "switch", value: h, ...g }) {
|
|
8
|
+
let _ = n(), v = a ?? _, y = o ?? v, b = p != null, x = e("inline-flex items-center relative", {
|
|
9
|
+
"gap-4": b,
|
|
10
10
|
"cursor-pointer": !d,
|
|
11
11
|
"cursor-not-allowed": d
|
|
12
12
|
});
|
|
13
|
-
return /* @__PURE__ */ i(
|
|
14
|
-
htmlFor:
|
|
15
|
-
className:
|
|
13
|
+
return /* @__PURE__ */ i(b ? "label" : "span", {
|
|
14
|
+
htmlFor: v,
|
|
15
|
+
className: x,
|
|
16
16
|
children: [
|
|
17
17
|
/* @__PURE__ */ r("input", {
|
|
18
|
-
...
|
|
19
|
-
id:
|
|
20
|
-
name:
|
|
18
|
+
...g,
|
|
19
|
+
id: v,
|
|
20
|
+
name: y,
|
|
21
21
|
checked: s,
|
|
22
22
|
"data-name": "Switch",
|
|
23
23
|
disabled: d,
|
|
24
24
|
role: m,
|
|
25
25
|
tabIndex: f,
|
|
26
26
|
type: "checkbox",
|
|
27
|
+
value: typeof h == "boolean" ? String(h) : h,
|
|
27
28
|
className: "absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full",
|
|
28
29
|
onChange: (e) => {
|
|
29
30
|
u?.(e.nativeEvent, e.target.checked);
|
package/ui/forms/Switch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","names":[],"sources":["../../../lib/ui/forms/Switch.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, useId } from 'react';\n\nimport { getBgColor } from '../helpers/colors/colors';\nimport type { Colors } from '../types/Colors';\n\nexport interface SwitchProps\n extends Omit
|
|
1
|
+
{"version":3,"file":"Switch.js","names":[],"sources":["../../../lib/ui/forms/Switch.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { type ComponentPropsWithoutRef, useId } from 'react';\n\nimport { getBgColor } from '../helpers/colors/colors';\nimport type { Colors } from '../types/Colors';\n\nexport interface SwitchProps\n extends Omit<\n ComponentPropsWithoutRef<'input'>,\n 'size' | 'type' | 'defaultChecked' | 'onChange' | 'value'\n > {\n checked: boolean;\n color?: Colors;\n value?: string | number | boolean;\n onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Switch({\n id,\n name,\n checked,\n className,\n color = 'saffron',\n onChange,\n disabled = false,\n tabIndex = 0,\n children,\n role = 'switch',\n value,\n ...attrs\n}: SwitchProps) {\n const internalId = useId();\n const inputId = id ?? internalId;\n const inputName = name ?? inputId;\n const hasChildren = children !== undefined && children !== null;\n const rootClassName = clsx('inline-flex items-center relative', {\n 'gap-4': hasChildren,\n 'cursor-pointer': !disabled,\n 'cursor-not-allowed': disabled,\n });\n const Node = hasChildren ? 'label' : 'span';\n\n return (\n <Node htmlFor={inputId} className={rootClassName}>\n <input\n {...attrs}\n id={inputId}\n name={inputName}\n checked={checked}\n data-name=\"Switch\"\n disabled={disabled}\n role={role}\n tabIndex={tabIndex}\n type=\"checkbox\"\n value={typeof value === 'boolean' ? String(value) : value}\n className=\"absolute opacity-0 left-0 w-full top-0 m-0 p-0 z-1 h-full\"\n onChange={(e) => {\n onChange?.(e.nativeEvent, e.target.checked);\n }}\n />\n\n <span\n className={clsx(\n className,\n 'rounded-pill inline-flex min-w-56 items-center p-4 align-middle transition-colors',\n { 'bg-middleGrey': !checked },\n { [getBgColor(color)]: checked },\n )}\n >\n <svg className=\"size-24\" viewBox=\"0 0 24 24\">\n <g>\n <circle cx={12} cy={12} r={12} fill=\"var(--color-white)\" />\n <circle cx={12} cy={12} r={4} fill=\"var(--color-middleGrey)\" />\n <path d=\"M18.73 6c.35 0 .68.14.9.37.5.5.5 1.35 0 1.85l-8.54 8.75q-.37.38-.9.38t-.9-.38l-4.91-5.02a1.33 1.33 0 0 1 0-1.85 1.26 1.26 0 0 1 1.8 0l4.01 4.09 7.64-7.82c.23-.24.56-.37.9-.37\" />\n </g>\n </svg>\n </span>\n {children}\n </Node>\n );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,EAAO,EACrB,OACA,SACA,YACA,cACA,WAAQ,WACR,aACA,cAAW,IACX,cAAW,GACX,aACA,UAAO,UACP,UACA,GAAG,KACW;CACd,IAAM,IAAa,GAAO,EACpB,IAAU,KAAM,GAChB,IAAY,KAAQ,GACpB,IAAc,KAAuC,MACrD,IAAgB,EAAK,qCAAqC;EAC9D,SAAS;EACT,kBAAkB,CAAC;EACnB,sBAAsB;EACvB,CAAC;AAGF,QACE,kBAHW,IAAc,UAAU,QAGnC;EAAM,SAAS;EAAS,WAAW;YAAnC;GACE,kBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACJ,MAAM;IACG;IACT,aAAU;IACA;IACJ;IACI;IACV,MAAK;IACL,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;IACpD,WAAU;IACV,WAAW,MAAM;AACf,SAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;IAE7C,CAAA;GAEF,kBAAC,QAAD;IACE,WAAW,EACT,GACA,qFACA,EAAE,iBAAiB,CAAC,GAAS,EAC7B,GAAG,EAAW,EAAM,GAAG,GAAS,CACjC;cAED,kBAAC,OAAD;KAAK,WAAU;KAAU,SAAQ;eAC/B,kBAAC,KAAD,EAAA,UAAA;MACE,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAI,MAAK;OAAuB,CAAA;MAC3D,kBAAC,UAAD;OAAQ,IAAI;OAAI,IAAI;OAAI,GAAG;OAAG,MAAK;OAA4B,CAAA;MAC/D,kBAAC,QAAD,EAAM,GAAE,kLAAmL,CAAA;MACzL,EAAA,CAAA;KACA,CAAA;IACD,CAAA;GACN"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, Ref } from 'react';
|
|
2
2
|
import { Colors } from '../../types/Colors';
|
|
3
3
|
import { ValidationStatus } from '../../hooks/useInternalStatus';
|
|
4
|
-
export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {
|
|
4
|
+
export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {
|
|
5
5
|
color?: Colors;
|
|
6
6
|
size?: string;
|
|
7
|
+
value?: string | number | boolean;
|
|
7
8
|
validationStatus?: ValidationStatus;
|
|
8
9
|
errorMessage?: string;
|
|
9
10
|
['data-testid']?: string;
|
|
@@ -7,17 +7,17 @@ import { Icon as o } from "@clubmed/trident-icons";
|
|
|
7
7
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
8
8
|
//#region lib/ui/forms/checkboxes/Checkbox.tsx
|
|
9
9
|
function l(l) {
|
|
10
|
-
let u = a(), { id: d = u, name: f = d, className: p, color: m = "black", size: h = "size-24", disabled: g = !1, tabIndex: _ = 0, validationStatus: v = "default", errorMessage: y, children: b, ref: x, onChange: S, "data-testid":
|
|
10
|
+
let u = a(), { id: d = u, name: f = d, className: p, color: m = "black", size: h = "size-24", disabled: g = !1, tabIndex: _ = 0, validationStatus: v = "default", errorMessage: y, children: b, ref: x, onChange: S, value: C, "data-testid": w, ...T } = l, E = i({
|
|
11
11
|
isDisabled: g,
|
|
12
12
|
validationStatus: v
|
|
13
|
-
}),
|
|
14
|
-
"!border-red !text-red":
|
|
15
|
-
"bg-pearl":
|
|
16
|
-
}),
|
|
17
|
-
className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60", t(m), n(m), h,
|
|
13
|
+
}), D = E === "disabled", O = E === "error" && y, k = e({
|
|
14
|
+
"!border-red !text-red": E === "error",
|
|
15
|
+
"bg-pearl": D
|
|
16
|
+
}), A = /* @__PURE__ */ c("span", {
|
|
17
|
+
className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60", t(m), n(m), h, k, p),
|
|
18
18
|
"data-name": "Checkbox",
|
|
19
19
|
children: [/* @__PURE__ */ s("input", {
|
|
20
|
-
...
|
|
20
|
+
...T,
|
|
21
21
|
disabled: g,
|
|
22
22
|
id: d,
|
|
23
23
|
name: f,
|
|
@@ -25,6 +25,7 @@ function l(l) {
|
|
|
25
25
|
ref: x,
|
|
26
26
|
tabIndex: _,
|
|
27
27
|
type: "checkbox",
|
|
28
|
+
value: typeof C == "boolean" ? String(C) : C,
|
|
28
29
|
onChange: (e) => {
|
|
29
30
|
S?.(e.nativeEvent, e.target.checked);
|
|
30
31
|
}
|
|
@@ -34,13 +35,13 @@ function l(l) {
|
|
|
34
35
|
width: "100%"
|
|
35
36
|
})]
|
|
36
37
|
});
|
|
37
|
-
return !b && !y ?
|
|
38
|
+
return !b && !y ? A : /* @__PURE__ */ c("div", {
|
|
38
39
|
className: e("flex flex-col space-y-2", p),
|
|
39
|
-
"data-testid":
|
|
40
|
+
"data-testid": w || `checkbox-container-${d}`,
|
|
40
41
|
children: [/* @__PURE__ */ c("label", {
|
|
41
42
|
className: e("relative flex items-center gap-8", { "text-grey": g }),
|
|
42
|
-
children: [
|
|
43
|
-
}),
|
|
43
|
+
children: [A, b]
|
|
44
|
+
}), O && /* @__PURE__ */ s(r, { children: y })]
|
|
44
45
|
});
|
|
45
46
|
}
|
|
46
47
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef, type Ref } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { Colors } from '../../types/Colors';\nimport { getBorderColor, getTextColor } from '../../helpers/colors/colors';\nimport { FormControlError } from '@/ui/forms/FormControlError';\nimport { useInternalStatus, type ValidationStatus } from '@/ui/hooks/useInternalStatus';\n\nexport interface CheckboxProps\n extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange'> {\n color?: Colors;\n size?: string;\n validationStatus?: ValidationStatus;\n errorMessage?: string;\n ['data-testid']?: string;\n ref?: Ref<HTMLInputElement>;\n onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Checkbox(props: CheckboxProps) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n color = 'black',\n size = 'size-24',\n disabled = false,\n tabIndex = 0,\n validationStatus = 'default',\n errorMessage,\n children,\n ref,\n onChange,\n 'data-testid': dataTestId,\n ...rest\n } = props;\n\n const internalStatus = useInternalStatus({\n isDisabled: disabled,\n validationStatus,\n });\n const isDisabled = internalStatus === 'disabled';\n\n const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n // Apply validation styling to checkbox via className\n const checkboxClassName = clsx({\n '!border-red !text-red': internalStatus === 'error',\n 'bg-pearl': isDisabled,\n });\n\n const checkbox = (\n <span\n className={clsx(\n 'rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60',\n getBorderColor(color),\n getTextColor(color),\n size,\n checkboxClassName,\n className,\n )}\n data-name=\"Checkbox\"\n >\n <input\n {...rest}\n disabled={disabled}\n id={id}\n name={name}\n className=\"peer sr-only\"\n ref={ref}\n tabIndex={tabIndex}\n type=\"checkbox\"\n onChange={(e) => {\n onChange?.(e.nativeEvent, e.target.checked);\n }}\n />\n <Icon\n className=\"scale-1/2 transition-[transform,opacity] peer-checked:scale-auto opacity-0 peer-checked:opacity-100\"\n name=\"CheckDefault\"\n width=\"100%\"\n />\n </span>\n );\n\n if (!children && !errorMessage) {\n return checkbox;\n }\n\n return (\n <div\n className={clsx('flex flex-col space-y-2', className)}\n data-testid={dataTestId || `checkbox-container-${id}`}\n >\n <label\n className={clsx('relative flex items-center gap-8', {\n 'text-grey': disabled,\n })}\n >\n {checkbox}\n {children}\n </label>\n {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n </div>\n );\n}\n"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../../lib/ui/forms/checkboxes/Checkbox.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, type ComponentPropsWithoutRef, type Ref } from 'react';\nimport { Icon } from '@clubmed/trident-icons';\nimport type { Colors } from '../../types/Colors';\nimport { getBorderColor, getTextColor } from '../../helpers/colors/colors';\nimport { FormControlError } from '@/ui/forms/FormControlError';\nimport { useInternalStatus, type ValidationStatus } from '@/ui/hooks/useInternalStatus';\n\nexport interface CheckboxProps\n extends Omit<ComponentPropsWithoutRef<'input'>, 'size' | 'onChange' | 'value'> {\n color?: Colors;\n size?: string;\n value?: string | number | boolean;\n validationStatus?: ValidationStatus;\n errorMessage?: string;\n ['data-testid']?: string;\n ref?: Ref<HTMLInputElement>;\n onChange?: (event: Event, value: boolean) => void;\n}\n\nexport function Checkbox(props: CheckboxProps) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n color = 'black',\n size = 'size-24',\n disabled = false,\n tabIndex = 0,\n validationStatus = 'default',\n errorMessage,\n children,\n ref,\n onChange,\n value,\n 'data-testid': dataTestId,\n ...rest\n } = props;\n\n const internalStatus = useInternalStatus({\n isDisabled: disabled,\n validationStatus,\n });\n const isDisabled = internalStatus === 'disabled';\n\n const shouldDisplayErrorMessage = internalStatus === 'error' && errorMessage;\n\n // Apply validation styling to checkbox via className\n const checkboxClassName = clsx({\n '!border-red !text-red': internalStatus === 'error',\n 'bg-pearl': isDisabled,\n });\n\n const checkbox = (\n <span\n className={clsx(\n 'rounded-8 inline-flex shrink-0 items-center justify-center self-start border transition-colors hover:!border-current/60 focus-visible:!border-current/60',\n getBorderColor(color),\n getTextColor(color),\n size,\n checkboxClassName,\n className,\n )}\n data-name=\"Checkbox\"\n >\n <input\n {...rest}\n disabled={disabled}\n id={id}\n name={name}\n className=\"peer sr-only\"\n ref={ref}\n tabIndex={tabIndex}\n type=\"checkbox\"\n value={typeof value === 'boolean' ? String(value) : value}\n onChange={(e) => {\n onChange?.(e.nativeEvent, e.target.checked);\n }}\n />\n <Icon\n className=\"scale-1/2 transition-[transform,opacity] peer-checked:scale-auto opacity-0 peer-checked:opacity-100\"\n name=\"CheckDefault\"\n width=\"100%\"\n />\n </span>\n );\n\n if (!children && !errorMessage) {\n return checkbox;\n }\n\n return (\n <div\n className={clsx('flex flex-col space-y-2', className)}\n data-testid={dataTestId || `checkbox-container-${id}`}\n >\n <label\n className={clsx('relative flex items-center gap-8', {\n 'text-grey': disabled,\n })}\n >\n {checkbox}\n {children}\n </label>\n {shouldDisplayErrorMessage && <FormControlError>{errorMessage}</FormControlError>}\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,EAAS,GAAsB;CAC7C,IAAM,IAAa,GAAO,EAEpB,EACJ,QAAK,GACL,UAAO,GACP,cACA,WAAQ,SACR,UAAO,WACP,cAAW,IACX,cAAW,GACX,sBAAmB,WACnB,iBACA,aACA,QACA,aACA,UACA,eAAe,GACf,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EACI,IAAa,MAAmB,YAEhC,IAA4B,MAAmB,WAAW,GAG1D,IAAoB,EAAK;EAC7B,yBAAyB,MAAmB;EAC5C,YAAY;EACb,CAAC,EAEI,IACJ,kBAAC,QAAD;EACE,WAAW,EACT,4JACA,EAAe,EAAM,EACrB,EAAa,EAAM,EACnB,GACA,GACA,EACD;EACD,aAAU;YATZ,CAWE,kBAAC,SAAD;GACE,GAAI;GACM;GACN;GACE;GACN,WAAU;GACL;GACK;GACV,MAAK;GACL,OAAO,OAAO,KAAU,YAAY,OAAO,EAAM,GAAG;GACpD,WAAW,MAAM;AACf,QAAW,EAAE,aAAa,EAAE,OAAO,QAAQ;;GAE7C,CAAA,EACF,kBAAC,GAAD;GACE,WAAU;GACV,MAAK;GACL,OAAM;GACN,CAAA,CACG;;AAOT,QAJI,CAAC,KAAY,CAAC,IACT,IAIP,kBAAC,OAAD;EACE,WAAW,EAAK,2BAA2B,EAAU;EACrD,eAAa,KAAc,sBAAsB;YAFnD,CAIE,kBAAC,SAAD;GACE,WAAW,EAAK,oCAAoC,EAClD,aAAa,GACd,CAAC;aAHJ,CAKG,GACA,EACK;MACP,KAA6B,kBAAC,GAAD,EAAA,UAAmB,GAAgC,CAAA,CAC7E"}
|