@spark-ui/components
Version:
Spark (Leboncoin design system) components.
319 lines (307 loc) • 10.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/switch/index.ts
var switch_exports = {};
__export(switch_exports, {
Switch: () => Switch
});
module.exports = __toCommonJS(switch_exports);
// src/switch/Switch.tsx
var import_form_field2 = require("@spark-ui/components/form-field");
var import_class_variance_authority5 = require("class-variance-authority");
var import_react2 = require("react");
// src/switch/SwitchInput.tsx
var import_form_field = require("@spark-ui/components/form-field");
var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
var import_Check = require("@spark-ui/icons/Check");
var import_Close = require("@spark-ui/icons/Close");
var import_radix_ui2 = require("radix-ui");
// src/slot/Slot.tsx
var import_radix_ui = require("radix-ui");
var import_react = 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/switch/SwitchInput.styles.ts
var import_internal_utils = require("@spark-ui/internal-utils");
var import_class_variance_authority = require("class-variance-authority");
var styles = (0, import_class_variance_authority.cva)(
(0, import_internal_utils.tw)([
"relative shrink-0 self-baseline",
"cursor-pointer",
"rounded-full border-transparent",
"hover:ring-4",
"transition-colors duration-200 ease-in-out",
"disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3",
"focus-visible:u-outline",
"data-[state=unchecked]:bg-on-surface/dim-4",
"u-shadow-border-transition",
"overflow-x-hidden"
]),
{
variants: {
/**
* Size of the switch input.
*/
size: (0, import_internal_utils.makeVariants)({
sm: (0, import_internal_utils.tw)(["h-sz-24", "w-sz-40", "border-md"]),
md: (0, import_internal_utils.tw)(["h-sz-32", "w-sz-56", "border-[4px]"])
}),
/**
* Color scheme of the switch input.
*/
intent: (0, import_internal_utils.makeVariants)({
main: ["data-[state=checked]:bg-main", "hover:ring-main-container", "text-main"],
support: [
"data-[state=checked]:bg-support",
"hover:ring-support-container",
"text-support"
],
accent: ["data-[state=checked]:bg-accent", "hover:ring-accent-container", "text-accent"],
basic: ["data-[state=checked]:bg-basic", "hover:ring-basic-container", "text-basic"],
success: [
"data-[state=checked]:bg-success",
"hover:ring-success-container",
"text-success"
],
alert: ["data-[state=checked]:bg-alert", "hover:ring-alert-container", "text-alert"],
error: ["data-[state=checked]:bg-error", "hover:ring-error-container", "text-error"],
info: ["data-[state=checked]:bg-info", "hover:ring-info-container", "text-info"],
neutral: [
"data-[state=checked]:bg-neutral",
"hover:ring-neutral-container",
"text-neutral"
]
})
},
defaultVariants: {
intent: "basic",
size: "sm"
}
}
);
var thumbWrapperStyles = (0, import_class_variance_authority.cva)(
[
"pointer-events-none absolute inset-0 flex items-center",
"transition-all duration-200 ease-in-out"
],
{
variants: {
checked: {
true: "translate-x-full",
false: "translate-x-0"
}
}
}
);
var thumbStyles = (0, import_class_variance_authority.cva)(
[
"absolute left-0 top-0 flex items-center justify-center",
"bg-surface",
"rounded-full",
"ring-0",
"transition-all duration-200 ease-in-out"
],
{
variants: {
size: (0, import_internal_utils.makeVariants)({
sm: ["h-sz-20", "w-sz-20"],
md: ["h-sz-24", "w-sz-24"]
}),
checked: {
true: "-translate-x-full",
false: "translate-x-0 text-on-surface/dim-4"
}
},
defaultVariants: {
size: "sm",
checked: false
}
}
);
var thumbCheckSVGStyles = (0, import_class_variance_authority.cva)(["transition-opacity duration-200"], {
variants: {
size: (0, import_internal_utils.makeVariants)({
sm: ["h-sz-10 w-sz-10"],
md: ["h-sz-12 w-sz-12"]
})
},
defaultVariants: {
size: "sm"
}
});
// src/switch/SwitchInput.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var SwitchInput = ({
checked,
checkedIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Check.Check, {}),
defaultChecked,
intent: intentProp,
uncheckedIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Close.Close, {}),
size = "md",
value = "on",
onCheckedChange,
className,
required,
ref,
...rest
}) => {
const [isChecked, setIsChecked] = (0, import_use_combined_state.useCombinedState)(checked, defaultChecked);
const { name, description, state, isRequired, isInvalid } = (0, import_form_field.useFormFieldControl)();
const intent = state ?? intentProp;
const handleCheckedChange = (updatedValue) => {
setIsChecked(updatedValue);
onCheckedChange?.(updatedValue);
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_radix_ui2.Switch.Root,
{
ref,
className: styles({ intent, size, className }),
value,
checked,
defaultChecked,
onCheckedChange: handleCheckedChange,
name,
required: required || isRequired,
"aria-invalid": isInvalid,
"aria-describedby": description,
...rest,
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: thumbWrapperStyles({ checked: isChecked }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_radix_ui2.Switch.Thumb, { className: thumbStyles({ size, checked: isChecked }), children: [
isChecked && checkedIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slot, { className: thumbCheckSVGStyles({ size }), children: checkedIcon }),
!isChecked && uncheckedIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slot, { className: thumbCheckSVGStyles({ size }), children: uncheckedIcon })
] }) })
}
);
};
SwitchInput.displayName = "SwitchInput";
// src/label/Label.tsx
var import_class_variance_authority2 = require("class-variance-authority");
var import_radix_ui3 = require("radix-ui");
var import_jsx_runtime3 = require("react/jsx-runtime");
var Label = ({ className, ref, ...others }) => {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_radix_ui3.Label.Label,
{
ref,
"data-spark-component": "label",
className: (0, import_class_variance_authority2.cx)("text-body-1", className),
...others
}
);
};
Label.displayName = "Label";
// src/label/LabelRequiredIndicator.tsx
var import_class_variance_authority3 = require("class-variance-authority");
var import_jsx_runtime4 = require("react/jsx-runtime");
var LabelRequiredIndicator = ({
className,
children = "*",
ref,
...others
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"span",
{
ref,
"data-spark-component": "label-required-indicator",
role: "presentation",
"aria-hidden": "true",
className: (0, import_class_variance_authority3.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/switch/SwitchLabel.styles.ts
var import_class_variance_authority4 = require("class-variance-authority");
var labelStyles = (0, import_class_variance_authority4.cva)("", {
variants: {
disabled: {
true: ["text-neutral/dim-2", "cursor-not-allowed"],
false: ["cursor-pointer"]
}
},
defaultVariants: {
disabled: false
}
});
// src/switch/SwitchLabel.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var SwitchLabel = ({ className, disabled, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Label2, { className: labelStyles({ disabled, className }), ...others });
// src/switch/Switch.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var ID_PREFIX = ":switch";
var Switch = ({
size = "md",
children,
className,
id,
disabled,
reverse = false,
ref,
...rest
}) => {
const field = (0, import_form_field2.useFormFieldControl)();
const labelID = `${ID_PREFIX}-label-${(0, import_react2.useId)()}`;
const innerID = `${ID_PREFIX}-input-${(0, import_react2.useId)()}`;
const fieldID = field.id || id || innerID;
const switchLabel = children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SwitchLabel, { disabled, htmlFor: fieldID, id: labelID, children });
const switchInput = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
SwitchInput,
{
ref,
size,
id: fieldID,
disabled,
"aria-labelledby": children ? labelID : field.labelId,
...rest
}
);
const content = reverse ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
switchLabel,
switchInput
] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
switchInput,
switchLabel
] });
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"div",
{
"data-spark-component": "switch",
className: (0, import_class_variance_authority5.cx)("gap-md text-body-1 flex items-center", className),
children: content
}
);
};
Switch.displayName = "Switch";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Switch
});
//# sourceMappingURL=index.js.map