init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import type { PropsWithChildren } from "react";
import clsx from "clsx";
import styles from "./label.module.scss";
type LabelProps = PropsWithChildren<{
  text: string;
  required?: boolean;
  placement?: "right" | "left";
  description?: string;
  size?: "large" | "small";
  className?: string;
  style?: React.CSSProperties;
  simple?: boolean;
  flat?: boolean;
}>;
 
export const Label = ({
  text,
  children,
  required,
  placement = "left",
  className,
  description,
  size = "small",
  style: inlineStyle,
  simple,
  flat,
}: LabelProps) => {
  const TagName = simple ? "div" : "label";
 
  return (
    <TagName
      style={inlineStyle}
      data-required={required}
      className={clsx(styles.label, className, {
        [styles.label_size_small]: size === "small",
        [styles.label_size_large]: size === "large",
        [styles.label_flat]: flat,
        [styles.label_placement_left]: placement === "left",
        [styles.label_placement_right]: placement === "right",
        [styles.label_withDescription]: !!description,
        [styles.label_empty]: !children,
      })}
    >
      <span className={clsx(styles.label__text)}>
        <span className={clsx(styles.label__content)}>
          {text}
          {description && <span className={clsx(styles.label__description)}>{description}</span>}
        </span>
      </span>
      <span className={clsx(styles.label__field)}>{children}</span>
    </TagName>
  );
};