@arolariu/components 0.5.0 → 1.0.0

package/src/components/ui/input-otp.module.css

@@ -0,0 +1,92 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-2);
+}
+
+.container:has(:disabled) {
+  opacity: 0.5;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.group {
+  display: flex;
+  align-items: center;
+}
+
+.slot {
+  position: relative;
+  display: flex;
+  width: 2.25rem;
+  height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  border-block: 1px solid var(--ac-border);
+  border-right: 1px solid var(--ac-border);
+  background-color: var(--ac-background);
+  color: var(--ac-foreground);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+  font-size: var(--ac-text-sm);
+  transition: box-shadow var(--ac-transition-fast), border-color var(--ac-transition-fast);
+}
+
+.slot:first-child {
+  border-left: 1px solid var(--ac-border);
+  border-top-left-radius: var(--ac-radius-md);
+  border-bottom-left-radius: var(--ac-radius-md);
+}
+
+.slot:last-child {
+  border-top-right-radius: var(--ac-radius-md);
+  border-bottom-right-radius: var(--ac-radius-md);
+}
+
+.slotActive {
+  z-index: 1;
+  box-shadow: 0 0 0 1px var(--ac-ring);
+}
+
+.fakeCaretContainer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.fakeCaret {
+  width: 1px;
+  height: 1rem;
+  background-color: var(--ac-foreground);
+  animation: input-otp-caret-blink 1s ease-out infinite;
+}
+
+.separator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ac-muted-foreground);
+}
+
+.separatorIcon {
+  width: 1rem;
+  height: 1rem;
+}
+
+@keyframes input-otp-caret-blink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+
+  20%,
+  50% {
+    opacity: 0;
+  }
+}
+

package/src/components/ui/input-otp.tsx

@@ -6,61 +6,187 @@ import * as React from "react";
 
 import {cn} from "@/lib/utilities";
 
-const InputOTP = React.forwardRef<React.ComponentRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
-  ({className, containerClassName, ...props}, ref) => (
+import styles from "./input-otp.module.css";
+
+const DEFAULT_SLOT_PLACEHOLDER_CHARACTER = "·";
+
+export {REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS} from "input-otp";
+export type {OTPInputProps, SlotProps} from "input-otp";
+
+/**
+ * Props for the {@link InputOTP} component.
+ */
+export type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
+
+/**
+ * Props for the {@link InputOTPGroup} component.
+ */
+export type InputOTPGroupProps = React.ComponentPropsWithoutRef<"div">;
+
+/**
+ * Props for the {@link InputOTPSlot} component.
+ */
+export interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<"div"> {
+  /** Zero-based slot index resolved from the shared OTP input context. */
+  index: number;
+}
+
+/**
+ * Props for the {@link InputOTPSeparator} component.
+ */
+export type InputOTPSeparatorProps = React.ComponentPropsWithoutRef<"div">;
+
+/**
+ * Wraps the `input-otp` root component with shared library styling.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ * - Forwards all supported `input-otp` root props to the underlying primitive
+ *
+ * @example
+ * ```tsx
+ * <InputOTP maxLength={6} />
+ * ```
+ *
+ * @param props.maxLength - Required OTP length used to generate the expected number of slots.
+ * @param props.pattern - Optional validation pattern forwarded to the underlying input, often paired with
+ * `REGEXP_ONLY_DIGITS`, `REGEXP_ONLY_CHARS`, or `REGEXP_ONLY_DIGITS_AND_CHARS`.
+ * @param props.onComplete - Callback invoked after the user fills all slots with a complete value.
+ * @param props.pushPasswordManagerStrategy - Controls how password manager UI is handled inside the input
+ * container.
+ * @param props.render - Custom render function for complete control over OTP input rendering. Receives
+ * slot data array and allows fully custom layouts.
+ * @param props.pasteTransformer - Transform pasted text before it is applied. Useful for stripping
+ * spaces or dashes from pasted codes.
+ * @example
+ * ```tsx
+ * <InputOTP pasteTransformer={(text) => text.replace(/\D/g, "")} />
+ * ```
+ * @param props.value - Controlled OTP value. Use with `onChange` for controlled mode.
+ * @param props.onChange - Callback fired when the OTP value changes in controlled mode.
+ * @param props.containerClassName - Additional CSS class for the outer container element.
+ * @param props.noScriptCSSFallback - CSS string to inject for no-JavaScript fallback styling.
+ * @param props.textAlign - Sets how typed characters are aligned inside the hidden backing input.
+ * @see {@link InputOTPProps} for available props
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp API reference}
+ */
+const InputOTP = React.forwardRef<React.ComponentRef<typeof OTPInput>, InputOTPProps>(
+  ({className, containerClassName, ...props}: Readonly<InputOTPProps>, ref): React.JSX.Element => (
     <OTPInput
       ref={ref}
-      containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
-      className={cn("disabled:cursor-not-allowed", className)}
+      containerClassName={cn(styles.container, containerClassName)}
+      className={cn(styles.input, className)}
       {...props}
     />
   ),
 );
-InputOTP.displayName = "InputOTP";
 
-const InputOTPGroup = React.forwardRef<React.ComponentRef<"div">, React.ComponentPropsWithoutRef<"div">>(({className, ...props}, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center", className)}
-    {...props}
-  />
-));
-InputOTPGroup.displayName = "InputOTPGroup";
+/**
+ * Groups OTP slots into a shared layout row.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputOTPGroup>
+ *   <InputOTPSlot index={0} />
+ * </InputOTPGroup>
+ * ```
+ *
+ * @see {@link InputOTPGroupProps} for available props
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
+ */
+const InputOTPGroup = React.forwardRef<React.ComponentRef<"div">, InputOTPGroupProps>(
+  ({className, ...props}: Readonly<InputOTPGroupProps>, ref): React.JSX.Element => (
+    <div
+      ref={ref}
+      className={cn(styles.group, className)}
+      {...props}
+    />
+  ),
+);
 
-const InputOTPSlot = React.forwardRef<React.ComponentRef<"div">, React.ComponentPropsWithoutRef<"div"> & {index: number}>(
-  ({index, className, ...props}, ref) => {
+/**
+ * Renders an individual OTP slot based on shared input context state.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputOTPSlot index={0} />
+ * ```
+ *
+ * @see {@link InputOTPSlotProps} for available props
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
+ */
+const InputOTPSlot = React.forwardRef<React.ComponentRef<"div">, InputOTPSlotProps>(
+  ({index, className, ...props}: Readonly<InputOTPSlotProps>, ref): React.JSX.Element => {
     const inputOTPContext = React.useContext(OTPInputContext);
-    const {char, hasFakeCaret, isActive} = inputOTPContext.slots[index];
+    const slot = inputOTPContext.slots[index];
+
+    if (!slot) {
+      throw new Error(`InputOTPSlot could not find slot at index ${index}.`);
+    }
+
+    const {char, hasFakeCaret, isActive, placeholderChar} = slot;
+    const shouldRenderPlaceholderCharacter = char === null && hasFakeCaret === false;
+    const displayCharacter = shouldRenderPlaceholderCharacter ? (placeholderChar ?? DEFAULT_SLOT_PLACEHOLDER_CHARACTER) : char;
 
     return (
       <div
         ref={ref}
-        className={cn(
-          "relative flex h-9 w-9 items-center justify-center border-y border-r border-neutral-200 text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:border-neutral-800",
-          isActive && "z-10 ring-1 ring-neutral-950 dark:ring-neutral-300",
-          className,
-        )}
+        className={cn(styles.slot, isActive && styles.slotActive, className)}
         {...props}>
-        {char}
+        {displayCharacter}
         {Boolean(hasFakeCaret) && (
-          <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-            <div className='animate-caret-blink h-4 w-px bg-neutral-950 duration-1000 dark:bg-neutral-50' />
+          <div className={styles.fakeCaretContainer}>
+            <div className={styles.fakeCaret} />
           </div>
         )}
       </div>
     );
   },
 );
-InputOTPSlot.displayName = "InputOTPSlot";
 
-const InputOTPSeparator = React.forwardRef<React.ComponentRef<"div">, React.ComponentPropsWithoutRef<"div">>(({...props}, ref) => (
-  <div
-    ref={ref}
-    role='separator'
-    {...props}>
-    <Minus />
-  </div>
-));
+/**
+ * Displays a visual separator between OTP groups.
+ *
+ * @remarks
+ * - Third-party wrapper component
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <InputOTPSeparator />
+ * ```
+ *
+ * @see {@link InputOTPSeparatorProps} for available props
+ * @see {@link https://github.com/guilhermerodz/input-otp | input-otp library docs}
+ */
+const InputOTPSeparator = React.forwardRef<React.ComponentRef<"div">, InputOTPSeparatorProps>(
+  ({className, ...props}: Readonly<InputOTPSeparatorProps>, ref): React.JSX.Element => (
+    <div
+      ref={ref}
+      role='separator'
+      className={cn(styles.separator, className)}
+      {...props}>
+      <Minus className={styles.separatorIcon} />
+    </div>
+  ),
+);
+
+InputOTP.displayName = "InputOTP";
+InputOTPGroup.displayName = "InputOTPGroup";
+InputOTPSlot.displayName = "InputOTPSlot";
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 export {InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot};

package/src/components/ui/input.module.css

@@ -0,0 +1,37 @@
+.input {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: var(--ac-size-default);
+  padding: var(--ac-space-1) var(--ac-space-3);
+  border: 1px solid var(--ac-input);
+  border-radius: var(--ac-radius-md);
+  background-color: transparent;
+  font-size: var(--ac-text-sm);
+  line-height: 1.5;
+  color: var(--ac-foreground);
+  outline: none;
+  transition: border-color var(--ac-transition-fast), box-shadow var(--ac-transition-fast);
+
+  &::placeholder {
+    color: var(--ac-muted-foreground);
+  }
+
+  &:focus-visible {
+    border-color: var(--ac-ring);
+    box-shadow: 0 0 0 1px var(--ac-ring);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &[type="file"] {
+    border: none;
+    background-color: transparent;
+    font-size: var(--ac-text-sm);
+    font-weight: 500;
+    padding: 0;
+  }
+}

package/src/components/ui/input.tsx

@@ -1,21 +1,63 @@
 "use client";
 
-import {cn} from "@/lib/utilities";
+import {Input as BaseInput} from "@base-ui/react/input";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(({className, type, ...props}, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-9 w-full rounded-md border border-neutral-200 bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-neutral-950 placeholder:text-neutral-500 focus-visible:ring-1 focus-visible:ring-neutral-950 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:border-neutral-800 dark:file:text-neutral-50 dark:placeholder:text-neutral-400 dark:focus-visible:ring-neutral-300",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
+import {cn} from "@/lib/utilities";
+import styles from "./input.module.css";
+
+/**
+ * Props for the shared input wrapper.
+ */
+export interface InputProps extends Omit<React.ComponentPropsWithRef<typeof BaseInput>, "className"> {
+  /** Additional CSS classes merged with the input styles. @default undefined */
+  className?: string;
+  /** The HTML input type forwarded to the underlying control. @default undefined */
+  type?: React.HTMLInputTypeAttribute;
+}
+
+/**
+ * Renders a styled text input for free-form single-line entry.
+ *
+ * @remarks
+ * - Renders an `<input>` element by default
+ * - Built on {@link https://base-ui.com/react/components/input | Base UI Input}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Input type="email" placeholder="name@example.com" />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/input | Base UI Documentation}
+ */
+const Input = React.forwardRef<React.ComponentRef<typeof BaseInput>, Input.Props>(
+  (props: Readonly<Input.Props>, ref): React.ReactElement => {
+    const {className, render, type, ...otherProps} = props;
+
+    return (
+      <BaseInput
+        ref={ref}
+        type={type}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "input",
+          render: render as never,
+          props: mergeProps({className: cn(styles.input, className)}, {}),
+        })}
+      />
+    );
+  },
+);
 Input.displayName = "Input";
 
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Input {
+  export type Props = InputProps;
+  export type State = BaseInput.State;
+}
+
 export {Input};

package/src/components/ui/item.module.css

@@ -0,0 +1,143 @@
+.group {
+  display: flex;
+  flex-direction: column;
+}
+
+.separator {
+  margin: 0 !important;
+}
+
+.item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ac-space-4);
+  border: 1px solid transparent;
+  border-radius: var(--ac-radius-md);
+  background-color: transparent;
+  color: var(--ac-foreground);
+  font-size: var(--ac-text-sm);
+  outline: none;
+  transition: border-color var(--ac-transition-fast), background-color var(--ac-transition-fast), box-shadow var(--ac-transition-fast);
+}
+
+.item a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.item:focus-visible {
+  border-color: var(--ac-ring);
+  box-shadow: 0 0 0 1px var(--ac-ring);
+}
+
+.outline {
+  border-color: var(--ac-border);
+}
+
+.muted {
+  background-color: color-mix(in oklch, var(--ac-muted), transparent 25%);
+}
+
+.sizeDefault {
+  gap: var(--ac-space-4);
+  padding: var(--ac-space-4);
+}
+
+.sizeSm {
+  gap: calc(var(--ac-space-2) + 0.125rem);
+  padding: calc(var(--ac-space-2) + 0.125rem) var(--ac-space-4);
+}
+
+.media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ac-space-2);
+  flex-shrink: 0;
+}
+
+.media svg {
+  flex-shrink: 0;
+}
+
+.mediaIcon {
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-sm);
+  background-color: var(--ac-muted);
+}
+
+.mediaIcon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.mediaImage {
+  width: 2.5rem;
+  height: 2.5rem;
+  overflow: hidden;
+  border-radius: var(--ac-radius-sm);
+}
+
+.mediaImage img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.content {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 0%;
+  flex-direction: column;
+  gap: var(--ac-space-1);
+}
+
+.content + .content {
+  flex: none;
+}
+
+.title {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  gap: var(--ac-space-2);
+  font-size: var(--ac-text-sm);
+  line-height: 1.4;
+  font-weight: 500;
+}
+
+.description {
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+  line-height: 1.5;
+}
+
+.description a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+@media (hover: hover) {
+  .description a:hover {
+    color: var(--ac-foreground);
+  }
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-2);
+}
+
+.header,
+.footer {
+  display: flex;
+  flex-basis: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ac-space-2);
+}