{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input",
  "type": "registry:block",
  "title": "Input",
  "description": "A polished text field for fast, accessible forms.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@base-ui/react",
    "@tabler/icons-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/input.tsx",
      "type": "registry:component",
      "target": "@components/wensity/input.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { IconX } from \"@tabler/icons-react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n  label?: React.ReactNode;\n  hint?: React.ReactNode;\n  error?: React.ReactNode;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  clearable?: boolean;\n  onClear?: () => void;\n  inputSize?: InputSize;\n  fullWidth?: boolean;\n  containerClassName?: string;\n  inputClassName?: string;\n}\n\nconst fieldSizes: Record<InputSize, string> = {\n  sm: \"h-[var(--primitive-control-height-sm)] min-h-[var(--primitive-control-height-sm)]\",\n  md: \"h-[var(--primitive-control-height-md)] min-h-[var(--primitive-control-height-md)]\",\n  lg: \"h-[var(--primitive-control-height-lg)] min-h-[var(--primitive-control-height-lg)]\",\n};\n\nconst inputSizes: Record<InputSize, string> = {\n  sm: \"h-full px-3 text-xs\",\n  md: \"h-full px-3.5 text-sm\",\n  lg: \"h-full px-4 text-[15px]\",\n};\n\nconst iconBoxSizes: Record<InputSize, string> = {\n  sm: \"w-8\",\n  md: \"w-9\",\n  lg: \"w-10\",\n};\n\nconst trailingPad: Record<InputSize, string> = {\n  sm: \"pr-2\",\n  md: \"pr-2.5\",\n  lg: \"pr-3\",\n};\n\nconst fieldBase = cn(\n  \"wensity-input-shell group/input relative isolate flex w-full items-center overflow-hidden\",\n  \"border border-[var(--border)] bg-[var(--background)]\",\n  \"rounded-[var(--primitive-radius-control)]\",\n  \"transition-[border-color,background-color,box-shadow] duration-150 ease-[var(--primitive-ease)]\",\n  \"motion-reduce:transition-none\",\n);\n\nconst fieldInteractive = cn(\n  \"hover:border-[color-mix(in_srgb,var(--foreground)_14%,transparent)]\",\n  \"focus-within:border-[color-mix(in_srgb,var(--foreground)_24%,transparent)]\",\n  \"focus-within:ring-2 focus-within:ring-[var(--primitive-ring)] focus-within:ring-offset-2 focus-within:ring-offset-[var(--background)]\",\n);\n\nconst fieldError = cn(\n  \"border-[var(--primitive-destructive-border)]\",\n  \"hover:border-[color-mix(in_srgb,var(--primitive-destructive)_65%,transparent)]\",\n  \"focus-within:border-[var(--primitive-destructive)]\",\n  \"focus-within:ring-2 focus-within:ring-[color-mix(in_srgb,var(--primitive-destructive)_45%,transparent)] focus-within:ring-offset-2 focus-within:ring-offset-[var(--background)]\",\n);\n\nconst fieldDisabled = cn(\n  \"cursor-not-allowed opacity-45\",\n  \"hover:border-[var(--border)]\",\n);\n\nconst fieldReadOnly = cn(\n  \"border-[var(--border)] bg-[var(--muted)]\",\n  \"hover:border-[var(--border)]\",\n);\n\nconst iconSlot = cn(\n  \"wensity-input-icon inline-flex self-stretch shrink-0 items-center justify-center\",\n  \"bg-[color-mix(in_srgb,var(--foreground)_4%,var(--background))]\",\n  \"text-[color-mix(in_srgb,var(--muted-foreground)_68%,transparent)]\",\n  \"transition-[background-color,color,border-color] duration-150 ease-[var(--primitive-ease)]\",\n  \"motion-reduce:transition-none\",\n  \"group-hover/input:bg-[color-mix(in_srgb,var(--foreground)_5.5%,var(--background))]\",\n  \"group-focus-within/input:text-[var(--muted-foreground)]\",\n  \"group-data-[filled]/input:text-[var(--muted-foreground)]\",\n  \"[&_svg]:size-4 [&_svg]:shrink-0\",\n);\n\nconst leadingIconSlot = cn(\n  iconSlot,\n  \"border-r border-[color-mix(in_srgb,var(--foreground)_8%,transparent)]\",\n);\n\nconst trailingIconSlot = cn(\n  iconSlot,\n  \"border-l border-[color-mix(in_srgb,var(--foreground)_8%,transparent)]\",\n);\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      id,\n      className,\n      containerClassName,\n      inputClassName,\n      label,\n      hint,\n      error,\n      leftIcon,\n      rightIcon,\n      clearable = false,\n      onClear,\n      inputSize = \"md\",\n      fullWidth = true,\n      disabled,\n      readOnly,\n      value,\n      defaultValue,\n      onChange,\n      \"aria-describedby\": ariaDescribedBy,\n      ...props\n    },\n    ref,\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? `wensity-input-${reactId}`;\n    const hintId = hint ? `${inputId}-hint` : undefined;\n    const errorId = error ? `${inputId}-error` : undefined;\n    const inputRef = React.useRef<HTMLInputElement | null>(null);\n    const isControlled = value !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = React.useState(\n      defaultValue?.toString() ?? \"\",\n    );\n    const currentValue = isControlled ? value : uncontrolledValue;\n    const hasValue = currentValue != null && String(currentValue).length > 0;\n    const showClear = clearable && hasValue && !disabled && !readOnly;\n    const describedBy =\n      [ariaDescribedBy, errorId, hintId].filter(Boolean).join(\" \") || undefined;\n\n    const setRefs = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        if (typeof ref === \"function\") {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (!isControlled) setUncontrolledValue(event.target.value);\n        onChange?.(event);\n      },\n      [isControlled, onChange],\n    );\n\n    const handleClear = React.useCallback(() => {\n      if (!isControlled) setUncontrolledValue(\"\");\n      if (inputRef.current) {\n        inputRef.current.value = \"\";\n      }\n      onClear?.();\n      if (typeof window !== \"undefined\") {\n        window.requestAnimationFrame(() => inputRef.current?.focus());\n      } else {\n        inputRef.current?.focus();\n      }\n    }, [isControlled, onClear]);\n\n    const handleClearPointerDown = React.useCallback(\n      (event: React.PointerEvent<HTMLButtonElement>) => {\n        event.preventDefault();\n      },\n      [],\n    );\n\n    return (\n      <div data-wensity-primitive=\"\"\n        className={cn(\n          \"flex flex-col gap-1.5\",\n          fullWidth ? \"w-full\" : \"w-fit\",\n          containerClassName,\n        )}\n      >\n        {label ? (\n          <label\n            htmlFor={inputId}\n            className=\"text-[13px] font-medium leading-none tracking-[-0.01em] text-[var(--foreground)]\"\n          >\n            {label}\n          </label>\n        ) : null}\n\n        <div\n          className={cn(\n            \"relative\",\n            fullWidth ? \"w-full\" : \"w-fit\",\n            className,\n          )}\n        >\n          <div\n            data-wensity-input=\"\"\n            data-filled={hasValue ? \"\" : undefined}\n            data-error={error ? \"\" : undefined}\n            data-readonly={readOnly ? \"\" : undefined}\n            data-disabled={disabled ? \"\" : undefined}\n            className={cn(\n              fieldBase,\n              !disabled && !readOnly && !error && fieldInteractive,\n              error && fieldError,\n              disabled && fieldDisabled,\n              readOnly && fieldReadOnly,\n              fieldSizes[inputSize],\n            )}\n          >\n            {leftIcon ? (\n              <span\n                aria-hidden=\"true\"\n                className={cn(leadingIconSlot, iconBoxSizes[inputSize])}\n              >\n                {leftIcon}\n              </span>\n            ) : null}\n\n            <BaseInput\n              ref={setRefs}\n              id={inputId}\n              value={value}\n              defaultValue={isControlled ? undefined : defaultValue}\n              disabled={disabled}\n              readOnly={readOnly}\n              aria-invalid={error ? true : undefined}\n              aria-describedby={describedBy}\n              onChange={handleChange}\n              className={cn(\n                \"wensity-input-control min-w-0 flex-1 border-0 bg-transparent text-[var(--foreground)] outline-none\",\n                \"placeholder:text-[var(--primitive-text-placeholder)]\",\n                \"disabled:cursor-not-allowed\",\n                \"read-only:cursor-default read-only:text-[var(--muted-foreground)]\",\n                inputSizes[inputSize],\n                inputClassName,\n              )}\n              {...props}\n            />\n\n            {showClear ? (\n              <span\n                className={cn(\n                  \"inline-flex shrink-0 items-center\",\n                  trailingPad[inputSize],\n                )}\n              >\n                <button\n                  type=\"button\"\n                  aria-label=\"Clear\"\n                  onPointerDown={handleClearPointerDown}\n                  onClick={handleClear}\n                  className={cn(\n                    \"grid size-6 place-items-center rounded-[var(--primitive-radius-control-sm)]\",\n                    \"text-[color-mix(in_srgb,var(--muted-foreground)_70%,transparent)]\",\n                    \"transition-colors duration-150 ease-[var(--primitive-ease)]\",\n                    \"motion-reduce:transition-none\",\n                    \"hover:text-[var(--foreground)]\",\n                    \"active:scale-[0.96] motion-reduce:active:scale-100\",\n                    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--background)]\",\n                    \"focus-visible:text-[var(--foreground)]\",\n                  )}\n                >\n                  <IconX aria-hidden=\"true\" className=\"size-3.5\" />\n                </button>\n              </span>\n            ) : rightIcon ? (\n              <span\n                aria-hidden=\"true\"\n                className={cn(trailingIconSlot, iconBoxSizes[inputSize])}\n              >\n                {rightIcon}\n              </span>\n            ) : null}\n          </div>\n        </div>\n\n        {error ? (\n          <p\n            id={errorId}\n            className=\"text-[12px] leading-[1.45] text-[var(--primitive-destructive)]\"\n          >\n            {error}\n          </p>\n        ) : hint ? (\n          <p\n            id={hintId}\n            className=\"text-[12px] leading-[1.45] text-[var(--primitive-text-secondary)]\"\n          >\n            {hint}\n          </p>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nInput.displayName = \"Input\";\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/input.tsx. For Pro components and updates, use pnpm dlx wensity@latest add input.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "input",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/input",
      "shadcnUrl": "https://ui.wensity.com/r/input",
      "cliInstall": "pnpm dlx wensity@latest add input"
    }
  }
}