@casinogate/ui 1.7.0 → 1.8.0

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

@@ -1,5 +1,6 @@
+import type { ListCollection } from '../../internal/lib/collection/index.js';
 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 { ExtractPrimitiveEvents } 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;
@@ -13,50 +14,73 @@ export type DropdownSubContentProps = DropdownMenuSubContentPropsPrimitive & Dro
 export type DropdownPortalProps = DropdownMenuPortalPropsPrimitive;
 export type DropdownGroupHeadingProps = DropdownMenuGroupHeadingPropsPrimitive & DropdownGroupHeadingVariantsProps;
 export type DropdownSeparatorProps = DropdownMenuSeparatorPropsPrimitive & DropdownSeparatorVariantsProps;
-export type DropdownItemBaseValue = {
-    key: string | number;
+export type DropdownItemEvents = ExtractPrimitiveEvents<DropdownItemProps>;
+export type DropdownItemBase = {
+    /** 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;
-    onSelect?: () => void;
+    /** Text value for typeahead (defaults to label if not provided) */
     textValue?: string;
+    /** Group key for grouping items */
+    group?: string;
+    /** Called when item is selected */
+    onSelect?: () => void;
+    /** Whether to close dropdown on select (default: true) */
     closeOnSelect?: boolean;
 };
-export type DropdownItemLinkValue = DropdownItemBaseValue & {
+export type DropdownItemAction = DropdownItemBase & DropdownItemEvents & {
+    type: 'action';
+};
+export type DropdownItemLink = DropdownItemBase & DropdownItemEvents & {
     type: 'link';
     href: string;
-} & Partial<ExtractPrimitiveEvents<PrimitiveAnchorAttributes>>;
-export type DropdownItemActionValue = DropdownItemBaseValue & {
-    type: 'action';
-} & Partial<ExtractPrimitiveEvents<PrimitiveButtonAttributes>>;
-export type DropdownItemSubValue = DropdownItemBaseValue & {
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    rel?: string;
+};
+export type DropdownItemSeparator = {
+    key: string;
+    type: 'separator';
+    /** Optional group - separator appears at end of this group */
+    group?: string;
+};
+export type DropdownItemSub = DropdownItemBase & {
     type: 'sub';
-    children: (DropdownItemLinkValue | DropdownItemActionValue)[];
+    children: DropdownItem[];
 };
-export type DropdownSingleItemValue = DropdownItemLinkValue | DropdownItemActionValue | DropdownItemSubValue;
-export type DropdownGroupItemValue = {
-    key: string | number;
-    type: 'group';
-    heading?: string;
-    items: DropdownSingleItemValue[];
+export type DropdownItem = DropdownItemAction | DropdownItemLink | DropdownItemSeparator | DropdownItemSub;
+export type DropdownSelectableItem = Exclude<DropdownItem, DropdownItemSeparator>;
+export type DropdownGroup = {
+    key: string;
+    label?: string;
+    /** Sort order (lower = first) */
+    order?: number;
 };
-export type DropdownSeparatorItemValue = {
-    key: string | number;
-    type: 'separator';
+export type DropdownCollectionOptions = {
+    items: DropdownItem[];
+    /** Group definitions for custom headers/ordering */
+    groups?: DropdownGroup[];
+    /** Custom group sort (default: by order, then alphabetically) */
+    groupSort?: 'asc' | 'desc' | ((a: string, b: string) => number);
 };
-export type DropdownItemValue = DropdownSingleItemValue | DropdownGroupItemValue | DropdownSeparatorItemValue;
+export type DropdownCollection = ListCollection<DropdownItem>;
 export type DropdownProps = DropdownRootProps & {
+    collection: DropdownCollection;
+    groups?: DropdownGroup[];
     trigger?: Snippet<[{
         props: Record<string, unknown>;
     }]> | string;
     item?: Snippet<[{
-        item: DropdownSingleItemValue;
+        item: DropdownSelectableItem;
         props: Record<string, unknown>;
     }]>;
     contentProps?: Omit<DropdownContentProps, 'class' | 'children' | 'child'>;
     contentClass?: string;
-    items: DropdownItemValue[];
 };

package/dist/components/field/field.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { WithoutChildrenOrChild } from 'svelte-toolbelt';
   import FieldControl from './components/field.control.svelte';
   import FieldDescription from './components/field.description.svelte';
   import FieldError from './components/field.error.svelte';

package/dist/components/segment/components/segment.root.svelte

@@ -19,6 +19,7 @@
     size = 'md',
     spacingX = 'md',
     onValueChange,
+    fullWidth = false,
     ...restProps
   }: SegmentRootProps = $props();
 
@@ -38,7 +39,7 @@
     disabled: box.with(() => disabled),
   });
 
-  const variants = $derived(segmentVariants({ variant, rounded, size, spacingX }));
+  const variants = $derived(segmentVariants({ variant, rounded, size, spacingX, fullWidth }));
 
   SegmentStylesContext.set(box.with(() => variants));
 

package/dist/components/segment/components/segmet.svelte.d.ts

@@ -15,7 +15,6 @@ export declare class SegmentRootState {
         readonly 'data-disabled': "" | undefined;
         readonly "data-slot": "root";
     };
-    registerItem(id: string, value: string): void;
     setValue(value: string): void;
 }
 type SegmentItemStateOpts = WithRefProps<ReadableBoxedValues<{

package/dist/components/segment/components/segmet.svelte.js

@@ -26,7 +26,6 @@ export class SegmentRootState {
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.root,
         ...this.attachment,
     }));
-    registerItem(id, value) { }
     setValue(value) {
         this.opts.value.current = value;
     }

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

@@ -30,6 +30,12 @@ export declare const segmentVariants: import("tailwind-variants").TVReturnType<{
             item: string[];
         };
     };
+    fullWidth: {
+        true: {
+            root: string[];
+            item: string[];
+        };
+    };
     spacingX: {
         sm: {
             item: string[];
@@ -75,6 +81,12 @@ export declare const segmentVariants: import("tailwind-variants").TVReturnType<{
             item: string[];
         };
     };
+    fullWidth: {
+        true: {
+            root: string[];
+            item: string[];
+        };
+    };
     spacingX: {
         sm: {
             item: string[];
@@ -120,6 +132,12 @@ export declare const segmentVariants: import("tailwind-variants").TVReturnType<{
             item: string[];
         };
     };
+    fullWidth: {
+        true: {
+            root: string[];
+            item: string[];
+        };
+    };
     spacingX: {
         sm: {
             item: string[];

package/dist/components/segment/styles.js

@@ -4,7 +4,7 @@ import { Context } from 'runed';
 export const segmentVariants = tv({
     slots: {
         root: [
-            'cgui:flex cgui:items-center cgui:p-1',
+            'cgui:flex cgui:items-center cgui:p-1 cgui:w-fit',
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
             'cgui:data-[disabled=""]:opacity-50 cgui:data-[disabled=""]:cursor-not-allowed cgui:data-[disabled=""]:pointer-events-none',
         ],
@@ -53,6 +53,12 @@ export const segmentVariants = tv({
                 item: ['cgui:h-11'],
             },
         },
+        fullWidth: {
+            true: {
+                root: ['cgui:w-full'],
+                item: ['cgui:flex-1'],
+            },
+        },
         spacingX: {
             sm: {
                 item: ['cgui:px-2'],

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

@@ -2,7 +2,7 @@
   import { cn } from '../../../internal/utils/common.js';
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { Attachment } from 'svelte/attachments';
-  import { SelectStylesContext } from '../styles.js';
+  import { selectContentStyles } from '../styles.js';
   import type { SelectContentProps } from '../types.js';
 
   let {
@@ -16,11 +16,9 @@
     ...restProps
   }: SelectContentProps = $props();
 
-  const variants = SelectStylesContext.get();
-
   const attrs = $derived({
     'data-slot': 'select-content',
-    class: cn(variants.current.content(), className),
+    class: cn(selectContentStyles(), className),
     sideOffset,
     forceMount,
     side,

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

@@ -1,18 +1,16 @@
 <script lang="ts">
-  import { SelectStylesContext } from '../styles.js';
+  import { selectGroupHeadingStyles } 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)}
+  class={cn(selectGroupHeadingStyles(), className)}
   {...restProps}
 >
   {@render children?.()}

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

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

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

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

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

@@ -2,7 +2,7 @@
   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 { selectItemStyles } from '../styles.js';
   import type { SelectItemProps } from '../types.js';
 
   let {
@@ -10,23 +10,15 @@
     class: className,
     value,
     label,
-    children: childrenProp,
+    children: childrenSnippet,
     ...restProps
   }: SelectItemProps = $props();
-
-  const variants = SelectStylesContext.get();
 </script>
 
-<SelectPrimitive.Item
-  bind:ref
-  {value}
-  data-slot="select-item"
-  class={cn(variants.current.item(), className)}
-  {...restProps}
->
+<SelectPrimitive.Item bind:ref {value} data-slot="select-item" class={cn(selectItemStyles(), className)} {...restProps}>
   {#snippet children({ selected, highlighted })}
-    {#if childrenProp}
-      {@render childrenProp({ selected, highlighted })}
+    {#if childrenSnippet}
+      {@render childrenSnippet({ selected, highlighted })}
     {:else}
       {label || value}
 

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

@@ -1,4 +1,4 @@
-import { Select as SelectPrimitive } from 'bits-ui';
-declare const Select: import("svelte").Component<Omit<SelectPrimitive.ItemProps, "child">, {}, "ref">;
+import type { SelectItemProps } from '../types.js';
+declare const Select: import("svelte").Component<SelectItemProps, {}, "ref">;
 type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/components/select/components/select.root.svelte

@@ -1,24 +1,8 @@
 <script lang="ts">
-  import { box } from 'svelte-toolbelt';
-
-  import { SelectStylesContext, selectVariants } from '../styles.js';
-
   import { Select as SelectPrimitive } from 'bits-ui';
   import type { SelectRootProps } from '../types.js';
 
-  let {
-    value = $bindable(''),
-    open = $bindable(false),
-    size = 'md',
-    variant = 'primary',
-    rounded = 'sm',
-    w = 'full',
-    ...restProps
-  }: SelectRootProps = $props();
-
-  const variants = $derived(selectVariants({ size, variant, rounded, w }));
-
-  SelectStylesContext.set(box.with(() => variants));
+  let { value = $bindable(''), open = $bindable(false), ...restProps }: SelectRootProps = $props();
 </script>
 
 <SelectPrimitive.Root bind:value={value as never} bind:open {...restProps} />

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

@@ -1,4 +1,3 @@
-import type { SelectRootProps } from '../types.js';
-declare const Select: import("svelte").Component<SelectRootProps, {}, "value" | "open">;
+declare const Select: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
 type Select = ReturnType<typeof Select>;
 export default Select;

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

@@ -2,7 +2,7 @@
   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 { selectTriggerStyles } from '../styles.js';
   import type { SelectTriggerProps } from '../types.js';
 
   let {
@@ -11,14 +11,24 @@
     child,
     children,
     hasChevron = true,
+    size = 'md',
+    variant = 'primary',
+    rounded = 'sm',
+    fullWidth = true,
     ...restProps
   }: SelectTriggerProps = $props();
 
-  const styles = SelectStylesContext.get();
-
   const attrs = $derived({
     'data-slot': 'trigger',
-    class: cn(styles.current.trigger(), className),
+    class: cn(
+      selectTriggerStyles({
+        size,
+        variant,
+        rounded,
+        fullWidth,
+      }),
+      className
+    ),
     ...restProps,
   });
 </script>
@@ -33,8 +43,10 @@
       <span
         data-slot="chevron"
         class={cn(
+          'cgui:absolute cgui:top-1/2 cgui:-translate-y-1/2 cgui:right-2',
           'cgui:transition-transform cgui:duration-250 cgui:ease-in-out',
-          'cgui:group-data-[state=open]/select-trigger:-rotate-180'
+          'cgui:group-data-[state=open]/select-trigger:-rotate-180',
+          'cgui:ms-auto'
         )}
       >
         <Icon.ChevronDown width={18} height={18} />

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

@@ -1,16 +1,14 @@
 <script lang="ts">
   import { cn } from '../../../internal/utils/common.js';
   import { Select as SelectPrimitive } from 'bits-ui';
-  import { SelectStylesContext } from '../styles.js';
+  import { selectViewportStyles } 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),
+    class: cn(selectViewportStyles(), className),
     ...restProps,
   });
 </script>

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

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

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

@@ -1,2 +1,2 @@
 export { default as Async } from './select.async.svelte';
-export { default as Root } from './select.svelte';
+export { createSelectCollection, default as Root } from './select.svelte';

package/dist/components/select/exports.js

@@ -1,2 +1,2 @@
 export { default as Async } from './select.async.svelte';
-export { default as Root } from './select.svelte';
+export { createSelectCollection, default as Root } from './select.svelte';