admin-ui-starter-kit 0.1.0 → 0.1.1

package/dist/showcase/assets/onboarding-checklist-1EerUwAo.js

@@ -0,0 +1,119 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{cr as n,gr as r,hr as i,lr as a,r as o,sr as s,t as c,vr as l}from"./example-6phCHGsN.js";import{t as u}from"./circle-check-DlA6zidQ.js";import{D as d,a as f,k as p,r as m}from"./index-B4ubXfly.js";import{t as h}from"./props-table-uDY4eIzt.js";import{a as g,c as _,n as v,o as y,r as b,s as x,t as S}from"./accordion-variants-Dp4wxic-.js";import{t as C}from"./smart-card-BisUbLPt.js";import{t as w}from"./input-OrUzpI55.js";import{t as T}from"./spinner-DoYBfalR.js";import{t as E}from"./PreviewLayout-z6vpJJGt.js";var D=m(`qr-code`,[[`rect`,{width:`5`,height:`5`,x:`3`,y:`3`,rx:`1`,key:`1tu5fj`}],[`rect`,{width:`5`,height:`5`,x:`16`,y:`3`,rx:`1`,key:`1v8r4q`}],[`rect`,{width:`5`,height:`5`,x:`3`,y:`16`,rx:`1`,key:`1x03jg`}],[`path`,{d:`M21 16h-3a2 2 0 0 0-2 2v3`,key:`177gqh`}],[`path`,{d:`M21 21v.01`,key:`ents32`}],[`path`,{d:`M12 7v3a2 2 0 0 1-2 2H7`,key:`8crl2c`}],[`path`,{d:`M3 12h.01`,key:`nlz23k`}],[`path`,{d:`M12 3h.01`,key:`n36tog`}],[`path`,{d:`M12 16v.01`,key:`133mhm`}],[`path`,{d:`M16 12h1`,key:`1slzba`}],[`path`,{d:`M21 12v.01`,key:`1lwtk9`}],[`path`,{d:`M12 21v-1`,key:`1880an`}]]),O={regionAriaLabel:void 0,statusCompletedAria:`Completed`,statusInProgressAria:`In progress`,statusPendingAria:`Pending`},k=f();function A({status:e,ariaLabel:t,className:n}){return e===`completed`?(0,k.jsx)(`span`,{role:`img`,"aria-label":t,className:l(`flex size-5 items-center justify-center`,n),children:(0,k.jsx)(u,{className:`size-5 fill-success text-background`})}):e===`in-progress`?(0,k.jsx)(`span`,{role:`img`,"aria-label":t,className:l(`flex size-5 items-center justify-center rounded-full bg-warning/15 ring-1 ring-warning/30`,n),children:(0,k.jsx)(`span`,{className:`size-2 rounded-full bg-warning`})}):(0,k.jsx)(`span`,{role:`img`,"aria-label":t,className:l(`flex size-5 items-center justify-center text-muted-foreground/70`,n),children:(0,k.jsx)(T,{className:`size-4 opacity-60`})})}A.displayName=`StepStatusIndicator`;var j=t(p(),1),M={completed:`text-foreground`,"in-progress":`text-foreground`,pending:`text-muted-foreground`};function N(e,t){return e===`completed`?t.statusCompletedAria:e===`in-progress`?t.statusInProgressAria:t.statusPendingAria}function P(e){let t=e.find(e=>e.status!==`completed`&&!e.disabled);return t?[t.id]:[]}var F=(0,j.forwardRef)(function({steps:e,defaultExpanded:t,multiple:n=!1,value:i,onValueChange:a,onStepOpen:o,variant:s=`bordered`,className:c,stepClassName:u,strings:f},p){let m=d(O,f),h=i!==void 0,C=(0,j.useMemo)(()=>t??P(e),[]),[w,T]=(0,j.useState)(C),E=(0,j.useRef)(!1),D=h?i:w,F=(0,j.useRef)(new Set(C));(0,j.useEffect)(()=>{if(h||E.current||t!==void 0||e.length===0||w.length>0)return;let n=P(e);n.length>0&&T(n)},[e,h,t,w.length]);let I=(0,j.useCallback)(e=>{let t=e??[];E.current=!0,h||T(t),a?.(t)},[h,a]);return(0,j.useEffect)(()=>{if(!o){F.current=new Set(D);return}let e=F.current;for(let t of D)e.has(t)||o(t);F.current=new Set(D)},[D,o]),(0,k.jsx)(g,{ref:p,multiple:n,value:D,onValueChange:I,"aria-label":m.regionAriaLabel,className:l(`checklist--component`,b[s],c),children:e.map(e=>(0,k.jsxs)(x,{value:e.id,className:l(v[s],u),children:[(0,k.jsx)(_,{disabled:e.disabled,className:`gap-3 px-3 py-(--row-py) hover:no-underline`,children:(0,k.jsxs)(`div`,{className:`flex w-full min-w-0 items-center gap-3 pr-2`,children:[(0,k.jsx)(A,{status:e.status,ariaLabel:N(e.status,m)}),(0,k.jsx)(r,{tag:`span`,weight:`semibold`,className:l(M[e.status]),children:e.title}),!!e.badge&&(0,k.jsx)(`span`,{className:`ml-auto inline-flex shrink-0`,children:e.badge})]})}),!!e.content&&(0,k.jsx)(y,{className:S.withMedallion,children:(0,k.jsx)(r,{type:`secondary`,className:`leading-relaxed`,tag:`div`,children:e.content})})]},e.id))})});F.displayName=`OnboardingChecklist`;var I=e({BorderedDefaultPointOfSaleOnboarding:()=>B,CardVariantWorkspaceSetupControlled:()=>V,FlatVariantMinimal:()=>H});function L(){return(0,k.jsxs)(`div`,{className:`flex flex-col gap-5 md:flex-row md:items-start md:justify-between`,children:[(0,k.jsxs)(`div`,{className:`flex-1 space-y-4`,children:[(0,k.jsx)(r,{size:`sm`,type:`secondary`,className:`leading-relaxed`,children:`Scan the QR code or send yourself the link to get the app. The mobile app is where you’ll manage orders, track inventory, and view analytics on the go.`}),(0,k.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,k.jsx)(w,{placeholder:`you@example.com`,className:`flex-1`}),(0,k.jsx)(o,{variant:`secondary`,children:`Send link`})]})]}),(0,k.jsx)(`div`,{className:`flex shrink-0 items-center justify-center rounded-md border border-border bg-muted/30 p-3`,children:(0,k.jsx)(D,{className:`size-20 text-foreground`,strokeWidth:1.5})})]})}var R=[{id:`add-products`,status:`completed`,title:`Add products`,badge:(0,k.jsx)(a,{variant:`success`,children:`Ready`}),content:(0,k.jsx)(r,{size:`sm`,type:`secondary`,children:`Your products have been successfully added and are ready for sale.`})},{id:`pos-app`,status:`in-progress`,title:`Get the point-of-sale application`,content:(0,k.jsx)(L,{})},{id:`price-stock`,status:`pending`,title:`Product price & stock`,content:(0,k.jsx)(r,{size:`sm`,type:`secondary`,children:`Configure your product pricing and manage stock levels across all locations.`})}],z=[{id:`workspace`,status:`completed`,title:`Create your workspace`,content:(0,k.jsx)(r,{size:`sm`,type:`secondary`,children:`Workspace created.`})},{id:`invite`,status:`completed`,title:`Invite teammates`,content:(0,k.jsx)(r,{size:`sm`,type:`secondary`,children:`3 members joined.`})},{id:`integrations`,status:`in-progress`,title:`Connect integrations`,badge:(0,k.jsx)(a,{variant:`warning`,children:`Recommended`}),content:(0,k.jsx)(r,{size:`sm`,type:`secondary`,children:`Connect Slack, GitHub, and Linear.`})},{id:`billing`,status:`pending`,title:`Add payment method`,content:(0,k.jsx)(r,{size:`sm`,type:`secondary`,children:`Required before launch.`}),disabled:!1}];function B(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(E,{className:`max-w-2xl`,children:(0,k.jsx)(F,{steps:R})})})}function V(){let[e,t]=(0,j.useState)([`integrations`]);return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(E,{className:`max-w-2xl`,children:(0,k.jsx)(C,{padding:`sm`,children:(0,k.jsxs)(E,{className:`gap-3`,children:[(0,k.jsx)(i,{tag:`h3`,className:`border-0 pb-0 text-base`,children:`Set up your workspace`}),(0,k.jsx)(F,{steps:z,variant:`card`,value:e,onValueChange:t})]})})})})}function H(){return(0,k.jsx)(k.Fragment,{children:(0,k.jsx)(E,{className:`max-w-2xl`,children:(0,k.jsx)(F,{steps:R,variant:`flat`,defaultExpanded:[]})})})}var U=`import { useState } from 'react';
+import { QrCode } from 'lucide-react';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { Input } from '@/components/base/forms/fields';
+import {
+	OnboardingChecklist,
+	type OnboardingChecklistStep,
+} from '@/components/composed/onboarding';
+import { Heading, Text } from '@/components/typography';
+import { Col } from '../../PreviewLayout';
+
+function PosAppBody() {
+	return (
+		<div className="flex flex-col gap-5 md:flex-row md:items-start md:justify-between">
+			<div className="flex-1 space-y-4">
+				<Text size="sm" type="secondary" className="leading-relaxed">
+					Scan the QR code or send yourself the link to get the app. The
+					mobile app is where you&rsquo;ll manage orders, track inventory,
+					and view analytics on the go.
+				</Text>
+				<div className="flex items-center gap-2">
+					<Input placeholder="you@example.com" className="flex-1" />
+					<Button variant="secondary">Send link</Button>
+				</div>
+			</div>
+			<div className="flex shrink-0 items-center justify-center rounded-md border border-border bg-muted/30 p-3">
+				<QrCode className="size-20 text-foreground" strokeWidth={1.5} />
+			</div>
+		</div>
+	);
+}
+
+const onboardingSteps: OnboardingChecklistStep[] = [
+	{
+		id: 'add-products',
+		status: 'completed',
+		title: 'Add products',
+		badge: <Badge variant="success">Ready</Badge>,
+		content: (
+			<Text size="sm" type="secondary">
+				Your products have been successfully added and are ready for sale.
+			</Text>
+		),
+	},
+	{
+		id: 'pos-app',
+		status: 'in-progress',
+		title: 'Get the point-of-sale application',
+		content: <PosAppBody />,
+	},
+	{
+		id: 'price-stock',
+		status: 'pending',
+		title: 'Product price & stock',
+		content: (
+			<Text size="sm" type="secondary">
+				Configure your product pricing and manage stock levels across all
+				locations.
+			</Text>
+		),
+	},
+];
+
+const settingsSteps: OnboardingChecklistStep[] = [
+	{ id: 'workspace', status: 'completed', title: 'Create your workspace', content: <Text size="sm" type="secondary">Workspace created.</Text> },
+	{ id: 'invite', status: 'completed', title: 'Invite teammates', content: <Text size="sm" type="secondary">3 members joined.</Text> },
+	{ id: 'integrations', status: 'in-progress', title: 'Connect integrations', badge: <Badge variant="warning">Recommended</Badge>, content: <Text size="sm" type="secondary">Connect Slack, GitHub, and Linear.</Text> },
+	{ id: 'billing', status: 'pending', title: 'Add payment method', content: <Text size="sm" type="secondary">Required before launch.</Text>, disabled: false },
+];
+
+export function BorderedDefaultPointOfSaleOnboarding() {
+	return (
+		<>
+			<Col className="max-w-2xl">
+								<OnboardingChecklist steps={onboardingSteps} />
+							</Col>
+		</>
+	);
+}
+
+export function CardVariantWorkspaceSetupControlled() {
+	const [expanded, setExpanded] = useState<string[]>(['integrations']);
+	return (
+		<>
+			<Col className="max-w-2xl">
+								<SmartCard padding="sm">
+									<Col className="gap-3">
+										<Heading tag="h3" className="border-0 pb-0 text-base">
+											Set up your workspace
+										</Heading>
+										<OnboardingChecklist
+											steps={settingsSteps}
+											variant="card"
+											value={expanded}
+											onValueChange={setExpanded}
+										/>
+									</Col>
+								</SmartCard>
+							</Col>
+		</>
+	);
+}
+
+export function FlatVariantMinimal() {
+	return (
+		<>
+			<Col className="max-w-2xl">
+								<OnboardingChecklist
+									steps={onboardingSteps}
+									variant="flat"
+									defaultExpanded={[]}
+								/>
+							</Col>
+		</>
+	);
+}
+`;function W(e){let t={h4:`h4`,...e.components};return I||K(`Examples`,!1),B||K(`Examples.BorderedDefaultPointOfSaleOnboarding`,!0),V||K(`Examples.CardVariantWorkspaceSetupControlled`,!0),H||K(`Examples.FlatVariantMinimal`,!0),(0,k.jsxs)(n,{title:`Composed · Onboarding · Checklist`,description:`Step-list accordion with completed / in-progress / pending status indicators. Auto-opens the next non-completed step. Strings + status ARIA fully overridable. Composes base/accordion.`,layer:`composed`,status:`ready`,children:[(0,k.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,k.jsx)(c,{name:`BorderedDefaultPointOfSaleOnboarding`,source:U,children:(0,k.jsx)(B,{})}),(0,k.jsx)(c,{name:`CardVariantWorkspaceSetupControlled`,source:U,children:(0,k.jsx)(V,{})}),(0,k.jsx)(c,{name:`FlatVariantMinimal`,source:U,children:(0,k.jsx)(H,{})})]}),(0,k.jsxs)(s,{title:`API`,id:`api`,children:[(0,k.jsx)(t.h4,{children:`OnboardingChecklist`}),(0,k.jsx)(h,{component:`OnboardingChecklist`})]})]})}function G(e={}){let{wrapper:t}=e.components||{};return t?(0,k.jsx)(t,{...e,children:(0,k.jsx)(W,{...e})}):W(e)}function K(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{G as default};

package/dist/showcase/assets/overlays-2AB9-S1Z.js

@@ -0,0 +1,88 @@
+import{n as e,r as t}from"./chunk-CilyBKbf.js";import{A as n,C as r,E as i,J as a,Jn as o,K as s,L as c,Ln as l,M as u,Mn as d,N as f,O as p,P as m,Qn as h,S as g,T as _,W as v,X as y,Xn as b,Y as x,Yt as S,Zn as C,a as w,b as T,c as E,cr as D,d as O,f as k,g as A,gn as j,h as M,in as ee,it as te,j as ne,k as re,o as ie,p as ae,sr as oe,t as N,u as se,v as ce,vr as le,w as ue,x as de,z as fe,zn as P}from"./example-6phCHGsN.js";import{O as pe,a as me,k as he}from"./index-B4ubXfly.js";import{n as ge,r as F,t as I}from"./popover-DNT9755r.js";import{a as L,i as _e,n as ve,o as ye,r as be,s as xe,t as Se}from"./dialog-Bqu5KDYH.js";import{n as Ce}from"./PreviewLayout-z6vpJJGt.js";import{a as we,i as Te,n as Ee,o as De,r as Oe,t as ke}from"./sheet-Dn1-MYus.js";var R=t(he()),z=R.createContext(void 0);function B(e){let t=R.useContext(z);if(t===void 0&&!e)throw Error(o(50));return t}var Ae=t(pe()),je={...re,instantType:v(e=>e.instantType),hasViewport:v(e=>e.hasViewport)},Me=class e extends fe{constructor(e){super({...Ne(),...e},{popupRef:R.createRef(),onOpenChange:void 0,onOpenChangeComplete:void 0,triggerElements:new n,closeDelayRef:{current:300}},je)}setOpen=(e,t)=>{let n=t.reason,r=n===j,i=e&&n===`trigger-focus`,a=!e&&(n===`trigger-press`||n===`escape-key`);if(t.preventUnmountOnClose=()=>{this.set(`preventUnmountingOnClose`,!0)},this.context.onOpenChange?.(e,t),t.isCanceled)return;this.state.floatingRootContext.dispatchOpenChange(e,t);let o=()=>{let r={open:e};i?r.instantType=`focus`:a?r.instantType=`dismiss`:n===`trigger-hover`&&(r.instantType=void 0);let o=t.trigger?.id??null;(o||e)&&(r.activeTriggerId=o,r.activeTriggerElement=t.trigger??null),this.update(r)};r?Ae.flushSync(o):o()};static useStore(t,n){let r=h(()=>new e(n)).current,a=t??r,o=i({popupStore:a,onOpenChange:a.setOpen});return a.state.floatingRootContext=o,a}};function Ne(){return{...p(),instantType:void 0,hasViewport:!1}}var V=me();function H(e){let{open:t,defaultOpen:n=!1,onOpenChange:r,onOpenChangeComplete:i,actionsRef:a,handle:o,triggerId:c,defaultTriggerId:l=null,children:f}=e,p=Me.useStore(o?.store,{open:n,openProp:t,activeTriggerId:l,triggerIdProp:c});d(()=>{t===void 0&&p.state.open===!1&&n===!0&&p.update({open:!0,activeTriggerId:l})}),p.useControlledProp(`openProp`,t),p.useControlledProp(`triggerIdProp`,c),p.useContextCallback(`onOpenChange`,r),p.useContextCallback(`onOpenChangeComplete`,i);let m=p.useState(`open`),h=p.select(`floatingRootContext`),_=p.useState(`activeTriggerId`),v=p.useState(`payload`);ne(p);let{forceUnmount:y}=u(m,p);b(()=>{m&&(_??p.set(`payload`,void 0))},[p,_,m]);let x=R.useCallback(()=>{p.setOpen(!1,S(ee))},[p]);R.useImperativeHandle(a,()=>({unmount:y,close:x}),[y,x]);let{getReferenceProps:C,getTriggerProps:w,getFloatingProps:T}=g([s(h)]),E=R.useMemo(()=>C(),[C]),D=R.useMemo(()=>w(),[w]),O=R.useMemo(()=>T(),[T]);return p.useSyncedValues({activeTriggerProps:E,inactiveTriggerProps:D,popupProps:O}),(0,V.jsx)(z.Provider,{value:p,children:typeof f==`function`?f({payload:v}):f})}function Pe(e){return B(!0)?(0,V.jsx)(H,{...e}):(0,V.jsx)(x,{children:(0,V.jsx)(H,{...e})})}var U=R.createContext(void 0);function Fe(){let e=R.useContext(U);if(e===void 0)throw Error(o(48));return e}var Ie=R.forwardRef(function(e,t){let{keepMounted:n=!1,...r}=e;return B().useState(`mounted`)||n?(0,V.jsx)(U.Provider,{value:n,children:(0,V.jsx)(M,{ref:t,...r})}):null}),Le=R.forwardRef(function(e,t){let{render:n,className:i,delay:a,closeDelay:s,id:c,payload:l,handle:u,style:d,...p}=e,m=B(!0),h=u?.store??m;if(!h)throw Error(o(89));let g=A(c),v=h.useState(`isTriggerActive`,g),y=h.useState(`isOpenedByTrigger`,g),x=h.useState(`floatingRootContext`),S=R.useRef(null),C=a??600,w=s??300,{registerTrigger:E,isMountedByThisTrigger:D}=f(g,S,h,{payload:l});b(()=>{D&&(h.context.closeDelayRef.current=w)},[h,D,w]);let O=r(x,{mouseOnly:!0,move:!1,handleClose:de(),delay:()=>({open:C,close:w}),triggerElementRef:S,isActiveTrigger:v,isClosing:()=>h.select(`transitionStatus`)===`ending`}),k=_(x,{delay:C}),j={open:y},M=h.useState(`triggerProps`,D);return P(`a`,e,{state:j,ref:[t,E,S],props:[O,k.reference,M,{id:g},p],stateAttributesMapping:T})}),W=R.createContext(void 0);function Re(){let e=R.useContext(W);if(e===void 0)throw Error(o(49));return e}var ze=R.forwardRef(function(e,t){let{render:n,className:r,anchor:i,positionMethod:o=`absolute`,side:s=`bottom`,align:c=`center`,sideOffset:l=0,alignOffset:u=0,collisionBoundary:d=`clipping-ancestors`,collisionPadding:f=5,arrowPadding:p=5,sticky:m=!1,disableAnchorTracking:h=!1,collisionAvoidance:g=te,style:_,...v}=e,b=B(),x=Fe(),S=y(),C=b.useState(`open`),w=b.useState(`mounted`),T=b.useState(`floatingRootContext`),E=b.useState(`instantType`),D=b.useState(`transitionStatus`),O=k({anchor:i,floatingRootContext:T,positionMethod:o,mounted:w,side:s,sideOffset:l,align:c,alignOffset:u,arrowPadding:p,collisionBoundary:d,collisionPadding:f,sticky:m,disableAnchorTracking:h,keepMounted:x,nodeId:S,collisionAvoidance:g,adaptiveOrigin:b.useState(`hasViewport`)?ae:void 0}),A=se(e,{open:C,side:O.side,align:O.align,anchorHidden:O.anchorHidden,instant:E},{styles:O.positionerStyles,transitionStatus:D,props:v,refs:[t,b.useStateSetter(`positionerElement`)],hidden:!w,inert:!C});return(0,V.jsx)(W.Provider,{value:O,children:(0,V.jsx)(a,{id:S,children:A})})}),Be={...ce,...c},Ve=R.forwardRef(function(e,t){let{className:n,render:r,style:i,...a}=e,o=B(),{side:s,align:c}=Re(),l=o.useState(`open`),u=o.useState(`instantType`),d=o.useState(`transitionStatus`),f=o.useState(`popupProps`),p=o.useState(`floatingRootContext`);return m({open:l,ref:o.context.popupRef,onComplete(){l&&o.context.onOpenChangeComplete?.(!0)}}),ue(p,{closeDelay:C(()=>o.context.closeDelayRef.current)}),P(`div`,e,{state:{open:l,side:s,align:c,instant:u,transitionStatus:d},ref:[t,o.context.popupRef,o.useStateSetter(`popupElement`)],props:[f,O(d),a],stateAttributesMapping:Be})});function He({...e}){return(0,V.jsx)(Pe,{"data-slot":`hover-card`,...e})}function G({...e}){return(0,V.jsx)(Le,{"data-slot":`hover-card-trigger`,...e})}function Ue({className:e,side:t=`bottom`,sideOffset:n=4,align:r=`center`,alignOffset:i=4,...a}){return(0,V.jsx)(Ie,{"data-slot":`hover-card-portal`,children:(0,V.jsx)(ze,{align:r,alignOffset:i,side:t,sideOffset:n,className:`isolate z-50`,children:(0,V.jsx)(Ve,{"data-slot":`hover-card-content`,className:le(`data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-4 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 origin-(--transform-origin) outline-hidden`,e),...a})})})}var We=e({DialogExample:()=>K,HoverCardExample:()=>X,PopoverExample:()=>J,SheetExample:()=>q,TooltipExample:()=>Y});function K(){let[e,t]=(0,R.useState)(!1);return(0,V.jsx)(V.Fragment,{children:(0,V.jsxs)(Se,{open:e,onOpenChange:t,children:[(0,V.jsx)(xe,{render:e=>(0,V.jsx)(l,{...e,children:`Open dialog`})}),(0,V.jsxs)(ve,{children:[(0,V.jsxs)(L,{children:[(0,V.jsx)(ye,{children:`Confirm action`}),(0,V.jsx)(be,{children:`This is a controlled dialog.`})]}),(0,V.jsxs)(_e,{children:[(0,V.jsx)(l,{variant:`outline`,onClick:()=>t(!1),children:`Cancel`}),(0,V.jsx)(l,{onClick:()=>t(!1),children:`Confirm`})]})]})]})})}function q(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsxs)(ke,{children:[(0,V.jsx)(De,{render:e=>(0,V.jsx)(l,{variant:`outline`,...e,children:`Open sheet`})}),(0,V.jsxs)(Ee,{children:[(0,V.jsxs)(Te,{children:[(0,V.jsx)(we,{children:`Sheet title`}),(0,V.jsx)(Oe,{children:`Side-anchored panel.`})]}),(0,V.jsx)(`div`,{className:`px-4 py-2 text-sm`,children:`Sheet body content.`})]})]})})}function J(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsxs)(I,{children:[(0,V.jsx)(F,{render:e=>(0,V.jsx)(l,{variant:`outline`,...e,children:`Open popover`})}),(0,V.jsx)(ge,{className:`w-64 text-sm`,children:`Popover content with arbitrary children.`})]})})}function Y(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsx)(Ce,{children:(0,V.jsxs)(w,{children:[(0,V.jsx)(E,{render:e=>(0,V.jsx)(l,{variant:`outline`,...e,children:`Hover me`})}),(0,V.jsx)(ie,{children:`Hello, I'm a tooltip.`})]})})})}function X(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsxs)(He,{children:[(0,V.jsx)(G,{render:e=>(0,V.jsx)(l,{variant:`link`,...e,children:`@maria`})}),(0,V.jsxs)(Ue,{className:`w-64 text-sm`,children:[(0,V.jsx)(`div`,{className:`font-medium`,children:`Sarah Smitha`}),(0,V.jsx)(`div`,{className:`text-muted-foreground`,children:`Account Manager`}),(0,V.jsx)(`div`,{className:`mt-2 text-xs text-muted-foreground`,children:`Joined Jan 2023.`})]})]})})}var Z=`import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/base/sheet';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
+import { Row } from '../../PreviewLayout';
+
+export function DialogExample() {
+	const [open, setOpen] = useState(false);
+	return (
+		<>
+			<Dialog open={open} onOpenChange={setOpen}>
+									<DialogTrigger render={(p) => <Button {...p}>Open dialog</Button>} />
+									<DialogContent>
+										<DialogHeader>
+											<DialogTitle>Confirm action</DialogTitle>
+											<DialogDescription>This is a controlled dialog.</DialogDescription>
+										</DialogHeader>
+										<DialogFooter>
+											<Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+											<Button onClick={() => setOpen(false)}>Confirm</Button>
+										</DialogFooter>
+									</DialogContent>
+								</Dialog>
+		</>
+	);
+}
+
+export function SheetExample() {
+	return (
+		<>
+			<Sheet>
+									<SheetTrigger render={(p) => <Button variant="outline" {...p}>Open sheet</Button>} />
+									<SheetContent>
+										<SheetHeader>
+											<SheetTitle>Sheet title</SheetTitle>
+											<SheetDescription>Side-anchored panel.</SheetDescription>
+										</SheetHeader>
+										<div className="px-4 py-2 text-sm">Sheet body content.</div>
+									</SheetContent>
+								</Sheet>
+		</>
+	);
+}
+
+export function PopoverExample() {
+	return (
+		<>
+			<Popover>
+									<PopoverTrigger render={(p) => <Button variant="outline" {...p}>Open popover</Button>} />
+									<PopoverContent className="w-64 text-sm">
+										Popover content with arbitrary children.
+									</PopoverContent>
+								</Popover>
+		</>
+	);
+}
+
+export function TooltipExample() {
+	return (
+		<>
+			<Row>
+									<Tooltip>
+										<TooltipTrigger render={(p) => <Button variant="outline" {...p}>Hover me</Button>} />
+										<TooltipContent>Hello, I'm a tooltip.</TooltipContent>
+									</Tooltip>
+								</Row>
+		</>
+	);
+}
+
+export function HoverCardExample() {
+	return (
+		<>
+			<HoverCard>
+									<HoverCardTrigger render={(p) => <Button variant="link" {...p}>@maria</Button>} />
+									<HoverCardContent className="w-64 text-sm">
+										<div className="font-medium">Sarah Smitha</div>
+										<div className="text-muted-foreground">Account Manager</div>
+										<div className="mt-2 text-xs text-muted-foreground">Joined Jan 2023.</div>
+									</HoverCardContent>
+								</HoverCard>
+		</>
+	);
+}
+`;function Q(e){return We||$(`Examples`,!1),K||$(`Examples.DialogExample`,!0),X||$(`Examples.HoverCardExample`,!0),J||$(`Examples.PopoverExample`,!0),q||$(`Examples.SheetExample`,!0),Y||$(`Examples.TooltipExample`,!0),(0,V.jsx)(D,{title:`UI · Overlays`,description:`Dialog, Sheet, Popover, Tooltip, HoverCard.`,layer:`ui`,status:`ready`,children:(0,V.jsxs)(oe,{title:`Examples`,id:`examples`,children:[(0,V.jsx)(N,{name:`DialogExample`,source:Z,children:(0,V.jsx)(K,{})}),(0,V.jsx)(N,{name:`SheetExample`,source:Z,children:(0,V.jsx)(q,{})}),(0,V.jsx)(N,{name:`PopoverExample`,source:Z,children:(0,V.jsx)(J,{})}),(0,V.jsx)(N,{name:`TooltipExample`,source:Z,children:(0,V.jsx)(Y,{})}),(0,V.jsx)(N,{name:`HoverCardExample`,source:Z,children:(0,V.jsx)(X,{})})]})})}function Ge(e={}){let{wrapper:t}=e.components||{};return t?(0,V.jsx)(t,{...e,children:(0,V.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Ge as default};