@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/dist/components/chart/lite-chart.stories.js

@@ -1,98 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/LiteChart',
-    component: 'lyra-lite-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-/** Zero-dependency alternative to `lyra-chart` — plain SVG/DOM, no `chart.js` peer dep. */
-export const Default = {
-    render: () => {
-        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
-        return html `
-      <lyra-lite-chart
-        type="bar"
-        height="16rem"
-        style="width: 22rem"
-        legend
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-      ></lyra-lite-chart>
-    `;
-    },
-};
-export const GroupedBars = {
-    render: () => {
-        const series = [
-            { label: 'This year', data: [12, 19, 14, 22] },
-            { label: 'Last year', data: [9, 15, 11, 18] },
-        ];
-        return html `
-      <lyra-lite-chart
-        type="bar"
-        height="16rem"
-        style="width: 24rem"
-        legend
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-      ></lyra-lite-chart>
-    `;
-    },
-};
-/** `stacked` sums each category's bars into one segmented bar instead of grouping them side by side. */
-export const StackedBars = {
-    render: () => {
-        const series = [
-            { label: 'Docs', data: [4, 6, 3, 8] },
-            { label: 'Bugs', data: [3, 2, 5, 4] },
-            { label: 'Features', data: [5, 7, 6, 3] },
-        ];
-        return html `
-      <lyra-lite-chart
-        type="bar"
-        stacked
-        height="16rem"
-        style="width: 24rem"
-        legend
-        x-label="Week"
-        y-label="Commits"
-        .labels=${['W1', 'W2', 'W3', 'W4']}
-        .datasets=${series}
-      ></lyra-lite-chart>
-    `;
-    },
-};
-export const Line = {
-    render: () => {
-        const series = [
-            { label: 'CPU', data: [20, 35, 42, 30, 55] },
-            { label: 'Memory', data: [40, 38, 45, 60, 58] },
-        ];
-        return html `
-      <lyra-lite-chart
-        type="line"
-        height="16rem"
-        style="width: 24rem"
-        legend
-        .labels=${['00:00', '00:05', '00:10', '00:15', '00:20']}
-        .datasets=${series}
-      ></lyra-lite-chart>
-    `;
-    },
-};
-/** Clicking (or Enter/Space on a focused) bar/point fires `lyra-point-click`, same detail shape as `lyra-chart`'s. */
-export const ClickToFilter = {
-    render: () => {
-        const series = [{ label: 'Runs', data: [12, 19, 14, 22] }];
-        return html `
-      <lyra-lite-chart
-        type="bar"
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-        @lyra-point-click=${(e) => alert(JSON.stringify(e.detail))}
-      ></lyra-lite-chart>
-    `;
-    },
-};

package/dist/components/chart/pie-chart.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/chart/pie-chart.stories.js

@@ -1,26 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/Pie',
-    component: 'lyra-pie-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const series = [
-            {
-                label: 'Browsers',
-                data: [58, 18, 15, 9],
-                color: ['#5b8def', '#f7b955', '#59c19a', '#b6b8c3'],
-            },
-        ];
-        return html `
-      <lyra-pie-chart
-        height="16rem"
-        style="width: 16rem"
-        .labels=${['Chrome', 'Firefox', 'Safari', 'Other']}
-        .datasets=${series}
-      ></lyra-pie-chart>
-    `;
-    },
-};

package/dist/components/chart/polar-area-chart.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/chart/polar-area-chart.stories.js

@@ -1,20 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/PolarArea',
-    component: 'lyra-polar-area-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
-        return html `
-      <lyra-polar-area-chart
-        height="16rem"
-        style="width: 18rem"
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-      ></lyra-polar-area-chart>
-    `;
-    },
-};

package/dist/components/chart/radar-chart.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/chart/radar-chart.stories.js

@@ -1,20 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/Radar',
-    component: 'lyra-radar-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const series = [{ label: 'Model A', data: [80, 90, 70, 85, 75] }];
-        return html `
-      <lyra-radar-chart
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency']}
-        .datasets=${series}
-      ></lyra-radar-chart>
-    `;
-    },
-};

package/dist/components/chart/scatter-chart.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/chart/scatter-chart.stories.js

@@ -1,31 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/Scatter',
-    component: 'lyra-scatter-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const series = [
-            {
-                label: 'Samples',
-                points: [
-                    { x: 10, y: 20 },
-                    { x: 15, y: 10 },
-                    { x: 20, y: 30 },
-                    { x: 25, y: 15 },
-                ],
-            },
-        ];
-        return html `
-      <lyra-scatter-chart
-        height="16rem"
-        style="width: 22rem"
-        x-label="X"
-        y-label="Y"
-        .datasets=${series}
-      ></lyra-scatter-chart>
-    `;
-    },
-};

package/dist/components/combobox/combobox.stories.d.ts

@@ -1,24 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-export declare const Multiple: Story;
-/**
- * Rows come from `<lyra-option>` children plus `group` (section headers),
- * `sub` (a secondary line), and `dot-color` (a leading status dot) — useful
- * for richer pickers like a device or status list.
- */
-export declare const RichRows: Story;
-/**
- * `source` replaces the light-DOM `<lyra-option>` list with an async
- * `(query) => Promise<ComboboxSourceRow[]>` lookup, debounced ~200ms after
- * each keystroke. A "Loading…" row is shown while a call is in flight.
- */
-export declare const AsyncSource: Story;
-/**
- * `filter` overrides the default label/searchText matcher entirely, e.g. to
- * match only from the start of the label instead of anywhere within it.
- */
-export declare const CustomFilter: Story;
-export declare const States: Story;

package/dist/components/combobox/combobox.stories.js

@@ -1,102 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Combobox',
-    component: 'lyra-combobox',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-combobox label="Fruit" placeholder="Pick one…" with-clear style="max-width: 20rem">
-      <lyra-option value="a">Apple</lyra-option>
-      <lyra-option value="b">Banana</lyra-option>
-      <lyra-option value="c">Cherry</lyra-option>
-      <lyra-option value="d">Date</lyra-option>
-    </lyra-combobox>
-  `,
-};
-export const Multiple = {
-    render: () => html `
-    <lyra-combobox label="Fruit" multiple with-clear style="max-width: 20rem">
-      <lyra-option value="a">Apple</lyra-option>
-      <lyra-option value="b">Banana</lyra-option>
-      <lyra-option value="c">Cherry</lyra-option>
-      <lyra-option value="d">Date</lyra-option>
-    </lyra-combobox>
-  `,
-};
-/**
- * Rows come from `<lyra-option>` children plus `group` (section headers),
- * `sub` (a secondary line), and `dot-color` (a leading status dot) — useful
- * for richer pickers like a device or status list.
- */
-export const RichRows = {
-    render: () => html `
-    <lyra-combobox label="Inverter" placeholder="Pick one…" style="max-width: 22rem">
-      <lyra-option value="inv-1" group="Building A" sub="Running" dot-color="var(--lyra-color-success)">
-        Inverter 1
-      </lyra-option>
-      <lyra-option value="inv-2" group="Building A" sub="Idle" dot-color="var(--lyra-color-text-quiet)">
-        Inverter 2
-      </lyra-option>
-      <lyra-option value="inv-3" group="Building B" sub="Fault" dot-color="var(--lyra-color-danger)">
-        Inverter 3
-      </lyra-option>
-    </lyra-combobox>
-  `,
-};
-/**
- * `source` replaces the light-DOM `<lyra-option>` list with an async
- * `(query) => Promise<ComboboxSourceRow[]>` lookup, debounced ~200ms after
- * each keystroke. A "Loading…" row is shown while a call is in flight.
- */
-export const AsyncSource = {
-    render: () => {
-        const all = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
-        const source = async (query) => {
-            await new Promise((r) => setTimeout(r, 400));
-            return all
-                .filter((label) => label.toLowerCase().includes(query.toLowerCase()))
-                .map((label) => ({ value: label.toLowerCase(), label }));
-        };
-        return html `
-      <lyra-combobox label="Fruit (async)" placeholder="Type to search…" with-clear
-        style="max-width: 22rem" .source=${source}
-      ></lyra-combobox>
-    `;
-    },
-};
-/**
- * `filter` overrides the default label/searchText matcher entirely, e.g. to
- * match only from the start of the label instead of anywhere within it.
- */
-export const CustomFilter = {
-    render: () => {
-        const startsWith = (option, query) => option.label.toLowerCase().startsWith(query.toLowerCase());
-        return html `
-      <lyra-combobox label="Fruit (starts with…)" placeholder="Try “an”…" style="max-width: 22rem"
-        .filter=${startsWith}
-      >
-        <lyra-option value="a">Apple</lyra-option>
-        <lyra-option value="b">Banana</lyra-option>
-        <lyra-option value="c">Cherry</lyra-option>
-        <lyra-option value="d">Date</lyra-option>
-      </lyra-combobox>
-    `;
-    },
-};
-export const States = {
-    render: () => html `
-    <div style="display: flex; flex-direction: column; gap: 1.5rem; max-width: 22rem">
-      <lyra-combobox label="Disabled" disabled placeholder="Can't touch this">
-        <lyra-option value="a">Apple</lyra-option>
-      </lyra-combobox>
-      <lyra-combobox label="Required" required hint="Pick your favorite">
-        <lyra-option value="a">Apple</lyra-option>
-      </lyra-combobox>
-      <lyra-combobox label="Invalid" required error-text="Selection required">
-        <lyra-option value="a">Apple</lyra-option>
-      </lyra-combobox>
-    </div>
-  `,
-};

package/dist/components/date-picker/date-input.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-export declare const MinMax: Story;
-export declare const DisablePast: Story;
-export declare const DisableFuture: Story;
-export declare const Range: Story;
-export declare const WithOutsideDays: Story;

package/dist/components/date-picker/date-input.stories.js

@@ -1,48 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'DatePicker/WithInput',
-    component: 'lyra-date-input',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-date-input label="Start date" with-clear style="max-width: 16rem"></lyra-date-input>
-  `,
-};
-export const MinMax = {
-    render: () => html `
-    <lyra-date-input
-      label="Appointment date"
-      min="2026-07-10"
-      max="2026-07-20"
-      value="2026-07-15"
-      style="max-width: 16rem"
-    ></lyra-date-input>
-  `,
-};
-export const DisablePast = {
-    render: () => html `
-    <lyra-date-input label="Upcoming date" disable-past style="max-width: 16rem"></lyra-date-input>
-  `,
-};
-export const DisableFuture = {
-    render: () => html `
-    <lyra-date-input label="Historical date" disable-future style="max-width: 16rem"></lyra-date-input>
-  `,
-};
-export const Range = {
-    render: () => html `
-    <lyra-date-input label="Trip dates" mode="range" months="2" style="max-width: 20rem"></lyra-date-input>
-  `,
-};
-export const WithOutsideDays = {
-    render: () => html `
-    <lyra-date-input
-      label="Meeting date"
-      with-outside-days
-      value="2026-07-15"
-      style="max-width: 16rem"
-    ></lyra-date-input>
-  `,
-};

package/dist/components/date-picker/date-picker.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Single: Story;
-export declare const Range: Story;
-export declare const MinMax: Story;
-export declare const DisablePast: Story;
-export declare const DisableFuture: Story;
-export declare const WithOutsideDays: Story;

package/dist/components/date-picker/date-picker.stories.js

@@ -1,25 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'DatePicker/Inline',
-    component: 'lyra-date-picker',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Single = {
-    render: () => html `<lyra-date-picker mode="single"></lyra-date-picker>`,
-};
-export const Range = {
-    render: () => html `<lyra-date-picker mode="range" months="2"></lyra-date-picker>`,
-};
-export const MinMax = {
-    render: () => html `<lyra-date-picker min="2026-07-10" max="2026-07-20" value="2026-07-15"></lyra-date-picker>`,
-};
-export const DisablePast = {
-    render: () => html `<lyra-date-picker disable-past></lyra-date-picker>`,
-};
-export const DisableFuture = {
-    render: () => html `<lyra-date-picker disable-future></lyra-date-picker>`,
-};
-export const WithOutsideDays = {
-    render: () => html `<lyra-date-picker with-outside-days value="2026-07-15"></lyra-date-picker>`,
-};

package/dist/components/empty/empty.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-export declare const WithIcon: Story;
-export declare const Compact: Story;

package/dist/components/empty/empty.stories.js

@@ -1,34 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Empty',
-    component: 'lyra-empty',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-empty heading="No results" description="Try a different search.">
-      <span slot="actions"><button>Reset</button></span>
-    </lyra-empty>
-  `,
-};
-export const WithIcon = {
-    render: () => html `
-    <lyra-empty heading="No results" description="Try a different search.">
-      <svg slot="" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-        <circle cx="11" cy="11" r="7" stroke-width="2"></circle>
-        <path d="M21 21l-4.35-4.35" stroke-width="2" stroke-linecap="round"></path>
-      </svg>
-      <span slot="actions"><button>Reset</button></span>
-    </lyra-empty>
-  `,
-};
-export const Compact = {
-    render: () => html `
-    <div style="max-width: 16rem; border: 1px solid var(--lyra-color-border);">
-      <lyra-empty compact heading="No results" description="Try a different search.">
-        <span slot="actions"><button>Reset</button></span>
-      </lyra-empty>
-    </div>
-  `,
-};

package/dist/components/export-button/export-button.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const SingleFormat: Story;
-export declare const MultiFormatMenu: Story;
-export declare const Disabled: Story;

package/dist/components/export-button/export-button.stories.js

@@ -1,37 +0,0 @@
-import { html } from 'lit';
-const rows = [
-    { id: 'a', name: 'Alpha', score: 92 },
-    { id: 'b', name: 'Beta', score: 81 },
-    { id: 'c', name: 'Gamma', score: 76 },
-];
-const columns = [
-    { key: 'id', label: 'ID' },
-    { key: 'name', label: 'Name' },
-    { key: 'score', label: 'Score' },
-];
-const meta = {
-    title: 'ExportButton',
-    component: 'lyra-export-button',
-    tags: ['autodocs'],
-};
-export default meta;
-export const SingleFormat = {
-    render: () => html `
-    <lyra-export-button filename="demo" .rows=${rows} .columns=${columns}></lyra-export-button>
-  `,
-};
-export const MultiFormatMenu = {
-    render: () => html `
-    <lyra-export-button
-      filename="demo"
-      .rows=${rows}
-      .columns=${columns}
-      .formats=${['csv', 'json']}
-    ></lyra-export-button>
-  `,
-};
-export const Disabled = {
-    render: () => html `
-    <lyra-export-button filename="demo" .rows=${rows} .columns=${columns} disabled></lyra-export-button>
-  `,
-};

package/dist/components/file-input/file-input.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-export declare const CustomSlotContent: Story;
-export declare const Disabled: Story;

package/dist/components/file-input/file-input.stories.js

@@ -1,19 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'FileInput',
-    component: 'lyra-file-input',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `<lyra-file-input multiple accept=".csv,.xlsx"></lyra-file-input>`,
-};
-export const CustomSlotContent = {
-    render: () => html `<lyra-file-input multiple accept=".csv,.xlsx" label="Upload spreadsheets">
-      <strong>Drag spreadsheets here</strong>
-      <span>or click to browse (.csv, .xlsx)</span>
-    </lyra-file-input>`,
-};
-export const Disabled = {
-    render: () => html `<lyra-file-input disabled accept=".csv,.xlsx"></lyra-file-input>`,
-};

package/dist/components/flag/flag.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Gallery: Story;

package/dist/components/flag/flag.stories.js

@@ -1,17 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Flag',
-    component: 'lyra-flag',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Gallery = {
-    render: () => html `
-    <div style="display:flex; gap:1rem; align-items:center;">
-      <lyra-flag country="fr" label="France" style="height: 1.5rem"></lyra-flag>
-      <lyra-flag language="en" label="English" style="height: 1.5rem"></lyra-flag>
-      <lyra-flag language="de" label="German" round style="height: 1.5rem"></lyra-flag>
-      <lyra-flag country="jp" label="Japan" round style="height: 1.5rem"></lyra-flag>
-    </div>
-  `,
-};

package/dist/components/gauge/gauge.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Radial: Story;
-export declare const Linear: Story;
-export declare const WithValueLabel: Story;
-export declare const NonzeroMin: Story;

package/dist/components/gauge/gauge.stories.js

@@ -1,19 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Gauge',
-    component: 'lyra-gauge',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Radial = {
-    render: () => html `<lyra-gauge value="72" max="100" label="CPU"></lyra-gauge>`,
-};
-export const Linear = {
-    render: () => html `<lyra-gauge type="linear" value="40" max="100" label="Disk"></lyra-gauge>`,
-};
-export const WithValueLabel = {
-    render: () => html `<lyra-gauge value="72" max="100" label="Temp" .valueLabel=${'72°F'}></lyra-gauge>`,
-};
-export const NonzeroMin = {
-    render: () => html `<lyra-gauge value="18" min="-20" max="40" label="Outdoor Temp"></lyra-gauge>`,
-};

package/dist/components/graph/graph.stories.d.ts

@@ -1,8 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-export declare const TunedForces: Story;
-export declare const BoundedZoom: Story;
-export declare const SeededLayout: Story;