@prsm/mono-components 0.1.0

package/src/style.css

@@ -0,0 +1,96 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg-0: #fcfcfe;
+  --bg-1: #f3f4f7;
+  --bg-2: #e8eaee;
+  --bg-3: #dbdde3;
+  --bg-4: #ccd0d8;
+  --bg-5: #b8bdc7;
+  --bg-6: #a0a6b2;
+
+  --fg-0: #1a1a1a;
+  --fg-1: #4a4a4a;
+  --fg-2: #7a7a7a;
+  --fg-3: #787878;
+
+  --border: #c8c8c8;
+  --border-subtle: #d8d8d8;
+
+  --accent: #f06f00;
+  --accent-hover: #d96300;
+  --accent-subtle: #fef4ec;
+
+  --success: #4a9;
+  --warning: #f06f00;
+  --error: #c44;
+  --info: #6a9;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-0: #111214;
+    --bg-1: #191a1e;
+    --bg-2: #24262b;
+    --bg-3: #31343a;
+    --bg-4: #3f434b;
+    --bg-5: #4f545e;
+    --bg-6: #616872;
+
+    --fg-0: #e5e5e5;
+    --fg-1: #b0b0b0;
+    --fg-2: #808080;
+    --fg-3: #888888;
+
+    --border: #3a3a3a;
+    --border-subtle: #2e2e2e;
+
+    --accent: #b65400;
+    --accent-hover: #cf6510;
+    --accent-subtle: #2a1c10;
+  }
+}
+
+.dark {
+  --bg-0: #111214;
+  --bg-1: #191a1e;
+  --bg-2: #24262b;
+  --bg-3: #31343a;
+  --bg-4: #3f434b;
+  --bg-5: #4f545e;
+  --bg-6: #616872;
+
+  --fg-0: #e5e5e5;
+  --fg-1: #b0b0b0;
+  --fg-2: #808080;
+  --fg-3: #888888;
+
+  --border: #3a3a3a;
+  --border-subtle: #2e2e2e;
+
+  --accent: #b65400;
+  --accent-hover: #cf6510;
+  --accent-subtle: #2a1c10;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg-0);
+  color: var(--fg-0);
+}
+
+body {
+  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
+  font-size: 12px;
+  background: var(--bg-0);
+  color: var(--fg-0);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

package/stories/Badge.story.vue

@@ -0,0 +1,24 @@
+<script setup>
+import Badge from "../src/components/Badge.vue"
+</script>
+
+<template>
+  <Story title="Badge">
+    <Variant title="All Variants">
+      <div class="flex gap-2 items-center">
+        <Badge variant="success">Success</Badge>
+        <Badge variant="warning">Warning</Badge>
+        <Badge variant="error">Error</Badge>
+        <Badge variant="info">Info</Badge>
+        <Badge variant="neutral">Neutral</Badge>
+      </div>
+    </Variant>
+    <Variant title="With Content">
+      <div class="flex gap-2 items-center">
+        <Badge variant="success">3 passed</Badge>
+        <Badge variant="error">1 failed</Badge>
+        <Badge variant="info">v2.1.0</Badge>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/Button.story.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { Icon } from "@iconify/vue"
+import Button from "../src/components/Button.vue"
+</script>
+
+<template>
+  <Story title="Button">
+    <Variant title="Default">
+      <Button>Default</Button>
+    </Variant>
+    <Variant title="Primary">
+      <Button variant="primary">Primary</Button>
+    </Variant>
+    <Variant title="Outline">
+      <Button variant="outline">Outline</Button>
+    </Variant>
+    <Variant title="Ghost">
+      <Button variant="ghost">Ghost</Button>
+    </Variant>
+    <Variant title="Danger">
+      <Button variant="danger">Danger</Button>
+    </Variant>
+    <Variant title="Icon">
+      <Button variant="icon">
+        <Icon icon="material-symbols:settings" class="text-base" />
+      </Button>
+    </Variant>
+    <Variant title="Small">
+      <div class="flex gap-2">
+        <Button size="small">Small Default</Button>
+        <Button size="small" variant="primary">Small Primary</Button>
+        <Button size="small" variant="outline">Small Outline</Button>
+      </div>
+    </Variant>
+    <Variant title="All Variants">
+      <div class="flex gap-2 items-center">
+        <Button>Default</Button>
+        <Button variant="primary">Primary</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="danger">Danger</Button>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/Checkbox.story.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { ref } from "vue"
+import Checkbox from "../src/components/Checkbox.vue"
+
+const checked = ref(false)
+const indeterminate = ref(false)
+</script>
+
+<template>
+  <Story title="Checkbox">
+    <Variant title="With Label">
+      <Checkbox v-model="checked" label="Enable notifications" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">checked: {{ checked }}</div>
+      </template>
+    </Variant>
+    <Variant title="Without Label">
+      <Checkbox v-model="checked" />
+    </Variant>
+    <Variant title="Indeterminate">
+      <Checkbox v-model="indeterminate" :indeterminate="true" label="Select all" />
+    </Variant>
+    <Variant title="Multiple">
+      <div class="flex flex-col gap-1">
+        <Checkbox v-model="checked" label="Option A" />
+        <Checkbox v-model="indeterminate" label="Option B" />
+        <Checkbox :model-value="true" label="Option C (always on)" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/CheckboxCards.story.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from "vue"
+import { logEvent } from "histoire/client"
+import CheckboxCards from "../src/components/CheckboxCards.vue"
+
+const tools = ref(["vector_search", "web_search"])
+const toolOptions = [
+  { value: "vector_search", label: "Vector Search", description: "Semantic similarity search across document embeddings" },
+  { value: "sql_query", label: "SQL Query", description: "Run queries against structured datasets" },
+  { value: "web_search", label: "Web Search", description: "Search the web for real-time information" },
+  { value: "fetch_url", label: "Fetch URL", description: "Retrieve and read web page content" }
+]
+
+const features = ref(["dark_mode"])
+const featureOptions = [
+  { value: "dark_mode", label: "Dark Mode" },
+  { value: "notifications", label: "Notifications" },
+  { value: "analytics", label: "Analytics" },
+  { value: "export", label: "Export" }
+]
+
+function handleUpdate(name, value) {
+  logEvent("update:modelValue", { name, value })
+}
+</script>
+
+<template>
+  <Story title="CheckboxCards">
+    <Variant title="Tools">
+      <div class="w-[320px]">
+        <CheckboxCards
+          v-model="tools"
+          :options="toolOptions"
+          @update:model-value="v => handleUpdate('tools', v)"
+        />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ tools.join(", ") }}</div>
+      </template>
+    </Variant>
+    <Variant title="No Descriptions">
+      <div class="w-[240px]">
+        <CheckboxCards
+          v-model="features"
+          :options="featureOptions"
+          @update:model-value="v => handleUpdate('features', v)"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/CodeEditor.story.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { ref } from "vue"
+import CodeEditor from "../src/components/CodeEditor.vue"
+
+const basic = ref("")
+const prefilled = ref("SELECT c.name, c.email, COUNT(o.id) AS order_count\nFROM customers c\nJOIN orders o ON o.customer_id = c.id\nWHERE c.active = true\nGROUP BY c.name, c.email\nORDER BY order_count DESC\nLIMIT 50")
+const withSchema = ref("SELECT ")
+const readonly = ref("SELECT * FROM users WHERE role = 'admin'")
+
+const schema = {
+  customers: ["id", "name", "email", "industry", "active", "created_at"],
+  orders: ["id", "customer_id", "total", "status", "placed_at"],
+  products: ["id", "sku", "name", "price", "category"],
+  order_items: ["id", "order_id", "product_id", "quantity", "unit_price"],
+}
+</script>
+
+<template>
+  <Story title="CodeEditor">
+    <Variant title="Empty">
+      <CodeEditor v-model="basic" placeholder="SELECT * FROM ..." />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">{{ basic.length }} chars</div>
+      </template>
+    </Variant>
+
+    <Variant title="Prefilled SQL">
+      <CodeEditor v-model="prefilled" />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2 font-mono whitespace-pre">{{ prefilled }}</div>
+      </template>
+    </Variant>
+
+    <Variant title="With Schema Autocomplete">
+      <div class="flex flex-col gap-2">
+        <div class="text-xs text-fg-2">
+          tables: {{ Object.keys(schema).join(", ") }} - type a table name to trigger autocomplete
+        </div>
+        <CodeEditor v-model="withSchema" :schema="schema" placeholder="try typing a table name..." />
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">{{ withSchema.length }} chars</div>
+      </template>
+    </Variant>
+
+    <Variant title="Readonly">
+      <CodeEditor v-model="readonly" :readonly="true" />
+    </Variant>
+
+    <Variant title="Multiple Editors">
+      <div class="flex flex-col gap-3">
+        <div>
+          <div class="text-[10px] text-fg-2 uppercase tracking-wide mb-1">source query</div>
+          <CodeEditor
+            v-model="basic"
+            :schema="schema"
+            placeholder="SELECT id, name FROM customers WHERE active = true"
+          />
+        </div>
+        <div>
+          <div class="text-[10px] text-fg-2 uppercase tracking-wide mb-1">retrieval query</div>
+          <CodeEditor
+            v-model="withSchema"
+            :schema="schema"
+            placeholder="SELECT * FROM orders WHERE customer_id = '{{row.id}}'"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/Collapsible.story.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { ref } from "vue"
+import Collapsible from "../src/components/Collapsible.vue"
+import CollapsibleGroup from "../src/components/CollapsibleGroup.vue"
+
+const controlled = ref(true)
+</script>
+
+<template>
+  <Story title="Collapsible">
+    <Variant title="Standalone">
+      <div class="max-w-sm">
+        <Collapsible title="Details">
+          <p class="text-base text-fg-1">
+            This content can be expanded or collapsed.
+            Useful for progressive disclosure of information.
+          </p>
+        </Collapsible>
+      </div>
+    </Variant>
+    <Variant title="Controlled">
+      <div class="max-w-sm">
+        <Collapsible v-model:open="controlled" title="Controlled section">
+          <p class="text-base text-fg-1">
+            This section is controlled via v-model:open.
+          </p>
+        </Collapsible>
+      </div>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">open: {{ controlled }}</div>
+      </template>
+    </Variant>
+    <Variant title="Accordion (exclusive)">
+      <div class="max-w-sm">
+        <CollapsibleGroup exclusive>
+          <Collapsible title="General">
+            <p class="text-base text-fg-1">General settings and preferences for your account.</p>
+          </Collapsible>
+          <Collapsible title="Appearance">
+            <p class="text-base text-fg-1">Theme, font size, and display options.</p>
+          </Collapsible>
+          <Collapsible title="Keyboard shortcuts">
+            <p class="text-base text-fg-1">Customize keybindings and shortcut mappings.</p>
+          </Collapsible>
+          <Collapsible title="Advanced">
+            <p class="text-base text-fg-1">Experimental features and developer options.</p>
+          </Collapsible>
+        </CollapsibleGroup>
+      </div>
+    </Variant>
+    <Variant title="Non-exclusive group">
+      <div class="max-w-sm">
+        <CollapsibleGroup>
+          <Collapsible title="Section A">
+            <p class="text-base text-fg-1">Multiple sections can be open simultaneously.</p>
+          </Collapsible>
+          <Collapsible title="Section B">
+            <p class="text-base text-fg-1">This one too.</p>
+          </Collapsible>
+          <Collapsible title="Section C">
+            <p class="text-base text-fg-1">And this one.</p>
+          </Collapsible>
+        </CollapsibleGroup>
+      </div>
+    </Variant>
+    <Variant title="Custom trigger">
+      <div class="max-w-sm">
+        <Collapsible>
+          <template #trigger>
+            <span class="flex items-center gap-1">
+              <span class="text-accent">3 items</span>
+              <span class="text-fg-2">in this group</span>
+            </span>
+          </template>
+          <ul class="text-base text-fg-1 flex flex-col gap-1 list-none p-0 m-0">
+            <li>Item one</li>
+            <li>Item two</li>
+            <li>Item three</li>
+          </ul>
+        </Collapsible>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/stories/Combobox.story.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { ref } from "vue"
+import Combobox from "../src/components/Combobox.vue"
+
+const selected = ref(null)
+const country = ref(null)
+
+const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry", "Fig", "Grape", "Honeydew", "Kiwi", "Lemon", "Mango", "Nectarine", "Orange", "Papaya", "Quince", "Raspberry", "Strawberry"]
+
+const countries = [
+  { value: "us", label: "United States" },
+  { value: "gb", label: "United Kingdom" },
+  { value: "de", label: "Germany" },
+  { value: "fr", label: "France" },
+  { value: "jp", label: "Japan" },
+  { value: "kr", label: "South Korea" },
+  { value: "au", label: "Australia" },
+  { value: "ca", label: "Canada" },
+  { value: "br", label: "Brazil" },
+  { value: "mx", label: "Mexico" },
+  { value: "in", label: "India" },
+  { value: "cn", label: "China" },
+  { value: "it", label: "Italy" },
+  { value: "es", label: "Spain" },
+  { value: "nl", label: "Netherlands" }
+]
+</script>
+
+<template>
+  <Story title="Combobox">
+    <Variant title="String Options">
+      <Combobox v-model="selected" :options="fruits" placeholder="pick a fruit..." />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ selected ?? 'null' }}</div>
+      </template>
+    </Variant>
+    <Variant title="Object Options">
+      <Combobox v-model="country" :options="countries" placeholder="select country..." />
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">selected: {{ country ?? 'null' }}</div>
+      </template>
+    </Variant>
+  </Story>
+</template>

package/stories/ContextMenu.story.vue

@@ -0,0 +1,59 @@
+<script setup>
+import { ref } from "vue"
+import ContextMenu from "../src/components/ContextMenu.vue"
+
+const clipboard = ref("")
+
+const basicItems = [
+  { label: "Cut", icon: "material-symbols:content-cut", kbd: "Cmd+X", action: () => clipboard.value = "cut" },
+  { label: "Copy", icon: "material-symbols:content-copy", kbd: "Cmd+C", action: () => clipboard.value = "copy" },
+  { label: "Paste", icon: "material-symbols:content-paste", kbd: "Cmd+V", action: () => clipboard.value = "paste" },
+  { type: "separator" },
+  { label: "Delete", icon: "material-symbols:delete-outline", action: () => clipboard.value = "delete" },
+  { label: "Disabled item", icon: "material-symbols:block", disabled: true }
+]
+
+const viewMode = ref("grid")
+
+const richItems = [
+  { type: "header", label: "View" },
+  { label: "Grid", checked: true, action: () => viewMode.value = "grid" },
+  { label: "List", action: () => viewMode.value = "list" },
+  { type: "separator" },
+  { type: "header", label: "Actions" },
+  { label: "New file", icon: "material-symbols:add", kbd: "Cmd+N" },
+  { label: "Open...", icon: "material-symbols:folder-open-outline", kbd: "Cmd+O" },
+  { type: "separator" },
+  { label: "Share", icon: "material-symbols:share", children: [
+    { label: "Copy link", icon: "material-symbols:link", kbd: "Cmd+L" },
+    { label: "Email", icon: "material-symbols:mail-outline" },
+    { label: "Export", icon: "material-symbols:download", children: [
+      { label: "as PNG" },
+      { label: "as SVG" },
+      { label: "as PDF" }
+    ]}
+  ]}
+]
+</script>
+
+<template>
+  <Story title="ContextMenu">
+    <Variant title="Basic">
+      <ContextMenu :items="basicItems">
+        <div class="p-8 bg-2 border border-line rounded-sm text-fg-1 text-base cursor-default select-none">
+          right-click here
+        </div>
+      </ContextMenu>
+      <template #controls>
+        <div class="text-xs text-fg-2 p-2">last action: {{ clipboard || 'none' }}</div>
+      </template>
+    </Variant>
+    <Variant title="Headers, Checked, Submenus">
+      <ContextMenu :items="richItems">
+        <div class="p-8 bg-2 border border-line rounded-sm text-fg-1 text-base cursor-default select-none">
+          right-click for rich menu
+        </div>
+      </ContextMenu>
+    </Variant>
+  </Story>
+</template>