UNPKG

@spark-ui/components

Version:

Spark (Leboncoin design system) components.

139 lines (134 loc) 4.29 kB
"use strict"; 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/spinner/index.ts var spinner_exports = {}; __export(spinner_exports, { Spinner: () => Spinner }); module.exports = __toCommonJS(spinner_exports); // 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/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/spinner/Spinner.styles.tsx var import_internal_utils = require("@spark-ui/internal-utils"); var import_class_variance_authority = require("class-variance-authority"); var defaultVariants = { intent: "current", size: "current", isBackgroundVisible: false }; var spinnerStyles = (0, import_class_variance_authority.cva)( ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"], { variants: { /** * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size. */ size: { current: ["u-current-font-size"], sm: ["w-sz-20", "h-sz-20"], md: ["w-sz-28", "h-sz-28"], full: ["w-full", "h-full"] }, /** * Color scheme of the spinner. */ intent: (0, import_internal_utils.makeVariants)({ current: ["border-current"], main: ["border-main"], support: ["border-support"], accent: ["border-accent"], basic: ["border-basic"], success: ["border-success"], alert: ["border-alert"], error: ["border-error"], info: ["border-info"], neutral: ["border-neutral"] }), /** * Size of the button. */ isBackgroundVisible: { true: ["border-b-neutral-container", "border-l-neutral-container"], false: ["border-b-transparent", "border-l-transparent"] } }, defaultVariants } ); // src/spinner/Spinner.tsx var import_jsx_runtime3 = require("react/jsx-runtime"); var Spinner = ({ className, size = "current", intent = "current", label, isBackgroundVisible, ref, ...others }) => { return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)( "span", { role: "status", "data-spark-component": "spinner", ref, className: spinnerStyles({ className, size, intent, isBackgroundVisible }), ...others, children: label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label }) } ); }; // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { Spinner }); //# sourceMappingURL=index.js.map