UNPKG

@spark-ui/components

Version:

Spark (Leboncoin design system) components.

140 lines (133 loc) 5.35 kB
"use strict"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; 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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( // If the importer is in node compatibility mode or this is not an ESM // file that has been converted to a CommonJS file using a Babel- // compatible transform (i.e. "__esModule" has not been set), then set // "default" to the CommonJS "module.exports" for node compatibility. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // src/collapsible/index.ts var collapsible_exports = {}; __export(collapsible_exports, { Collapsible: () => Collapsible2 }); module.exports = __toCommonJS(collapsible_exports); // src/collapsible/Collapsible.tsx var collapsible = __toESM(require("@zag-js/collapsible")); var import_react2 = require("@zag-js/react"); var import_react3 = require("react"); // 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/collapsible/Collapsible.tsx var import_jsx_runtime2 = require("react/jsx-runtime"); var CollapsibleContext = (0, import_react3.createContext)(null); var Collapsible = ({ asChild = false, children, defaultOpen = false, disabled = false, onOpenChange, open, ids, ref, ...props }) => { const service = (0, import_react2.useMachine)(collapsible.machine, { open, defaultOpen, disabled, id: (0, import_react3.useId)(), ids, onOpenChange(details) { onOpenChange?.(details.open); } }); const api = collapsible.connect(service, import_react2.normalizeProps); const Component = asChild ? Slot : "div"; const mergedProps = (0, import_react2.mergeProps)(api.getRootProps(), props); return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapsibleContext.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { "data-spark-component": "collapsible", ref, ...mergedProps, children }) }); }; Collapsible.displayName = "Collapsible"; var useCollapsibleContext = () => { const context = (0, import_react3.useContext)(CollapsibleContext); if (!context) { throw Error("useCollapsibleContext must be used within a Collapsible provider"); } return context; }; // src/collapsible/CollapsibleContent.tsx var import_react4 = require("@zag-js/react"); var import_class_variance_authority = require("class-variance-authority"); var import_jsx_runtime3 = require("react/jsx-runtime"); var Content = ({ asChild = false, className, children, ref, ...props }) => { const { getContentProps } = useCollapsibleContext(); const Component = asChild ? Slot : "div"; const contentProps = getContentProps(); const mergedProps = (0, import_react4.mergeProps)(contentProps, { className: (0, import_class_variance_authority.cx)( "overflow-hidden", "motion-reduce:animate-none!", "[&[hidden]]:hidden", "data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out", className ), ...props }); return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { ref, "data-spark-component": "collapsible-content", ...mergedProps, children }); }; Content.displayName = "Collapsible.Content"; // src/collapsible/CollapsibleTrigger.tsx var import_react5 = require("@zag-js/react"); var import_jsx_runtime4 = require("react/jsx-runtime"); var Trigger = ({ asChild = false, children, ref, ...props }) => { const collapsibleContext = useCollapsibleContext(); const Component = asChild ? Slot : "button"; const mergedProps = (0, import_react5.mergeProps)(collapsibleContext.getTriggerProps(), props); return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, "data-spark-component": "collapsible-trigger", ...mergedProps, children }); }; Trigger.displayName = "Collapsible.Trigger"; // src/collapsible/index.ts var Collapsible2 = Object.assign(Collapsible, { Trigger, Content }); Collapsible2.displayName = "Collapsible"; Trigger.displayName = "Collapsible.Trigger"; Content.displayName = "Collapsible.Content"; // Annotate the CommonJS export names for ESM import in node: 0 && (module.exports = { Collapsible }); //# sourceMappingURL=index.js.map