@bug-on/m3-expressive 1.1.0 → 1.2.1

package/dist/forms.d.mts

@@ -1,5 +1,5 @@
-import { B as SliderThumbProps } from './text-field-eAIpz9z1.mjs';
-export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, S as Slider, k as SliderColors, l as SliderOrientation, m as SliderProps, n as SliderTokens, o as SliderTrackSize, p as SliderVariant, q as Switch, r as SwitchColors, s as SwitchProps, t as SwitchTokens, T as TextField, u as TextFieldHandle, v as TextFieldInputType, w as TextFieldProps, x as TextFieldTrailingIconMode, y as TextFieldVariant, z as TriStateCheckbox, A as TriStateCheckboxProps } from './text-field-eAIpz9z1.mjs';
+import { B as SliderThumbProps } from './text-field-T4Rg-9Bw.mjs';
+export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, S as Slider, k as SliderColors, l as SliderOrientation, m as SliderProps, n as SliderTokens, o as SliderTrackSize, p as SliderVariant, q as Switch, r as SwitchColors, s as SwitchProps, t as SwitchTokens, T as TextField, u as TextFieldHandle, v as TextFieldInputType, w as TextFieldProps, x as TextFieldTrailingIconMode, y as TextFieldVariant, z as TriStateCheckbox, A as TriStateCheckboxProps } from './text-field-T4Rg-9Bw.mjs';
 import * as React from 'react';
 import 'class-variance-authority/types';
 import 'class-variance-authority';

package/dist/forms.d.ts

@@ -1,5 +1,5 @@
-import { B as SliderThumbProps } from './text-field-eAIpz9z1.js';
-export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, S as Slider, k as SliderColors, l as SliderOrientation, m as SliderProps, n as SliderTokens, o as SliderTrackSize, p as SliderVariant, q as Switch, r as SwitchColors, s as SwitchProps, t as SwitchTokens, T as TextField, u as TextFieldHandle, v as TextFieldInputType, w as TextFieldProps, x as TextFieldTrailingIconMode, y as TextFieldVariant, z as TriStateCheckbox, A as TriStateCheckboxProps } from './text-field-eAIpz9z1.js';
+import { B as SliderThumbProps } from './text-field-T4Rg-9Bw.js';
+export { C as Checkbox, a as CheckboxProps, b as CheckboxState, c as Chip, d as ChipProps, R as RadioButton, e as RadioButtonColors, f as RadioButtonProps, g as RadioGroup, h as RadioGroupProps, i as RangeSlider, j as RangeSliderProps, S as Slider, k as SliderColors, l as SliderOrientation, m as SliderProps, n as SliderTokens, o as SliderTrackSize, p as SliderVariant, q as Switch, r as SwitchColors, s as SwitchProps, t as SwitchTokens, T as TextField, u as TextFieldHandle, v as TextFieldInputType, w as TextFieldProps, x as TextFieldTrailingIconMode, y as TextFieldVariant, z as TriStateCheckbox, A as TriStateCheckboxProps } from './text-field-T4Rg-9Bw.js';
 import * as React from 'react';
 import 'class-variance-authority/types';
 import 'class-variance-authority';

package/dist/forms.js

@@ -6,6 +6,7 @@ var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var RadixScrollArea = require('@radix-ui/react-scroll-area');
 
@@ -540,7 +541,9 @@ var ChipImpl = React4__namespace.forwardRef(
       avatar,
       onRemove,
       className,
-      onClick
+      onClick,
+      asChild = false,
+      children
     } = _b, props = __objRest(_b, [
       "variant",
       "elevated",
@@ -552,7 +555,9 @@ var ChipImpl = React4__namespace.forwardRef(
       "avatar",
       "onRemove",
       "className",
-      "onClick"
+      "onClick",
+      "asChild",
+      "children"
     ]);
     const { ripples, onPointerDown, removeRipple } = useRippleState({
       disabled
@@ -667,6 +672,63 @@ var ChipImpl = React4__namespace.forwardRef(
       ) : null }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: label })
     ] });
+    if (asChild) {
+      const child = React4__namespace.Children.only(children);
+      const innerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Ripple, { ripples, onRippleDone: removeRipple }),
+        mainContent,
+        hasTrailingContent && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center shrink-0", children: onRemove ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CloseIcon, {})
+          }
+        ) : trailingIcon ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactSlot.Slot,
+        __spreadProps(__spreadValues({
+          ref,
+          "aria-disabled": disabled || void 0,
+          tabIndex: disabled ? -1 : 0,
+          onClick,
+          onPointerDown,
+          className: containerClass
+        }, strippedProps), {
+          children: React4__namespace.cloneElement(child, { children: innerContent })
+        })
+      ) });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domMax, strict: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       Root2,
       __spreadProps(__spreadValues(__spreadProps(__spreadValues({
@@ -3471,7 +3533,6 @@ var FloatingLabel = React4__namespace.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]"
       ),
@@ -3547,7 +3608,8 @@ var OutlineContainer = React4__namespace.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__ */ jsxRuntime.jsxs(
@@ -3585,7 +3647,7 @@ var OutlineContainer = React4__namespace.memo(function OutlineContainer2({
                   style: { height: borderWidth },
                   animate: {
                     borderTopColor: borderColor,
-                    opacity: isFloated ? 0 : 1,
+                    opacity: isNotched ? 0 : 1,
                     borderTopWidth: borderWidth,
                     borderTopStyle: "solid"
                   },
@@ -4037,7 +4099,7 @@ var TextFieldComponent = React4__namespace.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",
@@ -4048,7 +4110,7 @@ var TextFieldComponent = React4__namespace.forwardRef(
       id: inputId,
       name,
       value: currentValue,
-      placeholder: isFloated ? placeholder != null ? placeholder : "" : "",
+      placeholder: !resolvedLabel || isFloated ? placeholder != null ? placeholder : "" : "",
       disabled,
       readOnly,
       required,
@@ -4080,7 +4142,7 @@ var TextFieldComponent = React4__namespace.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",