admin-ui-starter-kit 0.1.0

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

@@ -0,0 +1,163 @@
+---
+id: composed/onboarding-checklist
+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
+family: "Onboarding"
+sourcePath: src/components/composed/onboarding
+examples:
+  - BorderedDefaultPointOfSaleOnboarding
+  - CardVariantWorkspaceSetupControlled
+  - FlatVariantMinimal
+imports:
+  - @/components/base/badge
+  - @/components/base/buttons
+  - @/components/base/cards
+  - @/components/base/forms/fields
+  - @/components/composed/onboarding
+  - @/components/typography
+tags:
+  - composed
+  - onboarding
+  - checklist
+  - step
+  - list
+  - accordion
+---
+
+# Composed · Onboarding · Checklist
+
+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`  
+**Source:** `src/components/composed/onboarding`
+
+## Examples
+
+```tsx
+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>
+		</>
+	);
+}
+```
+
+## Example exports
+
+- `BorderedDefaultPointOfSaleOnboarding`
+- `CardVariantWorkspaceSetupControlled`
+- `FlatVariantMinimal`
+

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

@@ -0,0 +1,233 @@
+---
+id: composed/timelines
+title: "Composed · Timelines"
+description: "Read-only tracking timelines — steps, order, payment, activity stream, release changelog, project milestones. For interactive activity (segments, mass-config, resource registry, callbacks) see Features → Activity feed."
+layer: composed
+family: "Timelines"
+sourcePath: src/components/composed/timelines
+examples:
+  - StepsVertical
+  - StepsHorizontalExample
+  - OrderTimeline
+  - PaymentTimeline
+  - ActivityStreamReadOnlyTracking
+  - Changelog
+  - Milestones
+imports:
+  - @/components/composed/timelines
+tags:
+  - composed
+  - timelines
+  - read
+  - only
+  - tracking
+  - steps
+---
+
+# Composed · Timelines
+
+Read-only tracking timelines — steps, order, payment, activity stream, release changelog, project milestones. For interactive activity (segments, mass-config, resource registry, callbacks) see Features → Activity feed.
+
+**Layer:** `composed`  
+**Source:** `src/components/composed/timelines`
+
+## Examples
+
+```tsx
+import {
+	AlertTriangle,
+	CheckCircle,
+	CreditCard,
+	FileText,
+	Heart,
+	Mail,
+	Receipt,
+	ShoppingBag,
+} from 'lucide-react';
+import {
+	ActivityStreamCard,
+	ChangelogTimelineCard,
+	MilestonesTimelineCard,
+	OrderTimelineCard,
+	PaymentTimelineCard,
+	StepsCard,
+	StepsHorizontal,
+} from '@/components/composed/timelines';
+
+const steps = [
+	{ id: '1', title: 'Order Placed', description: 'Customer completed checkout', status: 'completed' as const, timestamp: 'Mar 24' },
+	{ id: '2', title: 'Payment Confirmed', status: 'completed' as const, timestamp: 'Mar 24', badge: 'Verified', badgeVariant: 'success' as const },
+	{ id: '3', title: 'Preparing Vouchers', description: 'Generating codes', status: 'current' as const },
+	{ id: '4', title: 'Ready for Delivery', status: 'upcoming' as const },
+	{ id: '5', title: 'Delivered', status: 'upcoming' as const },
+];
+
+export function StepsVertical() {
+	return (
+		<>
+			<StepsCard title="Order Processing" description="Order #ORD-2026-0412" steps={steps} />
+		</>
+	);
+}
+
+export function StepsHorizontalExample() {
+	return (
+		<>
+			<StepsHorizontal title="Delivery Pipeline" steps={steps} />
+		</>
+	);
+}
+
+export function OrderTimeline() {
+	return (
+		<>
+			<OrderTimelineCard
+								title="Order #ORD-2026-0415"
+								description="Sarah Smitha — 2,450 USD"
+								events={[
+									{ id: '1', title: 'Order placed', timestamp: '10:24 AM', status: 'completed' },
+									{ id: '2', title: 'Payment received', description: '2,450 USD', timestamp: '10:26 AM', status: 'completed' },
+									{ id: '3', title: 'Vouchers generated', timestamp: '10:27 AM', status: 'completed' },
+									{ id: '4', title: 'Email sent', timestamp: '10:28 AM', status: 'current' },
+									{ id: '5', title: 'Delivery scheduled', timestamp: '—', status: 'pending' },
+								]}
+								footerText="Last updated 2 minutes ago"
+							/>
+		</>
+	);
+}
+
+export function PaymentTimeline() {
+	return (
+		<>
+			<PaymentTimelineCard
+								events={[
+									{ label: 'Invoice sent', date: 'Mar 20', amount: '2,480 USD', done: true, icon: FileText },
+									{ label: 'Reminder sent', date: 'Apr 5', done: true, icon: Mail },
+									{ label: 'Payment received', date: 'Apr 12', amount: '2,480 USD', done: true, icon: CreditCard },
+									{ label: 'Receipt generated', date: 'Apr 12', done: false, icon: Receipt },
+								]}
+							/>
+		</>
+	);
+}
+
+export function ActivityStreamReadOnlyTracking() {
+	return (
+		<>
+			<ActivityStreamCard
+								items={[
+									{ id: '1', icon: CheckCircle, iconVariant: 'success', actor: 'Sarah Smitha', action: 'paid invoice', target: '#INV-2026-0392', timestamp: '2 minutes ago' },
+									{ id: '2', icon: ShoppingBag, iconVariant: 'primary', actor: 'Daniel Smith', action: 'placed order', target: '#ORD-2026-0413', timestamp: '15 minutes ago', metadata: [{ label: 'Items', value: '3' }, { label: 'Total', value: '370 USD' }] },
+									{ id: '3', icon: Heart, iconVariant: 'warning', actor: 'Emma Garcia', action: 'favorited', target: 'Hot Air Balloon', timestamp: '1 hour ago' },
+									{ id: '4', icon: AlertTriangle, iconVariant: 'error', action: 'Webhook failure on', target: 'shopify.payments.captured', timestamp: '3 hours ago' },
+								]}
+							/>
+		</>
+	);
+}
+
+export function Changelog() {
+	return (
+		<>
+			<ChangelogTimelineCard
+								entries={[
+									{
+										id: 'c1',
+										kind: 'added',
+										title: 'Voucher entry component',
+										version: 'v2.4.0',
+										timestamp: 'Apr 20',
+										author: 'mp',
+										description: 'New gift-card redemption surface; companion to coupon input.',
+									},
+									{
+										id: 'c2',
+										kind: 'fixed',
+										title: 'Booking row dark-on-dark contrast',
+										version: 'v2.3.4',
+										timestamp: 'Apr 18',
+										author: 'sp',
+										description: 'Day numbers were invisible on the primary chip.',
+									},
+									{
+										id: 'c3',
+										kind: 'modified',
+										title: 'InlineMetric typography rebalanced',
+										version: 'v2.3.3',
+										timestamp: 'Apr 16',
+										author: 'em',
+									},
+									{
+										id: 'c4',
+										kind: 'removed',
+										title: 'Legacy giftcardStatusMap',
+										version: 'v2.3.0',
+										timestamp: 'Apr 14',
+										author: 'id',
+										description: 'Use defaultGiftcardStrings.status + giftcardStatusVariant.',
+									},
+								]}
+							/>
+		</>
+	);
+}
+
+export function Milestones() {
+	return (
+		<>
+			<MilestonesTimelineCard
+								milestones={[
+									{
+										id: 'm1',
+										title: 'Phase A — cross-cutting infra',
+										description: 'Strings helper, typography scale, conventions doc.',
+										dueDate: 'Apr 28',
+										status: 'completed',
+									},
+									{
+										id: 'm2',
+										title: 'Phase B — base primitives',
+										description: 'Display, currency, forms, table, navigation, calendar.',
+										dueDate: 'Apr 30',
+										status: 'completed',
+									},
+									{
+										id: 'm3',
+										title: 'Phase C — composed redesign',
+										description: 'Cards, charts, commerce, navigation, timelines, AI.',
+										dueDate: 'May 4',
+										status: 'in_progress',
+										progress: 72,
+									},
+									{
+										id: 'm4',
+										title: 'Phase D — upload subsystem',
+										description: 'Dropzone, AvatarUpload, MediaGallery, UploadProgressList.',
+										dueDate: 'May 8',
+										status: 'upcoming',
+									},
+									{
+										id: 'm5',
+										title: 'Public release v3.0',
+										description: 'Tagged release, migration guide, codemod scripts.',
+										dueDate: 'May 20',
+										status: 'blocked',
+									},
+								]}
+							/>
+		</>
+	);
+}
+```
+
+## Example exports
+
+- `StepsVertical`
+- `StepsHorizontalExample`
+- `OrderTimeline`
+- `PaymentTimeline`
+- `ActivityStreamReadOnlyTracking`
+- `Changelog`
+- `Milestones`
+

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

@@ -0,0 +1,75 @@
+---
+id: composed/vendor-profile
+title: "Composed · Vendor profile"
+description: "VendorProfileCard with metrics, stats and actions."
+layer: composed
+family: "Cards"
+sourcePath: src/components/composed/cards/vendor-profile
+examples:
+  - WithEverything
+  - Minimal
+imports:
+  - @/components/composed/cards/vendor-profile
+tags:
+  - composed
+  - cards
+  - vendor-profile
+  - vendor
+  - profile
+  - vendorprofilecard
+  - metrics
+---
+
+# Composed · Vendor profile
+
+VendorProfileCard with metrics, stats and actions.
+
+**Layer:** `composed`  
+**Source:** `src/components/composed/cards/vendor-profile`
+
+## Examples
+
+```tsx
+import { VendorProfileCard } from '@/components/composed/cards/vendor-profile';
+
+export function WithEverything() {
+	return (
+		<>
+			<VendorProfileCard
+								name="Dimitar Kostadinov"
+								role="Experience Vendor"
+								verified
+								earnings="8,420 USD"
+								earningsChange="+12.5%"
+								metrics={[
+									{ label: 'Experiences hosted', value: '47' },
+									{ label: 'Avg. rating', value: '4.8 / 5.0' },
+									{ label: 'Repeat customers', value: '68%' },
+								]}
+								stats={[
+									{ label: 'This month', value: '1,240 USD', change: '+8%' },
+									{ label: 'Bookings', value: '23', change: '+3' },
+									{ label: 'Conversion', value: '74%', change: '+5%' },
+									{ label: 'Avg. order', value: '54 USD', change: '-2%' },
+								]}
+								onMessage={() => {}}
+								onHire={() => {}}
+							/>
+		</>
+	);
+}
+
+export function Minimal() {
+	return (
+		<>
+			<VendorProfileCard name="Emma Garcia" role="New vendor" />
+		</>
+	);
+}
+```
+
+## Example exports
+
+- `WithEverything`
+- `Minimal`
+