@tapcart/mobile-components 0.11.4 → 0.11.5
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/dist/components/ui/checkbox.d.ts +5 -0
- package/dist/components/ui/checkbox.d.ts.map +1 -1
- package/dist/components/ui/checkbox.js +7 -5
- package/dist/components/ui/money.d.ts.map +1 -1
- package/dist/components/ui/money.js +18 -5
- package/dist/components/ui/radio-group.d.ts +6 -1
- package/dist/components/ui/radio-group.d.ts.map +1 -1
- package/dist/components/ui/radio-group.js +3 -3
- package/package.json +1 -1
|
@@ -12,6 +12,11 @@ export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof Che
|
|
|
12
12
|
numberAmount?: string;
|
|
13
13
|
subtext?: string;
|
|
14
14
|
onSelect?: React.ReactEventHandler;
|
|
15
|
+
labelTextColor?: string;
|
|
16
|
+
labelCountColor?: string;
|
|
17
|
+
checkedColor?: string;
|
|
18
|
+
unCheckedColor?: string;
|
|
19
|
+
disabledColor?: string;
|
|
15
20
|
}
|
|
16
21
|
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
|
17
22
|
export { Checkbox };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../components/ui/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAmG5D,QAAA,MAAM,gBAAgB;;mFAUpB,CAAA;AAEF,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,GAAG,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,QAAA,MAAM,QAAQ,yFAqGb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -16,9 +16,11 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
|
16
16
|
import { cva } from "class-variance-authority";
|
|
17
17
|
import { cn } from "../../lib/utils";
|
|
18
18
|
import { Text } from "./text";
|
|
19
|
-
const Check = ({ className }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", className: className }, { children: [_jsx("g", Object.assign({ clipPath: "url(#clip0_1465_24)" }, { children: _jsx("path", { d: "M5.667 21H5.66695C4.98414 21 4.32733 20.7382 3.83183 20.2684C3.33941 19.8015 3.04358 19.1646 3.00429 18.4875L3 18.3202V5.667C3 4.24616 4.11102 3.08465 5.51221 3.0043L5.67982 3H18.333C19.7538 3 20.9153 4.11101 20.9957 5.51219L21 5.67983V18.333C21 19.7538 19.889 20.9153 18.4878 20.9957L18.3202 21H5.667ZM16.4141 8.58593L16.414 8.58579C16.0389 8.21085 15.5303 8.00021 15 8.00021C14.4697 8.00021 13.9611 8.21085 13.586 8.58579L10.9998 11.1712L10.4138 10.5856L10.392 10.5638L10.3689 10.5434L10.2749 10.4604L10.2505 10.4388L10.2247 10.4189C9.82271 10.1081 9.31749 9.96192 8.81164 10.0101C8.3058 10.0583 7.83726 10.2972 7.50119 10.6783C7.16512 11.0595 6.98673 11.5542 7.00224 12.0621C7.01775 12.57 7.226 13.053 7.58469 13.4129L7.58589 13.4141L9.58589 15.4141L9.60784 15.4361L9.63111 15.4566L9.72511 15.5396L9.74895 15.5607L9.77407 15.5801C10.1589 15.8786 10.6394 16.0265 11.1254 15.9959C11.6115 15.9654 12.0697 15.7585 12.4141 15.4141L12.4141 15.4141L16.4141 11.4141L16.4361 11.3922L16.4566 11.3689L16.5396 11.2749L16.5607 11.2511L16.5801 11.2259C16.8786 10.8411 17.0265 10.3606 16.9959 9.87457C16.9654 9.38851 16.7585 8.93031 16.4141 8.58593Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2" }) })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_24" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }) })) })] })));
|
|
20
|
-
const Unchecked = ({ className
|
|
21
|
-
|
|
19
|
+
const Check = ({ className, color }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", className: className, style: { color: color } }, { children: [_jsx("g", Object.assign({ clipPath: "url(#clip0_1465_24)" }, { children: _jsx("path", { d: "M5.667 21H5.66695C4.98414 21 4.32733 20.7382 3.83183 20.2684C3.33941 19.8015 3.04358 19.1646 3.00429 18.4875L3 18.3202V5.667C3 4.24616 4.11102 3.08465 5.51221 3.0043L5.67982 3H18.333C19.7538 3 20.9153 4.11101 20.9957 5.51219L21 5.67983V18.333C21 19.7538 19.889 20.9153 18.4878 20.9957L18.3202 21H5.667ZM16.4141 8.58593L16.414 8.58579C16.0389 8.21085 15.5303 8.00021 15 8.00021C14.4697 8.00021 13.9611 8.21085 13.586 8.58579L10.9998 11.1712L10.4138 10.5856L10.392 10.5638L10.3689 10.5434L10.2749 10.4604L10.2505 10.4388L10.2247 10.4189C9.82271 10.1081 9.31749 9.96192 8.81164 10.0101C8.3058 10.0583 7.83726 10.2972 7.50119 10.6783C7.16512 11.0595 6.98673 11.5542 7.00224 12.0621C7.01775 12.57 7.226 13.053 7.58469 13.4129L7.58589 13.4141L9.58589 15.4141L9.60784 15.4361L9.63111 15.4566L9.72511 15.5396L9.74895 15.5607L9.77407 15.5801C10.1589 15.8786 10.6394 16.0265 11.1254 15.9959C11.6115 15.9654 12.0697 15.7585 12.4141 15.4141L12.4141 15.4141L16.4141 11.4141L16.4361 11.3922L16.4566 11.3689L16.5396 11.2749L16.5607 11.2511L16.5801 11.2259C16.8786 10.8411 17.0265 10.3606 16.9959 9.87457C16.9654 9.38851 16.7585 8.93031 16.4141 8.58593Z", fill: "currentColor", stroke: "currentColor", strokeWidth: "2" }) })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_24" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }) })) })] })));
|
|
20
|
+
const Unchecked = ({ className, color }) => {
|
|
21
|
+
return (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className, style: { color: color } }, { children: [_jsx("g", Object.assign({ clipPath: "url(#clip0_1465_32)" }, { children: _jsx("path", { d: "M3 5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_32" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }) })) })] })));
|
|
22
|
+
};
|
|
23
|
+
const DisabledCheckbox = ({ className, color }) => (_jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", className: className, style: { color: color } }, { children: [_jsxs("g", Object.assign({ clipPath: "url(#clip0_1465_43)" }, { children: [_jsx("path", { d: "M8 4H18C18.5304 4 19.0391 4.21071 19.4142 4.58579C19.7893 4.96086 20 5.46957 20 6V16M19.416 19.412C19.2303 19.5983 19.0096 19.7462 18.7666 19.8471C18.5236 19.948 18.2631 19.9999 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V6C4 5.448 4.224 4.948 4.586 4.586", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M3 3L21 21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_1465_43" }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }) })) })] })));
|
|
22
24
|
const checkboxVariants = cva("flex flex-col group group-disabled", {
|
|
23
25
|
variants: {
|
|
24
26
|
deactivated: {
|
|
@@ -31,8 +33,8 @@ const checkboxVariants = cva("flex flex-col group group-disabled", {
|
|
|
31
33
|
},
|
|
32
34
|
});
|
|
33
35
|
const Checkbox = React.forwardRef((_a, ref) => {
|
|
34
|
-
var { id, className, label, numberAmount, subtext, selected = false, onCheck, onSelect, deactivated = false } = _a, props = __rest(_a, ["id", "className", "label", "numberAmount", "subtext", "selected", "onCheck", "onSelect", "deactivated"]);
|
|
35
|
-
return (_jsx("div", Object.assign({ className: cn(checkboxVariants({ deactivated })) }, { children: _jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("w-full peer h-6 shrink-0 self-start rounded ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 group ", className), id: id, checked: selected, onSelect: onSelect, onCheckedChange: onCheck, disabled: deactivated !== null && deactivated !== void 0 ? deactivated : false }, props, { children: _jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group " }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(CheckboxPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center text-current col-start-1 row-start-1" }, { children: !deactivated && (_jsx(Check, { className: "col-start-1 row-start-1 items-center z-50 text-coreColors-brandColorPrimary" })) })), _jsxs("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: [!deactivated && !selected && (_jsx(Unchecked, { className: "text-coreColors-secondaryIcon" })), deactivated && (_jsx(DisabledCheckbox, { className: "text-stateColors-disabled" }))] }))] })), _jsxs("div", Object.assign({ className: "flex flex-col gap-2 items-start overflow-x-auto" }, { children: [label && (_jsx("label", Object.assign({ htmlFor: id, className: "max-w-full" }, { children: _jsxs("span", Object.assign({ className: "flex gap-2" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled text-ellipsis overflow-hidden " }, { children: label })), numberAmount && (_jsxs(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled inline" }, { children: ["(", numberAmount, ")"] })))] })) }))), subtext && (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled" }, { children: subtext })))] }))] })) })) })));
|
|
36
|
+
var { id, className, label, numberAmount, subtext, selected = false, onCheck, onSelect, deactivated = false, labelTextColor, labelCountColor, checkedColor, unCheckedColor, disabledColor } = _a, props = __rest(_a, ["id", "className", "label", "numberAmount", "subtext", "selected", "onCheck", "onSelect", "deactivated", "labelTextColor", "labelCountColor", "checkedColor", "unCheckedColor", "disabledColor"]);
|
|
37
|
+
return (_jsx("div", Object.assign({ className: cn(checkboxVariants({ deactivated })) }, { children: _jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("w-full peer h-6 shrink-0 self-start rounded ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 group ", className), id: id, checked: selected, onSelect: onSelect, onCheckedChange: onCheck, disabled: deactivated !== null && deactivated !== void 0 ? deactivated : false }, props, { children: _jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-start group " }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(CheckboxPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center text-current col-start-1 row-start-1" }, { children: !deactivated && (_jsx(Check, { className: "col-start-1 row-start-1 items-center z-50 text-coreColors-brandColorPrimary", color: checkedColor })) })), _jsxs("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: [!deactivated && !selected && (_jsx(Unchecked, { className: "text-coreColors-secondaryIcon", color: unCheckedColor })), deactivated && (_jsx(DisabledCheckbox, { className: "text-stateColors-disabled", color: disabledColor }))] }))] })), _jsxs("div", Object.assign({ className: "flex flex-col gap-2 items-start overflow-x-auto" }, { children: [label && (_jsx("label", Object.assign({ htmlFor: id, className: "max-w-full" }, { children: _jsxs("span", Object.assign({ className: "flex gap-2" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled text-ellipsis overflow-hidden ", fontColor: labelTextColor }, { children: label })), numberAmount && (_jsxs(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled inline", fontColor: labelCountColor }, { children: ["(", numberAmount, ")"] })))] })) }))), subtext && (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled" }, { children: subtext })))] }))] })) })) })));
|
|
36
38
|
});
|
|
37
39
|
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
38
40
|
export { Checkbox };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../../../components/ui/money.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,aAAa,gGAMjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC7B;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EACR,aAAqB,EACrB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"money.d.ts","sourceRoot":"","sources":["../../../components/ui/money.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,UAAU,SAAS;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;CACd;AAED,QAAA,MAAM,aAAa,gGAMjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,SAAS,EACf,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC7B;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,MAAM,EACN,QAAQ,EACR,aAAqB,EACrB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,UAAU,2CAgDZ;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -13,7 +13,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import * as React from "react";
|
|
15
15
|
import { cva } from "class-variance-authority";
|
|
16
|
-
import { usePathname } from "next/navigation";
|
|
16
|
+
import { usePathname, useSearchParams } from "next/navigation";
|
|
17
17
|
const moneyVariants = cva("", {
|
|
18
18
|
variants: {},
|
|
19
19
|
defaultVariants: {
|
|
@@ -24,14 +24,27 @@ const moneyVariants = cva("", {
|
|
|
24
24
|
function Money(_a) {
|
|
25
25
|
var _b, _c;
|
|
26
26
|
var { price, locale, currency, hideZeroCents = false, styles } = _a, props = __rest(_a, ["price", "locale", "currency", "hideZeroCents", "styles"]);
|
|
27
|
-
|
|
27
|
+
const searchParams = useSearchParams();
|
|
28
|
+
const countryFromParams = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get("country");
|
|
29
|
+
// Only use routeLocale if it's a valid BCP 47 language tag (e.g., "en-US", "fr-FR")
|
|
28
30
|
const routeLocale = ((_c = (_b = usePathname()) === null || _b === void 0 ? void 0 : _b.split("/")) === null || _c === void 0 ? void 0 : _c.pop()) || "";
|
|
29
|
-
|
|
31
|
+
// Valid locale format: 2-3 letter language code, hyphen, 2 letter country code
|
|
32
|
+
const localeRegex = /^[a-z]{2,3}-[A-Z]{2}$/;
|
|
33
|
+
const isValidLocale = routeLocale && localeRegex.test(routeLocale);
|
|
30
34
|
let language = isValidLocale ? routeLocale : locale;
|
|
35
|
+
// Fallback to a default locale if none provided or invalid
|
|
36
|
+
if (!language || typeof language !== "string") {
|
|
37
|
+
language = "en-US";
|
|
38
|
+
}
|
|
39
|
+
// If locale is just a language code (no hyphen), combine with country to create proper BCP 47 locale
|
|
40
|
+
// e.g., lang=ES + country=MX -> es-MX (not es-ES which would default to euros)
|
|
41
|
+
if (language && !localeRegex.test(language) && countryFromParams) {
|
|
42
|
+
language = `${language.toLowerCase()}-${countryFromParams.toUpperCase()}`;
|
|
43
|
+
}
|
|
31
44
|
// Fix for when we want to format in USD in english
|
|
32
45
|
// but language only contains two letter region
|
|
33
|
-
if (currency === "USD" && !
|
|
34
|
-
language = `en-${
|
|
46
|
+
if (currency === "USD" && !language.includes("-")) {
|
|
47
|
+
language = `en-${language}`;
|
|
35
48
|
}
|
|
36
49
|
const formatter = React.useMemo(() => new Intl.NumberFormat(language, {
|
|
37
50
|
style: "currency",
|
|
@@ -11,12 +11,17 @@ export interface RadioGroupItemProps {
|
|
|
11
11
|
selected?: boolean;
|
|
12
12
|
value: string;
|
|
13
13
|
onClick?: React.ReactEventHandler;
|
|
14
|
+
labelTextColor?: string;
|
|
15
|
+
labelCountColor?: string;
|
|
16
|
+
selectedColor?: string;
|
|
17
|
+
unselectedColor?: string;
|
|
18
|
+
disabledColor?: string;
|
|
14
19
|
}
|
|
15
20
|
declare const radiogroupItemVariants: (props?: ({
|
|
16
21
|
variant?: "default" | "selected" | "deactivated" | null | undefined;
|
|
17
22
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
18
23
|
declare const RadioGroupItem: {
|
|
19
|
-
({ value, label, subtext, numberAmount, onSelect, onClick, selected, className, variant, ...props }: RadioGroupItemProps & VariantProps<typeof radiogroupItemVariants>): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
({ value, label, subtext, numberAmount, onSelect, onClick, selected, className, variant, labelTextColor, labelCountColor, selectedColor, unselectedColor, disabledColor, ...props }: RadioGroupItemProps & VariantProps<typeof radiogroupItemVariants>): import("react/jsx-runtime").JSX.Element;
|
|
20
25
|
displayName: string | undefined;
|
|
21
26
|
};
|
|
22
27
|
export { RadioGroup, RadioGroupItem, radiogroupItemVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,UAAU,+JAWd,CAAA;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;
|
|
1
|
+
{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../components/ui/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,UAAU,+JAWd,CAAA;AAGF,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACjC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,QAAA,MAAM,sBAAsB;;mFAc3B,CAAA;AA2CD,QAAA,MAAM,cAAc;yLAgBjB,mBAAmB,GAAG,aAAa,6BAA6B,CAAC;;CA+EnE,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,sBAAsB,EAAE,CAAA"}
|
|
@@ -34,10 +34,10 @@ const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-c
|
|
|
34
34
|
variant: "default",
|
|
35
35
|
},
|
|
36
36
|
});
|
|
37
|
-
const RadioGroupItemLabels = ({ label, numberAmount, subtext, }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-center" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2" }, { children: label })), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }))) : null] })), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-1" }, { children: subtext }))) : null] })));
|
|
37
|
+
const RadioGroupItemLabels = ({ label, numberAmount, subtext, labelColor, labelCountColor, }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-center" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2", fontColor: labelColor }, { children: label })), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled", fontColor: labelCountColor }, { children: `(${numberAmount})` }))) : null] })), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-1" }, { children: subtext }))) : null] })));
|
|
38
38
|
const RadioGroupItem = (_a) => {
|
|
39
|
-
var { value, label = "", subtext, numberAmount = 0, onSelect = () => { }, onClick = () => { }, selected = false, className, variant = "default" } = _a, props = __rest(_a, ["value", "label", "subtext", "numberAmount", "onSelect", "onClick", "selected", "className", "variant"]);
|
|
40
|
-
return (_jsx("div", Object.assign({ className: cn(radiogroupItemVariants({ variant }), className) }, { children: variant === "deactivated" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-off", size: "md", className: "text-stateColors-disabled" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] })) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ value: value, onSelect: onSelect, checked: selected, onClick: onClick, className: cn("flex items-center justify-center cursor-pointer", className) }, props, { children: selected || variant === "selected" ? (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] }))) : (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(RadioGroupPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }) })), _jsx("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle", size: "md", className: "col-start-1 row-start-1 text-coreColors-secondaryIcon items-center z-1" }) }))] })), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] }))) }))) })));
|
|
39
|
+
var { value, label = "", subtext, numberAmount = 0, onSelect = () => { }, onClick = () => { }, selected = false, className, variant = "default", labelTextColor, labelCountColor, selectedColor, unselectedColor, disabledColor } = _a, props = __rest(_a, ["value", "label", "subtext", "numberAmount", "onSelect", "onClick", "selected", "className", "variant", "labelTextColor", "labelCountColor", "selectedColor", "unselectedColor", "disabledColor"]);
|
|
40
|
+
return (_jsx("div", Object.assign({ className: cn(radiogroupItemVariants({ variant }), className) }, { children: variant === "deactivated" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-off", size: "md", className: "text-stateColors-disabled", style: { color: disabledColor } }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext, labelColor: labelTextColor, labelCountColor: labelCountColor })] })) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ value: value, onSelect: onSelect, checked: selected, onClick: onClick, className: cn("flex items-center justify-center cursor-pointer", className) }, props, { children: selected || variant === "selected" ? (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10", color: selectedColor }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext, labelColor: labelTextColor, labelCountColor: labelCountColor })] }))) : (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(RadioGroupPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }) })), _jsx("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle", size: "md", className: "col-start-1 row-start-1 text-coreColors-secondaryIcon items-center z-1", color: unselectedColor }) }))] })), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext, labelColor: labelTextColor, labelCountColor: labelCountColor })] }))) }))) })));
|
|
41
41
|
};
|
|
42
42
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
43
43
|
export { RadioGroup, RadioGroupItem, radiogroupItemVariants };
|