@getmicdrop/svelte-components 5.13.0 → 5.15.0

package/dist/patterns/chat/ChatSlotUpdate.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  /**
+   * ChatSlotUpdate - Slot/role change display
+   *
+   * Shows "{fromValue} → {toValue}" for role or slot changes.
+   */
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Original value */
+    fromValue: string;
+    /** New value */
+    toValue: string;
+    /** Style variant - bubble (in message context) or inline (in notice) */
+    variant?: 'bubble' | 'inline';
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    fromValue,
+    toValue,
+    variant = 'bubble',
+    outbound = false,
+    className = '',
+  }: Props = $props();
+
+  let classes = $derived(
+    variant === 'bubble'
+      ? classNames(
+          'px-4 py-2.5 rounded-2xl text-sm bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400',
+          outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+          className
+        )
+      : classNames(
+          'text-xs font-medium text-gray-500 dark:text-gray-400',
+          className
+        )
+  );
+</script>
+
+<span class={classes}>
+  {fromValue} → {toValue}
+</span>

package/dist/patterns/chat/ChatSlotUpdate.svelte.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    /** Original value */
+    fromValue: string;
+    /** New value */
+    toValue: string;
+    /** Style variant - bubble (in message context) or inline (in notice) */
+    variant?: 'bubble' | 'inline';
+    /** Whether this is outbound (right side) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ChatSlotUpdate: import("svelte").Component<Props, {}, "">;
+type ChatSlotUpdate = ReturnType<typeof ChatSlotUpdate>;
+export default ChatSlotUpdate;
+//# sourceMappingURL=ChatSlotUpdate.svelte.d.ts.map

package/dist/patterns/chat/ChatSlotUpdate.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatSlotUpdate.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatSlotUpdate.svelte.ts"],"names":[],"mappings":"AAWE,UAAU,KAAK;IACb,qBAAqB;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/patterns/chat/ChatStatusBadge.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  /**
+   * ChatStatusBadge - Status indicator for chat activity feeds
+   *
+   * Displays status changes (Confirmed, Declined, Invited, etc.) with
+   * appropriate colors and icons in a pill/badge format.
+   */
+  import type { Snippet, Component } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  type StatusType = 'confirmed' | 'declined' | 'canceled' | 'invited' | 'pending' | string;
+
+  interface Props {
+    /** Status value */
+    status: StatusType;
+    /** Show as outbound style (right-aligned context) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional custom icon */
+    icon?: Snippet;
+  }
+
+  let {
+    status,
+    outbound = false,
+    className = '',
+    icon,
+  }: Props = $props();
+
+  interface StatusStyle {
+    textColor: string;
+    bgColor: string;
+    icon: Component<{ class?: string }> | null;
+  }
+
+  function getStatusStyle(s: string): StatusStyle {
+    switch (s?.toLowerCase()) {
+      case 'confirmed':
+        return {
+          textColor: 'text-green-600',
+          bgColor: 'bg-green-50 dark:bg-green-900/20',
+          icon: CheckmarkFilled,
+        };
+      case 'declined':
+      case 'canceled':
+        return {
+          textColor: 'text-red-600',
+          bgColor: 'bg-red-50 dark:bg-red-900/20',
+          icon: CloseFilled,
+        };
+      case 'invited':
+        return {
+          textColor: 'text-blue-600',
+          bgColor: 'bg-blue-50 dark:bg-blue-900/20',
+          icon: SendAltFilled,
+        };
+      default:
+        return {
+          textColor: 'text-gray-600',
+          bgColor: 'bg-gray-100 dark:bg-gray-800',
+          icon: null,
+        };
+    }
+  }
+
+  let style = $derived(getStatusStyle(status));
+
+  let badgeClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm font-medium flex items-center gap-1.5',
+      style.bgColor,
+      style.textColor,
+      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={badgeClasses}>
+  {#if icon}
+    {@render icon()}
+  {:else if style.icon}
+    {@const IconComponent = style.icon}
+    <IconComponent class="w-4 h-4" />
+  {/if}
+  <span class="capitalize">{status}</span>
+</div>

package/dist/patterns/chat/ChatStatusBadge.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+   * ChatStatusBadge - Status indicator for chat activity feeds
+   *
+   * Displays status changes (Confirmed, Declined, Invited, etc.) with
+   * appropriate colors and icons in a pill/badge format.
+   */
+import type { Snippet, Component } from 'svelte';
+type StatusType = 'confirmed' | 'declined' | 'canceled' | 'invited' | 'pending' | string;
+interface Props {
+    /** Status value */
+    status: StatusType;
+    /** Show as outbound style (right-aligned context) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional custom icon */
+    icon?: Snippet;
+}
+declare const ChatStatusBadge: Component<Props, {}, "">;
+type ChatStatusBadge = ReturnType<typeof ChatStatusBadge>;
+export default ChatStatusBadge;
+//# sourceMappingURL=ChatStatusBadge.svelte.d.ts.map

package/dist/patterns/chat/ChatStatusBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatStatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAO/C,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzF,UAAU,KAAK;IACb,mBAAmB;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAgFH,QAAA,MAAM,eAAe,0BAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/patterns/chat/ChatStatusTransition.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  /**
+   * ChatStatusTransition - Status change display with icons
+   *
+   * Shows "{fromStatus} → {toStatus}" with colored icons for each status.
+   * Used in activity notices to show silent status changes.
+   */
+  import type { Component } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  interface Props {
+    /** Original status */
+    fromStatus: string;
+    /** New status */
+    toStatus: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    fromStatus,
+    toStatus,
+    className = '',
+  }: Props = $props();
+
+  interface StatusStyle {
+    color: string;
+    icon: Component<{ class?: string }> | null;
+  }
+
+  function getStatusStyle(status: string): StatusStyle {
+    switch (status?.toLowerCase()) {
+      case 'confirmed':
+        return { color: 'text-green-600', icon: CheckmarkFilled };
+      case 'declined':
+      case 'canceled':
+        return { color: 'text-red-600', icon: CloseFilled };
+      case 'invited':
+        return { color: 'text-blue-600', icon: SendAltFilled };
+      default:
+        return { color: 'text-gray-600', icon: null };
+    }
+  }
+
+  let fromStyle = $derived(getStatusStyle(fromStatus));
+  let toStyle = $derived(getStatusStyle(toStatus));
+</script>
+
+<span class={classNames('text-xs font-medium flex items-center gap-1', className)}>
+  {#if fromStyle.icon}
+    {@const FromIcon = fromStyle.icon}
+    <FromIcon class="w-3 h-3 {fromStyle.color}" />
+  {/if}
+  <span class={fromStyle.color}>{fromStatus}</span>
+  <span class="text-gray-400 mx-1">→</span>
+  {#if toStyle.icon}
+    {@const ToIcon = toStyle.icon}
+    <ToIcon class="w-3 h-3 {toStyle.color}" />
+  {/if}
+  <span class={toStyle.color}>{toStatus}</span>
+</span>

package/dist/patterns/chat/ChatStatusTransition.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+   * ChatStatusTransition - Status change display with icons
+   *
+   * Shows "{fromStatus} → {toStatus}" with colored icons for each status.
+   * Used in activity notices to show silent status changes.
+   */
+import type { Component } from 'svelte';
+interface Props {
+    /** Original status */
+    fromStatus: string;
+    /** New status */
+    toStatus: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ChatStatusTransition: Component<Props, {}, "">;
+type ChatStatusTransition = ReturnType<typeof ChatStatusTransition>;
+export default ChatStatusTransition;
+//# sourceMappingURL=ChatStatusTransition.svelte.d.ts.map

package/dist/patterns/chat/ChatStatusTransition.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatStatusTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatStatusTransition.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAOtC,UAAU,KAAK;IACb,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwDH,QAAA,MAAM,oBAAoB,0BAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/patterns/chat/ChatTextBubble.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  /**
+   * ChatTextBubble - Simple text bubble without the full ChatBubble wrapper
+   *
+   * Just the bubble itself, for use within ChatMessageGroup or other contexts
+   * where you don't need avatar/timestamp handling.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Direction - inbound (gray) or outbound (blue) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children?: Snippet;
+  }
+
+  let {
+    direction = 'inbound',
+    className = '',
+    children,
+  }: Props = $props();
+
+  let isOutbound = $derived(direction === 'outbound');
+
+  let bubbleClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm',
+      isOutbound
+        ? 'bg-blue-600 text-white rounded-br-sm'
+        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={bubbleClasses}>
+  {@render children?.()}
+</div>

package/dist/patterns/chat/ChatTextBubble.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+   * ChatTextBubble - Simple text bubble without the full ChatBubble wrapper
+   *
+   * Just the bubble itself, for use within ChatMessageGroup or other contexts
+   * where you don't need avatar/timestamp handling.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Direction - inbound (gray) or outbound (blue) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children?: Snippet;
+}
+declare const ChatTextBubble: import("svelte").Component<Props, {}, "">;
+type ChatTextBubble = ReturnType<typeof ChatTextBubble>;
+export default ChatTextBubble;
+//# sourceMappingURL=ChatTextBubble.svelte.d.ts.map

package/dist/patterns/chat/ChatTextBubble.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTextBubble.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatTextBubble.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,oDAAoD;IACpD,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACnC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgCH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/patterns/chat/index.d.ts

@@ -0,0 +1,12 @@
+export { default as ChatContainer } from "./ChatContainer.svelte";
+export { default as ChatMessageGroup } from "./ChatMessageGroup.svelte";
+export { default as ChatBubble } from "./ChatBubble.svelte";
+export { default as ChatTextBubble } from "./ChatTextBubble.svelte";
+export { default as ChatInvitationBubble } from "./ChatInvitationBubble.svelte";
+export { default as ChatStatusBadge } from "./ChatStatusBadge.svelte";
+export { default as ChatStatusTransition } from "./ChatStatusTransition.svelte";
+export { default as ChatSlotUpdate } from "./ChatSlotUpdate.svelte";
+export { default as ChatDateDivider } from "./ChatDateDivider.svelte";
+export { default as ChatActivityNotice } from "./ChatActivityNotice.svelte";
+export { default as ChatInvitationNotice } from "./ChatInvitationNotice.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/chat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/index.js"],"names":[],"mappings":""}

package/dist/patterns/chat/index.js

@@ -0,0 +1,22 @@
+// =============================================================================
+// CHAT PATTERNS - Chat interface components
+// =============================================================================
+
+// Core layout
+export { default as ChatContainer } from './ChatContainer.svelte';
+export { default as ChatMessageGroup } from './ChatMessageGroup.svelte';
+
+// Message bubbles
+export { default as ChatBubble } from './ChatBubble.svelte';
+export { default as ChatTextBubble } from './ChatTextBubble.svelte';
+export { default as ChatInvitationBubble } from './ChatInvitationBubble.svelte';
+
+// Status displays
+export { default as ChatStatusBadge } from './ChatStatusBadge.svelte';
+export { default as ChatStatusTransition } from './ChatStatusTransition.svelte';
+export { default as ChatSlotUpdate } from './ChatSlotUpdate.svelte';
+
+// Dividers and notices
+export { default as ChatDateDivider } from './ChatDateDivider.svelte';
+export { default as ChatActivityNotice } from './ChatActivityNotice.svelte';
+export { default as ChatInvitationNotice } from './ChatInvitationNotice.svelte';

package/dist/patterns/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./chat/index.js";
 export * from "./forms/index.js";
 export * from "./navigation/index.js";
 export * from "./page/index.js";

package/dist/patterns/index.js

@@ -2,6 +2,9 @@
 // PATTERNS - Layout & flow components (Layer 3)
 // =============================================================================
 
+// Chat - re-export from chat/index.js
+export * from './chat/index.js';
+
 // Forms - re-export from forms/index.js
 export * from './forms/index.js';
 

package/dist/primitives/Button/Button.spec.js

@@ -103,54 +103,56 @@ describe('Button Sizes', () => {
   test('Full width size', () => {
     const { button } = setupTest({ size: 'full' });
     expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('h-11');
     expect(button).toHaveClass('px-5');
-    expect(button).toHaveClass('py-3');
   });
 
   test('Full width on mobile, auto on desktop', () => {
     const { button } = setupTest({ size: 'full-md-auto' });
     expect(button).toHaveClass('w-full');
+    expect(button).toHaveClass('h-11');
     expect(button).toHaveClass('md:w-auto');
   });
 
   test('XL size', () => {
     const { button } = setupTest({ size: 'xl' });
+    expect(button).toHaveClass('h-12');
     expect(button).toHaveClass('px-6');
-    expect(button).toHaveClass('py-3.5');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Large size', () => {
     const { button } = setupTest({ size: 'lg' });
+    expect(button).toHaveClass('h-11');
     expect(button).toHaveClass('px-5');
-    expect(button).toHaveClass('py-3');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Medium size (default)', () => {
     const { button } = setupTest({ size: 'md' });
+    expect(button).toHaveClass('h-10');
     expect(button).toHaveClass('px-4');
-    expect(button).toHaveClass('py-2.5');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Small size', () => {
     const { button } = setupTest({ size: 'sm' });
+    expect(button).toHaveClass('h-9');
     expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('py-2');
     expect(button).toHaveClass('text-sm');
   });
 
   test('Extra small size', () => {
     const { button } = setupTest({ size: 'xs' });
+    expect(button).toHaveClass('h-8');
     expect(button).toHaveClass('px-3');
-    expect(button).toHaveClass('py-1.5');
     expect(button).toHaveClass('text-xs');
   });
 
   test('Half width size', () => {
     const { button } = setupTest({ size: 'half' });
     expect(button).toHaveClass('w-1/2');
+    expect(button).toHaveClass('h-10');
   });
 });
 

package/dist/primitives/Input/Input.svelte

@@ -342,7 +342,7 @@
     {:else}
       <div class="relative flex items-center w-full">
         {#if leftIcon}
-          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
+          <div class="absolute left-3 inset-y-0 flex items-center text-gray-400 z-10 pointer-events-none">
             {@render leftIcon()}
           </div>
         {/if}

package/dist/recipes/ImageUploader/ImageUploader.svelte

@@ -627,7 +627,7 @@
     {:else}
       <!-- Empty dropzone with direct drag-drop support -->
       <div
-        class="{shapeAspects[shape]} filepond-wrapper-single {shape === 'wide' ? 'filepond-wide' : ''}
+        class="{shapeAspects[shape]} filepond-wrapper-single rounded-xl {shape === 'wide' ? 'filepond-wide' : ''}
           {isDropzoneDragOver ? 'dropzone-drag-over' : ''}"
         role="button"
         tabindex="0"
@@ -883,7 +883,6 @@
   /* Single mode dropzone styling */
   .filepond-wrapper-single {
     border: 2px dashed rgb(209 213 219); /* gray-300 */
-    border-radius: 0.75rem; /* rounded-xl */
     background-color: rgb(249 250 251); /* gray-50 */
     transition-property: color, background-color, border-color;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/dist/tokens/__tests__/sizing.test.js

@@ -22,9 +22,8 @@ describe('sizing tokens', () => {
             expect(formInputSizes.md).toContain('h-10');
             expect(formInputSizes.lg).toContain('h-12');
         });
-        it('includes padding and text size classes', () => {
+        it('includes horizontal padding and text size classes', () => {
             for (const size of Object.values(formInputSizes)) {
-                expect(size).toMatch(/py-\d/);
                 expect(size).toMatch(/px-\d/);
                 expect(size).toMatch(/text-(sm|base)/);
             }
@@ -39,14 +38,13 @@ describe('sizing tokens', () => {
             expect(formControlSizes).toHaveProperty('md');
             expect(formControlSizes).toHaveProperty('lg');
         });
-        it('does NOT include height classes (for flexible controls)', () => {
+        it('includes explicit height classes for toolbar alignment', () => {
             for (const size of Object.values(formControlSizes)) {
-                expect(size).not.toMatch(/h-\d/);
+                expect(size).toMatch(/h-\d+/);
             }
         });
         it('includes padding and text size classes', () => {
             for (const size of Object.values(formControlSizes)) {
-                expect(size).toMatch(/py-\d/);
                 expect(size).toMatch(/px-\d/);
                 expect(size).toMatch(/text-(sm|base)/);
             }
@@ -170,11 +168,11 @@ describe('sizing tokens', () => {
             expect(buttonSizes).toHaveProperty('full-md-auto');
             expect(buttonSizes).toHaveProperty('half');
         });
-        it('standard sizes include padding and text sizing', () => {
+        it('standard sizes include explicit height, padding and text sizing', () => {
             const standardSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
             for (const size of standardSizes) {
+                expect(buttonSizes[size]).toMatch(/h-\d+/);
                 expect(buttonSizes[size]).toMatch(/px-\d/);
-                expect(buttonSizes[size]).toMatch(/py-\d/);
                 expect(buttonSizes[size]).toMatch(/text-(xs|sm)/);
             }
         });

package/dist/tokens/sizing.d.ts

@@ -6,21 +6,21 @@
  */
 /**
  * Form input sizes - for Input component with fixed heights
- * Provides consistent height, padding, and text sizing for text inputs.
+ * Uses explicit heights for consistent toolbar alignment.
  */
 export declare const formInputSizes: {
-    readonly sm: "py-2 px-3 text-sm h-9";
-    readonly md: "py-2.5 px-4 text-sm h-10";
-    readonly lg: "py-3 px-4 text-base h-12";
+    readonly sm: "h-9 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly lg: "h-12 px-4 text-base";
 };
 /**
- * Form control sizes - for Select and other form controls without fixed heights
- * Provides consistent padding and text sizing.
+ * Form control sizes - for Select and other form controls
+ * Uses explicit heights to match buttons and inputs for toolbar alignment.
  */
 export declare const formControlSizes: {
-    readonly sm: "py-2 px-3 text-sm";
-    readonly md: "py-2.5 px-4 text-sm";
-    readonly lg: "py-3 px-4 text-base";
+    readonly sm: "h-9 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly lg: "h-12 px-4 text-base";
 };
 export type FormInputSize = keyof typeof formInputSizes;
 export type FormControlSize = keyof typeof formControlSizes;
@@ -63,18 +63,19 @@ export declare const skeletonSizes: {
 };
 export type SkeletonSize = keyof typeof skeletonSizes;
 /**
- * Standard button sizes - padding and text sizing.
+ * Standard button sizes - padding, text sizing, and explicit heights for consistency.
+ * All toolbar elements (buttons, inputs, selects) should align at the same height.
  */
 export declare const buttonSizes: {
-    readonly xs: "px-3 py-1.5 text-xs";
-    readonly sm: "px-3 py-2 text-sm";
-    readonly md: "px-4 py-2.5 text-sm";
-    readonly lg: "px-5 py-3 text-sm";
-    readonly xl: "px-6 py-3.5 text-sm";
-    readonly 'xl-medium': "w-full px-6 py-3.5 text-sm";
-    readonly full: "w-full px-5 py-3 text-sm";
-    readonly 'full-md-auto': "w-full px-5 py-3 text-sm md:w-auto";
-    readonly half: "w-1/2 px-4 py-2.5 text-sm";
+    readonly xs: "h-8 px-3 text-xs";
+    readonly sm: "h-9 px-3 text-sm";
+    readonly md: "h-10 px-4 text-sm";
+    readonly lg: "h-11 px-5 text-sm";
+    readonly xl: "h-12 px-6 text-sm";
+    readonly 'xl-medium': "w-full h-12 px-6 text-sm";
+    readonly full: "w-full h-11 px-5 text-sm";
+    readonly 'full-md-auto': "w-full h-11 px-5 text-sm md:w-auto";
+    readonly half: "w-1/2 h-10 px-4 text-sm";
     readonly landing: "h-12 sm:h-14 px-6 sm:px-8 text-base sm:text-lg";
 };
 /**

package/dist/tokens/sizing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/sizing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,CAItE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAM3D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAMtD;;GAEG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAYd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC"}
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../src/lib/tokens/sizing.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;CAIjB,CAAC;AAEX;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,cAAc,CAAC;AACxD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAM5D;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,UAAU,CAItE,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAM3D;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,aAAa,CAAC;AAMtD;;;GAGG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;CAYd,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;CAKlB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;CAKtB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAClD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,MAAM,OAAO,iBAAiB,CAAC;AAC9D,MAAM,MAAM,kBAAkB,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAClE,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,eAAe,CAAC"}