alinea/dist/dashboard/view/InputLabel.js

Headless git-based CMS

import {
  dist_default
} from "../../chunks/chunk-A5O3N2GS.js";
import "../../chunks/chunk-NZLE2WMY.js";

// src/dashboard/view/InputLabel.tsx
import { Icon, px } from "alinea/ui";
import { Chip } from "alinea/ui/Chip";
import { IcOutlineLock } from "alinea/ui/icons/IcOutlineLock";
import { IcRoundUnfoldLess } from "alinea/ui/icons/IcRoundUnfoldLess";
import { IcRoundUnfoldMore } from "alinea/ui/icons/IcRoundUnfoldMore";
import { PhGlobe } from "alinea/ui/icons/PhGlobe";
import { HStack } from "alinea/ui/Stack";
import {
  forwardRef,
  memo
} from "react";
import { IconButton } from "./IconButton.js";

// src/dashboard/view/InputLabel.module.scss
var InputLabel_module_default = {
  "root": "alinea-InputLabel",
  "root-inner": "alinea-InputLabel-inner",
  "rootInner": "alinea-InputLabel-inner",
  "is-readOnly": "alinea-InputLabel-is-readOnly",
  "isReadOnly": "alinea-InputLabel-is-readOnly",
  "root-inner-content": "alinea-InputLabel-inner-content",
  "rootInnerContent": "alinea-InputLabel-inner-content",
  "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-error": "alinea-InputLabel-is-error",
  "isError": "alinea-InputLabel-is-error",
  "is-large": "alinea-InputLabel-is-large",
  "isLarge": "alinea-InputLabel-is-large",
  "is-focused": "alinea-InputLabel-is-focused",
  "isFocused": "alinea-InputLabel-is-focused",
  "is-nopadding": "alinea-InputLabel-is-nopadding",
  "isNopadding": "alinea-InputLabel-is-nopadding"
};

// src/dashboard/view/InputLabel.tsx
import { jsx, jsxs } from "react/jsx-runtime";
var styles = dist_default(InputLabel_module_default);
var LabelHeader = memo(function LabelHeader2({
  label,
  help,
  size,
  focused,
  // icon: Icon,
  shared,
  readOnly,
  required,
  error,
  isFolded,
  toggleFold
}) {
  const showError = typeof error === "string";
  return /* @__PURE__ */ jsx(
    "header",
    {
      className: styles.header(size, {
        focused,
        error: Boolean(error),
        nopadding: !label
      }),
      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__ */ jsxs("span", { children: [
          label,
          required && " *"
        ] }) }),
        readOnly && /* @__PURE__ */ jsx(Icon, { title: "Read-only", icon: IcOutlineLock, style: { opacity: 0.6 } }),
        shared && /* @__PURE__ */ jsx(Chip, { icon: PhGlobe, children: "Shared" }),
        showError ? /* @__PURE__ */ jsx("div", { className: styles.header.help({ error: true }), children: error }) : help && /* @__PURE__ */ jsx("div", { className: styles.header.help(), children: help }),
        isFolded !== void 0 && /* @__PURE__ */ jsx(
          IconButton,
          {
            disabled: !toggleFold,
            title: isFolded ? "Expand" : "Fold",
            icon: isFolded ? IcRoundUnfoldMore : IcRoundUnfoldLess,
            size: 14,
            onClick: toggleFold
          }
        )
      ] })
    }
  );
});
var InputLabel = forwardRef(
  function InputLabel2({
    children,
    label,
    asLabel,
    help,
    width = 1,
    inline = false,
    collection = false,
    focused = false,
    size,
    icon,
    empty,
    shared,
    readOnly,
    className,
    error,
    required,
    isFolded,
    toggleFold
  }, ref) {
    const Tag = asLabel ? "label" : "div";
    return /* @__PURE__ */ jsx(
      Tag,
      {
        className: styles.root.with(className)({
          collection,
          inline,
          focused,
          empty,
          readOnly
        }),
        style: { width: `${width * 100}%` },
        ref,
        children: /* @__PURE__ */ jsxs("div", { className: styles.root.inner(), children: [
          !inline && label && /* @__PURE__ */ jsx(
            LabelHeader,
            {
              label,
              help,
              required,
              size,
              focused,
              icon,
              shared,
              readOnly,
              error,
              isFolded,
              toggleFold
            }
          ),
          /* @__PURE__ */ jsx("div", { className: styles.root.inner.content(), children })
        ] })
      }
    );
  }
);
export {
  InputLabel,
  LabelHeader
};