aplance-ui 1.0.1

package/registry/components/ui/input-fields/input/input.tsx

@@ -0,0 +1,319 @@
+import {
+  type ComponentProps,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
+import clsx from "clsx";
+import {
+  IconKey,
+  IconKeyOff,
+  IconSearch,
+  IconX,
+  IconCalendar,
+  IconClock,
+} from "@tabler/icons-react";
+import sCommon from "../common/input-field-common.module.css";
+import sButton from "../../button/button.module.css";
+import s from "../common/input-field-native.module.css";
+import { FieldMessage } from "../common/field-message/field-message";
+import { Icon } from "../../../primitives/icon/icon";
+import type { BaseInputFieldProps } from "../common/types";
+
+export type InputType =
+  | "text"
+  | "password"
+  | "search"
+  | "number"
+  | "radio"
+  | "date"
+  | "month"
+  | "week"
+  | "time"
+  | "datetime-local"
+  | "checkbox"
+  | "color"
+  | "range";
+
+type BaseProps = BaseInputFieldProps & {
+  type?: InputType;
+  onClear?: () => void;
+  showClear?: boolean;
+};
+
+export type InputProps = Omit<ComponentProps<"input">, "type"> & BaseProps;
+
+export const Input = ({
+  type = "text",
+  label,
+  errors,
+  info,
+  className,
+  style,
+  value,
+  layout = "default",
+  layoutDirection = "default",
+  ref,
+  onClear,
+  showClear = false,
+  onChange,
+  buttonStyle = "none",
+  iconStart,
+  iconEnd,
+  ...props
+}: InputProps) => {
+  const [eyeVisible, setEyeVisible] = useState(false);
+
+  // Derive initial hasValue from controlled value or defaultValue.
+  // IMPORTANT: do NOT call setHasValue inside a ref callback - it triggers
+  // a re-render which creates a new ref callback, which React treats as a
+  // changed ref, repeating the cycle indefinitely (infinite loop).
+  const [hasValue, setHasValue] = useState(() => {
+    if (value !== undefined && value !== null && value !== "") return true;
+    const dv = props.defaultValue;
+    if (dv !== undefined && dv !== null && dv !== "") return true;
+    return false;
+  });
+
+  // Sync hasValue when controlled value changes externally (e.g. form reset)
+  useEffect(() => {
+    if (value !== undefined) {
+      setHasValue(String(value).length > 0);
+    }
+  }, [value]);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const isPassword = type === "password";
+  const isSearch = type === "search";
+
+  const inputType = isPassword && eyeVisible ? "text" : type;
+  // useId() guarantees a stable, unique id per Input instance. Falling back
+  // to `name` previously broke radio/checkbox siblings (they share a name,
+  // so every label's htmlFor pointed to the first input in the DOM).
+  const generatedId = useId();
+  const inputId = props.id ?? generatedId;
+
+  const showPasswordToggle = isPassword && hasValue;
+  const showClearButton =
+    showClear &&
+    hasValue &&
+    ![
+      "radio",
+      "range",
+      "color",
+      "date",
+      "month",
+      "week",
+      "time",
+      "datetime-local",
+      "checkbox",
+    ].includes(type);
+
+  const stylesToApplyFields = [
+    "text",
+    "password",
+    "search",
+    "number",
+    "date",
+    "month",
+    "week",
+    "time",
+    "datetime-local",
+    "file",
+  ].includes(type);
+  const stylesFitWidth = ["checkbox", "radio", "color"].includes(type);
+  const hasButtonStyle = buttonStyle !== "none";
+  const buttonToneClass = hasButtonStyle
+    ? sButton[`tone_${buttonStyle}`]
+    : undefined;
+
+  const isDateFamily = ["date", "month", "week", "datetime-local"].includes(
+    type,
+  );
+  const isTimeFamily = type === "time";
+
+  const showDateCalendarIcon = isDateFamily && !iconEnd;
+  const showTimeClockIcon = isTimeFamily && !iconEnd;
+
+  const startActionCount = iconStart ? 1 : isSearch ? 1 : 0;
+  const endActionCount = [
+    showClearButton,
+    showPasswordToggle,
+    showDateCalendarIcon,
+    showTimeClockIcon,
+    iconEnd,
+  ].filter(Boolean).length;
+
+  const dynamicInputStyle = {
+    ...style,
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setHasValue(e.target.value.length > 0);
+    onChange?.(e);
+  };
+
+  const handleClear = () => {
+    const element = inputRef.current;
+    if (!element) return;
+
+    if (onClear) {
+      onClear();
+      return;
+    }
+
+    if (onChange) {
+      element.value = "";
+      setHasValue(false);
+      const event = {
+        target: element,
+        currentTarget: element,
+      } as React.ChangeEvent<HTMLInputElement>;
+      onChange(event);
+      element.focus();
+      return;
+    }
+
+    element.value = "";
+    setHasValue(false);
+    element.focus();
+  };
+
+  // Stable ref callback - memoized so React doesn't treat it as a new ref
+  // on every render. Does NOT call setState (would cause infinite loop).
+  const refCallback = useCallback(
+    (element: HTMLInputElement | null) => {
+      inputRef.current = element;
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(element);
+        } else {
+          ref.current = element;
+        }
+      }
+    },
+    [ref],
+  );
+
+  return (
+    <div className={clsx(sCommon.container, className)} style={style}>
+      <div
+        className={clsx(
+          sCommon.field_container,
+          layout !== "default" && sCommon[layout],
+          layout !== "default" &&
+            layoutDirection !== "default" &&
+            sCommon[layoutDirection],
+        )}
+      >
+        {label && (
+          <label className={sCommon.label} htmlFor={inputId}>
+            {label}
+          </label>
+        )}
+        <div
+          className={clsx(
+            sCommon.field_wrapper,
+            s.native_field_wrapper,
+            hasButtonStyle && sCommon.field_wrapper_variant,
+            hasButtonStyle && buttonToneClass,
+            stylesFitWidth && sCommon.field_wrapper_fit,
+          )}
+          data-start-actions={
+            startActionCount > 0 ? startActionCount : undefined
+          }
+          data-end-actions={
+            endActionCount > 0 ? Math.min(3, endActionCount) : undefined
+          }
+        >
+          {iconStart ? (
+            <div className={clsx(sCommon.icon_start)}>{iconStart}</div>
+          ) : isSearch ? (
+            <Icon className={clsx(sCommon.icon_start)}>
+              <IconSearch />
+            </Icon>
+          ) : null}
+
+          <input
+            id={inputId}
+            name={props.name}
+            type={inputType}
+            value={value}
+            ref={refCallback}
+            className={clsx(
+              stylesToApplyFields &&
+                buttonStyle === "none" &&
+                sCommon.field_default,
+              stylesToApplyFields &&
+                hasButtonStyle && [
+                  sCommon.field_full_width,
+                  sCommon.field_cursor_text,
+                  sCommon.field_button_variant,
+                  buttonToneClass,
+                  sButton.base,
+                  sButton[buttonStyle],
+                  sButton.input_focus,
+                ],
+            )}
+            style={dynamicInputStyle}
+            {...props}
+            onChange={handleInputChange}
+          />
+
+          <div className={clsx(sCommon.action_end_wrapper)}>
+            {showClearButton && (
+              <Icon onClick={handleClear} aria-label="Clear input">
+                <IconX />
+              </Icon>
+            )}
+            {showPasswordToggle && (
+              <Icon
+                onClick={(e) => {
+                  e.preventDefault();
+                  setEyeVisible((v) => !v);
+                }}
+                aria-label={eyeVisible ? "Hide password" : "Show password"}
+              >
+                {eyeVisible ? <IconKeyOff /> : <IconKey />}
+              </Icon>
+            )}
+            {showDateCalendarIcon && (
+              <Icon
+                onClick={() => {
+                  try {
+                    inputRef.current?.showPicker();
+                  } catch {
+                    // showPicker is not supported in all browsers.
+                  }
+                }}
+                clickable
+              >
+                <IconCalendar />
+              </Icon>
+            )}
+            {showTimeClockIcon && (
+              <Icon
+                onClick={() => {
+                  try {
+                    inputRef.current?.showPicker();
+                  } catch {
+                    // showPicker is not supported in all browsers.
+                  }
+                }}
+                clickable
+              >
+                <IconClock />
+              </Icon>
+            )}
+            {iconEnd}
+          </div>
+        </div>
+      </div>
+
+      <FieldMessage errors={errors} info={info} />
+    </div>
+  );
+};

package/registry/components/ui/input-fields/media-input/kind-icons.tsx

@@ -0,0 +1,62 @@
+/* Helpers-only file (no React components) - keeps fast-refresh happy by
+   isolating JSX-returning helpers from component-bearing modules. */
+import type { ReactNode } from "react";
+import {
+  IconCode,
+  IconFile,
+  IconFileMusic,
+  IconFileText,
+  IconFileTypePdf,
+  IconFileTypePpt,
+  IconFileTypeXls,
+  IconFileTypeDoc,
+  IconFileTypography,
+  IconFileZip,
+  IconPhoto,
+  IconVideo,
+} from "@tabler/icons-react";
+import type { MediaKind } from "./types";
+
+export const KIND_LABEL: Record<MediaKind, string> = {
+  image: "Image",
+  video: "Video",
+  audio: "Audio",
+  pdf: "PDF",
+  document: "Document",
+  spreadsheet: "Spreadsheet",
+  presentation: "Presentation",
+  archive: "Archive",
+  code: "Code",
+  text: "Text",
+  font: "Font",
+  other: "File",
+};
+
+export const iconForKind = (kind: MediaKind): ReactNode => {
+  switch (kind) {
+    case "image":
+      return <IconPhoto />;
+    case "video":
+      return <IconVideo />;
+    case "audio":
+      return <IconFileMusic />;
+    case "pdf":
+      return <IconFileTypePdf />;
+    case "document":
+      return <IconFileTypeDoc />;
+    case "spreadsheet":
+      return <IconFileTypeXls />;
+    case "presentation":
+      return <IconFileTypePpt />;
+    case "archive":
+      return <IconFileZip />;
+    case "code":
+      return <IconCode />;
+    case "text":
+      return <IconFileText />;
+    case "font":
+      return <IconFileTypography />;
+    case "other":
+      return <IconFile />;
+  }
+};

package/registry/components/ui/input-fields/media-input/media-input.module.css

@@ -0,0 +1,294 @@
+/* Media Input - composes the shared input-field shell.
+   Outer container, label row, and field-message slot are reused from
+   `input-field-common.module.css` so the family layout stays identical.
+   This module owns the dropzone target, clear-all action styling, and the
+   preview list/tiles. */
+
+.clear_all {
+  --button-fg: var(--color-muted-foreground);
+  gap: var(--spacing-1);
+}
+
+/* ── Dropzone ─────────────────────────────────────────────────────────
+   Mirrors the SelectButton split from common/select-button:
+   - Outer `.dropzone_wrapper` carries the variant CSS-variable contracts
+     (paired with `field_wrapper_variant` + `tone_<variant>` from common +
+     button modules).
+   - Inner element is one of:
+       - `.dropzone .dropzone_default` (when buttonStyle === "none"):
+         dashed muted drop target, fully painted by this module.
+       - `.dropzone .dropzone_button_shell` rendered as
+         `<Button as="div" variant=X>`: paint comes from Button (.base + .X
+         + tone), this module only enforces dropzone sizing and the drag
+         focus-ring on top of that paint.
+*/
+
+.dropzone_wrapper {
+  width: 100%;
+}
+
+/* Base shape - no paint. Both "none" and buttonStyle modes share these. */
+.dropzone {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color var(--transition-base),
+    background-color var(--transition-base),
+    box-shadow var(--transition-base);
+
+  &.dropzone_disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+/* Default look - applied when buttonStyle === "none". Owns padding,
+   min-height, border-radius and the dashed muted paint. */
+.dropzone_default {
+  min-height: var(--spacing-13);
+  padding: var(--spacing-7) var(--spacing-6);
+  border: var(--border-1) dashed var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-muted);
+
+  &:hover:not(.dropzone_disabled) {
+    border-color: var(--color-ring);
+  }
+
+  &:focus-visible {
+    border-color: var(--color-ring);
+    box-shadow: var(--shadow-ring);
+  }
+
+  &.dropzone_active {
+    border-color: var(--color-ring);
+    background-color: var(--color-background);
+    box-shadow: var(--shadow-ring);
+  }
+}
+
+/* Override Button's compact width / min-height / padding / border-radius
+   when the dropzone is rendered as `<Button as="div" variant=X>`. Same
+   approach as `field_full_width` in input-field-common - targeted micro-
+   class with `!important` to defeat Button's `.base` defaults regardless
+   of stylesheet load order. */
+.dropzone_button_shell {
+  min-height: var(--spacing-13) !important;
+  padding: var(--spacing-7) var(--spacing-6) !important;
+  border-radius: var(--radius-md) !important;
+  justify-content: center !important;
+}
+
+/* Drag-active feedback for the buttonStyle branch - focus ring layered
+   on top of the variant's own paint. */
+.dropzone_button_shell.dropzone_active {
+  box-shadow: var(--shadow-ring) !important;
+}
+
+.dropzone_inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: var(--spacing-5);
+  width: 100%;
+}
+
+.dropzone_icon {
+  --icon-color: var(--field-icon-color, var(--color-muted-foreground));
+  color: var(--field-icon-color, var(--color-muted-foreground));
+}
+
+.dropzone_copy {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  align-items: center;
+}
+
+.dropzone_title {
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-sm);
+  color: var(--field-content-color, var(--color-foreground));
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.dropzone_hint {
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-xs);
+  color: var(--field-placeholder-color, var(--color-muted-foreground));
+  line-height: 1.4;
+}
+
+/* ── Preview list ─────────────────────────────────────────────────────── */
+
+/* Track width and gap are owned by the list (they're layout concerns).
+   Thumb height is owned by the tile via `.preview_size_*` so a standalone
+   `<MediaPreview size="sm">` works without needing a parent list to scope
+   the CSS variable. Track is fixed (not 1fr) so size differences are
+   visible - `min(track, 100%)` keeps it responsive on narrow containers. */
+.preview_list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--spacing-4);
+}
+
+.preview_list_sm {
+  grid-template-columns: repeat(auto-fill, min(7rem, 100%));
+  gap: var(--spacing-3);
+}
+
+.preview_list_md {
+  grid-template-columns: repeat(auto-fill, min(10rem, 100%));
+}
+
+.preview_list_lg {
+  grid-template-columns: repeat(auto-fill, min(14rem, 100%));
+  gap: var(--spacing-5);
+}
+
+.preview_list_layout_list {
+  grid-template-columns: 1fr;
+  gap: var(--spacing-3);
+}
+
+.preview_size_sm {
+  --preview-thumb-h: 4.5rem;
+}
+
+.preview_size_md {
+  --preview-thumb-h: 6.5rem;
+}
+
+.preview_size_lg {
+  --preview-thumb-h: 9.5rem;
+}
+
+.preview_item_wrap {
+  display: flex;
+  min-width: 0;
+}
+
+.preview_item {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3);
+  border: var(--border-1) solid var(--color-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-background);
+  transition: border-color var(--transition-fast);
+
+  &:hover {
+    border-color: var(--color-ring);
+  }
+
+  &[data-status="error"] {
+    border-color: var(--color-error-foreground);
+  }
+}
+
+/* List layout - single row with thumb on the left and metadata fills the rest.
+   `flex: 1` on .preview_meta naturally pushes the remove button to the end -
+   no margin tricks needed. */
+.preview_item_list {
+  flex-direction: row;
+  align-items: center;
+  padding: var(--spacing-3) var(--spacing-4);
+  gap: var(--spacing-4);
+
+  .preview_thumb {
+    width: var(--spacing-12);
+    height: var(--spacing-12);
+    flex-shrink: 0;
+    aspect-ratio: 1 / 1;
+  }
+
+  .preview_meta {
+    flex: 1;
+  }
+
+  .preview_remove {
+    position: static;
+  }
+}
+
+.preview_thumb {
+  width: 100%;
+  height: var(--preview-thumb-h, 6.5rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  background-color: var(--color-muted);
+}
+
+.preview_image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.preview_thumb_fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  --icon-color: var(--color-muted-foreground);
+  color: var(--color-muted-foreground);
+}
+
+.preview_meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.preview_name {
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-foreground);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.3;
+}
+
+.preview_sub {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-muted-foreground);
+  line-height: 1.3;
+}
+
+.preview_error {
+  font-family: var(--font-family-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-error-foreground);
+}
+
+/* Position only - visuals come from the Button component (variant + size + box layout). */
+.preview_remove {
+  position: absolute;
+  top: var(--spacing-2);
+  right: var(--spacing-2);
+}