@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/src/components/input-otp.tsx

@@ -0,0 +1,132 @@
+import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";
+import type { ComponentProps, JSX } from "react";
+import { use } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: InputOtp
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputOTPProps = ComponentProps<typeof OTPInput>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputOTP({ className, containerClassName, ...props }: InputOTPProps): JSX.Element {
+  return (
+    <OTPInput
+      aria-label="One-time password"
+      className={cn("disabled:cursor-not-allowed", className)}
+      containerClassName={cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName)}
+      data-slot="input-otp"
+      spellCheck={false}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: InputOTPGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputOTPGroupProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputOTPGroup({ className, ...props }: InputOTPGroupProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
+        className,
+      )}
+      data-slot="input-otp-group"
+      role="group"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: InputOTPSlot
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface InputOTPSlotProps extends ComponentProps<"div"> {
+  index: number;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputOTPSlot({ className, index, ...props }: InputOTPSlotProps): JSX.Element {
+  const inputOTPContext = use(OTPInputContext);
+  const slot = inputOTPContext.slots[index];
+  if (slot === undefined) {
+    throw new Error(`InputOTPSlot: no slot at index ${index}`);
+  }
+  const { char, hasFakeCaret, isActive } = slot;
+
+  return (
+    <div
+      className={cn(
+        "relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      data-active={isActive}
+      data-slot="input-otp-slot"
+      {...props}
+    >
+      {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 animation-duration-1000" />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: InputOTPSeparator
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputOTPSeparatorProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputOTPSeparator({ ...props }: InputOTPSeparatorProps): JSX.Element {
+  return (
+    <div
+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      data-slot="input-otp-separator"
+      role="separator"
+      {...props}
+    >
+      <MinusIcon />
+    </div>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };
+export type { InputOTPGroupProps, InputOTPProps, InputOTPSeparatorProps, InputOTPSlotProps };

package/src/components/input-password.tsx

@@ -0,0 +1,50 @@
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import type { ComponentProps, JSX, MouseEventHandler } from "react";
+import { useCallback, useState } from "react";
+
+import { InputGroup, InputGroupButton, InputGroupInput } from "#/components/input-group";
+
+/* -----------------------------------------------------------------------------
+ * Component: InputPassword
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputPasswordProps = Omit<ComponentProps<typeof InputGroupInput>, "type">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputPassword({ className, disabled, readOnly, ...props }: InputPasswordProps): JSX.Element {
+  const [type, setType] = useState<"password" | "text">("password");
+
+  const togglePasswordVisibility = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {
+    setType((previous) => (previous === "password" ? "text" : "password"));
+  }, []);
+
+  return (
+    <InputGroup className={className} data-disabled={disabled ? "true" : undefined} data-slot="input-password">
+      <InputGroupInput autoCapitalize="none" disabled={disabled} readOnly={readOnly} type={type} {...props} />
+      <InputGroupButton
+        aria-label={type === "password" ? "Show password" : "Hide password"}
+        className="rounded-full"
+        data-slot="input-password-toggle"
+        disabled={disabled}
+        size="icon-sm"
+        type="button"
+        variant="ghost"
+        onClick={togglePasswordVisibility}
+      >
+        {type === "password" ? <EyeOffIcon /> : <EyeIcon />}
+      </InputGroupButton>
+    </InputGroup>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { InputPassword };
+export type { InputPasswordProps };

package/src/components/input-search.tsx

@@ -0,0 +1,81 @@
+import { SearchIcon, XIcon } from "lucide-react";
+import { useControllableState } from "radix-ui/internal";
+import type { ComponentProps, JSX } from "react";
+
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "#/components/input-group";
+
+/* -----------------------------------------------------------------------------
+ * Component: InputSearch
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface InputSearchProps extends Omit<
+  ComponentProps<typeof InputGroupInput>,
+  "defaultValue" | "onChange" | "type" | "value"
+> {
+  defaultValue?: string;
+  onChange?: (value?: string) => void;
+  value?: string;
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputSearch({
+  className,
+  defaultValue,
+  disabled,
+  onChange,
+  readOnly,
+  value: valueProperty,
+  ...props
+}: InputSearchProps): JSX.Element {
+  const [value, setValue] = useControllableState<string | undefined>({
+    defaultProp: defaultValue,
+    onChange,
+    prop: valueProperty,
+  });
+
+  return (
+    <InputGroup className={className} data-disabled={disabled ? "true" : undefined} data-slot="input-search">
+      <InputGroupAddon align="inline-start">
+        <SearchIcon />
+      </InputGroupAddon>
+      <InputGroupInput
+        disabled={disabled}
+        readOnly={readOnly}
+        type="search"
+        value={value ?? ""}
+        onChange={(event) => {
+          setValue(event.target.value);
+        }}
+        {...props}
+      />
+      {value ? (
+        <InputGroupButton
+          aria-label="Clear search"
+          className="rounded-full"
+          data-slot="input-search-clear"
+          disabled={disabled ?? readOnly}
+          size="icon-sm"
+          type="button"
+          variant="ghost"
+          onClick={() => {
+            setValue("");
+          }}
+        >
+          <XIcon />
+        </InputGroupButton>
+      ) : null}
+    </InputGroup>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { InputSearch };
+export type { InputSearchProps };

package/src/components/input.tsx

@@ -0,0 +1,36 @@
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Input
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputProps = ComponentProps<"input">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Input({ className, type, ...props }: InputProps): JSX.Element {
+  return (
+    <input
+      className={cn(
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      data-slot="input"
+      type={type}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Input };
+export type { InputProps };

package/src/components/item.tsx

@@ -0,0 +1,266 @@
+import { Slot } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { Separator } from "#/components/separator";
+import { cn } from "#/lib/utils";
+import type { ItemMediaVariants, ItemVariants } from "#/variants/item";
+import { itemMediaVariants, itemVariants } from "#/variants/item";
+
+/* -----------------------------------------------------------------------------
+ * Component: ItemGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemGroupProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ItemGroup({ className, ...props }: ItemGroupProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className,
+      )}
+      data-slot="item-group"
+      role="list"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ItemSeparator
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemSeparatorProps = ComponentProps<typeof Separator>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ItemSeparator({ className, ...props }: ItemSeparatorProps): JSX.Element {
+  return <Separator className={cn("my-2", className)} data-slot="item-separator" orientation="horizontal" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: Item
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemProps = ComponentProps<"div"> &
+  ItemVariants & {
+    asChild?: boolean;
+  };
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Item({ asChild = false, className, size = "default", variant = "default", ...props }: ItemProps): JSX.Element {
+  const Component = asChild ? Slot.Root : "div";
+
+  return (
+    <Component
+      className={itemVariants({ className, size, variant })}
+      data-size={size}
+      data-slot="item"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ItemMedia
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemMediaProps = ComponentProps<"div"> & ItemMediaVariants;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ItemMedia({ className, variant = "default", ...props }: ItemMediaProps): JSX.Element {
+  return (
+    <div
+      className={itemMediaVariants({ className, variant })}
+      data-slot="item-media"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ItemContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemContentProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ItemContent({ className, ...props }: ItemContentProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className,
+      )}
+      data-slot="item-content"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ItemTitle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemTitleProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ItemTitle({ className, ...props }: ItemTitleProps): JSX.Element {
+  return (
+    <div
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className,
+      )}
+      data-slot="item-title"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ItemDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemDescriptionProps = ComponentProps<"p">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ItemDescription({ className, ...props }: ItemDescriptionProps): JSX.Element {
+  return (
+    <p
+      className={cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      data-slot="item-description"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ItemActions
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemActionsProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ItemActions({ className, ...props }: ItemActionsProps): JSX.Element {
+  return <div className={cn("flex items-center gap-2", className)} data-slot="item-actions" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ItemHeader
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemHeaderProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ItemHeader({ className, ...props }: ItemHeaderProps): JSX.Element {
+  return (
+    <div
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      data-slot="item-header"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: ItemFooter
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemFooterProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function ItemFooter({ className, ...props }: ItemFooterProps): JSX.Element {
+  return (
+    <div
+      className={cn("flex basis-full items-center justify-between gap-2", className)}
+      data-slot="item-footer"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};
+
+export type {
+  ItemActionsProps,
+  ItemContentProps,
+  ItemDescriptionProps,
+  ItemFooterProps,
+  ItemGroupProps,
+  ItemHeaderProps,
+  ItemMediaProps,
+  ItemProps,
+  ItemSeparatorProps,
+  ItemTitleProps,
+};

package/src/components/kbd.tsx

@@ -0,0 +1,47 @@
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Kbd
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type KbdProps = ComponentProps<"kbd">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Kbd({ className, ...props }: KbdProps): JSX.Element {
+  return (
+    <kbd
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className,
+      )}
+      data-slot="kbd"
+      {...props}
+    />
+  );
+}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type KbdGroupProps = ComponentProps<"kbd">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function KbdGroup({ className, ...props }: KbdGroupProps): JSX.Element {
+  return <kbd className={cn("inline-flex items-center gap-1", className)} data-slot="kbd-group" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Kbd, KbdGroup };
+export type { KbdGroupProps, KbdProps };

package/src/components/label.tsx

@@ -0,0 +1,36 @@
+import { Label as LabelPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Label
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type LabelProps = ComponentProps<typeof LabelPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function Label({ className, ...props }: LabelProps): JSX.Element {
+  return (
+    <LabelPrimitive.Root
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-disabled:pointer-events-none group-data-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-aria-invalid:text-destructive peer-data-disabled:opacity-50 data-invalid:text-destructive",
+        className,
+      )}
+      data-slot="label"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Label };
+export type { LabelProps };