tera-system-ui 0.1.64 → 0.1.66

package/dist/stories/ComponentOverview.stories.svelte

@@ -0,0 +1,533 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'TeraUI / Overview',
+    tags: ['!autodocs'],
+  });
+</script>
+
+<script>
+  // Core components
+  import { Button }   from '../components/button/index.js';
+  import { Input }    from '../components/input/index.js';
+  import { Select }   from '../components/select/index.js';
+  import { TextArea } from '../components/text-area/index.js';
+  import { Checkbox } from '../components/checkbox/index.js';
+  import { Switch }   from '../components/switch/index.js';
+  import { Slider }   from '../components/slider/index.js';
+  import { Label }    from '../components/label/index.js';
+  import { Combobox } from '../components/combobox/index.js';
+
+  // Navigation
+  import { Tabs, TabsList, TabsItem, TabsContent } from '../components/tabs/index.js';
+  import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../components/accordion/index.js';
+
+  // Overlay
+  import { Dialog }       from '../components/dialog/index.js';
+  import { Drawer }       from '../components/drawer/index.js';
+  import { Popover }      from '../components/popover/index.js';
+  import { DropdownMenu, DropdownMenuItem, DropdownMenuSeparator } from '../components/dropdown-menu/index.js';
+  import { ToastContainer, toast } from '../components/toast/index.js';
+  import { Tooltip }      from '../components/tooltip/index.js';
+
+  // Feedback & display
+  import { Card }     from '../components/card/index.js';
+  import { Badge }    from '../components/badge/index.js';
+  import { Alert }    from '../components/alert/index.js';
+  import { Spinner }  from '../components/spinner/index.js';
+  import { Skeleton } from '../components/skeleton/index.js';
+  import { Table }    from '../components/table/index.js';
+
+  // Identity
+  import { Avatar }    from '../components/avatar/index.js';
+  import { BrandLogo } from '../components/brand-logo/index.js';
+  import { StarRating} from '../components/star-rating/index.js';
+  import { LightDarkToggle } from '../components/light-dark-toggle/index.js';
+
+  // AI components
+  import { ChatBubble, ThinkingLoader, SuggestionChips, StreamText, PromptInput } from '../components/ai/index.js';
+
+  // Marketing components
+  import { FeatureCard, StatBlock, PricingCard, TestimonialCard } from '../components/marketing/index.js';
+
+  // State
+  let tabValue   = $state('t1');
+  let dialogOpen = $state(false);
+  let drawerOpen = $state(false);
+  let promptValue = $state('');
+  let streamKey   = $state(0);
+</script>
+
+<Story name="All Components">
+  <ToastContainer/>
+  <div class="overview-wrap">
+
+    <!-- ── BUTTONS ── -->
+    <section>
+      <h2 class="section-label">Buttons</h2>
+      <div class="row">
+        <Button variant="primary">Primary</Button>
+        <Button variant="default">Default</Button>
+        <Button variant="dashed">Dashed</Button>
+        <Button variant="text">Text</Button>
+        <Button variant="link">Link</Button>
+        <Button variant="primary" loading>Loading</Button>
+        <Button variant="primary" disabled>Disabled</Button>
+        <Button variant="primary" danger>Danger</Button>
+        <Button variant="primary" size="sm">Small</Button>
+        <Button variant="primary" size="lg">Large</Button>
+      </div>
+    </section>
+
+    <!-- ── FORM INPUTS ── -->
+    <section>
+      <h2 class="section-label">Form — Input & Select</h2>
+      <div class="row">
+        <Input placeholder="Default input" style="width:180px"/>
+        <Input placeholder="Filled variant" variant="filled" style="width:180px"/>
+        <Input placeholder="Error state" status="error" style="width:180px"/>
+        <Input placeholder="Disabled" disabled style="width:180px"/>
+        <Select
+          options={[{value:'a',label:'Option A'},{value:'b',label:'Option B'},{value:'c',label:'Option C'}]}
+          placeholder="Flat select"
+          style="width:180px"
+        />
+        <Select
+          groups={[
+            {label:'Frontend', options:[{value:'ts',label:'TypeScript'},{value:'svelte',label:'Svelte'}]},
+            {label:'Backend',  options:[{value:'go',label:'Go'},{value:'py',label:'Python'}]},
+          ]}
+          placeholder="Grouped select"
+          style="width:180px"
+        />
+      </div>
+    </section>
+
+    <!-- ── COMBOBOX ── -->
+    <section>
+      <h2 class="section-label">Form — Combobox</h2>
+      <div class="row">
+        <Combobox
+          type="single"
+          items={[
+            {value:'ts',label:'TypeScript'},{value:'js',label:'JavaScript'},
+            {value:'py',label:'Python'},{value:'go',label:'Go'},
+            {value:'rust',label:'Rust'},{value:'java',label:'Java'},
+          ]}
+          placeholder="Search language…"
+          style="width:220px"
+        />
+        <Combobox
+          type="multiple"
+          items={[
+            {value:'react',label:'React'},{value:'svelte',label:'Svelte'},
+            {value:'vue',label:'Vue'},{value:'angular',label:'Angular'},
+          ]}
+          placeholder="Pick frameworks…"
+          style="width:240px"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-label">Form — TextArea</h2>
+      <div class="row">
+        <TextArea placeholder="Default textarea" style="width:220px"/>
+        <TextArea placeholder="Filled variant" variant="filled" style="width:220px"/>
+        <TextArea placeholder="Error state" status="error" style="width:220px"/>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-label">Form — Controls</h2>
+      <div class="row" style="align-items:center">
+        <Label>Label component</Label>
+        <Checkbox>Accept terms</Checkbox>
+        <Checkbox checked>Pre-checked</Checkbox>
+        <Switch/>
+        <Switch checked/>
+        <div style="width:200px"><Slider min={0} max={100} step={1} value={40}/></div>
+        <div style="height:80px; display:flex; align-items:center;">
+          <Slider min={0} max={100} step={1} value={60} orientation="vertical" class="h-full" />
+        </div>
+      </div>
+    </section>
+
+    <!-- ── CARDS ── -->
+    <section>
+      <h2 class="section-label">Cards</h2>
+      <div class="row" style="align-items:stretch">
+        <Card style="width:160px"><p class="text-sm font-semibold">Default</p><p class="text-xs text-text-tertiary mt-1">shadow-sm</p></Card>
+        <Card variant="elevated" style="width:160px"><p class="text-sm font-semibold">Elevated</p><p class="text-xs text-text-tertiary mt-1">shadow-md</p></Card>
+        <Card variant="bordered" style="width:160px"><p class="text-sm font-semibold">Bordered</p><p class="text-xs text-text-tertiary mt-1">border only</p></Card>
+        <Card variant="ghost"    style="width:160px"><p class="text-sm font-semibold">Ghost</p><p class="text-xs text-text-tertiary mt-1">no bg</p></Card>
+        <Card clickable style="width:160px"><p class="text-sm font-semibold">Clickable ↑</p><p class="text-xs text-text-tertiary mt-1">hover to lift</p></Card>
+        <Card loading   style="width:160px"><p class="text-sm">Loading state</p></Card>
+      </div>
+    </section>
+
+    <!-- ── BADGES ── -->
+    <section>
+      <h2 class="section-label">Badges</h2>
+      <div class="row">
+        <Badge>Default</Badge>
+        <Badge variant="primary">Primary</Badge>
+        <Badge variant="success">Success</Badge>
+        <Badge variant="error">Error</Badge>
+        <Badge variant="warning">Warning</Badge>
+        <Badge variant="info">Info</Badge>
+        <Badge variant="primary" dot>With dot</Badge>
+        <Badge variant="success" closable>Closable</Badge>
+        <Badge variant="primary" size="sm">Small</Badge>
+      </div>
+    </section>
+
+    <!-- ── ALERTS ── -->
+    <section>
+      <h2 class="section-label">Alerts</h2>
+      <div class="col" style="max-width:520px">
+        <Alert variant="info"    title="Info">Informational message.</Alert>
+        <Alert variant="success" title="Done">Operation completed successfully.</Alert>
+        <Alert variant="warning" title="Warning" closable>Check this carefully before proceeding.</Alert>
+        <Alert variant="error"   title="Error">Something went wrong. Please try again.</Alert>
+      </div>
+    </section>
+
+    <!-- ── LOADING STATES ── -->
+    <section>
+      <h2 class="section-label">Loading States — Spinner</h2>
+      <div class="row">
+        <Spinner size="xs"/>
+        <Spinner size="sm"/>
+        <Spinner size="md"/>
+        <Spinner size="lg"/>
+        <div class="bg-primary-600 p-2 rounded"><Spinner color="white" size="md"/></div>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-label">Loading States — Skeleton</h2>
+      <div class="row" style="align-items:start">
+        <div style="width:200px"><Skeleton variant="line" lines={3}/></div>
+        <div class="flex gap-2">
+          <Skeleton variant="circle" width="40px" height="40px"/>
+          <Skeleton variant="circle" width="56px" height="56px"/>
+        </div>
+        <Skeleton variant="rect" width="160px" height="80px"/>
+      </div>
+    </section>
+
+    <!-- ── TOOLTIP ── -->
+    <section>
+      <h2 class="section-label">Tooltip</h2>
+      <div class="row">
+        <Tooltip content="Appears on top" side="top"><Button variant="default">Top</Button></Tooltip>
+        <Tooltip content="Appears on bottom" side="bottom"><Button variant="default">Bottom</Button></Tooltip>
+        <Tooltip content="Appears on the right" side="right"><Button variant="default">Right</Button></Tooltip>
+        <Tooltip content="No delay" delay={0}><Button variant="default">Instant</Button></Tooltip>
+        <Tooltip content="Aligned start" side="bottom" align="start" sideOffset={4}><Button variant="default">align=start</Button></Tooltip>
+        <Tooltip content="16px offset" side="top" sideOffset={16}><Button variant="default">far offset</Button></Tooltip>
+      </div>
+    </section>
+
+    <!-- ── TOAST ── -->
+    <section>
+      <h2 class="section-label">Toast / Notifications</h2>
+      <div class="row">
+        <Button variant="primary" onclick={() => toast.success('Saved!', { description: 'Changes applied.' })}>Success</Button>
+        <Button variant="default" onclick={() => toast.error('Failed', { description: 'Please try again.' })}>Error</Button>
+        <Button variant="default" onclick={() => toast.info('New update available')}>Info</Button>
+        <Button variant="default" onclick={() => toast.warning('Storage almost full')}>Warning</Button>
+        <Button variant="default" onclick={() => toast.success('File ready', { action: { label: 'View', onclick: () => {} } })}>With action</Button>
+      </div>
+    </section>
+
+    <!-- ── OVERLAY — DIALOG ── -->
+    <section>
+      <h2 class="section-label">Dialog</h2>
+      <div class="row">
+        <Button variant="default" onclick={() => dialogOpen = true}>Open Dialog</Button>
+      </div>
+      <Dialog bind:open={dialogOpen} size="sm">
+        {#snippet header()}Dialog Title{/snippet}
+        <p class="text-sm text-text-secondary">This is the dialog body. Confirm or cancel the action.</p>
+        {#snippet footer()}
+          <Button variant="default" onclick={() => dialogOpen = false}>Cancel</Button>
+          <Button variant="primary" onclick={() => dialogOpen = false}>Confirm</Button>
+        {/snippet}
+      </Dialog>
+    </section>
+
+    <!-- ── OVERLAY — DRAWER ── -->
+    <section>
+      <h2 class="section-label">Drawer</h2>
+      <div class="row">
+        <Button variant="default" onclick={() => drawerOpen = true}>Open Drawer</Button>
+      </div>
+      <Drawer bind:open={drawerOpen} side="right" size="md">
+        {#snippet header()}<span class="font-semibold">Right Drawer</span>{/snippet}
+        <p class="text-sm text-text-secondary">Drawer body content. Slides in from the edge.</p>
+        {#snippet footer()}
+          <div class="flex gap-2 justify-end">
+            <Button variant="default" onclick={() => drawerOpen = false}>Cancel</Button>
+            <Button variant="primary" onclick={() => drawerOpen = false}>Save</Button>
+          </div>
+        {/snippet}
+      </Drawer>
+    </section>
+
+    <!-- ── OVERLAY — DROPDOWN & POPOVER ── -->
+    <section>
+      <h2 class="section-label">DropdownMenu & Popover</h2>
+      <div class="row">
+        <DropdownMenu>
+          {#snippet trigger()}
+            <Button variant="default">Dropdown ▾</Button>
+          {/snippet}
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuItem>Duplicate</DropdownMenuItem>
+          <DropdownMenuSeparator/>
+          <DropdownMenuItem danger>Delete</DropdownMenuItem>
+        </DropdownMenu>
+
+        <Popover>
+          {#snippet trigger()}
+            <Button variant="default">Popover ▾</Button>
+          {/snippet}
+          <div class="p-3 text-sm max-w-[200px]">
+            <p class="font-medium mb-1">Quick info</p>
+            <p class="text-text-secondary text-xs">Floating panel powered by bits-ui Popover.</p>
+          </div>
+        </Popover>
+      </div>
+    </section>
+
+    <!-- ── NAVIGATION — TABS ── -->
+    <section>
+      <h2 class="section-label">Navigation — Tabs</h2>
+      <Tabs bind:value={tabValue} style="max-width:480px">
+        <TabsList>
+          <TabsItem value="t1">Overview</TabsItem>
+          <TabsItem value="t2">Details</TabsItem>
+          <TabsItem value="t3">Settings</TabsItem>
+        </TabsList>
+        <TabsContent value="t1"><p class="p-3 text-sm text-text-secondary">Overview content goes here.</p></TabsContent>
+        <TabsContent value="t2"><p class="p-3 text-sm text-text-secondary">Details panel content.</p></TabsContent>
+        <TabsContent value="t3"><p class="p-3 text-sm text-text-secondary">Settings form content.</p></TabsContent>
+      </Tabs>
+
+      <Tabs bind:value={tabValue} variant="ios" style="max-width:480px">
+        <TabsList>
+          <TabsItem value="t1">Overview</TabsItem>
+          <TabsItem value="t2">Details</TabsItem>
+          <TabsItem value="t3">Settings</TabsItem>
+        </TabsList>
+        <TabsContent value="t1"><p class="p-3 text-sm text-text-secondary">Overview content goes here.</p></TabsContent>
+        <TabsContent value="t2"><p class="p-3 text-sm text-text-secondary">Details panel content.</p></TabsContent>
+        <TabsContent value="t3"><p class="p-3 text-sm text-text-secondary">Settings form content.</p></TabsContent>
+      </Tabs>
+
+      <!-- Vertical tabs (line variant + orientation) -->
+      <div style="height:180px; max-width:480px; margin-top:1rem">
+        <Tabs variant="line" orientation="vertical" class="h-full">
+          <TabsList class="w-28">
+            <TabsItem value="s1">Profile</TabsItem>
+            <TabsItem value="s2">Account</TabsItem>
+            <TabsItem value="s3">Security</TabsItem>
+          </TabsList>
+          <TabsContent value="s1"><p class="p-3 text-sm text-text-secondary">Profile settings content.</p></TabsContent>
+          <TabsContent value="s2"><p class="p-3 text-sm text-text-secondary">Account settings content.</p></TabsContent>
+          <TabsContent value="s3"><p class="p-3 text-sm text-text-secondary">Security settings content.</p></TabsContent>
+        </Tabs>
+      </div>
+    </section>
+
+    <!-- ── NAVIGATION — ACCORDION ── -->
+    <section>
+      <h2 class="section-label">Navigation — Accordion</h2>
+      <Accordion type="single" value="a1" style="max-width:480px">
+        <AccordionItem value="a1">
+          <AccordionTrigger>What is TeraUI?</AccordionTrigger>
+          <AccordionContent>A Svelte 5 component library with multi-theme support and Tailwind CSS v4.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="a2">
+          <AccordionTrigger>How do themes work?</AccordionTrigger>
+          <AccordionContent>Themes are applied via <code>data-theme</code> on the root element. All tokens update automatically.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="a3">
+          <AccordionTrigger>Is dark mode supported?</AccordionTrigger>
+          <AccordionContent>Yes — add the <code>.dark</code> class to enable dark mode for any theme.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </section>
+
+    <!-- ── DATA — TABLE ── -->
+    <section>
+      <h2 class="section-label">Data — Table</h2>
+      <Table
+        columns={[
+          { key: 'name',   label: 'Name' },
+          { key: 'role',   label: 'Role' },
+          { key: 'status', label: 'Status' },
+        ]}
+        data={[
+          { name: 'Alice Martin', role: 'Designer',  status: 'Active' },
+          { name: 'Bob Johnson',  role: 'Developer', status: 'Inactive' },
+          { name: 'Carol Lee',    role: 'PM',        status: 'Active' },
+        ]}
+        striped
+        style="max-width:480px"
+      />
+    </section>
+
+    <!-- ── IDENTITY ── -->
+    <section>
+      <h2 class="section-label">Identity — Avatar, StarRating, BrandLogo</h2>
+      <div class="row">
+        <Avatar size="xs" fallback="AB"/>
+        <Avatar size="sm" fallback="CD"/>
+        <Avatar size="md" fallback="EF"/>
+        <Avatar size="lg" fallback="GH"/>
+        <Avatar size="xl" fallback="IJ"/>
+        <StarRating value={3} readonly/>
+        <StarRating value={4.5} readonly/>
+        <LightDarkToggle/>
+        <BrandLogo/>
+      </div>
+    </section>
+
+    <!-- ── AI COMPONENTS ── -->
+    <section>
+      <h2 class="section-label">AI — Chat</h2>
+      <div class="col" style="max-width:420px">
+        <ChatBubble role="user"      content="How do I install TeraUI?"/>
+        <ChatBubble role="assistant" content="Run npm install tera-system-ui and import what you need."/>
+        <ThinkingLoader variant="wave" label="Thinking..."/>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-label">AI — StreamText</h2>
+      <div class="flex flex-col gap-3 max-w-md">
+        <button class="text-xs text-interactive underline text-left w-fit" onclick={() => streamKey++}>↻ Replay</button>
+        {#key streamKey}
+          <StreamText text="TeraUI is a modern Svelte 5 component library with Professional, AI, and Marketing themes." speed="normal"/>
+        {/key}
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-label">AI — PromptInput & SuggestionChips</h2>
+      <div class="max-w-md flex flex-col gap-4">
+        <SuggestionChips suggestions={['Explain themes', 'Show Button variants', 'Dark mode setup', 'API docs']}/>
+        <PromptInput
+          bind:value={promptValue}
+          placeholder="Ask me anything…"
+          onsubmit={(v) => { toast.success(`Sent: ${v}`); promptValue = ''; }}
+        />
+      </div>
+    </section>
+
+    <!-- ── MARKETING COMPONENTS ── -->
+    <section>
+      <h2 class="section-label">Marketing — Stats</h2>
+      <div class="row" style="align-items:start">
+        <StatBlock value="2.4M"  label="Monthly active users" trend="+18%" trendDirection="up"/>
+        <StatBlock value="99.9%" label="Uptime SLA"            trend="-0.01%" trendDirection="down"/>
+        <StatBlock value="$2.1M" label="ARR"                   trend="+34%" trendDirection="up"/>
+        <StatBlock value="4.8★"  label="Avg rating"/>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-label">Marketing — Feature Cards</h2>
+      <div class="row" style="align-items:stretch">
+        <FeatureCard title="Lightning fast"  description="Svelte 5 with zero overhead." variant="default"  style="width:190px"/>
+        <FeatureCard title="Multi-theme"     description="Three themes, one API."       variant="bordered" style="width:190px"/>
+        <FeatureCard title="Accessible"      description="WCAG 2.1 AA compliant."       variant="elevated" style="width:190px"/>
+        <FeatureCard title="Gradient border" description="Premium section treatment."   variant="gradient-border" style="width:190px"/>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-label">Marketing — Pricing</h2>
+      <div class="row" style="align-items:end">
+        <PricingCard
+          plan="Starter" price="Free" period="forever"
+          description="Great for side projects."
+          features={['5 projects', 'Community support']}
+          cta="Get started"
+          style="width:210px"
+        />
+        <PricingCard
+          plan="Pro" price="$29" period="month"
+          description="For growing teams."
+          features={['Unlimited projects', 'Priority support', 'Custom themes']}
+          cta="Start trial"
+          popular variant="featured"
+          style="width:210px"
+        />
+        <PricingCard
+          plan="Enterprise" price="$99" period="month"
+          description="Advanced needs."
+          features={['Everything', 'SSO', 'SLA']}
+          cta="Contact sales"
+          style="width:210px"
+        />
+      </div>
+    </section>
+
+    <section>
+      <h2 class="section-label">Marketing — Testimonials</h2>
+      <div class="row" style="align-items:stretch">
+        <TestimonialCard
+          quote="TeraUI cut our design-to-code time in half. The multi-theme system is brilliant."
+          name="Sarah Chen" role="Lead Designer" company="Acme Corp"
+          rating={5} style="width:280px"
+        />
+        <TestimonialCard
+          quote="Finally a Svelte library that doesn't look like a generic admin dashboard."
+          name="Marcus Lee" role="Frontend Engineer" company="StartupXYZ"
+          rating={5} style="width:280px"
+        />
+      </div>
+    </section>
+
+  </div>
+</Story>
+
+<style>
+  .overview-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+    padding: 2rem;
+    max-width: 960px;
+  }
+
+  .section-label {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: .08em;
+    color: var(--color-text-tertiary);
+    margin: 0 0 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--color-border-default);
+  }
+
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .col {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  section { display: flex; flex-direction: column; }
+</style>

package/dist/stories/ComponentOverview.stories.svelte.d.ts

@@ -0,0 +1,6 @@
+export default ComponentOverview;
+type ComponentOverview = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Record<string, never>>): void;
+};
+declare const ComponentOverview: import("svelte").Component<Record<string, never>, {}, "">;