@ctrliq/quantic-components 1.85.1 → 1.86.1

package/dist/grid/grid.stories.js

@@ -1,95 +0,0 @@
-import { story } from '../shared/story';
-import { GridDensity } from './index.constants';
-import { ContainerSizeBreakpoint } from '../shared/shared.constants';
-export default {
-    title: 'Components/Layout/Grid',
-    component: 'quantic-grid',
-    tags: ['autodocs'],
-    argTypes: {
-        density: {
-            control: 'select',
-            options: Object.values(GridDensity),
-            description: 'Grid density setting',
-            table: {
-                defaultValue: { summary: GridDensity.Comfortable },
-            },
-        },
-        cardCount: {
-            control: { type: 'number', min: 1, max: 20 },
-            description: 'Number of items to display',
-        },
-    },
-};
-const sampleItem = (index) => `
-  <div
-    style="
-      background: var(--quantic-bg-secondary);
-      height: 100px;
-      text-align: center;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    "
-  >
-    Item ${index}
-  </div>`;
-const breakpoints = [
-    { name: 'Base', width: '20rem' },
-    { name: `Xs (≥ ${ContainerSizeBreakpoint.Xs})`, width: ContainerSizeBreakpoint.Xs },
-    { name: `Sm (≥ ${ContainerSizeBreakpoint.Sm})`, width: ContainerSizeBreakpoint.Sm },
-    { name: `Md (≥ ${ContainerSizeBreakpoint.Md})`, width: ContainerSizeBreakpoint.Md },
-    { name: `Lg (≥ ${ContainerSizeBreakpoint.Lg})`, width: ContainerSizeBreakpoint.Lg },
-    { name: `Xl (≥ ${ContainerSizeBreakpoint.Xl})`, width: ContainerSizeBreakpoint.Xl },
-    { name: `Xxl (≥ ${ContainerSizeBreakpoint.Xxl})`, width: ContainerSizeBreakpoint.Xxl },
-];
-const renderDensityWithBreakpoints = (density, cardCount) => `
-  <div
-    style="
-      display: flex;
-      flex-direction: column;
-      gap: var(--quantic-spacing-6);
-      margin-inline: var(--quantic-spacing-4);
-    "
-  >
-    ${breakpoints
-    .map((bp) => `
-      <div>
-        <quantic-text as="h4" style="margin-bottom: var(--quantic-spacing-2);">
-          ${bp.name}
-        </quantic-text>
-        <div
-          style="
-            width: ${bp.width};
-            border: 1px dashed var(--quantic-color-blue-900);
-            background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);
-          "
-        >
-          <quantic-grid density="${density}">
-            ${Array.from({ length: cardCount }, (_, i) => sampleItem(i + 1)).join('')}
-          </quantic-grid>
-        </div>
-      </div>`)
-    .join('')}
-  </div>`;
-const base = story({
-    args: { density: GridDensity.Comfortable, cardCount: 12 },
-}).render(({ density, cardCount }) => renderDensityWithBreakpoints(density, cardCount));
-export const Dense = base.override({ density: GridDensity.Dense });
-export const Compact = base.override({ density: GridDensity.Compact });
-export const Comfortable = base;
-export const Sparse = base.override({ density: GridDensity.Sparse, cardCount: 8 });
-export const Custom = story({ args: { density: GridDensity.Comfortable, cardCount: 12 } }).render(({ cardCount }) => `
-    <div
-      style="
-        border: 1px dashed var(--quantic-color-blue-900);
-        background-color: rgb(var(--quantic-color-blue-900-rgb) / 0.35);
-      "
-    >
-      <quantic-grid
-        density="custom"
-        style="--quantic-component-grid-columns: 5; --quantic-component-grid-gap: var(--quantic-spacing-2);"
-      >
-        ${Array.from({ length: cardCount }, (_, i) => sampleItem(i + 1)).join('')}
-      </quantic-grid>
-    </div>
-  `);

package/dist/text/index.stories.d.ts

@@ -1,50 +0,0 @@
-import { TextSize, TextVariant } from './index.constants';
-interface Args {
-    contents: string;
-    as?: string;
-    variant?: TextVariant;
-    size?: TextSize;
-}
-declare const _default: {
-    title: string;
-    component: string;
-    tags: string[];
-    argTypes: {
-        contents: {
-            control: string;
-        };
-        as: {
-            control: {
-                type: string;
-            };
-            options: string[];
-            description: string;
-        };
-        variant: {
-            control: {
-                type: string;
-            };
-            options: ("display" | "body")[];
-            description: string;
-        };
-        size: {
-            control: {
-                type: string;
-            };
-            options: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl")[];
-            description: string;
-        };
-    };
-};
-export default _default;
-export declare const Default: import("../shared/story").StoryObject<Args>;
-export declare const Body: import("../shared/story").StoryObject<Args>;
-export declare const BodyLarge: import("../shared/story").StoryObject<Args>;
-export declare const BodyMedium: import("../shared/story").StoryObject<Args>;
-export declare const BodySmall: import("../shared/story").StoryObject<Args>;
-export declare const BodyExtraSmall: import("../shared/story").StoryObject<Args>;
-export declare const Display: import("../shared/story").StoryObject<Args>;
-export declare const DisplayExtraLarge: import("../shared/story").StoryObject<Args>;
-export declare const DisplayLarge: import("../shared/story").StoryObject<Args>;
-export declare const DisplayMedium: import("../shared/story").StoryObject<Args>;
-export declare const DisplaySmall: import("../shared/story").StoryObject<Args>;

package/dist/text/index.stories.js

@@ -1,55 +0,0 @@
-import { TextSize, TextVariant } from './index.constants';
-import { story } from '../shared/story';
-export default {
-    title: 'Components/Display/Text',
-    component: 'quantic-text',
-    tags: ['autodocs'],
-    argTypes: {
-        contents: { control: 'text' },
-        as: {
-            control: { type: 'select' },
-            options: ['span', 'div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-            description: 'The HTML element to render',
-        },
-        variant: {
-            control: { type: 'select' },
-            options: [TextVariant.Body, TextVariant.Display],
-            description: 'The variant of the text',
-        },
-        size: {
-            control: { type: 'select' },
-            options: [
-                TextSize.ExtraSmall,
-                TextSize.Small,
-                TextSize.Medium,
-                TextSize.Large,
-                TextSize.ExtraLarge,
-                TextSize.TwoExtraLarge,
-            ],
-            description: 'The size of the text',
-        },
-    },
-};
-const headline = 'Notes and documentation';
-const paragraph = `The typography system is one of the most foundational parts of any interface design. If your users are unable to read your content, you can say goodbye to them immediately. That's why even a rudimentary understanding of typography means you can determine for yourself the best fonts for modern UI design.
-Text is never just text. It often goes unnoticed in good design, but good type design can elicit emotion, guide attention and even create a typographical identity.
-I've always felt that good typography is the most undervalued and under appreciated elements in modern product design.
-Bad typography, by contrast, sticks out. Even to non-design-oriented folks, bad typography is easy to spot. It reflects badly on the brand and leads to a poor user experience, even if users can't pinpoint why...
-Often, designers fall back on trends rather than carefully considering the best typography for a design. Partly, because good typography skills are difficult to master. Paired with great copywriting, understanding the basics of effective typography is a powerful force multiplier to help you stand out and improve user experiences.`;
-const base = story({ args: { contents: headline, variant: TextVariant.Body, size: TextSize.Medium } })
-    .render(({ html, contents, as, variant, size }) => html `
-    <quantic-text as=${as} variant=${variant} size=${size}>${contents}</quantic-text>
-  `);
-// ── body ──────────────────────────────────────────────────────────────────────
-export const Default = base;
-export const Body = base.override({ contents: paragraph, as: 'p', variant: TextVariant.Body, size: undefined });
-export const BodyLarge = base.override({ contents: paragraph, as: 'p', variant: TextVariant.Body, size: TextSize.Large });
-export const BodyMedium = base.override({ contents: paragraph, as: 'p', variant: TextVariant.Body, size: TextSize.Medium });
-export const BodySmall = base.override({ contents: paragraph, as: 'p', variant: TextVariant.Body, size: TextSize.Small });
-export const BodyExtraSmall = base.override({ contents: paragraph, as: 'p', variant: TextVariant.Body, size: TextSize.ExtraSmall });
-// ── display ───────────────────────────────────────────────────────────────────
-export const Display = base.override({ contents: headline, as: 'h1', variant: TextVariant.Display, size: undefined });
-export const DisplayExtraLarge = base.override({ contents: headline, as: 'h1', variant: TextVariant.Display, size: TextSize.ExtraLarge });
-export const DisplayLarge = base.override({ contents: headline, as: 'h1', variant: TextVariant.Display, size: TextSize.Large });
-export const DisplayMedium = base.override({ contents: headline, as: 'h1', variant: TextVariant.Display, size: TextSize.Medium });
-export const DisplaySmall = base.override({ contents: headline, as: 'h1', variant: TextVariant.Display, size: TextSize.Small });

package/dist/types/cluster/cluster.stories.d.ts

@@ -1,57 +0,0 @@
-import { ClusterAxis, ClusterGap, ClusterAlign } from './index.constants';
-declare const _default: {
-    title: string;
-    component: string;
-    tags: string[];
-    argTypes: {
-        axis: {
-            control: string;
-            options: ClusterAxis[];
-            table: {
-                defaultValue: {
-                    summary: ClusterAxis;
-                };
-            };
-        };
-        gap: {
-            control: string;
-            options: ClusterGap[];
-            table: {
-                defaultValue: {
-                    summary: ClusterGap;
-                };
-            };
-        };
-        align: {
-            control: string;
-            options: ClusterAlign[];
-            table: {
-                defaultValue: {
-                    summary: ClusterAlign;
-                };
-            };
-        };
-        wrap: {
-            control: string;
-            table: {
-                defaultValue: {
-                    summary: string;
-                };
-            };
-        };
-    };
-};
-export default _default;
-interface Args {
-    axis: ClusterAxis;
-    gap: ClusterGap;
-    align: ClusterAlign;
-    wrap: boolean;
-}
-export declare const Horizontal: import("../shared/story").StoryObject<Args>;
-export declare const Vertical: import("../shared/story").StoryObject<Args>;
-export declare const ExtraSmall: import("../shared/story").StoryObject<Args>;
-export declare const Small: import("../shared/story").StoryObject<Args>;
-export declare const Large: import("../shared/story").StoryObject<Args>;
-export declare const ExtraLarge: import("../shared/story").StoryObject<Args>;
-export declare const Centered: import("../shared/story").StoryObject<Args>;

package/dist/types/grid/grid.stories.d.ts

@@ -1,36 +0,0 @@
-import { GridDensity } from './index.constants';
-declare const _default: {
-    title: string;
-    component: string;
-    tags: string[];
-    argTypes: {
-        density: {
-            control: string;
-            options: GridDensity[];
-            description: string;
-            table: {
-                defaultValue: {
-                    summary: GridDensity;
-                };
-            };
-        };
-        cardCount: {
-            control: {
-                type: string;
-                min: number;
-                max: number;
-            };
-            description: string;
-        };
-    };
-};
-export default _default;
-interface Args {
-    density: GridDensity;
-    cardCount: number;
-}
-export declare const Dense: import("../shared/story").StoryObject<Args>;
-export declare const Compact: import("../shared/story").StoryObject<Args>;
-export declare const Comfortable: import("../shared/story").StoryObject<Args>;
-export declare const Sparse: import("../shared/story").StoryObject<Args>;
-export declare const Custom: import("../shared/story").StoryObject<Args>;

package/dist/types/text/index.stories.d.ts

@@ -1,50 +0,0 @@
-import { TextSize, TextVariant } from './index.constants';
-interface Args {
-    contents: string;
-    as?: string;
-    variant?: TextVariant;
-    size?: TextSize;
-}
-declare const _default: {
-    title: string;
-    component: string;
-    tags: string[];
-    argTypes: {
-        contents: {
-            control: string;
-        };
-        as: {
-            control: {
-                type: string;
-            };
-            options: string[];
-            description: string;
-        };
-        variant: {
-            control: {
-                type: string;
-            };
-            options: ("display" | "body")[];
-            description: string;
-        };
-        size: {
-            control: {
-                type: string;
-            };
-            options: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl")[];
-            description: string;
-        };
-    };
-};
-export default _default;
-export declare const Default: import("../shared/story").StoryObject<Args>;
-export declare const Body: import("../shared/story").StoryObject<Args>;
-export declare const BodyLarge: import("../shared/story").StoryObject<Args>;
-export declare const BodyMedium: import("../shared/story").StoryObject<Args>;
-export declare const BodySmall: import("../shared/story").StoryObject<Args>;
-export declare const BodyExtraSmall: import("../shared/story").StoryObject<Args>;
-export declare const Display: import("../shared/story").StoryObject<Args>;
-export declare const DisplayExtraLarge: import("../shared/story").StoryObject<Args>;
-export declare const DisplayLarge: import("../shared/story").StoryObject<Args>;
-export declare const DisplayMedium: import("../shared/story").StoryObject<Args>;
-export declare const DisplaySmall: import("../shared/story").StoryObject<Args>;