@ark-ui/solid 0.6.0 → 0.7.0

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@ark-ui/solid",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
-    "solid",
-    "headless",
     "accordion",
+    "avatar",
     "carousel",
     "checkbox",
     "color picker",
@@ -13,15 +12,18 @@
     "date picker",
     "dialog",
     "editable",
+    "environment",
     "hover card",
     "menu",
     "number input",
     "pagination",
     "pin input",
     "popover",
+    "pressable",
     "radio group",
     "range slider",
     "rating group",
+    "segment group",
     "select",
     "slider",
     "splitter",
@@ -31,12 +33,8 @@
     "toast",
     "tooltip"
   ],
-  "homepage": "https://github.com/chakra-ui/ark#readme",
+  "homepage": "https://ark-ui.com",
   "license": "MIT",
-  "main": "dist/index.cjs",
-  "files": [
-    "dist"
-  ],
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -55,16 +53,16 @@
     "test": "vitest",
     "test:ci": "vitest --run --coverage",
     "typecheck": "tsc",
-    "prepack": "clean-package",
-    "postpack": "clean-package restore",
-    "typedocs": "ts-node ../../scripts/generate-type-docs.ts",
-    "storydocs": "ts-node ../../scripts/generate-stories.ts",
+    "storydocs": "pnpm --filter=@ark-ui/scripts document:stories solid",
+    "typedocs": "pnpm --filter=@ark-ui/scripts document:types solid",
     "storybook": "storybook dev -p 6006",
-    "release-it": "release-it --config ../../config/release-it.json"
+    "release-it": "release-it --config ../../release-it.json",
+    "foo": "pnpm --filter=@ark-ui/scripts release:prepare @ark-ui/solid"
   },
   "dependencies": {
     "@zag-js/accordion": "0.10.2",
     "@zag-js/anatomy": "0.10.2",
+    "@zag-js/avatar": "0.10.2",
     "@zag-js/carousel": "0.10.2",
     "@zag-js/checkbox": "0.10.2",
     "@zag-js/color-picker": "0.10.2",
@@ -95,28 +93,27 @@
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "3.1.0",
-    "@solidjs/testing-library": "0.7.1",
-    "@storybook/addon-essentials": "7.0.18",
-    "@storybook/addon-interactions": "7.0.18",
-    "@storybook/addon-links": "7.0.18",
-    "@storybook/blocks": "7.0.18",
-    "@storybook/testing-library": "0.1.0",
-    "@testing-library/dom": "9.3.0",
+    "@solidjs/testing-library": "0.8.1",
+    "@storybook/addon-essentials": "7.0.23",
+    "@storybook/addon-interactions": "7.0.23",
+    "@storybook/addon-links": "7.0.23",
+    "@storybook/blocks": "7.0.23",
+    "@storybook/testing-library": "0.2.0",
+    "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/user-event": "14.4.3",
     "@types/jsdom": "21.1.1",
     "@types/testing-library__jest-dom": "5.14.6",
-    "@typescript-eslint/eslint-plugin": "5.59.8",
-    "@typescript-eslint/parser": "5.59.8",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "@vitest/coverage-c8": "0.31.4",
-    "clean-package": "2.2.0",
-    "eslint": "8.42.0",
+    "eslint": "8.43.0",
     "happy-dom": "9.20.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "release-it": "15.10.5",
-    "solid-js": "1.7.6",
-    "storybook": "7.0.18",
+    "release-it": "15.11.0",
+    "solid-js": "1.7.7",
+    "storybook": "7.0.23",
     "storybook-solidjs": "1.0.0-beta.2",
     "storybook-solidjs-vite": "1.0.0-beta.2",
     "typescript": "5.1.3",
@@ -128,14 +125,162 @@
   "peerDependencies": {
     "solid-js": ">=1.6.0"
   },
-  "clean-package": "../../config/clean-package.config.json",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "index.cjs",
+  "module": "index.mjs",
+  "types": "index.d.ts",
+  "files": [
+    "./"
+  ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
+      "types": "./index.d.ts",
+      "import": "./index.mjs",
+      "require": "./index.cjs"
+    },
+    "./accordion": {
+      "types": "./accordion/index.d.ts",
+      "import": "./accordion/index.mjs",
+      "require": "./accordion/index.cjs"
+    },
+    "./avatar": {
+      "types": "./avatar/index.d.ts",
+      "import": "./avatar/index.mjs",
+      "require": "./avatar/index.cjs"
+    },
+    "./carousel": {
+      "types": "./carousel/index.d.ts",
+      "import": "./carousel/index.mjs",
+      "require": "./carousel/index.cjs"
+    },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "import": "./checkbox/index.mjs",
+      "require": "./checkbox/index.cjs"
+    },
+    "./color-picker": {
+      "types": "./color-picker/index.d.ts",
+      "import": "./color-picker/index.mjs",
+      "require": "./color-picker/index.cjs"
+    },
+    "./combobox": {
+      "types": "./combobox/index.d.ts",
+      "import": "./combobox/index.mjs",
+      "require": "./combobox/index.cjs"
+    },
+    "./date-picker": {
+      "types": "./date-picker/index.d.ts",
+      "import": "./date-picker/index.mjs",
+      "require": "./date-picker/index.cjs"
+    },
+    "./dialog": {
+      "types": "./dialog/index.d.ts",
+      "import": "./dialog/index.mjs",
+      "require": "./dialog/index.cjs"
+    },
+    "./editable": {
+      "types": "./editable/index.d.ts",
+      "import": "./editable/index.mjs",
+      "require": "./editable/index.cjs"
+    },
+    "./environment": {
+      "types": "./environment/index.d.ts",
+      "import": "./environment/index.mjs",
+      "require": "./environment/index.cjs"
+    },
+    "./hover-card": {
+      "types": "./hover-card/index.d.ts",
+      "import": "./hover-card/index.mjs",
+      "require": "./hover-card/index.cjs"
+    },
+    "./menu": {
+      "types": "./menu/index.d.ts",
+      "import": "./menu/index.mjs",
+      "require": "./menu/index.cjs"
+    },
+    "./number-input": {
+      "types": "./number-input/index.d.ts",
+      "import": "./number-input/index.mjs",
+      "require": "./number-input/index.cjs"
+    },
+    "./pagination": {
+      "types": "./pagination/index.d.ts",
+      "import": "./pagination/index.mjs",
+      "require": "./pagination/index.cjs"
+    },
+    "./pin-input": {
+      "types": "./pin-input/index.d.ts",
+      "import": "./pin-input/index.mjs",
+      "require": "./pin-input/index.cjs"
+    },
+    "./popover": {
+      "types": "./popover/index.d.ts",
+      "import": "./popover/index.mjs",
+      "require": "./popover/index.cjs"
+    },
+    "./pressable": {
+      "types": "./pressable/index.d.ts",
+      "import": "./pressable/index.mjs",
+      "require": "./pressable/index.cjs"
+    },
+    "./radio-group": {
+      "types": "./radio-group/index.d.ts",
+      "import": "./radio-group/index.mjs",
+      "require": "./radio-group/index.cjs"
+    },
+    "./range-slider": {
+      "types": "./range-slider/index.d.ts",
+      "import": "./range-slider/index.mjs",
+      "require": "./range-slider/index.cjs"
+    },
+    "./rating-group": {
+      "types": "./rating-group/index.d.ts",
+      "import": "./rating-group/index.mjs",
+      "require": "./rating-group/index.cjs"
+    },
+    "./segment-group": {
+      "types": "./segment-group/index.d.ts",
+      "import": "./segment-group/index.mjs",
+      "require": "./segment-group/index.cjs"
+    },
+    "./select": {
+      "types": "./select/index.d.ts",
+      "import": "./select/index.mjs",
+      "require": "./select/index.cjs"
+    },
+    "./slider": {
+      "types": "./slider/index.d.ts",
+      "import": "./slider/index.mjs",
+      "require": "./slider/index.cjs"
+    },
+    "./splitter": {
+      "types": "./splitter/index.d.ts",
+      "import": "./splitter/index.mjs",
+      "require": "./splitter/index.cjs"
+    },
+    "./switch": {
+      "types": "./switch/index.d.ts",
+      "import": "./switch/index.mjs",
+      "require": "./switch/index.cjs"
+    },
+    "./tabs": {
+      "types": "./tabs/index.d.ts",
+      "import": "./tabs/index.mjs",
+      "require": "./tabs/index.cjs"
+    },
+    "./tags-input": {
+      "types": "./tags-input/index.d.ts",
+      "import": "./tags-input/index.mjs",
+      "require": "./tags-input/index.cjs"
+    },
+    "./toast": {
+      "types": "./toast/index.d.ts",
+      "import": "./toast/index.mjs",
+      "require": "./toast/index.cjs"
+    },
+    "./tooltip": {
+      "types": "./tooltip/index.d.ts",
+      "import": "./tooltip/index.mjs",
+      "require": "./tooltip/index.cjs"
     },
     "./package.json": "./package.json"
   }

package/segment-group/index.d.ts

@@ -0,0 +1,8 @@
+export { Segment, type SegmentProps } from './segment';
+export { SegmentControl, type SegmentControlProps } from './segment-control';
+export { SegmentGroup, type SegmentGroupProps } from './segment-group';
+export { SegmentGroupLabel, type SegmentGroupLabelProps } from './segment-group-label';
+export { segmentGroupAnatomy } from './segment-group.anatomy';
+export { SegmentIndicator, type SegmentIndicatorProps } from './segment-indicator';
+export { SegmentInput, type SegmentInputProps } from './segment-input';
+export { SegmentLabel, type SegmentLabelProps } from './segment-label';

package/segment-group/segment-context.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [SegmentProvider, useSegmentContext] = createContext.createContext({
+  hookName: "useSegmentContext",
+  providerName: "<SegmentProvider />"
+});
+
+exports.SegmentProvider = SegmentProvider;
+exports.useSegmentContext = useSegmentContext;

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

@@ -0,0 +1,5 @@
+import type { RadioProps } from '@zag-js/radio-group/dist/radio-group.types';
+import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
+import { type connect } from '@zag-js/radio-group';
+export type SegmentContext = Parameters<ReturnType<typeof connect>['getRadioProps']>[0];
+export declare const SegmentProvider: ContextProviderComponent<RadioProps>, useSegmentContext: () => RadioProps;

package/segment-group/segment-context.mjs

@@ -0,0 +1,8 @@
+import { createContext } from '../create-context.mjs';
+
+const [SegmentProvider, useSegmentContext] = createContext({
+  hookName: "useSegmentContext",
+  providerName: "<SegmentProvider />"
+});
+
+export { SegmentProvider, useSegmentContext };

package/segment-group/segment-control.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const segmentContext = require('./segment-context.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
+
+const SegmentControl = props => {
+  const api = segmentGroupContext.useSegmentGroupContext();
+  const segmentParams = segmentContext.useSegmentContext();
+  const controlProps = solid.mergeProps(() => api().getRadioControlProps(segmentParams), props);
+  return web.createComponent(factory.ark.div, web.mergeProps(controlProps, () => segmentGroup_anatomy.parts.radioControl.attrs));
+};
+
+exports.SegmentControl = SegmentControl;

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

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

package/segment-group/segment-control.mjs

@@ -0,0 +1,15 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSegmentContext } from './segment-context.mjs';
+import { useSegmentGroupContext } from './segment-group-context.mjs';
+import { parts } from './segment-group.anatomy.mjs';
+
+const SegmentControl = props => {
+  const api = useSegmentGroupContext();
+  const segmentParams = useSegmentContext();
+  const controlProps = mergeProps(() => api().getRadioControlProps(segmentParams), props);
+  return createComponent(ark.div, mergeProps$1(controlProps, () => parts.radioControl.attrs));
+};
+
+export { SegmentControl };

package/segment-group/segment-group-context.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [SegmentGroupProvider, useSegmentGroupContext] = createContext.createContext({
+  hookName: "useSegmentGroupContext",
+  providerName: "<SegmentGroupProvider />"
+});
+
+exports.SegmentGroupProvider = SegmentGroupProvider;
+exports.useSegmentGroupContext = useSegmentGroupContext;

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

@@ -0,0 +1,52 @@
+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 { 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>;
+}>;

package/segment-group/segment-group-context.mjs

@@ -0,0 +1,8 @@
+import { createContext } from '../create-context.mjs';
+
+const [SegmentGroupProvider, useSegmentGroupContext] = createContext({
+  hookName: "useSegmentGroupContext",
+  providerName: "<SegmentGroupProvider />"
+});
+
+export { SegmentGroupProvider, useSegmentGroupContext };

package/segment-group/segment-group-label.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
+
+const SegmentGroupLabel = props => {
+  const api = segmentGroupContext.useSegmentGroupContext();
+  const labelProps = solid.mergeProps(() => api().labelProps, props);
+  return web.createComponent(factory.ark.label, web.mergeProps(labelProps, () => segmentGroup_anatomy.parts.label.attrs));
+};
+
+exports.SegmentGroupLabel = SegmentGroupLabel;

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

@@ -0,0 +1,4 @@
+import type { 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-label.mjs

@@ -0,0 +1,13 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSegmentGroupContext } from './segment-group-context.mjs';
+import { parts } from './segment-group.anatomy.mjs';
+
+const SegmentGroupLabel = props => {
+  const api = useSegmentGroupContext();
+  const labelProps = mergeProps(() => api().labelProps, props);
+  return createComponent(ark.label, mergeProps$1(labelProps, () => parts.label.attrs));
+};
+
+export { SegmentGroupLabel };

package/segment-group/segment-group.anatomy.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const radio = require('@zag-js/radio-group');
+
+const segmentGroupAnatomy = radio.anatomy.rename("segment-group");
+const parts = segmentGroupAnatomy.build();
+
+exports.parts = parts;
+exports.segmentGroupAnatomy = segmentGroupAnatomy;

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

@@ -0,0 +1,3 @@
+import type { Anatomy, AnatomyPart } from '@zag-js/anatomy/dist/create-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>;

package/segment-group/segment-group.anatomy.mjs

@@ -0,0 +1,6 @@
+import { anatomy } from '@zag-js/radio-group';
+
+const segmentGroupAnatomy = anatomy.rename("segment-group");
+const parts = segmentGroupAnatomy.build();
+
+export { parts, segmentGroupAnatomy };

package/segment-group/segment-group.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
+const useSegmentGroup = require('./use-segment-group.cjs');
+
+const SegmentGroup = props => {
+  const [groupParams, restProps] = createSplitProps.createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
+  const api = useSegmentGroup.useSegmentGroup(groupParams);
+  const rootProps = solid.mergeProps(() => api().rootProps, restProps);
+  return web.createComponent(segmentGroupContext.SegmentGroupProvider, {
+    value: api,
+    get children() {
+      return web.createComponent(factory.ark.div, web.mergeProps(rootProps, () => segmentGroup_anatomy.parts.root.attrs));
+    }
+  });
+};
+
+exports.SegmentGroup = SegmentGroup;

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

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import { type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseSegmentGroupProps } from './use-segment-group';
+export type SegmentGroupProps = Assign<HTMLArkProps<'div'>, UseSegmentGroupProps>;
+export declare const SegmentGroup: (props: SegmentGroupProps) => JSX.Element;

package/segment-group/segment-group.mjs

@@ -0,0 +1,21 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { SegmentGroupProvider } from './segment-group-context.mjs';
+import { parts } from './segment-group.anatomy.mjs';
+import { useSegmentGroup } from './use-segment-group.mjs';
+
+const SegmentGroup = props => {
+  const [groupParams, restProps] = createSplitProps()(props, ['dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'name', 'onChange', 'orientation', 'readOnly', 'value']);
+  const api = useSegmentGroup(groupParams);
+  const rootProps = mergeProps(() => api().rootProps, restProps);
+  return createComponent(SegmentGroupProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(rootProps, () => parts.root.attrs));
+    }
+  });
+};
+
+export { SegmentGroup };

package/segment-group/segment-indicator.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
+
+const SegmentIndicator = 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;

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

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

package/segment-group/segment-indicator.mjs

@@ -0,0 +1,13 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSegmentGroupContext } from './segment-group-context.mjs';
+import { parts } from './segment-group.anatomy.mjs';
+
+const SegmentIndicator = props => {
+  const api = useSegmentGroupContext();
+  const indicatorProps = mergeProps(() => api().indicatorProps, props);
+  return createComponent(ark.input, mergeProps$1(indicatorProps, () => parts.indicator.attrs));
+};
+
+export { SegmentIndicator };

package/segment-group/segment-input.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const web = require('solid-js/web');
+const solid = require('@zag-js/solid');
+const factory = require('../factory.cjs');
+const segmentContext = require('./segment-context.cjs');
+const segmentGroupContext = require('./segment-group-context.cjs');
+const segmentGroup_anatomy = require('./segment-group.anatomy.cjs');
+
+const SegmentInput = props => {
+  const api = segmentGroupContext.useSegmentGroupContext();
+  const segmentParams = segmentContext.useSegmentContext();
+  const inputProps = solid.mergeProps(() => api().getRadioInputProps(segmentParams), props);
+  return web.createComponent(factory.ark.input, web.mergeProps(inputProps, () => segmentGroup_anatomy.parts.radioInput.attrs));
+};
+
+exports.SegmentInput = SegmentInput;

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

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

package/segment-group/segment-input.mjs

@@ -0,0 +1,15 @@
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory.mjs';
+import { useSegmentContext } from './segment-context.mjs';
+import { useSegmentGroupContext } from './segment-group-context.mjs';
+import { parts } from './segment-group.anatomy.mjs';
+
+const SegmentInput = props => {
+  const api = useSegmentGroupContext();
+  const segmentParams = useSegmentContext();
+  const inputProps = mergeProps(() => api().getRadioInputProps(segmentParams), props);
+  return createComponent(ark.input, mergeProps$1(inputProps, () => parts.radioInput.attrs));
+};
+
+export { SegmentInput };