@ctrliq/quantic-components 1.82.0 → 1.83.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/astro.d.ts +3 -1
  2. package/dist/astro.js +3 -1
  3. package/dist/astro.js.map +1 -1
  4. package/dist/button/index.js +1 -1
  5. package/dist/button-bar/button-bar-item.d.ts +11 -0
  6. package/dist/button-bar/button-bar-item.js +191 -0
  7. package/dist/button-bar/button-bar.d.ts +11 -0
  8. package/dist/button-bar/button-bar.js +76 -0
  9. package/dist/button-bar/index.constants.d.ts +6 -0
  10. package/dist/button-bar/index.constants.js +5 -0
  11. package/dist/button-bar/index.context.d.ts +4 -0
  12. package/dist/button-bar/index.context.js +2 -0
  13. package/dist/button-bar/index.d.ts +3 -0
  14. package/dist/button-bar/index.js +3 -0
  15. package/dist/{types/button-group → button-bar}/index.stories.d.ts +2 -2
  16. package/dist/button-bar/index.stories.js +107 -0
  17. package/dist/button-group/button-group-item.d.ts +6 -8
  18. package/dist/button-group/button-group-item.js +11 -167
  19. package/dist/button-group/button-group.d.ts +9 -7
  20. package/dist/button-group/button-group.js +17 -58
  21. package/dist/button-group/index.constants.d.ts +4 -1
  22. package/dist/button-group/index.constants.js +3 -5
  23. package/dist/index.d.ts +1 -0
  24. package/dist/index.js +1 -0
  25. package/dist/index.js.map +1 -1
  26. package/dist/meta/index.js +4 -0
  27. package/dist/meta/index.js.map +1 -1
  28. package/dist/meta/serialize.js +1 -0
  29. package/dist/meta.json +92 -22
  30. package/dist/pagination/pagination.component.js +15 -15
  31. package/dist/quantic-components.js +131 -73
  32. package/dist/quantic-components.js.map +1 -1
  33. package/dist/quantic-components.min.js +148 -142
  34. package/dist/quantic-components.min.js.map +1 -1
  35. package/dist/register.js.map +1 -1
  36. package/dist/shared/meta.types.d.ts +4 -0
  37. package/dist/tabs/index.stories.js +1 -1
  38. package/dist/types/astro.d.ts +3 -1
  39. package/dist/types/button-bar/button-bar-item.d.ts +11 -0
  40. package/dist/types/button-bar/button-bar.d.ts +11 -0
  41. package/dist/types/button-bar/index.constants.d.ts +6 -0
  42. package/dist/types/button-bar/index.context.d.ts +4 -0
  43. package/dist/types/button-bar/index.d.ts +3 -0
  44. package/dist/{button-group → types/button-bar}/index.stories.d.ts +2 -2
  45. package/dist/types/button-group/button-group-item.d.ts +6 -8
  46. package/dist/types/button-group/button-group.d.ts +9 -7
  47. package/dist/types/button-group/index.constants.d.ts +4 -1
  48. package/dist/types/index.d.ts +1 -0
  49. package/dist/types/shared/meta.types.d.ts +4 -0
  50. package/package.json +1 -1
  51. package/dist/button-group/index.context.d.ts +0 -4
  52. package/dist/button-group/index.context.js +0 -2
  53. package/dist/button-group/index.stories.js +0 -107
  54. package/dist/types/button-group/index.context.d.ts +0 -4
package/dist/button-group/index.stories.js DELETED
@@ -1,107 +0,0 @@
1
- import { story } from '../shared/story';
2
- import { ButtonGroupSize } from './index.constants';
3
- export default {
4
- title: 'Components/Actions/Button Group',
5
- component: 'quantic-button-group',
6
- tags: ['autodocs'],
7
- argTypes: {
8
- size: {
9
- control: { type: 'select' },
10
- options: Object.values(ButtonGroupSize),
11
- description: 'The size of the button group',
12
- },
13
- items: {
14
- control: 'object',
15
- description: 'Array of button labels',
16
- },
17
- activeIndex: {
18
- control: 'number',
19
- description: 'Index of the active button (optional)',
20
- },
21
- },
22
- };
23
- const base = story({
24
- args: {
25
- size: undefined,
26
- items: ['Text', 'Text', 'Text'],
27
- activeIndex: undefined,
28
- },
29
- }).render(({ size, items, activeIndex }) => {
30
- const sizeAttr = size ? `size="${size}"` : '';
31
- const itemsHtml = items
32
- .map((item, index) => `<quantic-button-group-item ${activeIndex === index ? 'active' : ''}>${item}</quantic-button-group-item>`)
33
- .join('');
34
- return `<quantic-button-group ${sizeAttr}>${itemsHtml}</quantic-button-group>`;
35
- });
36
- export const Default = base;
37
- export const Small = base.override({ size: ButtonGroupSize.Small });
38
- export const Medium = base.override({ size: ButtonGroupSize.Medium });
39
- export const Large = base.override({ size: ButtonGroupSize.Large });
40
- export const WithActiveItem = base.override({ activeIndex: 1 });
41
- export const ManyItems = base.override({
42
- items: ['Text', 'Text', 'Text', 'Text', 'Text', 'Text', 'Text', 'Text'],
43
- });
44
- export const WithIcons = story().render(() => `
45
- <quantic-button-group>
46
- <quantic-button-group-item>
47
- <quantic-icon-lucide-align-left size="xs"></quantic-icon-lucide-align-left>
48
- </quantic-button-group-item>
49
- <quantic-button-group-item active>
50
- <quantic-icon-lucide-align-center size="xs"></quantic-icon-lucide-align-center>
51
- </quantic-button-group-item>
52
- <quantic-button-group-item>
53
- <quantic-icon-lucide-align-right size="xs"></quantic-icon-lucide-align-right>
54
- </quantic-button-group-item>
55
- </quantic-button-group>
56
- `);
57
- export const WithIconsAndText = story().render(() => `
58
- <quantic-button-group>
59
- <quantic-button-group-item>
60
- <quantic-icon-lucide-chevron-left size="xs"></quantic-icon-lucide-chevron-left>
61
- </quantic-button-group-item>
62
- <quantic-button-group-item>
63
- Text
64
- </quantic-button-group-item>
65
- <quantic-button-group-item active>
66
- <quantic-icon-lucide-plus size="xs"></quantic-icon-lucide-plus>
67
- </quantic-button-group-item>
68
- <quantic-button-group-item>
69
- <quantic-icon-lucide-chevron-right size="xs"></quantic-icon-lucide-chevron-right>
70
- </quantic-button-group-item>
71
- </quantic-button-group>
72
- `);
73
- export const Disabled = story().render(() => `
74
- <quantic-button-group>
75
- <quantic-button-group-item>Text</quantic-button-group-item>
76
- <quantic-button-group-item disabled>Disabled item</quantic-button-group-item>
77
- <quantic-button-group-item>Text</quantic-button-group-item>
78
- </quantic-button-group>
79
- `);
80
- export const WithClickEvent = story({
81
- args: { size: ButtonGroupSize.Medium, items: [], activeIndex: undefined },
82
- }).render(({ size }) => `
83
- <div style="display: flex; flex-direction: column; gap: 16px;">
84
- <quantic-button-group size="${size}">
85
- <quantic-button-group-item onclick="handleClick('Option 1')">Option 1</quantic-button-group-item>
86
- <quantic-button-group-item onclick="handleClick('Option 2')">Option 2</quantic-button-group-item>
87
- <quantic-button-group-item onclick="handleClick('Option 3')">Option 3</quantic-button-group-item>
88
- </quantic-button-group>
89
- <quantic-card variant="solid" size="sm" id="output">
90
- Click a button to see the event
91
- </quantic-card>
92
- </div>
93
- <script>
94
- function handleClick(option) {
95
- document.getElementById('output').textContent = option + ' clicked at ' + new Date().toLocaleTimeString();
96
- }
97
- </script>
98
- `);
99
- export const WithLongText = story().render(() => `
100
- <quantic-button-group>
101
- <quantic-button-group-item>Short</quantic-button-group-item>
102
- <quantic-button-group-item>Text</quantic-button-group-item>
103
- <quantic-button-group-item>This is a very long button text that should be clamped with ellipsis</quantic-button-group-item>
104
- <quantic-button-group-item>Medium</quantic-button-group-item>
105
- <quantic-button-group-item>Text</quantic-button-group-item>
106
- </quantic-button-group>
107
- `);
package/dist/types/button-group/index.context.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import { ButtonGroupSize } from './index.constants';
2
- export declare const sizeContext: {
3
- __context__: ButtonGroupSize;
4
- };