@spark-ui/components
Version:
Spark (Leboncoin design system) components.
512 lines (491 loc) • 17.7 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/checkbox/index.ts
var checkbox_exports = {};
__export(checkbox_exports, {
Checkbox: () => Checkbox3,
CheckboxGroup: () => CheckboxGroup
});
module.exports = __toCommonJS(checkbox_exports);
// src/checkbox/Checkbox.tsx
var import_form_field = require("@spark-ui/components/form-field");
var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
var import_class_variance_authority6 = require("class-variance-authority");
var import_react4 = require("react");
// src/checkbox/CheckboxGroupContext.tsx
var import_react = require("react");
var CheckboxGroupContext = (0, import_react.createContext)({});
var useCheckboxGroup = () => {
const context = (0, import_react.useContext)(CheckboxGroupContext);
return context;
};
// src/checkbox/CheckboxInput.tsx
var import_Check = require("@spark-ui/icons/Check");
var import_Minus = require("@spark-ui/icons/Minus");
var import_radix_ui3 = require("radix-ui");
// src/icon/Icon.tsx
var import_react3 = require("react");
// src/slot/Slot.tsx
var import_radix_ui = require("radix-ui");
var import_react2 = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var Slottable = import_radix_ui.Slot.Slottable;
var Slot = ({ ref, ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
};
// src/visually-hidden/VisuallyHidden.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
const Component = asChild ? Slot : "span";
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Component,
{
...props,
ref,
style: {
// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
position: "absolute",
border: 0,
width: 1,
height: 1,
padding: 0,
margin: -1,
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
wordWrap: "normal",
...props.style
}
}
);
};
VisuallyHidden.displayName = "VisuallyHidden";
// src/icon/Icon.styles.tsx
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority = require("class-variance-authority");
var iconStyles = (0, import_class_variance_authority.cva)(["fill-current shrink-0"], {
variants: {
/**
* Color scheme of the icon.
*/
intent: (0, import_internal_utils.makeVariants)({
current: ["text-current"],
main: ["text-main"],
support: ["text-support"],
accent: ["text-accent"],
basic: ["text-basic"],
success: ["text-success"],
alert: ["text-alert"],
error: ["text-error"],
info: ["text-info"],
neutral: ["text-neutral"]
}),
/**
* Sets the size of the icon.
*/
size: (0, import_internal_utils.makeVariants)({
current: ["u-current-font-size"],
sm: ["w-sz-16", "h-sz-16"],
md: ["w-sz-24", "h-sz-24"],
lg: ["w-sz-32", "h-sz-32"],
xl: ["w-sz-40", "h-sz-40"]
})
}
});
// src/icon/Icon.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Icon = ({
label,
className,
size = "current",
intent = "current",
children,
...others
}) => {
const child = import_react3.Children.only(children);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
(0, import_react3.cloneElement)(child, {
className: iconStyles({ className, size, intent }),
"data-spark-component": "icon",
"aria-hidden": "true",
focusable: "false",
...others
}),
label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
] });
};
Icon.displayName = "Icon";
// src/checkbox/CheckboxIndicator.tsx
var import_radix_ui2 = require("radix-ui");
var import_jsx_runtime4 = require("react/jsx-runtime");
var CheckboxIndicatorPrimitive = import_radix_ui2.Checkbox.CheckboxIndicator;
var CheckboxIndicator = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxIndicatorPrimitive, { className: "flex size-full items-center justify-center", ...props });
CheckboxIndicator.displayName = "CheckboxIndicator";
// src/checkbox/CheckboxInput.styles.ts
var import_internal_utils2 = require("@spark-ui/internal-utils");
var import_class_variance_authority2 = require("class-variance-authority");
var checkboxInputStyles = (0, import_class_variance_authority2.cva)(
[
"size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent",
"disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0",
"focus-visible:u-outline",
"hover:ring-4 hover:cursor-pointer",
"u-shadow-border-transition"
],
{
variants: {
/**
* Color scheme of the checkbox.
*/
intent: (0, import_internal_utils2.makeVariants)({
main: [
"text-on-main",
"hover:ring-main-container",
// data-[ok=cool]:bg-main
"data-[state=unchecked]:border-outline",
"data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main",
"data-[state=checked]:border-main data-[state=checked]:bg-main"
],
support: [
"text-on-support",
"hover:ring-support-container",
"data-[state=unchecked]:border-outline",
"data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support",
"data-[state=checked]:border-support data-[state=checked]:bg-support"
],
accent: [
"text-on-accent",
"hover:ring-accent-container",
"data-[state=unchecked]:border-outline",
"data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent",
"data-[state=checked]:border-accent data-[state=checked]:bg-accent"
],
basic: [
"text-on-basic",
"hover:ring-basic-container",
"data-[state=unchecked]:border-outline",
"data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic",
"data-[state=checked]:border-basic data-[state=checked]:bg-basic"
],
success: [
"text-on-success",
"hover:ring-success-container",
"data-[state=unchecked]:border-outline",
"data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success",
"data-[state=checked]:border-success data-[state=checked]:bg-success"
],
alert: [
"text-on-alert",
"hover:ring-alert-container",
"data-[state=unchecked]:border-outline",
"data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert",
"data-[state=checked]:border-alert data-[state=checked]:bg-alert"
],
error: [
"text-on-error",
"hover:ring-error-container",
"data-[state=unchecked]:border-outline",
"data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error",
"data-[state=checked]:border-error data-[state=checked]:bg-error"
],
info: [
"text-on-info",
"hover:ring-info-container",
"data-[state=unchecked]:border-outline",
"data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info",
"data-[state=checked]:border-info data-[state=checked]:bg-info"
],
neutral: [
"text-on-neutral",
"hover:ring-neutral-container",
"data-[state=unchecked]:border-outline",
"data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral",
"data-[state=checked]:border-neutral data-[state=checked]:bg-neutral"
]
})
},
defaultVariants: {
intent: "basic"
}
}
);
// src/checkbox/CheckboxInput.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var CheckboxPrimitive = import_radix_ui3.Checkbox.Checkbox;
var CheckboxInput = ({
className,
icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Check.Check, {}),
indeterminateIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Minus.Minus, {}),
intent,
checked,
ref,
...others
}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
CheckboxPrimitive,
{
ref,
className: checkboxInputStyles({ intent, className }),
checked,
...others,
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: "sm", children: checked === "indeterminate" ? indeterminateIcon : icon }) })
}
);
CheckboxInput.displayName = "CheckboxInput";
// src/label/Label.tsx
var import_class_variance_authority3 = require("class-variance-authority");
var import_radix_ui4 = require("radix-ui");
var import_jsx_runtime6 = require("react/jsx-runtime");
var Label = ({ className, ref, ...others }) => {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
import_radix_ui4.Label.Label,
{
ref,
"data-spark-component": "label",
className: (0, import_class_variance_authority3.cx)("text-body-1", className),
...others
}
);
};
Label.displayName = "Label";
// src/label/LabelRequiredIndicator.tsx
var import_class_variance_authority4 = require("class-variance-authority");
var import_jsx_runtime7 = require("react/jsx-runtime");
var LabelRequiredIndicator = ({
className,
children = "*",
ref,
...others
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"span",
{
ref,
"data-spark-component": "label-required-indicator",
role: "presentation",
"aria-hidden": "true",
className: (0, import_class_variance_authority4.cx)(className, "text-caption text-on-surface/dim-1"),
...others,
children
}
);
};
LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
// src/label/index.ts
var Label2 = Object.assign(Label, {
RequiredIndicator: LabelRequiredIndicator
});
Label2.displayName = "Label";
LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
// src/checkbox/CheckboxLabel.styles.ts
var import_class_variance_authority5 = require("class-variance-authority");
var labelStyles = (0, import_class_variance_authority5.cva)("grow", {
variants: {
disabled: {
true: ["text-neutral/dim-2", "cursor-not-allowed"],
false: ["cursor-pointer"]
}
},
defaultVariants: {
disabled: false
}
});
// src/checkbox/CheckboxLabel.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var CheckboxLabel = ({ disabled, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label2, { className: labelStyles({ disabled }), ...others });
CheckboxLabel.displayName = "CheckboxLabel";
// src/checkbox/Checkbox.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var ID_PREFIX = ":checkbox";
var Checkbox3 = ({
id: idProp,
className,
intent: intentProp,
checked: checkedProp,
value,
disabled,
reverse = false,
onCheckedChange,
children,
ref: forwardedRef,
...others
}) => {
const checkboxId = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
const innerId = idProp || checkboxId;
const innerLabelId = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
const field = (0, import_form_field.useFormFieldControl)();
const group = useCheckboxGroup();
const rootRef = (0, import_react4.useRef)(null);
const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, rootRef);
const getCheckboxAttributes = ({
fieldState,
groupState,
checkboxIntent
}) => {
const name2 = fieldState.name ?? groupState.name;
const isRequired2 = fieldState.isRequired ?? groupState.isRequired;
const state = fieldState.state ?? groupState.state;
const isInvalid2 = fieldState.isInvalid ?? groupState.isInvalid;
const isFieldEnclosed = fieldState.id !== groupState.id;
const id2 = isFieldEnclosed ? fieldState.id : void 0;
const description2 = isFieldEnclosed ? fieldState.description : void 0;
const intent2 = state ?? checkboxIntent ?? groupState.intent;
return { name: name2, isRequired: isRequired2, isInvalid: isInvalid2, id: id2, description: description2, intent: intent2 };
};
const checked = value ? group.value?.includes(value) : checkedProp;
const handleCheckedChange = (isChecked) => {
onCheckedChange?.(isChecked);
const rootRefValue = rootRef.current?.value;
if (rootRefValue && group.onCheckedChange) {
group.onCheckedChange(isChecked, rootRefValue);
}
};
const {
id,
name,
isInvalid,
description,
intent,
isRequired: isRequiredAttr
} = getCheckboxAttributes({
fieldState: field,
groupState: group,
checkboxIntent: intentProp
});
const isRequired = (0, import_react4.useMemo)(() => {
if (!group) return isRequiredAttr;
return isRequiredAttr ? !group.value?.length : false;
}, [group, isRequiredAttr]);
const checkboxLabel = children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxLabel, { disabled, htmlFor: id || innerId, id: innerLabelId, children });
const checkboxInput = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
CheckboxInput,
{
ref,
id: id || innerId,
name,
value,
intent,
checked,
disabled,
required: isRequired,
"aria-describedby": description,
"aria-invalid": isInvalid,
onCheckedChange: handleCheckedChange,
"aria-labelledby": children ? innerLabelId : field.labelId,
...others
}
);
const content = group.reverse || reverse ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
checkboxLabel,
checkboxInput
] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
checkboxInput,
checkboxLabel
] });
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"div",
{
"data-spark-component": "checkbox",
className: (0, import_class_variance_authority6.cx)("gap-md text-body-1 relative flex items-start", className),
children: content
}
);
};
Checkbox3.displayName = "Checkbox";
// src/checkbox/CheckboxGroup.tsx
var import_form_field2 = require("@spark-ui/components/form-field");
var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
var import_react5 = require("react");
// src/checkbox/CheckboxGroup.styles.ts
var import_class_variance_authority7 = require("class-variance-authority");
var checkboxGroupStyles = (0, import_class_variance_authority7.cva)(["flex"], {
variants: {
/**
* Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.
*/
orientation: {
vertical: ["flex-col", "gap-lg"],
horizontal: ["gap-xl"]
}
}
});
// src/checkbox/CheckboxGroup.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var CheckboxGroup = ({
name: nameProp,
value: valueProp,
defaultValue,
className,
intent,
orientation = "vertical",
onCheckedChange: onCheckedChangeProp,
reverse = false,
children,
ref,
...others
}) => {
const [value, setValue] = (0, import_use_combined_state.useCombinedState)(valueProp, defaultValue);
const field = (0, import_form_field2.useFormFieldControl)();
const onCheckedChangeRef = (0, import_react5.useRef)(onCheckedChangeProp);
const { id, labelId, description, state, isInvalid, isRequired } = field;
const name = nameProp ?? field.name;
const current = (0, import_react5.useMemo)(() => {
const handleCheckedChange = (checked, changed) => {
const values = value || [];
const modified = checked ? [...values, changed] : values.filter((val) => val !== changed);
setValue(modified);
if (onCheckedChangeRef.current) {
onCheckedChangeRef.current(modified);
}
};
return {
id,
name,
value,
intent,
state,
isInvalid,
description,
isRequired,
reverse,
onCheckedChange: handleCheckedChange
};
}, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse]);
(0, import_react5.useEffect)(() => {
onCheckedChangeRef.current = onCheckedChangeProp;
}, [onCheckedChangeProp]);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"div",
{
ref,
className: checkboxGroupStyles({ className, orientation }),
role: "group",
"aria-labelledby": labelId,
"aria-describedby": description,
...others,
children
}
) });
};
CheckboxGroup.displayName = "CheckboxGroup";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Checkbox,
CheckboxGroup
});
//# sourceMappingURL=index.js.map