@bug-on/m3-expressive 1.1.0 → 1.2.1

package/dist/forms.mjs

@@ -5,6 +5,7 @@ import { useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as RadixScrollArea from '@radix-ui/react-scroll-area';
 
@@ -518,7 +519,9 @@ var ChipImpl = React4.forwardRef(
       avatar,
       onRemove,
       className,
-      onClick
+      onClick,
+      asChild = false,
+      children
     } = _b, props = __objRest(_b, [
       "variant",
       "elevated",
@@ -530,7 +533,9 @@ var ChipImpl = React4.forwardRef(
       "avatar",
       "onRemove",
       "className",
-      "onClick"
+      "onClick",
+      "asChild",
+      "children"
     ]);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
@@ -645,6 +650,63 @@ var ChipImpl = React4.forwardRef(
       ) : null }),
       /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: label })
     ] });
+    if (asChild) {
+      const child = React4.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+        mainContent,
+        hasTrailingContent && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center shrink-0", children: onRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": typeof label === "string" ? `Remove ${label}` : "Remove",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove(e);
+            },
+            onPointerDown: (e) => e.stopPropagation(),
+            className: cn(
+              "flex items-center justify-center w-8.5 h-full",
+              "cursor-pointer focus-visible:outline-none",
+              "transition-all duration-150",
+              "relative overflow-hidden rounded-r-[7px] rounded-l-none",
+              "before:absolute before:-inset-px before:pointer-events-none before:bg-current",
+              "before:transition-opacity before:duration-200 before:opacity-0 before:rounded-r-[7px]",
+              "hover:before:opacity-[0.08] active:before:opacity-[0.12]",
+              selected ? "text-m3-on-secondary-container" : "text-m3-on-surface-variant"
+            ),
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        ) : trailingIcon ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex items-center justify-center w-4.5 h-4.5 [&_.md-icon]:text-[length:inherit]!",
+              selected ? "text-m3-on-secondary-container" : "text-m3-on-surface-variant"
+            ),
+            style: { fontSize: 18 },
+            "aria-hidden": "true",
+            children: trailingIcon
+          }
+        ) : null })
+      ] });
+      const strippedProps = __spreadValues({}, props);
+      delete strippedProps.children;
+      return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsx(
+        Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-disabled": disabled || void 0,
+          tabIndex: disabled ? -1 : 0,
+          onClick,
+          onPointerDown,
+          className: containerClass
+        }, strippedProps), {
+          children: React4.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
     return /* @__PURE__ */ jsx(LazyMotion, { features: domMax, strict: true, children: /* @__PURE__ */ jsxs(
       Root2,
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
@@ -3449,7 +3511,6 @@ var FloatingLabel = React4.memo(function FloatingLabel2({
         "absolute pointer-events-none select-none origin-[left_center] leading-6 text-base whitespace-nowrap",
         "px-1 -mx-1",
         // Clear the notch gap and keep text aligned
-        variant === "outlined" && isFloated && "bg-m3-surface",
         "left-4",
         isDisabled && "opacity-[0.38]"
       ),
@@ -3525,7 +3586,8 @@ var OutlineContainer = React4.memo(function OutlineContainer2({
   );
   const borderWidth = isFocused || isError ? TF_SIZE.outlineThick : TF_SIZE.outlineThin;
   const leftSegmentWidth = TF_SIZE.paddingStart;
-  const notchWidth = isFloated ? labelWidth * TF_TYPOGRAPHY.labelScaleRatio + TF_SIZE.notchPadding * 2 : 0;
+  const isNotched = isFloated && labelWidth > 0;
+  const notchWidth = isNotched ? labelWidth * TF_TYPOGRAPHY.labelScaleRatio + TF_SIZE.notchPadding * 2 : 0;
   const borderTransition = { duration: colorDuration, ease };
   const notchTransition = { duration: notchDuration, ease };
   return /* @__PURE__ */ jsxs(
@@ -3563,7 +3625,7 @@ var OutlineContainer = React4.memo(function OutlineContainer2({
                   style: { height: borderWidth },
                   animate: {
                     borderTopColor: borderColor,
-                    opacity: isFloated ? 0 : 1,
+                    opacity: isNotched ? 0 : 1,
                     borderTopWidth: borderWidth,
                     borderTopStyle: "solid"
                   },
@@ -4015,7 +4077,7 @@ var TextFieldComponent = React4.forwardRef(
     const computedDescribedby = [hasSupporting ? supportingId : "", ariaDescribedby != null ? ariaDescribedby : ""].filter(Boolean).join(" ") || void 0;
     const inputClass = cn(
       "bg-transparent outline-none w-full",
-      isInToolbar ? "self-center" : "self-end",
+      !resolvedLabel || isInToolbar ? "self-center" : "self-end",
       "text-base leading-6 text-m3-on-surface",
       "caret-[var(--color-m3-primary)]",
       "placeholder:text-m3-on-surface-variant/60",
@@ -4026,7 +4088,7 @@ var TextFieldComponent = React4.forwardRef(
       id: inputId,
       name,
       value: currentValue,
-      placeholder: isFloated ? placeholder != null ? placeholder : "" : "",
+      placeholder: !resolvedLabel || isFloated ? placeholder != null ? placeholder : "" : "",
       disabled,
       readOnly,
       required,
@@ -4058,7 +4120,7 @@ var TextFieldComponent = React4.forwardRef(
       "relative flex flex-col flex-1 min-w-0 h-full",
       paddingStart,
       paddingEnd,
-      isInToolbar ? "justify-center" : variant === "filled" ? resolvedDense ? "pt-5 pb-2" : "pt-6 pb-2" : resolvedDense ? "py-3" : "py-4"
+      isInToolbar || !resolvedLabel ? "justify-center" : variant === "filled" ? resolvedDense ? "pt-5 pb-2" : "pt-6 pb-2" : resolvedDense ? "py-3" : "py-4"
     );
     const wrapperClass = cn(
       "group/tf inline-flex flex-col",