admin-ui-starter-kit 0.5.0 → 0.6.1

package/.agents/skills/component-library-rules/references/components/base__empty-state.md

@@ -1,310 +0,0 @@
----
-id: base/empty-state
-title: "Empty state"
-description: "Adaptive zero-data surface. Wrap with the right illustration per resource — products, users, search results, inbox. Slots for media / actions / footer; consumer overrides every string."
-layer: base
-family: "Display"
-sourcePath: src/components/base/display/empty-state
-examples:
-  - Default
-  - NoProductsWithActions
-  - NoTeamMembers
-  - NoSearchResults
-  - InboxZero
-  - PaddingCompact
-  - PaddingBase
-  - PaddingLoose
-  - DashedBorderDropZone
-  - StringsPropLocalisation
-  - RenderPropCustomMedia
-imports:
-  - @/components/base/buttons
-  - @/components/base/cards
-  - @/components/base/display/empty-state
-  - @/components/typography/text-link
-publicImport: admin-ui-starter-kit/base/display
-tags:
-  - base
-  - display
-  - empty-state
-  - empty
-  - state
-  - adaptive
-  - zero
----
-
-# Empty state
-
-Adaptive zero-data surface. Wrap with the right illustration per resource — products, users, search results, inbox. Slots for media / actions / footer; consumer overrides every string.
-
-**Layer:** `base`
-**Source:** `src/components/base/display/empty-state`
-**Consumer import:** `admin-ui-starter-kit/base/display`
-
-## Consumer import
-
-Consumers import this surface from `admin-ui-starter-kit/base/display`.
-The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
-
-## Overview
-
-`EmptyState` is the canonical zero-data surface. Pass an illustration (or any
-node) via `media`, optional `actions` and `footer` slots, and tune the surface
-with `padding` (`compact` / `base` / `loose`) and `border` (dashed drop-zone
-affordance). Five built-in illustrations cover the common cases.
-
-## Default
-
-<Example name="Default" source={examplesSource}>
-	<Examples.Default />
-</Example>
-
-## Common scenarios
-
-<Example name="NoProductsWithActions" source={examplesSource}>
-	<Examples.NoProductsWithActions />
-</Example>
-
-<Example name="NoTeamMembers" source={examplesSource}>
-	<Examples.NoTeamMembers />
-</Example>
-
-<Example name="NoSearchResults" source={examplesSource}>
-	<Examples.NoSearchResults />
-</Example>
-
-<Example name="InboxZero" source={examplesSource}>
-	<Examples.InboxZero />
-</Example>
-
-## Padding
-
-<Example name="PaddingCompact" source={examplesSource}>
-	<Examples.PaddingCompact />
-</Example>
-
-<Example name="PaddingBase" source={examplesSource}>
-	<Examples.PaddingBase />
-</Example>
-
-<Example name="PaddingLoose" source={examplesSource}>
-	<Examples.PaddingLoose />
-</Example>
-
-## Composition
-
-<Example name="DashedBorderDropZone" source={examplesSource}>
-	<Examples.DashedBorderDropZone />
-</Example>
-
-<Example name="StringsPropLocalisation" source={examplesSource}>
-	<Examples.StringsPropLocalisation />
-</Example>
-
-<Example name="RenderPropCustomMedia" source={examplesSource}>
-	<Examples.RenderPropCustomMedia />
-</Example>
-
-## Examples
-
-```tsx
-import { ListPlus, RefreshCw, Upload } from 'lucide-react';
-import { Button } from '@/components/base/buttons';
-import { SmartCard } from '@/components/base/cards';
-import {
-	DocumentStackIllustration,
-	EmptyState,
-	InboxCleanIllustration,
-	SearchGlassIllustration,
-	StackedCardsIllustration,
-	UsersCircleIllustration,
-} from '@/components/base/display/empty-state';
-import TextLink from '@/components/typography/text-link';
-
-export function Default() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				media={<DocumentStackIllustration />}
-				title="No invoices yet"
-				description="Invoices appear here once a sale is completed."
-			/>
-		</SmartCard>
-	);
-}
-
-export function NoProductsWithActions() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				media={<StackedCardsIllustration />}
-				title="No products yet"
-				description="Add your first product to start selling. You can also import an existing catalog."
-				actions={
-					<>
-						<Button>
-							<ListPlus className="size-4" />
-							Add product
-						</Button>
-						<Button variant="secondary" buttonStyle="ghost">
-							<Upload className="size-4" />
-							Import CSV
-						</Button>
-					</>
-				}
-				footer={
-					<>
-						Need help? <TextLink href="#">Read the guide</TextLink>
-					</>
-				}
-			/>
-		</SmartCard>
-	);
-}
-
-export function NoTeamMembers() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				media={<UsersCircleIllustration />}
-				title="Invite your team"
-				description="Bring in collaborators to manage the workspace together."
-				actions={<Button>Invite member</Button>}
-			/>
-		</SmartCard>
-	);
-}
-
-export function NoSearchResults() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				mediaVariant="illustration"
-				media={<SearchGlassIllustration />}
-				title="No results for &ldquo;quarterly&rdquo;"
-				description="Try a broader query, or clear filters to see everything."
-				actions={
-					<Button variant="secondary" buttonStyle="ghost">
-						<RefreshCw className="size-4" />
-						Clear filters
-					</Button>
-				}
-				padding="compact"
-			/>
-		</SmartCard>
-	);
-}
-
-export function InboxZero() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				media={<InboxCleanIllustration />}
-				title="You&rsquo;re all caught up"
-				description={false}
-				padding="compact"
-			/>
-		</SmartCard>
-	);
-}
-
-export function PaddingCompact() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				media={<DocumentStackIllustration />}
-				title="Compact padding"
-				description="padding=&quot;compact&quot;"
-				padding="compact"
-			/>
-		</SmartCard>
-	);
-}
-
-export function PaddingBase() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				media={<DocumentStackIllustration />}
-				title="Base padding"
-				description="padding=&quot;base&quot; (default)"
-			/>
-		</SmartCard>
-	);
-}
-
-export function PaddingLoose() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				media={<DocumentStackIllustration />}
-				title="Loose padding"
-				description="padding=&quot;loose&quot;"
-				padding="loose"
-			/>
-		</SmartCard>
-	);
-}
-
-export function DashedBorderDropZone() {
-	return (
-		<div className="w-full max-w-xl">
-			<EmptyState
-				border
-				mediaVariant="icon"
-				media={<ListPlus className="size-6 text-muted-foreground" />}
-				title="Drop a file to attach"
-				description="Or click to browse. Max 10 MB."
-				padding="loose"
-			/>
-		</div>
-	);
-}
-
-export function StringsPropLocalisation() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				media={<StackedCardsIllustration />}
-				strings={{
-					title: 'Aucun produit',
-					description: 'Ajoutez votre premier produit pour commencer.',
-				}}
-			/>
-		</SmartCard>
-	);
-}
-
-export function RenderPropCustomMedia() {
-	return (
-		<SmartCard padding="sm" className="w-full max-w-xl">
-			<EmptyState
-				mediaVariant="illustration"
-				renderMedia={({ mediaVariant }) => (
-					<div className="flex flex-col items-center gap-1">
-						<div className="size-12 rounded-full bg-info/15 ring-8 ring-info/5" />
-						<span className="text-xs text-muted-foreground">variant: {mediaVariant}</span>
-					</div>
-				)}
-				title="Custom rendering through renderMedia"
-				description="The render-prop receives the resolved variant so consumers can react to it."
-			/>
-		</SmartCard>
-	);
-}
-```
-
-## Example exports
-
-- `Default`
-- `NoProductsWithActions`
-- `NoTeamMembers`
-- `NoSearchResults`
-- `InboxZero`
-- `PaddingCompact`
-- `PaddingBase`
-- `PaddingLoose`
-- `DashedBorderDropZone`
-- `StringsPropLocalisation`
-- `RenderPropCustomMedia`
-

package/.agents/skills/component-library-rules/references/components/base__frame.md

@@ -1,235 +0,0 @@
----
-id: base/frame
-title: "Frame"
-description: "Grouped panel primitive for related admin content, stacked records, and dense framed surfaces."
-layer: base
-family: "Foundations"
-sourcePath: src/components/base/frame
-examples:
-  - DefaultFrame
-  - StackedPanels
-  - InverseFrame
-  - DenseFitPanel
-  - FrameVariantMatrix
-imports:
-  - @/components/base/badge
-  - @/components/base/buttons
-  - @/components/base/frame
-  - @/components/base/item
-  - @/components/typography
-publicImport: admin-ui-starter-kit/base/frame
-tags:
-  - base
-  - foundations
-  - frame
-  - grouped
-  - panel
-  - primitive
-  - related
----
-
-# Frame
-
-Grouped panel primitive for related admin content, stacked records, and dense framed surfaces.
-
-**Layer:** `base`
-**Source:** `src/components/base/frame`
-**Consumer import:** `admin-ui-starter-kit/base/frame`
-
-## Consumer import
-
-Consumers import this surface from `admin-ui-starter-kit/base/frame`.
-The examples below use repository source aliases because they run inside the preview app; do not copy those aliases into consuming applications.
-
-## Overview
-
-`Frame` gives consumers a reusable grouping shell without reaching for ad hoc
-card divs. It owns the outer chrome and spacing tokens; `FramePanel` owns each
-inner surface. Use it when several related panels should read as one object.
-
-## Usage
-
-Import from the exact public entrypoint:
-
-```tsx
-import {
-	Frame,
-	FramePanel,
-	FrameHeader,
-	FrameTitle,
-	FrameDescription,
-	FrameFooter,
-} from 'admin-ui-starter-kit/base/frame';
-```
-
-Use `Frame` for related admin panels that need one shared boundary. Use
-`FramePanel` for each contained surface, `fit` when media or charts should
-touch the panel edge, `stacked` when panels should collapse into one segmented
-record, and `dense` for table-adjacent or settings-row layouts. The default
-`spacing` follows `useCardConfig().defaultPadding`; pass `spacing` only when a
-surface needs to override the provider default.
-
-## Examples
-
-```tsx
-import { Activity, BadgeCheck, CreditCard, Database, ShieldCheck } from 'lucide-react';
-
-import {
-	Frame,
-	FrameDescription,
-	FrameFooter,
-	FrameHeader,
-	FramePanel,
-	FrameTitle,
-} from '@/components/base/frame';
-import {
-	Item,
-	ItemActions,
-	ItemContent,
-	ItemDescription,
-	ItemMedia,
-	ItemTitle,
-} from '@/components/base/item';
-import { Badge } from '@/components/base/badge';
-import { Button } from '@/components/base/buttons';
-import { Text } from '@/components/typography';
-
-const systemRows = [
-	{ id: 'sync', title: 'Catalog sync', description: 'Last completed 8 minutes ago', icon: Database, badge: 'Healthy' },
-	{ id: 'payments', title: 'Payments', description: 'Stripe webhooks are processing normally', icon: CreditCard, badge: 'Live' },
-	{ id: 'security', title: 'Security review', description: '2 team members need SSO confirmation', icon: ShieldCheck, badge: 'Review' },
-];
-
-const frameMatrix = [
-	{ variant: 'default', spacing: 'xs', title: 'Default / xs' },
-	{ variant: 'inverse', spacing: 'sm', title: 'Inverse / sm' },
-	{ variant: 'ghost', spacing: 'base', title: 'Ghost / base' },
-	{ variant: 'default', spacing: 'lg', title: 'Default / lg' },
-] as const;
-
-export function DefaultFrame() {
-	return (
-		<Frame className="w-full max-w-xl">
-			<FrameHeader>
-				<FrameTitle>Workspace health</FrameTitle>
-				<FrameDescription>Grouped panels with one shared outer frame.</FrameDescription>
-			</FrameHeader>
-			<FramePanel>
-				<div className="grid gap-3 sm:grid-cols-3">
-					<div>
-						<Text size="xs" type="secondary">Uptime</Text>
-						<Text weight="semibold">99.98%</Text>
-					</div>
-					<div>
-						<Text size="xs" type="secondary">Open alerts</Text>
-						<Text weight="semibold">3</Text>
-					</div>
-					<div>
-						<Text size="xs" type="secondary">Queued jobs</Text>
-						<Text weight="semibold">18</Text>
-					</div>
-				</div>
-			</FramePanel>
-			<FrameFooter>
-				<Text size="xs" type="secondary">Updated just now</Text>
-			</FrameFooter>
-		</Frame>
-	);
-}
-
-export function StackedPanels() {
-	return (
-		<Frame stacked spacing="sm" className="w-full max-w-xl">
-			{systemRows.map((row) => {
-				const Icon = row.icon;
-				return (
-					<FramePanel key={row.id}>
-						<Item className="rounded-none p-0">
-							<ItemMedia variant="icon">
-								<Icon />
-							</ItemMedia>
-							<ItemContent>
-								<ItemTitle>{row.title}</ItemTitle>
-								<ItemDescription>{row.description}</ItemDescription>
-							</ItemContent>
-							<ItemActions>
-								<Badge variant={row.badge === 'Review' ? 'warning' : 'success'}>{row.badge}</Badge>
-							</ItemActions>
-						</Item>
-					</FramePanel>
-				);
-			})}
-		</Frame>
-	);
-}
-
-export function InverseFrame() {
-	return (
-		<Frame variant="inverse" spacing="base" className="w-full max-w-xl">
-			<FramePanel>
-				<div className="flex items-start justify-between gap-3">
-					<div className="space-y-1">
-						<Text size="xs" type="secondary">Monthly automation run</Text>
-						<Text weight="semibold">12,842 tasks completed</Text>
-						<Text size="xs" type="secondary">Average queue latency is down 18% from last week.</Text>
-					</div>
-					<Badge variant="info">
-						<Activity className="size-3" />
-						Live
-					</Badge>
-				</div>
-			</FramePanel>
-		</Frame>
-	);
-}
-
-export function DenseFitPanel() {
-	return (
-		<Frame dense className="w-full max-w-xl">
-			<FramePanel fit>
-				<div className="grid grid-cols-[1fr_auto] items-center gap-3 px-3 py-2">
-					<div className="flex items-center gap-2">
-						<BadgeCheck className="size-4 text-success" />
-						<Text weight="semibold">Payout batch approved</Text>
-					</div>
-					<Button variant="secondary" buttonStyle="ghost">View</Button>
-				</div>
-			</FramePanel>
-		</Frame>
-	);
-}
-
-export function FrameVariantMatrix() {
-	return (
-		<div className="grid w-full gap-3 md:grid-cols-2">
-			{frameMatrix.map((item) => (
-				<Frame
-					key={`${item.variant}-${item.spacing}`}
-					variant={item.variant}
-					spacing={item.spacing}
-				>
-					<FrameHeader>
-						<FrameTitle>{item.title}</FrameTitle>
-						<FrameDescription>Provider-aware spacing with stable frame hooks.</FrameDescription>
-					</FrameHeader>
-					<FramePanel>
-						<div className="flex items-center justify-between gap-3">
-							<Text size="xs" type="secondary">Review queue</Text>
-							<Badge variant={item.variant === 'ghost' ? 'secondary' : 'info'}>12 open</Badge>
-						</div>
-					</FramePanel>
-				</Frame>
-			))}
-		</div>
-	);
-}
-```
-
-## Example exports
-
-- `DefaultFrame`
-- `StackedPanels`
-- `InverseFrame`
-- `DenseFitPanel`
-- `FrameVariantMatrix`
-