@casinogate/ui 1.11.14 → 2.0.0

package/dist/primitives/dropdown/styles.js

@@ -0,0 +1,111 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const dropdownTriggerStyles = tv({
+    base: [
+        'cgui:cursor-pointer',
+        'cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none cgui:disabled:opacity-50',
+    ],
+});
+export const dropdownContentStyles = tv({
+    base: [
+        'cgui:max-h-(--bits-dropdown-menu-content-available-height)',
+        'cgui:scrollbar-thin  cgui:scroll-smooth',
+        'cgui:scrollbar-track-surface-lightest cgui:scrollbar-thumb-surface-light cgui:scrollbar-thumb-rounded-full cgui:scrollbar-track-rounded-full',
+        'cgui:overflow-x-hidden cgui:overflow-y-auto',
+        'cgui:outline-none',
+        'cgui:z-(--cg-ui-z-index-dropdown) cgui:origin-(--bits-dropdown-menu-content-transform-origin)',
+        'cgui:data-[state=open]:animate-in cgui:data-[state=open]:fade-in-0  cgui:data-[state=open]:zoom-in-95',
+        'cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=closed]:zoom-out-95',
+        'cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-end-2 cgui:data-[side=right]:slide-in-from-start-2 cgui:data-[side=top]:slide-in-from-bottom-2',
+    ],
+    variants: {
+        variant: {
+            default: ['cgui:bg-surface-white'],
+            none: [],
+        },
+        w: {
+            default: ['cgui:min-w-(--bits-dropdown-menu-anchor-width)'],
+            auto: ['cgui:w-auto'],
+            initial: [],
+        },
+        shadow: {
+            true: ['cgui:shadow-dropdown'],
+        },
+        rounded: {
+            default: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+            none: [],
+        },
+        gap: {
+            default: ['cgui:p-1'],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        w: 'default',
+        shadow: true,
+        rounded: 'default',
+        gap: 'default',
+    },
+});
+export const dropdownItemStyles = tv({
+    base: [
+        'cgui:flex cgui:items-center cgui:gap-1.5 cgui:w-full',
+        'cgui:text-body cgui:text-fg-dark cgui:font-normal cgui:select-none',
+        'cgui:overflow-hidden cgui:whitespace-nowrap cgui:outline-none',
+        'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4.5',
+        'cgui:transition-[background-color,color,ring,outline,border-color] cgui:duration-250 cgui:ease-in-out',
+        'cgui:data-highlighted:bg-surface-lightest',
+        'cgui:data-[disabled]:cursor-not-allowed cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50',
+    ],
+    variants: {
+        gap: {
+            default: ['cgui:px-2 cgui:py-1'],
+            none: [],
+        },
+        rounded: {
+            default: ['cgui:rounded-xxs'],
+            xs: ['cgui:rounded-xs'],
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        gap: 'default',
+        rounded: 'default',
+    },
+});
+export const dropdownSeparatorStyles = tv({
+    base: ['cgui:bg-stroke-divider cgui:shrink-0  cgui:my-1'],
+    variants: {
+        orientation: {
+            horizontal: ['cgui:h-px cgui:w-full cgui:my-1'],
+            vertical: ['cgui:w-px cgui:h-full cgui:mx-1'],
+        },
+    },
+});
+export const dropdownGroupStyles = tv({
+    base: [],
+});
+export const dropdownGroupHeadingStyles = tv({
+    base: ['cgui:px-2 cgui:py-1.5 cgui:data-[inset]:ps-8', 'cgui:text-caption cgui:text-fg-regular cgui:font-normal'],
+});
+export const dropdownSubTriggerStyles = tv({
+    extend: dropdownItemStyles,
+    base: [],
+});
+export const dropdownSubContentStyles = tv({
+    extend: dropdownContentStyles,
+    base: [],
+});
+export const dropdownSubItemStyles = tv({
+    extend: dropdownItemStyles,
+    base: ['cgui:min-w-35'],
+});

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

@@ -0,0 +1,13 @@
+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 { DropdownContentVariantsProps, DropdownGroupHeadingVariantsProps, DropdownGroupVariantsProps, DropdownItemVariantsProps, DropdownSeparatorVariantsProps, DropdownSubContentVariantsProps, DropdownSubTriggerVariantsProps, DropdownTriggerVariantsProps } from './styles.js';
+export type DropdownRootProps = DropdownMenuRootPropsPrimitive;
+export type DropdownTriggerProps = DropdownMenuTriggerPropsPrimitive & DropdownTriggerVariantsProps;
+export type DropdownContentProps = DropdownMenuContentPropsPrimitive & DropdownContentVariantsProps;
+export type DropdownGroupProps = DropdownMenuGroupPropsPrimitive & DropdownGroupVariantsProps;
+export type DropdownItemProps = DropdownMenuItemPropsPrimitive & DropdownItemVariantsProps;
+export type DropdownSubProps = DropdownMenuSubPropsPrimitive;
+export type DropdownSubTriggerProps = DropdownMenuSubTriggerPropsPrimitive & DropdownSubTriggerVariantsProps;
+export type DropdownSubContentProps = DropdownMenuSubContentPropsPrimitive & DropdownSubContentVariantsProps;
+export type DropdownPortalProps = DropdownMenuPortalPropsPrimitive;
+export type DropdownGroupHeadingProps = DropdownMenuGroupHeadingPropsPrimitive & DropdownGroupHeadingVariantsProps;
+export type DropdownSeparatorProps = DropdownMenuSeparatorPropsPrimitive & DropdownSeparatorVariantsProps;

package/dist/primitives/dropdown/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,26 @@
+<script lang="ts" module>
+  export type FieldControlProps = {
+    children?: Snippet<[{ props: Record<string, unknown> }]>;
+
+    id?: string;
+  };
+</script>
+
+<script lang="ts">
+  import { useId } from '../../../internal/utils/common.js';
+  import type { Snippet } from 'svelte';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { FieldControlState } from './field.svelte.js';
+
+  const uid = $props.id();
+
+  let { children, id = useId(uid), ...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/primitives/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;

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

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { fieldDescriptionVariants } from '../styles.js';
+  import type { FieldDescriptionProps } from '../types.js';
+  import { FieldDescriptionState } from './field.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    children,
+    child,
+    ref = $bindable(null),
+    id = useId(uid),
+    class: className,
+    ...restProps
+  }: FieldDescriptionProps = $props();
+
+  const descriptionState = FieldDescriptionState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, descriptionState.props, { class: cn(fieldDescriptionVariants({}), className) })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

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

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

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import type { FieldErrorProps } from '../types.js';
+  import { FieldErrorState } from './field.svelte.js';
+
+  import { fieldErrorVariants } from '../styles.js';
+
+  import { box, mergeProps } from 'svelte-toolbelt';
+
+  const uid = $props.id();
+
+  let {
+    children,
+    child,
+    ref = $bindable(null),
+    id = useId(uid),
+    class: className,
+    ...restProps
+  }: FieldErrorProps = $props();
+
+  const errorState = FieldErrorState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, errorState.props, { class: cn(fieldErrorVariants({}), className) })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <span {...mergedProps}>
+    {@render children?.()}
+  </span>
+{/if}

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

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

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

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { FieldLabelProps } from '../types.js';
+  import { FieldLabelState } from './field.svelte.js';
+
+  import { fieldLabelVariants } from '../styles.js';
+
+  import { cn, useId } from '../../../internal/utils/common.js';
+
+  import { box, mergeProps } from 'svelte-toolbelt';
+
+  const uid = $props.id();
+
+  let {
+    children,
+    child,
+    ref = $bindable(null),
+    id = useId(uid),
+    class: className,
+    ...restProps
+  }: FieldLabelProps = $props();
+
+  const labelState = FieldLabelState.create({
+    ref: box.with(
+      () => ref,
+      (v) => (ref = v)
+    ),
+    id: box.with(() => id),
+  });
+
+  const mergedProps = $derived(
+    mergeProps(restProps, labelState.props, { class: cn(fieldLabelVariants({}), className) })
+  );
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <label {...mergedProps}>
+    {@render children?.()}
+
+    {#if labelState.root.opts.required.current}
+      <span
+        class=" cgui:inline-flex cgui:items-center cgui:justify-center cgui:text-caption cgui:font-medium cgui:text-fg-error cgui:shrink-0 cgui:align-middle"
+      >
+        *
+      </span>
+    {/if}
+  </label>
+{/if}

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

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

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { box, mergeProps } from 'svelte-toolbelt';
+  import { fieldRootVariants } from '../styles.js';
+  import type { FieldRootProps } from '../types.js';
+  import { FieldRootState } from './field.svelte.js';
+
+  const uid = $props.id();
+
+  let {
+    children,
+    child,
+    class: className,
+    ref = $bindable(null),
+    id = useId(uid),
+    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 mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(fieldRootVariants({}), className) }));
+
+  const attrStates = $derived({
+    invalid: rootState.opts.invalid.current,
+    disabled: rootState.opts.disabled.current,
+    readOnly: rootState.opts.readOnly.current,
+    required: rootState.opts.required.current,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps, ...attrStates })}
+{:else}
+  <div {...mergedProps}>
+    {@render children?.(attrStates)}
+  </div>
+{/if}

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

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

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

@@ -0,0 +1,86 @@
+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-invalid': "" | undefined;
+        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;
+        readonly disabled: boolean;
+        readonly readOnly: boolean;
+    };
+}
+export {};

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

@@ -0,0 +1,129 @@
+import { SLOT_ATTR_NAME } from '../../../internal/constants/attrs.js';
+import { boolAttr, getDataActive, getDataDisabled } from '../../../internal/utils/attrs.js';
+import { Context } from 'runed';
+import { untrack } from 'svelte';
+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) {
+        untrack(() => {
+            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);
+        this.root.setId('label', this.opts.id.current);
+        $effect(() => {
+            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);
+        this.root.setId('error', this.opts.id.current);
+        $effect(() => {
+            this.root.setId('error', this.opts.id.current);
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'data-invalid': boolAttr(this.root.opts.invalid.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(() => {
+            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(() => {
+            this.root.setId('control', this.opts.id.current);
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.opts.id.current,
+        'aria-invalid': this.root.opts.invalid.current,
+        disabled: this.root.opts.disabled.current,
+        readOnly: this.root.opts.readOnly.current,
+    }));
+}

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

@@ -0,0 +1,5 @@
+export { default as Control } from './field.control.svelte';
+export { default as Description } from './field.description.svelte';
+export { default as Error } from './field.error.svelte';
+export { default as Label } from './field.label.svelte';
+export { default as Root } from './field.root.svelte';

package/dist/primitives/field/components/index.js

@@ -0,0 +1,5 @@
+export { default as Control } from './field.control.svelte';
+export { default as Description } from './field.description.svelte';
+export { default as Error } from './field.error.svelte';
+export { default as Label } from './field.label.svelte';
+export { default as Root } from './field.root.svelte';

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

@@ -0,0 +1,2 @@
+export * as Field from './components/index.js';
+export type * from './types.js';

package/dist/primitives/field/index.js

@@ -0,0 +1 @@
+export * as Field from './components/index.js';

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

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const fieldRootVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fieldLabelVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fieldErrorVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fieldDescriptionVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type FieldRootVariants = VariantProps<typeof fieldRootVariants>;
+export type FieldLabelVariants = VariantProps<typeof fieldLabelVariants>;
+export type FieldErrorVariants = VariantProps<typeof fieldErrorVariants>;
+export type FieldDescriptionVariants = VariantProps<typeof fieldDescriptionVariants>;

package/dist/primitives/field/styles.js

@@ -0,0 +1,23 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const fieldRootVariants = tv({
+    base: ['cgui:flex cgui:flex-col cgui:gap-1'],
+});
+export const fieldLabelVariants = tv({
+    base: [
+        'cgui:relative',
+        'cgui:w-fit',
+        'cgui:inline-flex cgui:items-center cgui:gap-0.5',
+        'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
+    ],
+});
+export const fieldErrorVariants = tv({
+    base: [
+        'cgui:text-caption cgui:text-fg-error',
+        'cgui:min-h-[1lh]',
+        'cgui:invisible cgui:opacity-0 cgui:transition-opacity cgui:duration-200',
+        'cgui:data-[invalid]:visible cgui:data-[invalid]:opacity-100',
+    ],
+});
+export const fieldDescriptionVariants = tv({
+    base: ['cgui:text-caption cgui:text-fg-medium'],
+});