@casinogate/ui 1.3.5 → 1.3.7

package/dist/assets/css/root.css

@@ -432,6 +432,9 @@
   .cgui\:min-w-42 {
     min-width: calc(var(--cgui-spacing) * 42);
   }
+  .cgui\:min-w-fit {
+    min-width: fit-content;
+  }
   .cgui\:min-w-px {
     min-width: 1px;
   }
@@ -724,6 +727,9 @@
   .cgui\:px-4 {
     padding-inline: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:px-6 {
+    padding-inline: calc(var(--cgui-spacing) * 6);
+  }
   .cgui\:py-1 {
     padding-block: calc(var(--cgui-spacing) * 1);
   }

package/dist/components/segment/components/segment.item.svelte

@@ -12,6 +12,7 @@
     ref = $bindable(null),
     id = useId(uid),
     children,
+    child,
     class: className,
     ...props
   }: SegmentItemProps = $props();
@@ -27,9 +28,13 @@
 
   const styles = SegmentStylesContext.get();
 
-  const mergedProps = $derived(mergeProps(props, itemState.props));
+  const mergedProps = $derived(mergeProps(props, itemState.props, { class: cn(styles.current.item(), className) }));
 </script>
 
-<button class={cn(styles.current.item(), className)} {...mergedProps}>
-  {@render children?.()}
-</button>
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <button {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

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

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

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

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

package/dist/components/segment/exports.js

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

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

@@ -1,2 +1,3 @@
 export * as SegmentPrimitive from './exports-primitive.js';
-export type { SegmentItemProps, SegmentRootProps } from './types.js';
+export * from './exports.js';
+export type { SegmentItemProps, SegmentItemValue, SegmentProps, SegmentRootProps } from './types.js';

package/dist/components/segment/index.js

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

package/dist/components/segment/segment.stories.svelte

@@ -3,11 +3,11 @@
   import type { Parameters } from '@storybook/sveltekit';
 
   import type { ComponentProps } from 'svelte';
-  import { SegmentPrimitive } from './index.js';
+  import { Segment, SegmentPrimitive } from './index.js';
 
   const parameters: Parameters = {
     controls: {
-      include: ['value', 'disabled', 'size', 'variant', 'rounded'],
+      include: ['value', 'disabled', 'size', 'variant', 'rounded', 'spacingX'],
     },
   };
 
@@ -41,3 +41,17 @@
 {/snippet}
 
 <Story name="Basic" {args} {parameters} {template} />
+
+<Story name="Preset" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Segment
+      {...args}
+      items={[
+        { key: '1', label: 'Segment 1', value: '1' },
+        { key: '2', label: 'Segment 2', value: '2' },
+        { key: '3', label: 'Segment 3', value: '3' },
+        { key: '4', label: 'Segment 4', value: '4' },
+      ]}
+    />
+  {/snippet}
+</Story>

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

@@ -1,3 +1,4 @@
+import { Segment } from './index.js';
 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;

package/dist/components/segment/segment.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Item from './components/segment.item.svelte';
+  import Root from './components/segment.root.svelte';
+  import type { SegmentProps } from './types.js';
+
+  let { items, item: itemSnippet, value = $bindable(''), ref = $bindable(null), ...restProps }: SegmentProps = $props();
+</script>
+
+<Root bind:value bind:ref {...restProps}>
+  {#each items as item (item.key)}
+    {#if itemSnippet}
+      <Item value={item.value}>
+        {#snippet child({ props })}
+          {@render itemSnippet?.({ item, props })}
+        {/snippet}
+      </Item>
+    {:else}
+      <Item value={item.value}>
+        {item.label}
+      </Item>
+    {/if}
+  {/each}
+</Root>

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

@@ -0,0 +1,4 @@
+import type { SegmentProps } from './types.js';
+declare const Segment: import("svelte").Component<SegmentProps, {}, "value" | "ref">;
+type Segment = ReturnType<typeof Segment>;
+export default Segment;

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

@@ -30,6 +30,18 @@ export declare const segmentVariants: import("tailwind-variants").TVReturnType<{
             item: string[];
         };
     };
+    spacingX: {
+        sm: {
+            item: string[];
+        };
+        md: {
+            item: string[];
+        };
+        lg: {
+            item: string[];
+        };
+        clear: {};
+    };
 }, {
     root: string[];
     item: string[];
@@ -63,6 +75,18 @@ export declare const segmentVariants: import("tailwind-variants").TVReturnType<{
             item: string[];
         };
     };
+    spacingX: {
+        sm: {
+            item: string[];
+        };
+        md: {
+            item: string[];
+        };
+        lg: {
+            item: string[];
+        };
+        clear: {};
+    };
 }, {
     root: string[];
     item: string[];
@@ -96,6 +120,18 @@ export declare const segmentVariants: import("tailwind-variants").TVReturnType<{
             item: string[];
         };
     };
+    spacingX: {
+        sm: {
+            item: string[];
+        };
+        md: {
+            item: string[];
+        };
+        lg: {
+            item: string[];
+        };
+        clear: {};
+    };
 }, {
     root: string[];
     item: string[];

package/dist/components/segment/styles.js

@@ -9,7 +9,7 @@ export const segmentVariants = tv({
             'cgui:data-[disabled=""]:opacity-50 cgui:data-[disabled=""]:cursor-not-allowed cgui:data-[disabled=""]:pointer-events-none',
         ],
         item: [
-            'cgui:flex cgui:items-center cgui:justify-center cgui:flex-1',
+            'cgui:flex cgui:items-center cgui:justify-center cgui:min-w-fit',
             'cgui:font-medium cgui:text-body-2',
             'cgui:rounded-[inherit]',
             'cgui:cursor-pointer cgui:overflow-hidden cgui:select-none',
@@ -53,6 +53,18 @@ export const segmentVariants = tv({
                 item: ['cgui:h-11'],
             },
         },
+        spacingX: {
+            sm: {
+                item: ['cgui:px-2'],
+            },
+            md: {
+                item: ['cgui:px-4'],
+            },
+            lg: {
+                item: ['cgui:px-6'],
+            },
+            clear: {},
+        },
     },
 });
 export const SegmentStylesContext = new Context(keyWithPrefix('segment-styles'));

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

@@ -1,5 +1,6 @@
 import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
-import type { WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { Snippet } from 'svelte';
+import type { WithChild, WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
 import type { SegmentVariantsProps } from './styles.js';
 type SegmentRootPropsWithouitHTML = WithElementRef<WithChildren<{
     value?: string;
@@ -7,8 +8,20 @@ type SegmentRootPropsWithouitHTML = WithElementRef<WithChildren<{
     disabled?: boolean;
 } & SegmentVariantsProps>>;
 export type SegmentRootProps = SegmentRootPropsWithouitHTML & Without<PrimitiveDivAttributes, SegmentRootPropsWithouitHTML>;
-type SegmentItemPropsWithoutHTML = WithElementRef<WithChildren<{
+type SegmentItemPropsWithoutHTML = WithElementRef<WithChild<{
     value: string;
 }>>;
 export type SegmentItemProps = SegmentItemPropsWithoutHTML & Without<PrimitiveButtonAttributes, SegmentItemPropsWithoutHTML>;
+export type SegmentItemValue = {
+    key: string | number;
+    label: string;
+    value: string;
+};
+export type SegmentProps = SegmentRootProps & {
+    items: SegmentItemValue[];
+    item?: Snippet<[{
+        item: SegmentItemValue;
+        props: Record<string, unknown>;
+    }]>;
+};
 export {};

package/package.json

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