@ark-ui/solid 1.1.0 → 1.2.0

package/source/switch/switch.jsx

@@ -5,7 +5,7 @@ import { runIfFn } from '../run-if-fn';
 import { SwitchProvider } from './switch-context';
 import { useSwitch } from './use-switch';
 export const Switch = (props) => {
-    const [switchProps, labelProps] = createSplitProps()(props, [
+    const [switchProps, localProps] = createSplitProps()(props, [
         'checked',
         'dir',
         'disabled',
@@ -21,7 +21,7 @@ export const Switch = (props) => {
         'value',
     ]);
     const api = useSwitch(switchProps);
-    const mergedProps = mergeProps(() => api().rootProps, labelProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
     const getChildren = () => runIfFn(props.children, api);
     return (<SwitchProvider value={api}>
       <ark.label {...mergedProps}>{getChildren()}</ark.label>

package/source/toast/create-toaster.jsx

@@ -2,8 +2,8 @@ import { mergeProps, normalizeProps, useActor } from '@zag-js/solid';
 import * as toast from '@zag-js/toast';
 import { Index, createEffect, createMemo, onCleanup } from 'solid-js';
 import { useEnvironmentContext } from '../environment';
-import { ark } from '../factory';
 import { ToastProvider } from './toast-context';
+import { ToastGroup } from './toast-group';
 export const createToaster = (props) => {
     const service = toast.group.machine({ id: '1', ...props }).start();
     const [state, send] = useActor(service);
@@ -15,11 +15,11 @@ export const createToaster = (props) => {
             onCleanup(() => service.stop());
         });
         const mergedProps = mergeProps(() => api().getGroupProps({ placement: props.placement }), toasterProps);
-        return (<ark.ol {...mergedProps}>
+        return (<ToastGroup {...mergedProps}>
         <Index each={api().toastsByPlacement[props.placement]}>
           {(toast) => <ToastProviderFactory service={toast()}/>}
         </Index>
-      </ark.ol>);
+      </ToastGroup>);
     };
     return [Toaster, api];
 };

package/source/toast/index.js

@@ -2,11 +2,13 @@ import { createToaster } from './create-toaster';
 import { Toast as ToastRoot } from './toast';
 import { ToastCloseTrigger } from './toast-close-trigger';
 import { ToastDescription } from './toast-description';
+import { ToastGroup } from './toast-group';
 import { ToastTitle } from './toast-title';
 const Toast = Object.assign(ToastRoot, {
     Root: ToastRoot,
-    Title: ToastTitle,
-    Description: ToastDescription,
     CloseTrigger: ToastCloseTrigger,
+    Description: ToastDescription,
+    Group: ToastGroup,
+    Title: ToastTitle,
 });
-export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastTitle };
+export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };

package/source/toast/toast-group.jsx

@@ -0,0 +1,4 @@
+import { ark } from '../factory';
+export const ToastGroup = (props) => {
+    return <ark.ol {...props}/>;
+};

package/types/file-upload/file-upload-item-preview-image.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLArkProps } from '../factory';
+export interface FileUploadItemPreviewImageProps extends HTMLArkProps<'img'> {
+}
+export declare const FileUploadItemPreviewImage: (props: FileUploadItemPreviewImageProps) => import("solid-js").JSX.Element;

package/types/file-upload/file-upload-item-preview.d.ts

@@ -1,4 +1,9 @@
 import { type HTMLArkProps } from '../factory';
-export interface FileUploadItemPreviewProps extends HTMLArkProps<'img'> {
+export interface FileUploadItemPreviewProps extends HTMLArkProps<'div'> {
+    /**
+     * The file type to match against. Matches all file types by default.
+     * @default '.*'
+     */
+    type?: string;
 }
 export declare const FileUploadItemPreview: (props: FileUploadItemPreviewProps) => import("solid-js").JSX.Element;

package/types/file-upload/index.d.ts

@@ -5,21 +5,23 @@ import { FileUploadItem, type FileUploadItemProps } from './file-upload-item';
 import { FileUploadItemDeleteTrigger, type FileUploadItemDeleteTriggerProps } from './file-upload-item-delete-trigger';
 import { FileUploadItemGroup, type FileUploadItemGroupProps } from './file-upload-item-group';
 import { FileUploadItemName, type FileUploadItemNameProps } from './file-upload-item-name';
-import { FileUploadItemPreview, type FileUploadItemPreviewProps } from './file-upload-item-preview';
+import { type FileUploadItemPreviewProps } from './file-upload-item-preview';
+import { FileUploadItemPreviewImage, type FileUploadItemPreviewImageProps } from './file-upload-item-preview-image';
 import { FileUploadItemSizeText, type FileUploadItemSizeTextProps } from './file-upload-item-size-text';
 import { FileUploadLabel, type FileUploadLabelProps } from './file-upload-label';
 import { FileUploadTrigger, type FileUploadTriggerProps } from './file-upload-trigger';
 declare const FileUpload: ((props: FileUploadProps) => import("solid-js").JSX.Element) & {
     Root: (props: FileUploadProps) => import("solid-js").JSX.Element;
     Dropzone: (props: FileUploadDropzoneProps) => import("solid-js").JSX.Element;
-    Label: (props: FileUploadLabelProps) => import("solid-js").JSX.Element;
-    Trigger: (props: FileUploadTriggerProps) => import("solid-js").JSX.Element;
-    ItemGroup: (props: FileUploadItemGroupProps) => import("solid-js").JSX.Element;
     Item: (props: FileUploadItemProps) => import("solid-js").JSX.Element;
+    ItemDeleteTrigger: (props: FileUploadItemDeleteTriggerProps) => import("solid-js").JSX.Element;
+    ItemGroup: (props: FileUploadItemGroupProps) => import("solid-js").JSX.Element;
     ItemName: (props: FileUploadItemNameProps) => import("solid-js").JSX.Element;
     ItemPreview: (props: FileUploadItemPreviewProps) => import("solid-js").JSX.Element;
+    ItemPreviewImage: (props: FileUploadItemPreviewImageProps) => import("solid-js").JSX.Element;
     ItemSizeText: (props: FileUploadItemSizeTextProps) => import("solid-js").JSX.Element;
-    ItemDeleteTrigger: (props: FileUploadItemDeleteTriggerProps) => import("solid-js").JSX.Element;
+    Label: (props: FileUploadLabelProps) => import("solid-js").JSX.Element;
+    Trigger: (props: FileUploadTriggerProps) => import("solid-js").JSX.Element;
 };
-export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
-export type { FileUploadContext, FileUploadDropzoneProps, FileUploadItemDeleteTriggerProps, FileUploadItemGroupProps, FileUploadItemNameProps, FileUploadItemPreviewProps, FileUploadItemProps, FileUploadItemSizeTextProps, FileUploadLabelProps, FileUploadProps, FileUploadTriggerProps, };
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
+export type { FileUploadContext, FileUploadDropzoneProps, FileUploadItemDeleteTriggerProps, FileUploadItemGroupProps, FileUploadItemNameProps, FileUploadItemPreviewImageProps, FileUploadItemPreviewProps, FileUploadItemProps, FileUploadItemSizeTextProps, FileUploadLabelProps, FileUploadProps, FileUploadTriggerProps, };

package/types/number-input/index.d.ts

@@ -2,8 +2,8 @@ import { type NumberInputProps } from './number-input';
 import { useNumberInputContext, type NumberInputContext } from './number-input-context';
 import { NumberInputControl, type NumberInputControlProps } from './number-input-control';
 import { NumberInputDecrementTrigger, type NumberInputDecrementTriggerProps } from './number-input-decrement-trigger';
-import { NumberInputInput, type NumberInputInputProps } from './number-input-field';
 import { NumberInputIncrementTrigger, type NumberInputIncrementTriggerProps } from './number-input-increment-trigger';
+import { NumberInputInput, type NumberInputInputProps } from './number-input-input';
 import { NumberInputLabel, type NumberInputLabelProps } from './number-input-label';
 import { NumberInputScrubber, type NumberInputScrubberProps } from './number-input-scrubber';
 declare const NumberInput: ((props: NumberInputProps) => import("solid-js").JSX.Element) & {

package/types/pin-input/index.d.ts

@@ -1,7 +1,7 @@
 import { type PinInputProps } from './pin-input';
 import { usePinInputContext, type PinInputContext } from './pin-input-context';
 import { PinInputControl, type PinInputControlProps } from './pin-input-control';
-import { PinInputInput, type PinInputInputProps } from './pin-input-field';
+import { PinInputInput, type PinInputInputProps } from './pin-input-input';
 import { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
 declare const PinInput: ((props: PinInputProps) => import("solid-js").JSX.Element) & {
     Root: (props: PinInputProps) => import("solid-js").JSX.Element;

package/types/radio-group/radio-group-item-context.d.ts

@@ -1,4 +1,4 @@
 import type { ItemProps } from '@zag-js/radio-group';
 export interface RadioGroupItemContext extends ItemProps {
 }
-export declare const RadioProvider: import("solid-js").ContextProviderComponent<RadioGroupItemContext>, useRadioGroupItemContext: () => RadioGroupItemContext;
+export declare const RadioGroupItemProvider: import("solid-js").ContextProviderComponent<RadioGroupItemContext>, useRadioGroupItemContext: () => RadioGroupItemContext;

package/types/radio-group/radio-group-item.d.ts

@@ -1,6 +1,9 @@
-import type { ItemProps } from '@zag-js/radio-group';
+import type { ItemProps, ItemState } from '@zag-js/radio-group';
+import type { JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export interface RadioGroupItemProps extends Assign<HTMLArkProps<'label'>, ItemProps> {
+export interface RadioGroupItemProps extends Assign<HTMLArkProps<'label'>, {
+    children?: ((state: ItemState) => JSX.Element) | JSX.Element;
+}>, ItemProps {
 }
-export declare const RadioGroupItem: (props: RadioGroupItemProps) => import("solid-js").JSX.Element;
+export declare const RadioGroupItem: (props: RadioGroupItemProps) => JSX.Element;

package/types/rating-group/rating-group-item-context.d.ts

@@ -1,5 +1,4 @@
-import { type ItemState } from '@zag-js/rating-group';
-import type { Accessor } from 'solid-js';
-export interface RatingGroupItemContext extends Accessor<ItemState> {
+import { type ItemProps } from '@zag-js/rating-group';
+export interface RatingGroupItemContext extends ItemProps {
 }
 export declare const RatingGroupItemProvider: import("solid-js").ContextProviderComponent<RatingGroupItemContext>, useRatingGroupItemContext: () => RatingGroupItemContext;

package/types/segment-group/segment-group-item-context.d.ts

@@ -1,15 +1,4 @@
-export interface ItemProps {
-    value: string;
-    disabled?: boolean;
-    invalid?: boolean;
+import type { ItemProps } from '@zag-js/radio-group';
+export interface SegmentGroupItemContext extends ItemProps {
 }
-export interface ItemState {
-    isInvalid: boolean;
-    isDisabled: boolean;
-    isChecked: boolean;
-    isFocused: boolean;
-    isHovered: boolean;
-    isActive: boolean;
-}
-export type SegmentGroupItemContext = ItemProps;
-export declare const SegmentProvider: import("solid-js").ContextProviderComponent<ItemProps>, useSegmentGroupItemContext: () => ItemProps;
+export declare const SegmentGroupItemProvider: import("solid-js").ContextProviderComponent<SegmentGroupItemContext>, useSegmentGroupItemContext: () => SegmentGroupItemContext;

package/types/segment-group/segment-group-item.d.ts

@@ -1,6 +1,10 @@
+import type { ItemState } from '@zag-js/radio-group';
+import type { JSX } from 'solid-js/jsx-runtime';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type SegmentGroupItemContext } from './segment-group-item-context';
-export interface SegmentGroupItemProps extends Assign<HTMLArkProps<'label'>, SegmentGroupItemContext> {
+export interface SegmentGroupItemProps extends Assign<HTMLArkProps<'label'>, {
+    children?: ((state: ItemState) => JSX.Element) | JSX.Element;
+}>, SegmentGroupItemContext {
 }
-export declare const SegmentGroupItem: (props: SegmentGroupItemProps) => import("solid-js").JSX.Element;
+export declare const SegmentGroupItem: (props: SegmentGroupItemProps) => JSX.Element;

package/types/toast/index.d.ts

@@ -2,12 +2,14 @@ import { createToaster, type CreateToasterProps, type CreateToasterReturn } from
 import { type ToastProps } from './toast';
 import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger';
 import { ToastDescription, type ToastDescriptionProps } from './toast-description';
+import { ToastGroup, type ToastGroupProps } from './toast-group';
 import { ToastTitle, type ToastTitleProps } from './toast-title';
 declare const Toast: ((props: ToastProps) => import("solid-js").JSX.Element) & {
     Root: (props: ToastProps) => import("solid-js").JSX.Element;
-    Title: (props: ToastTitleProps) => import("solid-js").JSX.Element;
-    Description: (props: ToastDescriptionProps) => import("solid-js").JSX.Element;
     CloseTrigger: (props: ToastCloseTriggerProps) => import("solid-js").JSX.Element;
+    Description: (props: ToastDescriptionProps) => import("solid-js").JSX.Element;
+    Group: (props: ToastGroupProps) => import("solid-js").JSX.Element;
+    Title: (props: ToastTitleProps) => import("solid-js").JSX.Element;
 };
-export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastTitle };
-export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastProps, ToastTitleProps, };
+export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };
+export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastProps, ToastTitleProps, };

package/types/toast/toast-group.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLArkProps } from '../factory';
+export interface ToastGroupProps extends HTMLArkProps<'ol'> {
+}
+export declare const ToastGroup: (props: ToastGroupProps) => import("solid-js").JSX.Element;