UNPKG

@ark-ui/solid

Version:

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

181 lines (167 loc) 5.12 kB
import { PresenceProvider, usePresence } from "./2P5Y3YCK.jsx"; import { composeRefs } from "./PT2CJE3O.jsx"; import { RenderStrategyProvider, splitRenderStrategyProps, useRenderStrategyContext } from "./VNMGX67M.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/tabs/tab-content.tsx import { mergeProps } from "@zag-js/solid"; import { Show } from "solid-js"; // src/components/tabs/use-tabs-context.ts var [TabsProvider, useTabsContext] = createContext({ hookName: "useTabsContext", providerName: "<TabsProvider />" }); // src/components/tabs/tab-content.tsx var TabContent = (props) => { const [contentProps, localProps] = createSplitProps()(props, ["value"]); const api = useTabsContext(); const renderStrategyProps = useRenderStrategyContext(); const presenceApi = usePresence( mergeProps(renderStrategyProps, () => ({ present: api().value === contentProps.value, immediate: true })) ); const mergedProps = mergeProps( () => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps ); return <PresenceProvider value={presenceApi}> <Show when={!presenceApi().unmounted}> <ark.div {...mergedProps} ref={composeRefs(presenceApi().ref, props.ref)} /> </Show> </PresenceProvider>; }; // src/components/tabs/tab-indicator.tsx import { mergeProps as mergeProps2 } from "@zag-js/solid"; var TabIndicator = (props) => { const api = useTabsContext(); const mergedProps = mergeProps2(() => api().getIndicatorProps(), props); return <ark.div {...mergedProps} />; }; // src/components/tabs/tab-list.tsx import { mergeProps as mergeProps3 } from "@zag-js/solid"; var TabList = (props) => { const api = useTabsContext(); const mergedProps = mergeProps3(() => api().getListProps(), props); return <ark.div {...mergedProps} />; }; // src/components/tabs/tab-trigger.tsx import { mergeProps as mergeProps4 } from "@zag-js/solid"; var TabTrigger = (props) => { const [triggerProps, localProps] = createSplitProps()(props, ["disabled", "value"]); const api = useTabsContext(); const mergedProps = mergeProps4(() => api().getTriggerProps(triggerProps), localProps); return <ark.button {...mergedProps} />; }; // src/components/tabs/tabs-context.tsx var TabsContext = (props) => props.children(useTabsContext()); // src/components/tabs/tabs-root.tsx import { mergeProps as mergeProps5 } from "@zag-js/solid"; // src/components/tabs/use-tabs.ts import { normalizeProps, useMachine } from "@zag-js/solid"; import * as tabs from "@zag-js/tabs"; import { createMemo, createUniqueId } from "solid-js"; var useTabs = (props) => { const id = createUniqueId(); const locale = useLocaleContext(); const environment = useEnvironmentContext(); const machineProps = createMemo(() => ({ id, dir: locale().dir, getRootNode: environment().getRootNode, ...runIfFn(props) })); const service = useMachine(tabs.machine, machineProps); return createMemo(() => tabs.connect(service, normalizeProps)); }; // src/components/tabs/tabs-root.tsx var TabsRoot = (props) => { const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props); const [useTabsProps, restProps] = createSplitProps()(tabsProps, [ "activationMode", "composite", "defaultValue", "deselectable", "id", "ids", "loopFocus", "navigate", "onFocusChange", "onValueChange", "orientation", "translations", "value" ]); const api = useTabs(useTabsProps); const mergedProps = mergeProps5(() => api().getRootProps(), restProps); return <TabsProvider value={api}> <RenderStrategyProvider value={renderStrategyProps}> <ark.div {...mergedProps} /> </RenderStrategyProvider> </TabsProvider>; }; // src/components/tabs/tabs-root-provider.tsx import { mergeProps as mergeProps6 } from "@zag-js/solid"; var TabsRootProvider = (props) => { const [renderStrategyProps, tabsProps] = splitRenderStrategyProps(props); const [{ value: tabs2 }, localprops] = createSplitProps()(tabsProps, ["value"]); const mergedProps = mergeProps6(() => tabs2().getRootProps(), localprops); return <TabsProvider value={tabs2}> <RenderStrategyProvider value={renderStrategyProps}> <ark.div {...mergedProps} /> </RenderStrategyProvider> </TabsProvider>; }; // src/components/tabs/tabs.ts var tabs_exports = {}; __export(tabs_exports, { Content: () => TabContent, Context: () => TabsContext, Indicator: () => TabIndicator, List: () => TabList, Root: () => TabsRoot, RootProvider: () => TabsRootProvider, Trigger: () => TabTrigger }); export { useTabsContext, TabContent, TabIndicator, TabList, TabTrigger, TabsContext, useTabs, TabsRoot, TabsRootProvider, tabs_exports };