@fidely-ui/react
Version:
Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps
14 lines (13 loc) • 869 B
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { ark } from '@ark-ui/react/factory';
import { styled } from '@fidely-ui/styled-system/jsx';
import { inputGroup } from '@fidely-ui/styled-system/recipes';
import { InputAddon } from '../input-addon/index';
const StyledInputGroup = styled(ark.div, inputGroup);
export const InputGroup = React.forwardRef(function InputGroup(props, ref) {
const { startAddon, startAddonProps, endAddon, endAddonProps, children, ...rest } = props;
return (_jsxs(StyledInputGroup, { ref: ref, ...rest, children: [startAddon && (_jsx(InputAddon, { ...startAddonProps, placement: "left", children: startAddon })), children, endAddon && (_jsx(InputAddon, { ...endAddonProps, placement: "right", children: endAddon }))] }));
});
InputGroup.displayName = 'InputGroup';