mt-flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
152 lines (151 loc) • 7.15 kB
JavaScript
;
'use client';
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 (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SheetTrigger = exports.SheetTitle = exports.SheetHeader = exports.SheetFooter = exports.SheetDescription = exports.SheetContent = exports.Sheet = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const SheetPrimitive = __importStar(require("@radix-ui/react-dialog"));
const class_variance_authority_1 = require("class-variance-authority");
const lucide_react_1 = require("lucide-react");
const React = __importStar(require("react"));
const utils_1 = require("~/src/lib/utils");
const Sheet = SheetPrimitive.Root;
exports.Sheet = Sheet;
const SheetTrigger = SheetPrimitive.Trigger;
exports.SheetTrigger = SheetTrigger;
const portalVariants = (0, class_variance_authority_1.cva)('fixed inset-0 z-50 flex', {
variants: {
position: {
top: 'items-start',
bottom: 'items-end',
left: 'justify-start',
right: 'justify-end',
},
},
defaultVariants: { position: 'right' },
});
const SheetPortal = ({ position, className, children, ...props }) => ((0, jsx_runtime_1.jsx)(SheetPrimitive.Portal, { className: (0, utils_1.cn)(className), ...props, children: (0, jsx_runtime_1.jsx)("div", { className: portalVariants({ position }), children: children }) }));
SheetPortal.displayName = SheetPrimitive.Portal.displayName;
const SheetOverlay = React.forwardRef(({ className, children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SheetPrimitive.Overlay, { className: (0, utils_1.cn)('bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in fixed inset-0 z-50 backdrop-blur-sm transition-all duration-100', className), ...props, ref: ref })));
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
const sheetVariants = (0, class_variance_authority_1.cva)('fixed z-50 scale-100 gap-4 bg-background p-6 opacity-100 shadow-lg border', {
variants: {
position: {
top: 'animate-in slide-in-from-top w-full duration-300',
bottom: 'animate-in slide-in-from-bottom w-full duration-300',
left: 'animate-in slide-in-from-left h-full duration-300',
right: 'animate-in slide-in-from-right h-full duration-300',
},
size: {
content: '',
default: '',
sm: '',
lg: '',
xl: '',
full: '',
},
},
compoundVariants: [
{
position: ['top', 'bottom'],
size: 'content',
class: 'max-h-screen',
},
{
position: ['top', 'bottom'],
size: 'default',
class: 'h-1/3',
},
{
position: ['top', 'bottom'],
size: 'sm',
class: 'h-1/4',
},
{
position: ['top', 'bottom'],
size: 'lg',
class: 'h-1/2',
},
{
position: ['top', 'bottom'],
size: 'xl',
class: 'h-5/6',
},
{
position: ['top', 'bottom'],
size: 'full',
class: 'h-screen',
},
{
position: ['right', 'left'],
size: 'content',
class: 'max-w-screen',
},
{
position: ['right', 'left'],
size: 'default',
class: 'w-1/3',
},
{
position: ['right', 'left'],
size: 'sm',
class: 'w-1/4',
},
{
position: ['right', 'left'],
size: 'lg',
class: 'w-1/2',
},
{
position: ['right', 'left'],
size: 'xl',
class: 'w-5/6',
},
{
position: ['right', 'left'],
size: 'full',
class: 'w-screen',
},
],
defaultVariants: {
position: 'right',
size: 'default',
},
});
const SheetContent = React.forwardRef(({ position, size, className, children, ...props }, ref) => ((0, jsx_runtime_1.jsxs)(SheetPortal, { position: position, children: [(0, jsx_runtime_1.jsx)(SheetOverlay, {}), (0, jsx_runtime_1.jsxs)(SheetPrimitive.Content, { ref: ref, className: (0, utils_1.cn)(sheetVariants({ position, size }), className), ...props, children: [children, (0, jsx_runtime_1.jsxs)(SheetPrimitive.Close, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }), (0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: "Close" })] })] })] })));
exports.SheetContent = SheetContent;
SheetContent.displayName = SheetPrimitive.Content.displayName;
const SheetHeader = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('flex flex-col space-y-2 text-center sm:text-left', className), ...props }));
exports.SheetHeader = SheetHeader;
SheetHeader.displayName = 'SheetHeader';
const SheetFooter = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className), ...props }));
exports.SheetFooter = SheetFooter;
SheetFooter.displayName = 'SheetFooter';
const SheetTitle = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SheetPrimitive.Title, { ref: ref, className: (0, utils_1.cn)('text-foreground text-lg font-semibold', className), ...props })));
exports.SheetTitle = SheetTitle;
SheetTitle.displayName = SheetPrimitive.Title.displayName;
const SheetDescription = React.forwardRef(({ className, ...props }, ref) => ((0, jsx_runtime_1.jsx)(SheetPrimitive.Description, { ref: ref, className: (0, utils_1.cn)('text-muted-foreground text-sm', className), ...props })));
exports.SheetDescription = SheetDescription;
SheetDescription.displayName = SheetPrimitive.Description.displayName;