@casinogate/ui 1.3.7 → 1.5.0

package/dist/components/navigation/navigation.svelte

@@ -1,3 +1,36 @@
-<script lang="ts" module></script>
+<script lang="ts">
+  import Content from './components/navigation.content.svelte';
+  import Item from './components/navigation.item.svelte';
+  import Root from './components/navigation.root.svelte';
+  import SubContent from './components/navigation.sub-content.svelte';
+  import Trigger from './components/navigation.trigger.svelte';
+  import type { NavigationProps } from './types.js';
 
-<script lang="ts"></script>
+  let { items, ref = $bindable(null), compact = $bindable(false), ...restProps }: NavigationProps = $props();
+</script>
+
+<Root bind:ref bind:compact {...restProps}>
+  <Content>
+    {#each items as item (item.key)}
+      <Item>
+        <Trigger label={item.label} {...'href' in item ? { href: item.href } : {}}>
+          {#snippet icon()}
+            {#if item.icon}
+              <item.icon width={24} height={24} />
+            {/if}
+          {/snippet}
+        </Trigger>
+
+        {#if 'children' in item}
+          <SubContent>
+            {#each item.children as child (child.key)}
+              <Item>
+                <Trigger label={child.label} href={child.href} />
+              </Item>
+            {/each}
+          </SubContent>
+        {/if}
+      </Item>
+    {/each}
+  </Content>
+</Root>

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

@@ -1,18 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Navigation: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Navigation = InstanceType<typeof Navigation>;
+import type { NavigationProps } from './types.js';
+declare const Navigation: import("svelte").Component<NavigationProps, {}, "ref" | "compact">;
+type Navigation = ReturnType<typeof Navigation>;
 export default Navigation;

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

@@ -7,7 +7,7 @@ export declare const navigationVariants: import("tailwind-variants").TVReturnTyp
     };
 }, {
     root: string[];
-    content: never[];
+    content: string[];
     item: never[];
     subContent: string[];
     trigger: string[];
@@ -17,7 +17,7 @@ export declare const navigationVariants: import("tailwind-variants").TVReturnTyp
     };
 }, {
     root: string[];
-    content: never[];
+    content: string[];
     item: never[];
     subContent: string[];
     trigger: string[];
@@ -27,7 +27,7 @@ export declare const navigationVariants: import("tailwind-variants").TVReturnTyp
     };
 }, {
     root: string[];
-    content: never[];
+    content: string[];
     item: never[];
     subContent: string[];
     trigger: string[];

package/dist/components/navigation/styles.js

@@ -7,9 +7,8 @@ export const navigationVariants = tv({
             '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',
-            'cgui:bg-surface-darkest',
         ],
-        content: [],
+        content: ['cgui:overflow-hidden'],
         item: [],
         subContent: [
             'cgui:data-[compact=false]:pl-10',
@@ -17,12 +16,14 @@ export const navigationVariants = tv({
             'cgui:data-[popover-content]:bg-surface-darkest cgui:data-[popover-content]:rounded-md',
         ],
         trigger: [
-            'cgui:flex cgui:items-center cgui:gap-1.5 cgui:justify-between',
+            '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: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',
         ],
     },
     variants: {

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

@@ -1,7 +1,14 @@
 import type { PrimitiveElementAttributes } from '../../internal/types/html-attributes.js';
-import type { WithChild, WithElementRef, Without } from 'svelte-toolbelt';
+import type { Component, Snippet } from 'svelte';
+import type { WithChild, WithElementRef, Without, WithoutChildren, WithoutChildrenOrChild } from 'svelte-toolbelt';
 import type { NavigationVariantsProps } from './styles.js';
-type NavigationRootPropsWithoutHTML = WithElementRef<WithChild<{}, {
+type NavigationRootPropsWithoutHTML = WithElementRef<WithChild<{
+    popoverProps?: {
+        sideOffset?: number;
+        alignOffset?: number;
+        side?: 'top' | 'bottom' | 'left' | 'right';
+    };
+}, {
     compact: boolean;
 }>> & NavigationVariantsProps;
 export type NavigationRootProps = NavigationRootPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationRootPropsWithoutHTML>;
@@ -13,11 +20,35 @@ type NavigationSubContentPropsWithoutHTML = WithElementRef<WithChild<{}, {
     compact: boolean;
 }>>;
 export type NavigationSubContentProps = NavigationSubContentPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubContentPropsWithoutHTML>;
-type NavigationTriggerPropsWithoutHTML = WithElementRef<WithChild<{
+type NavigationTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
     href?: string;
     disabled?: boolean;
+    icon?: Snippet;
+    label?: string | Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
 }, {
     compact: boolean;
-}>>;
+}>>>;
 export type NavigationTriggerProps = NavigationTriggerPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationTriggerPropsWithoutHTML>;
+type NavigationItemBaseValue = {
+    key: string | number;
+    label: string;
+    icon?: Component<{
+        width?: number;
+        height?: number;
+    }>;
+};
+type NavigationItemValueWithHref = NavigationItemBaseValue & {
+    href: string;
+    children?: never;
+};
+type NavigationItemValueWithChildren = NavigationItemBaseValue & {
+    children: Omit<NavigationItemValueWithHref, 'icon'>[];
+    href?: never;
+};
+export type NavigationItemValue = NavigationItemValueWithHref | NavigationItemValueWithChildren;
+export type NavigationProps = WithoutChildrenOrChild<NavigationRootProps> & {
+    items: NavigationItemValue[];
+};
 export {};

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

@@ -10,7 +10,7 @@ export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: never[];
     trigger: string[];
-    content: never[];
+    content: string[];
 }, undefined, {
     shadow: {
         true: {
@@ -20,7 +20,7 @@ export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: never[];
     trigger: string[];
-    content: never[];
+    content: string[];
 }, import("tailwind-variants").TVReturnType<{
     shadow: {
         true: {
@@ -30,7 +30,7 @@ export declare const popoverVariants: import("tailwind-variants").TVReturnType<{
 }, {
     root: never[];
     trigger: string[];
-    content: never[];
+    content: string[];
 }, undefined, unknown, unknown, undefined>>;
 export type PopoverVariantsProps = VariantProps<typeof popoverVariants>;
 export declare const PopoverStylesContext: Context<ReadableBox<{

package/dist/components/popover/styles.js

@@ -8,7 +8,7 @@ export const popoverVariants = tv({
             'cgui:cursor-pointer',
             'cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none cgui:disabled:opacity-50',
         ],
-        content: [],
+        content: ['cgui:z-(--cg-ui-z-index-popover)'],
     },
     variants: {
         shadow: {

package/dist/components/select/components/select.content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { SelectStylesContext } from '../styles.js';
+  import type { SelectContentProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    children,
+    side = 'bottom',
+    forceMount = false,
+    ...restProps
+  }: SelectContentProps = $props();
+
+  const variants = SelectStylesContext.get();
+
+  const attrs = $derived({
+    'data-slot': 'select-content',
+    class: cn(variants.current.content(), className),
+    sideOffset,
+    forceMount,
+    side,
+    ...restProps,
+  });
+</script>
+
+<SelectPrimitive.Content bind:ref {...attrs}>
+  {@render children?.()}
+</SelectPrimitive.Content>

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

@@ -1,26 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<Omit<SelectPrimitive.ContentProps, "child">, {}, "ref">;
+type Select = ReturnType<typeof Select>;
 export default Select;
-type Select = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/select/components/select.group-heading.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { SelectStylesContext } from '../styles.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SelectGroupHeadingProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: SelectGroupHeadingProps = $props();
+
+  const variants = SelectStylesContext.get();
+</script>
+
+<SelectPrimitive.GroupHeading
+  bind:ref
+  data-slot="select-group-heading"
+  class={cn(variants.current.label(), className)}
+  {...restProps}
+>
+  {@render children?.()}
+</SelectPrimitive.GroupHeading>

package/dist/components/select/components/select.group-heading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<SelectPrimitive.GroupHeadingProps, {}, "ref">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/select/components/select.group.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SelectGroupProps } from '../types.js';
+
+  let { ref = $bindable(null), ...restProps }: SelectGroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" bind:ref {...restProps} />

package/dist/components/select/components/select.group.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<SelectPrimitive.GroupProps, {}, "ref">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/select/components/select.item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Icon } from '../../icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { SelectStylesContext } from '../styles.js';
+  import type { SelectItemProps } from '../types.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenProp,
+    ...restProps
+  }: SelectItemProps = $props();
+
+  const variants = SelectStylesContext.get();
+</script>
+
+<SelectPrimitive.Item
+  bind:ref
+  {value}
+  data-slot="select-item"
+  class={cn(variants.current.item(), className)}
+  {...restProps}
+>
+  {#snippet children({ selected, highlighted })}
+    {#if childrenProp}
+      {@render childrenProp({ selected, highlighted })}
+    {:else}
+      {label || value}
+
+      {#if selected}
+        <Icon.Checkmark width={16} height={16} />
+      {/if}
+    {/if}
+  {/snippet}
+</SelectPrimitive.Item>

package/dist/components/select/components/select.item.svelte.d.ts

@@ -1,26 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<Omit<SelectPrimitive.ItemProps, "child">, {}, "ref">;
+type Select = ReturnType<typeof Select>;
 export default Select;
-type Select = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/select/components/select.portal.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import type { SelectPortalProps } from '../types.js';
+
+  let { children, ...restProps }: SelectPortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps}>
+  {@render children?.()}
+</SelectPrimitive.Portal>

package/dist/components/select/components/select.portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Select: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/select/components/select.trigger.svelte

@@ -1,43 +1,44 @@
 <script lang="ts">
-  import { getDataActive } from '../../../internal/utils/attrs.js';
-  import { cn, useId } from '../../../internal/utils/common.js';
+  import { Icon } from '../../icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
   import { Select as SelectPrimitive } from 'bits-ui';
   import { SelectStylesContext } from '../styles.js';
   import type { SelectTriggerProps } from '../types.js';
 
   let {
     ref = $bindable(null),
-    id = useId(),
     class: className,
-    startChevron,
-    endChevron,
+    child,
     children,
+    hasChevron = true,
     ...restProps
   }: SelectTriggerProps = $props();
 
   const styles = SelectStylesContext.get();
-</script>
 
-<SelectPrimitive.Trigger
-  bind:ref
-  {id}
-  data-slot="trigger"
-  data-start-chevron={getDataActive(Boolean(startChevron))}
-  data-end-chevron={getDataActive(Boolean(endChevron))}
-  class={cn(styles.current.trigger(), className)}
-  {...restProps}
->
-  {#if startChevron}
-    <span data-slot="start-chevron" class={styles.current.chevron()}>
-      {@render startChevron()}
-    </span>
-  {/if}
+  const attrs = $derived({
+    'data-slot': 'trigger',
+    class: cn(styles.current.trigger(), className),
+    ...restProps,
+  });
+</script>
 
-  {@render children?.()}
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <SelectPrimitive.Trigger bind:ref {...attrs}>
+    {@render children?.()}
 
-  {#if endChevron}
-    <span data-slot="end-chevron" class={styles.current.chevron()}>
-      {@render endChevron()}
-    </span>
-  {/if}
-</SelectPrimitive.Trigger>
+    {#if hasChevron}
+      <span
+        data-slot="chevron"
+        class={cn(
+          'cgui:transition-transform cgui:duration-250 cgui:ease-in-out',
+          'cgui:group-data-[state=open]/select-trigger:-rotate-180'
+        )}
+      >
+        <Icon.ChevronDown width={20} height={20} />
+      </span>
+    {/if}
+  </SelectPrimitive.Trigger>
+{/if}

package/dist/components/select/components/select.viewport.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { SelectStylesContext } from '../styles.js';
+  import type { SelectViewportProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, children, child, ...restProps }: SelectViewportProps = $props();
+
+  const variants = SelectStylesContext.get();
+
+  const attrs = $derived({
+    'data-slot': 'select-viewport',
+    class: cn(variants.current.viewport(), className),
+    ...restProps,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <SelectPrimitive.Viewport bind:ref {...attrs}>
+    {@render children?.()}
+  </SelectPrimitive.Viewport>
+{/if}

package/dist/components/select/components/select.viewport.svelte.d.ts

@@ -1,26 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const Select: import("svelte").Component<SelectPrimitive.ViewportProps, {}, "ref">;
+type Select = ReturnType<typeof Select>;
 export default Select;
-type Select = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Select: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/select/exports-primitive.d.ts

@@ -1,2 +1,8 @@
+export { default as Content } from './components/select.content.svelte';
+export { default as GroupHeading } from './components/select.group-heading.svelte';
+export { default as Group } from './components/select.group.svelte';
+export { default as Item } from './components/select.item.svelte';
+export { default as Portal } from './components/select.portal.svelte';
 export { default as Root } from './components/select.root.svelte';
 export { default as Trigger } from './components/select.trigger.svelte';
+export { default as Viewport } from './components/select.viewport.svelte';

package/dist/components/select/exports-primitive.js

@@ -1,2 +1,8 @@
+export { default as Content } from './components/select.content.svelte';
+export { default as GroupHeading } from './components/select.group-heading.svelte';
+export { default as Group } from './components/select.group.svelte';
+export { default as Item } from './components/select.item.svelte';
+export { default as Portal } from './components/select.portal.svelte';
 export { default as Root } from './components/select.root.svelte';
 export { default as Trigger } from './components/select.trigger.svelte';
+export { default as Viewport } from './components/select.viewport.svelte';

package/dist/components/select/exports.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './select.svelte';

package/dist/components/select/exports.js

@@ -0,0 +1 @@
+export { default as Root } from './select.svelte';

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

@@ -1,2 +1,3 @@
 export * as SelectPrimitive from './exports-primitive.js';
-export type { SelectRootProps, SelectTriggerProps } from './types.js';
+export * as Select from './exports.js';
+export type { SelectContentProps, SelectGroupHeadingProps, SelectGroupProps, SelectItem, SelectItemData, SelectItemGroup, SelectItemProps, SelectRootProps, SelectTriggerProps, SelectViewportProps, } from './types.js';

package/dist/components/select/index.js

@@ -1 +1,2 @@
 export * as SelectPrimitive from './exports-primitive.js';
+export * as Select from './exports.js';