@7onic-ui/react 0.3.10 → 0.3.12

package/dist/index.js

@@ -1492,6 +1492,14 @@ var FieldContext = React10.createContext(null);
 function useFieldContext() {
   return React10.useContext(FieldContext);
 }
+function useFieldControl(kind, enabled) {
+  const context = useFieldContext();
+  const register = context?.registerControl;
+  React10.useEffect(() => {
+    if (!enabled || !register) return;
+    return register(kind);
+  }, [enabled, register, kind]);
+}
 var fieldVariants = (0, import_class_variance_authority8.cva)("flex flex-col", {
   variants: {
     gap: {
@@ -1509,10 +1517,30 @@ var fieldVariants = (0, import_class_variance_authority8.cva)("flex flex-col", {
 var Field = React10.forwardRef(
   ({ className, gap, error, disabled, children, ...props }, ref) => {
     const id = React10.useId();
-    return /* @__PURE__ */ React10.createElement(FieldContext.Provider, { value: { id, error, disabled } }, /* @__PURE__ */ React10.createElement(
+    const labelId = `${id}-label`;
+    const [labelCount, setLabelCount] = React10.useState(0);
+    const [counts, setCounts] = React10.useState({ single: 0, group: 0, labelled: 0 });
+    const registerLabel = React10.useCallback(() => {
+      setLabelCount((n) => n + 1);
+      return () => setLabelCount((n) => n - 1);
+    }, []);
+    const registerControl = React10.useCallback((kind) => {
+      setCounts((c) => ({ ...c, [kind]: c[kind] + 1 }));
+      return () => setCounts((c) => ({ ...c, [kind]: c[kind] - 1 }));
+    }, []);
+    const hasLabel = labelCount > 0;
+    const isGroup = counts.single === 0 && (counts.group > 0 || counts.labelled > 0);
+    const asGroup = counts.single === 0 && counts.group > 0;
+    const contextValue = React10.useMemo(
+      () => ({ id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl }),
+      [id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl]
+    );
+    return /* @__PURE__ */ React10.createElement(FieldContext.Provider, { value: contextValue }, /* @__PURE__ */ React10.createElement(
       "div",
       {
         ref,
+        role: asGroup ? "group" : void 0,
+        "aria-labelledby": asGroup && hasLabel ? labelId : void 0,
         className: cn(fieldVariants({ gap }), className),
         "data-error": error || void 0,
         "data-disabled": disabled || void 0,
@@ -1526,11 +1554,14 @@ Field.displayName = "Field";
 var FieldLabel = React10.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     const context = useFieldContext();
+    const registerLabel = context?.registerLabel;
+    React10.useEffect(() => registerLabel?.(), [registerLabel]);
     return /* @__PURE__ */ React10.createElement(
       "label",
       {
         ref,
-        htmlFor: context?.id,
+        id: context?.labelId,
+        htmlFor: context && !context.isGroup ? context.id : void 0,
         className: cn(
           "text-md font-semibold text-foreground",
           // 14px - primary field identifier
@@ -1691,6 +1722,7 @@ var Input = React11.forwardRef(
     const resolvedError = error ?? fieldContext?.error;
     const resolvedState = resolvedError ? "error" : state;
     const inputId = id ?? fieldContext?.id;
+    useFieldControl("single", Boolean(fieldContext) && !id);
     const isDisabled = props.disabled ?? fieldContext?.disabled;
     const pointerRef = React11.useRef(false);
     const windowBlurredRef = React11.useRef(false);
@@ -1864,6 +1896,7 @@ var Textarea = React12.forwardRef(
     const resolvedError = error ?? fieldContext?.error;
     const resolvedState = resolvedError ? "error" : state;
     const textareaId = id ?? fieldContext?.id;
+    useFieldControl("single", Boolean(fieldContext) && !id);
     const isDisabled = props.disabled ?? fieldContext?.disabled;
     const pointerRef = React12.useRef(false);
     const windowBlurredRef = React12.useRef(false);
@@ -2001,7 +2034,9 @@ var Checkbox = React13.forwardRef(({ className, size, radius, weight, color = "d
   const resolvedSize = size || "default";
   const resolvedDisabled = disabled ?? fieldContext?.disabled;
   const generatedId = React13.useId();
-  const checkboxId = id ?? fieldContext?.id ?? generatedId;
+  const hasOwnLabel = Boolean(label);
+  const checkboxId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId);
+  useFieldControl(hasOwnLabel ? "group" : "single", Boolean(fieldContext) && (hasOwnLabel || !id));
   const checkbox = /* @__PURE__ */ React13.createElement(
     CheckboxPrimitive.Root,
     {
@@ -2088,6 +2123,8 @@ var radioGroupVariants = (0, import_class_variance_authority12.cva)("grid gap-3"
 var RadioGroup = React14.forwardRef(({ className, orientation, size = "default", weight = "bold", color = "default", disabled, ...props }, ref) => {
   const fieldContext = useFieldContext();
   const resolvedDisabled = disabled ?? fieldContext?.disabled;
+  useFieldControl("labelled", Boolean(fieldContext));
+  const labelledBy = fieldContext?.hasLabel && !props["aria-label"] ? fieldContext.labelId : void 0;
   return /* @__PURE__ */ React14.createElement(RadioGroupContext.Provider, { value: { size, weight, color, disabled: resolvedDisabled } }, /* @__PURE__ */ React14.createElement(
     RadioGroupPrimitive2.Root,
     {
@@ -2095,6 +2132,7 @@ var RadioGroup = React14.forwardRef(({ className, orientation, size = "default",
       className: cn(radioGroupVariants({ orientation }), className),
       orientation: orientation || void 0,
       disabled: resolvedDisabled,
+      "aria-labelledby": labelledBy,
       ...props
     }
   ));
@@ -2266,7 +2304,9 @@ var Switch = React15.forwardRef(({ className, size, label, labelPosition = "end"
   const resolvedSize = size || "default";
   const resolvedDisabled = disabled ?? fieldContext?.disabled;
   const generatedId = React15.useId();
-  const switchId = id ?? fieldContext?.id ?? generatedId;
+  const hasOwnLabel = Boolean(label || startLabel || endLabel);
+  const switchId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId);
+  useFieldControl(hasOwnLabel ? "group" : "single", Boolean(fieldContext) && (hasOwnLabel || !id));
   const switchEl = /* @__PURE__ */ React15.createElement(
     SwitchPrimitive.Root,
     {
@@ -2368,8 +2408,11 @@ var sliderColorMap = {
     thumbActive: "active:shadow-[0_0_0_6px_color-mix(in_srgb,var(--color-primary)_16%,transparent)]"
   }
 };
-var Slider = React16.forwardRef(({ className, size, color = "default", value, defaultValue, onValueChange, showTooltip = "never", formatLabel, startContent, endContent, orientation, ...props }, ref) => {
+var Slider = React16.forwardRef(({ className, size, color = "default", value, defaultValue, onValueChange, showTooltip = "never", formatLabel, startContent, endContent, orientation, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) => {
   const resolvedSize = size || "default";
+  const fieldContext = useFieldContext();
+  useFieldControl("labelled", Boolean(fieldContext));
+  const thumbLabelledBy = ariaLabelledBy ?? (!ariaLabel && fieldContext?.hasLabel ? fieldContext.labelId : void 0);
   const thumbCount = value?.length ?? defaultValue?.length ?? 1;
   const hasTooltip = showTooltip !== "never";
   const hasWrapper = !!(startContent || endContent);
@@ -2422,6 +2465,8 @@ var Slider = React16.forwardRef(({ className, size, color = "default", value, de
       SliderPrimitive.Thumb,
       {
         key: i,
+        "aria-label": ariaLabel,
+        "aria-labelledby": thumbLabelledBy,
         className: cn(
           "group/thumb block rounded-full border-2 shadow-sm",
           sliderColorMap[color].thumb,
@@ -2800,16 +2845,23 @@ var SelectStyleContext = React18.createContext({ contentRadius: "xl", itemSize:
 var Select = ({
   size = "default",
   radius = "default",
+  disabled,
   ...props
-}) => /* @__PURE__ */ React18.createElement(SelectRootContext.Provider, { value: { size, radius } }, /* @__PURE__ */ React18.createElement(SelectPrimitive.Root, { ...props }));
+}) => {
+  const fieldContext = useFieldContext();
+  return /* @__PURE__ */ React18.createElement(SelectRootContext.Provider, { value: { size, radius } }, /* @__PURE__ */ React18.createElement(SelectPrimitive.Root, { disabled: disabled ?? fieldContext?.disabled, ...props }));
+};
 var SelectValue = SelectPrimitive.Value;
 var SelectGroup = SelectPrimitive.Group;
-var SelectTrigger = React18.forwardRef(({ className, children, ...props }, ref) => {
+var SelectTrigger = React18.forwardRef(({ className, children, id, ...props }, ref) => {
   const { size, radius } = React18.useContext(SelectRootContext);
+  const fieldContext = useFieldContext();
+  useFieldControl("single", Boolean(fieldContext) && !id);
   return /* @__PURE__ */ React18.createElement(
     SelectPrimitive.Trigger,
     {
       ref,
+      id: id ?? fieldContext?.id,
       className: cn(
         "flex w-full items-center justify-between bg-background text-foreground hover:bg-background-muted",
         "border border-border",
@@ -4357,9 +4409,11 @@ var NavigationMenuItem = React25.forwardRef(
   ({ className, value, defaultOpen = false, children, ...props }, ref) => {
     const { orientation, collapsed } = useNavigationMenuContext();
     const [open, setOpen] = React25.useState(defaultOpen);
-    React25.useEffect(() => {
+    const [prevCollapsed, setPrevCollapsed] = React25.useState(collapsed);
+    if (collapsed !== prevCollapsed) {
+      setPrevCollapsed(collapsed);
       if (collapsed) setOpen(false);
-    }, [collapsed]);
+    }
     if (orientation === "horizontal") {
       return /* @__PURE__ */ React25.createElement(
         NavigationMenuPrimitive.Item,
@@ -4591,10 +4645,30 @@ var NavigationMenuGroup = React25.forwardRef(
   ({ className, label, children, ...props }, ref) => {
     const { size, collapsed } = useNavigationMenuContext();
     const s = navigationMenuSizeMap[size];
-    return /* @__PURE__ */ React25.createElement("div", { ref, role: "group", className: cn(label && !collapsed && s.groupMargin, className), ...props }, label && !collapsed && /* @__PURE__ */ React25.createElement("div", { className: cn(
-      "font-semibold text-text-subtle uppercase tracking-wider select-none",
-      s.groupLabel
-    ) }, label), /* @__PURE__ */ React25.createElement("ul", { className: "flex flex-col gap-0.5" }, children));
+    const labelId = React25.useId();
+    const showLabel = Boolean(label) && !collapsed;
+    return /* @__PURE__ */ React25.createElement("li", { className: cn(showLabel && s.groupMargin) }, /* @__PURE__ */ React25.createElement(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-labelledby": showLabel && !props["aria-label"] ? labelId : void 0,
+        className,
+        ...props
+      },
+      showLabel && /* @__PURE__ */ React25.createElement(
+        "div",
+        {
+          id: labelId,
+          className: cn(
+            "font-semibold text-text-subtle uppercase tracking-wider select-none",
+            s.groupLabel
+          )
+        },
+        label
+      ),
+      /* @__PURE__ */ React25.createElement("ul", { className: "flex flex-col gap-0.5" }, children)
+    ));
   }
 );
 NavigationMenuGroup.displayName = "NavigationMenuGroup";
@@ -5062,9 +5136,9 @@ var PaginationEllipsis = React26.forwardRef(
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
 var PaginationItems = React26.forwardRef(
-  ({ className, ...props }, ref) => {
+  (_props, _ref) => {
     const ctx = usePaginationContext();
-    return /* @__PURE__ */ React26.createElement("div", { ref, className: cn("contents", className), ...props }, ctx.paginationRange.map((item, index) => /* @__PURE__ */ React26.createElement(PaginationItem, { key: `${item}-${index}` }, item === "dots" ? /* @__PURE__ */ React26.createElement(PaginationEllipsis, null) : /* @__PURE__ */ React26.createElement(PaginationLink, { page: item }))));
+    return /* @__PURE__ */ React26.createElement(React26.Fragment, null, ctx.paginationRange.map((item, index) => /* @__PURE__ */ React26.createElement(PaginationItem, { key: `${item}-${index}` }, item === "dots" ? /* @__PURE__ */ React26.createElement(PaginationEllipsis, null) : /* @__PURE__ */ React26.createElement(PaginationLink, { page: item }))));
   }
 );
 PaginationItems.displayName = "PaginationItems";
@@ -7382,6 +7456,10 @@ var ChatInput = React38.forwardRef(
   }
 );
 ChatInput.displayName = "ChatInput";
+function assignRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
 var ChatInputField = React38.forwardRef(
   ({
     className,
@@ -7404,12 +7482,8 @@ var ChatInputField = React38.forwardRef(
     const setRef = React38.useCallback(
       (el) => {
         internalRef.current = el;
-        ctx._fieldRef.current = el;
-        if (typeof forwardedRef === "function") {
-          forwardedRef(el);
-        } else if (forwardedRef) {
-          forwardedRef.current = el;
-        }
+        assignRef(ctx._fieldRef, el);
+        assignRef(forwardedRef, el);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [forwardedRef]