UNPKG

@ark-ui/solid

Version:

A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.

150 lines (143 loc) 5.99 kB
import { useFieldContext } from './GBGTOFYC.js'; import { createSplitProps } from './ZMHI4GDJ.js'; import { ark } from './EPLBB4QN.js'; import { useEnvironmentContext } from './5QLLQM7E.js'; import { useLocaleContext } from './RVOPDSQY.js'; import { runIfFn } from './DT73WLR4.js'; import { createContext } from './THN5C4U6.js'; import { __export } from './ESLJRKWD.js'; import { createComponent, mergeProps as mergeProps$1, template, spread } from 'solid-js/web'; import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid'; import * as signaturePad from '@zag-js/signature-pad'; import { For, Show, createUniqueId, createMemo } from 'solid-js'; // src/components/signature-pad/use-signature-pad-context.ts var [SignaturePadProvider, useSignaturePadContext] = createContext({ hookName: "useSignaturePadContext", providerName: "<SignaturePadProvider />" }); // src/components/signature-pad/signature-pad-clear-trigger.tsx var SignaturePadClearTrigger = (props) => { const signaturePad2 = useSignaturePadContext(); const mergedProps = mergeProps(() => signaturePad2().getClearTriggerProps(), props); return createComponent(ark.button, mergedProps); }; // src/components/signature-pad/signature-pad-context.tsx var SignaturePadContext = (props) => props.children(useSignaturePadContext()); var SignaturePadControl = (props) => { const signaturePad2 = useSignaturePadContext(); const mergedProps = mergeProps(() => signaturePad2().getControlProps(), props); return createComponent(ark.div, mergedProps); }; var SignaturePadGuide = (props) => { const signaturePad2 = useSignaturePadContext(); const mergedProps = mergeProps(() => signaturePad2().getGuideProps(), props); return createComponent(ark.div, mergedProps); }; var SignaturePadHiddenInput = (props) => { const [hiddenInputProps, localProps] = createSplitProps()(props, ["value"]); const signaturePad2 = useSignaturePadContext(); const mergedProps = mergeProps(() => signaturePad2().getHiddenInputProps(hiddenInputProps), localProps); const field = useFieldContext(); return createComponent(ark.input, mergeProps$1({ get ["aria-describedby"]() { return field?.().ariaDescribedby; } }, mergedProps)); }; var SignaturePadLabel = (props) => { const signaturePad2 = useSignaturePadContext(); const mergedProps = mergeProps(() => signaturePad2().getLabelProps(), props); return createComponent(ark.label, mergedProps); }; var useSignaturePad = (props) => { const id = createUniqueId(); const locale = useLocaleContext(); const environment = useEnvironmentContext(); const field = useFieldContext(); const machineProps = createMemo(() => ({ id, ids: { label: field?.().ids.label, hiddenInput: field?.().ids.control }, disabled: field?.().disabled, readOnly: field?.().readOnly, required: field?.().required, dir: locale().dir, getRootNode: environment().getRootNode, ...runIfFn(props) })); const service = useMachine(signaturePad.machine, machineProps); return createMemo(() => signaturePad.connect(service, normalizeProps)); }; // src/components/signature-pad/signature-pad-root.tsx var SignaturePadRoot = (props) => { const [useSignaturePadProps, localProps] = createSplitProps()(props, ["id", "ids", "defaultPaths", "drawing", "disabled", "readOnly", "name", "onDraw", "onDrawEnd", "paths", "readOnly", "required", "translations"]); const signaturePad2 = useSignaturePad(useSignaturePadProps); const mergedProps = mergeProps(() => signaturePad2().getRootProps(), localProps); return createComponent(SignaturePadProvider, { value: signaturePad2, get children() { return createComponent(ark.div, mergedProps); } }); }; var SignaturePadRootProvider = (props) => { const [{ value: signaturePad2 }, localProps] = createSplitProps()(props, ["value"]); const mergedProps = mergeProps(() => signaturePad2().getRootProps(), localProps); return createComponent(SignaturePadProvider, { value: signaturePad2, get children() { return createComponent(ark.div, mergedProps); } }); }; var _tmpl$ = /* @__PURE__ */ template(`<title>Signature`); var _tmpl$2 = /* @__PURE__ */ template(`<svg><path></svg>`, false, true, false); var SignaturePadSegment = (props) => { const signaturePad2 = useSignaturePadContext(); const mergedProps = mergeProps(() => signaturePad2().getSegmentProps(), props); return createComponent(ark.svg, mergeProps$1(mergedProps, { get children() { return [_tmpl$(), createComponent(For, { get each() { return signaturePad2().paths; }, children: (path) => (() => { var _el$3 = _tmpl$2(); spread(_el$3, mergeProps$1(() => signaturePad2().getSegmentPathProps({ path })), true, false); return _el$3; })() }), createComponent(Show, { get when() { return signaturePad2().currentPath; }, get children() { var _el$2 = _tmpl$2(); spread(_el$2, mergeProps$1(() => signaturePad2().getSegmentPathProps({ path: signaturePad2().currentPath })), true, false); return _el$2; } })]; } })); }; // src/components/signature-pad/signature-pad.ts var signature_pad_exports = {}; __export(signature_pad_exports, { ClearTrigger: () => SignaturePadClearTrigger, Context: () => SignaturePadContext, Control: () => SignaturePadControl, Guide: () => SignaturePadGuide, HiddenInput: () => SignaturePadHiddenInput, Label: () => SignaturePadLabel, Root: () => SignaturePadRoot, RootProvider: () => SignaturePadRootProvider, Segment: () => SignaturePadSegment }); export { SignaturePadClearTrigger, SignaturePadContext, SignaturePadControl, SignaturePadGuide, SignaturePadHiddenInput, SignaturePadLabel, SignaturePadRoot, SignaturePadRootProvider, SignaturePadSegment, signature_pad_exports, useSignaturePad, useSignaturePadContext };