@digithings-ai/ui 0.0.0-stage → 0.1.0

package/src/ui/dropdown-menu.tsx

@@ -0,0 +1,267 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+import { cn } from "../lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-2 text-xs text-muted-foreground data-inset:ps-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-pointer items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-secondary focus:text-secondary-foreground not-data-[variant=destructive]:focus:**:text-secondary-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-pointer items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-secondary focus:text-secondary-foreground not-data-[variant=destructive]:focus:**:text-secondary-foreground data-inset:ps-7 data-popup-open:bg-secondary data-popup-open:text-secondary-foreground data-open:bg-secondary data-open:text-secondary-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ms-auto rtl:-scale-x-100" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-none bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-pointer items-center gap-2 rounded-none py-2 pe-8 ps-2 text-xs outline-hidden select-none focus:bg-secondary focus:text-secondary-foreground focus:**:text-secondary-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute end-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-pointer items-center gap-2 rounded-none py-2 pe-8 ps-2 text-xs outline-hidden select-none focus:bg-secondary focus:text-secondary-foreground focus:**:text-secondary-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute end-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-secondary-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

package/src/ui/empty-state.tsx

@@ -0,0 +1,165 @@
+"use client"
+
+/**
+ * EmptyState — the no-results / first-run / load-error triple (#1548),
+ * promoted from the controls layer into the kit (#4306, batch K1). A centered
+ * hairline card: glyph disc, mono title, one line of guidance, and the single
+ * action that moves the user forward. Monochrome by default; `variant="error"`
+ * is the only one that spends the down/danger color (on the glyph disc).
+ *
+ * The old `.ctl-empty*` dress (styles/controls-core.css) is translated
+ * value-for-value into token utilities here, so the controls CSS can retire.
+ * The `glass` / `glass-display` dresses restyle type/spacing/slots ONLY — the
+ * surface class stays call-site (dashboard's `.glass-card`) so the app's
+ * motion-reveal hook keeps firing.
+ *
+ * #4452: `glass-display` is the full-page gate card (dashboard's DB gate) and
+ * must survive phone widths. It is declared `w-full` (fluid: fills its
+ * container up to a consumer cap, never content-sized) and its title/body
+ * `break-words` (a long unbreakable token breaks rather than overflowing).
+ * The dress is text-first, so it may never ellipsise its own message:
+ * `truncate` / `whitespace-nowrap` / `line-clamp` are banned here.
+ */
+
+import type { HTMLAttributes, ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+
+export type EmptyStateVariant = "no-results" | "first-run" | "error"
+
+export type EmptyStateDress = "reference" | "glass" | "glass-display"
+
+export type EmptyStateProps = Omit<HTMLAttributes<HTMLElement>, "title"> & {
+  variant?: EmptyStateVariant
+  /** Look cut — "reference" (default) or the dashboard glass cuts (see docblock). */
+  dress?: EmptyStateDress
+  /** Replaces the variant's default glyph inside the disc. */
+  icon?: ReactNode
+  title: ReactNode
+  /** One line of guidance under the title. */
+  body?: ReactNode
+  /** Short italic secondary line — explains *why* it's empty without reading as broken. */
+  note?: ReactNode
+  /** The single action that moves forward — pass a `<Button/>`. */
+  action?: ReactNode
+}
+
+const DEFAULT_GLYPHS: Record<EmptyStateVariant, ReactNode> = {
+  "no-results": (
+    <>
+      <circle cx="11" cy="11" r="7" />
+      <path d="M20 20l-3.5-3.5M8 11h6" strokeLinecap="round" />
+    </>
+  ),
+  "first-run": (
+    <>
+      <path d="M12 3v18M3 12h18" strokeLinecap="round" />
+      <circle cx="12" cy="12" r="9" opacity="0.35" />
+    </>
+  ),
+  error: (
+    <>
+      <path d="M12 3l9 16H3z" />
+      <path d="M12 10v4M12 17v.5" strokeLinecap="round" />
+    </>
+  ),
+}
+
+export function EmptyState({
+  variant = "no-results",
+  dress = "reference",
+  icon,
+  title,
+  body,
+  note,
+  action,
+  className,
+  children,
+  ...props
+}: EmptyStateProps) {
+  // The dashboard glass dresses ship without a glyph disc; an explicit `icon`
+  // still renders one. The reference dress always wears its variant glyph.
+  const glyphless = dress !== "reference" && icon == null
+  // WCAG 4.1.3 (#2287): "error" is the one variant that can appear or replace
+  // prior content asynchronously — give it an assertive live role. Spread
+  // AFTER ...props so the derived role stays authoritative.
+  const live = variant === "error" ? ({ role: "alert" as const }) : {}
+  const glass = dress === "glass"
+  const glassDisplay = dress === "glass-display"
+  return (
+    <article
+      data-slot="empty-state"
+      className={cn(
+        "flex flex-col items-center border border-hair bg-surface/55 p-[1.8rem_1.3rem] text-center",
+        // glass: justify-center gap-2 p-8 (observability quiet card)
+        glass && "justify-center gap-2 p-8",
+        // glass-display: w-full justify-center gap-0 px-6 py-8 (full-page gate
+        // card). #4452: `w-full` states the fluid contract explicitly — the card
+        // fills its container up to any consumer `max-w-*`, so it can never be
+        // content-sized past the viewport.
+        glassDisplay && "w-full justify-center gap-0 px-6 py-8",
+        !glass && !glassDisplay && "gap-[0.55rem]",
+        className,
+      )}
+      {...props}
+      {...live}
+    >
+      {glyphless ? null : (
+        <span
+          className={cn(
+            "mb-[0.15rem] grid size-11 place-items-center rounded-none bg-ink/8 text-ink-mute",
+            variant === "error" && "bg-danger/12 text-danger",
+          )}
+          aria-hidden="true"
+        >
+          {icon ?? (
+            <svg
+              viewBox="0 0 24 24"
+              width="22"
+              height="22"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.6"
+              strokeLinejoin="round"
+            >
+              {DEFAULT_GLYPHS[variant]}
+            </svg>
+          )}
+        </span>
+      )}
+      <h3
+        className={cn(
+          "m-0 font-mono text-[0.86rem] font-normal text-ink",
+          glass && "font-sans text-sm leading-[1.4286] font-medium text-ink-soft",
+          glassDisplay && "font-display break-words text-2xl leading-[1.3333] tracking-tight font-normal text-ink",
+        )}
+      >
+        {title}
+      </h3>
+      {body != null ? (
+        <p
+          className={cn(
+            "max-w-[24ch] text-[0.8rem] leading-[1.5] text-ink-mute",
+            !glass && !glassDisplay && "mt-0 mb-[0.4rem]",
+            glass && "m-0 max-w-md text-xs leading-[1.3333]",
+            glassDisplay && "mt-2 mb-0 max-w-none break-words text-sm leading-[1.625]",
+          )}
+        >
+          {body}
+        </p>
+      ) : null}
+      {note != null ? (
+        <p
+          className={cn(
+            "m-0 max-w-[24ch] text-[0.75rem] leading-[1.3333] text-ink-mute",
+            glass && "mt-1 max-w-md",
+          )}
+        >
+          {note}
+        </p>
+      ) : null}
+      {action}
+      {children}
+    </article>
+  )
+}

package/src/ui/field.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+/**
+ * Field — the label + control + hint/error wrapper (#1548), promoted from the
+ * controls layer into the kit (#4306, batch K1). One component meshes the
+ * accessible wiring callers otherwise hand-roll: a mono micro-cap label, an
+ * optional hint, an optional error (which replaces the hint), and
+ * `aria-describedby` / `aria-invalid` injected into the child control via
+ * clone — so the control keeps its own props and ref. The child must accept
+ * `id`, `aria-describedby`, and `aria-invalid` (native inputs and every shared
+ * input do).
+ *
+ * Error is `--danger`, never `--down` (tokens.css house rule: money colors are
+ * P&L-only). The `.ctl-field*` dress is translated into token utilities here,
+ * so the controls CSS can retire.
+ */
+
+import { cloneElement, isValidElement, useId } from "react"
+import type { ReactElement, ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+
+type ControlProps = {
+  id?: string
+  "aria-describedby"?: string
+  "aria-invalid"?: boolean | string
+}
+
+export type FieldProps = {
+  label: ReactNode
+  hint?: ReactNode
+  error?: ReactNode
+  htmlFor?: string
+  required?: boolean
+  className?: string
+  children: ReactNode
+}
+
+export function Field({
+  label,
+  hint,
+  error,
+  htmlFor,
+  required = false,
+  className,
+  children,
+}: FieldProps) {
+  const autoId = useId()
+  // Resolve the control id FIRST: a child with its own id wins, and the
+  // label follows it — never the synthetic id.
+  const childId = isValidElement<ControlProps>(children) ? children.props.id : undefined
+  const controlId = htmlFor ?? childId ?? `${autoId}-control`
+  const hintId = `${autoId}-hint`
+  const errorId = `${autoId}-error`
+  const describedBy = [
+    isValidElement<ControlProps>(children) ? children.props["aria-describedby"] : null,
+    error ? errorId : null,
+    hint && !error ? hintId : null,
+  ]
+    .filter(Boolean)
+    .join(" ")
+
+  const control = isValidElement<ControlProps>(children)
+    ? cloneElement(children as ReactElement<ControlProps>, {
+        id: childId ?? controlId,
+        ...(describedBy ? { "aria-describedby": describedBy } : null),
+        ...(error ? { "aria-invalid": true } : null),
+        ...(required ? { "aria-required": true } : null),
+      })
+    : children
+
+  return (
+    <div
+      data-slot="field"
+      data-invalid={error ? true : undefined}
+      className={cn("grid min-w-0 gap-[0.35rem]", className)}
+    >
+      <label
+        htmlFor={controlId}
+        className="cursor-pointer font-mono text-[0.6rem] uppercase tracking-[0.1em] text-ink-mute"
+      >
+        {label}
+        {required ? (
+          <>
+            <span aria-hidden="true" className="text-ink-soft">
+              {" *"}
+            </span>
+            <span className="sr-only"> (required)</span>
+          </>
+        ) : null}
+      </label>
+      {control}
+      {error ? (
+        <p id={errorId} className="m-0 font-mono text-[0.62rem] leading-[1.5] text-danger">
+          {error}
+        </p>
+      ) : hint ? (
+        <p id={hintId} className="m-0 font-mono text-[0.62rem] leading-[1.5] text-ink-mute">
+          {hint}
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/src/ui/form.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+/**
+ * Form — a thin presentational wrapper over the K1 `Field` and the kit inputs,
+ * added in #4306 batch K2. This is deliberately **not** shadcn's
+ * react-hook-form-bound Form: the repo carries no form-library dependency
+ * (`react-hook-form` is not installed), so this part owns no state, no
+ * validation and no submit. It supplies the `<form>` root with the canon's
+ * vertical rhythm, a `FormField` façade over `Field` (label + hint/error +
+ * accessible wiring, already meshed), and a `FormActions` footer row. Callers
+ * keep owning the values and the submit handler.
+ */
+import type { ComponentProps } from "react"
+
+import { cn } from "../lib/utils"
+import { Field, type FieldProps } from "./field"
+
+function Form({ className, ...props }: ComponentProps<"form">) {
+  return <form data-slot="form" className={cn("grid gap-[1rem]", className)} {...props} />
+}
+
+function FormField({ className, ...props }: FieldProps) {
+  return <Field className={cn("min-w-0", className)} {...props} />
+}
+
+function FormActions({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="form-actions"
+      className={cn("flex flex-wrap items-center gap-[0.6rem]", className)}
+      {...props}
+    />
+  )
+}
+
+export { Form, FormField, FormActions }

package/src/ui/icon-button.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+/**
+ * IconButton — the borderless 2rem glyph button (#1548), promoted from the
+ * controls layer into the kit (#4306, batch K1). `aria-label` is required —
+ * the child is a bare svg. Ink-mute glyph, ink + ink/6 wash on hover, the
+ * kit's not-allowed disabled convention, and a token-backed focus ring.
+ * Token utilities only, so `.nb-icon` can retire.
+ *
+ * A plain `<button>` (not the Base UI Button primitive): the controls part was
+ * plain, and Base UI re-emits `disabled`/`aria-disabled` in its own attribute
+ * order — a real dashboard specimen asserts on that order, and the plain
+ * element keeps the rendered markup byte-for-byte compatible.
+ */
+
+import type { ComponentPropsWithoutRef } from "react"
+
+import { cn } from "../lib/utils"
+
+export type IconButtonProps = ComponentPropsWithoutRef<"button"> & {
+  "aria-label": string
+}
+
+export function IconButton({ className, ...props }: IconButtonProps) {
+  return (
+    <button
+      type="button"
+      data-slot="icon-button"
+      className={cn(
+        "inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-none border-0 bg-transparent text-ink-mute transition-colors outline-none hover:bg-ink/6 hover:text-ink focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/ui/index.ts

@@ -0,0 +1,34 @@
+export * from "./alert";
+export * from "./avatar";
+export * from "./badge";
+export * from "./breadcrumb";
+export * from "./button";
+export * from "./card";
+export * from "./checkbox";
+export * from "./collapsible";
+export * from "./date-pager";
+export * from "./dialog";
+export * from "./dropdown-menu";
+export * from "./empty-state";
+export * from "./field";
+export * from "./form";
+export * from "./icon-button";
+export * from "./input";
+export * from "./kbd";
+export * from "./label";
+export * from "./pagination";
+export * from "./pager";
+export * from "./radio-group";
+export * from "./search-bar";
+export * from "./segmented-control";
+export * from "./select";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./separator";
+export * from "./sheet";
+export * from "./switch";
+export * from "./table";
+export * from "./tabs";
+export * from "./tags-input";
+export * from "./textarea";
+export * from "./tooltip";

package/src/ui/input.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+import { cn } from "../lib/utils"
+
+export type InputDress = "default" | "chat";
+
+function Input({
+  className,
+  type,
+  dress = "default",
+  ...props
+}: React.ComponentProps<"input"> & { dress?: InputDress }) {
+  // dress="chat" emits the digichat chat-dress class (styles/controls-core.css)
+  // instead of the kit utilities, keeping digichat's rendered look exact.
+  const classes =
+    dress === "chat"
+      ? cn("ctl-input-chat", className)
+      : cn(
+          "h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          className
+        );
+
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={classes}
+      {...props}
+    />
+  )
+}
+
+export { Input }