@ark-ui/solid
Version:
A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.
244 lines (218 loc) • 7.58 kB
JSX
import {
createSplitProps
} from "./6WEDGJKQ.jsx";
import {
ark
} from "./UFYZ7HLU.jsx";
import {
useLocaleContext
} from "./YUC6JE7K.jsx";
import {
useEnvironmentContext
} from "./E2L62MKC.jsx";
import {
createContext
} from "./TVCIHLER.jsx";
import {
runIfFn
} from "./KGOB2IMX.jsx";
import {
__export
} from "./7IUG3E2V.jsx";
// src/components/steps/steps-completed-content.tsx
import { mergeProps } from "@zag-js/solid";
// src/components/steps/use-steps-context.ts
var [StepsProvider, useStepsContext] = createContext({
hookName: "useStepsContext",
providerName: "<StepsProvider />"
});
// src/components/steps/steps-completed-content.tsx
var StepsCompletedContent = (props) => {
const steps2 = useStepsContext();
const mergedProps = mergeProps(() => steps2().getContentProps({ index: steps2().count }), props);
return <ark.div {...mergedProps} />;
};
// src/components/steps/steps-content.tsx
import { mergeProps as mergeProps2 } from "@zag-js/solid";
var StepsContent = (props) => {
const [itemProps, localProps] = createSplitProps()(props, ["index"]);
const steps2 = useStepsContext();
const mergedProps = mergeProps2(() => steps2().getContentProps(itemProps), localProps);
return <ark.div {...mergedProps} />;
};
// src/components/steps/steps-context.tsx
var StepsContext = (props) => {
const context = useStepsContext();
return props.children(context);
};
// src/components/steps/steps-indicator.tsx
import { mergeProps as mergeProps3 } from "@zag-js/solid";
// src/components/steps/use-steps-item-props-context.ts
var [StepsItemPropsProvider, useStepsItemPropsContext] = createContext({
hookName: "useStepsItemPropsContext",
providerName: "<StepsItemPropsProvider />"
});
// src/components/steps/steps-indicator.tsx
var StepsIndicator = (props) => {
const steps2 = useStepsContext();
const itemProps = useStepsItemPropsContext();
const mergedProps = mergeProps3(() => steps2().getIndicatorProps(itemProps), props);
return <ark.div {...mergedProps} />;
};
// src/components/steps/steps-item.tsx
import { mergeProps as mergeProps4 } from "@zag-js/solid";
import { createMemo } from "solid-js";
// src/components/steps/use-steps-item-context.ts
var [StepsItemProvider, useStepsItemContext] = createContext({
hookName: "useStepsItemContext",
providerName: "<StepsItem />"
});
// src/components/steps/steps-item.tsx
var StepsItem = (props) => {
const [itemProps, localProps] = createSplitProps()(props, ["index"]);
const steps2 = useStepsContext();
const mergedProps = mergeProps4(() => steps2().getItemProps(itemProps), localProps);
const itemState = createMemo(() => steps2().getItemState(itemProps));
return <StepsItemPropsProvider value={itemProps}>
<StepsItemProvider value={itemState}>
<ark.div {...mergedProps} />
</StepsItemProvider>
</StepsItemPropsProvider>;
};
// src/components/steps/steps-item-context.tsx
var StepsItemContext = (props) => {
return props.children(useStepsItemContext());
};
StepsItemContext.displayName = "StepsItemContext";
// src/components/steps/steps-list.tsx
import { mergeProps as mergeProps5 } from "@zag-js/solid";
var StepsList = (props) => {
const steps2 = useStepsContext();
const mergedProps = mergeProps5(() => steps2().getListProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/steps/steps-next-trigger.tsx
import { mergeProps as mergeProps6 } from "@zag-js/solid";
var StepsNextTrigger = (props) => {
const steps2 = useStepsContext();
const mergedProps = mergeProps6(() => steps2().getNextTriggerProps(), props);
return <ark.button {...mergedProps} />;
};
// src/components/steps/steps-prev-trigger.tsx
import { mergeProps as mergeProps7 } from "@zag-js/solid";
var StepsPrevTrigger = (props) => {
const steps2 = useStepsContext();
const mergedProps = mergeProps7(() => steps2().getPrevTriggerProps(), props);
return <ark.button {...mergedProps} />;
};
// src/components/steps/steps-progress.tsx
import { mergeProps as mergeProps8 } from "@zag-js/solid";
var StepsProgress = (props) => {
const steps2 = useStepsContext();
const mergedProps = mergeProps8(() => steps2().getProgressProps(), props);
return <ark.div {...mergedProps} />;
};
// src/components/steps/steps-root.tsx
import { mergeProps as mergeProps9 } from "@zag-js/solid";
// src/components/steps/use-steps.ts
import { normalizeProps, useMachine } from "@zag-js/solid";
import * as steps from "@zag-js/steps";
import { createMemo as createMemo2, createUniqueId } from "solid-js";
function useSteps(props) {
const id = createUniqueId();
const environment = useEnvironmentContext();
const locale = useLocaleContext();
const machineProps = createMemo2(() => ({
id,
dir: locale().dir,
getRootNode: environment().getRootNode,
...runIfFn(props)
}));
const service = useMachine(steps.machine, machineProps);
return createMemo2(() => steps.connect(service, normalizeProps));
}
// src/components/steps/steps-root.tsx
var StepsRoot = (props) => {
const [useStepsProps, localProps] = createSplitProps()(props, [
"defaultStep",
"id",
"ids",
"count",
"linear",
"onStepChange",
"onStepComplete",
"orientation",
"step"
]);
const steps2 = useSteps(useStepsProps);
const mergedProps = mergeProps9(() => steps2().getRootProps(), localProps);
return <StepsProvider value={steps2}>
<ark.div {...mergedProps} />
</StepsProvider>;
};
// src/components/steps/steps-root-provider.tsx
import { mergeProps as mergeProps10 } from "@zag-js/solid";
var StepsRootProvider = (props) => {
const [{ value: steps2 }, rootProps] = createSplitProps()(props, ["value"]);
const mergedProps = mergeProps10(() => steps2().getRootProps(), rootProps);
return <StepsProvider value={steps2}>
<ark.div {...mergedProps}>{props.children}</ark.div>
</StepsProvider>;
};
// src/components/steps/steps-separator.tsx
import { mergeProps as mergeProps11 } from "@zag-js/solid";
var StepsSeparator = (props) => {
const steps2 = useStepsContext();
const itemProps = useStepsItemPropsContext();
const mergedProps = mergeProps11(() => steps2().getSeparatorProps(itemProps), props);
return <ark.div {...mergedProps} />;
};
// src/components/steps/steps-trigger.tsx
import { mergeProps as mergeProps12 } from "@zag-js/solid";
var StepsTrigger = (props) => {
const steps2 = useStepsContext();
const itemProps = useStepsItemPropsContext();
const mergedProps = mergeProps12(() => steps2().getTriggerProps(itemProps), props);
return <ark.button {...mergedProps} />;
};
// src/components/steps/steps.anatomy.ts
import { anatomy } from "@zag-js/steps";
// src/components/steps/steps.ts
var steps_exports = {};
__export(steps_exports, {
CompletedContent: () => StepsCompletedContent,
Content: () => StepsContent,
Context: () => StepsContext,
Indicator: () => StepsIndicator,
Item: () => StepsItem,
ItemContext: () => StepsItemContext,
List: () => StepsList,
NextTrigger: () => StepsNextTrigger,
PrevTrigger: () => StepsPrevTrigger,
Progress: () => StepsProgress,
Root: () => StepsRoot,
RootProvider: () => StepsRootProvider,
Separator: () => StepsSeparator,
Trigger: () => StepsTrigger
});
export {
useStepsContext,
StepsCompletedContent,
StepsContent,
StepsContext,
StepsIndicator,
useStepsItemContext,
StepsItem,
StepsItemContext,
StepsList,
StepsNextTrigger,
StepsPrevTrigger,
StepsProgress,
useSteps,
StepsRoot,
StepsRootProvider,
StepsSeparator,
StepsTrigger,
anatomy,
steps_exports
};