.cursorrules

## Solid.js

When writing code for Solid.js, follow these rules:

- Use `For` when mapping over an array. If it's robust component, consider using `Index` instead.

- Use `Show` to conditionally render a component.

- Use `mergeProps` to merge props from `@zag-js/solid` to merge local props within components.

```ts
const mergedProps = mergeProps(() => api().getControlProps(), controlProps)
```

- When splitting props, use `createSplitProps`

```tsx
import { createSplitProps } from '../../utils/create-split-props'

const [useAvatarProps, localProps] = createSplitProps<UseAvatarProps>()(props, ['id', 'ids', 'onStatusChange'])
```

- When creating stories, use `storybook-solidjs` to create stories.

```tsx
import type { Meta } from 'storybook-solidjs'

const meta: Meta = {
  title: 'Components / Avatar',
}

export default meta
```

- DO NOT destructure `props` in components, use `createSplitProps` or `splitProps` instead.

## Vue.js

When writing code for Vue.js, follow these rules:

- Always use the `ark` factory and forward the `asChild` props

- Always add `useForwardExpose()` at the end of the script setup

```vue
<script setup lang="ts">
useForwardExpose()
</script>
```

- For boolean props, always use the `withDefaults` function to define the defaults as `undefined`

```tsx
const props = withDefaults(defineProps<SliderRootProps>(), {
  disabled: undefined,
  invalid: undefined,
  readOnly: undefined,
} satisfies BooleanDefaults<RootProps>)
```

- When writing examples, no need to use `useForwardExpose()`

- All icons should be imported from `lucide-vue-next`