@clubmed/trident-ui 1.3.0-beta.1 → 1.3.0-beta.11
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/CHANGELOG.md +963 -862
- package/README.md +11 -1
- package/assets/style.css +1 -1
- package/atoms/Clickable/Clickable.d.ts +5 -0
- package/atoms/Clickable/Clickable.js +25 -0
- package/atoms/Clickable/Clickable.js.map +1 -0
- package/atoms/Heading/Heading.d.ts +6 -0
- package/atoms/Heading/Heading.js +14 -0
- package/atoms/Heading/Heading.js.map +1 -0
- package/atoms/Heading/HeadingGroup.d.ts +7 -0
- package/atoms/Heading/HeadingGroup.js +15 -0
- package/atoms/Heading/HeadingGroup.js.map +1 -0
- package/atoms/Image/Image.d.ts +7 -0
- package/atoms/Image/Image.js +18 -0
- package/atoms/Image/Image.js.map +1 -0
- package/atoms/Prose/Prose.d.ts +5 -0
- package/atoms/Prose/Prose.js +18 -0
- package/atoms/Prose/Prose.js.map +1 -0
- package/chunks/ResizeObserver.js +287 -0
- package/chunks/ResizeObserver.js.map +1 -0
- package/chunks/_commonjsHelpers.js +24 -4
- package/chunks/_commonjsHelpers.js.map +1 -1
- package/chunks/index.js.map +1 -1
- package/chunks/plugin.js +53 -0
- package/chunks/plugin.js.map +1 -0
- package/contexts/Device.d.ts +2 -22
- package/contexts/Device.js +5 -59
- package/contexts/Device.js.map +1 -1
- package/contexts/Devices/Device.d.ts +11 -0
- package/contexts/Devices/Device.js +23 -0
- package/contexts/Devices/Device.js.map +1 -0
- package/contexts/Devices/hooks/useQueries.d.ts +6 -0
- package/contexts/Devices/hooks/useQueries.js +24 -0
- package/contexts/Devices/hooks/useQueries.js.map +1 -0
- package/contexts/Devices/reducers/reducer.d.ts +25 -0
- package/contexts/Devices/reducers/reducer.js +50 -0
- package/contexts/Devices/reducers/reducer.js.map +1 -0
- package/contexts/TridentUIConfig.js +228 -228
- package/contexts/TridentUIConfig.js.map +1 -1
- package/helpers/colors/colors.d.ts +108 -0
- package/helpers/colors/colors.js +132 -0
- package/helpers/colors/colors.js.map +1 -0
- package/hooks/keyboard.constants.js.map +1 -1
- package/hooks/useInternalStatus.js.map +1 -1
- package/hooks/useKeyboardControls.js.map +1 -1
- package/hooks/useResizeObserver.d.ts +2 -0
- package/hooks/useResizeObserver.js +84 -0
- package/hooks/useResizeObserver.js.map +1 -0
- package/hooks/useSafeBoop.js.map +1 -1
- package/hooks/useValue.js.map +1 -1
- package/molecules/Arrows/Arrows.d.ts +16 -0
- package/molecules/Arrows/Arrows.js +66 -0
- package/molecules/Arrows/Arrows.js.map +1 -0
- package/molecules/Arrows/ArrowsLabels.d.js +2 -0
- package/molecules/Arrows/ArrowsLabels.d.js.map +1 -0
- package/molecules/Arrows.d.ts +1 -50
- package/molecules/Arrows.js +2 -56
- package/molecules/Arrows.js.map +1 -1
- package/molecules/Avatar.js.map +1 -1
- package/molecules/Backdrop.js.map +1 -1
- package/molecules/Breadcrumb.js +8 -9
- package/molecules/Breadcrumb.js.map +1 -1
- package/molecules/Buttons/ArrowButton.d.ts +7 -0
- package/molecules/Buttons/ArrowButton.js +14 -0
- package/molecules/Buttons/ArrowButton.js.map +1 -0
- package/molecules/Buttons/Button.d.ts +15 -32
- package/molecules/Buttons/Button.js +52 -42
- package/molecules/Buttons/Button.js.map +1 -1
- package/molecules/Buttons/ButtonAnchor.d.ts +7 -3
- package/molecules/Buttons/ButtonAnchor.js +17 -36
- package/molecules/Buttons/ButtonAnchor.js.map +1 -1
- package/molecules/Buttons/ButtonContent.d.ts +12 -4
- package/molecules/Buttons/ButtonContent.js +14 -8
- package/molecules/Buttons/ButtonContent.js.map +1 -1
- package/molecules/Buttons/FakeButton.d.ts +8 -0
- package/molecules/Buttons/FakeButton.js +8 -0
- package/molecules/Buttons/FakeButton.js.map +1 -0
- package/molecules/Buttons/InertButton.d.ts +4 -0
- package/molecules/Buttons/InertButton.js +15 -31
- package/molecules/Buttons/InertButton.js.map +1 -1
- package/molecules/Buttons/v2/Button.d.ts +2289 -0
- package/molecules/Buttons/v2/Button.js +57 -0
- package/molecules/Buttons/v2/Button.js.map +1 -0
- package/molecules/Buttons/v2/Button.type.d.ts +57 -0
- package/molecules/Buttons/v2/Button.type.js +45 -0
- package/molecules/Buttons/v2/Button.type.js.map +1 -0
- package/molecules/Card.d.ts +1 -11
- package/molecules/Card.js +2 -35
- package/molecules/Card.js.map +1 -1
- package/molecules/Cards/Card.d.ts +13 -0
- package/molecules/Cards/Card.js +22 -0
- package/molecules/Cards/Card.js.map +1 -0
- package/molecules/Cards/CardAspectRatios.d.ts +6 -0
- package/molecules/Cards/CardAspectRatios.js +10 -0
- package/molecules/Cards/CardAspectRatios.js.map +1 -0
- package/molecules/Cards/CardBackground.d.ts +4 -0
- package/molecules/Cards/CardBackground.js +30 -0
- package/molecules/Cards/CardBackground.js.map +1 -0
- package/molecules/Cards/CardBackgroundContext.d.ts +6 -0
- package/molecules/Cards/CardBackgroundContext.js +10 -0
- package/molecules/Cards/CardBackgroundContext.js.map +1 -0
- package/molecules/Cards/CardClickable.d.ts +6 -0
- package/molecules/Cards/CardClickable.js +37 -0
- package/molecules/Cards/CardClickable.js.map +1 -0
- package/molecules/Cards/ExpandableCard.d.ts +14 -0
- package/molecules/Cards/ExpandableCard.js +80 -0
- package/molecules/Cards/ExpandableCard.js.map +1 -0
- package/molecules/Cards/v2/Card.d.ts +15 -0
- package/molecules/Cards/v2/Card.js +34 -0
- package/molecules/Cards/v2/Card.js.map +1 -0
- package/molecules/Chip.d.ts +9 -0
- package/molecules/Chip.js +31 -0
- package/molecules/Chip.js.map +1 -0
- package/molecules/Chip.themes.d.ts +12 -0
- package/molecules/Chip.themes.js +24 -0
- package/molecules/Chip.themes.js.map +1 -0
- package/molecules/ElasticHeight.d.ts +6 -27
- package/molecules/ElasticHeight.js +28 -33
- package/molecules/ElasticHeight.js.map +1 -1
- package/molecules/Forms/Checkboxes/Checkbox.js +12 -13
- package/molecules/Forms/Checkboxes/Checkbox.js.map +1 -1
- package/molecules/Forms/Checkboxes/Checkboxes.js.map +1 -1
- package/molecules/Forms/DateField.d.ts +1 -1
- package/molecules/Forms/DateField.js +142 -116
- package/molecules/Forms/DateField.js.map +1 -1
- package/molecules/Forms/Filter.js +12 -13
- package/molecules/Forms/Filter.js.map +1 -1
- package/molecules/Forms/FormControl.js +15 -16
- package/molecules/Forms/FormControl.js.map +1 -1
- package/molecules/Forms/FormLabel.js.map +1 -1
- package/molecules/Forms/NumberField.d.ts +28 -28
- package/molecules/Forms/NumberField.js +68 -68
- package/molecules/Forms/NumberField.js.map +1 -1
- package/molecules/Forms/Password/Password.js +10 -11
- package/molecules/Forms/Password/Password.js.map +1 -1
- package/molecules/Forms/Password/ValidationMessage.js +8 -9
- package/molecules/Forms/Password/ValidationMessage.js.map +1 -1
- package/molecules/Forms/Radios/Radio.d.ts +3 -0
- package/molecules/Forms/Radios/Radio.js +21 -20
- package/molecules/Forms/Radios/Radio.js.map +1 -1
- package/molecules/Forms/Radios/RadioGroup.js +72 -33
- package/molecules/Forms/Radios/RadioGroup.js.map +1 -1
- package/molecules/Forms/Range.js +124 -406
- package/molecules/Forms/Range.js.map +1 -1
- package/molecules/Forms/Select.d.ts +1 -1
- package/molecules/Forms/Select.js +3 -4
- package/molecules/Forms/Select.js.map +1 -1
- package/molecules/Forms/Switch.js.map +1 -1
- package/molecules/Forms/TextField.d.ts +1 -1
- package/molecules/Forms/TextField.js +7 -8
- package/molecules/Forms/TextField.js.map +1 -1
- package/molecules/HamburgerIcon.js.map +1 -1
- package/molecules/Link.d.ts +1 -1
- package/molecules/Link.js +8 -9
- package/molecules/Link.js.map +1 -1
- package/molecules/Loader.js.map +1 -1
- package/molecules/Pagination.d.ts +2 -1
- package/molecules/Pagination.helper.js.map +1 -1
- package/molecules/Pagination.js +67 -45
- package/molecules/Pagination.js.map +1 -1
- package/molecules/Popin.js +16 -16
- package/molecules/Popin.js.map +1 -1
- package/molecules/Spinner.js.map +1 -1
- package/molecules/Tabs/Tab.d.ts +1 -1
- package/molecules/Tabs/Tab.js +51 -49
- package/molecules/Tabs/Tab.js.map +1 -1
- package/molecules/Tabs/TabList.js.map +1 -1
- package/molecules/Tabs/TabPanel.js +31 -29
- package/molecules/Tabs/TabPanel.js.map +1 -1
- package/molecules/Tabs/Tabs.js +7 -9
- package/molecules/Tabs/Tabs.js.map +1 -1
- package/molecules/Tabs/TabsBody.js.map +1 -1
- package/molecules/Tabs/context/TabControl.d.ts +29 -27
- package/molecules/Tabs/context/TabControl.js +67 -66
- package/molecules/Tabs/context/TabControl.js.map +1 -1
- package/molecules/Tabs/hooks/tabControl.d.ts +25 -14
- package/molecules/Tabs/hooks/tabControl.js +26 -23
- package/molecules/Tabs/hooks/tabControl.js.map +1 -1
- package/molecules/Tabs/theme.js.map +1 -1
- package/molecules/Tag.d.ts +43 -0
- package/molecules/Tag.js +73 -0
- package/molecules/Tag.js.map +1 -0
- package/package.json +34 -10
- package/styles/globals.css +16 -15
- package/tailwind/colors.d.ts +38 -0
- package/tailwind/colors.js +44 -0
- package/tailwind/colors.js.map +1 -0
- package/tailwind/plugins/animationDelay.d.ts +4 -0
- package/tailwind/plugins/animationDelay.js +15 -0
- package/tailwind/plugins/animationDelay.js.map +1 -0
- package/tailwind/plugins/hocus.d.ts +4 -0
- package/tailwind/plugins/hocus.js +11 -0
- package/tailwind/plugins/hocus.js.map +1 -0
- package/tailwind/plugins/lineClampFix.d.ts +4 -0
- package/tailwind/plugins/lineClampFix.js +13 -0
- package/tailwind/plugins/lineClampFix.js.map +1 -0
- package/tailwind/plugins/popover.d.ts +4 -0
- package/tailwind/plugins/popover.js +8 -0
- package/tailwind/plugins/popover.js.map +1 -0
- package/tailwind/plugins/startingStyle.d.ts +4 -0
- package/tailwind/plugins/startingStyle.js +8 -0
- package/tailwind/plugins/startingStyle.js.map +1 -0
- package/tailwind/plugins/transitionBehavior.d.ts +4 -0
- package/tailwind/plugins/transitionBehavior.js +11 -0
- package/tailwind/plugins/transitionBehavior.js.map +1 -0
- package/tailwind/tailwind.preset.d.ts +730 -510
- package/tailwind/tailwind.preset.js +705 -631
- package/tailwind/tailwind.preset.js.map +1 -1
- package/types/Colors.d.js +2 -0
- package/types/Colors.d.js.map +1 -0
- package/types/Devices.d.ts +8 -0
- package/types/Devices.js +11 -0
- package/types/Devices.js.map +1 -0
- package/types/Direction.d.js +2 -0
- package/types/Direction.d.js.map +1 -0
- package/types/LiteralUnion.d.js +2 -0
- package/types/LiteralUnion.d.js.map +1 -0
- package/types/ScrollerLabels.d.js +2 -0
- package/types/ScrollerLabels.d.js.map +1 -0
- package/types/Theme.d.js +2 -0
- package/types/Theme.d.js.map +1 -0
- package/molecules/Buttons/Button.helpers.d.ts +0 -8
- package/molecules/Buttons/Button.helpers.js +0 -12
- package/molecules/Buttons/Button.helpers.js.map +0 -1
- package/molecules/Buttons/Button.themes.d.ts +0 -1
- package/molecules/Buttons/Button.themes.js +0 -25
- package/molecules/Buttons/Button.themes.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * The data-testid to apply to the button.\n * This is used for testing purposes.\n * */\n dataTestId?: string;\n /**\n * The diameter of the radio button.\n * */\n size?: number;\n\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled,\n checked: initialChecked = false,\n value,\n size = 24,\n tabIndex = 0,\n children,\n onChange,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, (value !== undefined ? value : checked) as Value);\n },\n });\n\n return (\n <label\n className={classnames(className, 'relative flex items-center gap-8', {\n 'text-grey': disabled,\n })}\n >\n <span className=\"relative\">\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"radio\"\n tabIndex={tabIndex}\n onChange={() => {\n !disabled && setValue(!checked);\n }}\n defaultChecked={checked}\n data-name=\"Radio\"\n disabled={disabled}\n value={value}\n />\n\n <span style={{ height: size, width: size }}>\n <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n </svg>\n </span>\n </span>\n\n {children}\n </label>\n );\n}\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n /**\n * The data-testid to apply to the button.\n * This is used for testing purposes.\n * */\n dataTestId?: string;\n /**\n * The diameter of the radio button.\n * */\n size?: number;\n\n onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n className,\n dataTestId,\n disabled,\n checked: initialChecked = false,\n value,\n size = 24,\n tabIndex = 0,\n children,\n onChange,\n ...rest\n } = props;\n\n const { value: checked, setValue } = useValue<boolean>({\n name,\n initialValue: initialChecked,\n onChange(name, checked) {\n onChange?.(name, (value !== undefined ? value : checked) as Value);\n },\n });\n\n return (\n <label\n className={classnames(className, 'relative flex items-center gap-8', {\n 'text-grey': disabled,\n })}\n >\n <span className=\"relative\">\n <input\n {...rest}\n name={name}\n data-testid={dataTestId}\n type=\"radio\"\n tabIndex={tabIndex}\n onChange={() => {\n !disabled && setValue(!checked);\n }}\n defaultChecked={checked}\n data-name=\"Radio\"\n disabled={disabled}\n value={value}\n />\n\n <span style={{ height: size, width: size }}>\n <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n </svg>\n </span>\n </span>\n\n {children}\n </label>\n );\n}\n\nRadio.displayName = 'Radio';\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,KAAA,QAAAA,EAAWT,GAAOK,MAAU,SAAYA,IAAQM;AAAAA,IAClD;AAAA,EAAA,CACD;AAED,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACd,iBAACJ,KAAYS,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,gBAAAW,EAAC,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAA,GAClC,UAAA,gBAAAU,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,4BAAA,EAA4B,CAAG,GAC9E,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAb,EAAM,cAAc;"}
|
|
@@ -1,37 +1,76 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useId as
|
|
3
|
-
import { useValue as
|
|
4
|
-
import { c as
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
1
|
+
import { jsx as N } from "react/jsx-runtime";
|
|
2
|
+
import { useId as O, Children as V, isValidElement as W, cloneElement as y } from "react";
|
|
3
|
+
import { useValue as _ } from "../../../hooks/useValue.js";
|
|
4
|
+
import { c as h } from "../../../chunks/index.js";
|
|
5
|
+
import { KEY as l } from "../../../hooks/keyboard.constants.js";
|
|
6
|
+
function G(R) {
|
|
7
|
+
const g = O(), {
|
|
8
|
+
id: i = g,
|
|
9
|
+
name: p = i,
|
|
10
|
+
children: v,
|
|
11
|
+
value: I,
|
|
12
|
+
defaultValue: E,
|
|
13
|
+
onChange: b,
|
|
14
|
+
disabled: m,
|
|
15
|
+
readOnly: d,
|
|
16
|
+
tabIndex: A = 0,
|
|
17
|
+
...f
|
|
18
|
+
} = R, { value: s, setValue: c } = _({
|
|
19
|
+
name: p,
|
|
20
|
+
initialValue: I,
|
|
21
|
+
defaultValue: E,
|
|
22
|
+
onChange: b
|
|
23
|
+
}), C = (e, o) => {
|
|
24
|
+
var r, t;
|
|
25
|
+
let a = o;
|
|
26
|
+
const n = e.target.parentNode.querySelectorAll('[role="radio"]');
|
|
27
|
+
if (e.key === l.ARROW_RIGHT || e.key === l.ARROW_DOWN)
|
|
28
|
+
a = (o + 1) % n.length, (r = n[a]) == null || r.focus();
|
|
29
|
+
else if (e.key === l.ARROW_LEFT || e.key === l.ARROW_UP)
|
|
30
|
+
a = (o - 1 + n.length) % n.length, (t = n[a]) == null || t.focus();
|
|
31
|
+
else if (e.key === l.SPACE || e.key === l.ENTER) {
|
|
32
|
+
c(n[o].dataset.value);
|
|
33
|
+
return;
|
|
33
34
|
}
|
|
34
|
-
}
|
|
35
|
+
};
|
|
36
|
+
function k(e, o) {
|
|
37
|
+
return s == null || s === "" ? A === o ? 0 : -1 : e ? 0 : -1;
|
|
38
|
+
}
|
|
39
|
+
return /* @__PURE__ */ N("div", { ...f, className: h("flex gap-12", f.className), role: "radiogroup", children: V.map(v, (e, o) => {
|
|
40
|
+
if (!W(e))
|
|
41
|
+
return e;
|
|
42
|
+
const a = e.type.displayName, n = e.props.value, r = s === n;
|
|
43
|
+
return a != null && a.includes("Button") ? y(e, {
|
|
44
|
+
...e.props,
|
|
45
|
+
value: void 0,
|
|
46
|
+
role: "radio",
|
|
47
|
+
color: r ? "black" : "white",
|
|
48
|
+
name: p,
|
|
49
|
+
component: "span",
|
|
50
|
+
id: `${i}-${o}`,
|
|
51
|
+
disabled: m,
|
|
52
|
+
readOnly: d,
|
|
53
|
+
tabIndex: k(r, o),
|
|
54
|
+
"data-value": n,
|
|
55
|
+
"aria-checked": s === n,
|
|
56
|
+
onKeyDown: (t) => C(t, o),
|
|
57
|
+
onClick() {
|
|
58
|
+
var t, u;
|
|
59
|
+
c(n), (u = (t = e.props) == null ? void 0 : t.onClick) == null || u.call(t, n);
|
|
60
|
+
}
|
|
61
|
+
}) : y(e, {
|
|
62
|
+
...e.props,
|
|
63
|
+
name: p,
|
|
64
|
+
id: `${i}-${o}`,
|
|
65
|
+
disabled: m,
|
|
66
|
+
readOnly: d,
|
|
67
|
+
tabIndex: k(r, o),
|
|
68
|
+
checked: r,
|
|
69
|
+
onChange(t, u) {
|
|
70
|
+
c(u);
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
}) });
|
|
35
74
|
}
|
|
36
75
|
export {
|
|
37
76
|
G as RadioGroup
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n type HTMLAttributes,\n isValidElement,\n useId,\n type ReactElement,\n} from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport type { RadioProps } from '@/molecules/Forms/Radios/Radio.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport classnames from 'classnames';\nimport type { ButtonProps } from '@/molecules/Buttons/v2/Button';\nimport { KEY } from '@/hooks/keyboard.constants';\n\nexport interface RadioGroupProps<Value = string>\n extends Pick<\n FormControlProps<Value>,\n | 'id'\n | 'name'\n | 'value'\n | 'onChange'\n | 'disabled'\n | 'readOnly'\n | 'tabIndex'\n | 'description'\n | 'validationStatus'\n | 'errorMessage'\n >,\n Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n const internalId = useId();\n\n const {\n id = internalId,\n name = id,\n children,\n value: initialValue,\n defaultValue,\n onChange,\n disabled,\n readOnly,\n tabIndex = 0,\n ...rest\n } = props;\n\n const { value, setValue } = useValue<Value>({\n name,\n initialValue,\n defaultValue: defaultValue as Value,\n onChange,\n });\n\n const handleKeyDown = (e: KeyboardEvent, index: number) => {\n let newIndex = index;\n const options = (e.target as any)!.parentNode!.querySelectorAll('[role=\"radio\"]');\n\n if (e.key === KEY.ARROW_RIGHT || e.key === KEY.ARROW_DOWN) {\n newIndex = (index + 1) % options.length;\n options[newIndex]?.focus();\n } else if (e.key === KEY.ARROW_LEFT || e.key === KEY.ARROW_UP) {\n newIndex = (index - 1 + options.length) % options.length;\n options[newIndex]?.focus();\n } else if (e.key === KEY.SPACE || e.key === KEY.ENTER) {\n setValue(options[index].dataset.value as Value);\n return;\n }\n };\n\n function getTabIndex(checked: boolean, index: number) {\n if (value === undefined || value === null || value === '') {\n return tabIndex === index ? 0 : -1;\n }\n\n return checked ? 0 : -1;\n }\n\n return (\n <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n {Children.map(children, (child, index) => {\n if (!isValidElement(child)) {\n return child;\n }\n\n const type = (child.type as unknown as ReactElement & { displayName?: string }).displayName;\n const itemValue = (child.props as ButtonProps | RadioProps).value;\n const checked = value === itemValue;\n\n if (type?.includes('Button')) {\n return cloneElement(child, {\n ...child.props,\n value: undefined,\n role: 'radio',\n color: checked ? 'black' : 'white',\n name,\n component: 'span',\n id: `${id}-${index}`,\n disabled,\n readOnly,\n tabIndex: getTabIndex(checked, index),\n 'data-value': itemValue,\n 'aria-checked': value === itemValue,\n onKeyDown: (e: KeyboardEvent) => handleKeyDown(e, index),\n onClick() {\n setValue(itemValue as Value);\n child.props?.onClick?.(itemValue as Value);\n },\n } as ButtonProps);\n }\n\n return cloneElement(child, {\n ...child.props,\n name,\n id: `${id}-${index}`,\n disabled,\n readOnly,\n tabIndex: getTabIndex(checked, index),\n checked: checked,\n onChange(_: string, value: Value) {\n setValue(value);\n },\n } as RadioProps<Value>);\n })}\n </div>\n );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","handleKeyDown","index","newIndex","options","KEY","_a","_b","getTabIndex","checked","classnames","Children","child","isValidElement","type","itemValue","cloneElement","e","_"],"mappings":";;;;;AA+BO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAA,IAAaC,EAAgB;AAAA,IAC1C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAEKQ,IAAgB,CAAC,GAAkBC,MAAkB;;AACzD,QAAIC,IAAWD;AACf,UAAME,IAAW,EAAE,OAAgB,WAAY,iBAAiB,gBAAgB;AAEhF,QAAI,EAAE,QAAQC,EAAI,eAAe,EAAE,QAAQA,EAAI;AAC7C,MAAAF,KAAYD,IAAQ,KAAKE,EAAQ,SACjCE,IAAAF,EAAQD,CAAQ,MAAhB,QAAAG,EAAmB;AAAA,aACV,EAAE,QAAQD,EAAI,cAAc,EAAE,QAAQA,EAAI;AACnD,MAAAF,KAAYD,IAAQ,IAAIE,EAAQ,UAAUA,EAAQ,SAClDG,IAAAH,EAAQD,CAAQ,MAAhB,QAAAI,EAAmB;AAAA,aACV,EAAE,QAAQF,EAAI,SAAS,EAAE,QAAQA,EAAI,OAAO;AACrD,MAAAN,EAASK,EAAQF,CAAK,EAAE,QAAQ,KAAc;AAC9C;AAAA,IACF;AAAA,EACF;AAEA,WAASM,EAAYC,GAAkBP,GAAe;AACpD,WAA2BJ,KAAU,QAAQA,MAAU,KAC9CF,MAAaM,IAAQ,IAAI,KAG3BO,IAAU,IAAI;AAAA,EACvB;AAEA,2BACG,OAAA,EAAK,GAAGZ,GAAM,WAAWa,EAAW,eAAeb,EAAK,SAAS,GAAG,MAAK,cACvE,UAAAc,EAAS,IAAIrB,GAAU,CAACsB,GAAOV,MAAU;AACxC,QAAI,CAACW,EAAeD,CAAK;AACvB,aAAOA;AAGT,UAAME,IAAQF,EAAM,KAA4D,aAC1EG,IAAaH,EAAM,MAAmC,OACtDH,IAAUX,MAAUiB;AAE1B,WAAID,KAAA,QAAAA,EAAM,SAAS,YACVE,EAAaJ,GAAO;AAAA,MACzB,GAAGA,EAAM;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAOH,IAAU,UAAU;AAAA,MAC3B,MAAApB;AAAA,MACA,WAAW;AAAA,MACX,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUa,EAAYC,GAASP,CAAK;AAAA,MACpC,cAAca;AAAA,MACd,gBAAgBjB,MAAUiB;AAAA,MAC1B,WAAW,CAACE,MAAqBhB,EAAcgB,GAAGf,CAAK;AAAA,MACvD,UAAU;;AACR,QAAAH,EAASgB,CAAkB,IAC3BR,KAAAD,IAAAM,EAAM,UAAN,gBAAAN,EAAa,YAAb,QAAAC,EAAA,KAAAD,GAAuBS;AAAA,MACzB;AAAA,IAAA,CACc,IAGXC,EAAaJ,GAAO;AAAA,MACzB,GAAGA,EAAM;AAAA,MACT,MAAAvB;AAAA,MACA,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUa,EAAYC,GAASP,CAAK;AAAA,MACpC,SAAAO;AAAA,MACA,SAASS,GAAWpB,GAAc;AAChC,QAAAC,EAASD,CAAK;AAAA,MAChB;AAAA,IAAA,CACoB;AAAA,EACxB,CAAC,EAAA,CACH;AAEJ;"}
|