@casinogate/ui 1.6.1 → 1.7.0

package/dist/components/dropdown/types.d.ts

@@ -0,0 +1,62 @@
+import type { DropdownMenuContentProps as DropdownMenuContentPropsPrimitive, DropdownMenuGroupHeadingProps as DropdownMenuGroupHeadingPropsPrimitive, DropdownMenuGroupProps as DropdownMenuGroupPropsPrimitive, DropdownMenuItemProps as DropdownMenuItemPropsPrimitive, DropdownMenuPortalProps as DropdownMenuPortalPropsPrimitive, DropdownMenuRootProps as DropdownMenuRootPropsPrimitive, DropdownMenuSeparatorProps as DropdownMenuSeparatorPropsPrimitive, DropdownMenuSubContentProps as DropdownMenuSubContentPropsPrimitive, DropdownMenuSubProps as DropdownMenuSubPropsPrimitive, DropdownMenuSubTriggerProps as DropdownMenuSubTriggerPropsPrimitive, DropdownMenuTriggerProps as DropdownMenuTriggerPropsPrimitive } from 'bits-ui';
+import type { ExtractPrimitiveEvents, PrimitiveAnchorAttributes, PrimitiveButtonAttributes } from '../../internal/types/html-attributes.js';
+import type { Component, Snippet } from 'svelte';
+import type { DropdownContentVariantsProps, DropdownGroupHeadingVariantsProps, DropdownGroupVariantsProps, DropdownItemVariantsProps, DropdownSeparatorVariantsProps, DropdownSubContentVariantsProps, DropdownSubTriggerVariantsProps, DropdownTriggerVariantsProps } from './styles.js';
+export type DropdownRootProps = DropdownMenuRootPropsPrimitive;
+export type DropdownTriggerProps = DropdownMenuTriggerPropsPrimitive & DropdownTriggerVariantsProps;
+export type DropdownContentProps = DropdownMenuContentPropsPrimitive & DropdownContentVariantsProps;
+export type DropdownGroupProps = DropdownMenuGroupPropsPrimitive & DropdownGroupVariantsProps;
+export type DropdownItemProps = DropdownMenuItemPropsPrimitive & DropdownItemVariantsProps;
+export type DropdownSubProps = DropdownMenuSubPropsPrimitive;
+export type DropdownSubTriggerProps = DropdownMenuSubTriggerPropsPrimitive & DropdownSubTriggerVariantsProps;
+export type DropdownSubContentProps = DropdownMenuSubContentPropsPrimitive & DropdownSubContentVariantsProps;
+export type DropdownPortalProps = DropdownMenuPortalPropsPrimitive;
+export type DropdownGroupHeadingProps = DropdownMenuGroupHeadingPropsPrimitive & DropdownGroupHeadingVariantsProps;
+export type DropdownSeparatorProps = DropdownMenuSeparatorPropsPrimitive & DropdownSeparatorVariantsProps;
+export type DropdownItemBaseValue = {
+    key: string | number;
+    label: string;
+    icon?: Component<{
+        width?: number;
+        height?: number;
+    }>;
+    disabled?: boolean;
+    onSelect?: () => void;
+    textValue?: string;
+    closeOnSelect?: boolean;
+};
+export type DropdownItemLinkValue = DropdownItemBaseValue & {
+    type: 'link';
+    href: string;
+} & Partial<ExtractPrimitiveEvents<PrimitiveAnchorAttributes>>;
+export type DropdownItemActionValue = DropdownItemBaseValue & {
+    type: 'action';
+} & Partial<ExtractPrimitiveEvents<PrimitiveButtonAttributes>>;
+export type DropdownItemSubValue = DropdownItemBaseValue & {
+    type: 'sub';
+    children: (DropdownItemLinkValue | DropdownItemActionValue)[];
+};
+export type DropdownSingleItemValue = DropdownItemLinkValue | DropdownItemActionValue | DropdownItemSubValue;
+export type DropdownGroupItemValue = {
+    key: string | number;
+    type: 'group';
+    heading?: string;
+    items: DropdownSingleItemValue[];
+};
+export type DropdownSeparatorItemValue = {
+    key: string | number;
+    type: 'separator';
+};
+export type DropdownItemValue = DropdownSingleItemValue | DropdownGroupItemValue | DropdownSeparatorItemValue;
+export type DropdownProps = DropdownRootProps & {
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]> | string;
+    item?: Snippet<[{
+        item: DropdownSingleItemValue;
+        props: Record<string, unknown>;
+    }]>;
+    contentProps?: Omit<DropdownContentProps, 'class' | 'children' | 'child'>;
+    contentClass?: string;
+    items: DropdownItemValue[];
+};

package/dist/components/dropdown/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -3,20 +3,20 @@ import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
 export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            description?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            label?: import("tailwind-merge").ClassNameValue;
+            error?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            description?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            label?: import("tailwind-merge").ClassNameValue;
+            error?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
@@ -26,11 +26,11 @@ export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
     description: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            root?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
-            error?: import("tailwind-variants").ClassValue;
-            description?: import("tailwind-variants").ClassValue;
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            description?: import("tailwind-merge").ClassNameValue;
+            root?: import("tailwind-merge").ClassNameValue;
+            label?: import("tailwind-merge").ClassNameValue;
+            error?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {

package/dist/components/popover/components/popover.content.svelte

@@ -3,7 +3,7 @@
   import { cn, useId } from '../../../internal/utils/common.js';
   import { Popover as PopoverPrimitive } from 'bits-ui';
   import { boxWith, mergeProps } from 'svelte-toolbelt';
-  import { PopoverStylesContext } from '../styles.js';
+  import { popoverContentVariants } from '../styles.js';
   import { PopoverContentState } from './popover.svelte.js';
 
   const uid = $props.id();
@@ -15,6 +15,10 @@
     side = 'bottom',
     sideOffset = 8,
     align = 'center',
+    shadow = true,
+    variant = 'default',
+    w = 'default',
+    rounded = 'default',
     ...restProps
   }: PrimitivePopoverContentProps = $props();
 
@@ -30,7 +34,8 @@
 </script>
 
 <PopoverPrimitive.Content
-  class={cn(PopoverStylesContext.get().current.content(), className)}
+  data-slot="popover-content"
+  class={cn(popoverContentVariants({ shadow, variant, w, rounded }), className)}
   {side}
   {sideOffset}
   {align}

package/dist/components/popover/components/popover.content.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Popover as PopoverPrimitive } from 'bits-ui';
-declare const Popover: import("svelte").Component<PopoverPrimitive.ContentProps, {}, "ref">;
+import type { PrimitivePopoverContentProps } from '../types.js';
+declare const Popover: import("svelte").Component<PrimitivePopoverContentProps, {}, "ref">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/popover/components/popover.root.svelte

@@ -2,14 +2,12 @@
   import { noop } from '../../../internal/utils/common.js';
   import { Popover as PopoverPrimitive } from 'bits-ui';
   import { boxWith } from 'svelte-toolbelt';
-  import { PopoverStylesContext, popoverVariants } from '../styles.js';
   import type { PrimitivePopoverRootProps } from '../types.js';
   import { PopoverRootState } from './popover.svelte.js';
 
   let {
     open = $bindable(false),
     disabled = false,
-    shadow = true,
     onOpenChange = noop,
     ...restProps
   }: PrimitivePopoverRootProps = $props();
@@ -24,10 +22,6 @@
     ),
     disabled: boxWith(() => disabled),
   });
-
-  const variants = $derived(popoverVariants({ shadow }));
-
-  PopoverStylesContext.set(boxWith(() => variants));
 </script>
 
 <PopoverPrimitive.Root bind:open={rootState.opts.open.current} {...restProps} />

package/dist/components/popover/components/popover.trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { PopoverStylesContext } from '../styles.js';
+  import { popoverTriggerVariants } from '../styles.js';
   import type { PrimitivePopoverTriggerProps } from '../types.js';
   import { cn, useId } from '../../../internal/utils/common.js';
   import { Popover as PopoverPrimitive } from 'bits-ui';
@@ -28,4 +28,8 @@
   const mergedProps = $derived(mergeProps(restProps, rootState.props));
 </script>
 
-<PopoverPrimitive.Trigger class={cn(PopoverStylesContext.get().current.trigger(), className)} {...mergedProps} />
+<PopoverPrimitive.Trigger
+  data-slot="popover-trigger"
+  class={cn(popoverTriggerVariants(), className)}
+  {...mergedProps}
+/>

package/dist/components/popover/components/popover.trigger.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Popover as PopoverPrimitive } from 'bits-ui';
-declare const Popover: import("svelte").Component<PopoverPrimitive.TriggerProps, {}, "ref">;
+import type { PrimitivePopoverTriggerProps } from '../types.js';
+declare const Popover: import("svelte").Component<PrimitivePopoverTriggerProps, {}, "ref">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/popover/popover.stories.svelte

@@ -2,134 +2,194 @@
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import type { Parameters } from '@storybook/sveltekit';
   import type { ComponentProps } from 'svelte';
-  import { Popover, PopoverPrimitive } from './index.js';
-  import PopoverBasic from './popover.svelte';
+  import { PopoverPrimitive } from './index.js';
 
   const parameters: Parameters = {
-    controls: {
-      include: ['open', 'disabled', 'side', 'sideOffset', 'align', 'shadow'],
-    },
-
     layout: 'centered',
 
     docs: {
       story: {
         inline: false,
-        iframeHeight: 300,
+        iframeHeight: 500,
       },
     },
   };
 
   const { Story } = defineMeta({
     title: 'UI Kit/Popover',
-    component: PopoverBasic,
+    subcomponents: {
+      Root: PopoverPrimitive.Root as any,
+      Content: PopoverPrimitive.Content as any,
+    },
     tags: ['autodocs'],
 
     parameters,
 
     argTypes: {
-      align: {
-        control: 'radio',
-        options: ['start', 'center', 'end'],
-        table: {
-          defaultValue: { summary: 'center' },
-        },
-      },
-
       open: {
+        name: 'open',
+        control: 'boolean',
+        if: { arg: 'disabled', eq: false },
         table: {
+          category: 'Root',
           defaultValue: { summary: 'false' },
         },
       },
-
       disabled: {
+        name: 'disabled',
+        control: 'boolean',
         table: {
+          category: 'Root',
           defaultValue: { summary: 'false' },
         },
       },
+
+      /**
+       * Content component args
+       */
       side: {
+        name: 'side',
         control: 'radio',
         options: ['top', 'bottom', 'left', 'right'],
         table: {
+          category: 'Content',
           defaultValue: { summary: 'bottom' },
         },
       },
-
       sideOffset: {
+        name: 'sideOffset',
         control: 'number',
         table: {
+          category: 'Content',
           defaultValue: { summary: '8' },
         },
       },
-
-      shadow: {
-        control: 'boolean',
+      align: {
+        name: 'align',
+        control: 'radio',
+        options: ['start', 'center', 'end'],
+        table: {
+          category: 'Content',
+          defaultValue: { summary: 'center' },
+        },
+      },
+      w: {
+        name: 'w',
+        control: 'radio',
+        options: ['default', 'auto'],
         table: {
-          defaultValue: { summary: 'true' },
+          category: 'Content',
+          defaultValue: { summary: 'default' },
+        },
+      },
+      rounded: {
+        name: 'rounded',
+        control: 'radio',
+        options: ['default', 'md', 'lg', 'xl', 'full', 'clean'],
+        table: {
+          category: 'Content',
+          defaultValue: { summary: 'default' },
         },
       },
     },
   });
 
-  type Args = ComponentProps<typeof Popover>;
+  type ArgsRoot = ComponentProps<typeof PopoverPrimitive.Root>;
+  type ArgsContent = ComponentProps<typeof PopoverPrimitive.Content>;
+
+  type MergedArgs = ArgsRoot & ArgsContent;
 
-  const args: Args = {
+  const rootArgs: ArgsRoot = {
     open: false,
     disabled: false,
+  };
+
+  const contentArgs: ArgsContent = {
     side: 'bottom',
     sideOffset: 8,
     align: 'center',
-    shadow: true,
+    w: 'default',
+    rounded: 'default',
   };
+
+  const mergedArgs: MergedArgs = { ...rootArgs, ...contentArgs };
 </script>
 
 <script lang="ts">
   let customAnchor = $state<HTMLDivElement>();
 </script>
 
-{#snippet template(args: Args)}
+{#snippet template(args: MergedArgs)}
   {@const rootArgs = { open: args.open, disabled: args.disabled }}
   {@const contentArgs = { side: args.side, sideOffset: args.sideOffset, align: args.align }}
   <PopoverPrimitive.Root {...rootArgs}>
-    <PopoverPrimitive.Trigger>Trigger</PopoverPrimitive.Trigger>
+    <PopoverPrimitive.Trigger class="cgui:border cgui:border-stroke-divider cgui:rounded-sm cgui:px-4 cgui:py-2">
+      Trigger
+    </PopoverPrimitive.Trigger>
 
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content {...contentArgs}>Content</PopoverPrimitive.Content>
+      <PopoverPrimitive.Content {...contentArgs}>
+        <div class="cgui:p-2">
+          <div class="cgui:space-y-2">
+            <h3 class="cgui:font-semibold cgui:text-sm">Popover Content</h3>
+            <p class="cgui:text-sm cgui:text-fg-medium">This is a simple popover with some example content.</p>
+          </div>
+        </div>
+      </PopoverPrimitive.Content>
     </PopoverPrimitive.Portal>
   </PopoverPrimitive.Root>
 {/snippet}
 
-<Story name="Primitive" {args} {template} {parameters} />
+<Story name="Primitive" args={mergedArgs} {template} {parameters} />
 
-<Story name="Basic" {args} {parameters}>
-  {#snippet template(args: Args)}
-    <Popover {...args}>
-      {#snippet trigger()}
-        <Popover.Trigger>Trigger</Popover.Trigger>
-      {/snippet}
+<Story name="Custom Anchor" args={mergedArgs} {parameters}>
+  {#snippet template(args: MergedArgs)}
+    {@const rootArgs = { open: args.open, disabled: args.disabled }}
+    {@const contentArgs = {
+      side: args.side,
+      sideOffset: args.sideOffset,
+      align: args.align,
+      w: args.w,
+      rounded: args.rounded,
+    }}
 
-      Content
-    </Popover>
-  {/snippet}
-</Story>
-
-<Story name="Custom Anchor" {args} {parameters}>
-  {#snippet template(args: Args)}
-    <div class="cgui:flex cgui:items-center cgui:justify-center cgui:h-full cgui:gap-12">
+    <div class="cgui:flex cgui:items-center cgui:justify-center cgui:h-full cgui:gap-16">
       <div
         bind:this={customAnchor}
-        class="cgui:w-40 cgui:h-20 cgui:flex cgui:items-center cgui:justify-center cgui:border cgui:text-center cgui:border-stroke-divider cgui:rounded-sm"
+        class="cgui:w-48 cgui:h-24 cgui:flex cgui:items-center cgui:justify-center cgui:border-2 cgui:border-dashed cgui:text-center cgui:border-stroke-divider cgui:rounded-lg cgui:bg-surface-white cgui:shadow-sm"
       >
-        Custom Anchor
+        <div class="cgui:space-y-1">
+          <div class="cgui:text-sm cgui:font-semibold cgui:text-fg-darkest">Custom Anchor</div>
+          <div class="cgui:text-xs cgui:text-fg-regular">Popover anchors here</div>
+        </div>
       </div>
 
-      <Popover {...args} {customAnchor}>
-        {#snippet trigger()}
-          <Popover.Trigger>Trigger</Popover.Trigger>
-        {/snippet}
-
-        Content
-      </Popover>
+      <PopoverPrimitive.Root {...rootArgs}>
+        <PopoverPrimitive.Trigger
+          class="cgui:border cgui:border-stroke-divider cgui:rounded-sm cgui:px-4 cgui:py-2 cgui:bg-surface-white cgui:hover:bg-surface-hover cgui:transition-colors"
+        >
+          Open Popover
+        </PopoverPrimitive.Trigger>
+
+        <PopoverPrimitive.Portal>
+          <PopoverPrimitive.Content {...contentArgs} side="left" class="cgui:max-w-64" {customAnchor}>
+            <div class="cgui:p-4 cgui:min-w-64">
+              <div class="cgui:space-y-3">
+                <h3 class="cgui:font-semibold cgui:text-base cgui:text-fg-darkest">Anchored Popover</h3>
+                <p class="cgui:text-sm cgui:text-fg-medium cgui:leading-relaxed">
+                  This popover is anchored to the custom anchor element on the left, not the trigger button. This is
+                  useful when you want to position the popover relative to a different element.
+                </p>
+                <div class="cgui:pt-2 cgui:border-t cgui:border-stroke-divider">
+                  <p class="cgui:text-xs cgui:text-fg-semilight">
+                    Try adjusting the side and align properties to see how the popover positions itself.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </PopoverPrimitive.Content>
+        </PopoverPrimitive.Portal>
+      </PopoverPrimitive.Root>
     </div>
   {/snippet}
 </Story>

package/dist/components/popover/popover.stories.svelte.d.ts

@@ -1,4 +1,3 @@
-import { Popover } from './index.js';
 declare const Popover: import("svelte").Component<Record<string, never>, {}, "">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

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

@@ -1,56 +1,64 @@
-import { Context } from 'runed';
-import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
-export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
+export declare const popoverVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, never[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, never[], unknown, unknown, undefined>>;
+export declare const popoverContentVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+    };
     shadow: {
-        true: {
-            content: string[];
-        };
-    };
-}, {
-    root: never[];
-    trigger: string[];
-    content: string[];
-}, undefined, {
+        true: string[];
+    };
+    w: {
+        default: string[];
+        auto: string[];
+    };
+    rounded: {
+        default: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        clean: never[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+    };
     shadow: {
-        true: {
-            content: string[];
-        };
-    };
-}, {
-    root: never[];
-    trigger: string[];
-    content: string[];
-}, import("tailwind-variants").TVReturnType<{
+        true: string[];
+    };
+    w: {
+        default: string[];
+        auto: string[];
+    };
+    rounded: {
+        default: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        clean: never[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+    };
     shadow: {
-        true: {
-            content: string[];
-        };
-    };
-}, {
-    root: never[];
-    trigger: string[];
-    content: string[];
-}, undefined, unknown, unknown, undefined>>;
-export type PopoverVariantsProps = VariantProps<typeof popoverVariants>;
-export declare const PopoverStylesContext: Context<ReadableBox<{
-    root: (slotProps?: ({
-        shadow?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    trigger: (slotProps?: ({
-        shadow?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    content: (slotProps?: ({
-        shadow?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-} & {
-    root: (slotProps?: ({
-        shadow?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    trigger: (slotProps?: ({
-        shadow?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-    content: (slotProps?: ({
-        shadow?: boolean | undefined;
-    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
-} & {}>>;
+        true: string[];
+    };
+    w: {
+        default: string[];
+        auto: string[];
+    };
+    rounded: {
+        default: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        clean: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const popoverTriggerVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type PopoverRootVariantsProps = VariantProps<typeof popoverVariants>;
+export type PopoverContentVariantsProps = VariantProps<typeof popoverContentVariants>;
+export type PopoverTriggerVariantsProps = VariantProps<typeof popoverTriggerVariants>;

package/dist/components/popover/styles.js

@@ -1,21 +1,44 @@
-import { keyWithPrefix } from '../../internal/utils/common.js';
 import { tv } from '../../internal/utils/tailwindcss.js';
-import { Context } from 'runed';
 export const popoverVariants = tv({
-    slots: {
-        root: [],
-        trigger: [
-            'cgui:cursor-pointer',
-            'cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none cgui:disabled:opacity-50',
-        ],
-        content: ['cgui:z-(--cg-ui-z-index-popover)'],
-    },
+    base: [],
+});
+export const popoverContentVariants = tv({
+    base: [
+        'cgui:z-(--cg-ui-z-index-popover',
+        'cgui:origin-(--bits-popover-content-transform-origin) cgui:outline-hidden',
+        'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:zoom-out-95 cgui:data-[state=open]:zoom-in-95',
+        'cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-end-2 cgui:data-[side=right]:slide-in-from-start-2 cgui:data-[side=top]:slide-in-from-bottom-2',
+    ],
     variants: {
+        variant: {
+            default: ['cgui:bg-surface-white'],
+        },
         shadow: {
-            true: {
-                content: ['cgui:shadow-popover'],
-            },
+            true: ['cgui:shadow-popover'],
+        },
+        w: {
+            default: ['cgui:min-w-(--bits-popover-anchor-width)'],
+            auto: ['cgui:w-auto'],
         },
+        rounded: {
+            default: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+            clean: [],
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        shadow: true,
+        w: 'default',
+        rounded: 'default',
     },
 });
-export const PopoverStylesContext = new Context(keyWithPrefix('popover-styles'));
+export const popoverTriggerVariants = tv({
+    base: [
+        'cgui:cursor-pointer',
+        'cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none cgui:disabled:opacity-50',
+    ],
+});

package/dist/components/popover/types.d.ts

@@ -2,13 +2,13 @@ import { Popover as PopoverPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { WithoutChildrenOrChild } from 'svelte-toolbelt';
 import type { TransitionConfig } from 'svelte/transition';
-import type { PopoverVariantsProps } from './styles.js';
+import type { PopoverContentVariantsProps, PopoverTriggerVariantsProps } from './styles.js';
 export type PrimitivePopoverRootProps = PopoverPrimitive.RootProps & {
     disabled?: boolean;
-} & PopoverVariantsProps;
-export type PrimitivePopoverContentProps = PopoverPrimitive.ContentProps;
+};
+export type PrimitivePopoverContentProps = PopoverPrimitive.ContentProps & PopoverContentVariantsProps;
 export type PrimitivePopoverPortalProps = PopoverPrimitive.PortalProps;
-export type PrimitivePopoverTriggerProps = PopoverPrimitive.TriggerProps;
+export type PrimitivePopoverTriggerProps = PopoverPrimitive.TriggerProps & PopoverTriggerVariantsProps;
 export type AnimationFn = (node: Element, params?: any) => TransitionConfig;
 export type AnimationDirection = {
     x: number;