@ark-ui/solid 2.1.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",

package/source/clipboard/clipboard-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [ClipboardProvider, useClipboardContext] = createContext({
+    hookName: 'useClipboardContext',
+    providerName: '<ClipboardProvider />',
+});

package/source/clipboard/clipboard-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardControl = (props) => {
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/clipboard/clipboard-indicator.jsx

@@ -0,0 +1,16 @@
+import { mergeProps } from '@zag-js/solid';
+import { Show, children } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardIndicator = (props) => {
+    const [indicatorProps, localProps] = createSplitProps()(props, ['copied']);
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(api().getIndicatorProps({ copied: api().isCopied }), localProps);
+    const getChildren = children(() => localProps.children);
+    return (<ark.div {...mergedProps}>
+      <Show when={api().isCopied} fallback={getChildren()}>
+        {indicatorProps.copied}
+      </Show>
+    </ark.div>);
+};

package/source/clipboard/clipboard-input.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardInput = (props) => {
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(() => api().inputProps, props);
+    return <ark.input {...mergedProps}/>;
+};

package/source/clipboard/clipboard-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardLabel = (props) => {
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/clipboard/clipboard-root.jsx

@@ -0,0 +1,22 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { ClipboardProvider } from './clipboard-context';
+import { useClipboard } from './use-clipboard';
+export const ClipboardRoot = (props) => {
+    const [useClipboardProps, localProps] = createSplitProps()(props, [
+        'getRootNode',
+        'id',
+        'ids',
+        'value',
+        'timeout',
+        'onCopyStatusChange',
+    ]);
+    const api = useClipboard(useClipboardProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<ClipboardProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </ClipboardProvider>);
+};

package/source/clipboard/clipboard-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useClipboardContext } from './clipboard-context';
+export const ClipboardTrigger = (props) => {
+    const api = useClipboardContext();
+    const mergedProps = mergeProps(() => api().triggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/clipboard/clipboard.jsx

@@ -0,0 +1,7 @@
+import { ClipboardControl as Control } from './clipboard-control';
+import { ClipboardIndicator as Indicator } from './clipboard-indicator';
+import { ClipboardInput as Input } from './clipboard-input';
+import { ClipboardLabel as Label } from './clipboard-label';
+import { ClipboardRoot as Root } from './clipboard-root';
+import { ClipboardTrigger as Trigger } from './clipboard-trigger';
+export { Control, Indicator, Input, Label, Root, Trigger };

package/source/clipboard/index.js

@@ -0,0 +1,9 @@
+import { useClipboardContext } from './clipboard-context';
+import { ClipboardControl } from './clipboard-control';
+import { ClipboardIndicator } from './clipboard-indicator';
+import { ClipboardInput } from './clipboard-input';
+import { ClipboardLabel } from './clipboard-label';
+import { ClipboardRoot } from './clipboard-root';
+import { ClipboardTrigger } from './clipboard-trigger';
+export * as Clipboard from './clipboard';
+export { ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, useClipboardContext, };

package/source/clipboard/use-clipboard.jsx

@@ -0,0 +1,10 @@
+import * as clipboard from '@zag-js/clipboard';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useClipboard = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(clipboard.machine(context), { context });
+    return createMemo(() => clipboard.connect(state, send, normalizeProps));
+};

package/source/index.jsx

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './avatar';
 export * from './carousel';
 export * from './checkbox';
+export * from './clipboard';
 export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';
@@ -11,6 +12,7 @@ export * from './environment';
 export * from './factory';
 export * from './file-upload';
 export * from './hover-card';
+export * from './locale';
 export * from './menu';
 export * from './number-input';
 export * from './pagination';

package/source/locale/index.js

@@ -0,0 +1,2 @@
+export { LocaleProvider } from './locale';
+export { useLocaleContext } from './locale-context';

package/source/locale/locale-context.jsx

@@ -0,0 +1,7 @@
+import { createContext } from '../create-context';
+export const [LocaleContextProvider, useLocaleContext] = createContext({
+    hookName: 'useEnvironmentContext',
+    providerName: '<EnvironmentProvider />',
+    strict: false,
+    defaultValue: () => ({ dir: 'ltr', locale: 'en-US' }),
+});

package/source/locale/locale.jsx

@@ -0,0 +1,24 @@
+import { isRTL, trackLocale } from '@zag-js/i18n-utils';
+import { createEffect, createMemo, createSignal, onCleanup, splitProps, } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+import { LocaleContextProvider } from './locale-context';
+export const LocaleProvider = (props) => {
+    const [localeProps, restProps] = splitProps(props, ['locale', 'defaultLocale']);
+    const [locale, setLocale] = createSignal(localeProps.defaultLocale || localeProps.locale || 'en-US');
+    const getRootNode = useEnvironmentContext();
+    createEffect(() => {
+        const cleanup = trackLocale({
+            locale: localeProps.locale,
+            getRootNode,
+            onLocaleChange(locale) {
+                setLocale(locale.locale);
+            },
+        });
+        onCleanup(cleanup);
+    });
+    const context = createMemo(() => ({
+        locale: locale(),
+        dir: isRTL(locale()) ? 'rtl' : 'ltr',
+    }));
+    return <LocaleContextProvider value={context}>{restProps.children}</LocaleContextProvider>;
+};

package/types/clipboard/clipboard-context.d.ts

@@ -0,0 +1,4 @@
+import { type UseClipboardReturn } from './use-clipboard';
+export interface ClipboardContext extends UseClipboardReturn {
+}
+export declare const ClipboardProvider: import("solid-js").ContextProviderComponent<ClipboardContext>, useClipboardContext: () => ClipboardContext;

package/types/clipboard/clipboard-control.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ClipboardControlProps extends HTMLArkProps<'div'> {
+}
+export declare const ClipboardControl: ArkComponent<'div'>;

package/types/clipboard/clipboard-indicator.d.ts

@@ -0,0 +1,10 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+interface ElementProps {
+    copied?: JSX.Element;
+}
+export interface ClipboardIndicatorProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const ClipboardIndicator: ArkComponent<'div', ElementProps>;
+export {};

package/types/clipboard/clipboard-input.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ClipboardInputProps extends HTMLArkProps<'input'> {
+}
+export declare const ClipboardInput: ArkComponent<'input'>;

package/types/clipboard/clipboard-label.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ClipboardLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const ClipboardLabel: ArkComponent<'label'>;

package/types/clipboard/clipboard-root.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseClipboardProps, type UseClipboardReturn } from './use-clipboard';
+interface ElementProps extends UseClipboardProps {
+    children?: JSX.Element | ((api: UseClipboardReturn) => JSX.Element);
+}
+export interface ClipboardRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const ClipboardRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/clipboard/clipboard-trigger.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ClipboardTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const ClipboardTrigger: ArkComponent<'button'>;

package/types/clipboard/clipboard.d.ts

@@ -0,0 +1,7 @@
+import { ClipboardControl as Control } from './clipboard-control';
+import { ClipboardIndicator as Indicator } from './clipboard-indicator';
+import { ClipboardInput as Input } from './clipboard-input';
+import { ClipboardLabel as Label } from './clipboard-label';
+import { ClipboardRoot as Root } from './clipboard-root';
+import { ClipboardTrigger as Trigger } from './clipboard-trigger';
+export { Control, Indicator, Input, Label, Root, Trigger };

package/types/clipboard/index.d.ts

@@ -0,0 +1,11 @@
+import { type CopyStatusDetails as ClipboardCopyStatusDetails } from '@zag-js/clipboard';
+import { useClipboardContext, type ClipboardContext } from './clipboard-context';
+import { ClipboardControl, type ClipboardControlProps } from './clipboard-control';
+import { ClipboardIndicator, type ClipboardIndicatorProps } from './clipboard-indicator';
+import { ClipboardInput, type ClipboardInputProps } from './clipboard-input';
+import { ClipboardLabel, type ClipboardLabelProps } from './clipboard-label';
+import { ClipboardRoot, type ClipboardRootProps } from './clipboard-root';
+import { ClipboardTrigger, type ClipboardTriggerProps } from './clipboard-trigger';
+export * as Clipboard from './clipboard';
+export { ClipboardControl, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardRoot, ClipboardTrigger, useClipboardContext, };
+export type { ClipboardContext, ClipboardControlProps, ClipboardCopyStatusDetails, ClipboardIndicatorProps, ClipboardInputProps, ClipboardLabelProps, ClipboardRootProps, ClipboardTriggerProps, };

package/types/clipboard/use-clipboard.d.ts

@@ -0,0 +1,9 @@
+import * as clipboard from '@zag-js/clipboard';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
+import { type Optional } from '../types';
+export interface UseClipboardProps extends Optional<clipboard.Context, 'id'> {
+}
+export interface UseClipboardReturn extends Accessor<clipboard.Api<PropTypes>> {
+}
+export declare const useClipboard: (props: UseClipboardProps) => UseClipboardReturn;

package/types/index.d.ts

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './avatar';
 export * from './carousel';
 export * from './checkbox';
+export * from './clipboard';
 export * from './color-picker';
 export * from './combobox';
 export * from './date-picker';
@@ -11,6 +12,7 @@ export * from './environment';
 export * from './factory';
 export * from './file-upload';
 export * from './hover-card';
+export * from './locale';
 export * from './menu';
 export * from './number-input';
 export * from './pagination';

package/types/locale/index.d.ts

@@ -0,0 +1,2 @@
+export { LocaleProvider, type LocaleProviderProps } from './locale';
+export { useLocaleContext, type LocaleContext } from './locale-context';

package/types/locale/locale-context.d.ts

@@ -0,0 +1,5 @@
+import { type Locale } from '@zag-js/i18n-utils';
+import type { Accessor } from 'solid-js';
+export interface LocaleContext extends Locale {
+}
+export declare const LocaleContextProvider: import("solid-js").ContextProviderComponent<Accessor<LocaleContext>>, useLocaleContext: () => Accessor<LocaleContext>;

package/types/locale/locale.d.ts

@@ -0,0 +1,9 @@
+import { type LocaleOptions } from '@zag-js/i18n-utils';
+import { type ParentProps } from 'solid-js';
+export interface LocaleProviderProps extends LocaleOptions, ParentProps {
+    /**
+     * The default locale to use if no locale is provided via props.
+     */
+    defaultLocale?: string;
+}
+export declare const LocaleProvider: (props: LocaleProviderProps) => import("solid-js").JSX.Element;