@runwisp/ui 0.4.0

package/src/stories/Textarea.stories.svelte

@@ -0,0 +1,45 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Textarea from "$lib/components/Textarea.svelte";
+
+    const { Story } = defineMeta({
+        title: "Forms/Textarea",
+        component: Textarea,
+        tags: ["autodocs"],
+    });
+</script>
+
+<Story name="Default" args={{ placeholder: "Enter description..." }} />
+
+<Story
+    name="With Label"
+    args={{ label: "Task Description", placeholder: "Describe what this task does...", rows: 4 }}
+/>
+
+<Story
+    name="With Hint"
+    args={{
+        label: "Script Content",
+        placeholder: "Enter your script here...",
+        hint: "Enter the shell script to execute.",
+        rows: 6,
+    }}
+/>
+
+<Story
+    name="With Error"
+    args={{ label: "Configuration", error: "Invalid syntax on line 1", rows: 4 }}
+/>
+
+<Story
+    name="Disabled"
+    args={{
+        label: "Read-only logs",
+        value: "Task completed successfully",
+        disabled: true,
+        rows: 4,
+    }}
+/>

package/src/stories/Toggle.stories.svelte

@@ -0,0 +1,74 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Toggle from "$lib/components/Toggle.svelte";
+
+    const { Story } = defineMeta({
+        title: "Forms/Toggle",
+        component: Toggle,
+        tags: ["autodocs"],
+        argTypes: {
+            size: {
+                control: "select",
+                options: ["sm", "md", "lg"],
+            },
+        },
+    });
+</script>
+
+<Story name="Default" />
+
+<Story name="With Label" args={{ label: "Enable scheduling" }} />
+
+<Story
+    name="With Description"
+    args={{
+        label: "Auto-scaling",
+        description: "Automatically scale workers based on queue depth",
+    }}
+/>
+
+<Story name="Checked" args={{ label: "Active", checked: true }} />
+
+<Story name="Sizes" asChild>
+    <div class="space-y-4">
+        <Toggle size="sm" label="Small toggle" />
+        <Toggle size="md" label="Medium toggle (default)" />
+        <Toggle size="lg" label="Large toggle" />
+    </div>
+</Story>
+
+<Story name="Disabled" asChild>
+    <div class="space-y-4">
+        <Toggle label="Disabled off" disabled />
+        <Toggle label="Disabled on" checked disabled />
+    </div>
+</Story>
+
+<Story name="Settings Panel" asChild>
+    <div class="max-w-md space-y-4 rounded-xl border border-mist-200 bg-white p-4">
+        <h3 class="font-semibold text-mist-900">Task Settings</h3>
+        <div class="space-y-4">
+            <Toggle
+                label="Enable task"
+                description="When disabled, the task will not run on schedule"
+                checked
+            />
+            <Toggle
+                label="Auto-retry"
+                description="Automatically retry failed executions up to 3 times"
+                checked
+            />
+            <Toggle
+                label="Concurrent execution"
+                description="Allow multiple instances to run simultaneously"
+            />
+            <Toggle
+                label="Debug logging"
+                description="Enable verbose logging for troubleshooting"
+            />
+        </div>
+    </div>
+</Story>

package/src/stories/Tooltip.stories.svelte

@@ -0,0 +1,77 @@
+<!-- SPDX-FileCopyrightText: PoppyCake, s.r.o. -->
+<!-- SPDX-License-Identifier: Apache-2.0 -->
+
+<script module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import Tooltip from "$lib/components/Tooltip.svelte";
+    import Button from "$lib/components/Button.svelte";
+    import { Info, CircleQuestionMark, Settings } from "@lucide/svelte";
+
+    const { Story } = defineMeta({
+        title: "Core/Tooltip",
+        component: Tooltip,
+        tags: ["autodocs"],
+        argTypes: {
+            position: {
+                control: "select",
+                options: ["top", "bottom", "left", "right"],
+            },
+        },
+    });
+</script>
+
+<Story name="Top (Default)" asChild>
+    <div class="flex justify-center py-8">
+        <Tooltip content="This is a tooltip">
+            <Button variant="secondary">Hover me</Button>
+        </Tooltip>
+    </div>
+</Story>
+
+<Story name="Positions" asChild>
+    <div class="flex items-center justify-center gap-8 py-12">
+        <Tooltip content="Top tooltip" position="top">
+            <Button variant="secondary">Top</Button>
+        </Tooltip>
+        <Tooltip content="Bottom tooltip" position="bottom">
+            <Button variant="secondary">Bottom</Button>
+        </Tooltip>
+        <Tooltip content="Left tooltip" position="left">
+            <Button variant="secondary">Left</Button>
+        </Tooltip>
+        <Tooltip content="Right tooltip" position="right">
+            <Button variant="secondary">Right</Button>
+        </Tooltip>
+    </div>
+</Story>
+
+<Story name="On Icons" asChild>
+    <div class="flex items-center justify-center gap-6 py-8">
+        <Tooltip content="More information">
+            <button class="rounded-lg p-2 text-mist-500 hover:bg-mist-100">
+                <Info size={20} />
+            </button>
+        </Tooltip>
+        <Tooltip content="Get help">
+            <button class="rounded-lg p-2 text-mist-500 hover:bg-mist-100">
+                <CircleQuestionMark size={20} />
+            </button>
+        </Tooltip>
+        <Tooltip content="Settings">
+            <button class="rounded-lg p-2 text-mist-500 hover:bg-mist-100">
+                <Settings size={20} />
+            </button>
+        </Tooltip>
+    </div>
+</Story>
+
+<Story name="Usage Example" asChild>
+    <div class="flex items-center gap-2 py-8">
+        <span class="text-sm text-mist-700">Cron Expression</span>
+        <Tooltip content="Use standard cron syntax: minute hour day month weekday">
+            <button class="text-mist-400 hover:text-mist-600">
+                <CircleQuestionMark size={16} />
+            </button>
+        </Tooltip>
+    </div>
+</Story>

package/src/stories/Welcome.mdx

@@ -0,0 +1,241 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+import Logo from "../../static/runwisp_c.svg";
+
+<Meta title="Welcome" />
+
+<style>
+    {`
+    .rw-container {
+      font-family: 'TASA Orbiter', system-ui, -apple-system, sans-serif;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    
+    .rw-hero {
+      text-align: center;
+      padding: 3rem 0;
+      margin-bottom: 2rem;
+      background: linear-gradient(135deg, oklch(0.97 0.02 280), oklch(0.94 0.04 280));
+      border-radius: 1rem;
+    }
+    
+    .rw-logo {
+      width: 128px;
+      height: 128px;
+      margin: 0 auto 1.5rem;
+      border-radius: 1rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .rw-title {
+      font-size: 2.5rem;
+      font-weight: 700;
+      margin: 0 0 0.5rem;
+      background: linear-gradient(135deg, oklch(0.50 0.18 268), oklch(0.50 0.12 172));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .rw-subtitle {
+      font-size: 1.125rem;
+      color: oklch(0.55 0.012 280);
+      margin: 0;
+    }
+    
+    .rw-section {
+      margin-bottom: 2rem;
+    }
+    
+    .rw-section h2 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      color: oklch(0.18 0.012 280);
+      margin: 0 0 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid oklch(0.92 0.010 280);
+    }
+    
+    .rw-section p {
+      color: oklch(0.45 0.012 280);
+      line-height: 1.7;
+    }
+    
+    .rw-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+    
+    .rw-card {
+      padding: 1.25rem;
+      background: white;
+      border: 1px solid oklch(0.92 0.010 280);
+      border-radius: 0.75rem;
+    }
+    
+    .rw-card h3 {
+      font-size: 1rem;
+      font-weight: 600;
+      color: oklch(0.25 0.012 280);
+      margin: 0 0 0.5rem;
+    }
+    
+    .rw-card p {
+      font-size: 0.875rem;
+      color: oklch(0.55 0.012 280);
+      margin: 0;
+    }
+    
+    .rw-colors {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-top: 1rem;
+    }
+    
+    .rw-color {
+      width: 48px;
+      height: 48px;
+      border-radius: 0.5rem;
+      border: 1px solid oklch(0.92 0.010 280);
+    }
+    
+    .rw-footer {
+      margin-top: 3rem;
+      padding-top: 1.5rem;
+      border-top: 1px solid oklch(0.92 0.010 280);
+      text-align: center;
+      font-size: 0.875rem;
+      color: oklch(0.55 0.012 280);
+    }
+  `}
+</style>
+
+<div className="rw-container">
+  <div className="rw-hero">
+    <div className="rw-logo">
+      <img src={Logo} alt="RunWisp Logo" />
+    </div>
+    <h1 className="rw-title">RunWisp UI Components</h1>
+    <p className="rw-subtitle">Shared Svelte 5 components for dashboards, operators, and admin tooling</p>
+  </div>
+
+<div className="rw-section">
+    <h2>🌟 Overview</h2>
+    <p>
+        `@runwisp/ui` is the shared component package used by the RunWisp dashboard and related
+        interfaces. It bundles the common primitives, data-display components, and theme tokens that
+        keep the product visually consistent across apps.
+    </p>
+</div>
+
+  <div className="rw-section">
+    <h2>🎨 Color Palette</h2>
+    <p>Our color system features three main palettes:</p>
+    
+    <h3 style={{ marginTop: '1rem', marginBottom: '0.5rem', fontSize: '1rem', fontWeight: 600, color: 'oklch(0.25 0.012 280)' }}>Wisp (Primary)</h3>
+    <div className="rw-colors">
+      <div className="rw-color" style={{ background: 'oklch(0.97 0.02 280)' }} title="wisp-50" />
+      <div className="rw-color" style={{ background: 'oklch(0.88 0.08 280)' }} title="wisp-200" />
+      <div className="rw-color" style={{ background: 'oklch(0.68 0.16 275)' }} title="wisp-400" />
+      <div className="rw-color" style={{ background: 'oklch(0.58 0.18 270)' }} title="wisp-500" />
+      <div className="rw-color" style={{ background: 'oklch(0.50 0.18 268)' }} title="wisp-600" />
+      <div className="rw-color" style={{ background: 'oklch(0.35 0.12 268)' }} title="wisp-800" />
+    </div>
+
+    <h3 style={{ marginTop: '1rem', marginBottom: '0.5rem', fontSize: '1rem', fontWeight: 600, color: 'oklch(0.25 0.012 280)' }}>Aurora (Accent)</h3>
+    <div className="rw-colors">
+      <div className="rw-color" style={{ background: 'oklch(0.97 0.02 180)' }} title="aurora-50" />
+      <div className="rw-color" style={{ background: 'oklch(0.88 0.10 178)' }} title="aurora-200" />
+      <div className="rw-color" style={{ background: 'oklch(0.68 0.16 174)' }} title="aurora-400" />
+      <div className="rw-color" style={{ background: 'oklch(0.58 0.14 172)' }} title="aurora-500" />
+      <div className="rw-color" style={{ background: 'oklch(0.42 0.10 172)' }} title="aurora-700" />
+    </div>
+
+    <h3 style={{ marginTop: '1rem', marginBottom: '0.5rem', fontSize: '1rem', fontWeight: 600, color: 'oklch(0.25 0.012 280)' }}>Mist (Neutral)</h3>
+    <div className="rw-colors">
+      <div className="rw-color" style={{ background: 'oklch(0.98 0.005 280)' }} title="mist-50" />
+      <div className="rw-color" style={{ background: 'oklch(0.92 0.010 280)' }} title="mist-200" />
+      <div className="rw-color" style={{ background: 'oklch(0.70 0.012 280)' }} title="mist-400" />
+      <div className="rw-color" style={{ background: 'oklch(0.55 0.012 280)' }} title="mist-500" />
+      <div className="rw-color" style={{ background: 'oklch(0.35 0.012 280)' }} title="mist-700" />
+      <div className="rw-color" style={{ background: 'oklch(0.18 0.012 280)' }} title="mist-900" />
+    </div>
+
+  </div>
+
+<div className="rw-section">
+    <h2>📦 Components</h2>
+    <div className="rw-grid">
+        <div className="rw-card">
+            <h3>Core</h3>
+            <p>Button, Badge, Card, Alert, Modal, Tabs, Tooltip, Progress, Dropdown</p>
+        </div>
+        <div className="rw-card">
+            <h3>Forms</h3>
+            <p>Input, Select, Checkbox, Toggle, Textarea</p>
+        </div>
+        <div className="rw-card">
+            <h3>Layout</h3>
+            <p>PageContainer and shared layout primitives</p>
+        </div>
+        <div className="rw-card">
+            <h3>Data</h3>
+            <p>DataGrid, Avatar, StatusIndicator, StatCard, EmptyState</p>
+        </div>
+        <div className="rw-card">
+            <h3>Navigation</h3>
+            <p>Breadcrumb, Tabs</p>
+        </div>
+    </div>
+</div>
+
+<div className="rw-section">
+    <h2>🚀 Getting Started</h2>
+    <p>Import components from `@runwisp/ui` and include the shared theme stylesheet:</p>
+    <pre
+        style={{
+            background: "oklch(0.18 0.012 280)",
+            color: "oklch(0.92 0.010 280)",
+            padding: "1rem",
+            borderRadius: "0.5rem",
+            fontSize: "0.875rem",
+            marginTop: "1rem",
+            overflow: "auto",
+        }}
+    >
+        {`import { Button, Card, DataGrid } from "@runwisp/ui";
+import "@runwisp/ui/theme.css";`}
+    </pre>
+</div>
+
+<div className="rw-section">
+    <h2>✨ Design Principles</h2>
+    <div className="rw-grid">
+        <div className="rw-card">
+            <h3>Ethereal</h3>
+            <p>Soft gradients, subtle shadows, and delicate color transitions</p>
+        </div>
+        <div className="rw-card">
+            <h3>Professional</h3>
+            <p>Clean layouts, consistent spacing, readable typography</p>
+        </div>
+        <div className="rw-card">
+            <h3>Accessible</h3>
+            <p>WCAG compliant colors, keyboard navigation, screen reader support</p>
+        </div>
+        <div className="rw-card">
+            <h3>Modern</h3>
+            <p>Contemporary patterns that stay durable as the product evolves</p>
+        </div>
+    </div>
+</div>
+
+  <div className="rw-footer">
+    <p>© {new Date().getFullYear()} PoppyCake s.r.o. • RunWisp Design System</p>
+  </div>
+</div>

package/src/stories/assets/runwisp_c.svg

@@ -0,0 +1,16 @@
+<svg width="512" height="512" version="1.1" viewBox="0 0 5120 5120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient id="b">
+   <stop stop-color="#526ee3" offset="0"/>
+   <stop stop-color="#009371" offset="1"/>
+  </linearGradient>
+  <radialGradient id="a" cx="2375.3" cy="3240.7" r="1333.9" gradientTransform="matrix(1.01 -.012494 .026846 2.1701 -110.74 -3341.2)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
+ </defs>
+ <g id="c" fill="currentColor">
+  <g transform="matrix(1.1828 0 0 1.1828 -308.66 -422.68)" fill="url(#a)" stroke-width=".69118">
+   <path id="d" d="m1337.7 3078.1c-148.18-155.91-250.14-363.35-245.9-581.62-4.9405-143.31 33.544-285.11 105.17-408.87 53.884-96.655 144.6-165.07 216.94-247.17 183.01-186.28 363.71-375.11 552.07-555.94 29.831 190.66 135.62 362.63 276.82 491.77 29.939 18.759-21.226 37.649-30.616 56.472-195.88 199.8-397.96 393.69-588.19 598.91-152.46 182.9-237.05 424.04-218.75 662.75 5.6183 42.874 1.3956 73.556-30.679 24.283-12.387-13.436-24.662-26.974-36.862-40.58z"/>
+   <path id="e" d="m2283.9 4565.5c51.838-97.456 67.044-158.97 68.426-264.03 0-96.074-14.515-161.74-55.985-239.84-34.559-66.353-81.559-117.5-336.6-371.16-237.76-236.38-268.18-273.01-310.34-371.16-33.868-79.485-46.309-134.09-51.147-224.63-6.9117-134.09 20.735-260.57 84.324-386.37 108.51-213.57 334.53-427.84 532.9-504.56 138.24-53.221 255.74-54.603 351.81-4.8382l27.647 14.515-26.265 5.5294c-76.721 16.588-123.72 80.176-111.97 152.06 5.5294 33.176 40.088 79.485 72.574 96.074 69.809 37.324 169.34-8.9853 184.54-85.706 5.5294-26.265 13.132-16.588 25.574 33.176 12.441 45.618 13.824 123.72 4.1471 165.88-3.4559 15.206-4.8383 28.338-4.1471 29.721 1.3824 0.6912 17.279-13.824 35.941-33.176 116.12-120.96 142.38-281.31 70.5-428.53-18.662-39.397-55.294-79.485-305.5-331.76-246.75-249.51-288.22-293.75-315.87-342.13-100.22-172.79-121.65-355.26-63.588-539.12 46.309-145.84 134.09-274.4 273.71-398.81 58.75-51.838 163.12-129.94 174.18-129.94 2.0736 0-2.0735 8.9853-10.368 20.735-27.647 38.706-69.118 136.16-83.632 197.68-31.103 127.18-16.588 248.13 43.544 364.94 26.956 52.53 46.309 73.265 296.51 325.54 283.38 285.46 311.03 318.63 351.12 419.54 40.088 101.6 45.618 130.63 44.926 257.81 0 106.44-1.3824 124.41-18.662 186.62-24.191 89.162-87.779 217.72-147.91 297.21-94 125.79-230.85 245.37-347.66 304.12-95.382 47.691-163.12 66.353-259.19 70.5-76.721 3.4559-87.088 2.0735-137.54-14.515-64.971-22.118-98.147-43.544-151.37-99.529-66.353-69.809-92.618-145.84-85.706-248.82 2.0735-31.794 0.6911-56.676-2.0736-55.294-13.824 5.5294-71.191 80.868-93.309 123.72-59.441 113.35-56.676 246.06 7.603 358.03 11.059 17.971 135.47 149.99 293.06 308.26 150.68 152.06 283.38 290.29 295.13 307.57 86.397 127.87 129.25 300.66 112.66 449.96-10.368 92.618-29.721 157.59-72.574 244.68-66.353 134.78-161.74 243.29-314.49 357.34-40.088 29.721-74.647 53.912-77.412 53.912s11.75-31.794 32.485-71.191z"/>
+   <path id="f" d="m2881.7 3745.7c-31.13-173.6-122.18-331.84-246.22-455.86-14.352-19.305-55.137-38.918-18.602-57.632 207.7-210.04 420.06-415.65 622.16-631.1 146.07-182.43 225.82-418.38 206.48-652.47-4.5024-33.687-4.181-60.898 26.761-25.766 148.94 150.92 277.41 342.97 283.4 561.68 11.697 142.68-4.4537 290.19-73.137 417.9-34.008 81.467-90.87 148.51-154.3 208.53-213.07 217.42-425.06 436.12-643.78 647.84l-1.9007-3.7151z"/>
+  </g>
+ </g>
+</svg>

package/src/svelte-shims.d.ts

@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+declare module "*.svelte" {
+    import type { Component } from "svelte";
+    const component: Component;
+    export default component;
+}
+
+declare module "*.css?inline" {
+    const css: string;
+    export default css;
+}
+
+declare module "*.svg?raw" {
+    const svg: string;
+    export default svg;
+}