@plexui/ui 0.20.9 → 0.20.10
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.
|
@@ -16,6 +16,6 @@ export const Checkbox = ({ className, label, description, id: propsId, disabled,
|
|
|
16
16
|
if (!event.defaultPrevented && event.detail > 1)
|
|
17
17
|
event.preventDefault();
|
|
18
18
|
}, children: label }));
|
|
19
|
-
return (_jsxs("div", { "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-orientation": orientation, className: clsx(className, s.Container), children: [_jsx(RadixCheckbox.Root, { className: s.Checkbox, id: id, disabled: disabled, "data-pill": pill ? "" : undefined, "data-variant": variant, ...restProps, "aria-describedby": ariaDescribedBy, children: _jsx(RadixCheckbox.Indicator, { className: s.CheckMark }) }), descriptionId ? (_jsxs("div", { className: s.LabelGroup, children: [labelElement, _jsx("span", { id: descriptionId, className: s.Description, children: description })] })) : (labelElement)] }));
|
|
19
|
+
return (_jsxs("div", { "data-disabled": disabled ? "" : undefined, "data-has-label": label ? "" : undefined, "data-orientation": orientation, className: clsx(className, s.Container), children: [_jsx(RadixCheckbox.Root, { className: s.Checkbox, id: id, disabled: disabled, "data-pill": pill ? "" : undefined, "data-variant": variant, ...restProps, "aria-describedby": ariaDescribedBy, children: _jsx(RadixCheckbox.Indicator, { className: s.CheckMark, forceMount: true }) }), descriptionId ? (_jsxs("div", { className: s.LabelGroup, children: [labelElement, _jsx("span", { id: descriptionId, className: s.Description, children: description })] })) : (labelElement)] }));
|
|
20
20
|
};
|
|
21
21
|
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,wDAAwD,CAAA;AAiDtE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,SAAS,EACT,KAAK,EACL,WAAW,EACX,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,WAAW,GAAG,MAAM,EACpB,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,OAAO,EACjB,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAC7B,wEAAwE;IACxE,mCAAmC;IACnC,MAAM,aAAa,GAAG,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAA;IAClF,MAAM,eAAe,GACnB,CAAC,aAAa,EAAG,SAA6C,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAC7G,SAAS,CAAA;IACX,MAAM,YAAY,GAAG,KAAK,IAAI,CAC5B,gBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,CAAC,CAAC,KAAK,EAClB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;gBAAE,KAAK,CAAC,cAAc,EAAE,CAAA;QACzE,CAAC,YAEA,KAAK,GACA,CACT,CAAA;IAED,OAAO,CACL,gCACiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,sBACpB,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aAEvC,KAAC,aAAa,CAAC,IAAI,IACjB,SAAS,EAAE,CAAC,CAAC,QAAQ,EACrB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,eACP,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAClB,OAAO,KACjB,SAAS,sBACK,eAAe,YAEjC,KAAC,aAAa,CAAC,SAAS,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,EAA0C,KAAK,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,CAAC,MAAM,wDAAwD,CAAA;AAiDtE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,SAAS,EACT,KAAK,EACL,WAAW,EACX,EAAE,EAAE,OAAO,EACX,QAAQ,EACR,WAAW,GAAG,MAAM,EACpB,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,OAAO,EACjB,GAAG,SAAS,EACE,EAAE,EAAE;IAClB,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IACvB,MAAM,EAAE,GAAG,OAAO,IAAI,OAAO,CAAA;IAC7B,wEAAwE;IACxE,mCAAmC;IACnC,MAAM,aAAa,GAAG,KAAK,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,oBAAoB,CAAC,CAAC,CAAC,SAAS,CAAA;IAClF,MAAM,eAAe,GACnB,CAAC,aAAa,EAAG,SAA6C,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAC7G,SAAS,CAAA;IACX,MAAM,YAAY,GAAG,KAAK,IAAI,CAC5B,gBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAE,CAAC,CAAC,KAAK,EAClB,WAAW,EAAE,CAAC,KAAK,EAAE,EAAE;YACrB,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;gBAAE,KAAK,CAAC,cAAc,EAAE,CAAA;QACzE,CAAC,YAEA,KAAK,GACA,CACT,CAAA;IAED,OAAO,CACL,gCACiB,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,oBACxB,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,sBACpB,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aAEvC,KAAC,aAAa,CAAC,IAAI,IACjB,SAAS,EAAE,CAAC,CAAC,QAAQ,EACrB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,eACP,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAClB,OAAO,KACjB,SAAS,sBACK,eAAe,YAEjC,KAAC,aAAa,CAAC,SAAS,IAAC,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,UAAU,SAAG,GAC3C,EACpB,aAAa,CAAC,CAAC,CAAC,CACf,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aACzB,YAAY,EACb,eAAM,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,CAAC,WAAW,YAC9C,WAAW,GACP,IACH,CACP,CAAC,CAAC,CAAC,CACF,YAAY,CACb,IACG,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { Checkbox as RadixCheckbox } from \"radix-ui\"\nimport { type FocusEventHandler, type ReactNode, useId } from \"react\"\nimport s from \"@plexui/styles/components/Checkbox/Checkbox.module.css\"\n\nexport type CheckboxProps = {\n /** The `id` of the checkbox. */\n id?: string\n /** The state of the checkbox when it is initially rendered. Use when you do not need to control its state. */\n defaultChecked?: boolean | \"indeterminate\"\n /** The controlled state of the checkbox. Must be used in conjunction with `onCheckedChange`. */\n checked?: boolean | \"indeterminate\"\n /** Optional accessible label rendered to the right of the checkbox. */\n label?: ReactNode\n /** Optional second line below the label. Linked via `aria-describedby`. */\n description?: ReactNode\n /** Event handler called when the state of the checkbox changes. */\n onCheckedChange?: (nextState: boolean) => void\n /** Event handler called when the checkbox looses focus. */\n onBlur?: FocusEventHandler<HTMLButtonElement>\n /** Event handler called when the checkbox gains focus. */\n onFocus?: FocusEventHandler<HTMLButtonElement>\n /** When `true`, prevents the user from interacting with the checkbox. */\n disabled?: boolean\n /** When `true`, indicates that the user must check the checkbox before the owning form can be submitted. */\n required?: boolean\n /** The name of the checkbox. Submitted with its owning form as part of a name/value pair. */\n name?: string\n /** The value given as data when submitted with a `name`. */\n value?: string\n /** CSS classes applied to wrapper node */\n className?: string\n /**\n * The orientation of the checkbox relative to the label.\n *\n * @default \"left\"\n */\n orientation?: \"left\" | \"right\"\n /**\n * Determines if the checkbox should be a fully rounded pill shape.\n * @default false\n */\n pill?: boolean\n /**\n * Visual style variant for the checkbox indicator.\n * - `\"solid\"` — filled background when checked (default)\n * - `\"ghost\"` — no border or background, checkmark only\n * @default \"solid\"\n */\n variant?: \"solid\" | \"ghost\"\n}\n\nexport const Checkbox = ({\n className,\n label,\n description,\n id: propsId,\n disabled,\n orientation = \"left\",\n pill = false,\n variant = \"solid\",\n ...restProps\n}: CheckboxProps) => {\n const reactId = useId()\n const id = propsId ?? reactId\n // The description only renders next to a label; it comes before any ids\n // the caller (a Field, say) passes\n const descriptionId = label && description ? `${id}-label-description` : undefined\n const ariaDescribedBy =\n [descriptionId, (restProps as { \"aria-describedby\"?: string })[\"aria-describedby\"]].filter(Boolean).join(\" \") ||\n undefined\n const labelElement = label && (\n <label\n htmlFor={id}\n className={s.Label}\n onMouseDown={(event) => {\n if (!event.defaultPrevented && event.detail > 1) event.preventDefault()\n }}\n >\n {label}\n </label>\n )\n\n return (\n <div\n data-disabled={disabled ? \"\" : undefined}\n data-has-label={label ? \"\" : undefined}\n data-orientation={orientation}\n className={clsx(className, s.Container)}\n >\n <RadixCheckbox.Root\n className={s.Checkbox}\n id={id}\n disabled={disabled}\n data-pill={pill ? \"\" : undefined}\n data-variant={variant}\n {...restProps}\n aria-describedby={ariaDescribedBy}\n >\n <RadixCheckbox.Indicator className={s.CheckMark} forceMount />\n </RadixCheckbox.Root>\n {descriptionId ? (\n <div className={s.LabelGroup}>\n {labelElement}\n <span id={descriptionId} className={s.Description}>\n {description}\n </span>\n </div>\n ) : (\n labelElement\n )}\n </div>\n )\n}\n"]}
|