@timeax/form-palette 0.0.5 → 0.0.7

package/dist/index.d.mts

@@ -979,6 +979,90 @@ interface LayoutResolveContext<T = unknown> {
  */
 type LayoutResolver<T = unknown> = (ctx: LayoutResolveContext<T>) => FieldLayoutConfig;
 
+type MaskMode$1 = "raw" | "masked";
+/**
+ * Mask-related props for the Shadcn text variant.
+ *
+ * These are forwarded to the underlying <Input>, which in turn wires
+ * them into the InputMask implementation.
+ */
+interface ShadcnTextMaskProps {
+    /**
+     * Mask pattern – Primereact style.
+     * Example: "99/99/9999", "(999) 999-9999"
+     */
+    mask?: string;
+    /**
+     * Per-symbol definitions for slots.
+     * Kept for future custom engine; not used by the current
+     * react-input-mask implementation.
+     */
+    maskDefinitions?: Record<string, RegExp>;
+    /**
+     * Character used to visually represent an empty slot.
+     * Default: "_".
+     */
+    slotChar?: string;
+    /**
+     * If true, when the value is effectively "empty" (no unmasked chars),
+     * we emit an empty string "" instead of a fully-masked placeholder.
+     *
+     * NOTE: This behaviour is implemented in the variant, not Input,
+     * so we preserve your existing semantics.
+     */
+    autoClear?: boolean;
+    /**
+     * Whether the *model* value is raw or masked.
+     *
+     * - "raw" or true   → onValue receives unmasked value
+     * - "masked" or false/undefined → onValue receives full masked string
+     *
+     * NOTE: detail.raw is **always** the masked string.
+     */
+    unmask?: MaskMode$1 | boolean;
+    /**
+     * Placeholder for future caret-mode logic when we go back
+     * to a custom engine. Currently unused, kept for API compatibility.
+     */
+    maskInsertMode?: "stream" | "caret";
+}
+/**
+ * Extra UI props for the Shadcn text input (pure HTML-level).
+ *
+ * These are forwarded straight to the underlying <Input />.
+ */
+type ShadcnTextUiProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size"> & {
+    /**
+     * Extra classes applied only to the *inner* input element
+     * (the actual <input>, not the wrapper box).
+     */
+    inputClassName?: string;
+    /**
+     * Fixed prefix rendered as part of the input value, NOT as an icon.
+     * E.g. "₦", "ID: ".
+     *
+     * The underlying <Input> will:
+     *  - take the model value (without prefix),
+     *  - render prefix + value,
+     *  - expose the full visible string in event.target.value.
+     */
+    prefix?: string;
+    /**
+     * Fixed suffix rendered as part of the input value, NOT as an icon.
+     * E.g. "%", "kg".
+     */
+    suffix?: string;
+    /**
+     * If true (default), we strip the prefix from the value
+     * before emitting it via `onValue`.
+     */
+    stripPrefix?: boolean;
+    /**
+     * If true (default), we strip the suffix from the value
+     * before emitting it via `onValue`.
+     */
+    stripSuffix?: boolean;
+} & ShadcnTextMaskProps;
 /**
  * Props for the Shadcn-based text variant.
  *
@@ -1000,7 +1084,7 @@ type ShadcnTextVariantProps = ExtraFieldProps<VariantBaseProps<string | undefine
      * (true) or controls are visually separate (false).
      */
     extendBoxToControls?: boolean;
-};
+} & ShadcnTextUiProps;
 
 type InputRef = HTMLInputElement;
 interface InputNumberValueChangeEvent {

package/dist/index.d.ts

@@ -979,6 +979,90 @@ interface LayoutResolveContext<T = unknown> {
  */
 type LayoutResolver<T = unknown> = (ctx: LayoutResolveContext<T>) => FieldLayoutConfig;
 
+type MaskMode$1 = "raw" | "masked";
+/**
+ * Mask-related props for the Shadcn text variant.
+ *
+ * These are forwarded to the underlying <Input>, which in turn wires
+ * them into the InputMask implementation.
+ */
+interface ShadcnTextMaskProps {
+    /**
+     * Mask pattern – Primereact style.
+     * Example: "99/99/9999", "(999) 999-9999"
+     */
+    mask?: string;
+    /**
+     * Per-symbol definitions for slots.
+     * Kept for future custom engine; not used by the current
+     * react-input-mask implementation.
+     */
+    maskDefinitions?: Record<string, RegExp>;
+    /**
+     * Character used to visually represent an empty slot.
+     * Default: "_".
+     */
+    slotChar?: string;
+    /**
+     * If true, when the value is effectively "empty" (no unmasked chars),
+     * we emit an empty string "" instead of a fully-masked placeholder.
+     *
+     * NOTE: This behaviour is implemented in the variant, not Input,
+     * so we preserve your existing semantics.
+     */
+    autoClear?: boolean;
+    /**
+     * Whether the *model* value is raw or masked.
+     *
+     * - "raw" or true   → onValue receives unmasked value
+     * - "masked" or false/undefined → onValue receives full masked string
+     *
+     * NOTE: detail.raw is **always** the masked string.
+     */
+    unmask?: MaskMode$1 | boolean;
+    /**
+     * Placeholder for future caret-mode logic when we go back
+     * to a custom engine. Currently unused, kept for API compatibility.
+     */
+    maskInsertMode?: "stream" | "caret";
+}
+/**
+ * Extra UI props for the Shadcn text input (pure HTML-level).
+ *
+ * These are forwarded straight to the underlying <Input />.
+ */
+type ShadcnTextUiProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "size"> & {
+    /**
+     * Extra classes applied only to the *inner* input element
+     * (the actual <input>, not the wrapper box).
+     */
+    inputClassName?: string;
+    /**
+     * Fixed prefix rendered as part of the input value, NOT as an icon.
+     * E.g. "₦", "ID: ".
+     *
+     * The underlying <Input> will:
+     *  - take the model value (without prefix),
+     *  - render prefix + value,
+     *  - expose the full visible string in event.target.value.
+     */
+    prefix?: string;
+    /**
+     * Fixed suffix rendered as part of the input value, NOT as an icon.
+     * E.g. "%", "kg".
+     */
+    suffix?: string;
+    /**
+     * If true (default), we strip the prefix from the value
+     * before emitting it via `onValue`.
+     */
+    stripPrefix?: boolean;
+    /**
+     * If true (default), we strip the suffix from the value
+     * before emitting it via `onValue`.
+     */
+    stripSuffix?: boolean;
+} & ShadcnTextMaskProps;
 /**
  * Props for the Shadcn-based text variant.
  *
@@ -1000,7 +1084,7 @@ type ShadcnTextVariantProps = ExtraFieldProps<VariantBaseProps<string | undefine
      * (true) or controls are visually separate (false).
      */
     extendBoxToControls?: boolean;
-};
+} & ShadcnTextUiProps;
 
 type InputRef = HTMLInputElement;
 interface InputNumberValueChangeEvent {

package/dist/index.js

@@ -41905,7 +41905,7 @@ function FieldGroup({ className, ...props }) {
     {
       "data-slot": "field-group",
       className: cn(
-        "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",
+        "group/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
         className
       ),
       ...props
@@ -42456,6 +42456,22 @@ function InputField(props) {
     }),
     [layout, sublabel, description, helpText, visualError, tagsContent]
   );
+  const hasLabelSlotsAt = (placement) => {
+    let found = false;
+    graph.getSlotsFor("label", placement).render((slots) => {
+      if (slots.length > 0) {
+        found = true;
+      }
+      return null;
+    });
+    return found;
+  };
+  const hasLabelLeftSlots = hasLabelSlotsAt("left");
+  const hasLabelRightSlots = hasLabelSlotsAt("right");
+  const hasLabelAboveSlots = hasLabelSlotsAt("above");
+  const hasLabelBelowSlots = hasLabelSlotsAt("below");
+  const hasAnyLabelBlockContent = !!label || hasLabelLeftSlots || hasLabelRightSlots || hasLabelAboveSlots || hasLabelBelowSlots;
+  const hasLabelRowContent = !!label || hasLabelLeftSlots || hasLabelRightSlots;
   const inlineLabelSide = lp === "right" ? "right" : lp === "hidden" ? "hidden" : "left";
   const inlineInputColClass = [
     isCompactInline ? "flex-none" : "flex-1 min-w-0",
@@ -42503,7 +42519,7 @@ function InputField(props) {
       )
     )
   ] });
-  const inlineLabelColumn = inlineLabelSide === "hidden" ? null : /* @__PURE__ */ jsxRuntime.jsxs(
+  const inlineLabelColumn = inlineLabelSide === "hidden" || !hasAnyLabelBlockContent ? null : /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: ["flex flex-col gap-0", inlineLabelColClass].filter(Boolean).join(" "),
@@ -42513,7 +42529,7 @@ function InputField(props) {
             (slot) => renderHelperSlot("label", slot, classes)
           )
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        hasLabelRowContent && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: [
@@ -42540,7 +42556,16 @@ function InputField(props) {
                   children: /* @__PURE__ */ jsxRuntime.jsxs(FieldTitle, { children: [
                     label,
                     " ",
-                    required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-destructive", classes == null ? void 0 : classes.required), children: "*" }) : ""
+                    required ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-destructive",
+                          classes == null ? void 0 : classes.required
+                        ),
+                        children: "*"
+                      }
+                    ) : ""
                   ] })
                 }
               ),
@@ -42566,7 +42591,11 @@ function InputField(props) {
     "flex items-start gap-2",
     classes == null ? void 0 : classes.inlineRow
   ].filter(Boolean).join(" ");
-  const stackedGroupClassName = ["mt-1", classes == null ? void 0 : classes.group].filter(Boolean).join(" ");
+  const hasStackedLabelBlock = lp !== "hidden" && hasAnyLabelBlockContent;
+  const stackedGroupClassName = [
+    hasStackedLabelBlock && hasLabelRowContent ? "mt-1" : null,
+    classes == null ? void 0 : classes.group
+  ].filter(Boolean).join(" ");
   const Element2 = contain ? "div" : React54__namespace.Fragment;
   const attrs = (a = "l") => contain ? a === "l" ? { className: "p-4 border-b border-input" } : { className: "px-4 pt-2 pb-4" } : {};
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -42602,7 +42631,7 @@ function InputField(props) {
       ) : (
         // STACKED MODE
         /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          lp !== "hidden" && /* @__PURE__ */ jsxRuntime.jsxs(Element2, { ...attrs(), children: [
+          hasStackedLabelBlock && /* @__PURE__ */ jsxRuntime.jsxs(Element2, { ...attrs(), children: [
             graph.getSlotsFor("label", "above").render(
               (slots) => slots.map(
                 (slot) => renderHelperSlot(
@@ -42612,7 +42641,7 @@ function InputField(props) {
                 )
               )
             ),
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            hasLabelRowContent && /* @__PURE__ */ jsxRuntime.jsxs(
               "div",
               {
                 className: [
@@ -42639,7 +42668,16 @@ function InputField(props) {
                       children: /* @__PURE__ */ jsxRuntime.jsxs(FieldTitle, { children: [
                         label,
                         " ",
-                        required ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-destructive", classes == null ? void 0 : classes.required), children: "*" }) : ""
+                        required ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "text-destructive",
+                              classes == null ? void 0 : classes.required
+                            ),
+                            children: "*"
+                          }
+                        ) : ""
                       ] })
                     }
                   ),