alinea/dist/dashboard/view/InputLabel.js

[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)

import "../../chunks/chunk-U5RRZUYZ.js";

// src/dashboard/view/InputLabel.tsx
import { renderLabel } from "alinea/core/Label";
import { fromModule, px } from "alinea/ui";
import { Chip } from "alinea/ui/Chip";
import { HStack } from "alinea/ui/Stack";
import { forwardRef, memo } from "react";

// src/dashboard/view/InputLabel.module.scss
var InputLabel_module_default = {
  "root": "alinea-InputLabel",
  "root-inner": "alinea-InputLabel-inner",
  "rootInner": "alinea-InputLabel-inner",
  "root-header": "alinea-InputLabel-header",
  "rootHeader": "alinea-InputLabel-header",
  "header": "alinea-InputLabel-header",
  "header-title": "alinea-InputLabel-header-title",
  "headerTitle": "alinea-InputLabel-header-title",
  "header-help": "alinea-InputLabel-header-help",
  "headerHelp": "alinea-InputLabel-header-help",
  "is-large": "alinea-InputLabel-is-large",
  "isLarge": "alinea-InputLabel-is-large",
  "is-focused": "alinea-InputLabel-is-focused",
  "isFocused": "alinea-InputLabel-is-focused"
};

// src/dashboard/view/InputLabel.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = fromModule(InputLabel_module_default);
var LabelHeader = memo(function LabelHeader2({
  label,
  optional,
  help,
  size,
  focused,
  icon: Icon
}) {
  return /* @__PURE__ */ jsx("header", { className: styles.header(size, { focused }), children: /* @__PURE__ */ jsxs(HStack, { center: true, wrap: true, gap: `${px(4)} ${px(8)}`, children: [
    /* @__PURE__ */ jsx(HStack, { center: true, gap: 8, className: styles.header.title(), children: /* @__PURE__ */ jsx("span", { children: renderLabel(label) }) }),
    optional && /* @__PURE__ */ jsx(Chip, { children: "Optional" }),
    help && /* @__PURE__ */ jsx("div", { className: styles.header.help(), children: renderLabel(help) })
  ] }) });
});
var InputLabel = forwardRef(
  function InputLabel2({
    children,
    label,
    asLabel,
    help,
    optional,
    width = 1,
    inline = false,
    collection = false,
    focused = false,
    size,
    icon,
    empty
  }, ref) {
    const Tag = asLabel ? "label" : "div";
    return /* @__PURE__ */ jsx(
      Tag,
      {
        className: styles.root({ collection, inline, focused, empty }),
        style: { width: `${width * 100}%` },
        ref,
        children: /* @__PURE__ */ jsxs("div", { className: styles.root.inner(), children: [
          !inline && label && /* @__PURE__ */ jsx(
            LabelHeader,
            {
              label,
              help,
              optional,
              size,
              focused,
              icon
            }
          ),
          children
        ] })
      }
    );
  }
);
export {
  InputLabel,
  LabelHeader
};