"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[5970],{"./src/components/ui/Skeleton/Skeleton.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AvatarSkeletonExample:()=>AvatarSkeletonExample,AvatarSkeletonSizes:()=>AvatarSkeletonSizes,CardSkeletonExample:()=>CardSkeletonExample,Circular:()=>Circular,CustomRounded:()=>CustomRounded,DashboardSkeleton:()=>DashboardSkeleton,Default:()=>Default,FormSkeleton:()=>FormSkeleton,FullWidth:()=>FullWidth,LargeBlock:()=>LargeBlock,ProductCardSkeletonExample:()=>ProductCardSkeletonExample,ProductListSkeletonExample:()=>ProductListSkeletonExample,ProductListSkeletonFourColumns:()=>ProductListSkeletonFourColumns,ProductListSkeletonTwoColumns:()=>ProductListSkeletonTwoColumns,Rectangular:()=>Rectangular,TableSkeleton:()=>TableSkeleton,Text:()=>Text,TextSkeletonExample:()=>TextSkeletonExample,TextSkeletonMany:()=>TextSkeletonMany,UserProfileSkeleton:()=>UserProfileSkeleton,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Skeleton_stories});var jsx_runtime=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),react=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),core=__webpack_require__("./src/lib/core/index.ts");const roundedStyles={none:"rounded-none",sm:"rounded",md:"rounded-md",lg:"rounded-lg",full:"rounded-full"},Skeleton=(0,react.forwardRef)(({width,height,rounded="md",variant="default",className,style,...props},ref)=>{const inlineStyles={...style,width:"number"==typeof width?`${width}px`:width,height:"number"==typeof height?`${height}px`:height};return(0,jsx_runtime.jsx)("div",{ref,role:"status","aria-label":"Loading...",className:(0,core.cn)("animate-pulse bg-gray-200 dark:bg-gray-700",roundedStyles[rounded],{default:"",text:"h-4 w-full",circular:"rounded-full",rectangular:"rounded-none"}[variant],className),style:inlineStyles,...props})});function ProductCardSkeleton(){return(0,jsx_runtime.jsxs)("div",{className:"group",children:[(0,jsx_runtime.jsx)(Skeleton,{height:270,className:"mb-4"}),(0,jsx_runtime.jsxs)("div",{className:"flex items-center gap-2.5 mb-2",children:[(0,jsx_runtime.jsx)(Skeleton,{width:100,height:14}),(0,jsx_runtime.jsx)(Skeleton,{width:30,height:14})]}),(0,jsx_runtime.jsx)(Skeleton,{width:"80%",height:20,className:"mb-1.5"}),(0,jsx_runtime.jsx)(Skeleton,{width:120,height:24})]})}function ProductListSkeleton({count=6,columns=3}){const gridCols={1:"grid-cols-1",2:"grid-cols-1 sm:grid-cols-2",3:"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",4:"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"};return(0,jsx_runtime.jsx)("div",{className:(0,core.cn)("grid gap-6",gridCols[columns]||gridCols[3]),children:Array.from({length:count}).map((_,index)=>(0,jsx_runtime.jsx)(ProductCardSkeleton,{},index))})}function TextSkeleton({lines=3,gap=2}){return(0,jsx_runtime.jsx)("div",{className:(0,core.cn)("space-y-"+gap),children:Array.from({length:lines}).map((_,index)=>(0,jsx_runtime.jsx)(Skeleton,{variant:"text",width:index===lines-1?"60%":"100%"},index))})}function AvatarSkeleton({size=40}){return(0,jsx_runtime.jsx)(Skeleton,{variant:"circular",width:size,height:size})}function CardSkeleton(){return(0,jsx_runtime.jsxs)("div",{className:"p-6 bg-white dark:bg-gray-800 rounded-lg shadow-1",children:[(0,jsx_runtime.jsx)(Skeleton,{width:"60%",height:24,className:"mb-4"}),(0,jsx_runtime.jsx)(TextSkeleton,{lines:3}),(0,jsx_runtime.jsx)(Skeleton,{width:120,height:36,className:"mt-4"})]})}Skeleton.displayName="Skeleton";const Skeleton_stories={title:"UI/Skeleton",component:Skeleton,parameters:{layout:"padded"},tags:["autodocs"],argTypes:{variant:{control:"select",options:["default","text","circular","rectangular"]},rounded:{control:"select",options:["none","sm","md","lg","full"]}}},Default={args:{width:200,height:20}},Text={args:{variant:"text"}},Circular={args:{variant:"circular",width:40,height:40}},Rectangular={args:{variant:"rectangular",width:200,height:100}},FullWidth={args:{width:"100%",height:20}},CustomRounded={args:{width:200,height:100,rounded:"lg"}},LargeBlock={args:{width:300,height:200,rounded:"md"}},TextSkeletonExample={render:()=>(0,jsx_runtime.jsx)(TextSkeleton,{lines:3})},TextSkeletonMany={render:()=>(0,jsx_runtime.jsx)(TextSkeleton,{lines:5,gap:3})},AvatarSkeletonExample={render:()=>(0,jsx_runtime.jsx)(AvatarSkeleton,{})},AvatarSkeletonSizes={render:()=>(0,jsx_runtime.jsxs)("div",{className:"flex items-center gap-4",children:[(0,jsx_runtime.jsx)(AvatarSkeleton,{size:32}),(0,jsx_runtime.jsx)(AvatarSkeleton,{size:40}),(0,jsx_runtime.jsx)(AvatarSkeleton,{size:48}),(0,jsx_runtime.jsx)(AvatarSkeleton,{size:64})]})},ProductCardSkeletonExample={render:()=>(0,jsx_runtime.jsx)("div",{style:{width:"300px"},children:(0,jsx_runtime.jsx)(ProductCardSkeleton,{})})},ProductListSkeletonExample={render:()=>(0,jsx_runtime.jsx)(ProductListSkeleton,{count:6,columns:3}),parameters:{layout:"padded"}},ProductListSkeletonTwoColumns={render:()=>(0,jsx_runtime.jsx)(ProductListSkeleton,{count:4,columns:2}),parameters:{layout:"padded"}},ProductListSkeletonFourColumns={render:()=>(0,jsx_runtime.jsx)(ProductListSkeleton,{count:8,columns:4}),parameters:{layout:"padded"}},CardSkeletonExample={render:()=>(0,jsx_runtime.jsx)(CardSkeleton,{})},UserProfileSkeleton={render:()=>(0,jsx_runtime.jsxs)("div",{className:"max-w-md bg-white p-6 rounded-lg shadow-md",children:[(0,jsx_runtime.jsxs)("div",{className:"flex items-center gap-4 mb-6",children:[(0,jsx_runtime.jsx)(AvatarSkeleton,{size:64}),(0,jsx_runtime.jsxs)("div",{className:"flex-1",children:[(0,jsx_runtime.jsx)(Skeleton,{width:"70%",height:20,className:"mb-2"}),(0,jsx_runtime.jsx)(Skeleton,{width:"50%",height:16})]})]}),(0,jsx_runtime.jsx)(TextSkeleton,{lines:3}),(0,jsx_runtime.jsxs)("div",{className:"flex gap-2 mt-6",children:[(0,jsx_runtime.jsx)(Skeleton,{width:100,height:36,rounded:"md"}),(0,jsx_runtime.jsx)(Skeleton,{width:100,height:36,rounded:"md"})]})]}),parameters:{docs:{description:{story:"User profile card loading skeleton"}}}},FormSkeleton={render:()=>(0,jsx_runtime.jsxs)("div",{className:"max-w-md space-y-4",children:[(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(Skeleton,{width:80,height:16,className:"mb-2"}),(0,jsx_runtime.jsx)(Skeleton,{width:"100%",height:40,rounded:"md"})]}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(Skeleton,{width:100,height:16,className:"mb-2"}),(0,jsx_runtime.jsx)(Skeleton,{width:"100%",height:40,rounded:"md"})]}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)(Skeleton,{width:120,height:16,className:"mb-2"}),(0,jsx_runtime.jsx)(Skeleton,{width:"100%",height:100,rounded:"md"})]}),(0,jsx_runtime.jsx)(Skeleton,{width:120,height:44,rounded:"md"})]}),parameters:{docs:{description:{story:"Form loading skeleton with labels and input fields"}}}},DashboardSkeleton={render:()=>(0,jsx_runtime.jsxs)("div",{className:"space-y-6",children:[(0,jsx_runtime.jsx)(Skeleton,{width:"30%",height:32}),(0,jsx_runtime.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[(0,jsx_runtime.jsx)(CardSkeleton,{}),(0,jsx_runtime.jsx)(CardSkeleton,{}),(0,jsx_runtime.jsx)(CardSkeleton,{})]}),(0,jsx_runtime.jsx)(Skeleton,{width:"100%",height:300,rounded:"lg"})]}),parameters:{docs:{description:{story:"Dashboard page loading skeleton with header, stat cards, and chart"}}}},TableSkeleton={render:()=>(0,jsx_runtime.jsxs)("div",{className:"space-y-3",children:[(0,jsx_runtime.jsxs)("div",{className:"flex gap-4 pb-3 border-b",children:[(0,jsx_runtime.jsx)(Skeleton,{width:"30%",height:16}),(0,jsx_runtime.jsx)(Skeleton,{width:"20%",height:16}),(0,jsx_runtime.jsx)(Skeleton,{width:"25%",height:16}),(0,jsx_runtime.jsx)(Skeleton,{width:"25%",height:16})]}),Array.from({length:5}).map((_,i)=>(0,jsx_runtime.jsxs)("div",{className:"flex gap-4",children:[(0,jsx_runtime.jsx)(Skeleton,{width:"30%",height:16}),(0,jsx_runtime.jsx)(Skeleton,{width:"20%",height:16}),(0,jsx_runtime.jsx)(Skeleton,{width:"25%",height:16}),(0,jsx_runtime.jsx)(Skeleton,{width:"25%",height:16})]},i))]}),parameters:{docs:{description:{story:"Table loading skeleton with header and rows"}}}},__namedExportsOrder=["Default","Text","Circular","Rectangular","FullWidth","CustomRounded","LargeBlock","TextSkeletonExample","TextSkeletonMany","AvatarSkeletonExample","AvatarSkeletonSizes","ProductCardSkeletonExample","ProductListSkeletonExample","ProductListSkeletonTwoColumns","ProductListSkeletonFourColumns","CardSkeletonExample","UserProfileSkeleton","FormSkeleton","DashboardSkeleton","TableSkeleton"]}}]);