{"version":3,"file":"index.mjs","names":[],"sources":["../../src/Input/Input.constants.ts","../../src/Input/Input.tsx"],"sourcesContent":["export const SIZE = {\n  Container: {\n    \"1\": {\n      h: \"6\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"2\": {\n      h: \"8\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n    \"3\": {\n      h: \"10\",\n      pl: \"0\",\n      rounded: \"2\",\n    },\n  },\n  Text: {\n    \"1\": {\n      size: \"1\",\n      px: \"1\",\n    },\n    \"2\": {\n      size: \"2\",\n      px: \"2\",\n    },\n    \"3\": {\n      size: \"3\",\n      px: \"3\",\n    },\n  },\n  SlotLeading: {\n    \"1\": {\n      pl: \"1_5\",\n    },\n    \"2\": {\n      pl: \"2\",\n    },\n    \"3\": {\n      pl: \"3\",\n    },\n  },\n  SlotTrailing: {\n    \"1\": {\n      pr: \"1\",\n    },\n    \"2\": {\n      pr: \"2\",\n    },\n    \"3\": {\n      pr: \"3\",\n    },\n  },\n} as const;\n\nexport const COLOR = {\n  Container: {\n    default: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"gray-6\",\n        _hover: {\n          backgroundColor: \"surface-2\",\n          borderColor: \"gray-7\",\n        },\n        _focusWithin: {\n          backgroundColor: \"surface-3\",\n          borderColor: \"blue-8\",\n        },\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n        _hover: {\n          backgroundColor: \"surface-2\",\n          borderColor: \"gray-7\",\n        },\n        _focusWithin: {\n          backgroundColor: \"surface-3\",\n          borderColor: \"blue-8\",\n        },\n      },\n    },\n    disabled: {\n      outline: {\n        bg: \"gray-2\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n      ghost: {\n        bg: \"transparent\",\n        border: \"px\",\n        borderColor: \"transparent\",\n      },\n    },\n    error: {\n      outline: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"red-6\",\n        _hover: {\n          backgroundColor: \"surface-2\",\n          borderColor: \"red-7\",\n        },\n        _focusWithin: {\n          backgroundColor: \"surface-3\",\n          borderColor: \"blue-8\",\n        },\n      },\n      ghost: {\n        bg: \"surface-1\",\n        border: \"px\",\n        borderColor: \"red-6\",\n        _hover: {\n          backgroundColor: \"surface-2\",\n          borderColor: \"red-7\",\n        },\n        _focusWithin: {\n          backgroundColor: \"surface-3\",\n          borderColor: \"blue-8\",\n        },\n      },\n    },\n  },\n  Text: {\n    default: {\n      color: \"default\",\n    },\n    disabled: {\n      color: \"disabled\",\n    },\n    error: {\n      color: \"default\",\n    },\n  },\n} as const;\n","import { useComposedRefs } from \"@telegraph/compose-refs\";\nimport type {\n  PolymorphicProps,\n  Required,\n  TgphElement,\n} from \"@telegraph/helpers\";\nimport { TgphSlot } from \"@telegraph/helpers\";\nimport { Stack, type StackProps } from \"@telegraph/layout\";\nimport { Text, type TextProps } from \"@telegraph/typography\";\nimport {\n  type ComponentPropsWithRef,\n  type MouseEvent,\n  type ReactNode,\n  createContext,\n  forwardRef,\n  useContext,\n  useRef,\n} from \"react\";\n\nimport { COLOR, SIZE } from \"./Input.constants\";\n\nexport type BaseRootProps = {\n  size?: \"1\" | \"2\" | \"3\";\n  variant?: \"outline\" | \"ghost\";\n  errored?: boolean;\n};\n\nexport type RootProps<T extends TgphElement = \"input\"> = BaseRootProps & {\n  // Declared because the `Omit` below strips Text's own `as`.\n  as?: T;\n  textProps?: Omit<TextProps<T>, \"as\">;\n  stackProps?: Omit<StackProps, \"as\">;\n} & Omit<TextProps<T>, \"as\" | keyof BaseRootProps>;\n\ntype InternalProps = Omit<BaseRootProps, \"errored\"> & {\n  state: \"default\" | \"disabled\" | \"error\";\n};\n\nconst InputContext = createContext<Required<InternalProps>>({\n  state: \"default\",\n  size: \"2\",\n  variant: \"outline\",\n});\n\nconst Root = <T extends TgphElement = \"input\">(rootProps: RootProps<T>) => {\n  const {\n    as = \"input\",\n    size = \"2\",\n    variant = \"outline\",\n    textProps,\n    stackProps,\n    disabled,\n    errored,\n    children,\n    tgphRef,\n    ...props\n  } = rootProps as RootProps<\"input\">;\n  const Component = as;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const composedRefs = useComposedRefs(tgphRef, inputRef);\n\n  const state = disabled ? \"disabled\" : errored ? \"error\" : \"default\";\n\n  return (\n    <InputContext.Provider value={{ size, variant, state }}>\n      <Stack\n        // Focus the input when clicking on the container\n        onPointerDown={(event: MouseEvent<HTMLDivElement>) => {\n          const target = event.target as HTMLElement;\n\n          // Make sure we're not clicking on an interactive element\n          if (target.closest(\"button, a\")) {\n            event.preventDefault();\n            return;\n          }\n\n          const input = inputRef.current;\n          if (!input) return;\n\n          requestAnimationFrame(() => {\n            input.focus();\n          });\n        }}\n        align=\"center\"\n        {...SIZE.Container[size]}\n        {...COLOR.Container[state][variant]}\n        data-tgph-input-container\n        data-tgph-input-container-variant={variant}\n        data-tgph-input-container-state={state}\n        data-tgph-input-container-size={size}\n        {...stackProps}\n      >\n        {/*\n          We choose to use the `<Text/>` component as a base here so that we can \n          configure the text inside of the input to match the design system font sizes\n        */}\n        <Text\n          as={Component}\n          bg=\"transparent\"\n          shadow=\"0\"\n          h=\"full\"\n          w=\"full\"\n          disabled={disabled}\n          tgphRef={composedRefs}\n          {...SIZE.Text[size]}\n          {...COLOR.Text[state]}\n          {...props}\n          {...textProps}\n          data-tgph-input-field\n        />\n        {children}\n      </Stack>\n    </InputContext.Provider>\n  );\n};\n\n// Declared rather than inherited from `TgphSlotProps`. That type intersects\n// `Record<string, unknown>` so the slot primitive can merge arbitrary props\n// onto its child, and `Omit` over an index signature keeps the index\n// signature — which swallowed every key here, valid or not.\nexport type SlotProps = Omit<ComponentPropsWithRef<\"span\">, \"size\"> & {\n  children?: ReactNode;\n  size?: \"1\" | \"2\" | \"3\";\n  position?: \"leading\" | \"trailing\";\n};\ntype SlotRef = HTMLElement;\n\nconst Slot = forwardRef<SlotRef, SlotProps>(\n  ({ position = \"leading\", ...props }, forwardedRef) => {\n    const context = useContext(InputContext);\n    const slotSize = props.size ?? context.size;\n\n    return (\n      <Stack\n        align=\"center\"\n        justify=\"center\"\n        h=\"full\"\n        data-tgph-input-slot\n        data-tgph-input-slot-position={position}\n        data-tgph-input-slot-size={slotSize}\n        {...(position === \"leading\" && SIZE.SlotLeading[context.size])}\n        {...(position === \"trailing\" && SIZE.SlotTrailing[context.size])}\n      >\n        <TgphSlot size={slotSize} {...props} ref={forwardedRef} />\n      </Stack>\n    );\n  },\n);\nSlot.displayName = \"Slot\";\n\nexport type DefaultProps<T extends TgphElement = \"input\"> = Omit<\n  PolymorphicProps<T>,\n  keyof BaseRootProps\n> &\n  RootProps<T> & {\n    LeadingComponent?: ReactNode;\n    TrailingComponent?: ReactNode;\n  };\n\nconst Default = <T extends TgphElement = \"input\">({\n  LeadingComponent,\n  TrailingComponent,\n  ...props\n}: DefaultProps<T>) => {\n  const rootProps = props as RootProps<T>;\n\n  return (\n    <Root {...rootProps}>\n      {LeadingComponent && <Slot position=\"leading\">{LeadingComponent}</Slot>}\n      {TrailingComponent && (\n        <Slot position=\"trailing\">{TrailingComponent}</Slot>\n      )}\n    </Root>\n  );\n};\n\nObject.assign(Default, { Root, Slot });\n\nconst Input = Default as typeof Default & {\n  Root: typeof Root;\n  Slot: typeof Slot;\n};\n\nexport { Input };\n"],"mappings":"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"}