@djangocfg/ui-core 2.1.412 → 2.1.415

package/src/components/forms/checkbox-group/index.tsx

@@ -0,0 +1,243 @@
+"use client"
+
+import { Check } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface CheckboxGroupContextValue {
+  value: string[]
+  onValueChange: (value: string[]) => void
+  disabled: boolean
+  name?: string
+}
+
+const CheckboxGroupContext = React.createContext<CheckboxGroupContextValue | null>(null)
+
+function useCheckboxGroupContext(consumerName: string) {
+  const context = React.useContext(CheckboxGroupContext)
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`CheckboxGroup\``)
+  }
+  return context
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CheckboxGroup Root
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface CheckboxGroupProps extends React.ComponentProps<"div"> {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  disabled?: boolean
+  name?: string
+}
+
+function CheckboxGroup({
+  className,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  name,
+  ...props
+}: CheckboxGroupProps) {
+  const isControlled = valueProp !== undefined
+  const [uncontrolledValue, setUncontrolledValue] = React.useState<string[]>(defaultValue ?? [])
+
+  const value = isControlled ? valueProp : uncontrolledValue
+
+  const handleValueChange = React.useCallback(
+    (nextValue: string[]) => {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue)
+      }
+      onValueChange?.(nextValue)
+    },
+    [isControlled, onValueChange],
+  )
+
+  const contextValue = React.useMemo<CheckboxGroupContextValue>(
+    () => ({
+      value,
+      onValueChange: handleValueChange,
+      disabled,
+      name,
+    }),
+    [value, handleValueChange, disabled, name],
+  )
+
+  return (
+    <CheckboxGroupContext.Provider value={contextValue}>
+      <div
+        data-slot="checkbox-group"
+        data-disabled={disabled ? "" : undefined}
+        className={cn("peer flex flex-col gap-3.5", className)}
+        {...props}
+      />
+    </CheckboxGroupContext.Provider>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CheckboxGroupLabel
+// ─────────────────────────────────────────────────────────────────────────────
+
+function CheckboxGroupLabel({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="checkbox-group-label"
+      className={cn(
+        "text-foreground/70 text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CheckboxGroupList
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface CheckboxGroupListProps extends React.ComponentProps<"div"> {
+  orientation?: "horizontal" | "vertical"
+}
+
+function CheckboxGroupList({
+  className,
+  orientation = "vertical",
+  ...props
+}: CheckboxGroupListProps) {
+  return (
+    <div
+      data-slot="checkbox-group-list"
+      data-orientation={orientation}
+      className={cn(
+        "flex gap-3",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CheckboxGroupItem
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface CheckboxGroupItemProps extends Omit<React.ComponentProps<"button">, "value"> {
+  value: string
+  disabled?: boolean
+}
+
+function CheckboxGroupItem({
+  className,
+  children,
+  value,
+  disabled: disabledProp,
+  onClick,
+  ...props
+}: CheckboxGroupItemProps) {
+  const context = useCheckboxGroupContext("CheckboxGroupItem")
+  const isDisabled = disabledProp || context.disabled
+  const isChecked = context.value.includes(value)
+
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event)
+      if (isDisabled) return
+
+      const nextValue = isChecked
+        ? context.value.filter((v) => v !== value)
+        : [...context.value, value]
+
+      context.onValueChange(nextValue)
+    },
+    [onClick, isDisabled, isChecked, context, value],
+  )
+
+  return (
+    <label
+      className={cn(
+        "flex w-fit select-none items-center gap-2 text-sm leading-none",
+        "has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50",
+      )}
+    >
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={isChecked}
+        data-slot="checkbox-group-item"
+        data-state={isChecked ? "checked" : "unchecked"}
+        data-disabled={isDisabled ? "" : undefined}
+        disabled={isDisabled}
+        onClick={handleClick}
+        className={cn(
+          "size-4 shrink-0 rounded-sm border border-primary shadow-sm",
+          "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
+          "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {isChecked && (
+          <span className="flex items-center justify-center text-current">
+            <Check className="size-3.5" />
+          </span>
+        )}
+      </button>
+      {children}
+    </label>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CheckboxGroupDescription
+// ─────────────────────────────────────────────────────────────────────────────
+
+function CheckboxGroupDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="checkbox-group-description"
+      className={cn(
+        "text-[0.8rem] text-muted-foreground leading-none",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// CheckboxGroupMessage
+// ─────────────────────────────────────────────────────────────────────────────
+
+function CheckboxGroupMessage({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="checkbox-group-message"
+      className={cn(
+        "text-[0.8rem] text-muted-foreground leading-none",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  CheckboxGroup,
+  CheckboxGroupDescription,
+  CheckboxGroupItem,
+  CheckboxGroupLabel,
+  CheckboxGroupList,
+  CheckboxGroupMessage,
+}
+export type { CheckboxGroupProps, CheckboxGroupItemProps, CheckboxGroupListProps }

package/src/components/forms/editable/index.tsx

@@ -0,0 +1,420 @@
+"use client"
+
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export interface EditableRootProps
+  extends Omit<React.ComponentPropsWithoutRef<"div">, "value" | "defaultValue" | "onChange" | "onSubmit" | "children"> {
+  /** Controlled value */
+  value?: string;
+  /** Default uncontrolled value */
+  defaultValue?: string;
+  /** Callback when value changes */
+  onValueChange?: (value: string) => void;
+  /** Callback when value is submitted (Enter or blur) */
+  onValueSubmit?: (value: string) => void;
+  /** Callback when editing is cancelled (Escape) */
+  onValueCancel?: (previousValue: string) => void;
+  /** Whether editing is active (controlled) */
+  editing?: boolean;
+  /** Callback when editing state changes */
+  onEditingChange?: (editing: boolean) => void;
+  /** Whether the editable is disabled. @default false */
+  disabled?: boolean;
+  /** Whether the editable is read-only. @default false */
+  readOnly?: boolean;
+  /** Whether to select all text on focus. @default true */
+  selectAllOnFocus?: boolean;
+  /** Whether to submit on blur. @default true */
+  submitOnBlur?: boolean;
+  /** Placeholder when empty */
+  placeholder?: string;
+  /** Form field name */
+  name?: string;
+  /** Children or render prop */
+  children?: React.ReactNode;
+}
+
+export interface EditablePreviewProps extends React.ComponentPropsWithoutRef<"span"> {}
+
+export interface EditableInputProps extends Omit<React.ComponentPropsWithoutRef<"input">, "value" | "defaultValue"> {}
+
+export interface EditableTextareaProps extends Omit<React.ComponentPropsWithoutRef<"textarea">, "value" | "defaultValue"> {}
+
+// =============================================================================
+// Context
+// =============================================================================
+
+interface EditableContextValue {
+  value: string;
+  setValue: (value: string) => void;
+  isEditing: boolean;
+  setIsEditing: (editing: boolean) => void;
+  submit: () => void;
+  cancel: () => void;
+  disabled: boolean;
+  readOnly: boolean;
+  selectAllOnFocus: boolean;
+  submitOnBlur: boolean;
+  placeholder?: string;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+  previousValueRef: React.MutableRefObject<string>;
+}
+
+const EditableContext = React.createContext<EditableContextValue | null>(null);
+
+function useEditable(componentName: string) {
+  const context = React.useContext(EditableContext);
+  if (!context) {
+    throw new Error(`${componentName} must be used within <Editable>`);
+  }
+  return context;
+}
+
+// =============================================================================
+// Root
+// =============================================================================
+
+const Editable = React.forwardRef<HTMLDivElement, EditableRootProps>(
+  (props, ref) => {
+    const {
+      value: valueProp,
+      defaultValue = "",
+      onValueChange,
+      onValueSubmit,
+      onValueCancel,
+      editing: editingProp,
+      onEditingChange,
+      disabled = false,
+      readOnly = false,
+      selectAllOnFocus = true,
+      submitOnBlur = true,
+      placeholder,
+      name,
+      children,
+      className,
+      ...rootProps
+    } = props;
+
+    const isControlledValue = valueProp !== undefined;
+    const isControlledEditing = editingProp !== undefined;
+
+    const [internalValue, setInternalValue] = React.useState(defaultValue);
+    const [internalEditing, setInternalEditing] = React.useState(false);
+
+    const resolvedValue = isControlledValue ? valueProp : internalValue;
+    const resolvedEditing = isControlledEditing ? editingProp : internalEditing;
+
+    const previousValueRef = React.useRef(resolvedValue);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+    const isFormControl = React.useRef(false);
+    const rootRef = React.useRef<HTMLDivElement>(null);
+
+    React.useImperativeHandle(ref, () => rootRef.current!);
+
+    React.useEffect(() => {
+      if (rootRef.current) {
+        isFormControl.current = !!rootRef.current.closest("form");
+      }
+    }, []);
+
+    const setValue = React.useCallback(
+      (newValue: string) => {
+        if (!isControlledValue) {
+          setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+      },
+      [isControlledValue, onValueChange]
+    );
+
+    const setEditing = React.useCallback(
+      (editing: boolean) => {
+        if (!isControlledEditing) {
+          setInternalEditing(editing);
+        }
+        onEditingChange?.(editing);
+      },
+      [isControlledEditing, onEditingChange]
+    );
+
+    const submit = React.useCallback(() => {
+      const currentValue = resolvedValue;
+      previousValueRef.current = currentValue;
+      onValueSubmit?.(currentValue);
+      setEditing(false);
+    }, [resolvedValue, onValueSubmit, setEditing]);
+
+    const cancel = React.useCallback(() => {
+      const previousValue = previousValueRef.current;
+      setValue(previousValue);
+      onValueCancel?.(previousValue);
+      setEditing(false);
+    }, [setValue, onValueCancel, setEditing]);
+
+    const startEditing = React.useCallback(() => {
+      if (disabled || readOnly) return;
+      previousValueRef.current = resolvedValue;
+      setEditing(true);
+    }, [disabled, readOnly, resolvedValue, setEditing]);
+
+    React.useEffect(() => {
+      if (resolvedEditing) {
+        requestAnimationFrame(() => {
+          inputRef.current?.focus();
+          textareaRef.current?.focus();
+        });
+      }
+    }, [resolvedEditing]);
+
+    return (
+      <EditableContext.Provider
+        value={{
+          value: resolvedValue,
+          setValue,
+          isEditing: resolvedEditing,
+          setIsEditing: setEditing,
+          submit,
+          cancel,
+          disabled,
+          readOnly,
+          selectAllOnFocus,
+          submitOnBlur,
+          placeholder,
+          inputRef,
+          textareaRef,
+          previousValueRef,
+        }}
+      >
+        <div
+          ref={rootRef}
+          data-editing={resolvedEditing ? "" : undefined}
+          data-disabled={disabled ? "" : undefined}
+          data-readonly={readOnly ? "" : undefined}
+          className={cn(
+            "inline-flex items-center gap-1",
+            disabled && "cursor-not-allowed opacity-50",
+            className
+          )}
+          {...rootProps}
+        >
+          {children}
+          {isFormControl.current && name && (
+            <input type="hidden" name={name} value={resolvedValue} disabled={disabled} />
+          )}
+        </div>
+      </EditableContext.Provider>
+    );
+  }
+);
+
+Editable.displayName = "Editable";
+
+// =============================================================================
+// Preview
+// =============================================================================
+
+const EditablePreview = React.forwardRef<HTMLSpanElement, EditablePreviewProps>(
+  (props, ref) => {
+    const context = useEditable("EditablePreview");
+
+    if (context.isEditing) return null;
+
+    return (
+      <span
+        ref={ref}
+        role="button"
+        tabIndex={context.disabled || context.readOnly ? undefined : 0}
+        aria-disabled={context.disabled}
+        data-placeholder={!context.value ? "" : undefined}
+        className={cn(
+          "cursor-pointer select-none rounded-[var(--radius)] px-2 py-1 hover:bg-accent transition-colors",
+          !context.value && "text-muted-foreground italic",
+          (context.disabled || context.readOnly) && "cursor-default hover:bg-transparent",
+          props.className
+        )}
+        onClick={(event) => {
+          props.onClick?.(event);
+          if (!context.disabled && !context.readOnly) {
+            context.setIsEditing(true);
+          }
+        }}
+        onKeyDown={(event) => {
+          props.onKeyDown?.(event);
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (!context.disabled && !context.readOnly) {
+              context.setIsEditing(true);
+            }
+          }
+        }}
+        {...props}
+      >
+        {context.value || context.placeholder || "Click to edit"}
+      </span>
+    );
+  }
+);
+
+EditablePreview.displayName = "EditablePreview";
+
+// =============================================================================
+// Input
+// =============================================================================
+
+const EditableInput = React.forwardRef<HTMLInputElement, EditableInputProps>(
+  (props, ref) => {
+    const context = useEditable("EditableInput");
+
+    const composedRef = React.useCallback(
+      (node: HTMLInputElement | null) => {
+        context.inputRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;
+        }
+      },
+      [ref, context.inputRef]
+    );
+
+    if (!context.isEditing) return null;
+
+    return (
+      <input
+        type="text"
+        ref={composedRef}
+        value={context.value}
+        disabled={context.disabled}
+        aria-label="Edit value"
+        className={cn(
+          "flex h-10 rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          props.className
+        )}
+        onChange={(event) => {
+          props.onChange?.(event);
+          context.setValue(event.target.value);
+        }}
+        onKeyDown={(event) => {
+          props.onKeyDown?.(event);
+          switch (event.key) {
+            case "Enter":
+              event.preventDefault();
+              context.submit();
+              break;
+            case "Escape":
+              event.preventDefault();
+              context.cancel();
+              break;
+          }
+        }}
+        onBlur={(event) => {
+          props.onBlur?.(event);
+          if (context.submitOnBlur) {
+            context.submit();
+          }
+        }}
+        onFocus={(event) => {
+          props.onFocus?.(event);
+          if (context.selectAllOnFocus) {
+            event.target.select();
+          }
+        }}
+        {...props}
+      />
+    );
+  }
+);
+
+EditableInput.displayName = "EditableInput";
+
+// =============================================================================
+// Textarea
+// =============================================================================
+
+const EditableTextarea = React.forwardRef<HTMLTextAreaElement, EditableTextareaProps>(
+  (props, ref) => {
+    const context = useEditable("EditableTextarea");
+
+    const composedRef = React.useCallback(
+      (node: HTMLTextAreaElement | null) => {
+        context.textareaRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = node;
+        }
+      },
+      [ref, context.textareaRef]
+    );
+
+    if (!context.isEditing) return null;
+
+    return (
+      <textarea
+        ref={composedRef}
+        value={context.value}
+        disabled={context.disabled}
+        aria-label="Edit value"
+        className={cn(
+          "flex min-h-[80px] w-full rounded-[var(--radius)] border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50 resize-none",
+          props.className
+        )}
+        onChange={(event) => {
+          props.onChange?.(event);
+          context.setValue(event.target.value);
+        }}
+        onKeyDown={(event) => {
+          props.onKeyDown?.(event);
+          if (event.key === "Escape") {
+            event.preventDefault();
+            context.cancel();
+          }
+          // Submit on Ctrl+Enter or Meta+Enter
+          if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
+            context.submit();
+          }
+        }}
+        onBlur={(event) => {
+          props.onBlur?.(event);
+          if (context.submitOnBlur) {
+            context.submit();
+          }
+        }}
+        onFocus={(event) => {
+          props.onFocus?.(event);
+          if (context.selectAllOnFocus) {
+            event.target.select();
+          }
+        }}
+        {...props}
+      />
+    );
+  }
+);
+
+EditableTextarea.displayName = "EditableTextarea";
+
+// =============================================================================
+// Exports
+// =============================================================================
+
+export {
+  Editable,
+  EditablePreview,
+  EditableInput,
+  EditableTextarea,
+};
+

package/src/components/forms/input-otp/index.tsx

@@ -53,8 +53,17 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-1 ring-ring",
+        // Vercel-style slot: subtle near-black card, soft border, muted
+        // digit colour, sharp focus ring. h/w come from `className`
+        // (OTPInput sets either a fixed size or `flex-1 aspect-square`
+        // for fluid layouts).
+        "relative flex items-center justify-center rounded-md border border-border bg-card tabular-nums text-muted-foreground transition-colors",
+        "hover:!border-foreground/40",
+        // The library renders a single hidden <input> for the whole OTP, so
+        // :focus-within fires on every slot at once. Visual focus must come
+        // from the per-slot isActive flag instead. Use ! to win specificity
+        // against the base `border-border`.
+        isActive && "z-10 !border-foreground !text-foreground",
         className
       )}
       {...props}
@@ -62,7 +71,7 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+          <div className="h-5 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>