@ctrliq/quantic-components 1.82.0 → 1.84.0

package/dist/types/tag/index.d.ts

@@ -1,4 +1,5 @@
 export * from './tag.component';
 export * from './status-tag.component';
 export * from './count-tag.component';
+export * from './tag-group.component';
 export { TagSize } from './index.constants';

package/dist/types/tag/tag-group.component.d.ts

@@ -0,0 +1,13 @@
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class TagGroup extends QuanticElement {
+    static meta: ComponentMeta;
+    ariaLabel: string | null;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'quantic-tag-group': TagGroup;
+    }
+}

package/dist/types/tag/tag-group.stories.d.ts

@@ -0,0 +1,34 @@
+import { TagSize } from './index.constants';
+interface Args {
+    label: string | undefined;
+    size: TagSize;
+    tags: string[];
+}
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        label: {
+            control: string;
+            description: string;
+        };
+        size: {
+            control: {
+                type: string;
+            };
+            options: ("sm" | "md" | "lg")[];
+            description: string;
+        };
+        tags: {
+            control: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: import("../shared/story").StoryObject<Args>;
+export declare const WithAccessibleName: import("../shared/story").StoryObject<Args>;
+export declare const Wrapping: import("../shared/story").StoryObject<Args>;
+export declare const Dismissible: import("../shared/story").StoryObject<object>;
+export declare const MixedTagTypes: import("../shared/story").StoryObject<object>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.82.0",
+  "version": "1.84.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
@@ -88,10 +88,11 @@
     "prebuild": "pnpm run prebuild:fonts && pnpm run prebuild:tokens && pnpm run prebuild:icons && pnpm run prebuild:astro",
     "postbuild:astro": "node scripts/fix-astro-dts.mjs",
     "postbuild:meta": "node scripts/gen-meta.mjs",
-    "build": "pnpm run prebuild:icons && pnpm run prebuild:astro && rollup -c && tsc -p tsconfig.json && pnpm run postbuild:astro && pnpm run postbuild:meta",
+    "build": "pnpm run clean && pnpm run prebuild:icons && pnpm run prebuild:astro && rollup -c && tsc -p tsconfig.json && pnpm run postbuild:astro && pnpm run postbuild:meta",
     "dev": "pnpm run prebuild:icons && pnpm run prebuild:astro && rollup -c -w",
     "typecheck": "pnpm run prebuild:icons && pnpm run prebuild:astro && tsc",
     "test": "vitest run",
-    "release": "semantic-release"
+    "release": "semantic-release",
+    "clean": "rm -rf dist"
   }
 }

package/dist/button-group/index.context.d.ts

@@ -1,4 +0,0 @@
-import { ButtonGroupSize } from './index.constants';
-export declare const sizeContext: {
-    __context__: ButtonGroupSize;
-};

package/dist/button-group/index.context.js

@@ -1,2 +0,0 @@
-import { createContext } from '@lit/context';
-export const sizeContext = createContext('button-group.size');

package/dist/button-group/index.stories.js

@@ -1,107 +0,0 @@
-import { story } from '../shared/story';
-import { ButtonGroupSize } from './index.constants';
-export default {
-    title: 'Components/Actions/Button Group',
-    component: 'quantic-button-group',
-    tags: ['autodocs'],
-    argTypes: {
-        size: {
-            control: { type: 'select' },
-            options: Object.values(ButtonGroupSize),
-            description: 'The size of the button group',
-        },
-        items: {
-            control: 'object',
-            description: 'Array of button labels',
-        },
-        activeIndex: {
-            control: 'number',
-            description: 'Index of the active button (optional)',
-        },
-    },
-};
-const base = story({
-    args: {
-        size: undefined,
-        items: ['Text', 'Text', 'Text'],
-        activeIndex: undefined,
-    },
-}).render(({ size, items, activeIndex }) => {
-    const sizeAttr = size ? `size="${size}"` : '';
-    const itemsHtml = items
-        .map((item, index) => `<quantic-button-group-item ${activeIndex === index ? 'active' : ''}>${item}</quantic-button-group-item>`)
-        .join('');
-    return `<quantic-button-group ${sizeAttr}>${itemsHtml}</quantic-button-group>`;
-});
-export const Default = base;
-export const Small = base.override({ size: ButtonGroupSize.Small });
-export const Medium = base.override({ size: ButtonGroupSize.Medium });
-export const Large = base.override({ size: ButtonGroupSize.Large });
-export const WithActiveItem = base.override({ activeIndex: 1 });
-export const ManyItems = base.override({
-    items: ['Text', 'Text', 'Text', 'Text', 'Text', 'Text', 'Text', 'Text'],
-});
-export const WithIcons = story().render(() => `
-    <quantic-button-group>
-      <quantic-button-group-item>
-        <quantic-icon-lucide-align-left size="xs"></quantic-icon-lucide-align-left>
-      </quantic-button-group-item>
-      <quantic-button-group-item active>
-        <quantic-icon-lucide-align-center size="xs"></quantic-icon-lucide-align-center>
-      </quantic-button-group-item>
-      <quantic-button-group-item>
-        <quantic-icon-lucide-align-right size="xs"></quantic-icon-lucide-align-right>
-      </quantic-button-group-item>
-    </quantic-button-group>
-  `);
-export const WithIconsAndText = story().render(() => `
-    <quantic-button-group>
-      <quantic-button-group-item>
-        <quantic-icon-lucide-chevron-left size="xs"></quantic-icon-lucide-chevron-left>
-      </quantic-button-group-item>
-      <quantic-button-group-item>
-        Text
-      </quantic-button-group-item>
-      <quantic-button-group-item active>
-        <quantic-icon-lucide-plus size="xs"></quantic-icon-lucide-plus>
-      </quantic-button-group-item>
-      <quantic-button-group-item>
-        <quantic-icon-lucide-chevron-right size="xs"></quantic-icon-lucide-chevron-right>
-      </quantic-button-group-item>
-    </quantic-button-group>
-  `);
-export const Disabled = story().render(() => `
-    <quantic-button-group>
-      <quantic-button-group-item>Text</quantic-button-group-item>
-      <quantic-button-group-item disabled>Disabled item</quantic-button-group-item>
-      <quantic-button-group-item>Text</quantic-button-group-item>
-    </quantic-button-group>
-  `);
-export const WithClickEvent = story({
-    args: { size: ButtonGroupSize.Medium, items: [], activeIndex: undefined },
-}).render(({ size }) => `
-    <div style="display: flex; flex-direction: column; gap: 16px;">
-      <quantic-button-group size="${size}">
-        <quantic-button-group-item onclick="handleClick('Option 1')">Option 1</quantic-button-group-item>
-        <quantic-button-group-item onclick="handleClick('Option 2')">Option 2</quantic-button-group-item>
-        <quantic-button-group-item onclick="handleClick('Option 3')">Option 3</quantic-button-group-item>
-      </quantic-button-group>
-      <quantic-card variant="solid" size="sm" id="output">
-        Click a button to see the event
-      </quantic-card>
-    </div>
-    <script>
-      function handleClick(option) {
-        document.getElementById('output').textContent = option + ' clicked at ' + new Date().toLocaleTimeString();
-      }
-    </script>
-  `);
-export const WithLongText = story().render(() => `
-    <quantic-button-group>
-      <quantic-button-group-item>Short</quantic-button-group-item>
-      <quantic-button-group-item>Text</quantic-button-group-item>
-      <quantic-button-group-item>This is a very long button text that should be clamped with ellipsis</quantic-button-group-item>
-      <quantic-button-group-item>Medium</quantic-button-group-item>
-      <quantic-button-group-item>Text</quantic-button-group-item>
-    </quantic-button-group>
-  `);

package/dist/types/button-group/index.context.d.ts

@@ -1,4 +0,0 @@
-import { ButtonGroupSize } from './index.constants';
-export declare const sizeContext: {
-    __context__: ButtonGroupSize;
-};