@casinogate/ui 1.0.1 → 1.1.0

package/dist/assets/css/root.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.15 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -8,6 +8,8 @@
     --cgui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --cgui-spacing: 0.25rem;
+    --cgui-text-sm: 0.875rem;
+    --cgui-text-sm--line-height: calc(1.25 / 0.875);
     --cgui-font-weight-normal: 400;
     --cgui-font-weight-medium: 500;
     --cgui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
@@ -128,7 +130,9 @@
     ::placeholder {
       color: currentcolor;
       @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, currentcolor 50%, transparent);
+        & {
+          color: color-mix(in oklab, currentcolor 50%, transparent);
+        }
       }
     }
   }
@@ -207,6 +211,12 @@
   .cgui\:z-1 {
     z-index: 1;
   }
+  .cgui\:\!m-0 {
+    margin: calc(var(--cgui-spacing) * 0) !important;
+  }
+  .cgui\:my-4 {
+    margin-block: calc(var(--cgui-spacing) * 4);
+  }
   .cgui\:scrollbar-thin {
     &::-webkit-scrollbar-track {
       background-color: var(--scrollbar-track);
@@ -310,6 +320,9 @@
   .cgui\:h-8\.5 {
     height: calc(var(--cgui-spacing) * 8.5);
   }
+  .cgui\:h-9 {
+    height: calc(var(--cgui-spacing) * 9);
+  }
   .cgui\:h-10 {
     height: calc(var(--cgui-spacing) * 10);
   }
@@ -328,6 +341,9 @@
   .cgui\:h-\[300px\] {
     height: 300px;
   }
+  .cgui\:h-auto {
+    height: auto;
+  }
   .cgui\:h-full {
     height: 100%;
   }
@@ -435,6 +451,9 @@
   .cgui\:items-center {
     align-items: center;
   }
+  .cgui\:items-stretch {
+    align-items: stretch;
+  }
   .cgui\:justify-center {
     justify-content: center;
   }
@@ -456,6 +475,23 @@
   .cgui\:gap-4 {
     gap: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--cgui-spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--cgui-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
+  .cgui\:space-x-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--cgui-spacing) * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--cgui-spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
+  .cgui\:self-stretch {
+    align-self: stretch;
+  }
   .cgui\:overflow-auto {
     overflow: auto;
   }
@@ -528,7 +564,9 @@
   .cgui\:bg-neutral-40\/50 {
     background-color: var(--cg-ui-palette-neutral-40);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 50%, transparent);
+      & {
+        background-color: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 50%, transparent);
+      }
     }
   }
   .cgui\:bg-primary-10 {
@@ -537,6 +575,9 @@
   .cgui\:bg-primary-80 {
     background-color: var(--cg-ui-palette-primary-80);
   }
+  .cgui\:bg-stroke-divider {
+    background-color: var(--cg-ui-palette-neutral-20);
+  }
   .cgui\:bg-surface-light {
     background-color: var(--cg-ui-palette-neutral-20);
   }
@@ -568,14 +609,18 @@
   .cgui\:from-neutral-40\/30 {
     --tw-gradient-from: var(--cg-ui-palette-neutral-40);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-from: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 30%, transparent);
+      & {
+        --tw-gradient-from: color-mix(in oklab, var(--cg-ui-palette-neutral-40) 30%, transparent);
+      }
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .cgui\:to-neutral-10\/0 {
     --tw-gradient-to: var(--cg-ui-palette-neutral-10);
     @supports (color: color-mix(in lab, red, red)) {
-      --tw-gradient-to: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 0%, transparent);
+      & {
+        --tw-gradient-to: color-mix(in oklab, var(--cg-ui-palette-neutral-10) 0%, transparent);
+      }
     }
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
@@ -662,10 +707,22 @@
     font-size: var(--cg-ui-fz-body-2);
     line-height: var(--tw-leading, var(--cg-ui-lh-body-2));
   }
+  .cgui\:text-caption {
+    font-size: var(--cg-ui-fz-caption);
+    line-height: var(--tw-leading, var(--cg-ui-lh-caption));
+  }
   .cgui\:text-caption-2 {
     font-size: var(--cg-ui-fz-caption-2);
     line-height: var(--tw-leading, var(--cg-ui-lh-caption-2));
   }
+  .cgui\:text-sm {
+    font-size: var(--cgui-text-sm);
+    line-height: var(--tw-leading, var(--cgui-text-sm--line-height));
+  }
+  .cgui\:leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
   .cgui\:font-medium {
     --tw-font-weight: var(--cgui-font-weight-medium);
     font-weight: var(--cgui-font-weight-medium);
@@ -683,12 +740,18 @@
   .cgui\:text-fg-darkest {
     color: var(--cg-ui-palette-neutral-100);
   }
+  .cgui\:text-fg-error {
+    color: var(--cg-ui-palette-system-error-100);
+  }
   .cgui\:text-fg-medium {
     color: var(--cg-ui-palette-neutral-60);
   }
   .cgui\:text-fg-regular {
     color: var(--cg-ui-palette-neutral-50);
   }
+  .cgui\:text-fg-semilight {
+    color: var(--cg-ui-palette-neutral-40);
+  }
   .cgui\:text-fg-white {
     color: var(--cg-ui-palette-neutral-0);
   }
@@ -921,6 +984,11 @@
       opacity: 50%;
     }
   }
+  .cgui\:has-\[\>\[data-slot\=button-group\]\]\:gap-2 {
+    &:has(>[data-slot=button-group]) {
+      gap: calc(var(--cgui-spacing) * 2);
+    }
+  }
   .cgui\:aria-invalid\:border-stroke-error {
     &[aria-invalid="true"] {
       border-color: var(--cg-ui-palette-system-error-100);
@@ -1012,6 +1080,31 @@
       padding-right: calc(var(--cgui-spacing) * 14);
     }
   }
+  .cgui\:data-\[orientation\=horizontal\]\:h-px {
+    &[data-orientation="horizontal"] {
+      height: 1px;
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:w-full {
+    &[data-orientation="horizontal"] {
+      width: 100%;
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:h-auto {
+    &[data-orientation="vertical"] {
+      height: auto;
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:h-full {
+    &[data-orientation="vertical"] {
+      height: 100%;
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:w-px {
+    &[data-orientation="vertical"] {
+      width: 1px;
+    }
+  }
   .cgui\:data-\[placeholder\]\:text-fg-regular {
     &[data-placeholder] {
       color: var(--cg-ui-palette-neutral-50);
@@ -1194,6 +1287,74 @@
       border-width: 0px;
     }
   }
+  .cgui\:\[\&\>\*\]\:focus-visible\:relative {
+    &>* {
+      &:focus-visible {
+        position: relative;
+      }
+    }
+  }
+  .cgui\:\[\&\>\*\]\:focus-visible\:z-10 {
+    &>* {
+      &:focus-visible {
+        z-index: 10;
+      }
+    }
+  }
+  .cgui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none {
+    &>*:not(:first-child) {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+  }
+  .cgui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-l-none {
+    &>*:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  .cgui\:\[\&\>\*\:not\(\:first-child\)\]\:border-t-0 {
+    &>*:not(:first-child) {
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0px;
+    }
+  }
+  .cgui\:\[\&\>\*\:not\(\:first-child\)\]\:border-l-0 {
+    &>*:not(:first-child) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 0px;
+    }
+  }
+  .cgui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-r-none {
+    &>*:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .cgui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none {
+    &>*:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+  .cgui\:has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-r-md {
+    &:has(*:is(select[aria-hidden=true]:last-child)) {
+      &>[data-slot=select-trigger]:last-of-type {
+        border-top-right-radius: calc(var(--cg-ui-number-md) * 1px);
+        border-bottom-right-radius: calc(var(--cg-ui-number-md) * 1px);
+      }
+    }
+  }
+  .cgui\:\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit {
+    &>[data-slot=select-trigger]:not([class*='w-']) {
+      width: fit-content;
+    }
+  }
+  .cgui\:\[\&\>input\]\:flex-1 {
+    &>input {
+      flex: 1;
+    }
+  }
 }
 :root {
   --cg-ui-primary-hue: 220;
@@ -1446,6 +1607,16 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1493,6 +1664,10 @@
   inherits: false;
   initial-value: 100%;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -1606,6 +1781,8 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
       --tw-gradient-from: #0000;
@@ -1616,6 +1793,7 @@
       --tw-gradient-from-position: 0%;
       --tw-gradient-via-position: 50%;
       --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;

package/dist/components/button-group/button-group.stories.svelte

@@ -0,0 +1,59 @@
+<script lang="ts" module>
+  import { Button } from '../button/index.js';
+  import { Input } from '../input/index.js';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import ButtonGroupRoot from './components/button-group.root.svelte';
+  import { ButtonGroup } from './index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['orientation'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/ButtonGroup',
+    component: ButtonGroupRoot,
+    tags: ['autodocs'],
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof ButtonGroup.Root>;
+
+  const args: Args = {
+    orientation: 'horizontal',
+  };
+</script>
+
+<Story name="Basic" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <ButtonGroup.Root {...args} class="cgui:w-full">
+      <Button class="cgui:flex-1">Button 1</Button>
+      <Button class="cgui:flex-1">Button 2</Button>
+      <Button class="cgui:flex-1">Button 3</Button>
+    </ButtonGroup.Root>
+  {/snippet}
+</Story>
+
+<Story name="Input with Button" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <ButtonGroup.Root {...args} class="cgui:w-full">
+      <Input placeholder="Search" />
+      <Button w="clean" class="cgui:h-9">OK</Button>
+    </ButtonGroup.Root>
+  {/snippet}
+</Story>
+
+<Story name="With Separator" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <ButtonGroup.Root {...args} class="cgui:w-full">
+      <Button class="cgui:flex-1">Button 1</Button>
+      <ButtonGroup.Separator />
+      <Button class="cgui:flex-1">Button 2</Button>
+      <ButtonGroup.Separator />
+      <Button class="cgui:flex-1">Button 3</Button>
+    </ButtonGroup.Root>
+  {/snippet}
+</Story>

package/dist/components/button-group/button-group.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import { ButtonGroup } 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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ButtonGroup: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ButtonGroup = InstanceType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/button-group/components/button-group.root.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+  type ButtonGroupRootPropsWithoutHTML = WithElementRef<WithChildren<{}>> & ButtonGroupVariantsProps;
+
+  export type ButtonGroupRootProps = ButtonGroupRootPropsWithoutHTML &
+    Without<PrimitiveDivAttributes, ButtonGroupRootPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { useId } from 'bits-ui';
+  import { box, type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import type { ButtonGroupVariantsProps } from '../styles.js';
+  import { ButtonGroupStylesContext, buttonGroupStyles } from '../styles.js';
+
+  let {
+    children,
+    ref = $bindable(null),
+    id = useId(),
+    orientation = 'horizontal',
+    class: className,
+    ...restProps
+  }: ButtonGroupRootProps = $props();
+
+  const variants = $derived(buttonGroupStyles({ orientation }));
+
+  $inspect(orientation);
+
+  ButtonGroupStylesContext.set(box.with(() => variants));
+</script>
+
+<div bind:this={ref} class={cn(variants.root(), className)} {...restProps} {...{ [SLOT_ATTR_NAME]: 'button-group' }}>
+  {@render children?.()}
+</div>

package/dist/components/button-group/components/button-group.root.svelte.d.ts

@@ -0,0 +1,8 @@
+type ButtonGroupRootPropsWithoutHTML = WithElementRef<WithChildren<{}>> & ButtonGroupVariantsProps;
+export type ButtonGroupRootProps = ButtonGroupRootPropsWithoutHTML & Without<PrimitiveDivAttributes, ButtonGroupRootPropsWithoutHTML>;
+import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChildren, type WithElementRef, type Without } from 'svelte-toolbelt';
+import type { ButtonGroupVariantsProps } from '../styles.js';
+declare const ButtonGroup: import("svelte").Component<ButtonGroupRootProps, {}, "ref">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/button-group/components/button-group.separator.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Separator } from '../../separator/index.js';
+  import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import type { ComponentProps } from 'svelte';
+  import { ButtonGroupStylesContext } from '../styles.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    orientation = 'vertical',
+    ...restProps
+  }: ComponentProps<typeof Separator.Root> = $props();
+
+  const styles = ButtonGroupStylesContext.get();
+</script>
+
+<Separator.Root
+  bind:ref
+  {orientation}
+  class={cn(styles.current.separator(), className)}
+  {...{ [SLOT_ATTR_NAME]: 'button-group-separator' }}
+  {...restProps}
+/>

package/dist/components/button-group/components/button-group.separator.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const ButtonGroup: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/button-group/index.d.ts

@@ -0,0 +1,16 @@
+import { type ButtonGroupRootProps } from './components/button-group.root.svelte';
+export declare const ButtonGroup: {
+    readonly Root: import("svelte").Component<ButtonGroupRootProps, {}, "ref">;
+    readonly Separator: import("svelte").Component<Omit<{
+        orientation?: import("bits-ui").Orientation;
+        decorative?: boolean;
+    }, "child" | "children"> & {
+        child?: import("svelte").Snippet<[{
+            props: Record<string, unknown>;
+        }]> | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
+        style?: import("bits-ui").StyleProperties | string | null | undefined;
+        ref?: HTMLElement | null | undefined;
+    } & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+};
+export type { ButtonGroupRootProps };

package/dist/components/button-group/index.js

@@ -0,0 +1,6 @@
+import Root, {} from './components/button-group.root.svelte';
+import Separator from './components/button-group.separator.svelte';
+export const ButtonGroup = {
+    Root,
+    Separator,
+};

package/dist/components/button-group/styles.d.ts

@@ -0,0 +1,47 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const buttonGroupStyles: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+            separator: string;
+        };
+    };
+}, {
+    root: string[];
+    separator: string;
+}, undefined, {
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+            separator: string;
+        };
+    };
+}, {
+    root: string[];
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: {
+            root: string;
+        };
+        vertical: {
+            root: string;
+            separator: string;
+        };
+    };
+}, {
+    root: string[];
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ButtonGroupVariantsProps = VariantProps<typeof buttonGroupStyles>;
+type ButtonGroupStylesContextValues = ReadableBox<ReturnType<typeof buttonGroupStyles>>;
+export declare const ButtonGroupStylesContext: Context<ButtonGroupStylesContextValues>;
+export {};

package/dist/components/button-group/styles.js

@@ -0,0 +1,27 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const buttonGroupStyles = tv({
+    slots: {
+        root: [
+            'cgui:flex cgui:w-fit cgui:items-stretch',
+            'cgui:has-[>[data-slot=button-group]]:gap-2',
+            'cgui:[&>*]:focus-visible:relative cgui:[&>*]:focus-visible:z-10',
+            'cgui:[&>input]:flex-1',
+            "cgui:has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md cgui:[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit",
+        ],
+        separator: 'cgui:relative cgui:!m-0 cgui:self-stretch cgui:data-[orientation=vertical]:h-auto',
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                root: 'cgui:[&>*:not(:first-child)]:rounded-l-none cgui:[&>*:not(:first-child)]:border-l-0 cgui:[&>*:not(:last-child)]:rounded-r-none',
+            },
+            vertical: {
+                root: 'cgui:flex-col cgui:[&>*:not(:first-child)]:rounded-t-none cgui:[&>*:not(:first-child)]:border-t-0 cgui:[&>*:not(:last-child)]:rounded-b-none',
+                separator: 'cgui:h-auto',
+            },
+        },
+    },
+});
+export const ButtonGroupStylesContext = new Context(keyWithPrefix('button-group-styles'));

package/dist/components/data-table/components/data-table.svelte.js

@@ -1,7 +1,7 @@
+import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
 import { keyWithPrefix } from '../../../internal/utils/common.js';
 import { Context, useMutationObserver, watch } from 'runed';
 import { attachRef } from 'svelte-toolbelt';
-const SLOT_ATTR_NAME = 'data-slot';
 const SLOT_ATTR_VALUES = {
     root: 'root',
     header: 'header',

package/dist/components/field/components/field.control.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" module>
+  export type FieldControlProps = {
+    children?: Snippet<[{ props: Record<string, unknown> }]>;
+
+    id?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { useId } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { FieldControlState } from './field.svelte.js';
+
+  let { children, id = useId(), ...restProps }: FieldControlProps = $props();
+
+  const controlState = FieldControlState.create({
+    id: box.with(() => id),
+  });
+
+  const mergedProps = $derived(mergeProps(restProps, controlState.props));
+</script>
+
+{@render children?.({ props: mergedProps })}

package/dist/components/field/components/field.control.svelte.d.ts

@@ -0,0 +1,10 @@
+export type FieldControlProps = {
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    id?: string;
+};
+import type { Snippet } from 'svelte';
+declare const Field: import("svelte").Component<FieldControlProps, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;