@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
151 lines (144 loc) • 6.04 kB
JavaScript
import { useFieldContext } from './VJ2ZFW6U.js';
import { createSplitProps } from './ZMHI4GDJ.js';
import { ark } from './EPLBB4QN.js';
import { useEnvironmentContext } from './YO2MCGXO.js';
import { useLocaleContext } from './OKZ64GSY.js';
import { createContext } from './TROPIN4C.js';
import { runIfFn } from './DT73WLR4.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';
export { anatomy } 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 };