diff --git a/.changeset/react-create-toaster-generic.md b/.changeset/react-create-toaster-generic.md new file mode 100644 index 0000000000..2fa8fcd99a --- /dev/null +++ b/.changeset/react-create-toaster-generic.md @@ -0,0 +1,5 @@ +--- +'@ark-ui/react': patch +--- + +Exposed the toast content generic on `createToaster` so `CreateToasterReturn` can type custom toast data. diff --git a/.changeset/react-steps-root-provider.md b/.changeset/react-steps-root-provider.md new file mode 100644 index 0000000000..5b6cf86a33 --- /dev/null +++ b/.changeset/react-steps-root-provider.md @@ -0,0 +1,5 @@ +--- +'@ark-ui/react': patch +--- + +Fixed Steps `RootProvider` rendering children twice via both `mergedProps` and explicit `{props.children}`. diff --git a/.changeset/solid-create-toaster-generic.md b/.changeset/solid-create-toaster-generic.md new file mode 100644 index 0000000000..ab5b2d80cb --- /dev/null +++ b/.changeset/solid-create-toaster-generic.md @@ -0,0 +1,5 @@ +--- +'@ark-ui/solid': patch +--- + +Exposed the toast content generic on `createToaster` so `CreateToasterReturn` can type custom toast data. diff --git a/.changeset/solid-scroll-area-root-provider.md b/.changeset/solid-scroll-area-root-provider.md new file mode 100644 index 0000000000..e81073da80 --- /dev/null +++ b/.changeset/solid-scroll-area-root-provider.md @@ -0,0 +1,8 @@ +--- +'@ark-ui/solid': patch +--- + +- **Scroll Area**: Fixed `RootProvider` throwing `useScrollAreaContext returned undefined` by evaluating children outside the provider, and merge `getRootProps()` onto the root element. +- **Password Input**: Fixed `RootProvider` spreading the machine `value` onto the root DOM element. +- **Steps**: Fixed `RootProvider` rendering children twice via both `mergedProps` and explicit `{props.children}`. +- **Marquee**: Fixed `Content` merging `children` into every cloned content element's props. diff --git a/.changeset/svelte-create-toaster-generic.md b/.changeset/svelte-create-toaster-generic.md new file mode 100644 index 0000000000..663f489588 --- /dev/null +++ b/.changeset/svelte-create-toaster-generic.md @@ -0,0 +1,5 @@ +--- +'@ark-ui/svelte': patch +--- + +Exposed the toast content generic on `createToaster` so `CreateToasterReturn` can type custom toast data. diff --git a/.changeset/svelte-scroll-area-root-provider.md b/.changeset/svelte-scroll-area-root-provider.md new file mode 100644 index 0000000000..32a1f19b7e --- /dev/null +++ b/.changeset/svelte-scroll-area-root-provider.md @@ -0,0 +1,7 @@ +--- +'@ark-ui/svelte': patch +--- + +- **Scroll Area**: Fixed `RootProvider` not merging `getRootProps()` onto the root element. +- **Password Input**: Fixed `RootProvider` spreading the machine `value` onto the root DOM element and rendering children twice. +- **Json Tree View**: Fixed `RootProvider` not stripping `options` from `value` before forwarding to `TreeView.RootProvider`, and rendering children twice. diff --git a/.changeset/vue-create-toaster-generic.md b/.changeset/vue-create-toaster-generic.md new file mode 100644 index 0000000000..07bde2684b --- /dev/null +++ b/.changeset/vue-create-toaster-generic.md @@ -0,0 +1,5 @@ +--- +'@ark-ui/vue': patch +--- + +Exposed the toast content generic on `createToaster` so `CreateToasterReturn` can type custom toast data. diff --git a/.changeset/vue-json-tree-view-root-provider.md b/.changeset/vue-json-tree-view-root-provider.md new file mode 100644 index 0000000000..a61c4ea68a --- /dev/null +++ b/.changeset/vue-json-tree-view-root-provider.md @@ -0,0 +1,5 @@ +--- +'@ark-ui/vue': patch +--- + +Fixed JsonTreeView `RootProvider` not forwarding root HTML props (such as `class` and `asChild`) to `TreeView.RootProvider`. diff --git a/packages/react/src/components/steps/steps-root-provider.tsx b/packages/react/src/components/steps/steps-root-provider.tsx index 8b466b0921..d1e4cadec7 100644 --- a/packages/react/src/components/steps/steps-root-provider.tsx +++ b/packages/react/src/components/steps/steps-root-provider.tsx @@ -22,9 +22,7 @@ export const StepsRootProvider = forwardRef - - {props.children} - + ) }) diff --git a/packages/react/src/components/toast/create-toaster.tsx b/packages/react/src/components/toast/create-toaster.tsx index cff35deee6..172f697252 100644 --- a/packages/react/src/components/toast/create-toaster.tsx +++ b/packages/react/src/components/toast/create-toaster.tsx @@ -1,11 +1,12 @@ 'use client' import * as toast from '@zag-js/toast' +import type { ReactNode } from 'react' export interface CreateToasterProps extends toast.StoreProps {} -export interface CreateToasterReturn extends toast.Store {} +export type CreateToasterReturn = toast.Store -export const createToaster = (props: toast.StoreProps): toast.Store => { +export const createToaster = (props: CreateToasterProps): CreateToasterReturn => { return toast.createStore(props) } diff --git a/packages/react/src/components/toast/toaster.tsx b/packages/react/src/components/toast/toaster.tsx index 97d4f23515..97a92d6329 100644 --- a/packages/react/src/components/toast/toaster.tsx +++ b/packages/react/src/components/toast/toaster.tsx @@ -12,7 +12,7 @@ import { ToastProvider } from './use-toast-context.ts' export type ToastOptions = toast.Options export interface ToasterBaseProps extends PolymorphicProps, Omit { - toaster: CreateToasterReturn + toaster: CreateToasterReturn children: (toast: ToastOptions) => ReactNode } diff --git a/packages/solid/src/components/marquee/marquee-content.tsx b/packages/solid/src/components/marquee/marquee-content.tsx index 876c582441..49582667cb 100644 --- a/packages/solid/src/components/marquee/marquee-content.tsx +++ b/packages/solid/src/components/marquee/marquee-content.tsx @@ -1,19 +1,22 @@ import { mergeProps } from '@zag-js/solid' -import { type FlowComponent, For } from 'solid-js' +import { type JSX, For, splitProps } from 'solid-js' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' import { useMarqueeContext } from './use-marquee-context.ts' -export interface MarqueeContentBaseProps extends PolymorphicProps<'div'> {} +export interface MarqueeContentBaseProps extends PolymorphicProps<'div'> { + children?: JSX.Element +} export interface MarqueeContentProps extends HTMLProps<'div'>, MarqueeContentBaseProps {} -export const MarqueeContent: FlowComponent = (props) => { +export const MarqueeContent = (props: MarqueeContentProps) => { + const [localProps, restProps] = splitProps(props, ['children']) const context = useMarqueeContext() return ( {(_, index) => { - const mergedProps = mergeProps(() => context().getContentProps({ index: index() }), props) - return {props.children} + const mergedProps = mergeProps(() => context().getContentProps({ index: index() }), restProps) + return {localProps.children} }} ) diff --git a/packages/solid/src/components/password-input/password-input-root-provider.tsx b/packages/solid/src/components/password-input/password-input-root-provider.tsx index 6cdbc7d605..f267b9d3a3 100644 --- a/packages/solid/src/components/password-input/password-input-root-provider.tsx +++ b/packages/solid/src/components/password-input/password-input-root-provider.tsx @@ -1,18 +1,23 @@ import { mergeProps } from '@zag-js/solid' -import type { JSX } from 'solid-js' +import { createSplitProps } from '../../utils/create-split-props.ts' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { PasswordInputProvider, type UsePasswordInputContext } from './use-password-input-context.ts' +import type { UsePasswordInputReturn } from './use-password-input.ts' +import { PasswordInputProvider } from './use-password-input-context.ts' -export interface PasswordInputRootProviderBaseProps extends PolymorphicProps<'div'> { - value: UsePasswordInputContext - children?: JSX.Element +interface RootProviderProps { + value: UsePasswordInputReturn } -export interface PasswordInputRootProviderProps extends HTMLProps<'div'>, PasswordInputRootProviderBaseProps {} + +export interface PasswordInputRootProviderBaseProps extends PolymorphicProps<'div'> {} +export interface PasswordInputRootProviderProps + extends HTMLProps<'div'>, RootProviderProps, PasswordInputRootProviderBaseProps {} export const PasswordInputRootProvider = (props: PasswordInputRootProviderProps) => { - const mergedProps = mergeProps(() => props.value().getRootProps(), props) + const [{ value: passwordInput }, localProps] = createSplitProps()(props, ['value']) + const mergedProps = mergeProps(() => passwordInput().getRootProps(), localProps) + return ( - + ) diff --git a/packages/solid/src/components/scroll-area/scroll-area-root-provider.tsx b/packages/solid/src/components/scroll-area/scroll-area-root-provider.tsx index 75091b492c..4713bc99cc 100644 --- a/packages/solid/src/components/scroll-area/scroll-area-root-provider.tsx +++ b/packages/solid/src/components/scroll-area/scroll-area-root-provider.tsx @@ -1,17 +1,24 @@ -import type { Assign } from '../../types.ts' +import { mergeProps } from '@zag-js/solid' +import { createSplitProps } from '../../utils/create-split-props.ts' import { type HTMLProps, type PolymorphicProps, ark } from '../factory.tsx' -import { type UseScrollAreaContext, ScrollAreaProvider } from './use-scroll-area-context.ts' +import type { UseScrollAreaReturn } from './use-scroll-area.ts' +import { ScrollAreaProvider } from './use-scroll-area-context.ts' -export interface ScrollAreaRootProviderBaseProps extends PolymorphicProps<'div'> { - value: UseScrollAreaContext +interface RootProviderProps { + value: UseScrollAreaReturn } -export interface ScrollAreaRootProviderProps extends Assign, ScrollAreaRootProviderBaseProps> {} + +export interface ScrollAreaRootProviderBaseProps extends PolymorphicProps<'div'> {} +export interface ScrollAreaRootProviderProps + extends HTMLProps<'div'>, RootProviderProps, ScrollAreaRootProviderBaseProps {} export const ScrollAreaRootProvider = (props: ScrollAreaRootProviderProps) => { - const { value, children, ...localProps } = props + const [{ value: scrollArea }, localProps] = createSplitProps()(props, ['value']) + const mergedProps = mergeProps(() => scrollArea().getRootProps(), localProps) + return ( - - {children} + + ) } diff --git a/packages/solid/src/components/steps/steps-root-provider.tsx b/packages/solid/src/components/steps/steps-root-provider.tsx index 96873316fa..036ed6554e 100644 --- a/packages/solid/src/components/steps/steps-root-provider.tsx +++ b/packages/solid/src/components/steps/steps-root-provider.tsx @@ -17,7 +17,7 @@ export const StepsRootProvider = (props: StepsRootProviderProps) => { return ( - {props.children} + ) } diff --git a/packages/solid/src/components/toast/create-toaster.tsx b/packages/solid/src/components/toast/create-toaster.tsx index 510189e16e..c0e48a37e4 100644 --- a/packages/solid/src/components/toast/create-toaster.tsx +++ b/packages/solid/src/components/toast/create-toaster.tsx @@ -5,8 +5,8 @@ export interface CreateToasterProps extends Partial { placement: toast.Placement } -export interface CreateToasterReturn extends toast.Store {} +export type CreateToasterReturn = toast.Store -export const createToaster = (props: CreateToasterProps): CreateToasterReturn => { +export const createToaster = (props: CreateToasterProps): CreateToasterReturn => { return toast.createStore(props) } diff --git a/packages/solid/src/components/toast/toaster.tsx b/packages/solid/src/components/toast/toaster.tsx index ae9f854dad..fa7e8c0fff 100644 --- a/packages/solid/src/components/toast/toaster.tsx +++ b/packages/solid/src/components/toast/toaster.tsx @@ -10,7 +10,7 @@ import { ToastProvider } from './use-toast-context.ts' export type ToastOptions = toast.Options export interface ToasterBaseProps extends PolymorphicProps<'div'>, Omit { - toaster: CreateToasterReturn + toaster: CreateToasterReturn children: (toast: Accessor) => JSX.Element } export interface ToasterProps extends Assign, ToasterBaseProps> {} diff --git a/packages/svelte/src/lib/components/json-tree-view/examples/root-provider.svelte b/packages/svelte/src/lib/components/json-tree-view/examples/root-provider.svelte index 5d5b33b0ca..719466ffc0 100644 --- a/packages/svelte/src/lib/components/json-tree-view/examples/root-provider.svelte +++ b/packages/svelte/src/lib/components/json-tree-view/examples/root-provider.svelte @@ -3,7 +3,9 @@ import { ChevronRightIcon } from 'lucide-svelte' import styles from 'styles/json-tree-view.module.css' + const id = $props.id() const jsonTreeView = useJsonTreeView({ + id, defaultExpandedDepth: 1, data: { name: 'John Doe', diff --git a/packages/svelte/src/lib/components/json-tree-view/json-tree-view-root-provider.svelte b/packages/svelte/src/lib/components/json-tree-view/json-tree-view-root-provider.svelte index 24d43f65e6..54f38b3237 100644 --- a/packages/svelte/src/lib/components/json-tree-view/json-tree-view-root-provider.svelte +++ b/packages/svelte/src/lib/components/json-tree-view/json-tree-view-root-provider.svelte @@ -4,15 +4,18 @@ import { JsonTreeViewPropsProvider } from './json-tree-view-props-context.ts' import type { UseJsonTreeViewReturn } from './use-json-tree-view.svelte.ts' - export interface JsonTreeViewRootProviderProps extends TreeViewRootProviderProps {} + export interface JsonTreeViewRootProviderProps extends Omit, 'value'> { + value: UseJsonTreeViewReturn + } - const { value, ...props }: JsonTreeViewRootProviderProps = $props() + let { value, ...props }: JsonTreeViewRootProviderProps = $props() - const jsonTreeView = $derived(value() as unknown as UseJsonTreeViewReturn) + const treeView = () => { + const { options: _, ...rest } = value() + return rest + } - JsonTreeViewPropsProvider(() => jsonTreeView().options) + JsonTreeViewPropsProvider(() => value().options) - - {@render props.children?.()} - + diff --git a/packages/svelte/src/lib/components/password-input/password-input-root-provider.svelte b/packages/svelte/src/lib/components/password-input/password-input-root-provider.svelte index eb53b227ab..e754ed2853 100644 --- a/packages/svelte/src/lib/components/password-input/password-input-root-provider.svelte +++ b/packages/svelte/src/lib/components/password-input/password-input-root-provider.svelte @@ -1,16 +1,11 @@ - - {@render props.children?.()} - + diff --git a/packages/svelte/src/lib/components/scroll-area/scroll-area-root-provider.svelte b/packages/svelte/src/lib/components/scroll-area/scroll-area-root-provider.svelte index 710813cbb9..74aa1046fe 100644 --- a/packages/svelte/src/lib/components/scroll-area/scroll-area-root-provider.svelte +++ b/packages/svelte/src/lib/components/scroll-area/scroll-area-root-provider.svelte @@ -9,12 +9,15 @@ - + diff --git a/packages/svelte/src/lib/components/toast/create-toaster.ts b/packages/svelte/src/lib/components/toast/create-toaster.ts index 279a6bd9e6..df8734e008 100644 --- a/packages/svelte/src/lib/components/toast/create-toaster.ts +++ b/packages/svelte/src/lib/components/toast/create-toaster.ts @@ -2,8 +2,8 @@ import * as toast from '@zag-js/toast' export interface CreateToasterProps extends toast.StoreProps {} -export interface CreateToasterReturn extends toast.Store {} +export type CreateToasterReturn = toast.Store -export const createToaster = (props: toast.StoreProps): toast.Store => { +export const createToaster = (props: CreateToasterProps): CreateToasterReturn => { return toast.createStore(props) } diff --git a/packages/svelte/src/lib/components/toast/toaster.svelte b/packages/svelte/src/lib/components/toast/toaster.svelte index 38b05e2c32..bd122ac41b 100644 --- a/packages/svelte/src/lib/components/toast/toaster.svelte +++ b/packages/svelte/src/lib/components/toast/toaster.svelte @@ -14,7 +14,7 @@ /** * The toaster instance. */ - toaster: CreateToasterReturn + toaster: CreateToasterReturn /** * The children of the toaster. */ diff --git a/packages/vue/src/components/json-tree-view/json-tree-view-root-provider.vue b/packages/vue/src/components/json-tree-view/json-tree-view-root-provider.vue index 7268aa852f..5265c5e700 100644 --- a/packages/vue/src/components/json-tree-view/json-tree-view-root-provider.vue +++ b/packages/vue/src/components/json-tree-view/json-tree-view-root-provider.vue @@ -1,30 +1,39 @@ diff --git a/packages/vue/src/components/toast/create-toaster.ts b/packages/vue/src/components/toast/create-toaster.ts index e24c72816a..37b77341e0 100644 --- a/packages/vue/src/components/toast/create-toaster.ts +++ b/packages/vue/src/components/toast/create-toaster.ts @@ -6,8 +6,8 @@ export interface CreateToasterProps extends Optional, placement: toast.Placement } -export interface CreateToasterReturn extends toast.Store {} +export type CreateToasterReturn = toast.Store -export const createToaster = (props: CreateToasterProps): CreateToasterReturn => { +export const createToaster = (props: CreateToasterProps): CreateToasterReturn => { return toast.createStore(props) } diff --git a/packages/vue/src/components/toast/toaster.vue b/packages/vue/src/components/toast/toaster.vue index 31e7f0475d..3aea0fdfc1 100644 --- a/packages/vue/src/components/toast/toaster.vue +++ b/packages/vue/src/components/toast/toaster.vue @@ -11,7 +11,7 @@ import ToasterItem from './toaster-item.vue' export type ToastOptions = toast.Options export interface ToasterBaseProps extends PolymorphicProps { - toaster: CreateToasterReturn + toaster: CreateToasterReturn } export interface ToasterProps diff --git a/website/public/images/hash.png b/website/public/images/hash.png new file mode 100644 index 0000000000..627c008fb3 Binary files /dev/null and b/website/public/images/hash.png differ diff --git a/website/public/images/reland.png b/website/public/images/reland.png new file mode 100644 index 0000000000..a93f4c94f9 Binary files /dev/null and b/website/public/images/reland.png differ diff --git a/website/src/content/showcases.json b/website/src/content/showcases.json index 3ca190d481..0f2befe3af 100644 --- a/website/src/content/showcases.json +++ b/website/src/content/showcases.json @@ -30,16 +30,16 @@ "image": "/images/ovh-design-system.png" }, { - "title": "Typebot", - "description": "Open-source conversational apps builder", - "url": "https://typebot.io/", - "image": "https://typebot.io/images/default-og.png" + "title": "HASH", + "description": "The open-source, graph-backed decision platform", + "url": "https://hash.dev/", + "image": "/images/hash.png" }, { "title": "RELAND", "description": "Marketplace for rural real estate in Brazil", "url": "https://reland.com.br/", - "image": "https://assets.reland.com.br/brand/opengraph-en.png" + "image": "/images/reland.png" }, { "title": "Gumbo",