field

1import type { PolymorphicProps } from "@kobalte/core";
2import { Polymorphic } from "@kobalte/core";
3 
4import { cn } from "~/lib/utils.ts";
5import { cva, type VariantProps } from "class-variance-authority";
6import type { ComponentProps, JSX, ValidComponent } from "solid-js";
7 
8import { children, createMemo, For, Show, splitProps } from "solid-js";
9import { Label } from "./label.tsx";
10import { Separator } from "./separator.tsx";
11 
12type FieldSetProps<T extends ValidComponent = "fieldset"> =
13  & ComponentProps<T>
14  & {
15    class?: string | undefined;
16  };
17 
18const FieldSet = <T extends ValidComponent = "fieldset">(
19  props: PolymorphicProps<T, FieldSetProps<T>>,
20) => {
21  const [local, others] = splitProps(props as FieldSetProps, ["class"]);
22 
23  return (
24    <Polymorphic<FieldSetProps>
25      as="fieldset"
26      data-slot="field-set"
27      class={cn(
28        "gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col",
29        local.class,
30      )}
31      {...others}
32    />
33  );
34};
35 
36type FieldLegendProps<T extends ValidComponent = "legend"> =
37  & ComponentProps<T>
38  & {
39    class?: string | undefined;
40    variant?: "legend" | "label";
41  };
42 
43const FieldLegend = <T extends ValidComponent = "legend">(
44  props: PolymorphicProps<T, FieldLegendProps<T>>,
45) => {
46  const [local, others] = splitProps(props as FieldLegendProps, [
47    "class",
48    "variant",
49  ]);
50 
51  return (
52    <Polymorphic<FieldLegendProps>
53      as="legend"
54      data-slot="field-legend"
55      data-variant={local.variant ?? "legend"}
56      class={cn(
57        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
58        local.class,
59      )}
60      {...others}
61    />
62  );
63};
64 
65type FieldGroupProps<T extends ValidComponent = "div"> = ComponentProps<T> & {
66  class?: string | undefined;
67};
68 
69const FieldGroup = <T extends ValidComponent = "div">(
70  props: PolymorphicProps<T, FieldGroupProps<T>>,
71) => {
72  const [local, others] = splitProps(props as FieldGroupProps, ["class"]);
73 
74  return (
75    <Polymorphic<FieldGroupProps>
76      as="div"
77      data-slot="field-group"
78      class={cn(
79        "@container/field-group gap-5 *:data-[slot=field-group]:gap-4 data-[slot=checkbox-group]:gap-3 group/field-group flex w-full flex-col",
80        local.class,
81      )}
82      {...others}
83    />
84  );
85};
86 
87const fieldVariants = cva(
88  "gap-2 data-[invalid=true]:text-destructive group/field flex w-full",
89  {
90    variants: {
91      orientation: {
92// … truncated