@ark-ui/solid 0.8.1 → 0.10.0

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

@@ -1,52 +1,4 @@
-import type { RadioProps, InputProps } from '@zag-js/radio-group/dist/radio-group.types';
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseSegmentGroupReturn } from './use-segment-group';
 export type SegmentGroupContext = UseSegmentGroupReturn;
-export declare const SegmentGroupProvider: ContextProviderComponent<Accessor<{
-    value: string | null;
-    setValue(value: string): void;
-    clearValue(): void;
-    focus: () => void;
-    blur(): void;
-    getRadioState: <T_1 extends RadioProps>(props: T_1) => {
-        isInteractive: boolean;
-        isReadOnly: boolean | undefined;
-        isInvalid: boolean | undefined;
-        isDisabled: boolean | undefined;
-        isChecked: boolean;
-        isFocused: boolean;
-        isHovered: boolean;
-        isActive: boolean;
-    };
-    rootProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.HTMLAttributes<any>;
-    getRadioProps(props: RadioProps): JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    indicatorProps: JSX.HTMLAttributes<any>;
-}>>, useSegmentGroupContext: () => Accessor<{
-    value: string | null;
-    setValue(value: string): void;
-    clearValue(): void;
-    focus: () => void;
-    blur(): void;
-    getRadioState: <T_1 extends RadioProps>(props: T_1) => {
-        isInteractive: boolean;
-        isReadOnly: boolean | undefined;
-        isInvalid: boolean | undefined;
-        isDisabled: boolean | undefined;
-        isChecked: boolean;
-        isFocused: boolean;
-        isHovered: boolean;
-        isActive: boolean;
-    };
-    rootProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.HTMLAttributes<any>;
-    getRadioProps(props: RadioProps): JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    indicatorProps: JSX.HTMLAttributes<any>;
-}>;
+export declare const SegmentGroupProvider: ContextProviderComponent<UseSegmentGroupReturn>, useSegmentGroupContext: () => UseSegmentGroupReturn;

package/segment-group/{segment-indicator.cjs → segment-group-indicator.cjs}

@@ -8,10 +8,10 @@ const factory = require('../factory.cjs');
 const segmentGroupContext = require('./segment-group-context.cjs');
 const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
 
-const SegmentIndicator = props => {
+const SegmentGroupIndicator = props => {
   const api = segmentGroupContext.useSegmentGroupContext();
   const indicatorProps = solid.mergeProps(() => api().indicatorProps, props);
   return web.createComponent(factory.ark.input, web.mergeProps(indicatorProps, () => segmentGroup_anatomy.parts.indicator.attrs));
 };
 
-exports.SegmentIndicator = SegmentIndicator;
+exports.SegmentGroupIndicator = SegmentGroupIndicator;

package/segment-group/segment-group-indicator.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+export type SegmentGroupIndicatorProps = HTMLArkProps<'input'>;
+export declare const SegmentGroupIndicator: (props: SegmentGroupIndicatorProps) => JSX.Element;

package/segment-group/{segment-indicator.mjs → segment-group-indicator.mjs}

@@ -4,10 +4,10 @@ import { ark } from '../factory.mjs';
 import { useSegmentGroupContext } from './segment-group-context.mjs';
 import { parts } from './segment-group.anatomy.mjs';
 
-const SegmentIndicator = props => {
+const SegmentGroupIndicator = props => {
   const api = useSegmentGroupContext();
   const indicatorProps = mergeProps(() => api().indicatorProps, props);
   return createComponent(ark.input, mergeProps$1(indicatorProps, () => parts.indicator.attrs));
 };
 
-export { SegmentIndicator };
+export { SegmentGroupIndicator };

package/segment-group/segment-group-label.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type SegmentGroupLabelProps = HTMLArkProps<'label'>;
 export declare const SegmentGroupLabel: (props: SegmentGroupLabelProps) => JSX.Element;

package/segment-group/segment-group.anatomy.d.ts

@@ -1,3 +1,3 @@
-import type { Anatomy, AnatomyPart } from '@zag-js/anatomy';
-export declare const segmentGroupAnatomy: Anatomy<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl" | "radioInput">;
-export declare const parts: Record<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl" | "radioInput", AnatomyPart>;
+import { Anatomy, AnatomyPart } from '@zag-js/anatomy';
+export declare const segmentGroupAnatomy: Anatomy<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl">;
+export declare const parts: Record<"label" | "radio" | "root" | "indicator" | "radioLabel" | "radioControl", AnatomyPart>;

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

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseSegmentGroupProps } from './use-segment-group';

package/segment-group/segment-group.stories.d.ts

@@ -0,0 +1,7 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const Controlled: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;

package/segment-group/segment-group.test.d.ts

@@ -0,0 +1 @@
+export {};

package/segment-group/segment-label.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type SegmentLabelProps = HTMLArkProps<'span'>;
 export declare const SegmentLabel: (props: SegmentLabelProps) => JSX.Element;

package/segment-group/segment.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type SegmentContext } from './segment-context';

package/segment-group/use-segment-group.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const radio = require('@zag-js/radio-group');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/segment-group/use-segment-group.d.ts

@@ -1,30 +1,7 @@
-import type { RadioProps, InputProps } from '@zag-js/radio-group/dist/radio-group.types';
-import type { Accessor, JSX } from 'solid-js';
 import * as segment from '@zag-js/radio-group';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseSegmentGroupProps = Optional<segment.Context, 'id'>;
-export type UseSegmentGroupReturn = ReturnType<typeof useSegmentGroup>;
-export declare const useSegmentGroup: (props: UseSegmentGroupProps) => Accessor<{
-    value: string | null;
-    setValue(value: string): void;
-    clearValue(): void;
-    focus: () => void;
-    blur(): void;
-    getRadioState: <T_1 extends RadioProps>(props: T_1) => {
-        isInteractive: boolean;
-        isReadOnly: boolean | undefined;
-        isInvalid: boolean | undefined;
-        isDisabled: boolean | undefined;
-        isChecked: boolean;
-        isFocused: boolean;
-        isHovered: boolean;
-        isActive: boolean;
-    };
-    rootProps: JSX.HTMLAttributes<any>;
-    labelProps: JSX.HTMLAttributes<any>;
-    getRadioProps(props: RadioProps): JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    getRadioLabelProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioControlProps(props: RadioProps): JSX.HTMLAttributes<any>;
-    getRadioInputProps(props: InputProps): JSX.InputHTMLAttributes<HTMLInputElement>;
-    indicatorProps: JSX.HTMLAttributes<any>;
-}>;
+export type UseSegmentGroupReturn = Accessor<segment.Api<PropTypes>>;
+export declare const useSegmentGroup: (props: UseSegmentGroupProps) => UseSegmentGroupReturn;

package/segment-group/use-segment-group.mjs

@@ -1,6 +1,7 @@
 import * as radio from '@zag-js/radio-group';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSegmentGroup = props => {

package/select/index.cjs

@@ -2,20 +2,30 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const select = require('./select.cjs');
+const select$1 = require('./select.cjs');
 const selectContent = require('./select-content.cjs');
+const selectContext = require('./select-context.cjs');
 const selectLabel = require('./select-label.cjs');
 const selectOption = require('./select-option.cjs');
 const selectOptionGroup = require('./select-option-group.cjs');
 const selectOptionGroupLabel = require('./select-option-group-label.cjs');
 const selectPositioner = require('./select-positioner.cjs');
 const selectTrigger = require('./select-trigger.cjs');
-const select$1 = require('@zag-js/select');
-
+const select = require('@zag-js/select');
 
+const Select = Object.assign(select$1.Select, {
+  Root: select$1.Select,
+  Content: selectContent.SelectContent,
+  Label: selectLabel.SelectLabel,
+  Option: selectOption.SelectOption,
+  OptionGroup: selectOptionGroup.SelectOptionGroup,
+  OptionGroupLabel: selectOptionGroupLabel.SelectOptionGroupLabel,
+  Positioner: selectPositioner.SelectPositioner,
+  Trigger: selectTrigger.SelectTrigger
+});
 
-exports.Select = select.Select;
 exports.SelectContent = selectContent.SelectContent;
+exports.useSelectContext = selectContext.useSelectContext;
 exports.SelectLabel = selectLabel.SelectLabel;
 exports.SelectOption = selectOption.SelectOption;
 exports.SelectOptionGroup = selectOptionGroup.SelectOptionGroup;
@@ -24,5 +34,6 @@ exports.SelectPositioner = selectPositioner.SelectPositioner;
 exports.SelectTrigger = selectTrigger.SelectTrigger;
 Object.defineProperty(exports, 'selectAnatomy', {
   enumerable: true,
-  get: () => select$1.anatomy
+  get: () => select.anatomy
 });
+exports.Select = Select;

package/select/index.d.ts

@@ -1,9 +1,23 @@
-export { Select, type SelectProps } from './select';
-export { SelectContent, type SelectContentProps } from './select-content';
-export { SelectLabel, type SelectLabelProps } from './select-label';
-export { SelectOption, type SelectOptionProps } from './select-option';
-export { SelectOptionGroup, type SelectOptionGroupProps } from './select-option-group';
-export { SelectOptionGroupLabel, type SelectOptionGroupLabelProps, } from './select-option-group-label';
-export { SelectPositioner, type SelectPositionerProps } from './select-positioner';
-export { SelectTrigger, type SelectTriggerProps } from './select-trigger';
-export { selectAnatomy } from './select.anatomy';
+import { JSX } from 'solid-js';
+import { type SelectProps } from './select';
+import { SelectContent, type SelectContentProps } from './select-content';
+import { useSelectContext } from './select-context';
+import { SelectLabel, type SelectLabelProps } from './select-label';
+import { SelectOption, type SelectOptionProps } from './select-option';
+import { SelectOptionGroup, type SelectOptionGroupProps } from './select-option-group';
+import { SelectOptionGroupLabel, type SelectOptionGroupLabelProps } from './select-option-group-label';
+import { SelectPositioner, type SelectPositionerProps } from './select-positioner';
+import { SelectTrigger, type SelectTriggerProps } from './select-trigger';
+import { selectAnatomy } from './select.anatomy';
+declare const Select: ((props: SelectProps) => JSX.Element) & {
+    Root: (props: SelectProps) => JSX.Element;
+    Content: (props: SelectContentProps) => JSX.Element;
+    Label: (props: SelectLabelProps) => JSX.Element;
+    Option: (props: SelectOptionProps) => JSX.Element;
+    OptionGroup: (props: SelectOptionGroupProps) => JSX.Element;
+    OptionGroupLabel: (props: SelectOptionGroupLabelProps) => JSX.Element;
+    Positioner: (props: SelectPositionerProps) => JSX.Element;
+    Trigger: (props: SelectTriggerProps) => JSX.Element;
+};
+export { Select, SelectContent, SelectLabel, SelectOption, SelectOptionGroup, SelectOptionGroupLabel, SelectPositioner, SelectTrigger, selectAnatomy, useSelectContext, };
+export type { SelectContentProps, SelectLabelProps, SelectOptionGroupLabelProps, SelectOptionGroupProps, SelectOptionProps, SelectPositionerProps, SelectProps, SelectTriggerProps, };

package/select/index.mjs

@@ -1,9 +1,23 @@
-export { Select } from './select.mjs';
-export { SelectContent } from './select-content.mjs';
-export { SelectLabel } from './select-label.mjs';
-export { SelectOption } from './select-option.mjs';
-export { SelectOptionGroup } from './select-option-group.mjs';
-export { SelectOptionGroupLabel } from './select-option-group-label.mjs';
-export { SelectPositioner } from './select-positioner.mjs';
-export { SelectTrigger } from './select-trigger.mjs';
+import { Select as Select$1 } from './select.mjs';
+import { SelectContent } from './select-content.mjs';
+export { useSelectContext } from './select-context.mjs';
+import { SelectLabel } from './select-label.mjs';
+import { SelectOption } from './select-option.mjs';
+import { SelectOptionGroup } from './select-option-group.mjs';
+import { SelectOptionGroupLabel } from './select-option-group-label.mjs';
+import { SelectPositioner } from './select-positioner.mjs';
+import { SelectTrigger } from './select-trigger.mjs';
 export { anatomy as selectAnatomy } from '@zag-js/select';
+
+const Select = Object.assign(Select$1, {
+  Root: Select$1,
+  Content: SelectContent,
+  Label: SelectLabel,
+  Option: SelectOption,
+  OptionGroup: SelectOptionGroup,
+  OptionGroupLabel: SelectOptionGroupLabel,
+  Positioner: SelectPositioner,
+  Trigger: SelectTrigger
+});
+
+export { Select, SelectContent, SelectLabel, SelectOption, SelectOptionGroup, SelectOptionGroupLabel, SelectPositioner, SelectTrigger };

package/select/select-content.cjs

@@ -10,7 +10,7 @@ const selectContext = require('./select-context.cjs');
 const SelectContent = props => {
   const api = selectContext.useSelectContext();
   const contentProps = solid.mergeProps(() => api().contentProps, props);
-  return web.createComponent(factory.ark.ul, contentProps);
+  return web.createComponent(factory.ark.div, contentProps);
 };
 
 exports.SelectContent = SelectContent;

package/select/select-content.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
-export type SelectContentProps = HTMLArkProps<'ul'>;
+export type SelectContentProps = HTMLArkProps<'div'>;
 export declare const SelectContent: (props: SelectContentProps) => JSX.Element;

package/select/select-content.mjs

@@ -6,7 +6,7 @@ import { useSelectContext } from './select-context.mjs';
 const SelectContent = props => {
   const api = useSelectContext();
   const contentProps = mergeProps(() => api().contentProps, props);
-  return createComponent(ark.ul, contentProps);
+  return createComponent(ark.div, contentProps);
 };
 
 export { SelectContent };

package/select/select-context.d.ts

@@ -1,53 +1,4 @@
-import type { OptionProps, OptionGroupLabelProps, OptionGroupProps } from '@zag-js/select';
-import type { Option } from '@zag-js/select/dist/select.types';
-import type { Accessor, JSX } from 'solid-js';
-import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { ContextProviderComponent } from 'solid-js';
 import { type UseSelectReturn } from './use-select';
 export type SelectContext = UseSelectReturn;
-export declare const SelectProvider: ContextProviderComponent<Accessor<{
-    isOpen: boolean;
-    highlightedOption: Option | null;
-    selectedOption: Option | null;
-    focus(): void;
-    open(): void;
-    close(): void;
-    setSelectedOption(value: Option): void;
-    setHighlightedOption(value: Option): void;
-    clearSelectedOption(): void;
-    getOptionState: (props: OptionProps) => {
-        isDisabled: boolean;
-        isHighlighted: boolean;
-        isSelected: boolean;
-    };
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    positionerProps: JSX.HTMLAttributes<any>;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getOptionProps(props: OptionProps): JSX.HTMLAttributes<any>;
-    getOptionGroupLabelProps(props: OptionGroupLabelProps): JSX.HTMLAttributes<any>;
-    getOptionGroupProps(props: OptionGroupProps): JSX.HTMLAttributes<any>;
-    hiddenSelectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;
-    contentProps: JSX.HTMLAttributes<any>;
-}>>, useSelectContext: () => Accessor<{
-    isOpen: boolean;
-    highlightedOption: Option | null;
-    selectedOption: Option | null;
-    focus(): void;
-    open(): void;
-    close(): void;
-    setSelectedOption(value: Option): void;
-    setHighlightedOption(value: Option): void;
-    clearSelectedOption(): void;
-    getOptionState: (props: OptionProps) => {
-        isDisabled: boolean;
-        isHighlighted: boolean;
-        isSelected: boolean;
-    };
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    positionerProps: JSX.HTMLAttributes<any>;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getOptionProps(props: OptionProps): JSX.HTMLAttributes<any>;
-    getOptionGroupLabelProps(props: OptionGroupLabelProps): JSX.HTMLAttributes<any>;
-    getOptionGroupProps(props: OptionGroupProps): JSX.HTMLAttributes<any>;
-    hiddenSelectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;
-    contentProps: JSX.HTMLAttributes<any>;
-}>;
+export declare const SelectProvider: ContextProviderComponent<UseSelectReturn>, useSelectContext: () => UseSelectReturn;

package/select/select-label.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type SelectLabelProps = HTMLArkProps<'label'>;
 export declare const SelectLabel: (props: SelectLabelProps) => JSX.Element;

package/select/select-option-group-label.cjs

@@ -12,7 +12,7 @@ const SelectOptionGroupLabel = props => {
   const [labelParams, restProps] = createSplitProps.createSplitProps()(props, ['htmlFor']);
   const api = selectContext.useSelectContext();
   const groupLabelProps = solid.mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
-  return web.createComponent(factory.ark.label, groupLabelProps);
+  return web.createComponent(factory.ark.div, groupLabelProps);
 };
 
 exports.SelectOptionGroupLabel = SelectOptionGroupLabel;

package/select/select-option-group-label.d.ts

@@ -1,9 +1,9 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 type GroupLabelParams = {
     htmlFor: string;
 };
-export type SelectOptionGroupLabelProps = Assign<HTMLArkProps<'label'>, GroupLabelParams>;
+export type SelectOptionGroupLabelProps = Assign<HTMLArkProps<'div'>, GroupLabelParams>;
 export declare const SelectOptionGroupLabel: (props: SelectOptionGroupLabelProps) => JSX.Element;
 export {};

package/select/select-option-group-label.mjs

@@ -8,7 +8,7 @@ const SelectOptionGroupLabel = props => {
   const [labelParams, restProps] = createSplitProps()(props, ['htmlFor']);
   const api = useSelectContext();
   const groupLabelProps = mergeProps(() => api().getOptionGroupLabelProps(labelParams), restProps);
-  return createComponent(ark.label, groupLabelProps);
+  return createComponent(ark.div, groupLabelProps);
 };
 
 export { SelectOptionGroupLabel };

package/select/select-option-group.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 type OptionGroupParams = {

package/select/select-option.cjs

@@ -12,7 +12,7 @@ const SelectOption = props => {
   const [optionParams, restProps] = createSplitProps.createSplitProps()(props, ['disabled', 'label', 'value', 'valueText']);
   const api = selectContext.useSelectContext();
   const optionProps = solid.mergeProps(() => api().getOptionProps(optionParams), restProps);
-  return web.createComponent(factory.ark.li, web.mergeProps(optionProps, {
+  return web.createComponent(factory.ark.div, web.mergeProps(optionProps, {
     get children() {
       return restProps.children ?? optionParams.label;
     }

package/select/select-option.d.ts

@@ -1,8 +1,6 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
+import type { OptionProps } from '@zag-js/select';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-import { useSelectContext } from './select-context';
-type OptionParams = Parameters<ReturnType<ReturnType<typeof useSelectContext>>['getOptionProps']>[0];
-export type SelectOptionProps = Assign<HTMLArkProps<'li'>, OptionParams>;
+export type SelectOptionProps = Assign<HTMLArkProps<'div'>, OptionProps>;
 export declare const SelectOption: (props: SelectOptionProps) => JSX.Element;
-export {};

package/select/select-option.mjs

@@ -8,7 +8,7 @@ const SelectOption = props => {
   const [optionParams, restProps] = createSplitProps()(props, ['disabled', 'label', 'value', 'valueText']);
   const api = useSelectContext();
   const optionProps = mergeProps(() => api().getOptionProps(optionParams), restProps);
-  return createComponent(ark.li, mergeProps$1(optionProps, {
+  return createComponent(ark.div, mergeProps$1(optionProps, {
     get children() {
       return restProps.children ?? optionParams.label;
     }

package/select/select-positioner.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type SelectPositionerProps = HTMLArkProps<'div'>;
 export declare const SelectPositioner: (props: SelectPositionerProps) => JSX.Element;

package/select/select-trigger.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js';
+import { JSX } from 'solid-js';
 import { type HTMLArkProps } from '../factory';
 export type SelectTriggerProps = HTMLArkProps<'button'>;
 export declare const SelectTrigger: (props: SelectTriggerProps) => JSX.Element;

package/select/select.cjs

@@ -9,7 +9,7 @@ const selectContext = require('./select-context.cjs');
 const useSelect = require('./use-select.cjs');
 
 const Select = props => {
-  const [selectParams, restProps] = createSplitProps.createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onHighlight', 'onInteractOutside', 'onOpen', 'positioning', 'readOnly', 'selectOnTab', 'selectedOption']);
+  const [selectParams, restProps] = createSplitProps.createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onFocusOutside', 'onHighlight', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'positioning', 'readOnly', 'selectedOption', 'selectOnTab']);
   const api = useSelect.useSelect(selectParams);
   const getChildren = () => runIfFn.runIfFn(restProps.children, api);
   return web.createComponent(selectContext.SelectProvider, {

package/select/select.mjs

@@ -5,7 +5,7 @@ import { SelectProvider } from './select-context.mjs';
 import { useSelect } from './use-select.mjs';
 
 const Select = props => {
-  const [selectParams, restProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onHighlight', 'onInteractOutside', 'onOpen', 'positioning', 'readOnly', 'selectOnTab', 'selectedOption']);
+  const [selectParams, restProps] = createSplitProps()(props, ['closeOnSelect', 'dir', 'disabled', 'form', 'getRootNode', 'highlightedOption', 'id', 'ids', 'invalid', 'loop', 'name', 'onChange', 'onClose', 'onFocusOutside', 'onHighlight', 'onInteractOutside', 'onInteractOutside', 'onOpen', 'onPointerDownOutside', 'positioning', 'readOnly', 'selectedOption', 'selectOnTab']);
   const api = useSelect(selectParams);
   const getChildren = () => runIfFn(restProps.children, api);
   return createComponent(SelectProvider, {

package/select/select.stories.d.ts

@@ -0,0 +1,5 @@
+import { JSX } from 'solid-js';
+import type { Meta } from 'storybook-solidjs';
+declare const meta: Meta;
+export default meta;
+export declare const Basic: () => JSX.Element;

package/select/use-select.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const select = require('@zag-js/select');
 const solid = require('@zag-js/solid');
 const solidJs = require('solid-js');
+require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/select/use-select.d.ts

@@ -1,30 +1,7 @@
-import type { Option } from '@zag-js/select/dist/select.types';
-import type { Accessor, JSX } from 'solid-js';
 import * as select from '@zag-js/select';
+import { type PropTypes } from '@zag-js/solid';
+import { type Accessor } from 'solid-js';
 import { type Optional } from '../types';
 export type UseSelectProps = Optional<select.Context, 'id'>;
-export type UseSelectReturn = ReturnType<typeof useSelect>;
-export declare const useSelect: (props: UseSelectProps) => Accessor<{
-    isOpen: boolean;
-    highlightedOption: Option | null;
-    selectedOption: Option | null;
-    focus(): void;
-    open(): void;
-    close(): void;
-    setSelectedOption(value: Option): void;
-    setHighlightedOption(value: Option): void;
-    clearSelectedOption(): void;
-    getOptionState: (props: select.OptionProps) => {
-        isDisabled: boolean;
-        isHighlighted: boolean;
-        isSelected: boolean;
-    };
-    labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
-    positionerProps: JSX.HTMLAttributes<any>;
-    triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-    getOptionProps(props: select.OptionProps): JSX.HTMLAttributes<any>;
-    getOptionGroupLabelProps(props: select.OptionGroupLabelProps): JSX.HTMLAttributes<any>;
-    getOptionGroupProps(props: select.OptionGroupProps): JSX.HTMLAttributes<any>;
-    hiddenSelectProps: JSX.SelectHTMLAttributes<HTMLSelectElement>;
-    contentProps: JSX.HTMLAttributes<any>;
-}>;
+export type UseSelectReturn = Accessor<select.Api<PropTypes>>;
+export declare const useSelect: (props: UseSelectProps) => UseSelectReturn;

package/select/use-select.mjs

@@ -1,6 +1,7 @@
 import * as select from '@zag-js/select';
 import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
 import { createUniqueId, createMemo } from 'solid-js';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSelect = (props) => {

package/slider/index.cjs

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const slider = require('./slider.cjs');
+const slider$1 = require('./slider.cjs');
+const sliderContext = require('./slider-context.cjs');
 const sliderControl = require('./slider-control.cjs');
 const sliderLabel = require('./slider-label.cjs');
 const sliderMarker = require('./slider-marker.cjs');
@@ -11,11 +12,21 @@ const sliderOutput = require('./slider-output.cjs');
 const sliderRange = require('./slider-range.cjs');
 const sliderThumb = require('./slider-thumb.cjs');
 const sliderTrack = require('./slider-track.cjs');
-const slider$1 = require('@zag-js/slider');
-
+const slider = require('@zag-js/slider');
 
+const Slider = Object.assign(slider$1.Slider, {
+  Root: slider$1.Slider,
+  Control: sliderControl.SliderControl,
+  Label: sliderLabel.SliderLabel,
+  Marker: sliderMarker.SliderMarker,
+  MarkerGroup: sliderMarkerGroup.SliderMarkerGroup,
+  Output: sliderOutput.SliderOutput,
+  Range: sliderRange.SliderRange,
+  Thumb: sliderThumb.SliderThumb,
+  Track: sliderTrack.SliderTrack
+});
 
-exports.Slider = slider.Slider;
+exports.useSliderContext = sliderContext.useSliderContext;
 exports.SliderControl = sliderControl.SliderControl;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;
@@ -25,6 +36,7 @@ exports.SliderRange = sliderRange.SliderRange;
 exports.SliderThumb = sliderThumb.SliderThumb;
 exports.SliderTrack = sliderTrack.SliderTrack;
 Object.defineProperty(exports, 'sliderAnatomy', {
-	enumerable: true,
-	get: () => slider$1.anatomy
+  enumerable: true,
+  get: () => slider.anatomy
 });
+exports.Slider = Slider;