Skip to content

Commit

Permalink
feat: 🏷️ improve types
Browse files Browse the repository at this point in the history
  • Loading branch information
okineadev committed Dec 10, 2024
1 parent 6d53a0a commit bf05189
Showing 1 changed file with 67 additions and 2 deletions.
69 changes: 67 additions & 2 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,41 +7,79 @@ export interface DividerProps {
/**
* Title shown in the middle of the divider.
*
* @example
* ```tsx
* <Divider title="Title" />
*
* // ─────────── Title ───────────
* ```
*
* @default null
*/
title?: string

/**
* Width of the divider.
*
* @example
* ```tsx
* <Divider width={50} />
*
* // ──────────────────────────────────────────────────
* ```
* @default 'auto'
*/
width?: 'auto' | number

/**
* Padding at the start and the end of the divider.
*
* @example
* ```tsx
* <Divider padding={2} />
*
* // ··─────────────────────────────··
* ```
* @default 0
*/
padding?: number

/**
* Padding besides the title in the middle.
*
* @example
* ```tsx
* <Divider title="My title" titlePadding={3} />
*
* // ───────── Title ─────────
* ```
*
* @default 1
*/
titlePadding?: number

/**
* Color of the title.
*
* @example
* ```tsx
* <Divider title="My title" titleColor="green" />
* ```
*
* @default 'white'
*/
titleColor?: TextProps['color']

/**
* Char used as a divider.
*
* @example
* ```tsx
* <Divider dividerChar="=" />
*
* // =============================
* ```
*
* @default '─'
*/
dividerChar?: string
Expand All @@ -50,10 +88,28 @@ export interface DividerProps {
* Color of the divider's border. Matches the type of `borderColor` in the Ink `Box` component.
* Accepts standard Ink color names or hex codes.
*
* @example
* ```tsx
* <Divider dividerColor="red" />
* ```
*
* @default 'gray'
*/
dividerColor?: BoxProps['borderColor']

/**
* Additional props to be passed to the underlying Ink `Box` component.
*
* @example
* ```tsx
* <Divider boxProps={{ marginTop: 2 }} />
*
*
* //
* //
* // ─────────────────────────────
* ```
*/
boxProps?: BoxProps
}

Expand Down Expand Up @@ -86,8 +142,17 @@ const BaseDivider: React.FC<DividerProps> = ({
/**
* A horizontal divider component styled as a single border line.
*
* @param props - Properties to customize the divider.
* @returns A styled Ink `Box` component representing a divider.
* @example
* ```tsx
* import { render } from 'ink'
* import Divider from 'ink-divider'
*
* render(<Divider title='Title' />)
*
* // ─────────── Title ───────────
* ```
*
* @returns A styled divider.
*/
const Divider: React.FC<DividerProps> = ({
title,
Expand Down

0 comments on commit bf05189

Please sign in to comment.