@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.712

package/dist/chunk-CMGFZHCN.js

@@ -0,0 +1,233 @@
+"use client";
+import {
+  cn
+} from "./chunk-7RXWKTAP.js";
+
+// src/components/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var labelVariants = cva("block text-ods-text-primary text-h6", {
+  variants: {
+    variant: {
+      default: "",
+      /** @deprecated alias of `default` — the three small scales converged on text-h6. */
+      small: "",
+      /** @deprecated alias of `default`. */
+      medium: "",
+      large: "text-h4"
+    },
+    spacing: {
+      none: "",
+      tight: "mb-0.5",
+      normal: "mb-2",
+      loose: "mb-3"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    spacing: "none"
+  }
+});
+var Label = forwardRef(({ className, variant, spacing, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants({ variant, spacing }), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/ui/required-mark.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function RequiredMark() {
+  return /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "text-ods-accent", children: "*" });
+}
+
+// src/components/ui/field-wrapper.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var errorVariantClasses = {
+  error: "text-ods-error",
+  warning: "text-ods-warning",
+  success: "text-ods-success",
+  muted: "text-ods-text-secondary"
+};
+var FieldWrapper = forwardRef2(
+  ({
+    label,
+    htmlFor,
+    error,
+    errorVariant = "error",
+    errorSlot = false,
+    labelVariant = "default",
+    required = false,
+    className,
+    children
+  }, ref) => {
+    const hasChrome = label != null || error != null || errorSlot;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(hasChrome ? "relative flex w-full flex-col" : "contents", className), children: [
+      label && // Default is text-h6, NOT text-h4: `Field` (ui/field.tsx) renders its label via
+      // `Label variant="small"` = text-h6, and every form that mixes
+      // Field-wrapped controls with `label=`-prop controls showed two label
+      // sizes side by side — the exact inconsistency the admin editors kept
+      // reporting. One label scale, owned here and in Field together.
+      /* @__PURE__ */ jsxs(Label, { className: "mb-1", htmlFor, variant: labelVariant, children: [
+        label,
+        required && /* @__PURE__ */ jsx3(RequiredMark, {})
+      ] }),
+      children,
+      error && /* @__PURE__ */ jsx3(
+        "p",
+        {
+          className: cn(
+            "absolute bottom-0 left-0 right-0 translate-y-full truncate text-h6",
+            errorVariantClasses[errorVariant]
+          ),
+          title: error,
+          children: error
+        }
+      )
+    ] });
+  }
+);
+FieldWrapper.displayName = "FieldWrapper";
+
+// src/components/ui/input.tsx
+import { Loader2 } from "lucide-react";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var invalidBorderClasses = {
+  error: "border-ods-error hover:border-ods-error has-[:focus]:border-ods-error",
+  warning: "!border-ods-warning hover:!border-ods-warning has-[:focus]:!border-ods-warning"
+};
+var Input = forwardRef3((allProps, ref) => {
+  const {
+    className,
+    type,
+    invalid = false,
+    startAdornment,
+    endAdornment,
+    label,
+    labelVariant,
+    error,
+    errorVariant = "error",
+    loading = false,
+    ...props
+  } = allProps;
+  const errorSlot = "error" in allProps;
+  const variantIsInvalid = errorVariant === "error" || errorVariant === "warning";
+  const isInvalid = invalid || !!error && variantIsInvalid;
+  if (type === "range") {
+    const rangeInput = /* @__PURE__ */ jsx4(
+      "input",
+      {
+        type: "range",
+        className: cn(
+          "h-1 w-full cursor-pointer appearance-none rounded-full bg-white/30",
+          // Webkit (Chrome/Safari) thumb
+          "[&::-webkit-slider-thumb]:appearance-none",
+          "[&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-3",
+          "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white",
+          "[&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-sm",
+          // Firefox thumb
+          "[&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-3",
+          "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white",
+          "[&::-moz-range-thumb]:cursor-pointer [&::-moz-range-thumb]:border-0",
+          // Firefox track
+          "[&::-moz-range-track]:bg-transparent",
+          // Disabled
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+    return label ? /* @__PURE__ */ jsx4(
+      FieldWrapper,
+      {
+        label,
+        labelVariant,
+        error,
+        errorVariant,
+        errorSlot,
+        children: rangeInput
+      }
+    ) : rangeInput;
+  }
+  const content = /* @__PURE__ */ jsxs2(
+    "label",
+    {
+      "data-invalid": isInvalid || void 0,
+      className: cn(
+        // Layout & spacing
+        "flex h-11 w-full cursor-text items-center gap-2 rounded-[6px] border px-3 md:h-12",
+        // Focus-within states
+        "has-[:focus-visible]:outline-none",
+        "group",
+        // Animations & touch UX
+        "transition-colors duration-200",
+        // Theme palette
+        "border-ods-border bg-ods-card has-[:focus]:border-ods-accent",
+        // Hover & active (not disabled)
+        !props.disabled && "hover:border-ods-border-hover hover:bg-ods-bg-hover active:border-ods-border-active active:bg-ods-bg-active",
+        // Disabled. The adornments (and any icon inside them) carry their own
+        // `text-ods-text-secondary`, so grey them from here — a disabled field
+        // must read as one flat colour, not grey text next to a live icon.
+        // Scoped to the DIRECT span children (the two adornment wrappers): a
+        // descendant rule would also repaint whatever the caller renders INSIDE
+        // an adornment, which is passed verbatim precisely so it can own its
+        // colour (a `Tag` there went invisible against its own fill).
+        props.disabled && "!cursor-not-allowed bg-ods-bg",
+        "has-[:disabled]:[&>span]:text-ods-text-disabled has-[:disabled]:[&_svg]:text-ods-text-disabled",
+        // Invalid
+        isInvalid && invalidBorderClasses[variantIsInvalid ? errorVariant : "error"],
+        className
+      ),
+      children: [
+        startAdornment && /* @__PURE__ */ jsx4("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: startAdornment }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            type,
+            className: cn(
+              // Layout
+              "min-w-0 flex-1 border-none bg-transparent outline-none",
+              // Typography
+              "text-h4",
+              // Colors
+              "text-ods-text-primary placeholder:text-ods-text-secondary",
+              // File input adjustments
+              "file:border-0 file:bg-transparent",
+              // Disabled
+              "disabled:cursor-not-allowed disabled:text-ods-text-disabled disabled:placeholder:text-ods-border",
+              // Touch
+              "touch-manipulation",
+              // Autofill override
+              "[&:-webkit-autofill]:[-webkit-box-shadow:0_0_0_9999px_transparent_inset] [&:-webkit-autofill]:[-webkit-text-fill-color:var(--color-text-primary)] [&:-webkit-autofill]:[caret-color:var(--color-text-primary)] [&:-webkit-autofill]:[transition:background-color_9999s_ease-in-out_0s]"
+            ),
+            ref,
+            ...props
+          }
+        ),
+        loading && /* @__PURE__ */ jsx4(Loader2, { className: "size-4 flex-shrink-0 animate-spin text-ods-text-secondary md:size-6" }),
+        !loading && endAdornment && /* @__PURE__ */ jsx4("span", { className: "flex-shrink-0 text-ods-text-secondary transition-colors duration-200 text-h6 group-has-[:focus]:text-ods-accent group-data-[invalid]:text-ods-error [&_svg]:size-4 md:[&_svg]:size-6", children: endAdornment })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx4(
+    FieldWrapper,
+    {
+      label,
+      labelVariant,
+      error,
+      errorVariant,
+      errorSlot,
+      children: content
+    }
+  );
+});
+Input.displayName = "Input";
+
+export {
+  Label,
+  RequiredMark,
+  FieldWrapper,
+  Input
+};