@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
20 lines (19 loc) • 1.42 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { PasswordInput as ArkPasswordInput } from '@ark-ui/react/password-input';
import { passwordInput, } from '@fidely-ui/styled-system/recipes';
import { makeStyleContext } from '../../system/make-style-context';
import { FiEyeIcon } from '../icons/FiEyeIcon';
import { FiEyeSlashIcon } from '../icons/FiEyeSlashIcon';
const { withSlotProvider, withSlotContext } = makeStyleContext(passwordInput);
export const PasswordInputRootProvider = withSlotProvider(ArkPasswordInput.RootProvider, 'root');
export const PasswordInputRoot = withSlotProvider(ArkPasswordInput.Root, 'root');
export const PasswordInputInput = withSlotContext(ArkPasswordInput.Input, 'input');
export const PasswordInputLabel = withSlotContext(ArkPasswordInput.Label, 'label');
export const PasswordInputControl = withSlotContext(ArkPasswordInput.Control, 'control');
export const PasswordInputIndicator = withSlotContext((props) => {
const { fallbackIcon = _jsx(FiEyeSlashIcon, {}), idleIcon = _jsx(FiEyeIcon, {}), children, ...rest } = props;
return (_jsx(ArkPasswordInput.Indicator, { ...rest, fallback: props.fallback ?? fallbackIcon, children: children ?? idleIcon }));
}, 'indicator');
export const PasswordInputVisibilityTrigger = withSlotContext(ArkPasswordInput.VisibilityTrigger, 'visibilityTrigger');
export const PasswordInputContext = ArkPasswordInput.Context;