chore: update examples

components/react/src/components/stories/combobox.stories.tsx

@@ -1,8 +1,7 @@
-import { createListCollection } from '@ark-ui/react/combobox'
 import type { Meta } from '@storybook/react'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
 import { useState } from 'react'
-import { Combobox } from '~/components/ui/combobox'
+import { Combobox, createListCollection } from '~/components/ui/combobox'
 import { IconButton } from '~/components/ui/icon-button'
 import { Input } from '~/components/ui/input'
 

components/react/src/components/stories/select.stories.tsx

@@ -1,7 +1,6 @@
-import { createListCollection } from '@ark-ui/react/collection'
 import type { Meta } from '@storybook/react'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
-import { Select } from '~/components/ui/select'
+import { Select, createListCollection } from '~/components/ui/select'
 
 const meta: Meta = {
   title: 'Components/Select',

components/solid/src/components/stories/combobox.stories.tsx

@@ -1,8 +1,7 @@
-import { createListCollection } from '@ark-ui/solid/combobox'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-solid'
 import { For, createSignal } from 'solid-js'
 import type { Meta } from 'storybook-solidjs'
-import { Combobox } from '~/components/ui/combobox'
+import { Combobox, createListCollection } from '~/components/ui/combobox'
 import { IconButton } from '~/components/ui/icon-button'
 import { Input } from '~/components/ui/input'
 

components/solid/src/components/stories/select.stories.tsx

@@ -1,8 +1,7 @@
-import { createListCollection } from '@ark-ui/solid/select'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-solid'
 import { For } from 'solid-js'
 import type { Meta } from 'storybook-solidjs'
-import { Select } from '~/components/ui/select'
+import { Select, createListCollection } from '~/components/ui/select'
 
 const meta: Meta = {
   title: 'Components/Select',

components/solid/src/components/ui/combobox.tsx

@@ -1 +1,2 @@
+export { createListCollection } from '@ark-ui/solid/combobox'
 export * as Combobox from './styled/combobox'

components/solid/src/components/ui/select.tsx

@@ -1 +1,2 @@
+export { createListCollection } from '@ark-ui/solid/select'
 export * as Select from './styled/select'

components/solid/src/demos/combobox.demo.tsx

@@ -1,7 +1,6 @@
-import { createListCollection } from '@ark-ui/solid/combobox'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-solid'
 import { For, createSignal } from 'solid-js'
-import { Combobox } from '~/components/ui/combobox'
+import { Combobox, createListCollection } from '~/components/ui/combobox'
 import { IconButton } from '~/components/ui/icon-button'
 import { Input } from '~/components/ui/input'
 

components/solid/src/demos/select.demo.tsx

@@ -1,7 +1,6 @@
-import { createListCollection } from '@ark-ui/solid/select'
 import { CheckIcon, ChevronsUpDownIcon } from 'lucide-solid'
 import { For } from 'solid-js'
-import { Select } from '~/components/ui/select'
+import { Select, createListCollection } from '~/components/ui/select'
 
 export const Demo = (props: Select.RootProps) => {
   const collection = createListCollection({

website/public/registry/latest/react/components/button.json

@@ -8,7 +8,7 @@
     },
     {
       "file": "button.tsx",
-      "content": "import { forwardRef } from 'react'\nimport { Center, styled } from 'styled-system/jsx'\nimport { Spinner } from './spinner'\nimport { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'\n\ninterface ButtonLoadingProps {\n  loading?: boolean\n  loadingText?: React.ReactNode\n}\n\nexport interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n  const { loading, disabled, loadingText, children, ...rest } = props\n\n  const trulyDisabled = loading || disabled\n\n  return (\n    <StyledButton disabled={trulyDisabled} ref={ref} {...rest}>\n      {loading && !loadingText ? (\n        <>\n          <ButtonSpinner />\n          <styled.span opacity={0}>{children}</styled.span>\n        </>\n      ) : loadingText ? (\n        loadingText\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n})\n\nButton.displayName = 'Button'\n\nconst ButtonSpinner = () => (\n  <Center inline position=\"absolute\" transform=\"translate(-50%, -50%)\" top=\"50%\" insetStart=\"50%\">\n    <Spinner colorPalette=\"gray\" />\n  </Center>\n)\n"
+      "content": "import { forwardRef } from 'react'\nimport { Center, styled } from 'styled-system/jsx'\nimport { Spinner } from './spinner'\nimport { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'\n\ninterface ButtonLoadingProps {\n  loading?: boolean\n  loadingText?: React.ReactNode\n}\n\nexport interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {\n  const { loading, disabled, loadingText, children, ...rest } = props\n\n  const trulyDisabled = loading || disabled\n\n  return (\n    <StyledButton disabled={trulyDisabled} ref={ref} {...rest}>\n      {loading && !loadingText ? (\n        <>\n          <ButtonSpinner />\n          <styled.span opacity={0}>{children}</styled.span>\n        </>\n      ) : loadingText ? (\n        loadingText\n      ) : (\n        children\n      )}\n    </StyledButton>\n  )\n})\n\nButton.displayName = 'Button'\n\nconst ButtonSpinner = () => (\n  <Center inline position=\"absolute\" transform=\"translate(-50%, -50%)\" top=\"50%\" insetStart=\"50%\">\n    <Spinner\n      width=\"1.1em\"\n      height=\"1.1em\"\n      borderWidth=\"1.5px\"\n      borderTopColor=\"fg.disabled\"\n      borderRightColor=\"fg.disabled\"\n    />\n  </Center>\n)\n"
     }
   ]
 }

website/public/registry/latest/react/components/combobox.json

@@ -6,6 +6,9 @@
       "file": "styled/combobox.tsx",
       "content": "'use client'\nimport type { Assign } from '@ark-ui/react'\nimport { Combobox } from '@ark-ui/react/combobox'\nimport { type ComboboxVariantProps, combobox } from 'styled-system/recipes'\nimport type { ComponentProps, HTMLStyledProps } from 'styled-system/types'\nimport { createStyleContext } from './utils/create-style-context'\n\nconst { withProvider, withContext } = createStyleContext(combobox)\n\nexport type RootProviderProps = ComponentProps<typeof RootProvider>\nexport const RootProvider = withProvider<\n  HTMLDivElement,\n  Assign<\n    Assign<HTMLStyledProps<'div'>, Combobox.RootProviderBaseProps<Combobox.CollectionItem>>,\n    ComboboxVariantProps\n  >\n>(Combobox.RootProvider, 'root')\n\nexport type RootProps = ComponentProps<typeof Root>\nexport const Root = withProvider<\n  HTMLDivElement,\n  Assign<\n    Assign<HTMLStyledProps<'div'>, Combobox.RootBaseProps<Combobox.CollectionItem>>,\n    ComboboxVariantProps\n  >\n>(Combobox.Root, 'root')\n\nexport const ClearTrigger = withContext<\n  HTMLButtonElement,\n  Assign<HTMLStyledProps<'button'>, Combobox.ClearTriggerBaseProps>\n>(Combobox.ClearTrigger, 'clearTrigger')\n\nexport const Content = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Combobox.ContentBaseProps>\n>(Combobox.Content, 'content')\n\nexport const Control = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Combobox.ControlBaseProps>\n>(Combobox.Control, 'control')\n\nexport const Input = withContext<\n  HTMLInputElement,\n  Assign<HTMLStyledProps<'input'>, Combobox.InputBaseProps>\n>(Combobox.Input, 'input')\n\nexport const ItemGroupLabel = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Combobox.ItemGroupLabelBaseProps>\n>(Combobox.ItemGroupLabel, 'itemGroupLabel')\n\nexport const ItemGroup = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Combobox.ItemGroupBaseProps>\n>(Combobox.ItemGroup, 'itemGroup')\n\nexport const ItemIndicator = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Combobox.ItemIndicatorBaseProps>\n>(Combobox.ItemIndicator, 'itemIndicator')\n\nexport const Item = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Combobox.ItemBaseProps>\n>(Combobox.Item, 'item')\n\nexport const ItemText = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'span'>, Combobox.ItemTextBaseProps>\n>(Combobox.ItemText, 'itemText')\n\nexport const Label = withContext<\n  HTMLLabelElement,\n  Assign<HTMLStyledProps<'label'>, Combobox.LabelBaseProps>\n>(Combobox.Label, 'label')\n\nexport const List = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Combobox.ListBaseProps>\n>(Combobox.List, 'list')\n\nexport const Positioner = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Combobox.PositionerBaseProps>\n>(Combobox.Positioner, 'positioner')\n\nexport const Trigger = withContext<\n  HTMLButtonElement,\n  Assign<HTMLStyledProps<'button'>, Combobox.TriggerBaseProps>\n>(Combobox.Trigger, 'trigger')\n\nexport { ComboboxContext as Context } from '@ark-ui/react/combobox'\n\nexport type {\n  ComboboxHighlightChangeDetails as HighlightChangeDetails,\n  ComboboxInputValueChangeDetails as InputValueChangeDetails,\n  ComboboxOpenChangeDetails as OpenChangeDetails,\n  ComboboxValueChangeDetails as ValueChangeDetails,\n} from '@ark-ui/react/combobox'\n"
     },
-    { "file": "combobox.tsx", "content": "export * as Combobox from './styled/combobox'\n" }
+    {
+      "file": "combobox.tsx",
+      "content": "export { createListCollection } from '@ark-ui/react/combobox'\nexport * as Combobox from './styled/combobox'\n"
+    }
   ]
 }

website/public/registry/latest/react/components/select.json

@@ -6,6 +6,9 @@
       "file": "styled/select.tsx",
       "content": "'use client'\nimport type { Assign } from '@ark-ui/react'\nimport { Select } from '@ark-ui/react/select'\nimport { type SelectVariantProps, select } from 'styled-system/recipes'\nimport type { ComponentProps, HTMLStyledProps } from 'styled-system/types'\nimport { createStyleContext } from './utils/create-style-context'\n\nconst { withProvider, withContext } = createStyleContext(select)\n\nexport type RootProviderProps = ComponentProps<typeof RootProvider>\nexport const RootProvider = withProvider<\n  HTMLDivElement,\n  Assign<\n    Assign<HTMLStyledProps<'div'>, Select.RootProviderBaseProps<Select.CollectionItem>>,\n    SelectVariantProps\n  >\n>(Select.RootProvider, 'root')\n\nexport type RootProps = ComponentProps<typeof Root>\nexport const Root = withProvider<\n  HTMLDivElement,\n  Assign<\n    Assign<HTMLStyledProps<'div'>, Select.RootBaseProps<Select.CollectionItem>>,\n    SelectVariantProps\n  >\n>(Select.Root, 'root')\n\nexport const ClearTrigger = withContext<\n  HTMLButtonElement,\n  Assign<HTMLStyledProps<'button'>, Select.ClearTriggerBaseProps>\n>(Select.ClearTrigger, 'clearTrigger')\n\nexport const Content = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Select.ContentBaseProps>\n>(Select.Content, 'content')\n\nexport const Control = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Select.ControlBaseProps>\n>(Select.Control, 'control')\n\nexport const Indicator = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Select.IndicatorBaseProps>\n>(Select.Indicator, 'indicator')\n\nexport const ItemGroupLabel = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Select.ItemGroupLabelBaseProps>\n>(Select.ItemGroupLabel, 'itemGroupLabel')\n\nexport const ItemGroup = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Select.ItemGroupBaseProps>\n>(Select.ItemGroup, 'itemGroup')\n\nexport const ItemIndicator = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Select.ItemIndicatorBaseProps>\n>(Select.ItemIndicator, 'itemIndicator')\n\nexport const Item = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Select.ItemBaseProps>\n>(Select.Item, 'item')\n\nexport const ItemText = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'span'>, Select.ItemTextBaseProps>\n>(Select.ItemText, 'itemText')\n\nexport const Label = withContext<\n  HTMLLabelElement,\n  Assign<HTMLStyledProps<'label'>, Select.LabelBaseProps>\n>(Select.Label, 'label')\n\nexport const List = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Select.ListBaseProps>\n>(Select.List, 'list')\n\nexport const Positioner = withContext<\n  HTMLDivElement,\n  Assign<HTMLStyledProps<'div'>, Select.PositionerBaseProps>\n>(Select.Positioner, 'positioner')\n\nexport const Trigger = withContext<\n  HTMLButtonElement,\n  Assign<HTMLStyledProps<'button'>, Select.TriggerBaseProps>\n>(Select.Trigger, 'trigger')\n\nexport const ValueText = withContext<\n  HTMLSpanElement,\n  Assign<HTMLStyledProps<'span'>, Select.ValueTextBaseProps>\n>(Select.ValueText, 'valueText')\n\nexport {\n  SelectContext as Context,\n  SelectHiddenSelect as HiddenSelect,\n} from '@ark-ui/react/select'\n"
     },
-    { "file": "select.tsx", "content": "export * as Select from './styled/select'\n" }
+    {
+      "file": "select.tsx",
+      "content": "export { createListCollection } from '@ark-ui/react/select'\nexport * as Select from './styled/select'\n"
+    }
   ]
 }

website/public/registry/latest/solid/components/button.json

@@ -8,7 +8,7 @@
     },
     {
       "file": "button.tsx",
-      "content": "import type { JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Center, styled } from 'styled-system/jsx'\nimport { Spinner } from './spinner'\nimport { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'\n\ninterface ButtonLoadingProps {\n  loading?: boolean\n  loadingText?: JSX.Element\n}\n\nexport interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {}\n\nexport const Button = (props: ButtonProps) => {\n  const [localProps, rest] = splitProps(props, ['loading', 'disabled', 'loadingText', 'children'])\n  const trulyDisabled = () => localProps.loading || localProps.disabled\n\n  return (\n    <StyledButton disabled={trulyDisabled()} {...rest}>\n      <Show\n        when={localProps.loading && !localProps.loadingText}\n        fallback={localProps.loadingText || localProps.children}\n      >\n        <>\n          <ButtonSpinner />\n          <styled.span opacity={0}>{localProps.children}</styled.span>\n        </>\n      </Show>\n    </StyledButton>\n  )\n}\n\nconst ButtonSpinner = () => (\n  <Center inline position=\"absolute\" transform=\"translate(-50%, -50%)\" top=\"50%\" insetStart=\"50%\">\n    <Spinner borderColor=\"currentColor\" />\n  </Center>\n)\n"
+      "content": "import type { JSX } from 'solid-js'\nimport { Show, splitProps } from 'solid-js'\nimport { Center, styled } from 'styled-system/jsx'\nimport { Spinner } from './spinner'\nimport { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'\n\ninterface ButtonLoadingProps {\n  loading?: boolean\n  loadingText?: JSX.Element\n}\n\nexport interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {}\n\nexport const Button = (props: ButtonProps) => {\n  const [localProps, rest] = splitProps(props, ['loading', 'disabled', 'loadingText', 'children'])\n  const trulyDisabled = () => localProps.loading || localProps.disabled\n\n  return (\n    <StyledButton disabled={trulyDisabled()} {...rest}>\n      <Show\n        when={localProps.loading && !localProps.loadingText}\n        fallback={localProps.loadingText || localProps.children}\n      >\n        <>\n          <ButtonSpinner />\n          <styled.span opacity={0}>{localProps.children}</styled.span>\n        </>\n      </Show>\n    </StyledButton>\n  )\n}\n\nconst ButtonSpinner = () => (\n  <Center inline position=\"absolute\" transform=\"translate(-50%, -50%)\" top=\"50%\" insetStart=\"50%\">\n    <Spinner\n      width=\"1.1em\"\n      height=\"1.1em\"\n      borderWidth=\"1.5px\"\n      borderTopColor=\"fg.disabled\"\n      borderRightColor=\"fg.disabled\"\n    />\n  </Center>\n)\n"
     }
   ]
 }