@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
169 lines (155 loc) • 5.5 kB
JSX
import {
useFieldContext
} from "./7HLG62OR.jsx";
import {
createSplitProps
} from "./6WEDGJKQ.jsx";
import {
ark
} from "./UFYZ7HLU.jsx";
import {
useEnvironmentContext
} from "./CGW54HAQ.jsx";
import {
useLocaleContext
} from "./JFOWNFC7.jsx";
import {
runIfFn
} from "./KGOB2IMX.jsx";
import {
createContext
} from "./UZJJWJQM.jsx";
import {
__export
} from "./7IUG3E2V.jsx";
// src/components/password-input/use-password-input-context.ts
var [PasswordInputProvider, usePasswordInputContext] = createContext({
hookName: "usePasswordInputContext",
providerName: "<PasswordInputProvider />"
});
// src/components/password-input/password-input-context.tsx
var PasswordInputContext = (props) => props.children(usePasswordInputContext());
// src/components/password-input/password-input-control.tsx
import { mergeProps } from "@zag-js/solid";
var PasswordInputControl = (props) => {
const passwordInput2 = usePasswordInputContext();
const mergedProps = mergeProps(() => passwordInput2().getControlProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/password-input/password-input-indicator.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
import { Show } from "solid-js";
var PasswordInputIndicator = (props) => {
const passwordInput2 = usePasswordInputContext();
const mergedProps = mergeProps2(() => passwordInput2().getIndicatorProps(), props);
return <ark.span {...mergedProps}>
<Show when={passwordInput2().visible} fallback={props.fallback}>
{props.children}
</Show>
</ark.span>;
};
// src/components/password-input/password-input-input.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
var PasswordInputInput = (props) => {
const passwordInput2 = usePasswordInputContext();
const mergedProps = mergeProps3(() => passwordInput2().getInputProps(), props);
const field = useFieldContext();
return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps} />;
};
// src/components/password-input/password-input-label.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
var PasswordInputLabel = (props) => {
const passwordInput2 = usePasswordInputContext();
const mergedProps = mergeProps4(() => passwordInput2().getLabelProps(), props);
return <ark.label {...mergedProps} />;
};
// src/components/password-input/password-input-root.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
// src/components/password-input/use-password-input.ts
import * as passwordInput from "@zag-js/password-input";
import { normalizeProps, useMachine } from "@zag-js/solid";
import { createMemo, createUniqueId } from "solid-js";
var usePasswordInput = (props) => {
const id = createUniqueId();
const locale = useLocaleContext();
const environment = useEnvironmentContext();
const field = useFieldContext();
const machineProps = createMemo(() => ({
id,
ids: {
input: field?.().ids.control
},
disabled: field?.().disabled,
readOnly: field?.().readOnly,
required: field?.().required,
invalid: field?.().invalid,
dir: locale().dir,
getRootNode: environment().getRootNode,
...runIfFn(props)
}));
const service = useMachine(passwordInput.machine, machineProps);
return createMemo(() => passwordInput.connect(service, normalizeProps));
};
// src/components/password-input/password-input-root.tsx
var PasswordInputRoot = (props) => {
const [usePasswordInputProps, localProps] = createSplitProps()(props, [
"autoComplete",
"defaultVisible",
"disabled",
"id",
"ids",
"ignorePasswordManagers",
"invalid",
"name",
"onVisibilityChange",
"readOnly",
"required",
"translations",
"visible"
]);
const passwordInput2 = usePasswordInput(usePasswordInputProps);
const mergedProps = mergeProps5(() => passwordInput2().getRootProps(), localProps);
return <PasswordInputProvider value={passwordInput2}>
<ark.div {...mergedProps} />
</PasswordInputProvider>;
};
// src/components/password-input/password-input-root-provider.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
var PasswordInputRootProvider = (props) => {
const mergedProps = mergeProps6(() => props.value().getRootProps(), props);
return <PasswordInputProvider value={props.value}>
<ark.div {...mergedProps} />
</PasswordInputProvider>;
};
// src/components/password-input/password-input-visibility-trigger.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var PasswordInputVisibilityTrigger = (props) => {
const passwordInput2 = usePasswordInputContext();
const mergedProps = mergeProps7(() => passwordInput2().getVisibilityTriggerProps(), props);
return <ark.button {...mergedProps} />;
};
// src/components/password-input/password-input.ts
var password_input_exports = {};
__export(password_input_exports, {
Context: () => PasswordInputContext,
Control: () => PasswordInputControl,
Indicator: () => PasswordInputIndicator,
Input: () => PasswordInputInput,
Label: () => PasswordInputLabel,
Root: () => PasswordInputRoot,
RootProvider: () => PasswordInputRootProvider,
VisibilityTrigger: () => PasswordInputVisibilityTrigger
});
export {
usePasswordInputContext,
PasswordInputContext,
PasswordInputControl,
PasswordInputIndicator,
PasswordInputInput,
PasswordInputLabel,
usePasswordInput,
PasswordInputRoot,
PasswordInputRootProvider,
PasswordInputVisibilityTrigger,
password_input_exports
};