@visulima/tui-kit 0.0.0 → 1.0.1

package/dist/r/progress-bar.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-bar",
+  "type": "registry:ui",
+  "title": "Progress Bar",
+  "description": "Progress Bar component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/tui"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\n\n/**\n * Progress bar component for Ink.\n *\n * Based on ink-progress-bar by Frankie Bagnardi (brigand).\n * @see https://github.com/brigand/ink-progress-bar\n *\n * MIT License\n * Copyright (c) Frankie Bagnardi\n */\nimport type { Props as TextProps } from \"@visulima/tui/components/text\";\nimport Text from \"@visulima/tui/components/text\";\nimport useWindowSize from \"@visulima/tui/hooks/use-window-size\";\nimport type { ReactElement } from \"react\";\n\nexport type Props = {\n    /** Fill glyph repeated across the completed portion of the progress bar. Defaults to \"█\". */\n    readonly character?: string;\n\n    /**\n     * Override the terminal width used for calculation.\n     * When 0, uses the actual terminal width.\n     * @default 0\n     */\n    readonly columns?: number;\n\n    /**\n     * Number of columns reserved on the left side (e.g. for labels).\n     * @default 0\n     */\n    readonly left?: number;\n\n    /**\n     * Completion percentage between 0 and 1.\n     * @default 1\n     */\n    readonly percent?: number;\n\n    /**\n     * Number of columns reserved on the right side (e.g. for percentage text).\n     * @default 0\n     */\n    readonly right?: number;\n\n    /**\n     * Whether to pad the remaining space with whitespace.\n     * Useful when rendering the bar over a background color.\n     * @default false\n     */\n    readonly rightPad?: boolean;\n} & Omit<TextProps, \"children\">;\n\n/**\n * A terminal progress bar that fills proportionally to a percentage value.\n *\n * ```tsx\n * &lt;ProgressBar percent={0.5} />\n * &lt;ProgressBar percent={0.75} color=\"green\" left={10} right={5} />\n * ```\n */\nexport default function ProgressBar({\n    character = \"\\u2588\",\n    columns: columnsProp = 0,\n    left = 0,\n    percent = 1,\n    right = 0,\n    rightPad = false,\n    ...textProps\n}: Props): ReactElement {\n    const { columns: terminalColumns } = useWindowSize();\n\n    const screen = columnsProp || terminalColumns || 80;\n    const space = Math.max(0, screen - right - left);\n    const filled = Math.min(Math.floor(space * Math.max(0, Math.min(1, percent))), space);\n    const bar = character.repeat(filled) + (rightPad ? \" \".repeat(space - filled) : \"\");\n\n    return <Text {...textProps}>{bar}</Text>;\n}\n\nexport { ProgressBar };\nexport type { Props as ProgressBarProps };\n",
+      "path": "registry/ui/progress-bar.tsx",
+      "target": "components/ui/progress-bar.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/progress-circle.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "progress-circle",
+  "type": "registry:ui",
+  "title": "Progress Circle",
+  "description": "Progress Circle component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport type { CanvasContext } from \"@visulima/tui/canvas\";\nimport { createBrailleGrid } from \"@visulima/tui/canvas\";\nimport Box from \"@visulima/tui/components/box\";\nimport Canvas from \"@visulima/tui/components/canvas\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type Props = {\n    /**\n     * Color of the filled portion of the ring.\n     * @default \"cyan\"\n     */\n    readonly color?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Format the centered readout. Defaults to a rounded percentage.\n     */\n    readonly formatValue?: (ratio: number) => string;\n\n    /**\n     * Upper bound of the range.\n     * @default 100\n     */\n    readonly max?: number;\n\n    /**\n     * Lower bound of the range.\n     * @default 0\n     */\n    readonly min?: number;\n\n    /**\n     * Show the readout in the middle of the ring.\n     * @default true\n     */\n    readonly showValue?: boolean;\n\n    /**\n     * Diameter of the ring in character rows.\n     * @default 8\n     */\n    readonly size?: number;\n\n    /**\n     * Color of the unfilled track behind the ring.\n     * @default \"gray\"\n     */\n    readonly trackColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Current value, clamped into `[min, max]`.\n     */\n    readonly value: number;\n};\n\nconst defaultFormat = (ratio: number): string => `${Math.round(ratio * 100)}%`;\n\n/**\n * A circular progress ring rendered at 2x4 braille sub-cell resolution. The\n * filled arc grows clockwise from the top in proportion to `value`, with an\n * optional centered readout.\n */\nexport default function ProgressCircle({\n    color = \"cyan\",\n    formatValue = defaultFormat,\n    max = 100,\n    min = 0,\n    showValue = true,\n    size = 8,\n    trackColor = \"gray\",\n    value,\n}: Props): ReactElement {\n    const range = max - min || 1;\n    const ratio = Math.max(0, Math.min(1, (value - min) / range));\n\n    const rows = Math.max(3, size);\n    const cols = Math.max(3, Math.round((rows * 4) / 2 / 2));\n\n    return (\n        <Box alignItems=\"center\" flexDirection=\"column\">\n            <Canvas\n                // eslint-disable-next-line react-perf/jsx-no-new-function-as-prop -- canvas re-renders on `version` change, not draw identity\n                draw={(context: CanvasContext) => {\n                    context.clear();\n\n                    const pixelWidth = context.width * 2;\n                    const pixelHeight = context.height * 4;\n                    const cx = pixelWidth / 2;\n                    const cy = pixelHeight / 2;\n                    const radius = Math.max(1, Math.min(cx, cy) - 1);\n\n                    const trackGrid = createBrailleGrid(context.width, context.height);\n                    const fillGrid = createBrailleGrid(context.width, context.height);\n\n                    const steps = Math.max(64, Math.round(Math.PI * 2 * radius));\n                    const filledSteps = Math.round(ratio * steps);\n\n                    for (let step = 0; step < steps; step += 1) {\n                        // Clockwise from the top.\n                        const angle = (step / steps) * Math.PI * 2 - Math.PI / 2;\n                        const px = Math.round(cx + radius * Math.cos(angle));\n                        const py = Math.round(cy + radius * Math.sin(angle));\n\n                        (step < filledSteps ? fillGrid : trackGrid).plotPoint(px, py);\n                    }\n\n                    trackGrid.flush(context, { color: trackColor });\n                    fillGrid.flush(context, { color });\n                }}\n                height={rows}\n                // eslint-disable-next-line react-perf/jsx-no-new-array-as-prop -- version array is the canvas redraw key\n                version={[value, min, max, size, color, trackColor]}\n                width={cols}\n            />\n            {showValue\n                ? (\n                <Box marginTop={-Math.ceil(rows / 2) - 1}>\n                    <Text bold color={color}>\n                        {formatValue(ratio)}\n                    </Text>\n                </Box>\n                )\n                : undefined}\n        </Box>\n    );\n}\n\nexport { ProgressCircle };\nexport type { Props as ProgressCircleProps };\n",
+      "path": "registry/ui/progress-circle.tsx",
+      "target": "components/ui/progress-circle.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/qr-code.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "qr-code",
+  "type": "registry:ui",
+  "title": "Qr Code",
+  "description": "Qr Code component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport type { ReactElement } from \"react\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\ntype Color = LiteralUnion<AnsiColors, string>;\n\nexport type Props = {\n    /**\n     * Color of the \"dark\" modules.\n     * @default \"black\"\n     */\n    readonly darkColor?: Color;\n\n    /**\n     * Color of the \"light\" modules and quiet zone.\n     * @default \"white\"\n     */\n    readonly lightColor?: Color;\n\n    /**\n     * A pre-encoded square grid of modules (`true` = dark). Provide this to\n     * render without the optional `qrcode` peer; it takes precedence over\n     * `value`.\n     */\n    readonly matrix?: ReadonlyArray<ReadonlyArray<boolean>>;\n\n    /**\n     * Width of the light border around the code, in modules.\n     * @default 2\n     */\n    readonly quietZone?: number;\n\n    /**\n     * A string to encode. Requires the optional `qrcode` peer dependency; when\n     * absent, provide `matrix` instead.\n     */\n    readonly value?: string;\n};\n\nconst UPPER_HALF = \"▀\";\n\n/** Pad a module matrix with a light quiet zone on all sides. */\nconst withQuietZone = (matrix: ReadonlyArray<ReadonlyArray<boolean>>, zone: number): boolean[][] => {\n    if (zone <= 0) {\n        return matrix.map((row) => [...row]);\n    }\n\n    let maxWidth = 0;\n\n    for (const row of matrix) {\n        maxWidth = Math.max(maxWidth, row.length);\n    }\n\n    const width = maxWidth + zone * 2;\n    const blankRow = (): boolean[] => {\n        const row: boolean[] = [];\n\n        for (let index = 0; index < width; index += 1) {\n            row.push(false);\n        }\n\n        return row;\n    };\n    const out: boolean[][] = [];\n\n    for (let index = 0; index < zone; index += 1) {\n        out.push(blankRow());\n    }\n\n    for (const row of matrix) {\n        const padded = blankRow();\n\n        row.forEach((cell, index) => {\n            padded[index + zone] = cell;\n        });\n\n        out.push(padded);\n    }\n\n    for (let index = 0; index < zone; index += 1) {\n        out.push(blankRow());\n    }\n\n    return out;\n};\n\n/**\n * Render a QR code from a module matrix using the upper-half-block technique,\n * so two module rows share one character row. Pass `matrix` for a self-contained\n * render, or `value` to encode a string via the optional `qrcode` peer.\n */\nexport default function QrCode({ darkColor = \"black\", lightColor = \"white\", matrix, quietZone = 2, value }: Props): ReactElement {\n    const [encoded, setEncoded] = useState<ReadonlyArray<ReadonlyArray<boolean>> | undefined>(undefined);\n\n    useEffect(() => {\n        if (matrix !== undefined || value === undefined) {\n            return undefined;\n        }\n\n        let cancelled = false;\n\n        const encode = async (): Promise<void> => {\n            try {\n                // Optional peer — only needed for the string-encoding path.\n                const qrcode = (await import(\"qrcode\")) as unknown as {\n                    create: (text: string) => { modules: { data: Uint8Array | number[]; size: number } };\n                };\n                const { modules } = qrcode.create(value);\n                const grid: boolean[][] = [];\n\n                for (let y = 0; y < modules.size; y += 1) {\n                    const row: boolean[] = [];\n\n                    for (let x = 0; x < modules.size; x += 1) {\n                        row.push(Boolean(modules.data[y * modules.size + x]));\n                    }\n\n                    grid.push(row);\n                }\n\n                if (!cancelled) {\n                    setEncoded(grid);\n                }\n            } catch {\n                // qrcode not installed — nothing to render from `value`.\n            }\n        };\n\n        // eslint-disable-next-line react-you-might-not-need-an-effect/no-external-store-subscription -- lazily loads the optional `qrcode` peer, not a subscribable store\n        encode().catch(() => {\n            // Swallow: the string-encoding path is best-effort.\n        });\n\n        return () => {\n            cancelled = true;\n        };\n    }, [matrix, value]);\n\n    const source = matrix ?? encoded;\n    const padded = useMemo(() => {\n        if (source === undefined) {\n            return undefined;\n        }\n\n        return withQuietZone(source, quietZone);\n    }, [quietZone, source]);\n\n    if (padded === undefined) {\n        return (\n            <Box>\n                <Text dimColor>{value === undefined ? \"\" : \"Encoding…\"}</Text>\n            </Box>\n        );\n    }\n\n    const rows: ReactElement[] = [];\n\n    for (let y = 0; y < padded.length; y += 2) {\n        const top = padded[y] ?? [];\n        const bottom = padded[y + 1] ?? [];\n        const spans: ReactElement[] = [];\n\n        for (const [x, element] of top.entries()) {\n            spans.push(\n\n                <Text backgroundColor={bottom[x] ? darkColor : lightColor} color={element ? darkColor : lightColor} key={x}>\n                    {UPPER_HALF}\n                </Text>,\n            );\n        }\n\n        rows.push(\n\n            <Box key={y}>{spans}</Box>,\n        );\n    }\n\n    return <Box flexDirection=\"column\">{rows}</Box>;\n}\n\nexport { QrCode };\nexport type { Props as QrCodeProps };\n",
+      "path": "registry/ui/qr-code.tsx",
+      "target": "components/ui/qr-code.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/r/radio-group.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "radio-group",
+  "type": "registry:ui",
+  "title": "Radio Group",
+  "description": "Radio Group component for @visulima/tui.",
+  "categories": [
+    "ui"
+  ],
+  "dependencies": [
+    "@visulima/colorize",
+    "@visulima/tui",
+    "type-fest"
+  ],
+  "registryDependencies": [],
+  "files": [
+    {
+      "content": "/* eslint-disable react/function-component-definition */\nimport type { AnsiColors } from \"@visulima/colorize\";\nimport Box from \"@visulima/tui/components/box\";\nimport Text from \"@visulima/tui/components/text\";\nimport useFocus from \"@visulima/tui/hooks/use-focus\";\nimport useInput from \"@visulima/tui/hooks/use-input\";\nimport type { ReactElement } from \"react\";\nimport { useCallback, useRef, useState } from \"react\";\nimport type { LiteralUnion } from \"type-fest\";\n\nexport type RadioOption = {\n    readonly description?: string;\n    readonly key?: string;\n    readonly label: string;\n    readonly value: string;\n};\n\nexport type Props = {\n    /**\n     * Accent color for the focused and selected indicator.\n     * @default \"blue\"\n     */\n    readonly accentColor?: LiteralUnion<AnsiColors, string>;\n\n    /**\n     * Auto-focus when mounted.\n     */\n    readonly autoFocus?: boolean;\n\n    /**\n     * When true, moving focus with arrow keys immediately updates the selected\n     * value (and fires `onChange`). When false, focus moves independently and\n     * selection commits only on Space or Enter.\n     * @default true\n     */\n    readonly commitOnNavigate?: boolean;\n\n    /**\n     * Initial selected value when uncontrolled.\n     */\n    readonly defaultValue?: string;\n\n    /**\n     * Disable input and dim labels.\n     */\n    readonly isDisabled?: boolean;\n\n    /**\n     * Called when selection changes.\n     */\n    readonly onChange?: (value: string) => void;\n\n    /**\n     * Called when the user submits by pressing Enter.\n     */\n    readonly onSubmit?: (value: string) => void;\n\n    /**\n     * Available options.\n     */\n    readonly options: ReadonlyArray<RadioOption>;\n\n    /**\n     * Orientation of options.\n     * @default \"vertical\"\n     */\n    readonly orientation?: \"horizontal\" | \"vertical\";\n\n    /**\n     * Controlled selected value.\n     */\n    readonly value?: string;\n};\n\nconst initialFocusIndex = (options: ReadonlyArray<RadioOption>, selectedValue: string | undefined): number => {\n    if (selectedValue === undefined) {\n        return 0;\n    }\n\n    const index = options.findIndex((option) => option.value === selectedValue);\n\n    return Math.max(index, 0);\n};\n\n/**\n * Single-choice radio group with keyboard navigation. By default, navigation\n * commits selection; set `commitOnNavigate={false}` to require an explicit\n * Space/Enter commit.\n */\nexport default function RadioGroup({\n    accentColor = \"blue\",\n    autoFocus = false,\n    commitOnNavigate = true,\n    defaultValue,\n    isDisabled = false,\n    onChange,\n    onSubmit,\n    options,\n    orientation = \"vertical\",\n    value,\n}: Props): ReactElement {\n    const { isFocused } = useFocus({ autoFocus, isActive: !isDisabled });\n    const [internal, setInternal] = useState(defaultValue ?? options[0]?.value);\n    const current = value ?? internal;\n    const [focusedIndex, setFocusedIndex] = useState<number>(() => initialFocusIndex(options, current));\n    const focusedIndexRef = useRef(focusedIndex);\n\n    focusedIndexRef.current = focusedIndex;\n\n    const commit = useCallback(\n        (index: number) => {\n            const target = options[index];\n\n            if (!target) {\n                return;\n            }\n\n            const currentValue = value ?? internal;\n\n            if (target.value === currentValue) {\n                return;\n            }\n\n            if (value === undefined) {\n                setInternal(target.value);\n            }\n\n            onChange?.(target.value);\n        },\n        [options, value, internal, onChange],\n    );\n\n    useInput(\n        useCallback(\n            (input, key) => {\n                if (!isFocused) {\n                    return;\n                }\n\n                const total = options.length;\n\n                if (total === 0) {\n                    return;\n                }\n\n                const moveNext = (key.downArrow && orientation === \"vertical\") || (key.rightArrow && orientation === \"horizontal\") || input === \"j\";\n                const movePrevious = (key.upArrow && orientation === \"vertical\") || (key.leftArrow && orientation === \"horizontal\") || input === \"k\";\n\n                if (moveNext) {\n                    const nextIndex = Math.min(total - 1, focusedIndexRef.current + 1);\n\n                    setFocusedIndex(nextIndex);\n\n                    if (commitOnNavigate) {\n                        commit(nextIndex);\n                    }\n\n                    return;\n                }\n\n                if (movePrevious) {\n                    const nextIndex = Math.max(0, focusedIndexRef.current - 1);\n\n                    setFocusedIndex(nextIndex);\n\n                    if (commitOnNavigate) {\n                        commit(nextIndex);\n                    }\n\n                    return;\n                }\n\n                if (input === \" \") {\n                    commit(focusedIndexRef.current);\n\n                    return;\n                }\n\n                if (key.return) {\n                    // Commit the focused option, then emit onSubmit with the new value.\n                    if (!commitOnNavigate) {\n                        commit(focusedIndexRef.current);\n                    }\n\n                    const submitValue = options[focusedIndexRef.current]?.value ?? current;\n\n                    if (submitValue !== undefined) {\n                        onSubmit?.(submitValue);\n                    }\n                }\n            },\n            [isFocused, options, orientation, commit, commitOnNavigate, current, onSubmit],\n        ),\n        { isActive: !isDisabled && isFocused },\n    );\n\n    return (\n        <Box flexDirection={orientation === \"vertical\" ? \"column\" : \"row\"} gap={orientation === \"vertical\" ? 0 : 2}>\n            {options.map((option, index) => {\n                const isSelected = option.value === current;\n                const isItemFocused = isFocused && index === focusedIndex;\n                const color = (isSelected || isItemFocused) && isFocused ? accentColor : undefined;\n\n                return (\n                    <Box gap={1} key={option.key ?? option.value}>\n                        <Text color={color} dimColor={isDisabled}>\n                            {isSelected ? \"●\" : \"○\"}\n                        </Text>\n                        <Text bold={isItemFocused} color={color} dimColor={isDisabled}>\n                            {option.label}\n                        </Text>\n                        {option.description === undefined ? undefined : <Text dimColor>{option.description}</Text>}\n                    </Box>\n                );\n            })}\n        </Box>\n    );\n}\n\nexport { RadioGroup };\nexport type { Props as RadioGroupProps };\n",
+      "path": "registry/ui/radio-group.tsx",
+      "target": "components/ui/radio-group.tsx",
+      "type": "registry:ui"
+    }
+  ]
+}