Field

1import { cva, type VariantProps } from "class-variance-authority";
2import { css, html, LitElement, nothing } from "lit";
3import { customElement, property } from "lit/decorators.js";
4import { TW } from "@/lib/tailwindMixin";
5import { cn } from "@/lib/utils";
6 
7const TwLitElement = TW(LitElement);
8 
9@customElement("ui-field-set")
10export class FieldSet extends TwLitElement {
11  static styles = css`
12    :host {
13      display: block;
14    }
15  `;
16 
17  override render() {
18    return html`
19      <fieldset
20        part="fieldset"
21        data-slot="field-set"
22        class=${cn(
23          "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
24          this.className,
25        )}
26      >
27        <slot></slot>
28      </fieldset>
29    `;
30  }
31}
32 
33@customElement("ui-field-legend")
34export class FieldLegend extends TwLitElement {
35  static styles = css`
36    :host {
37      display: contents;
38    }
39  `;
40 
41  @property({ type: String }) variant: "legend" | "label" = "legend";
42 
43  override render() {
44    return html`
45      <legend
46        part="legend"
47        data-slot="field-legend"
48        data-variant=${this.variant}
49        class=${cn(
50          "mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm",
51          this.className,
52        )}
53      >
54        <slot></slot>
55      </legend>
56    `;
57  }
58}
59 
60@customElement("ui-field-group")
61export class FieldGroup extends TwLitElement {
62  static styles = css`
63    :host {
64      display: contents;
65    }
66  `;
67 
68  override render() {
69    return html`
70      <div
71        part="group"
72        data-slot="field-group"
73        class=${cn(
74          "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
75          this.className,
76        )}
77      >
78        <slot></slot>
79      </div>
80    `;
81  }
82}
83 
84const fieldVariants = cva(
85  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
86  {
87    variants: {
88      orientation: {
89        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
90        horizontal: [
91          "flex-row items-center",
92          "[&>[data-slot=field-label]]:flex-auto",
93          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
94        ],
95        responsive: [
96          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
97// … truncated