@clubmed/trident-ui 2.0.0-beta.34 → 2.0.0-beta.35
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/examples/tabs-demo.js
CHANGED
|
@@ -2,7 +2,11 @@ import { Tab as e, TabList as t, TabPanel as n, Tabs as r, TabsBody as i } from
|
|
|
2
2
|
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
3
3
|
//#region lib/examples/tabs-demo.tsx
|
|
4
4
|
function s() {
|
|
5
|
-
let s =
|
|
5
|
+
let s = [
|
|
6
|
+
,
|
|
7
|
+
,
|
|
8
|
+
,
|
|
9
|
+
].fill(void 0).map((e, t) => ({
|
|
6
10
|
label: `${t + 1}`,
|
|
7
11
|
value: t + 1
|
|
8
12
|
})), c = (e) => {
|
|
@@ -13,21 +17,18 @@ function s() {
|
|
|
13
17
|
default: return "bg-sienna";
|
|
14
18
|
}
|
|
15
19
|
};
|
|
16
|
-
return /* @__PURE__ */
|
|
17
|
-
|
|
18
|
-
children: /* @__PURE__ */
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
children:
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
})
|
|
29
|
-
}, e.label)) })]
|
|
30
|
-
})
|
|
20
|
+
return /* @__PURE__ */ o(r, {
|
|
21
|
+
selected: 1,
|
|
22
|
+
children: [/* @__PURE__ */ a(t, { children: s.map((t) => /* @__PURE__ */ a(e, {
|
|
23
|
+
label: `Tab - ${t.label}`,
|
|
24
|
+
value: t.value
|
|
25
|
+
}, t.label)) }), /* @__PURE__ */ a(i, { children: s.map((e) => /* @__PURE__ */ a(n, {
|
|
26
|
+
value: e.value,
|
|
27
|
+
children: /* @__PURE__ */ o("div", {
|
|
28
|
+
className: `p-16 ${c(e.value)}`,
|
|
29
|
+
children: ["Panel - ", e.label]
|
|
30
|
+
})
|
|
31
|
+
}, e.label)) })]
|
|
31
32
|
});
|
|
32
33
|
}
|
|
33
34
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs-demo.js","names":[],"sources":["../../lib/examples/tabs-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody } from '../ui/tabs/Tabs';\n\nexport default function TabsDemo() {\n const tabs = new Array(
|
|
1
|
+
{"version":3,"file":"tabs-demo.js","names":[],"sources":["../../lib/examples/tabs-demo.tsx"],"sourcesContent":["import { Tab, TabList, TabPanel, Tabs, TabsBody } from '../ui/tabs/Tabs';\n\nexport default function TabsDemo() {\n const tabs = new Array(3).fill(undefined).map((_, n) => ({ label: `${n + 1}`, value: n + 1 }));\n\n const bgs = (count: number) => {\n switch (count % 3) {\n case 0:\n return 'bg-lightSand';\n case 1:\n return 'bg-saffron';\n case 2:\n return 'bg-lavender';\n default:\n return 'bg-sienna';\n }\n };\n return (\n <Tabs selected={1}>\n <TabList>\n {tabs.map((tab) => {\n return <Tab key={tab.label} label={`Tab - ${tab.label}`} value={tab.value} />;\n })}\n </TabList>\n <TabsBody>\n {tabs.map((tab) => {\n return (\n <TabPanel key={tab.label} value={tab.value}>\n <div className={`p-16 ${bgs(tab.value)}`}>Panel - {tab.label}</div>\n </TabPanel>\n );\n })}\n </TabsBody>\n </Tabs>\n );\n}\n"],"mappings":";;;AAEA,SAAwB,IAAW;CACjC,IAAM,IAAO;;;;EAAY,CAAC,KAAK,KAAA,EAAU,CAAC,KAAK,GAAG,OAAO;EAAE,OAAO,GAAG,IAAI;EAAK,OAAO,IAAI;EAAG,EAAE,EAExF,KAAO,MAAkB;AAC7B,UAAQ,IAAQ,GAAhB;GACE,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,KAAK,EACH,QAAO;GACT,QACE,QAAO;;;AAGb,QACE,kBAAC,GAAD;EAAM,UAAU;YAAhB,CACE,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MACF,kBAAC,GAAD;GAAqB,OAAO,SAAS,EAAI;GAAS,OAAO,EAAI;GAAS,EAA5D,EAAI,MAAwD,CAC7E,EACM,CAAA,EACV,kBAAC,GAAD,EAAA,UACG,EAAK,KAAK,MAEP,kBAAC,GAAD;GAA0B,OAAO,EAAI;aACnC,kBAAC,OAAD;IAAK,WAAW,QAAQ,EAAI,EAAI,MAAM;cAAtC,CAA0C,YAAS,EAAI,MAAY;;GAC1D,EAFI,EAAI,MAER,CAEb,EACO,CAAA,CACN"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clubmed/trident-ui",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.35",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Shared ClubMed React UI components",
|
|
6
6
|
"keywords": [
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
"tw-animate-css": ">=1.3.6"
|
|
96
96
|
},
|
|
97
97
|
"devDependencies": {
|
|
98
|
-
"@clubmed/trident-icons": ">=1.
|
|
98
|
+
"@clubmed/trident-icons": ">=1.16.0",
|
|
99
99
|
"@tailwindcss/vite": "4.1.18",
|
|
100
100
|
"@types/dom-speech-recognition": "^0.0.11",
|
|
101
101
|
"@vitest/coverage-v8": "^4.1.2",
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
"tw-animate-css": "^1.3.6"
|
|
113
113
|
},
|
|
114
114
|
"peerDependencies": {
|
|
115
|
-
"@clubmed/trident-icons": ">=1.
|
|
115
|
+
"@clubmed/trident-icons": ">=1.16.0",
|
|
116
116
|
"@tailwindcss/container-queries": ">=0.1.1",
|
|
117
117
|
"@tailwindcss/typography": ">=0.5.19",
|
|
118
118
|
"react": ">=18.0.0",
|
|
@@ -11,10 +11,10 @@ function l(l) {
|
|
|
11
11
|
isDisabled: g,
|
|
12
12
|
validationStatus: v
|
|
13
13
|
}), T = w === "disabled", E = w === "error" && y, D = e({
|
|
14
|
-
"!border-red": w === "error",
|
|
14
|
+
"!border-red !text-red": w === "error",
|
|
15
15
|
"bg-pearl": T
|
|
16
16
|
}), O = /* @__PURE__ */ c("span", {
|
|
17
|
-
className: e("rounded-8 inline-flex shrink-0 items-center justify-center self-start border", t(m), n(m), h, D, p),
|
|
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, D, p),
|
|
18
18
|
"data-name": "Checkbox",
|
|
19
19
|
children: [/* @__PURE__ */ s("input", {
|
|
20
20
|
...C,
|
|
@@ -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 extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n color?: Colors;\n size?: string;\n validationStatus?: ValidationStatus;\n errorMessage?: string;\n ['data-testid']?: string;\n ref?: Ref<HTMLInputElement>;\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 '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': 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',\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 />\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":";;;;;;;;AAiBA,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,eAAe,GACf,GAAG,MACD,GAEE,IAAiB,EAAkB;EACvC,YAAY;EACZ;EACD,CAAC,EACI,IAAa,MAAmB,YAEhC,IAA4B,MAAmB,WAAW,GAG1D,IAAoB,EAAK;EAC7B,
|
|
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 extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {\n color?: Colors;\n size?: string;\n validationStatus?: ValidationStatus;\n errorMessage?: string;\n ['data-testid']?: string;\n ref?: Ref<HTMLInputElement>;\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 '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 />\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":";;;;;;;;AAiBA,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,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,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"}
|