@alpic-ai/ui 1.170.0 → 1.172.0

package/src/components/form.tsx

@@ -93,9 +93,10 @@ function FormItem({ className, ...props }: React.ComponentProps<"div">) {
 interface FormLabelProps extends React.ComponentProps<typeof Label> {
   required?: boolean;
   tooltip?: string;
+  marker?: React.ReactNode;
 }
 
-function FormLabel({ className, required, tooltip, children, ...props }: FormLabelProps) {
+function FormLabel({ className, required, tooltip, marker, children, ...props }: FormLabelProps) {
   const { error, formItemId } = useFormField();
 
   return (
@@ -122,6 +123,7 @@ function FormLabel({ className, required, tooltip, children, ...props }: FormLab
           <TooltipContent>{tooltip}</TooltipContent>
         </Tooltip>
       )}
+      {marker && <span className="ml-1 flex items-center">{marker}</span>}
     </div>
   );
 }
@@ -194,6 +196,7 @@ interface FormFieldBaseProps<TFieldValues extends FieldValues, TName extends Fie
   label?: string;
   description?: string;
   tooltip?: string;
+  marker?: React.ReactNode;
 }
 
 interface InputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>
@@ -208,6 +211,7 @@ function InputField<TFieldValues extends FieldValues, TName extends FieldPath<TF
   label,
   description,
   tooltip,
+  marker,
   ...inputProps
 }: InputFieldProps<TFieldValues, TName>) {
   return (
@@ -218,7 +222,7 @@ function InputField<TFieldValues extends FieldValues, TName extends FieldPath<TF
       render={({ field }) => (
         <FormItem>
           {label && (
-            <FormLabel required={required} tooltip={tooltip}>
+            <FormLabel required={required} tooltip={tooltip} marker={marker}>
               {label}
             </FormLabel>
           )}
@@ -245,6 +249,7 @@ function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath
   label,
   description,
   tooltip,
+  marker,
   ...textareaProps
 }: TextareaFieldProps<TFieldValues, TName>) {
   return (
@@ -255,7 +260,7 @@ function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath
       render={({ field }) => (
         <FormItem>
           {label && (
-            <FormLabel required={required} tooltip={tooltip}>
+            <FormLabel required={required} tooltip={tooltip} marker={marker}>
               {label}
             </FormLabel>
           )}
@@ -290,6 +295,7 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
   label,
   description,
   tooltip,
+  marker,
   options,
   placeholder,
 }: SelectFieldProps<TFieldValues, TName>) {
@@ -301,7 +307,7 @@ function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<T
       render={({ field }) => (
         <FormItem>
           {label && (
-            <FormLabel required={required} tooltip={tooltip}>
+            <FormLabel required={required} tooltip={tooltip} marker={marker}>
               {label}
             </FormLabel>
           )}
@@ -340,6 +346,7 @@ function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TF
   label,
   description,
   tooltip,
+  marker,
   options,
 }: RadioFieldProps<TFieldValues, TName>) {
   return (
@@ -350,7 +357,7 @@ function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TF
       render={({ field }) => (
         <FormItem>
           {label && (
-            <FormLabel required={required} tooltip={tooltip}>
+            <FormLabel required={required} tooltip={tooltip} marker={marker}>
               {label}
             </FormLabel>
           )}
@@ -393,6 +400,7 @@ function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPat
   label,
   description,
   tooltip,
+  marker,
   options,
 }: ChecklistFieldProps<TFieldValues, TName>) {
   return (
@@ -412,7 +420,7 @@ function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPat
         return (
           <FormItem>
             {label && (
-              <FormLabel required={required} tooltip={tooltip}>
+              <FormLabel required={required} tooltip={tooltip} marker={marker}>
                 {label}
               </FormLabel>
             )}
@@ -459,6 +467,7 @@ function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath
   label,
   description,
   tooltip,
+  marker,
 }: CheckboxFieldProps<TFieldValues, TName>) {
   return (
     <FormField
@@ -478,6 +487,7 @@ function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath
             {label && (
               <FormLabel
                 tooltip={tooltip}
+                marker={marker}
                 className="font-normal max-md:-ml-2 max-md:min-h-11 max-md:flex-1 max-md:items-start max-md:pl-2"
               >
                 {label}

package/src/components/input.tsx

@@ -33,6 +33,8 @@ interface InputProps extends Omit<React.ComponentProps<"input">, "size"> {
   leadingText?: string;
   leadingIcon?: React.ReactNode;
   size?: "sm" | "md";
+  sensitive?: boolean;
+  show?: boolean;
 }
 
 function Input({
@@ -46,6 +48,8 @@ function Input({
   leadingText,
   leadingIcon,
   size = "md",
+  sensitive = false,
+  show = false,
   ...props
 }: InputProps) {
   const generatedId = React.useId();
@@ -74,12 +78,16 @@ function Input({
           error && "border-border-error",
         ],
         hasAddons && "flex-1 min-h-0",
+        // Obscuring the text keeps password managers away, where type="password" would make them offer to save the value.
+        sensitive && !show && "[-webkit-text-security:disc]",
         className,
       )}
       required={required}
       aria-invalid={error ? true : undefined}
       aria-describedby={fieldId && (hint || error) ? `${fieldId}-description` : undefined}
       {...props}
+      autoComplete={sensitive ? "off" : props.autoComplete}
+      spellCheck={sensitive ? false : props.spellCheck}
     />
   );
 

package/src/components/visually-hidden-input.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import * as React from "react";
+
+type InputValue = string[] | string;
+
+interface VisuallyHiddenInputProps<T = InputValue>
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "checked" | "onReset"> {
+  value?: T;
+  checked?: boolean;
+  control: HTMLElement | null;
+  bubbles?: boolean;
+}
+
+function VisuallyHiddenInput<T = InputValue>(props: VisuallyHiddenInputProps<T>) {
+  const { control, value, checked, bubbles = true, type = "hidden", style, ...inputProps } = props;
+
+  const isCheckInput = React.useMemo(() => type === "checkbox" || type === "radio" || type === "switch", [type]);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const prevValueRef = React.useRef<{
+    value: T | boolean | undefined;
+    previous: T | boolean | undefined;
+  }>({
+    value: isCheckInput ? checked : value,
+    previous: isCheckInput ? checked : value,
+  });
+
+  const prevValue = React.useMemo(() => {
+    const currentValue = isCheckInput ? checked : value;
+    if (prevValueRef.current.value !== currentValue) {
+      prevValueRef.current.previous = prevValueRef.current.value;
+      prevValueRef.current.value = currentValue;
+    }
+    return prevValueRef.current.previous;
+  }, [isCheckInput, value, checked]);
+
+  const [controlSize, setControlSize] = React.useState<{
+    width?: number;
+    height?: number;
+  }>({});
+
+  React.useLayoutEffect(() => {
+    if (!control) {
+      setControlSize({});
+      return;
+    }
+
+    setControlSize({
+      width: control.offsetWidth,
+      height: control.offsetHeight,
+    });
+
+    if (typeof window === "undefined") {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (!Array.isArray(entries) || !entries.length) {
+        return;
+      }
+
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+
+      let width: number;
+      let height: number;
+
+      if ("borderBoxSize" in entry) {
+        const borderSizeEntry = entry.borderBoxSize;
+        const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+        width = borderSize.inlineSize;
+        height = borderSize.blockSize;
+      } else {
+        width = control.offsetWidth;
+        height = control.offsetHeight;
+      }
+
+      setControlSize({ width, height });
+    });
+
+    resizeObserver.observe(control, { box: "border-box" });
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [control]);
+
+  React.useEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+
+    const inputProto = window.HTMLInputElement.prototype;
+    const propertyKey = isCheckInput ? "checked" : "value";
+    const eventType = isCheckInput ? "click" : "input";
+    const currentValue = isCheckInput ? checked : value;
+
+    const serializedCurrentValue = isCheckInput
+      ? checked
+      : typeof value === "object" && value !== null
+        ? JSON.stringify(value)
+        : value;
+
+    const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey);
+
+    const setter = descriptor?.set;
+
+    if (prevValue !== currentValue && setter) {
+      const event = new Event(eventType, { bubbles });
+      setter.call(input, serializedCurrentValue);
+      input.dispatchEvent(event);
+    }
+  }, [prevValue, value, checked, bubbles, isCheckInput]);
+
+  const composedStyle = React.useMemo<React.CSSProperties>(() => {
+    return {
+      ...style,
+      ...(controlSize.width !== undefined && controlSize.height !== undefined ? controlSize : {}),
+      border: 0,
+      clip: "rect(0 0 0 0)",
+      clipPath: "inset(50%)",
+      height: "1px",
+      margin: "-1px",
+      overflow: "hidden",
+      padding: 0,
+      position: "absolute",
+      whiteSpace: "nowrap",
+      width: "1px",
+    };
+  }, [style, controlSize]);
+
+  return (
+    <input
+      type={type}
+      {...inputProps}
+      ref={inputRef}
+      aria-hidden={isCheckInput}
+      tabIndex={-1}
+      defaultChecked={isCheckInput ? checked : undefined}
+      style={composedStyle}
+    />
+  );
+}
+
+export { VisuallyHiddenInput };

package/src/hooks/use-as-ref.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+
+function useAsRef<T>(props: T) {
+  const ref = React.useRef<T>(props);
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = props;
+  });
+
+  return ref;
+}
+
+export { useAsRef };

package/src/hooks/use-isomorphic-layout-effect.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+
+export { useIsomorphicLayoutEffect };

package/src/hooks/use-lazy-ref.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+function useLazyRef<T>(fn: () => T) {
+  const ref = React.useRef<{ current: T } | null>(null);
+
+  if (ref.current === null) {
+    ref.current = { current: fn() };
+  }
+
+  return ref.current;
+}
+
+export { useLazyRef };

package/src/lib/compose-refs.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === "function") {
+    return ref(value);
+  }
+  if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+  return undefined;
+}
+
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  return (node) => {
+    const cleanups = refs.map((ref) => setRef(ref, node));
+    if (!cleanups.some((cleanup) => typeof cleanup === "function")) {
+      return undefined;
+    }
+    return () => {
+      cleanups.forEach((cleanup, index) => {
+        if (typeof cleanup === "function") {
+          cleanup();
+        } else {
+          setRef(refs[index], null);
+        }
+      });
+    };
+  };
+}
+
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the composed callback must be rebuilt whenever any ref identity changes.
+  return React.useCallback(composeRefs(...refs), refs);
+}
+
+export { composeRefs, useComposedRefs };

package/src/stories/input.stories.tsx

@@ -46,6 +46,9 @@ export const AllVariants: Story = () => (
       disabled
     />
 
+    <span className={SECTION_HEADER}>Sensitive</span>
+    <Input id="sensitive" label="Client secret" sensitive defaultValue="s3cr3t-value" />
+
     <span className={SECTION_HEADER}>Leading icon (email)</span>
     <Input id="leading-icon" label="Email" required placeholder="alice@example.com" leadingIcon={<Mail />} />