@codefast/ui 0.3.16-canary.1 → 0.3.16-canary.3

package/src/components/input-password.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { cn } from "#/lib/utils";
+import type { ComponentProps, JSX, MouseEventHandler } from "react";
+
+import { EyeIcon, EyeOffIcon } from "lucide-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"
+        data-slot="input-password-item"
+        disabled={disabled}
+        readOnly={readOnly}
+        type={type}
+        {...props}
+      />
+      <InputGroupButton
+        aria-label={type === "password" ? "Show password" : "Hide password"}
+        className={cn(
+          "rounded-full",
+          "focus-visible:ring-0",
+          "focus-visible:not-disabled:bg-input",
+        )}
+        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,98 @@
+"use client";
+
+import { cn } from "#/lib/utils";
+import type { ComponentProps, JSX } from "react";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { SearchIcon, XIcon } from "lucide-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
+        data-slot="input-search-item"
+        disabled={disabled}
+        readOnly={readOnly}
+        type="search"
+        value={value ?? ""}
+        onChange={(event) => {
+          setValue(event.target.value);
+        }}
+        {...props}
+      />
+      {value ? (
+        <InputGroupButton
+          aria-label="Clear search"
+          className={cn(
+            "rounded-full",
+            "focus-visible:ring-0",
+            "focus-visible:not-disabled:bg-input",
+          )}
+          data-slot="input-search-clear"
+          disabled={disabled ?? readOnly}
+          size="icon-sm"
+          variant="ghost"
+          onClick={() => {
+            setValue("");
+          }}
+        >
+          <XIcon />
+        </InputGroupButton>
+      ) : null}
+    </InputGroup>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { InputSearch };
+export type { InputSearchProps };

package/src/components/input.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+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 px-3 py-1",
+        "rounded-lg border border-input",
+        "bg-transparent shadow-xs outline-none",
+        "text-base",
+        "transition-[color,box-shadow] duration-150 ease-snappy",
+        "motion-reduce:transition-none motion-reduce:duration-0",
+        "selection:bg-primary selection:text-primary-foreground",
+        "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",
+        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "md:text-sm",
+        "dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+        "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,280 @@
+import type { ItemMediaVariants, ItemVariants } from "#/variants/item";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+import { itemMediaVariants, itemVariants } from "#/variants/item";
+import { Slot } from "@radix-ui/react-slot";
+
+import { Separator } from "#/components/separator";
+
+/* -----------------------------------------------------------------------------
+ * 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 flex-col", 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-0", 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 : "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",
+        "[&+[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("flex w-fit items-center gap-2", "text-sm leading-snug font-medium", 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-sm leading-normal font-normal text-balance text-muted-foreground",
+        "[&>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,59 @@
+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(
+        "inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 px-1",
+        "rounded-md",
+        "bg-muted font-sans text-xs font-medium text-muted-foreground",
+        "pointer-events-none 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,44 @@
+"use client";
+
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+/* -----------------------------------------------------------------------------
+ * 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(
+        "inline-block",
+        "text-sm leading-none font-medium",
+        "group-data-disabled:opacity-50",
+        "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 };