feat(input): provide slot and render typings

zenkodr · Feb 22, 2024 · ae27d10 · ae27d10
1 parent 8dbc110
commit ae27d10
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 19 deletions.
diff --git a/apps/website/src/app/(local-pages)/example-playground/code.tsx b/apps/website/src/app/(local-pages)/example-playground/code.tsx
@@ -2,7 +2,7 @@ import { Code } from '@/components/code'
 
 const tsx =
 `'use client'
-import { OTPInput } from 'input-otp'
+import { OTPInput, SlotProps } from 'input-otp'
 
 <OTPInput
  maxLength={6}
@@ -27,11 +27,7 @@ import { OTPInput } from 'input-otp'
 />
 
 // Feel free to copy. Uses @shadcn/ui tailwind colors.
-function Slot(props: {
- char: string | null;
- isActive: boolean;
- hasFakeCaret: boolean;
-}) {
+function Slot(props: SlotProps) {
  return (
  <div
  className={cn(

diff --git a/apps/website/src/app/(local-pages)/example-playground/component.tsx b/apps/website/src/app/(local-pages)/example-playground/component.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from '@/lib/utils'
 
-import { OTPInput } from 'input-otp'
+import { OTPInput, SlotProps } from 'input-otp'
 
 export function ExampleComponent() {
  return (
@@ -31,11 +31,7 @@ export function ExampleComponent() {
 }
 
 // Feel free to copy. Uses @shadcn/ui tailwind colors.
-function Slot(props: {
- char: string | null
- isActive: boolean
- hasFakeCaret: boolean
-}) {
+function Slot(props: SlotProps) {
  return (
  <div
  className={cn(

diff --git a/packages/input-otp/src/index.ts b/packages/input-otp/src/index.ts
@@ -1,2 +1,3 @@
 export * from './input'
-export * from './regexp'
+export * from './regexp'
+export { OTPInputProps, SlotProps, RenderProps } from './types'
diff --git a/packages/input-otp/src/input.tsx b/packages/input-otp/src/input.tsx
@@ -469,15 +469,15 @@ export const OTPInput = React.forwardRef<HTMLInputElement, OTPInputProps>(
 )
 OTPInput.displayName = 'Input'
 
-export const rootStyle = (params: { disabled?: boolean }) =>
+const rootStyle = (params: { disabled?: boolean }) =>
  ({
  position: 'relative',
  cursor: params.disabled ? 'default' : 'text',
  userSelect: 'none',
  WebkitUserSelect: 'none',
  }) satisfies React.CSSProperties
 
-export const inputStyle = {
+const inputStyle = {
  position: 'absolute',
  inset: 0,
  width: '100%',
@@ -508,7 +508,7 @@ export const inputStyle = {
  // padding: '0',
 } satisfies React.CSSProperties
 
-export function usePrevious<T>(value: T) {
+function usePrevious<T>(value: T) {
  const ref = React.useRef<T>()
  React.useEffect(() => {
  ref.current = value

diff --git a/packages/input-otp/src/types.ts b/packages/input-otp/src/types.ts
@@ -1,5 +1,10 @@
-export interface OTPInputRenderProps {
- slots: { isActive: boolean; char: string | null; hasFakeCaret: boolean }[]
+export interface SlotProps {
+ isActive: boolean
+ char: string | null
+ hasFakeCaret: boolean
+}
+export interface RenderProps {
+ slots: SlotProps[]
  isFocused: boolean
  isHovering: boolean
 }
@@ -17,7 +22,7 @@ export type OTPInputProps = OverrideProps<
 
  onComplete?: (...args: any[]) => unknown
 
- render: (props: OTPInputRenderProps) => React.ReactElement
+ render: (props: RenderProps) => React.ReactElement
 
  containerClassName?: string
  }