@lyeve-labs/ui-kit 0.34.0 → 0.35.1

package/README.md

@@ -28,7 +28,7 @@ No config file, no theme provider, no setup ceremony.
 
 ## What's in the box
 
-- **71 components:** buttons, inputs, modals, drawers, tabs, tables, toasts, the works.
+- **72 components:** buttons, inputs, modals, drawers, tabs, tables, toasts, the works.
 - **Two themes:** Soft Dark (default) and Soft Light, switched by a single `data-theme` attribute on `<html>`.
 - **One CSS file:** `@lyeve-labs/ui-kit/styles.css` declares every token. The rest is just Tailwind.
 - **Svelte 5 native:** built on runes and snippets, fully typed end-to-end.
@@ -37,13 +37,13 @@ No config file, no theme provider, no setup ceremony.
 ## Component list
 
 <details>
-<summary>71 components, organized by purpose</summary>
+<summary>72 components, organized by purpose</summary>
 
 **Layout and structure**
 Card, Panel, AppShell, AuthShell, PageShell, PageHeader, SectionHeading, Divider, Accordion, AccordionItem, Collapsible, Table, DescriptionList, Toolbar, TreeView
 
 **Forms and inputs**
-Button, ButtonGroup, Input, PasswordInput, CopyField, Textarea, NumberInput, SearchInput, FileInput, Label, Field, FormMessage, SegmentedControl, Select, MultiSelect, Autocomplete, DatePicker, TimePicker, DateTimePicker, Checkbox, CheckboxGroup, Radio, RadioGroup, Toggle
+Button, ButtonGroup, Input, PasswordInput, CopyField, Textarea, NumberInput, SearchInput, FileInput, Label, Field, FormMessage, SegmentedControl, FilterChips, Select, MultiSelect, Autocomplete, DatePicker, TimePicker, DateTimePicker, Checkbox, CheckboxGroup, Radio, RadioGroup, Toggle
 
 **Navigation**
 Breadcrumb, Tabs, Pagination, StepIndicator, Dropdown, SidebarNav, AccountMenu
@@ -253,7 +253,7 @@ This repo is a single-purpose component library. Nothing but `src/lib/`.
 ```
 src/
 └── lib/                 # → published as @lyeve-labs/ui-kit
-    ├── components/      # 71 .svelte files
+    ├── components/      # 72 .svelte files
     ├── stores/          # toast.svelte.ts
     ├── styles/          # theme.css (the one stylesheet)
     ├── utils/           # cn.ts, theme.ts

package/dist/components/Checkbox.svelte

@@ -93,7 +93,13 @@
     // is what stops a real click, and it is the only thing that does, so a
     // change arriving any other way (a synthetic event, a script driving the
     // node) would still move the bound value with nothing on screen to say so.
-    if (disabled) return;
+    // bind:checked has already taken the input's new state, so a disabled box
+    // puts the input and the value back.
+    if (disabled) {
+      e.currentTarget.checked = !e.currentTarget.checked;
+      checked = e.currentTarget.checked;
+      return;
+    }
     // The DOM clears indeterminate on the first click. Leaving the prop set
     // would repaint the mixed bar over a box the user has just ticked.
     indeterminate = false;
@@ -102,6 +108,10 @@
   }
 </script>
 
+<!-- bind:checked and not {checked}: a visitor can tick the box before the
+     page hydrates. A one-way prop is written over the input when the page
+     hydrates and clears that tick. The binding reads the input's live state
+     instead, the same way the browser kept it. -->
 {#snippet control()}
   <input
     type="checkbox"
@@ -110,7 +120,7 @@
     {value}
     {required}
     {disabled}
-    {checked}
+    bind:checked
     {indeterminate}
     aria-checked={indeterminate ? 'mixed' : undefined}
     aria-invalid={error ? 'true' : undefined}

package/dist/components/FilterChips.svelte

@@ -0,0 +1,86 @@
+<script lang="ts" module>
+  import type { Component } from 'svelte';
+
+  /** One chip. */
+  export interface FilterChip<T extends string = string> {
+    /** The chosen value, and the key the chip is rendered under. */
+    value: T;
+    /** What the reader sees. */
+    label: string;
+    /** How many rows this chip leaves on screen, drawn small beside the label. */
+    count?: number;
+    /** A lucide component before the label. */
+    icon?: Component<{ size?: number; class?: string }>;
+  }
+</script>
+
+<script lang="ts" generics="T extends string">
+  /**
+   * One filter out of many: a row of chips that wraps.
+   *
+   * A SegmentedControl holds two to four short options in one strip. A
+   * catalog filtered by a dozen categories does not fit one: the strip either
+   * scrolls, hiding categories past the edge, or squeezes each label onto two
+   * lines inside its segment. Chips wrap instead, so every category is in
+   * sight at every width. One is always pressed.
+   */
+  import { cn } from '../utils/cn.js';
+  import { HIT_AREA } from '../internal/touch.js';
+
+  interface Props {
+    /** The pressed chip's value. */
+    value: T;
+    options: FilterChip<T>[];
+    /** Names the group for assistive technology. The chips name themselves. */
+    label: string;
+    /** Read after the count, so "3" is heard as "3 on sale". */
+    countLabel?: string;
+    class?: string;
+    onchange?: (value: T) => void;
+  }
+
+  let {
+    value = $bindable(),
+    options,
+    label,
+    countLabel = '',
+    class: klass = '',
+    onchange = undefined,
+  }: Props = $props();
+
+  function pick(next: T): void {
+    if (next === value) return;
+    value = next;
+    onchange?.(next);
+  }
+</script>
+
+<div class={cn('flex flex-wrap gap-1.5', klass)} role="group" aria-label={label}>
+  {#each options as chip (chip.value)}
+    {@const pressed = chip.value === value}
+    <button
+      type="button"
+      aria-pressed={pressed}
+      class={cn(
+        HIT_AREA,
+        'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium whitespace-nowrap transition-colors',
+        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand',
+        pressed
+          ? 'border-brand bg-brand/10 text-fg'
+          : 'border-line text-muted hover:border-line-strong hover:text-fg',
+      )}
+      onclick={() => pick(chip.value)}
+    >
+      {#if chip.icon}
+        {@const Icon = chip.icon}
+        <Icon size={12} class="shrink-0" />
+      {/if}
+      {chip.label}
+      {#if chip.count !== undefined}
+        <span class="font-mono text-[10px] text-faint"
+          >{chip.count}{#if countLabel}<span class="sr-only"> {countLabel}</span>{/if}</span
+        >
+      {/if}
+    </button>
+  {/each}
+</div>

package/dist/components/FilterChips.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { Component } from 'svelte';
+/** One chip. */
+export interface FilterChip<T extends string = string> {
+    /** The chosen value, and the key the chip is rendered under. */
+    value: T;
+    /** What the reader sees. */
+    label: string;
+    /** How many rows this chip leaves on screen, drawn small beside the label. */
+    count?: number;
+    /** A lucide component before the label. */
+    icon?: Component<{
+        size?: number;
+        class?: string;
+    }>;
+}
+declare function $$render<T extends string>(): {
+    props: {
+        /** The pressed chip's value. */
+        value: T;
+        options: FilterChip<T>[];
+        /** Names the group for assistive technology. The chips name themselves. */
+        label: string;
+        /** Read after the count, so "3" is heard as "3 on sale". */
+        countLabel?: string;
+        class?: string;
+        onchange?: (value: T) => void;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FilterChips: $$IsomorphicComponent;
+type FilterChips<T extends string> = InstanceType<typeof FilterChips<T>>;
+export default FilterChips;

package/dist/components/PluginCart.svelte

@@ -15,6 +15,7 @@
   import { X } from '@lucide/svelte';
   import Badge from './Badge.svelte';
   import Button from './Button.svelte';
+  import FilterChips from './FilterChips.svelte';
   import SearchInput from './SearchInput.svelte';
   import Spinner from './Spinner.svelte';
   import * as motion from '../motion.js';
@@ -161,7 +162,11 @@
   );
 
   const total = $derived(
-    quoted ? (period === 'annual' ? (quoted.annual_total_cents ?? null) : quoted.total_cents) : null,
+    quoted
+      ? period === 'annual'
+        ? (quoted.annual_total_cents ?? null)
+        : quoted.total_cents
+      : null,
   );
 
   const ladder = $derived(
@@ -229,26 +234,12 @@
     {#if categories.length > 2}
       <!-- Chips that wrap rather than a strip that scrolls: every category is
            in sight at every width, and none hides past the edge. -->
-      <div class="flex flex-wrap gap-1.5" role="group" aria-label="Category">
-        {#each categories as c (c.value)}
-          <button
-            type="button"
-            aria-pressed={category === c.value}
-            class={cn(
-              HIT_AREA,
-              'inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors',
-              'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand',
-              category === c.value
-                ? 'border-brand bg-brand/10 text-fg'
-                : 'border-line text-muted hover:border-line-strong hover:text-fg',
-            )}
-            onclick={() => (category = c.value)}
-          >
-            {c.label}
-            <span class="font-mono text-[10px] text-faint">{c.count}<span class="sr-only"> on sale</span></span>
-          </button>
-        {/each}
-      </div>
+      <FilterChips
+        label="Category"
+        countLabel="on sale"
+        options={categories}
+        bind:value={category}
+      />
     {/if}
 
     {#if shown.length === 0}
@@ -278,7 +269,9 @@
               aria-describedby="{id}-price {id}-blurb{tagged ? ` ${id}-tags` : ''}"
               onchange={() => toggle(plugin.sku)}
             />
-            <span class={cn(choiceWrap('card', on, owned), CHOICE_FOCUS, 'h-full flex-col gap-2 p-4')}>
+            <span
+              class={cn(choiceWrap('card', on, owned), CHOICE_FOCUS, 'h-full flex-col gap-2 p-4')}
+            >
               <span class="flex w-full items-start justify-between gap-3">
                 <span class="flex min-w-0 items-start gap-2.5">
                   <span
@@ -289,15 +282,29 @@
                     aria-hidden="true"
                   >
                     {#if on}
-                      <svg viewBox="0 0 10 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d={CHOICE_MARK.check} /></svg>
+                      <svg
+                        viewBox="0 0 10 8"
+                        class="size-2.5"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"><path d={CHOICE_MARK.check} /></svg
+                      >
                     {/if}
                   </span>
                   <!-- A one-word name longer than the space beside the price breaks
                        with a hyphen rather than running under it. -->
-                  <span id="{id}-name" class="min-w-0 text-sm font-semibold leading-snug text-fg hyphens-auto [overflow-wrap:anywhere]">{plugin.name}</span>
+                  <span
+                    id="{id}-name"
+                    class="min-w-0 text-sm font-semibold leading-snug text-fg hyphens-auto [overflow-wrap:anywhere]"
+                    >{plugin.name}</span
+                  >
                 </span>
                 <span id="{id}-price" class="shrink-0 font-mono text-sm font-semibold text-fg">
-                  {formatCents(plugin.price_cents, currency)}<span class="text-xs font-normal text-muted">/mo</span>
+                  {formatCents(plugin.price_cents, currency)}<span
+                    class="text-xs font-normal text-muted">/mo</span
+                  >
                 </span>
               </span>
               <span id="{id}-blurb" class="text-xs leading-relaxed text-muted">
@@ -305,7 +312,8 @@
               </span>
               {#if tagged}
                 <span id="{id}-tags" class="mt-auto flex flex-wrap gap-1.5 pt-1">
-                  {#if plugin.category}<Badge tone="neutral" size="sm">{plugin.category}</Badge>{/if}
+                  {#if plugin.category}<Badge tone="neutral" size="sm">{plugin.category}</Badge
+                    >{/if}
                   {#if blurb.beta}<Badge tone="violet" size="sm">Beta</Badge>{/if}
                   {#if owned}<Badge tone="success" size="sm">Owned</Badge>{/if}
                 </span>
@@ -325,8 +333,11 @@
           class="flex items-center justify-between gap-3 rounded-xl border border-brand bg-surface px-4 py-3 text-sm shadow-lg transition-colors hover:bg-surface-2"
         >
           <span class="text-fg">
-            <span class="font-semibold">{count}</span> picked{#if total !== null}<span class="text-muted">
-                · </span><span class="font-mono">{formatCents(total, currency)}{perLabel}</span>{/if}
+            <span class="font-semibold">{count}</span> picked{#if total !== null}<span
+                class="text-muted"
+              >
+                ·
+              </span><span class="font-mono">{formatCents(total, currency)}{perLabel}</span>{/if}
           </span>
           <span class="font-semibold text-brand">Review</span>
         </a>
@@ -395,7 +406,9 @@
               <span
                 class={cn(
                   'absolute top-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 transition-colors',
-                  ladder.count >= r.plugins ? 'border-brand bg-brand' : 'border-line-strong bg-surface',
+                  ladder.count >= r.plugins
+                    ? 'border-brand bg-brand'
+                    : 'border-line-strong bg-surface',
                 )}
                 style:left="{(r.plugins / ladderTop) * 100}%"
               ></span>
@@ -403,7 +416,10 @@
           </div>
           <div class="relative mt-2 h-4 text-[10px] text-muted">
             {#each rungs as r (r.plugins)}
-              <span class="absolute -translate-x-1/2 whitespace-nowrap font-mono" style:left="{Math.min((r.plugins / ladderTop) * 100, 92)}%">
+              <span
+                class="absolute -translate-x-1/2 whitespace-nowrap font-mono"
+                style:left="{Math.min((r.plugins / ladderTop) * 100, 92)}%"
+              >
                 {r.plugins}+ · {r.discount_pct}%
               </span>
             {/each}

package/dist/index.d.ts

@@ -37,6 +37,8 @@ export { default as Label } from './components/Label.svelte';
 export { default as Field } from './components/Field.svelte';
 export { default as FormMessage } from './components/FormMessage.svelte';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export { default as FilterChips } from './components/FilterChips.svelte';
+export type { FilterChip } from './components/FilterChips.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as MultiSelect } from './components/MultiSelect.svelte';
 export { default as Autocomplete } from './components/Autocomplete.svelte';
@@ -98,4 +100,4 @@ export { cn, type ClassValue } from './utils/cn.js';
 export { getTheme, getThemePreference, nextThemePreference, resolveTheme, setTheme, setThemePreference, systemTheme, themeBootScript, watchThemePreference, toggleTheme, watchSystemTheme, THEME_PREFERENCES, type Theme, type ThemePreference, } from './utils/theme.js';
 export * as motion from './motion.js';
 export type { Rung as MotionRung, Curve as MotionCurve } from './motion.js';
-export declare const VERSION = "0.34.0";
+export declare const VERSION = "0.35.1";

package/dist/index.js

@@ -38,6 +38,7 @@ export { default as Label } from './components/Label.svelte';
 export { default as Field } from './components/Field.svelte';
 export { default as FormMessage } from './components/FormMessage.svelte';
 export { default as SegmentedControl } from './components/SegmentedControl.svelte';
+export { default as FilterChips } from './components/FilterChips.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as MultiSelect } from './components/MultiSelect.svelte';
 export { default as Autocomplete } from './components/Autocomplete.svelte';
@@ -107,4 +108,4 @@ export * as motion from './motion.js';
 // ── Version ────────────────────────────────────────────────────────────────
 // Generated from package.json by `pnpm version:sync`. Bump package.json, never
 // this line. The build and the test suite fail when the two disagree.
-export const VERSION = '0.34.0';
+export const VERSION = '0.35.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lyeve-labs/ui-kit",
-  "version": "0.34.0",
+  "version": "0.35.1",
   "description": "A clean, accessible, palette-aware Svelte 5 component library. The design system behind LyEve.",
   "license": "MIT",
   "author": "LyEve Labs <hello@lyeve.com>",