tembro 3.0.0 → 3.1.5

package/dist/src/showcase/premium/index.js

@@ -0,0 +1,526 @@
+import { DataTableShowcase as ee } from "./data-table/showcase.js";
+import { dataTableMock as te } from "./data-table/mock.js";
+import { AlertShowcase as ne } from "./alert/showcase.js";
+import { alertMock as re } from "./alert/mock.js";
+import { AlertDialogShowcase as ie } from "./alert-dialog/showcase.js";
+import { alertDialogMock as ae } from "./alert-dialog/mock.js";
+import { ActivityFeedShowcase as oe } from "./activity-feed/showcase.js";
+import { activityFeedMock as se } from "./activity-feed/mock.js";
+import { ActionMenuShowcase as e } from "./action-menu/showcase.js";
+import { actionMenuMock as t } from "./action-menu/mock.js";
+import { AppSidebarShowcase as n } from "./app-sidebar/showcase.js";
+import { appSidebarMock as r } from "./app-sidebar/mock.js";
+import { AsyncSelectShowcase as i } from "./async-select/showcase.js";
+import { asyncSelectMock as a } from "./async-select/mock.js";
+import { AsyncMultiSelectShowcase as o } from "./async-multi-select/showcase.js";
+import { asyncMultiSelectMock as s } from "./async-multi-select/mock.js";
+import { avatarMock as c } from "./avatar/mock.js";
+import { AvatarShowcase as l } from "./avatar/showcase.js";
+import { carouselMock as u } from "./carousel/mock.js";
+import { CarouselShowcase as d } from "./carousel/showcase.js";
+import { colorPickerMock as f } from "./color-picker/mock.js";
+import { ColorPickerShowcase as p } from "./color-picker/showcase.js";
+import { jsonInputMock as m } from "./json-input/mock.js";
+import { JsonInputShowcase as h } from "./json-input/showcase.js";
+import { BadgeShowcase as g } from "./badge/showcase.js";
+import { badgeMock as _ } from "./badge/mock.js";
+import { dividerMock as v } from "./divider/mock.js";
+import { DividerShowcase as y } from "./divider/showcase.js";
+import { BreadcrumbsShowcase as b } from "./breadcrumbs/showcase.js";
+import { breadcrumbsMock as x } from "./breadcrumbs/mock.js";
+import { ButtonShowcase as S } from "./button/showcase.js";
+import { buttonMock as C } from "./button/mock.js";
+import { ButtonGroupShowcase as w } from "./button-group/showcase.js";
+import { buttonGroupMock as T } from "./button-group/mock.js";
+import { CalendarShowcase as E } from "./calendar/showcase.js";
+import { calendarMock as D } from "./calendar/mock.js";
+import { calendarSchedulerMock as O } from "./calendar-scheduler/mock.js";
+import { CalendarSchedulerShowcase as k } from "./calendar-scheduler/showcase.js";
+import { CardShowcase as A } from "./card/showcase.js";
+import { cardMock as j } from "./card/mock.js";
+import { CheckboxShowcase as M } from "./checkbox/showcase.js";
+import { checkboxMock as N } from "./checkbox/mock.js";
+import { codeBlockMock as P } from "./code-block/mock.js";
+import { CodeBlockShowcase as F } from "./code-block/showcase.js";
+import { dualListPickerMock as I } from "./dual-list-picker/mock.js";
+import { DualListPickerShowcase as L } from "./dual-list-picker/showcase.js";
+import { CollapseShowcase as R } from "./collapse/showcase.js";
+import { collapseMock as z } from "./collapse/mock.js";
+import { CommandPaletteShowcase as B } from "./command-palette/showcase.js";
+import { commandPaletteMock as V } from "./command-palette/mock.js";
+import { ConfirmDialogShowcase as H } from "./confirm-dialog/showcase.js";
+import { confirmDialogMock as U } from "./confirm-dialog/mock.js";
+import { copyButtonMock as W } from "./copy-button/mock.js";
+import { CopyButtonShowcase as G } from "./copy-button/showcase.js";
+import { dataStateMock as K } from "./data-state/mock.js";
+import { DataStateShowcase as ce } from "./data-state/showcase.js";
+import { DatePickerShowcase as le } from "./date-picker/showcase.js";
+import { datePickerMock as ue } from "./date-picker/mock.js";
+import { DateRangePickerShowcase as de } from "./date-range-picker/showcase.js";
+import { dateRangePickerMock as fe } from "./date-range-picker/mock.js";
+import { DescriptionListShowcase as pe } from "./description-list/showcase.js";
+import { descriptionListMock as me } from "./description-list/mock.js";
+import { DialogShowcase as he } from "./dialog/showcase.js";
+import { dialogMock as ge } from "./dialog/mock.js";
+import { DropdownMenuShowcase as _e } from "./dropdown-menu/showcase.js";
+import { dropdownMenuMock as ve } from "./dropdown-menu/mock.js";
+import { DrawerShowcase as ye } from "./drawer/showcase.js";
+import { drawerMock as be } from "./drawer/mock.js";
+import { FormWrapperShowcase as q } from "./form-wrapper/showcase.js";
+import { formRHFWrapperMock as J, formSelectMock as xe } from "./form-wrapper/mock.js";
+import { kanbanBoardMock as Se } from "./kanban-board/mock.js";
+import { KanbanBoardShowcase as Ce } from "./kanban-board/showcase.js";
+import { InfoCardShowcase as we } from "./info-card/showcase.js";
+import { infoCardMock as Te } from "./info-card/mock.js";
+import { imageCropperMock as Ee } from "./image-cropper/mock.js";
+import { ImageCropperShowcase as De } from "./image-cropper/showcase.js";
+import { InputShowcase as Y } from "./input/showcase.js";
+import { inputMock as X } from "./input/mock.js";
+import { KbdShowcase as Oe } from "./kbd/showcase.js";
+import { kbdMock as ke } from "./kbd/mock.js";
+import { listMock as Ae } from "./list/mock.js";
+import { ListShowcase as je } from "./list/showcase.js";
+import { LoadingStateShowcase as Me } from "./loading-state/showcase.js";
+import { loadingStateMock as Ne } from "./loading-state/mock.js";
+import { timePickerMock as Pe } from "./time-picker/mock.js";
+import { TimePickerShowcase as Fe } from "./time-picker/showcase.js";
+import { resizablePanelMock as Ie } from "./resizable-panel/mock.js";
+import { ResizablePanelShowcase as Z } from "./resizable-panel/showcase.js";
+import { NotificationCenterShowcase as Le } from "./notification-center/showcase.js";
+import { notificationCenterMock as Re } from "./notification-center/mock.js";
+import { OtpInputShowcase as ze } from "./otp-input/showcase.js";
+import { otpInputMock as Be } from "./otp-input/mock.js";
+import { sectionMock as Ve } from "./section/mock.js";
+import { SectionShowcase as He } from "./section/showcase.js";
+import { PageStateShowcase as Ue } from "./page-state/showcase.js";
+import { pageStateMock as We } from "./page-state/mock.js";
+import { PaginationShowcase as Ge } from "./pagination/showcase.js";
+import { paginationMock as Ke } from "./pagination/mock.js";
+import { PopoverShowcase as qe } from "./popover/showcase.js";
+import { popoverMock as Je } from "./popover/mock.js";
+import { ProgressShowcase as Q } from "./progress/showcase.js";
+import { progressMock as $ } from "./progress/mock.js";
+import { qrCodeMock as Ye } from "./qr-code/mock.js";
+import { QRCodeShowcase as Xe } from "./qr-code/showcase.js";
+import { RadioGroupShowcase as Ze } from "./radio-group/showcase.js";
+import { radioGroupMock as Qe } from "./radio-group/mock.js";
+import { RightClickMenuShowcase as $e } from "./right-click-menu/showcase.js";
+import { rightClickMenuMock as et } from "./right-click-menu/mock.js";
+import { richTextEditorMock as tt } from "./rich-text-editor/mock.js";
+import { RichTextEditorShowcase as nt } from "./rich-text-editor/showcase.js";
+import { ScrollBoxShowcase as rt } from "./scroll-box/showcase.js";
+import { scrollBoxMock as it } from "./scroll-box/mock.js";
+import { SavedFilterSelectShowcase as at } from "./saved-filter-select/showcase.js";
+import { savedFilterSelectMock as ot } from "./saved-filter-select/mock.js";
+import { sortableListMock as st } from "./sortable-list/mock.js";
+import { SortableListShowcase as ct } from "./sortable-list/showcase.js";
+import { signaturePadMock as lt } from "./signature-pad/mock.js";
+import { SignaturePadShowcase as ut } from "./signature-pad/showcase.js";
+import { segmentedControlMock as dt } from "./segmented-control/mock.js";
+import { SegmentedControlShowcase as ft } from "./segmented-control/showcase.js";
+import { SelectShowcase as pt } from "./select/showcase.js";
+import { selectMock as mt } from "./select/mock.js";
+import { SliderShowcase as ht } from "./slider/showcase.js";
+import { sliderMock as gt } from "./slider/mock.js";
+import { skeletonMock as _t } from "./skeleton/mock.js";
+import { SkeletonShowcase as vt } from "./skeleton/showcase.js";
+import { spinnerMock as yt } from "./spinner/mock.js";
+import { SpinnerShowcase as bt } from "./spinner/showcase.js";
+import { statisticMock as xt } from "./statistic/mock.js";
+import { StatisticShowcase as St } from "./statistic/showcase.js";
+import { SwitchShowcase as Ct } from "./switch/showcase.js";
+import { switchMock as wt } from "./switch/mock.js";
+import { TagInputShowcase as Tt } from "./tag-input/showcase.js";
+import { tagInputMock as Et } from "./tag-input/mock.js";
+import { TableShowcase as Dt } from "./table/showcase.js";
+import { tableMock as Ot } from "./table/mock.js";
+import { TabsShowcase as kt } from "./tabs/showcase.js";
+import { tabsMock as At } from "./tabs/mock.js";
+import { TextareaShowcase as jt } from "./textarea/showcase.js";
+import { textareaMock as Mt } from "./textarea/mock.js";
+import { TimelineShowcase as Nt } from "./timeline/showcase.js";
+import { timelineMock as Pt } from "./timeline/mock.js";
+import { tagMock as Ft } from "./tag/mock.js";
+import { TagShowcase as It } from "./tag/showcase.js";
+import { typographyMock as Lt } from "./typography/mock.js";
+import { TypographyShowcase as Rt } from "./typography/showcase.js";
+import { treeViewMock as zt } from "./tree-view/mock.js";
+import { TreeViewShowcase as Bt } from "./tree-view/showcase.js";
+import { ToastShowcase as Vt } from "./toast/showcase.js";
+import { toastMock as Ht } from "./toast/mock.js";
+import { TooltipShowcase as Ut } from "./tooltip/showcase.js";
+import { tooltipMock as Wt } from "./tooltip/mock.js";
+import { FileUploadShowcase as Gt } from "./file-upload/showcase.js";
+import { fileUploadMock as Kt } from "./file-upload/mock.js";
+import { ImageUploadShowcase as qt } from "./image-upload/showcase.js";
+import { imageUploadMock as Jt } from "./image-upload/mock.js";
+import { RatingShowcase as Yt } from "./rating/showcase.js";
+import { ratingMock as Xt } from "./rating/mock.js";
+import { virtualListMock as Zt } from "./virtual-list/mock.js";
+import { VirtualListShowcase as Qt } from "./virtual-list/showcase.js";
+import { defaultComponentDemoState as $t } from "./types.js";
+//#region src/showcase/premium/index.ts
+var en = {
+	alert: {
+		mock: re,
+		Showcase: ne
+	},
+	"alert-dialog": {
+		mock: ae,
+		Showcase: ie
+	},
+	"action-menu": {
+		mock: t,
+		Showcase: e
+	},
+	button: {
+		mock: C,
+		Showcase: S
+	},
+	"button-group": {
+		mock: T,
+		Showcase: w
+	},
+	calendar: {
+		mock: D,
+		Showcase: E
+	},
+	"calendar-scheduler": {
+		mock: O,
+		Showcase: k
+	},
+	"command-palette": {
+		mock: V,
+		Showcase: B
+	},
+	carousel: {
+		mock: u,
+		Showcase: d
+	},
+	"color-picker": {
+		mock: f,
+		Showcase: p
+	},
+	"code-block": {
+		mock: P,
+		Showcase: F
+	},
+	"dual-list-picker": {
+		mock: I,
+		Showcase: L
+	},
+	divider: {
+		mock: v,
+		Showcase: y
+	},
+	input: {
+		mock: X,
+		Showcase: Y
+	},
+	"number-input": {
+		mock: X,
+		Showcase: Y
+	},
+	textarea: {
+		mock: Mt,
+		Showcase: jt
+	},
+	select: {
+		mock: mt,
+		Showcase: pt
+	},
+	"radio-group": {
+		mock: Qe,
+		Showcase: Ze
+	},
+	"async-select": {
+		mock: a,
+		Showcase: i
+	},
+	"async-multi-select": {
+		mock: s,
+		Showcase: o
+	},
+	avatar: {
+		mock: c,
+		Showcase: l
+	},
+	"date-picker": {
+		mock: ue,
+		Showcase: le
+	},
+	"date-range-picker": {
+		mock: fe,
+		Showcase: de
+	},
+	"description-list": {
+		mock: me,
+		Showcase: pe
+	},
+	drawer: {
+		mock: be,
+		Showcase: ye
+	},
+	"json-input": {
+		mock: m,
+		Showcase: h
+	},
+	kanban: {
+		mock: Se,
+		Showcase: Ce
+	},
+	"otp-input": {
+		mock: Be,
+		Showcase: ze
+	},
+	"qr-code": {
+		mock: Ye,
+		Showcase: Xe
+	},
+	rating: {
+		mock: Xt,
+		Showcase: Yt
+	},
+	"signature-pad": {
+		mock: lt,
+		Showcase: ut
+	},
+	slider: {
+		mock: gt,
+		Showcase: ht
+	},
+	"time-picker": {
+		mock: Pe,
+		Showcase: Fe
+	},
+	"tag-input": {
+		mock: Et,
+		Showcase: Tt
+	},
+	"dropdown-menu": {
+		mock: ve,
+		Showcase: _e
+	},
+	"confirm-dialog": {
+		mock: U,
+		Showcase: H
+	},
+	checkbox: {
+		mock: N,
+		Showcase: M
+	},
+	"copy-button": {
+		mock: W,
+		Showcase: G
+	},
+	switch: {
+		mock: wt,
+		Showcase: Ct
+	},
+	badge: {
+		mock: _,
+		Showcase: g
+	},
+	card: {
+		mock: j,
+		Showcase: A
+	},
+	tabs: {
+		mock: At,
+		Showcase: kt
+	},
+	collapse: {
+		mock: z,
+		Showcase: R
+	},
+	kbd: {
+		mock: ke,
+		Showcase: Oe
+	},
+	dialog: {
+		mock: ge,
+		Showcase: he
+	},
+	popover: {
+		mock: Je,
+		Showcase: qe
+	},
+	tooltip: {
+		mock: Wt,
+		Showcase: Ut
+	},
+	"right-click-menu": {
+		mock: et,
+		Showcase: $e
+	},
+	"rich-text-editor": {
+		mock: tt,
+		Showcase: nt
+	},
+	"data-table": {
+		mock: te,
+		Showcase: ee
+	},
+	"saved-filter-select": {
+		mock: ot,
+		Showcase: at
+	},
+	"sortable-list": {
+		mock: st,
+		Showcase: ct
+	},
+	"form-field": {
+		mock: J,
+		Showcase: q
+	},
+	"form-field-shell": {
+		mock: J,
+		Showcase: q
+	},
+	"form-input": {
+		mock: J,
+		Showcase: q
+	},
+	"form-select": {
+		mock: xe,
+		Showcase: q
+	},
+	"form-textarea": {
+		mock: J,
+		Showcase: q
+	},
+	"form-switch": {
+		mock: J,
+		Showcase: q
+	},
+	"form-date-range-input": {
+		mock: J,
+		Showcase: q
+	},
+	"form-date-picker": {
+		mock: J,
+		Showcase: q
+	},
+	"form-date-range-picker": {
+		mock: J,
+		Showcase: q
+	},
+	"segmented-control": {
+		mock: dt,
+		Showcase: ft
+	},
+	skeleton: {
+		mock: _t,
+		Showcase: vt
+	},
+	spinner: {
+		mock: yt,
+		Showcase: bt
+	},
+	table: {
+		mock: Ot,
+		Showcase: Dt
+	},
+	sidebar: {
+		mock: r,
+		Showcase: n
+	},
+	breadcrumbs: {
+		mock: x,
+		Showcase: b
+	},
+	"page-state": {
+		mock: We,
+		Showcase: Ue
+	},
+	pagination: {
+		mock: Ke,
+		Showcase: Ge
+	},
+	"notification-center": {
+		mock: Re,
+		Showcase: Le
+	},
+	"info-card": {
+		mock: Te,
+		Showcase: we
+	},
+	"image-cropper": {
+		mock: Ee,
+		Showcase: De
+	},
+	list: {
+		mock: Ae,
+		Showcase: je
+	},
+	"activity-feed": {
+		mock: se,
+		Showcase: oe
+	},
+	"loading-state": {
+		mock: Ne,
+		Showcase: Me
+	},
+	"data-state": {
+		mock: K,
+		Showcase: ce
+	},
+	progress: {
+		mock: $,
+		Showcase: Q
+	},
+	"progress-circle": {
+		mock: $,
+		Showcase: Q
+	},
+	"resizable-panel": {
+		mock: Ie,
+		Showcase: Z
+	},
+	section: {
+		mock: Ve,
+		Showcase: He
+	},
+	statistic: {
+		mock: xt,
+		Showcase: St
+	},
+	tag: {
+		mock: Ft,
+		Showcase: It
+	},
+	typography: {
+		mock: Lt,
+		Showcase: Rt
+	},
+	"tree-view": {
+		mock: zt,
+		Showcase: Bt
+	},
+	"file-upload": {
+		mock: Kt,
+		Showcase: Gt
+	},
+	"image-upload": {
+		mock: Jt,
+		Showcase: qt
+	},
+	"scroll-box": {
+		mock: it,
+		Showcase: rt
+	},
+	timeline: {
+		mock: Pt,
+		Showcase: Nt
+	},
+	toast: {
+		mock: Ht,
+		Showcase: Vt
+	},
+	"virtual-list": {
+		mock: Zt,
+		Showcase: Qt
+	}
+};
+//#endregion
+export { $t as defaultComponentDemoState, en as premiumShowcaseDemoRegistry };

package/dist/src/showcase/premium/info-card/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./showcase.cjs"),t=require("./mock.cjs");exports.InfoCardShowcase=e.InfoCardShowcase,exports.infoCardMock=t.infoCardMock;

package/dist/src/showcase/premium/info-card/index.js

@@ -0,0 +1,3 @@
+import { InfoCardShowcase as e } from "./showcase.js";
+import { infoCardMock as t } from "./mock.js";
+export { e as InfoCardShowcase, t as infoCardMock };

package/dist/src/showcase/premium/info-card/mock.cjs

@@ -0,0 +1,14 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={code:`import { InfoCard } from "tembro"
+
+export function Example() {
+  return (
+    <InfoCard
+      title="Team"
+      description="Active workspace members and billing snapshot."
+      eyebrow="KPI context"
+      compact
+    >
+      Keep status, metadata and helper actions in one reusable card.
+    </InfoCard>
+  )
+}`,highlights:[`Compact and standard card modes`,`Supports header, body and footer slots`,`Good for metadata blocks`,`Reusable on dashboard and forms`],scenarios:[{title:`Context blocks`,description:`Display metadata near complex forms or tables.`},{title:`Action cards`,description:`Add CTA area and media when quick guidance is needed.`},{title:`Dashboard cards`,description:`Compose many cards for module summaries.`}],capabilityNotes:["Use `eyebrow` for micro-headings and quick context.","Use `media` to place avatars or charts next to text.","Switch to `compact` in dense lists; keep default for detailed descriptions."]};exports.infoCardMock=e;

package/dist/src/showcase/premium/info-card/mock.js

@@ -0,0 +1,31 @@
+//#region src/showcase/premium/info-card/mock.ts
+var e = {
+	code: "import { InfoCard } from \"tembro\"\n\nexport function Example() {\n  return (\n    <InfoCard\n      title=\"Team\"\n      description=\"Active workspace members and billing snapshot.\"\n      eyebrow=\"KPI context\"\n      compact\n    >\n      Keep status, metadata and helper actions in one reusable card.\n    </InfoCard>\n  )\n}",
+	highlights: [
+		"Compact and standard card modes",
+		"Supports header, body and footer slots",
+		"Good for metadata blocks",
+		"Reusable on dashboard and forms"
+	],
+	scenarios: [
+		{
+			title: "Context blocks",
+			description: "Display metadata near complex forms or tables."
+		},
+		{
+			title: "Action cards",
+			description: "Add CTA area and media when quick guidance is needed."
+		},
+		{
+			title: "Dashboard cards",
+			description: "Compose many cards for module summaries."
+		}
+	],
+	capabilityNotes: [
+		"Use `eyebrow` for micro-headings and quick context.",
+		"Use `media` to place avatars or charts next to text.",
+		"Switch to `compact` in dense lists; keep default for detailed descriptions."
+	]
+};
+//#endregion
+export { e as infoCardMock };

package/dist/src/showcase/premium/info-card/showcase.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../components/ui/button/index.cjs"),n=require("../../../components/display/info-card.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={title:`Workspace`,description:`Use one card per logical entity and keep content scannable.`,actions:(0,i.jsxs)(`div`,{className:`flex gap-2`,children:[(0,i.jsx)(t.Button,{size:`sm`,variant:`outline`,children:`Export`}),(0,i.jsx)(t.Button,{size:`sm`,children:`Open`})]})};function o({mode:e}){let[o,s]=r.useState(e===`playground`),[c,l]=r.useState(`vertical`),[u,d]=r.useState(!0);return(0,i.jsxs)(`div`,{className:`space-y-4`,children:[e===`playground`?(0,i.jsxs)(`div`,{className:`flex flex-wrap gap-2`,children:[(0,i.jsx)(t.Button,{size:`sm`,variant:o?`default`:`outline`,onClick:()=>s(e=>!e),children:o?`Use spacious`:`Use compact`}),(0,i.jsx)(t.Button,{size:`sm`,variant:c===`vertical`?`default`:`outline`,onClick:()=>l(`vertical`),children:`Vertical`}),(0,i.jsx)(t.Button,{size:`sm`,variant:c===`horizontal`?`default`:`outline`,onClick:()=>l(`horizontal`),children:`Horizontal`}),(0,i.jsx)(t.Button,{size:`sm`,variant:u?`default`:`outline`,onClick:()=>d(e=>!e),children:u?`Selected`:`Default`})]}):null,(0,i.jsx)(n.InfoCard,{eyebrow:`Summary`,title:a.title,description:a.description,actions:a.actions,compact:o,orientation:c,selected:u,children:(0,i.jsx)(`p`,{className:`aui-text-muted mt-2 text-sm`,children:`Keep micro metadata and status chips in one card surface.`})}),(0,i.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[(0,i.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Header + actions`}),(0,i.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Action area stays isolated from the parent card click/select state.`})]}),(0,i.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Density`}),(0,i.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Compact and regular modes cover dashboard tiles and detail summaries.`})]}),(0,i.jsxs)(`div`,{className:`rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm`,children:[(0,i.jsx)(`p`,{className:`font-medium aui-text-strong`,children:`Orientation`}),(0,i.jsx)(`p`,{className:`mt-2 aui-text-muted`,children:`Vertical and horizontal layouts reuse the same surface API.`})]})]})]})}exports.InfoCardShowcase=o;

package/dist/src/showcase/premium/info-card/showcase.js

@@ -0,0 +1,107 @@
+import { Button as e } from "../../../components/ui/button/index.js";
+import { InfoCard as t } from "../../../components/display/info-card.js";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/showcase/premium/info-card/showcase.tsx
+var a = {
+	title: "Workspace",
+	description: "Use one card per logical entity and keep content scannable.",
+	actions: /* @__PURE__ */ i("div", {
+		className: "flex gap-2",
+		children: [/* @__PURE__ */ r(e, {
+			size: "sm",
+			variant: "outline",
+			children: "Export"
+		}), /* @__PURE__ */ r(e, {
+			size: "sm",
+			children: "Open"
+		})]
+	})
+};
+function o({ mode: o }) {
+	let [s, c] = n.useState(o === "playground"), [l, u] = n.useState("vertical"), [d, f] = n.useState(!0);
+	return /* @__PURE__ */ i("div", {
+		className: "space-y-4",
+		children: [
+			o === "playground" ? /* @__PURE__ */ i("div", {
+				className: "flex flex-wrap gap-2",
+				children: [
+					/* @__PURE__ */ r(e, {
+						size: "sm",
+						variant: s ? "default" : "outline",
+						onClick: () => c((e) => !e),
+						children: s ? "Use spacious" : "Use compact"
+					}),
+					/* @__PURE__ */ r(e, {
+						size: "sm",
+						variant: l === "vertical" ? "default" : "outline",
+						onClick: () => u("vertical"),
+						children: "Vertical"
+					}),
+					/* @__PURE__ */ r(e, {
+						size: "sm",
+						variant: l === "horizontal" ? "default" : "outline",
+						onClick: () => u("horizontal"),
+						children: "Horizontal"
+					}),
+					/* @__PURE__ */ r(e, {
+						size: "sm",
+						variant: d ? "default" : "outline",
+						onClick: () => f((e) => !e),
+						children: d ? "Selected" : "Default"
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ r(t, {
+				eyebrow: "Summary",
+				title: a.title,
+				description: a.description,
+				actions: a.actions,
+				compact: s,
+				orientation: l,
+				selected: d,
+				children: /* @__PURE__ */ r("p", {
+					className: "aui-text-muted mt-2 text-sm",
+					children: "Keep micro metadata and status chips in one card surface."
+				})
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "grid gap-3 md:grid-cols-3",
+				children: [
+					/* @__PURE__ */ i("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ r("p", {
+							className: "font-medium aui-text-strong",
+							children: "Header + actions"
+						}), /* @__PURE__ */ r("p", {
+							className: "mt-2 aui-text-muted",
+							children: "Action area stays isolated from the parent card click/select state."
+						})]
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ r("p", {
+							className: "font-medium aui-text-strong",
+							children: "Density"
+						}), /* @__PURE__ */ r("p", {
+							className: "mt-2 aui-text-muted",
+							children: "Compact and regular modes cover dashboard tiles and detail summaries."
+						})]
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-surface-muted)] px-4 py-3 text-sm",
+						children: [/* @__PURE__ */ r("p", {
+							className: "font-medium aui-text-strong",
+							children: "Orientation"
+						}), /* @__PURE__ */ r("p", {
+							className: "mt-2 aui-text-muted",
+							children: "Vertical and horizontal layouts reuse the same surface API."
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { o as InfoCardShowcase };