@nextlyhq/ui 0.0.2-alpha.58 → 0.0.2-alpha.60

package/dist/index.cjs

@@ -114,7 +114,11 @@ __export(src_exports, {
   DropdownMenuSubContent: () => DropdownMenuSubContent,
   DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
+  FieldShell: () => FieldShell,
+  FormActions: () => FormActions,
   FormLabelWithTooltip: () => FormLabelWithTooltip,
+  FormLayout: () => FormLayout,
+  FormSection: () => FormSection,
   Grid: () => Grid,
   Input: () => Input,
   Label: () => Label,
@@ -489,7 +493,15 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
         success: "bg-success-100 text-success-700 dark:bg-success-900 dark:text-success-100",
         warning: "bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-100",
         destructive: "bg-destructive-100 text-destructive-700 dark:bg-destructive-900 dark:text-destructive-100",
-        outline: "border border-border! bg-transparent text-foreground dark:text-muted-foreground dark:border-border!"
+        /*
+         * The border colour is NOT important-marked. The base sets no border
+         * colour, so nothing inside this component competes for it — the only
+         * thing a mark could win against is the caller's own class. Seven
+         * outline badges pass one, including a status pill whose comment gives
+         * a 3:1 contrast reason for the colour it asks for, and every one of
+         * them was being overridden without any sign that it had been.
+         */
+        outline: "border border-border bg-transparent text-foreground dark:text-muted-foreground dark:border-border"
       }
     },
     defaultVariants: {
@@ -665,6 +677,13 @@ var COLS = {
   4: "grid-cols-4",
   6: "grid-cols-6"
 };
+var RESPONSIVE_COLS = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 @2xl:grid-cols-2",
+  3: "grid-cols-1 @2xl:grid-cols-3",
+  4: "grid-cols-1 @2xl:grid-cols-4",
+  6: "grid-cols-1 @2xl:grid-cols-6"
+};
 var Stack = (0, import_react7.forwardRef)(
   ({ direction = "col", gap = 4, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
@@ -682,14 +701,20 @@ var Stack = (0, import_react7.forwardRef)(
 );
 Stack.displayName = "Stack";
 var Grid = (0, import_react7.forwardRef)(
-  ({ cols = 2, gap = 4, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
-    {
-      ref,
-      className: cn("grid", COLS[cols], GAP[gap], className),
-      ...props
+  ({ cols = 2, gap = 4, responsive = false, className, children, ...rest }, ref) => {
+    if (!responsive) {
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "div",
+        {
+          ref,
+          className: cn("grid", COLS[cols], GAP[gap], className),
+          ...rest,
+          children
+        }
+      );
     }
-  )
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("@container", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("grid", RESPONSIVE_COLS[cols], GAP[gap]), children }) });
+  }
 );
 Grid.displayName = "Grid";
 var Stat = (0, import_react7.forwardRef)(
@@ -1149,7 +1174,20 @@ var tabsListVariants = (0, import_class_variance_authority8.cva)(
   // `gap-1` and `p-0` are invariant across the variants, so they belong here —
   // repeating them in each arm gives any future adjustment two sites to change
   // and one to forget.
-  "inline-flex items-center justify-center gap-1 rounded-none p-0 text-muted-foreground",
+  //
+  // The rail the triggers sit on, and it is load-bearing rather than
+  // decoration. Each trigger draws a 2px border on its trailing edge and pulls
+  // itself half a step onto this one: with no rail here, that pull put a 2px
+  // line onto whatever followed the strip in the document, and above a rounded
+  // panel that is the corner curve — a straight bar crossing an 8px arc. The
+  // rail also gives an inactive tab somewhere to be inactive, which is what
+  // makes the active one read as selected rather than as the only tab.
+  //
+  // Which edge is the trailing one depends on orientation, so the rail follows
+  // it. Radix stamps `data-orientation` on the list and on every trigger, so
+  // both halves read the same source and cannot disagree about the axis. A
+  // fixed bottom rail draws a horizontal line beneath a vertical list.
+  "inline-flex items-center justify-center gap-1 rounded-none border-b border-border p-0 text-muted-foreground data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-r",
   {
     variants: { variant: TABS_LIST_VARIANTS },
     defaultVariants: { variant: "default" }
@@ -1170,9 +1208,22 @@ var TABS_TRIGGER_SIZES = {
   sm: "text-xs"
 };
 var tabsTriggerVariants = (0, import_class_variance_authority8.cva)(
-  // Square corners: the active state is a 2px bottom border that has to run the
-  // full width of the trigger.
-  "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary! data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
+  // Square corners: the active state is a 2px border on the trailing edge that
+  // has to run the full length of the trigger and stay flush with its ends.
+  //
+  // The active colour is NOT important-marked. Nothing inside this component
+  // competes for it — the inactive arm is mutually exclusive with the active
+  // one — so the only thing an `!` could win against is a caller's class, which
+  // is precisely what a theme supplies. Marking it made the one line under
+  // every selected tab the one line a theme could not restyle, and the failure
+  // read as "the theme did not apply here" rather than as an opt-out.
+  //
+  // The trailing edge is the bottom when the strip is horizontal and the right
+  // when it is vertical, so the indicator, the half-step pull onto the rail and
+  // the active colour all switch axis together off the same `data-orientation`
+  // the list reads. Switching only some of them puts the selection affordance
+  // on one axis and the line it sits on the other.
+  "inline-flex items-center justify-center whitespace-nowrap rounded-none bg-transparent px-4 py-2 font-medium cursor-pointer transition-all duration-200 border-b-2 relative -mb-0.5 data-[state=active]:border-b-primary data-[state=active]:text-primary data-[state=inactive]:border-transparent data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:mb-0 data-[orientation=vertical]:border-r-2 data-[orientation=vertical]:-mr-0.5 data-[orientation=vertical]:data-[state=active]:border-r-primary",
   {
     variants: { size: TABS_TRIGGER_SIZES },
     defaultVariants: { size: "default" }
@@ -1790,7 +1841,9 @@ var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_class_variance_authority11 = require("class-variance-authority");
 var React7 = __toESM(require("react"), 1);
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var Sheet = DialogPrimitive2.Root;
+var SheetModalContext = React7.createContext(true);
+var Sheet = ({ modal = true, children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SheetModalContext.Provider, { value: modal, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogPrimitive2.Root, { modal, ...props, children }) });
+Sheet.displayName = "Sheet";
 var SheetTrigger = DialogPrimitive2.Trigger;
 var SheetClose = DialogPrimitive2.Close;
 var SheetPortal = DialogPrimitive2.Portal;
@@ -1831,8 +1884,9 @@ var sheetVariants = (0, import_class_variance_authority11.cva)(
 );
 var SheetContent = React7.forwardRef(({ side = "right", className, children, ...props }, ref) => {
   const portalContainer = usePortalContainer();
+  const modal = React7.useContext(SheetModalContext);
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(SheetPortal, { container: portalContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SheetOverlay, {}),
+    modal ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SheetOverlay, {}) : null,
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       DialogPrimitive2.Content,
       {
@@ -4066,6 +4120,172 @@ function useActiveShortcuts() {
     manager.activeBindings
   );
 }
+
+// src/components/field-shell.tsx
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_react19 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var controlWidth = (0, import_class_variance_authority13.cva)("w-full", {
+  variants: {
+    width: {
+      half: "max-w-[var(--nx-field-half,380px)]",
+      full: "max-w-[var(--nx-field-full,760px)]",
+      fill: ""
+    }
+  },
+  defaultVariants: { width: "half" }
+});
+function readControlProps(child) {
+  const props = child.props;
+  return props && typeof props === "object" ? props : {};
+}
+function isRenderFunction(children) {
+  return typeof children === "function";
+}
+function computeControlWiring(ownProps, requestedId, renderedMessageIds, hasError) {
+  const ownId = typeof ownProps.id === "string" && ownProps.id !== "" ? ownProps.id : void 0;
+  const id = ownId ?? requestedId;
+  const ownDescribedByIds = typeof ownProps["aria-describedby"] === "string" ? ownProps["aria-describedby"].split(" ").filter(Boolean) : [];
+  const describedByIds = Array.from(
+    /* @__PURE__ */ new Set([...ownDescribedByIds, ...renderedMessageIds])
+  );
+  const describedBy = describedByIds.length > 0 ? describedByIds.join(" ") : void 0;
+  const ownInvalid = typeof ownProps["aria-invalid"] === "boolean" ? ownProps["aria-invalid"] : void 0;
+  const invalid = hasError ? true : ownInvalid;
+  return { id, describedBy, invalid };
+}
+function FieldShell({
+  label,
+  description,
+  error,
+  width = "half",
+  htmlFor,
+  className,
+  children
+}) {
+  const generatedControlId = (0, import_react19.useId)();
+  const messageBaseId = (0, import_react19.useId)();
+  const descriptionId = `${messageBaseId}-description`;
+  const errorId = `${messageBaseId}-error`;
+  const requestedId = htmlFor ?? generatedControlId;
+  const renderedMessageIds = [
+    description ? descriptionId : null,
+    error ? errorId : null
+  ].filter((id) => id !== null);
+  const wiring = isRenderFunction(children) ? computeControlWiring({}, requestedId, renderedMessageIds, Boolean(error)) : computeControlWiring(
+    readControlProps(children),
+    requestedId,
+    renderedMessageIds,
+    Boolean(error)
+  );
+  const isFragmentChild = !isRenderFunction(children) && children.type === import_react19.Fragment;
+  (0, import_react19.useEffect)(() => {
+    if (!isDevelopmentRuntime()) return;
+    if (isFragmentChild) return;
+    const landed = document.getElementById(wiring.id) !== null;
+    const fieldName = typeof label === "string" ? `"${label}"` : "this field";
+    devWarnOnce(
+      landed,
+      `FieldShell: the id computed for ${fieldName} never appeared on any element in the document, so its label and any description are not connected to the control. This happens when the control is a compound component \u2014 a Radix \`Select\`, \`RadioGroup\`, or similar \u2014 whose root does not forward \`id\`/\`aria-describedby\`/\`aria-invalid\` to a real DOM node. Pass \`children\` as a function and apply those to the control's actual focusable element (its trigger) instead of a single top-level clone.`
+    );
+  }, [wiring.id, label, isFragmentChild]);
+  let control;
+  if (isRenderFunction(children)) {
+    control = children(wiring);
+  } else {
+    devWarnOnce(
+      !isFragmentChild,
+      "FieldShell: `children` must be a single element, not a Fragment. A Fragment forwards no props to the elements inside it, so the id, aria-describedby and aria-invalid this component computes would have nowhere to land \u2014 the label and the control would look wired up and never actually connect. Wrap the intended elements in a real element instead, such as a `<div>`."
+    );
+    const controlOverrides = {
+      id: wiring.id,
+      ...wiring.describedBy !== void 0 ? { "aria-describedby": wiring.describedBy } : {},
+      ...wiring.invalid !== void 0 ? { "aria-invalid": wiring.invalid } : {}
+    };
+    control = isFragmentChild ? children : (0, import_react19.cloneElement)(children, controlOverrides);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "label",
+      {
+        htmlFor: wiring.id,
+        className: "text-sm font-medium text-foreground",
+        children: label
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: controlWidth({ width }), children: control }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { id: descriptionId, className: "text-sm text-muted-foreground", children: description }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { id: errorId, className: "text-sm font-medium text-destructive", children: error }) : null
+  ] });
+}
+
+// src/components/form-section.tsx
+var import_react20 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function FormSection({
+  label,
+  description,
+  className,
+  children
+}) {
+  const labelId = (0, import_react20.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("section", { "aria-labelledby": labelId, className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        "p",
+        {
+          id: labelId,
+          className: "text-xs font-semibold tracking-[0.08em] uppercase text-muted-foreground",
+          children: label
+        }
+      ),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-sm text-muted-foreground", children: description }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Card, { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "divide-y divide-foreground/10 px-6", children }) })
+  ] });
+}
+
+// src/components/form-layout.tsx
+var import_class_variance_authority14 = require("class-variance-authority");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var measure = (0, import_class_variance_authority14.cva)("mx-auto w-full px-6 py-8", {
+  variants: {
+    width: {
+      form: "max-w-[56rem]",
+      wide: "max-w-[72rem]"
+    }
+  },
+  defaultVariants: { width: "form" }
+});
+function FormLayout({
+  width = "form",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cn(measure({ width }), className), children });
+}
+function FormActions({ dirty, className, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "div",
+    {
+      className: cn(
+        "sticky bottom-0 mt-8 flex items-center justify-end gap-3",
+        "border-t border-border bg-background/95 py-4 backdrop-blur",
+        className
+      ),
+      children: [
+        dirty ? (
+          // `role="status"` (implying `aria-live="polite"`) so a screen-reader
+          // user is told when the flag flips false to true, not only sighted
+          // users watching the bar. This is the only live region FormActions
+          // renders, one per form.
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { role: "status", className: "mr-auto text-sm text-muted-foreground", children: "You have unsaved changes" })
+        ) : null,
+        children
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4151,7 +4371,11 @@ function useActiveShortcuts() {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  FieldShell,
+  FormActions,
   FormLabelWithTooltip,
+  FormLayout,
+  FormSection,
   Grid,
   Input,
   Label,