lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
144 lines • 6.69 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const React = __importStar(require("react"));
const framer_motion_1 = require("framer-motion");
const utils_1 = require("@/components/lib/utils"); // Assuming you have a utility for combining class names
const CollapsibleContext = React.createContext(undefined);
const Collapsible = React.forwardRef(({ children, open, defaultOpen = false, disabled = false, onOpenChange, className, ...props }, ref) => {
const [isOpen, setIsOpen] = React.useState(defaultOpen);
const isControlled = open !== undefined;
const currentOpen = isControlled ? open : isOpen;
const handleOpenChange = React.useCallback((value) => {
if (disabled)
return;
if (!isControlled) {
setIsOpen(value);
}
onOpenChange?.(value);
}, [disabled, isControlled, onOpenChange]);
return ((0, jsx_runtime_1.jsx)(CollapsibleContext.Provider, { value: { open: currentOpen, onOpenChange: handleOpenChange, disabled }, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cn)("", className), "data-state": currentOpen ? "open" : "closed", "data-disabled": disabled ? "" : undefined, ...props, children: children }) }));
});
exports.Collapsible = Collapsible;
Collapsible.displayName = "Collapsible";
const CollapsibleTrigger = React.forwardRef(({ className, children, asChild = false, ...props }, ref) => {
const context = React.useContext(CollapsibleContext);
if (!context) {
throw new Error("CollapsibleTrigger must be used within a Collapsible");
}
const { open, onOpenChange, disabled } = context;
const handleClick = () => {
onOpenChange(!open);
};
if (asChild) {
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: React.Children.map(children, (child) => {
if (React.isValidElement(child)) {
const element = child;
return React.cloneElement(element, {
...element.props,
ref,
onClick: (e) => {
handleClick();
if (element.props.onClick) {
element.props.onClick(e);
}
},
disabled: disabled || element.props.disabled,
"data-state": open ? "open" : "closed",
"data-disabled": disabled ? "" : undefined,
"aria-expanded": open,
});
}
return child;
}) }));
}
return ((0, jsx_runtime_1.jsx)("button", { ref: ref, type: "button", disabled: disabled, "data-state": open ? "open" : "closed", "data-disabled": disabled ? "" : undefined, "aria-expanded": open, className: (0, utils_1.cn)("", className), onClick: handleClick, ...props, children: children }));
});
exports.CollapsibleTrigger = CollapsibleTrigger;
CollapsibleTrigger.displayName = "CollapsibleTrigger";
const CollapsibleContent = React.forwardRef(({ className, children, forceMount, ...props }, ref) => {
const context = React.useContext(CollapsibleContext);
if (!context) {
throw new Error("CollapsibleContent must be used within a Collapsible");
}
const { open } = context;
const contentRef = React.useRef(null);
React.useImperativeHandle(ref, () => contentRef.current);
// Framer Motion variants for a professional, smooth animation
const variants = {
closed: {
height: 0,
opacity: 0,
scale: 0.98,
y: -10,
transition: {
height: { duration: 0.2 },
opacity: { duration: 0.15 },
scale: { duration: 0.2 },
y: { duration: 0.2 }
}
},
open: {
height: "auto",
opacity: 1,
scale: 1,
y: 0,
transition: {
height: {
type: "spring",
damping: 25,
stiffness: 300
},
opacity: { duration: 0.2, delay: 0.05 },
scale: {
type: "spring",
damping: 20,
stiffness: 200
},
y: {
type: "spring",
damping: 20,
stiffness: 200
}
}
},
};
return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: false, children: (open || forceMount) && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: "closed", animate: "open", exit: "closed", variants: variants, style: { overflow: "hidden" }, className: (0, utils_1.cn)(className), "data-state": open ? "open" : "closed", ...props, children: (0, jsx_runtime_1.jsx)("div", { children: children }) }, "collapsible-content")) }));
});
exports.CollapsibleContent = CollapsibleContent;
CollapsibleContent.displayName = "CollapsibleContent";
//# sourceMappingURL=collapsible.js.map