entasis 0.5.0 → 0.7.0

package/dist/components/AIAskUserQuestion/aiAskUserQuestion.theme.js

@@ -65,5 +65,5 @@ export const aiAskUserQuestionTheme = {
     title: defaultTitle,
     description: defaultDescription
 };
-export const setAIAskUserQuestionTheme = setComponentTheme('aiAskUserQuestion');
+export const setAIAskUserQuestionTheme = setComponentTheme('ai-ask-user-question');
 export const useAIAskUserQuestionTheme = useComponentTheme('aiAskUserQuestion', aiAskUserQuestionTheme);

package/dist/components/AIChat/aiChat.theme.js

@@ -27,5 +27,5 @@ export const aiChatTheme = {
     footer: defaultFooter,
     skeletonMessages: defaultSkeletonMessages
 };
-export const setAIChatTheme = setComponentTheme('aiChat');
-export const useAIChatTheme = useComponentTheme('aiChat', aiChatTheme);
+export const setAIChatTheme = setComponentTheme('ai-chat');
+export const useAIChatTheme = useComponentTheme('ai-chat', aiChatTheme);

package/dist/components/AIComposer/aiComposer.theme.js

@@ -85,5 +85,5 @@ export const aiComposerTheme = {
     queueItem: defaultQueueItem,
     queueText: defaultQueueText
 };
-export const setAIComposerTheme = setComponentTheme('aiComposer');
-export const useAIComposerTheme = useComponentTheme('aiComposer', aiComposerTheme);
+export const setAIComposerTheme = setComponentTheme('ai-composer');
+export const useAIComposerTheme = useComponentTheme('ai-composer', aiComposerTheme);

package/dist/components/AIContext/aiContext.theme.js

@@ -54,5 +54,5 @@ export const aiContextTheme = {
     rowLabel: defaultRowLabel,
     rowValue: defaultRowValue
 };
-export const setAIContextTheme = setComponentTheme('aiContext');
-export const useAIContextTheme = useComponentTheme('aiContext', aiContextTheme);
+export const setAIContextTheme = setComponentTheme('ai-context');
+export const useAIContextTheme = useComponentTheme('ai-context', aiContextTheme);

package/dist/components/AIFilePreview/aiFilePreview.theme.js

@@ -20,5 +20,5 @@ export const aiFilePreviewTheme = {
     meta: cva({ base: 'flex items-center gap-xs text-xs text-neutral/70' }),
     error: cva({ base: 'truncate text-xs text-danger-readable' })
 };
-export const setAIFilePreviewTheme = setComponentTheme('aiFilePreview');
+export const setAIFilePreviewTheme = setComponentTheme('ai-file-preview');
 export const useAIFilePreviewTheme = useComponentTheme('aiFilePreview', aiFilePreviewTheme);

package/dist/components/AIMarker/aiMarker.theme.js

@@ -25,5 +25,5 @@ export const aiMarkerTheme = {
     icon: defaultIcon,
     content: defaultContent
 };
-export const setAIMarkerTheme = setComponentTheme('aiMarker');
-export const useAIMarkerTheme = useComponentTheme('aiMarker', aiMarkerTheme);
+export const setAIMarkerTheme = setComponentTheme('ai-marker');
+export const useAIMarkerTheme = useComponentTheme('ai-marker', aiMarkerTheme);

package/dist/components/AIMessage/aiMessage.theme.js

@@ -128,5 +128,5 @@ export const aiMessageTheme = {
     files: defaultFiles,
     actions: defaultActions
 };
-export const setAIMessageTheme = setComponentTheme('aiMessage');
-export const useAIMessageTheme = useComponentTheme('aiMessage', aiMessageTheme);
+export const setAIMessageTheme = setComponentTheme('ai-message');
+export const useAIMessageTheme = useComponentTheme('ai-message', aiMessageTheme);

package/dist/components/AIMessageActions/aiMessageActions.theme.js

@@ -38,5 +38,5 @@ export const aiMessageActionsTheme = {
     button: defaultButton,
     error: defaultError
 };
-export const setAIMessageActionsTheme = setComponentTheme('aiMessageActions');
+export const setAIMessageActionsTheme = setComponentTheme('ai-message-actions');
 export const useAIMessageActionsTheme = useComponentTheme('aiMessageActions', aiMessageActionsTheme);

package/dist/components/AIModelSelector/aiModelSelector.theme.js

@@ -35,5 +35,5 @@ export const aiModelSelectorTheme = {
     group: defaultGroup,
     empty: defaultEmpty
 };
-export const setAIModelSelectorTheme = setComponentTheme('aiModelSelector');
+export const setAIModelSelectorTheme = setComponentTheme('ai-model-selector');
 export const useAIModelSelectorTheme = useComponentTheme('aiModelSelector', aiModelSelectorTheme);

package/dist/components/AIReasoning/aiReasoning.theme.js

@@ -17,5 +17,5 @@ export const aiReasoningTheme = {
     duration: defaultDuration,
     content: defaultContent
 };
-export const setAIReasoningTheme = setComponentTheme('aiReasoning');
+export const setAIReasoningTheme = setComponentTheme('ai-reasoning');
 export const useAIReasoningTheme = useComponentTheme('aiReasoning', aiReasoningTheme);

package/dist/components/AISuggestion/aiSuggestion.theme.js

@@ -7,5 +7,5 @@ export const aiSuggestionTheme = {
     list: defaultList,
     suggestion: defaultSuggestion
 };
-export const setAISuggestionTheme = setComponentTheme('aiSuggestion');
+export const setAISuggestionTheme = setComponentTheme('ai-suggestion');
 export const useAISuggestionTheme = useComponentTheme('aiSuggestion', aiSuggestionTheme);

package/dist/components/AIThread/aiThread.theme.js

@@ -60,5 +60,5 @@ export const aiThreadTheme = {
     tocOverlay: defaultTocOverlay,
     footer: defaultFooter
 };
-export const setAIThreadTheme = setComponentTheme('aiThread');
-export const useAIThreadTheme = useComponentTheme('aiThread', aiThreadTheme);
+export const setAIThreadTheme = setComponentTheme('ai-thread');
+export const useAIThreadTheme = useComponentTheme('ai-thread', aiThreadTheme);

package/dist/components/AIThreadToc/aiThreadToc.theme.js

@@ -84,5 +84,5 @@ export const aiThreadTocTheme = {
     previewMetadata: defaultPreviewMetadata,
     previewFiles: defaultPreviewFiles
 };
-export const setAIThreadTocTheme = setComponentTheme('aiThreadToc');
+export const setAIThreadTocTheme = setComponentTheme('ai-thread-toc');
 export const useAIThreadTocTheme = useComponentTheme('aiThreadToc', aiThreadTocTheme);

package/dist/components/AITool/aiTool.theme.js

@@ -310,5 +310,5 @@ export const aiToolTheme = {
     treeLeaf: defaultTreeLeaf,
     treeValue: defaultTreeValue
 };
-export const setAIToolTheme = setComponentTheme('aiTool');
-export const useAIToolTheme = useComponentTheme('aiTool', aiToolTheme);
+export const setAIToolTheme = setComponentTheme('ai-tool');
+export const useAIToolTheme = useComponentTheme('ai-tool', aiToolTheme);

package/dist/components/AudioPlayer/audioPlayer.theme.js

@@ -363,5 +363,5 @@ export const audioPlayerTheme = {
     volumeSlider: defaultAudioPlayerVolumeSlider,
     status: defaultAudioPlayerStatus
 };
-export const setAudioPlayerTheme = setComponentTheme('audioPlayer');
-export const useAudioPlayerTheme = useComponentTheme('audioPlayer', audioPlayerTheme);
+export const setAudioPlayerTheme = setComponentTheme('audio-player');
+export const useAudioPlayerTheme = useComponentTheme('audio-player', audioPlayerTheme);

package/dist/components/Avatar/avatarGroup.theme.js

@@ -30,5 +30,5 @@ export const avatarGroupTheme = {
     root: defaultAvatarGroup,
     avatarGroupCount: defaultAvatarGroupCount
 };
-export const setAvatarGroupTheme = setComponentTheme('avatarGroup');
+export const setAvatarGroupTheme = setComponentTheme('avatar-group');
 export const useAvatarGroupTheme = useComponentTheme('avatarGroup', avatarGroupTheme);

package/dist/components/Button/button.mcp.d.ts

@@ -1 +1 @@
-export declare const buttonDescription = "\n# Button Component\n\nThe Button component is a flexible and customizable button element that supports various variants, sizes, colors, and interactive states.\n\n## Basic Usage\n\n```svelte\n<Button>Click me</Button>\n<Button variant=\"outline\">Outline Button</Button>\n<Button color=\"primary\" size=\"large\">Large Primary Button</Button>\n```\n\n## Props\n\n### Core Props\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' (default: 'solid')\n  - solid: Filled background with color\n  - outline: Transparent background with colored border\n  - soft: Muted color background\n  - ghost: Transparent background with a transient state layer on hover and press\n  - link: Text-only styling with underline on hover\n\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'neutral')\n  - Determines the color scheme of the button\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: 24px height, smaller padding and text\n  - normal: 32px height, standard padding\n  - large: 36px height, larger padding and text\n\n### Layout Props\n- **fullWidth**: boolean (default: false) - Makes button take full width of container\n- **squared**: boolean - Makes button square (aspect-ratio 1:1), auto-determined if only prefix/suffix is provided\n- **disabled**: boolean (default: false) - Disables button interaction\n- **loading**: boolean (default: false) - Shows the Theme-configured loading spinner and disables interaction\n\n### State Props\nDescribe the meaning; the Button writes the ARIA. Never pass an aria-* attribute to a Button.\n- **pressed**: boolean - Toggle state of a button that stays on or off (a bold button in a toolbar, a \"show password\" eye). Rendered as aria-pressed\n- **selected**: boolean - Chosen state of a button acting as one option among several (a tab, a listbox option). Rendered as aria-selected\n- **expanded**: boolean - Whether the surface this button opens is showing. Rendered as aria-expanded. A entasis surface (Popover, PopupMenu, Select, Combobox) sets this on its own trigger, so pass it only for a surface you open yourself\n- **haspopup**: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | true - What the surface this button opens contains. Rendered as aria-haspopup, and likewise set by a entasis surface on its own trigger\n\n### Link Props\n- **href**: string - Makes button render as anchor tag\n- **target**: string - Link target (e.g., \"_blank\")\n- **rel**: string - Link relationship\n\n### Event Props\n- **onclick**: (event: MouseEvent) => void - Native click event handler\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter event handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave event handler\n\n### Content Props (Slots)\n- **children**: Snippet - Main button content\n- **prefix**: Snippet - Content before main text (typically icons)\n- **suffix**: Snippet - Content after main text (typically icons)\n\n### Advanced Props\n- **label**: string - Accessible label applied as aria-label on the root element (required for icon-only buttons)\n- **ref**: HTMLElement - Reference to the button element\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\nThe button follows this DOM structure:\n```\n<Button>\n\t<Prefix />    <!-- Optional prefix content -->\n\t<Children />  <!-- Main button content -->\n\t<Suffix />    <!-- Optional suffix content -->\n</Button>\n```\n\n## Examples\n\n### Basic Buttons\n```svelte\n<Button>Default Button</Button>\n<Button variant=\"outline\" color=\"primary\">Primary Outline</Button>\n<Button variant=\"soft\" color=\"danger\">Soft Danger</Button>\n<Button variant=\"ghost\">Ghost Button</Button>\n<Button variant=\"link\">Link Button</Button>\n```\n\n### With Icons\n```svelte\n<Button>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n\tAdd Item\n</Button>\n\n<Button squared>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n</Button>\n```\n\n### Interactive States\n```svelte\n<Button loading>Loading...</Button>\n<Button disabled>Disabled</Button>\n<Button fullWidth>Full Width Button</Button>\n```\n\n### As Link\n```svelte\n<Button href=\"/dashboard\" target=\"_blank\">Go to Dashboard</Button>\n```\n\n### With Event Handlers\n```svelte\n<script lang=\"ts\">\n\tfunction handleClick(event: MouseEvent) {\n\t\tconsole.log('Clicked:', event.currentTarget);\n\t}\n</script>\n\n<Button onclick={handleClick}>\n\tClick\n</Button>\n```\n\n### Custom Styling\n```svelte\n<Button class=\"lift-4 border-2\" color=\"primary\" variant=\"outline\">\n\tCustom Styled\n</Button>\n```\n\n## Accessibility\n\n- Automatically sets appropriate ARIA roles (button/link)\n- Supports keyboard navigation\n- Disabled state prevents interaction\n- Loading state provides visual feedback\n\n## Notes\n\n- When `href` is provided, renders as `<a>` tag, otherwise `<button>`\n- `squared` is automatically determined when only prefix or suffix is provided without children\n- All event handlers respect disabled state\n- Icon sizing is automatically adjusted based on button size\n\n## Theme Customization\n\nThe Button component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main button container styles\n- **prefix**: Styles for prefix content (icons before text)\n- **suffix**: Styles for suffix content (icons after text)\n\n### Theme Type Definition\n\n```typescript\nimport type { ButtonThemeProps } from 'entasis/button';\n\n// Example theme customization\nconst customTheme: ButtonThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    size: {\n      small: 'custom-small-classes',\n      normal: 'custom-normal-classes',\n      large: 'custom-large-classes'\n    },\n    color: {\n      primary: 'bg-blue-500 text-white',\n      danger: 'bg-red-500 text-white'\n    },\n    variant: {\n      solid: 'bg-color text-color-contrast',\n      outline: 'border-2 border-color'\n    }\n  },\n  prefix: {\n    size: {\n      small: 'w-3 h-3',\n      normal: 'w-4 h-4',\n      large: 'w-5 h-5'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all buttons\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls padding, text size, and height\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' - Visual style variant\n  - loading: boolean - Loading state styling\n  - disabled: boolean - Disabled state styling\n  - squared: boolean - Square button styling\n  - fullWidth: boolean - Full width styling\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Button \n  theme={{\n    root: {\n      base: 'rounded-full lift-4',\n      size: {\n        large: 'px-8 py-4 text-xl'\n      }\n    }\n  }}\n>\n  Custom Styled Button\n</Button>\n```\n\n**Color Variant Customization**:\n```svelte\n<Button \n  color=\"primary\"\n  theme={{\n    root: {\n      color: {\n        primary: 'state-layer bg-gradient-to-r from-blue-500 to-purple-500'\n      }\n    }\n  }}\n>\n  Gradient Button\n</Button>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setButtonTheme } from './index.ts';\n  \n  setButtonTheme({\n    root: {\n      variant: {\n        solid: 'state-layer bg-color text-color-contrast lift-3 hover:lift-4 transition-shadow',\n        outline: 'state-layer border-2 border-color'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'w-5 h-5'\n      }\n    }\n  });\n</script>\n```\n";
+export declare const buttonDescription = "\n# Button Component\n\nThe Button component is a flexible and customizable button element that supports various variants, sizes, colors, and interactive states.\n\n## Basic Usage\n\n```svelte\n<Button>Click me</Button>\n<Button variant=\"outline\">Outline Button</Button>\n<Button color=\"primary\" size=\"large\">Large Primary Button</Button>\n```\n\n## Props\n\n### Core Props\n- **variant**: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' (default: 'solid')\n  - solid: Filled background with color\n  - outline: Transparent background with colored border\n  - soft: Muted color background\n  - ghost: Transparent background with a transient state layer on hover and press\n  - link: Text-only styling with underline on hover\n\n- **color**: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' (default: 'neutral')\n  - Determines the color scheme of the button\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: 28px height, smaller padding and text\n  - normal: 32px height, standard padding\n  - large: 36px height, larger padding and text\n\n### Layout Props\n- **fullWidth**: boolean (default: false) - Makes button take full width of container\n- **squared**: boolean - Makes button square (aspect-ratio 1:1), auto-determined if only prefix/suffix is provided\n- **disabled**: boolean (default: false) - Disables button interaction\n- **loading**: boolean (default: false) - Shows the Theme-configured loading spinner and disables interaction\n\n### State Props\nDescribe the meaning; the Button writes the ARIA. Never pass an aria-* attribute to a Button.\n- **pressed**: boolean - Toggle state of a button that stays on or off (a bold button in a toolbar, a \"show password\" eye). Rendered as aria-pressed\n- **selected**: boolean - Chosen state of a button acting as one option among several (a tab, a listbox option). Rendered as aria-selected\n- **expanded**: boolean - Whether the surface this button opens is showing. Rendered as aria-expanded. A entasis surface (Popover, PopupMenu, Select, Combobox) sets this on its own trigger, so pass it only for a surface you open yourself\n- **haspopup**: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | true - What the surface this button opens contains. Rendered as aria-haspopup, and likewise set by a entasis surface on its own trigger\n\n### Link Props\n- **href**: string - Makes button render as anchor tag\n- **target**: string - Link target (e.g., \"_blank\")\n- **rel**: string - Link relationship\n\n### Event Props\n- **onclick**: (event: MouseEvent) => void - Native click event handler\n- **onpointerenter**: (event: PointerEvent) => void - Native pointer enter event handler\n- **onpointerleave**: (event: PointerEvent) => void - Native pointer leave event handler\n\n### Content Props (Slots)\n- **children**: Snippet - Main button content\n- **prefix**: Snippet - Content before main text (typically icons)\n- **suffix**: Snippet - Content after main text (typically icons)\n\n### Advanced Props\n- **label**: string - Accessible label applied as aria-label on the root element (required for icon-only buttons)\n- **ref**: HTMLElement - Reference to the button element\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\nThe button follows this DOM structure:\n```\n<Button>\n\t<Prefix />    <!-- Optional prefix content -->\n\t<Children />  <!-- Main button content -->\n\t<Suffix />    <!-- Optional suffix content -->\n</Button>\n```\n\n## Examples\n\n### Basic Buttons\n```svelte\n<Button>Default Button</Button>\n<Button variant=\"outline\" color=\"primary\">Primary Outline</Button>\n<Button variant=\"soft\" color=\"danger\">Soft Danger</Button>\n<Button variant=\"ghost\">Ghost Button</Button>\n<Button variant=\"link\">Link Button</Button>\n```\n\n### With Icons\n```svelte\n<Button>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n\tAdd Item\n</Button>\n\n<Button squared>\n\t{#snippet prefix()}\n\t\t{@render icon()}\n\t{/snippet}\n</Button>\n```\n\n### Interactive States\n```svelte\n<Button loading>Loading...</Button>\n<Button disabled>Disabled</Button>\n<Button fullWidth>Full Width Button</Button>\n```\n\n### As Link\n```svelte\n<Button href=\"/dashboard\" target=\"_blank\">Go to Dashboard</Button>\n```\n\n### With Event Handlers\n```svelte\n<script lang=\"ts\">\n\tfunction handleClick(event: MouseEvent) {\n\t\tconsole.log('Clicked:', event.currentTarget);\n\t}\n</script>\n\n<Button onclick={handleClick}>\n\tClick\n</Button>\n```\n\n### Custom Styling\n```svelte\n<Button class=\"lift-4 border-2\" color=\"primary\" variant=\"outline\">\n\tCustom Styled\n</Button>\n```\n\n## Accessibility\n\n- Automatically sets appropriate ARIA roles (button/link)\n- Supports keyboard navigation\n- Disabled state prevents interaction\n- Loading state provides visual feedback\n\n## Notes\n\n- When `href` is provided, renders as `<a>` tag, otherwise `<button>`\n- `squared` is automatically determined when only prefix or suffix is provided without children\n- All event handlers respect disabled state\n- Icon sizing is automatically adjusted based on button size\n\n## Theme Customization\n\nThe Button component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main button container styles\n- **prefix**: Styles for prefix content (icons before text)\n- **suffix**: Styles for suffix content (icons after text)\n\n### Theme Type Definition\n\n```typescript\nimport type { ButtonThemeProps } from 'entasis/button';\n\n// Example theme customization\nconst customTheme: ButtonThemeProps = {\n  root: {\n    base: 'custom-base-classes',\n    size: {\n      small: 'custom-small-classes',\n      normal: 'custom-normal-classes',\n      large: 'custom-large-classes'\n    },\n    color: {\n      primary: 'bg-blue-500 text-white',\n      danger: 'bg-red-500 text-white'\n    },\n    variant: {\n      solid: 'bg-color text-color-contrast',\n      outline: 'border-2 border-color'\n    }\n  },\n  prefix: {\n    size: {\n      small: 'w-3 h-3',\n      normal: 'w-4 h-4',\n      large: 'w-5 h-5'\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes applied to all buttons\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Controls padding, text size, and height\n  - color: 'primary' | 'secondary' | 'neutral' | 'danger' | 'success' | 'warning' | 'info' - Color scheme\n  - variant: 'solid' | 'outline' | 'soft' | 'ghost' | 'link' - Visual style variant\n  - loading: boolean - Loading state styling\n  - disabled: boolean - Disabled state styling\n  - squared: boolean - Square button styling\n  - fullWidth: boolean - Full width styling\n\n**prefix**:\n- base: Base classes for prefix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n**suffix**:\n- base: Base classes for suffix content\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size based on button size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Button \n  theme={{\n    root: {\n      base: 'rounded-full lift-4',\n      size: {\n        large: 'px-8 py-4 text-xl'\n      }\n    }\n  }}\n>\n  Custom Styled Button\n</Button>\n```\n\n**Color Variant Customization**:\n```svelte\n<Button \n  color=\"primary\"\n  theme={{\n    root: {\n      color: {\n        primary: 'state-layer bg-linear-to-r from-blue-500 to-purple-500'\n      }\n    }\n  }}\n>\n  Gradient Button\n</Button>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setButtonTheme } from './index.ts';\n  \n  setButtonTheme({\n    root: {\n      variant: {\n        solid: 'state-layer bg-color text-color-contrast lift-3 hover:lift-4 transition-shadow',\n        outline: 'state-layer border-2 border-color'\n      }\n    },\n    prefix: {\n      size: {\n        normal: 'w-5 h-5'\n      }\n    }\n  });\n</script>\n```\n";

package/dist/components/Button/button.mcp.js

@@ -25,7 +25,7 @@ The Button component is a flexible and customizable button element that supports
   - Determines the color scheme of the button
 
 - **size**: 'small' | 'normal' | 'large' (default: 'normal')
-  - small: 24px height, smaller padding and text
+  - small: 28px height, smaller padding and text
   - normal: 32px height, standard padding
   - large: 36px height, larger padding and text
 
@@ -239,7 +239,7 @@ const customTheme: ButtonThemeProps = {
   theme={{
     root: {
       color: {
-        primary: 'state-layer bg-gradient-to-r from-blue-500 to-purple-500'
+        primary: 'state-layer bg-linear-to-r from-blue-500 to-purple-500'
       }
     }
   }}

package/dist/components/ButtonGroup/buttonGroup.theme.js

@@ -9,5 +9,5 @@ const defaultButtonGroup = cva({
 export const buttonGroupTheme = {
     root: defaultButtonGroup
 };
-export const setButtonGroupTheme = setComponentTheme('buttonGroup');
+export const setButtonGroupTheme = setComponentTheme('button-group');
 export const useButtonGroupTheme = useComponentTheme('buttonGroup', buttonGroupTheme);

package/dist/components/DocumentViewer/documentViewer.theme.js

@@ -162,5 +162,5 @@ export const documentViewerTheme = {
 export const documentViewerScrollAreaTheme = {
     content: { base: 'h-full' }
 };
-export const setDocumentViewerTheme = setComponentTheme('documentViewer');
+export const setDocumentViewerTheme = setComponentTheme('document-viewer');
 export const useDocumentViewerTheme = useComponentTheme('documentViewer', documentViewerTheme);

package/dist/components/EventCalendar/eventCalendar.theme.js

@@ -186,5 +186,5 @@ export const eventCalendarTheme = {
     agendaDetails,
     resourceHeader
 };
-export const setEventCalendarTheme = setComponentTheme('eventCalendar');
+export const setEventCalendarTheme = setComponentTheme('event-calendar');
 export const useEventCalendarTheme = useComponentTheme('eventCalendar', eventCalendarTheme);

package/dist/components/Form/ColorInput/colorInput.theme.js

@@ -63,5 +63,5 @@ export const colorInputTheme = {
     popover: defaultPopover,
     swatch: defaultSwatch
 };
-export const setColorInputTheme = setComponentTheme('colorInput');
-export const useColorInputTheme = useComponentTheme('colorInput', colorInputTheme);
+export const setColorInputTheme = setComponentTheme('color-input');
+export const useColorInputTheme = useComponentTheme('color-input', colorInputTheme);

package/dist/components/Form/ColorPicker/colorPicker.theme.js

@@ -267,5 +267,5 @@ export const colorPickerTheme = {
     alphaInput: defaultAlphaInput,
     alphaSuffix: defaultAlphaSuffix
 };
-export const setColorPickerTheme = setComponentTheme('colorPicker');
-export const useColorPickerTheme = useComponentTheme('colorPicker', colorPickerTheme);
+export const setColorPickerTheme = setComponentTheme('color-picker');
+export const useColorPickerTheme = useComponentTheme('color-picker', colorPickerTheme);

package/dist/components/Form/DateInput/dateInput.theme.js

@@ -42,5 +42,5 @@ export const dateInputTheme = {
     inputContainer: defaultInputContainer,
     popover: defaultPopover
 };
-export const setDateInputTheme = setComponentTheme('dateInput');
-export const useDateInputTheme = useComponentTheme('dateInput', dateInputTheme);
+export const setDateInputTheme = setComponentTheme('date-input');
+export const useDateInputTheme = useComponentTheme('date-input', dateInputTheme);

package/dist/components/Form/DateSelector/dateSelector.theme.js

@@ -42,5 +42,5 @@ export const dateSelectorTheme = {
     preset: defaultPreset,
     calendar: defaultCalendar
 };
-export const setDateSelectorTheme = setComponentTheme('dateSelector');
+export const setDateSelectorTheme = setComponentTheme('date-selector');
 export const useDateSelectorTheme = useComponentTheme('dateSelector', dateSelectorTheme);

package/dist/components/Form/File/fileInput.theme.js

@@ -68,5 +68,5 @@ export const fileInputTheme = {
     fileList: defaultFileList,
     file: defaultFile
 };
-export const setFileInputTheme = setComponentTheme('fileInput');
-export const useFileInputTheme = useComponentTheme('fileInput', fileInputTheme);
+export const setFileInputTheme = setComponentTheme('file-input');
+export const useFileInputTheme = useComponentTheme('file-input', fileInputTheme);

package/dist/components/Form/Form/form.state.svelte.d.ts

@@ -553,9 +553,9 @@ export declare class FormState<I extends FormInputs = FormInputs> {
         disabled?: boolean | undefined;
         error?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         class?: string | undefined;
+        prefix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         size?: import("../../../types/theme.js").Sizes | undefined;
         value?: string | null | undefined;
-        prefix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         suffix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         name?: string | undefined;
         label?: import("../../Slot/slot.js").Slot<undefined> | undefined;
@@ -1324,9 +1324,9 @@ export declare class FormState<I extends FormInputs = FormInputs> {
         disabled?: boolean | undefined;
         error?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         class?: string | undefined;
+        prefix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         size?: import("../../../types/theme.js").Sizes | undefined;
         value?: string | null | undefined;
-        prefix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         suffix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         name?: string | undefined;
         label?: import("../../Slot/slot.js").Slot<undefined> | undefined;
@@ -2129,9 +2129,9 @@ export declare class FormState<I extends FormInputs = FormInputs> {
         disabled?: boolean | undefined;
         error?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         class?: string | undefined;
+        prefix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         size?: import("../../../types/theme.js").Sizes | undefined;
         value?: string | null | undefined;
-        prefix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         suffix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         name?: string | undefined;
         label?: import("../../Slot/slot.js").Slot<undefined> | undefined;
@@ -2900,9 +2900,9 @@ export declare class FormState<I extends FormInputs = FormInputs> {
         disabled?: boolean | undefined;
         error?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         class?: string | undefined;
+        prefix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         size?: import("../../../types/theme.js").Sizes | undefined;
         value?: string | null | undefined;
-        prefix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         suffix?: import("../../Slot/slot.js").Slot<undefined> | undefined;
         name?: string | undefined;
         label?: import("../../Slot/slot.js").Slot<undefined> | undefined;