@casinogate/ui 1.0.1 → 1.1.1

package/dist/components/field/components/field.description.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+  type FieldDescriptionPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+
+  export type FieldDescriptionProps = FieldDescriptionPropsWithoutHTML &
+    Without<PrimitiveSpanAttributes, FieldDescriptionPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { PrimitiveSpanAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { useId } from 'bits-ui';
+
+  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { FieldStylesContext } from '../styles.js';
+  import { FieldDescriptionState } from './field.svelte.js';
+
+  let {
+    children,
+    child,
+    ref = $bindable(null),
+    id = useId(),
+    class: className,
+    ...restProps
+  }: FieldDescriptionProps = $props();
+
+  const styles = FieldStylesContext.get();
+
+  const descriptionState = FieldDescriptionState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, descriptionState.props, { class: cn(styles.current.description(), className) })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

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

@@ -0,0 +1,7 @@
+type FieldDescriptionPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type FieldDescriptionProps = FieldDescriptionPropsWithoutHTML & Without<PrimitiveSpanAttributes, FieldDescriptionPropsWithoutHTML>;
+import type { PrimitiveSpanAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+declare const Field: import("svelte").Component<FieldDescriptionProps, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/field/components/field.error.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+  type FieldErrorPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+
+  export type FieldErrorProps = FieldErrorPropsWithoutHTML &
+    Without<PrimitiveSpanAttributes, FieldErrorPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { PrimitiveSpanAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { useId } from 'bits-ui';
+  import { FieldStylesContext } from '../styles.js';
+  import { FieldErrorState } from './field.svelte.js';
+
+  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+
+  let {
+    children,
+    child,
+    ref = $bindable(null),
+    id = useId(),
+    class: className,
+    ...restProps
+  }: FieldErrorProps = $props();
+
+  const styles = FieldStylesContext.get();
+
+  const errorState = FieldErrorState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, errorState.props, { class: cn(styles.current.error(), className) })
+  );
+</script>
+
+{#if errorState.root.opts.invalid.current}
+  {#if child}
+    {@render child({ props: mergedProps })}
+  {:else}
+    <span {...mergedProps}>
+      {@render children?.()}
+    </span>
+  {/if}
+{/if}

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

@@ -0,0 +1,7 @@
+type FieldErrorPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type FieldErrorProps = FieldErrorPropsWithoutHTML & Without<PrimitiveSpanAttributes, FieldErrorPropsWithoutHTML>;
+import type { PrimitiveSpanAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+declare const Field: import("svelte").Component<FieldErrorProps, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/field/components/field.label.svelte

@@ -0,0 +1,49 @@
+<script lang="ts" module>
+  type FieldLabelPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+
+  export type FieldLabelProps = FieldLabelPropsWithoutHTML &
+    Without<PrimitiveLabelAttributes, FieldLabelPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import { FieldLabelState } from './field.svelte.js';
+
+  import { FieldStylesContext } from '../styles.js';
+
+  import type { PrimitiveLabelAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { useId } from 'bits-ui';
+
+  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+
+  let {
+    children,
+    child,
+    ref = $bindable(null),
+    id = useId(),
+    class: className,
+    ...restProps
+  }: FieldLabelProps = $props();
+
+  const styles = FieldStylesContext.get();
+
+  const labelState = FieldLabelState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, labelState.props, { class: cn(styles.current.label(), className) })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <label {...mergedProps}>
+    {@render children?.()}
+  </label>
+{/if}

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

@@ -0,0 +1,7 @@
+type FieldLabelPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+export type FieldLabelProps = FieldLabelPropsWithoutHTML & Without<PrimitiveLabelAttributes, FieldLabelPropsWithoutHTML>;
+import type { PrimitiveLabelAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+declare const Field: import("svelte").Component<FieldLabelProps, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/field/components/field.root.svelte

@@ -0,0 +1,63 @@
+<script lang="ts" module>
+  type FieldRootPropsWithoutHTML = WithElementRef<
+    WithChild<{
+      invalid?: boolean;
+
+      disabled?: boolean;
+
+      readOnly?: boolean;
+
+      required?: boolean;
+    }>
+  >;
+
+  export type FieldRootProps = FieldRootPropsWithoutHTML & Without<PrimitiveDivAttributes, FieldRootPropsWithoutHTML>;
+</script>
+
+<script lang="ts">
+  import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { useId } from 'bits-ui';
+  import { box, mergeProps, type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+  import { fieldStyles, FieldStylesContext } from '../styles.js';
+  import { FieldRootState } from './field.svelte.js';
+
+  let {
+    children,
+    child,
+    class: className,
+    ref = $bindable(null),
+    id = useId(),
+    invalid = false,
+    disabled = false,
+    readOnly = false,
+    required = false,
+    ...restProps
+  }: FieldRootProps = $props();
+
+  const rootState = FieldRootState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+    invalid: box.with(() => invalid),
+    disabled: box.with(() => disabled),
+    readOnly: box.with(() => readOnly),
+    required: box.with(() => required),
+  });
+
+  const variants = $derived(fieldStyles());
+
+  FieldStylesContext.set(box.with(() => variants));
+
+  const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(variants.root(), className) }));
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

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

@@ -0,0 +1,12 @@
+type FieldRootPropsWithoutHTML = WithElementRef<WithChild<{
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+}>>;
+export type FieldRootProps = FieldRootPropsWithoutHTML & Without<PrimitiveDivAttributes, FieldRootPropsWithoutHTML>;
+import type { PrimitiveDivAttributes } from '../../../internal/types/html-attributes.js';
+import { type WithChild, type WithElementRef, type Without } from 'svelte-toolbelt';
+declare const Field: import("svelte").Component<FieldRootProps, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

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

@@ -0,0 +1,83 @@
+import type { RefAttachment } from '../../../internal/types/common.js';
+import { type ReadableBoxedValues, type WithRefProps } from 'svelte-toolbelt';
+type FieldRootStateOpts = WithRefProps<ReadableBoxedValues<{
+    invalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+}>>;
+type Ids = {
+    control?: string;
+    label?: string;
+    error?: string;
+    description?: string;
+};
+export declare class FieldRootState {
+    #private;
+    static create(opts: FieldRootStateOpts): FieldRootState;
+    readonly opts: FieldRootStateOpts;
+    readonly attachment: RefAttachment;
+    constructor(opts: FieldRootStateOpts);
+    setId(key: keyof Ids, id: string): void;
+    getId(key: keyof Ids): string | undefined;
+    readonly props: {
+        readonly id: string;
+        readonly 'data-invalid': "" | undefined;
+        readonly 'data-disabled': "" | undefined;
+        readonly 'data-read-only': "" | undefined;
+        readonly 'data-required': "" | undefined;
+        readonly "data-slot": "field-root";
+    };
+}
+type FieldLabelStateOpts = WithRefProps<ReadableBoxedValues<{}>>;
+export declare class FieldLabelState {
+    static create(opts: FieldLabelStateOpts): FieldLabelState;
+    readonly opts: FieldLabelStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: FieldRootState;
+    constructor(opts: FieldLabelStateOpts, root: FieldRootState);
+    readonly props: {
+        readonly id: string;
+        readonly for: string | undefined;
+        readonly 'data-invalid': "" | undefined;
+        readonly "data-slot": "field-label";
+    };
+}
+type FieldErrorStateOpts = WithRefProps<ReadableBoxedValues<{}>>;
+export declare class FieldErrorState {
+    static create(opts: FieldErrorStateOpts): FieldErrorState;
+    readonly opts: FieldErrorStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: FieldRootState;
+    constructor(opts: FieldErrorStateOpts, root: FieldRootState);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "field-error";
+    };
+}
+type FieldDescriptionStateOpts = WithRefProps<ReadableBoxedValues<{}>>;
+export declare class FieldDescriptionState {
+    static create(opts: FieldDescriptionStateOpts): FieldDescriptionState;
+    readonly opts: FieldDescriptionStateOpts;
+    readonly attachment: RefAttachment;
+    readonly root: FieldRootState;
+    constructor(opts: FieldDescriptionStateOpts, root: FieldRootState);
+    readonly props: {
+        readonly id: string;
+        readonly "data-slot": "field-description";
+    };
+}
+type FieldControlStateOpts = ReadableBoxedValues<{
+    id: string;
+}>;
+export declare class FieldControlState {
+    static create(opts: FieldControlStateOpts): FieldControlState;
+    readonly opts: FieldControlStateOpts;
+    readonly root: FieldRootState;
+    constructor(opts: FieldControlStateOpts, root: FieldRootState);
+    readonly props: {
+        readonly id: string;
+        readonly 'aria-invalid': boolean;
+    };
+}
+export {};

package/dist/components/field/components/field.svelte.js

@@ -0,0 +1,121 @@
+import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+import { getDataActive, getDataDisabled } from '../../../internal/utils/attrs.js';
+import { Context } from 'runed';
+import { attachRef } from 'svelte-toolbelt';
+const SLOT_ATTR_VALUES = {
+    root: 'field-root',
+    label: 'field-label',
+    error: 'field-error',
+    description: 'field-description',
+};
+const FieldRootStateContext = new Context('field-root-state');
+export class FieldRootState {
+    static create(opts) {
+        return FieldRootStateContext.set(new FieldRootState(opts));
+    }
+    opts;
+    attachment;
+    #ids = $state({});
+    constructor(opts) {
+        this.opts = opts;
+        this.attachment = attachRef(opts.ref);
+    }
+    setId(key, id) {
+        this.#ids = { ...this.#ids, [key]: id };
+    }
+    getId(key) {
+        return this.#ids[key];
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'data-invalid': getDataActive(this.opts.invalid.current),
+        'data-disabled': getDataDisabled(this.opts.disabled.current),
+        'data-read-only': getDataActive(this.opts.readOnly.current),
+        'data-required': getDataActive(this.opts.required.current),
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.root,
+        ...this.attachment,
+    }));
+}
+export class FieldLabelState {
+    static create(opts) {
+        return new FieldLabelState(opts, FieldRootStateContext.get());
+    }
+    opts;
+    attachment;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+        $effect.pre(() => {
+            this.root.setId('label', this.opts.id.current);
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        for: this.root.getId('control'),
+        'data-invalid': getDataActive(this.root.opts.invalid.current),
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.label,
+        ...this.attachment,
+    }));
+}
+export class FieldErrorState {
+    static create(opts) {
+        return new FieldErrorState(opts, FieldRootStateContext.get());
+    }
+    opts;
+    attachment;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+        $effect.pre(() => {
+            this.root.setId('error', this.opts.id.current);
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.error,
+        ...this.attachment,
+    }));
+}
+export class FieldDescriptionState {
+    static create(opts) {
+        return new FieldDescriptionState(opts, FieldRootStateContext.get());
+    }
+    opts;
+    attachment;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(opts.ref);
+        $effect.pre(() => {
+            this.root.setId('description', this.opts.id.current);
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.description,
+        ...this.attachment,
+    }));
+}
+export class FieldControlState {
+    static create(opts) {
+        return new FieldControlState(opts, FieldRootStateContext.get());
+    }
+    opts;
+    root;
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        $effect.pre(() => {
+            this.root.setId('control', this.opts.id.current);
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'aria-invalid': this.root.opts.invalid.current,
+    }));
+}

package/dist/components/field/field.stories.svelte

@@ -0,0 +1,51 @@
+<script lang="ts" module>
+  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 { Field, FieldPrimitive } from './index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: [],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Field',
+    component: FieldPrimitive.Root,
+    tags: ['autodocs'],
+  });
+
+  type Args = ComponentProps<typeof FieldPrimitive.Root>;
+
+  const args: Args = {};
+</script>
+
+<Story name="Basic" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Field {...args} label="Label" error="Sunt enim qui culpa qui cupidatat." description="Description" invalid>
+      {#snippet children({ props })}
+        <Input placeholder="Input" {...props} />
+      {/snippet}
+    </Field>
+  {/snippet}
+</Story>
+
+<Story name="Primitive" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <FieldPrimitive.Root {...args} invalid>
+      <FieldPrimitive.Label>Label</FieldPrimitive.Label>
+
+      <FieldPrimitive.Control>
+        {#snippet children({ props })}
+          <Input placeholder="Input" {...props} />
+        {/snippet}
+      </FieldPrimitive.Control>
+
+      <FieldPrimitive.Error>Sunt enim qui culpa qui cupidatat.</FieldPrimitive.Error>
+
+      <FieldPrimitive.Description>Description</FieldPrimitive.Description>
+    </FieldPrimitive.Root>
+  {/snippet}
+</Story>

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

@@ -0,0 +1,19 @@
+import { Field } 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 Field: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Field = InstanceType<typeof Field>;
+export default Field;

package/dist/components/field/field.svelte

@@ -0,0 +1,47 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  export type FieldProps = WithoutChildrenOrChild<FieldRootProps> & {
+    label?: string | Snippet;
+    error?: string | Snippet;
+    description?: string | Snippet;
+    children?: Snippet<[{ props: Record<string, unknown> }]>;
+  };
+</script>
+
+<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';
+  import FieldLabel from './components/field.label.svelte';
+  import FieldRoot, { type FieldRootProps } from './components/field.root.svelte';
+
+  let { label, error, description, ref = $bindable(null), children, ...restProps }: FieldProps = $props();
+</script>
+
+<FieldRoot bind:ref {...restProps}>
+  {#if typeof label === 'string'}
+    <FieldLabel>{label}</FieldLabel>
+  {:else}
+    {@render label?.()}
+  {/if}
+
+  <FieldControl>
+    {#snippet children({ props })}
+      {@render children?.({ props })}
+    {/snippet}
+  </FieldControl>
+
+  {#if typeof error === 'string'}
+    <FieldError>{error}</FieldError>
+  {:else}
+    {@render error?.()}
+  {/if}
+
+  {#if typeof description === 'string'}
+    <FieldDescription>{description}</FieldDescription>
+  {:else}
+    {@render description?.()}
+  {/if}
+</FieldRoot>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+export type FieldProps = WithoutChildrenOrChild<FieldRootProps> & {
+    label?: string | Snippet;
+    error?: string | Snippet;
+    description?: string | Snippet;
+    children?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+import type { WithoutChildrenOrChild } from 'svelte-toolbelt';
+import { type FieldRootProps } from './components/field.root.svelte';
+declare const Field: import("svelte").Component<FieldProps, {}, "ref">;
+type Field = ReturnType<typeof Field>;
+export default Field;

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

@@ -0,0 +1,14 @@
+import { type FieldDescriptionProps } from './components/field.description.svelte';
+import { type FieldErrorProps } from './components/field.error.svelte';
+import { type FieldLabelProps } from './components/field.label.svelte';
+import { type FieldRootProps } from './components/field.root.svelte';
+import Field from './field.svelte';
+export declare const FieldPrimitive: {
+    readonly Root: import("svelte").Component<FieldRootProps, {}, "ref">;
+    readonly Label: import("svelte").Component<FieldLabelProps, {}, "ref">;
+    readonly Error: import("svelte").Component<FieldErrorProps, {}, "ref">;
+    readonly Description: import("svelte").Component<FieldDescriptionProps, {}, "ref">;
+    readonly Control: import("svelte").Component<import("./components/field.control.svelte").FieldControlProps, {}, "">;
+};
+export { Field };
+export type { FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldRootProps };

package/dist/components/field/index.js

@@ -0,0 +1,14 @@
+import FieldControl from './components/field.control.svelte';
+import FieldDescription, {} from './components/field.description.svelte';
+import FieldError, {} from './components/field.error.svelte';
+import FieldLabel, {} from './components/field.label.svelte';
+import FieldRoot, {} from './components/field.root.svelte';
+import Field from './field.svelte';
+export const FieldPrimitive = {
+    Root: FieldRoot,
+    Label: FieldLabel,
+    Error: FieldError,
+    Description: FieldDescription,
+    Control: FieldControl,
+};
+export { Field };

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

@@ -0,0 +1,50 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            label?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            label?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    error: string;
+    description: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            label?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            error?: import("tailwind-variants").ClassValue;
+            description?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    label: string;
+    error: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string;
+    label: string;
+    error: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+export type FieldVariantsProps = VariantProps<typeof fieldStyles>;
+type FieldStylesContextValues = ReadableBox<ReturnType<typeof fieldStyles>>;
+export declare const FieldStylesContext: Context<FieldStylesContextValues>;
+export {};