@casinogate/ui 1.8.8 → 1.9.0

package/dist/components/navigation/styles.js

@@ -1,35 +1,52 @@
-import { keyWithPrefix } from '../../internal/utils/common.js';
 import { tv } from '../../internal/utils/tailwindcss.js';
-import { Context } from 'runed';
-export const navigationVariants = tv({
-    slots: {
-        root: [
-            'cgui:group/navigation',
-            'cgui:data-[compact=true]:w-fit cgui:min-w-px cgui:w-full',
-            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-        ],
-        content: ['cgui:overflow-hidden'],
-        item: [],
-        subContent: [
-            'cgui:data-[compact=false]:pl-10',
-            'cgui:data-[compact=false]:[&_[data-slot="trigger"]]:pl-0',
-            'cgui:data-[popover-content]:bg-surface-darkest cgui:data-[popover-content]:rounded-md',
-        ],
-        trigger: [
-            'cgui:flex cgui:items-center cgui:gap-2',
-            'cgui:overflow-hidden cgui:truncate',
-            'cgui:w-full cgui:px-3 cgui:py-4',
-            'cgui:group-data-[compact=true]/navigation:py-3 cgui:data-[sub-content="false"]:group-data-[compact=true]/navigation:justify-center',
-            'cgui:text-fg-semilight cgui:text-body',
-            'cgui:cursor-pointer cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-            'cgui:[data-disabled]:cursor-not-allowed cgui:[data-disabled]:opacity-50',
-            'cgui:[&_[data-slot="icon"]]:size-6',
-        ],
-    },
+export const navigationRootStyles = tv({
+    base: [
+        'cgui:group/navigation',
+        'cgui:data-[compact=true]:w-fit cgui:min-w-px cgui:w-full',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+    ],
     variants: {
         compact: {
             true: {},
         },
     },
 });
-export const NavigationStylesContext = new Context(keyWithPrefix('navigation-styles'));
+export const navigationContentStyles = tv({
+    base: ['cgui:overflow-hidden'],
+});
+export const navigationItemStyles = tv({
+    base: [],
+});
+export const navigationTriggerStyles = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:gap-2',
+        'cgui:overflow-hidden cgui:truncate',
+        'cgui:w-full cgui:px-3 cgui:py-4',
+        'cgui:group-data-[compact=true]/navigation:py-3 cgui:group-data-[compact=true]/navigation:justify-center',
+        'cgui:text-fg-semilight cgui:text-body',
+        'cgui:cursor-pointer cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:data-[disabled]:cursor-not-allowed cgui:data-[disabled]:opacity-50',
+        'cgui:[&_svg]:size-6 cgui:[&_[data-slot="icon"]]:me-auto',
+    ],
+});
+export const navigationSubStyles = tv({
+    base: [],
+});
+export const navigationSubTriggerStyles = tv({
+    extend: navigationTriggerStyles,
+    base: ['cgui:group-data-[compact=false]/navigation:data-[state=open]:[&_[data-slot="chevron"]]:rotate-180'],
+});
+export const navigationSubContentStyles = tv({
+    base: ['cgui:data-[compact=false]:pl-10', 'cgui:data-[compact=false]:[&_[data-slot="trigger"]]:pl-0'],
+});
+export const navigationDropdownContentStyles = tv({
+    base: [
+        'cgui:bg-surface-darkest cgui:rounded-md',
+        'cgui:min-w-40 cgui:p-1',
+        'cgui:[&_[data-slot="trigger"]]:px-2 cgui:[&_[data-slot="trigger"]]:py-2',
+        'cgui:[&_[data-slot="trigger"]]:text-sm',
+        'cgui:[&_[data-slot="trigger"]]:rounded-sm',
+        'cgui:[&_svg]:size-4',
+        'cgui:[&_[data-slot="trigger"]_[data-slot="icon"]]:size-4',
+    ],
+});

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

@@ -1,25 +1,22 @@
 import type { PrimitiveElementAttributes } from '../../internal/types/html-attributes.js';
+import type { ListCollection } from '@zag-js/collection';
 import type { Component, Snippet } from 'svelte';
 import type { WithChild, WithElementRef, Without, WithoutChildren, WithoutChildrenOrChild } from 'svelte-toolbelt';
-import type { NavigationVariantsProps } from './styles.js';
+import type { NavigationContentVariantsProps, NavigationItemVariantsProps, NavigationRootVariantsProps, NavigationSubContentVariantsProps, NavigationSubTriggerVariantsProps, NavigationSubVariantsProps, NavigationTriggerVariantsProps } from './styles.js';
 type NavigationRootPropsWithoutHTML = WithElementRef<WithChild<{
-    popoverProps?: {
+    dropdownProps?: {
         sideOffset?: number;
         alignOffset?: number;
         side?: 'top' | 'bottom' | 'left' | 'right';
     };
 }, {
     compact: boolean;
-}>> & NavigationVariantsProps;
+}>> & NavigationRootVariantsProps;
 export type NavigationRootProps = NavigationRootPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationRootPropsWithoutHTML>;
-type NavigationItemPropsWithoutHTML = WithElementRef<WithChild<{}>>;
-export type NavigationItemProps = NavigationItemPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationItemPropsWithoutHTML>;
-type NavigationContentPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+type NavigationContentPropsWithoutHTML = WithElementRef<WithChild<{}>> & NavigationContentVariantsProps;
 export type NavigationContentProps = NavigationContentPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationContentPropsWithoutHTML>;
-type NavigationSubContentPropsWithoutHTML = WithElementRef<WithChild<{}, {
-    compact: boolean;
-}>>;
-export type NavigationSubContentProps = NavigationSubContentPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubContentPropsWithoutHTML>;
+type NavigationItemPropsWithoutHTML = WithElementRef<WithChild<{}>> & NavigationItemVariantsProps;
+export type NavigationItemProps = NavigationItemPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationItemPropsWithoutHTML>;
 type NavigationTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
     href?: string;
     disabled?: boolean;
@@ -29,26 +26,68 @@ type NavigationTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChil
     }]>;
 }, {
     compact: boolean;
-}>>>;
+}>>> & NavigationTriggerVariantsProps;
 export type NavigationTriggerProps = NavigationTriggerPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationTriggerPropsWithoutHTML>;
-type NavigationItemBaseValue = {
-    key: string | number;
+type NavigationSubPropsWithoutHTML = WithElementRef<WithChild<{
+    open?: boolean;
+}, {
+    open: boolean;
+}>> & NavigationSubVariantsProps;
+export type NavigationSubProps = NavigationSubPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubPropsWithoutHTML>;
+type NavigationSubTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
+    disabled?: boolean;
+    icon?: Snippet;
+    label?: string | Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+}, {
+    compact: boolean;
+    open: boolean;
+}>>> & NavigationSubTriggerVariantsProps;
+export type NavigationSubTriggerProps = NavigationSubTriggerPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubTriggerPropsWithoutHTML>;
+type NavigationSubContentPropsWithoutHTML = WithElementRef<WithChild<{}, {
+    compact: boolean;
+}>> & NavigationSubContentVariantsProps;
+export type NavigationSubContentProps = NavigationSubContentPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubContentPropsWithoutHTML>;
+export type NavigationItemBase = {
+    /** Unique identifier for the item */
+    key: string;
+    /** Display label */
     label: string;
+    /** Optional icon component */
     icon?: Component<{
         width?: number;
         height?: number;
     }>;
+    /** Whether the item is disabled */
+    disabled?: boolean;
 };
-type NavigationItemValueWithHref = NavigationItemBaseValue & {
+export type NavigationItemLink = NavigationItemBase & {
+    type: 'link';
     href: string;
-    children?: never;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+};
+export type NavigationItemAction = NavigationItemBase & {
+    type: 'action';
+    onClick?: () => void;
+};
+export type NavigationItemSub = NavigationItemBase & {
+    type: 'sub';
+    children: NavigationSelectableItem[];
 };
-type NavigationItemValueWithChildren = NavigationItemBaseValue & {
-    children: Omit<NavigationItemValueWithHref, 'icon'>[];
-    href?: never;
+export type NavigationItem = NavigationItemLink | NavigationItemAction | NavigationItemSub;
+export type NavigationSelectableItem = NavigationItem;
+export type NavigationCollection = ListCollection<NavigationItem>;
+export type NavigationCollectionOptions = {
+    items: NavigationItem[];
 };
-export type NavigationItemValue = NavigationItemValueWithHref | NavigationItemValueWithChildren;
 export type NavigationProps = WithoutChildrenOrChild<NavigationRootProps> & {
-    items: NavigationItemValue[];
+    collection: NavigationCollection;
+    item?: Snippet<[{
+        item: NavigationSelectableItem;
+        props: Record<string, unknown>;
+    }]>;
+    contentClass?: string;
 };
 export {};

package/dist/components/popover/popover.svelte

@@ -9,6 +9,7 @@
   import { fly } from 'svelte/transition';
   import Content from './components/popover.content.svelte';
   import Root from './components/popover.root.svelte';
+  import * as Primitive from './exports-primitive.js';
 
   let {
     open = $bindable(false),
@@ -20,7 +21,7 @@
     side = 'bottom',
     animationFn,
     animationParams,
-    forceMount = true,
+    forceMount = false,
     ...restProps
   }: PopoverProps<T> = $props();
 
@@ -47,8 +48,16 @@
 </script>
 
 <Root bind:open {onOpenChange} {onOpenChangeComplete}>
-  {#if trigger}
-    {@render trigger?.()}
+  {#if trigger !== undefined}
+    {#if typeof trigger === 'string'}
+      <Primitive.Trigger>{trigger}</Primitive.Trigger>
+    {:else}
+      <Primitive.Trigger>
+        {#snippet child({ props })}
+          {@render trigger?.({ props })}
+        {/snippet}
+      </Primitive.Trigger>
+    {/if}
   {/if}
 
   {#if forceMount}

package/dist/components/popover/styles.js

@@ -4,7 +4,7 @@ export const popoverVariants = tv({
 });
 export const popoverContentVariants = tv({
     base: [
-        'cgui:z-(--cg-ui-z-index-popover',
+        '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',

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

@@ -19,7 +19,9 @@ export type AnimationDirection = {
     y: number;
 };
 export type PopoverProps<TAnimationFn extends AnimationFn = AnimationFn> = WithoutChildrenOrChild<PrimitivePopoverRootProps> & Pick<PrimitivePopoverContentProps, 'ref' | 'class' | 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'preventScroll' | 'customAnchor' | 'forceMount'> & {
-    trigger?: Snippet;
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
     children?: Snippet;
     animationFn?: TAnimationFn;
     animationParams?: Parameters<TAnimationFn>[1];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.8.8",
+  "version": "1.9.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",