@casinogate/ui 1.2.0 → 1.3.0

package/dist/assets/css/root.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -218,6 +218,9 @@
   .cgui\:\!m-0 {
     margin: calc(var(--cgui-spacing) * 0) !important;
   }
+  .cgui\:mx-auto {
+    margin-inline: auto;
+  }
   .cgui\:my-4 {
     margin-block: calc(var(--cgui-spacing) * 4);
   }
@@ -396,6 +399,9 @@
   .cgui\:w-11 {
     width: calc(var(--cgui-spacing) * 11);
   }
+  .cgui\:w-40 {
+    width: calc(var(--cgui-spacing) * 40);
+  }
   .cgui\:w-auto {
     width: auto;
   }
@@ -414,6 +420,9 @@
   .cgui\:max-w-44 {
     max-width: calc(var(--cgui-spacing) * 44);
   }
+  .cgui\:max-w-64 {
+    max-width: calc(var(--cgui-spacing) * 64);
+  }
   .cgui\:max-w-80 {
     max-width: calc(var(--cgui-spacing) * 80);
   }
@@ -423,6 +432,9 @@
   .cgui\:min-w-42 {
     min-width: calc(var(--cgui-spacing) * 42);
   }
+  .cgui\:min-w-px {
+    min-width: 1px;
+  }
   .cgui\:flex-1 {
     flex: 1;
   }
@@ -465,6 +477,9 @@
   .cgui\:flex-row {
     flex-direction: row;
   }
+  .cgui\:flex-row-reverse {
+    flex-direction: row-reverse;
+  }
   .cgui\:flex-wrap {
     flex-wrap: wrap;
   }
@@ -474,6 +489,9 @@
   .cgui\:items-stretch {
     align-items: stretch;
   }
+  .cgui\:justify-between {
+    justify-content: space-between;
+  }
   .cgui\:justify-center {
     justify-content: center;
   }
@@ -498,6 +516,9 @@
   .cgui\:gap-4 {
     gap: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:gap-12 {
+    gap: calc(var(--cgui-spacing) * 12);
+  }
   .cgui\:space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -715,6 +736,9 @@
   .cgui\:py-2\.5 {
     padding-block: calc(var(--cgui-spacing) * 2.5);
   }
+  .cgui\:py-4 {
+    padding-block: calc(var(--cgui-spacing) * 4);
+  }
   .cgui\:pt-4 {
     padding-top: calc(var(--cgui-spacing) * 4);
   }
@@ -844,6 +868,10 @@
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .cgui\:shadow-popover {
+    --tw-shadow: var(--cg-ui-shadow-popover);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .cgui\:shadow-segment-thumb {
     --tw-shadow: var(--cg-ui-shadow-segment-item);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -931,6 +959,11 @@
       }
     }
   }
+  .cgui\:group-data-\[compact\=true\]\/navigation\:py-3 {
+    &:is(:where(.cgui\:group\/navigation)[data-compact="true"] *) {
+      padding-block: calc(var(--cgui-spacing) * 3);
+    }
+  }
   .cgui\:placeholder\:text-fg-regular {
     &::placeholder {
       color: var(--cg-ui-palette-neutral-50);
@@ -1114,6 +1147,16 @@
       width: var(--app-shell-sidebar-collapsed-width);
     }
   }
+  .cgui\:data-\[compact\=false\]\:pl-10 {
+    &[data-compact="false"] {
+      padding-left: calc(var(--cgui-spacing) * 10);
+    }
+  }
+  .cgui\:data-\[compact\=true\]\:w-fit {
+    &[data-compact="true"] {
+      width: fit-content;
+    }
+  }
   .cgui\:data-\[disabled\]\:pointer-events-none {
     &[data-disabled] {
       pointer-events: none;
@@ -1209,6 +1252,16 @@
       color: var(--cg-ui-palette-neutral-50);
     }
   }
+  .cgui\:data-\[popover-content\]\:rounded-md {
+    &[data-popover-content] {
+      border-radius: calc(var(--cg-ui-number-md) * 1px);
+    }
+  }
+  .cgui\:data-\[popover-content\]\:bg-surface-darkest {
+    &[data-popover-content] {
+      background-color: var(--cg-ui-palette-neutral-100);
+    }
+  }
   .cgui\:data-\[selected\=\"\"\]\:border-stroke-primary {
     &[data-selected=""] {
       border-color: var(--cg-ui-palette-primary-80);
@@ -1314,6 +1367,13 @@
       border-color: var(--cg-ui-palette-primary-80);
     }
   }
+  .cgui\:data-\[compact\=false\]\:\[\&_\[data-slot\=\"trigger\"\]\]\:pl-0 {
+    &[data-compact="false"] {
+      & [data-slot="trigger"] {
+        padding-left: calc(var(--cgui-spacing) * 0);
+      }
+    }
+  }
   .cgui\:hover\:\[\&_\[data-slot\=icon\]\]\:text-icon-focus {
     &:hover {
       @media (hover: hover) {
@@ -1386,6 +1446,16 @@
       border-width: 0px;
     }
   }
+  .cgui\:\[data-disabled\]\:cursor-not-allowed {
+    &:is(data-disabled) {
+      cursor: not-allowed;
+    }
+  }
+  .cgui\:\[data-disabled\]\:opacity-50 {
+    &:is(data-disabled) {
+      opacity: 50%;
+    }
+  }
   .cgui\:\[\&\>\*\]\:focus-visible\:relative {
     &>* {
       &:focus-visible {
@@ -1497,6 +1567,7 @@
   --cg-ui-shadow-toast: 0px 0px 8px 0px hsla(0, 0%, 0%, 0.2);
   --cg-ui-shadow-switch-thumb: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.25);
   --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.1);
+  --cg-ui-shadow-popover: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
   --cg-ui-fz-base: 16;
   --cg-ui-fz-heading: calc(16 / var(--cg-ui-fz-base) * 1rem);
   --cg-ui-lh-heading: calc(22 / var(--cg-ui-fz-base) * 1rem);

package/dist/assets/css/theme.css

@@ -119,6 +119,7 @@
   --shadow-toast: var(--cg-ui-shadow-toast);
   --shadow-switch-thumb: var(--cg-ui-shadow-switch-thumb);
   --shadow-segment-thumb: var(--cg-ui-shadow-segment-item);
+  --shadow-popover: var(--cg-ui-shadow-popover);
 
   /* Font sizes, Line heights */
   --text-heading: var(--cg-ui-fz-heading);
@@ -198,6 +199,7 @@
   --cg-ui-shadow-toast: 0px 0px 8px 0px hsla(0, 0%, 0%, 0.2);
   --cg-ui-shadow-switch-thumb: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.25);
   --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.1);
+  --cg-ui-shadow-popover: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
 
   /* Font sizes, Line heights */
   --cg-ui-fz-base: 16;

package/dist/components/app-shell/components/app-shell.nav-bar.svelte

@@ -2,11 +2,11 @@
   type AppShellNavBarPropsWithoutHTML = WithElementRef<WithChild<{}>>;
 
   export type AppShellNavBarProps = AppShellNavBarPropsWithoutHTML &
-    Without<PrimitiveHeaderAttributes, AppShellNavBarPropsWithoutHTML>;
+    Without<PrimitiveElementAttributes, AppShellNavBarPropsWithoutHTML>;
 </script>
 
 <script lang="ts">
-  import type { PrimitiveHeaderAttributes } from '../../../internal/types/html-attributes.js';
+  import type { PrimitiveElementAttributes } from '../../../internal/types/html-attributes.js';
   import { cn, useId } from '../../../internal/utils/common.js';
   import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
   import { AppShellStylesContext } from '../styles.js';

package/dist/components/app-shell/components/app-shell.nav-bar.svelte.d.ts

@@ -1,6 +1,6 @@
 type AppShellNavBarPropsWithoutHTML = WithElementRef<WithChild<{}>>;
-export type AppShellNavBarProps = AppShellNavBarPropsWithoutHTML & Without<PrimitiveHeaderAttributes, AppShellNavBarPropsWithoutHTML>;
-import type { PrimitiveHeaderAttributes } from '../../../internal/types/html-attributes.js';
+export type AppShellNavBarProps = AppShellNavBarPropsWithoutHTML & Without<PrimitiveElementAttributes, AppShellNavBarPropsWithoutHTML>;
+import type { PrimitiveElementAttributes } from '../../../internal/types/html-attributes.js';
 import { type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
 declare const AppShell: import("svelte").Component<AppShellNavBarProps, {}, "ref">;
 type AppShell = ReturnType<typeof AppShell>;

package/dist/components/app-shell/components/app-shell.root.svelte

@@ -54,12 +54,8 @@
     header: box.with(() => header),
   });
 
-  $inspect(collapsed);
-
   const variants = $derived(appShellVariants({ layout, withBorder }));
 
-  $inspect(variants);
-
   AppShellStylesContext.set(box.with(() => variants));
 
   const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(variants.root(), className) }));

package/dist/components/app-shell/components/app-shell.svelte.js

@@ -15,6 +15,7 @@ const SLOT_ATTR_VALUES = {
     sidebarHead: 'sidebar-head',
     sidebarFooter: 'sidebar-footer',
     navBar: 'nav-bar',
+    navItem: 'nav-item',
 };
 export class AppShellRootState {
     static create(opts) {

package/dist/components/button-group/components/button-group.root.svelte

@@ -24,8 +24,6 @@
 
   const variants = $derived(buttonGroupStyles({ orientation }));
 
-  $inspect(orientation);
-
   ButtonGroupStylesContext.set(box.with(() => variants));
 </script>
 

package/dist/components/collapsible/collapsible.stories.svelte

@@ -3,13 +3,13 @@
   import type { Parameters } from '@storybook/sveltekit';
 
   import type { ComponentProps } from 'svelte';
-  import CollapsibleContent from './components/collapsaible.content.svelte';
   import CollapsibleRoot from './components/collapsaible.root.svelte';
-  import CollapsibleTrigger from './components/collapsaible.trigger.svelte';
+
+  import { CollapsiblePrimitive } from './index.js';
 
   const parameters: Parameters = {
     controls: {
-      include: ['open', 'disabled'],
+      include: ['open', 'disabled', 'variant', 'iconPosition'],
     },
   };
 
@@ -35,19 +35,35 @@
   const args: Args = {
     open: false,
     disabled: false,
+    variant: 'default',
+    iconPosition: 'end',
   };
 </script>
 
 {#snippet template(args: Args)}
-  <CollapsibleRoot {...args}>
-    <CollapsibleTrigger>Nisi nulla esse qui dolor</CollapsibleTrigger>
-    <CollapsibleContent>
+  <CollapsiblePrimitive.Root {...args}>
+    <CollapsiblePrimitive.Trigger>Nisi nulla esse qui dolor</CollapsiblePrimitive.Trigger>
+    <CollapsiblePrimitive.Content>
       Labore cupidatat nisi nostrud non laboris tempor velit. Commodo in sint ea fugiat ad ullamco labore. Laboris
       labore sunt nostrud labore aliqua. Consectetur nulla anim amet laborum ex sunt nisi do consectetur magna Lorem
       irure. Anim aute magna ad. Aliqua labore enim in quis. Eu exercitation cupidatat anim mollit ipsum eiusmod ex. Id
       exercitation nulla esse consequat incididunt tempor.
-    </CollapsibleContent>
-  </CollapsibleRoot>
+    </CollapsiblePrimitive.Content>
+  </CollapsiblePrimitive.Root>
 {/snippet}
 
 <Story name="Basic" {args} {template} {parameters} />
+
+<Story name="Without Icon" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <CollapsiblePrimitive.Root {...args}>
+      <CollapsiblePrimitive.Trigger icon={null}>Nisi nulla esse qui dolor</CollapsiblePrimitive.Trigger>
+      <CollapsiblePrimitive.Content>
+        Labore cupidatat nisi nostrud non laboris tempor velit. Commodo in sint ea fugiat ad ullamco labore. Laboris
+        labore sunt nostrud labore aliqua. Consectetur nulla anim amet laborum ex sunt nisi do consectetur magna Lorem
+        irure. Anim aute magna ad. Aliqua labore enim in quis. Eu exercitation cupidatat anim mollit ipsum eiusmod ex.
+        Id exercitation nulla esse consequat incididunt tempor.
+      </CollapsiblePrimitive.Content>
+    </CollapsiblePrimitive.Root>
+  {/snippet}
+</Story>

package/dist/components/collapsible/components/collapsaible.root.svelte

@@ -1,9 +1,13 @@
 <script lang="ts" module>
-  export type CollapsibleRootProps = CollapsibleRootPropsPrimitive;
+  export type CollapsibleRootProps = CollapsibleRootPropsPrimitive & CollapsibleVariantsProps;
 </script>
 
 <script lang="ts">
-  import { CollapsibleStylesContext, collapsibleVariants } from '../styles.js';
+  import {
+    CollapsibleStylesContext,
+    collapsibleVariants,
+    type CollapsibleVariantsProps,
+  } from '../styles.js';
   import { cn, useId } from '../../../internal/utils/common.js';
   import {
     Collapsible as CollapsiblePrimitive,
@@ -18,6 +22,8 @@
     id = useId(),
     disabled,
     class: className,
+    variant = 'default',
+    iconPosition = 'start',
     ...restProps
   }: CollapsibleRootProps = $props();
 
@@ -47,7 +53,7 @@
     group
   );
 
-  const variants = $derived(collapsibleVariants());
+  const variants = $derived(collapsibleVariants({ variant, iconPosition }));
 
   CollapsibleStylesContext.set(box.with(() => variants));
 

package/dist/components/collapsible/components/collapsaible.root.svelte.d.ts

@@ -1,5 +1,6 @@
-export type CollapsibleRootProps = CollapsibleRootPropsPrimitive;
-import { Collapsible as CollapsiblePrimitive, type CollapsibleRootProps as CollapsibleRootPropsPrimitive } from 'bits-ui';
-declare const Collapsaible: import("svelte").Component<CollapsiblePrimitive.RootProps, {}, "ref" | "open">;
+export type CollapsibleRootProps = CollapsibleRootPropsPrimitive & CollapsibleVariantsProps;
+import { type CollapsibleVariantsProps } from '../styles.js';
+import { type CollapsibleRootProps as CollapsibleRootPropsPrimitive } from 'bits-ui';
+declare const Collapsaible: import("svelte").Component<CollapsibleRootProps, {}, "ref" | "open">;
 type Collapsaible = ReturnType<typeof Collapsaible>;
 export default Collapsaible;

package/dist/components/collapsible/components/collapsaible.trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   export type CollapsibleTriggerProps = CollapsibleTriggerPropsPrimitive & {
-    icon?: Snippet;
+    icon?: Snippet | null;
   };
 </script>
 
@@ -34,13 +34,15 @@
       {@render childSnippet?.(childProps)}
     {:else}
       <button {...childProps.props}>
-        <span data-slot="icon" class={styles.current.icon()}>
-          {#if iconSnippet}
-            {@render iconSnippet?.()}
-          {:else}
-            <ChevronSmallRightIcon width={16} height={16} />
-          {/if}
-        </span>
+        {#if iconSnippet !== null}
+          <span data-slot="icon" class={styles.current.icon()}>
+            {#if iconSnippet}
+              {@render iconSnippet?.()}
+            {:else}
+              <ChevronSmallRightIcon width={16} height={16} />
+            {/if}
+          </span>
+        {/if}
 
         {@render childrenSnippet?.()}
       </button>

package/dist/components/collapsible/components/collapsaible.trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 export type CollapsibleTriggerProps = CollapsibleTriggerPropsPrimitive & {
-    icon?: Snippet;
+    icon?: Snippet | null;
 };
 import { type CollapsibleTriggerProps as CollapsibleTriggerPropsPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';

package/dist/components/collapsible/index.d.ts

@@ -2,7 +2,7 @@ import { type CollapsibleContentProps } from './components/collapsaible.content.
 import { type CollapsibleRootProps } from './components/collapsaible.root.svelte';
 import { type CollapsibleTriggerProps } from './components/collapsaible.trigger.svelte';
 export declare const CollapsiblePrimitive: {
-    Root: import("svelte").Component<import("bits-ui").CollapsibleRootProps, {}, "ref" | "open">;
+    Root: import("svelte").Component<CollapsibleRootProps, {}, "ref" | "open">;
     Trigger: import("svelte").Component<CollapsibleTriggerProps, {}, "ref">;
     Content: import("svelte").Component<import("bits-ui").CollapsibleContentProps, {}, "ref">;
 };

package/dist/components/collapsible/styles.d.ts

@@ -2,43 +2,67 @@ import { Context } from 'runed';
 import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
 export declare const collapsibleVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            content?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            icon?: import("tailwind-variants").ClassValue;
+    variant: {
+        default: {
+            root: string[];
+            trigger: string[];
+            icon: string[];
         };
+        clean: {};
     };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            content?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            icon?: import("tailwind-variants").ClassValue;
+    iconPosition: {
+        start: {
+            trigger: string[];
+        };
+        end: {
+            trigger: string[];
         };
     };
-} | {}, {
+}, {
     root: string[];
     trigger: string[];
     icon: string[];
     content: string[];
 }, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            content?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            trigger?: import("tailwind-variants").ClassValue;
-            icon?: import("tailwind-variants").ClassValue;
+    variant: {
+        default: {
+            root: string[];
+            trigger: string[];
+            icon: string[];
         };
+        clean: {};
     };
-} | {}, {
+    iconPosition: {
+        start: {
+            trigger: string[];
+        };
+        end: {
+            trigger: string[];
+        };
+    };
+}, {
     root: string[];
     trigger: string[];
     icon: string[];
     content: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            root: string[];
+            trigger: string[];
+            icon: string[];
+        };
+        clean: {};
+    };
+    iconPosition: {
+        start: {
+            trigger: string[];
+        };
+        end: {
+            trigger: string[];
+        };
+    };
+}, {
     root: string[];
     trigger: string[];
     icon: string[];
@@ -47,132 +71,36 @@ export declare const collapsibleVariants: import("tailwind-variants").TVReturnTy
 export type CollapsibleVariantsProps = VariantProps<typeof collapsibleVariants>;
 export declare const CollapsibleStylesContext: Context<ReadableBox<{
     root: (slotProps?: ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        variant?: "clean" | "default" | undefined;
+        iconPosition?: "end" | "start" | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
     trigger: (slotProps?: ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        variant?: "clean" | "default" | undefined;
+        iconPosition?: "end" | "start" | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
     icon: (slotProps?: ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        variant?: "clean" | "default" | undefined;
+        iconPosition?: "end" | "start" | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
     content: (slotProps?: ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        variant?: "clean" | "default" | undefined;
+        iconPosition?: "end" | "start" | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
 } & {
     root: (slotProps?: ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        variant?: "clean" | "default" | undefined;
+        iconPosition?: "end" | "start" | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
     trigger: (slotProps?: ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        variant?: "clean" | "default" | undefined;
+        iconPosition?: "end" | "start" | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
     icon: (slotProps?: ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        variant?: "clean" | "default" | undefined;
+        iconPosition?: "end" | "start" | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
     content: (slotProps?: ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
-        [x: string]: string | number | undefined;
-        [x: number]: string | number | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+        variant?: "clean" | "default" | undefined;
+        iconPosition?: "end" | "start" | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
 } & {}>>;