@ark-ui/solid 0.0.0-rc-20221106094212

package/dist/index.cjs.js

@@ -0,0 +1,211 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Accordion: () => Accordion,
+  AccordionButton: () => AccordionButton,
+  AccordionItem: () => AccordionItem,
+  AccordionPanel: () => AccordionPanel,
+  PinInput: () => PinInput,
+  PinInputField: () => PinInputField,
+  useAccordion: () => useAccordion,
+  usePinInput: () => usePinInput
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/accordion/accordion.tsx
+var import_solid_js3 = require("solid-js");
+
+// src/createContext.ts
+var import_solid_js = require("solid-js");
+function getErrorMessage(hook, provider) {
+  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
+}
+function createContext(options = {}) {
+  const {
+    strict = true,
+    hookName = "useContext",
+    providerName = "Provider",
+    errorMessage
+  } = options;
+  const Context2 = (0, import_solid_js.createContext)(void 0);
+  function useContext() {
+    const context = (0, import_solid_js.useContext)(Context2);
+    if (!context && strict) {
+      const error = new Error(errorMessage ?? getErrorMessage(hookName, providerName));
+      error.name = "ContextError";
+      Error.captureStackTrace?.(error, useContext);
+      throw error;
+    }
+    return context;
+  }
+  return [Context2.Provider, useContext, Context2];
+}
+
+// src/accordion/accordion-context.tsx
+var [AccordionProvider, useAccordionContext] = createContext({
+  hookName: "useAccordionContext",
+  providerName: "<AccordionProvider />"
+});
+
+// src/accordion/use-accordion.ts
+var accordion = __toESM(require("@zag-js/accordion"));
+var import_solid = require("@zag-js/solid");
+var import_solid_js2 = require("solid-js");
+var useAccordion = (props) => {
+  const [state, send] = (0, import_solid.useMachine)(
+    accordion.machine({
+      id: (0, import_solid_js2.createUniqueId)(),
+      ...props,
+      value: props.defaultValue ?? props.value
+    })
+  );
+  return (0, import_solid_js2.createMemo)(() => accordion.connect(state, send, import_solid.normalizeProps));
+};
+
+// src/accordion/accordion.tsx
+function Accordion(props) {
+  const [accordionProps, htmlProps] = (0, import_solid_js3.splitProps)(props, [
+    "collapsible",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "ids",
+    "multiple",
+    "onChange",
+    "value"
+  ]);
+  const accordion2 = useAccordion(accordionProps);
+  return <AccordionProvider value={accordion2}><div {...accordion2?.().rootProps} {...htmlProps} /></AccordionProvider>;
+}
+
+// src/accordion/accordion-item-context.ts
+var [AccordionItemProvider, useAccordionItemContext] = createContext(
+  {
+    hookName: "useAccordionItemContext",
+    providerName: "<AccordionItemProvider />"
+  }
+);
+
+// src/accordion/accordion-button.tsx
+function AccordionButton(props) {
+  const api = useAccordionContext();
+  const { value, disabled } = useAccordionItemContext();
+  return <button {...api?.().getTriggerProps?.({
+    value,
+    disabled
+  })} {...props} />;
+}
+
+// src/accordion/accordion-item.tsx
+var import_solid_js4 = require("solid-js");
+function AccordionItem(props) {
+  const [itemProps, htmlProps] = (0, import_solid_js4.splitProps)(props, ["value", "disabled"]);
+  const api = useAccordionContext();
+  return <AccordionItemProvider value={itemProps}><div {...api?.().getItemProps({ value: itemProps.value })} {...htmlProps} /></AccordionItemProvider>;
+}
+
+// src/accordion/accordion-panel.tsx
+function AccordionPanel(props) {
+  const api = useAccordionContext();
+  const { value, disabled } = useAccordionItemContext();
+  return <div {...api?.().getContentProps({
+    value,
+    disabled
+  })} {...props} />;
+}
+
+// src/pin-input/pin-input.tsx
+var import_solid_js6 = require("solid-js");
+
+// src/pin-input/pin-input-context.ts
+var [PinInputProvider, usePinInputContext] = createContext({
+  hookName: "usePinInputContext",
+  providerName: "<PinInputProvider />"
+});
+
+// src/pin-input/use-pin-input.ts
+var pinInput = __toESM(require("@zag-js/pin-input"));
+var import_solid2 = require("@zag-js/solid");
+var import_solid_js5 = require("solid-js");
+var usePinInput = (props) => {
+  const [state, send] = (0, import_solid2.useMachine)(
+    pinInput.machine({
+      id: (0, import_solid_js5.createUniqueId)(),
+      ...props,
+      value: props.defaultValue ?? props.value ?? []
+    })
+  );
+  return (0, import_solid_js5.createMemo)(() => pinInput.connect(state, send, import_solid2.normalizeProps));
+};
+
+// src/pin-input/pin-input.tsx
+var PinInput = (props) => {
+  const [pinInputProps, htmlProps] = (0, import_solid_js6.splitProps)(props, [
+    "autoFocus",
+    "blurOnComplete",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "ids",
+    "invalid",
+    "mask",
+    "name",
+    "onChange",
+    "onComplete",
+    "onInvalid",
+    "otp",
+    "pattern",
+    "placeholder",
+    "translations",
+    "type",
+    "value"
+  ]);
+  const pinInput2 = usePinInput(pinInputProps);
+  return <PinInputProvider value={pinInput2}><div {...pinInput2?.().rootProps} {...htmlProps} /></PinInputProvider>;
+};
+
+// src/pin-input/pin-input-field.tsx
+var PinInputField = (props) => {
+  const { index, ...htmlProps } = props;
+  const pinInput2 = usePinInputContext();
+  return <input {...pinInput2().getInputProps({
+    index
+  })} {...htmlProps} />;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  PinInput,
+  PinInputField,
+  useAccordion,
+  usePinInput
+});

package/dist/index.d.ts

@@ -0,0 +1,81 @@
+import * as solid_js from 'solid-js';
+import { JSX } from 'solid-js';
+import * as accordion from '@zag-js/accordion';
+import * as pinInput from '@zag-js/pin-input';
+
+declare type UseAccordionProps = Omit<accordion.Context, 'id'> & {
+    defaultValue?: accordion.Context['value'];
+};
+declare type UseAccordionReturn = ReturnType<typeof useAccordion>;
+declare const useAccordion: (props: UseAccordionProps) => solid_js.Accessor<{
+    value: string | string[] | null;
+    setValue(value: string | string[]): void;
+    rootProps: solid_js.JSX.HTMLAttributes<any>;
+    getItemState(props: {
+        value: string;
+        disabled?: boolean | undefined;
+    }): {
+        isOpen: boolean;
+        isFocused: boolean;
+        isDisabled: boolean;
+    };
+    getItemProps(props: {
+        value: string;
+        disabled?: boolean | undefined;
+    }): solid_js.JSX.HTMLAttributes<any>;
+    getContentProps(props: {
+        value: string;
+        disabled?: boolean | undefined;
+    }): solid_js.JSX.HTMLAttributes<any>;
+    getTriggerProps(props: {
+        value: string;
+        disabled?: boolean | undefined;
+    }): solid_js.JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+}>;
+
+declare type AccordionProps = UseAccordionProps & JSX.HTMLAttributes<HTMLDivElement>;
+declare function Accordion(props: AccordionProps): JSX.Element;
+
+declare type AccordionButtonProps = JSX.HTMLAttributes<HTMLButtonElement>;
+declare function AccordionButton(props: AccordionButtonProps): JSX.Element;
+
+declare type AccordionItemProps = JSX.HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    disabled?: boolean;
+};
+declare function AccordionItem(props: AccordionItemProps): JSX.Element;
+
+declare type AccordionPanelProps = JSX.HTMLAttributes<HTMLDivElement>;
+declare function AccordionPanel(props: AccordionPanelProps): JSX.Element;
+
+declare type Assign<Target, Source> = Omit<Target, keyof Source> & Source;
+
+declare type UsePinInputProps = Omit<pinInput.Context, 'id'> & {
+    defaultValue?: pinInput.Context['value'];
+};
+declare type UsePinInputReturn = ReturnType<typeof usePinInput>;
+declare const usePinInput: (props: UsePinInputProps) => solid_js.Accessor<{
+    value: string[];
+    valueAsString: string;
+    isValueComplete: boolean;
+    setValue(value: string[]): void;
+    clearValue(): void;
+    setValueAtIndex(index: number, value: string): void;
+    focus: () => void;
+    rootProps: solid_js.JSX.HTMLAttributes<any>;
+    labelProps: solid_js.JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    hiddenInputProps: solid_js.JSX.InputHTMLAttributes<HTMLInputElement>;
+    getInputProps({ index }: {
+        index: number;
+    }): solid_js.JSX.InputHTMLAttributes<HTMLInputElement>;
+}>;
+
+declare type PinInputProps = Assign<JSX.HTMLAttributes<HTMLDivElement>, UsePinInputProps>;
+declare const PinInput: (props: PinInputProps) => JSX.Element;
+
+declare type PinInputFieldProps = {
+    index: number;
+} & JSX.HTMLAttributes<HTMLInputElement>;
+declare const PinInputField: (props: PinInputFieldProps) => JSX.Element;
+
+export { Accordion, AccordionButton, AccordionButtonProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, PinInput, PinInputField, PinInputFieldProps, PinInputProps, UseAccordionProps, UseAccordionReturn, UsePinInputProps, UsePinInputReturn, useAccordion, usePinInput };

package/dist/index.esm.js

@@ -0,0 +1,174 @@
+// src/accordion/accordion.tsx
+import { splitProps } from "solid-js";
+
+// src/createContext.ts
+import {
+  createContext as createSolidContext,
+  useContext as useSolidContext
+} from "solid-js";
+function getErrorMessage(hook, provider) {
+  return `${hook} returned \`undefined\`. Seems you forgot to wrap component within ${provider}`;
+}
+function createContext(options = {}) {
+  const {
+    strict = true,
+    hookName = "useContext",
+    providerName = "Provider",
+    errorMessage
+  } = options;
+  const Context2 = createSolidContext(void 0);
+  function useContext() {
+    const context = useSolidContext(Context2);
+    if (!context && strict) {
+      const error = new Error(errorMessage ?? getErrorMessage(hookName, providerName));
+      error.name = "ContextError";
+      Error.captureStackTrace?.(error, useContext);
+      throw error;
+    }
+    return context;
+  }
+  return [Context2.Provider, useContext, Context2];
+}
+
+// src/accordion/accordion-context.tsx
+var [AccordionProvider, useAccordionContext] = createContext({
+  hookName: "useAccordionContext",
+  providerName: "<AccordionProvider />"
+});
+
+// src/accordion/use-accordion.ts
+import * as accordion from "@zag-js/accordion";
+import { normalizeProps, useMachine } from "@zag-js/solid";
+import { createMemo, createUniqueId } from "solid-js";
+var useAccordion = (props) => {
+  const [state, send] = useMachine(
+    accordion.machine({
+      id: createUniqueId(),
+      ...props,
+      value: props.defaultValue ?? props.value
+    })
+  );
+  return createMemo(() => accordion.connect(state, send, normalizeProps));
+};
+
+// src/accordion/accordion.tsx
+function Accordion(props) {
+  const [accordionProps, htmlProps] = splitProps(props, [
+    "collapsible",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "ids",
+    "multiple",
+    "onChange",
+    "value"
+  ]);
+  const accordion2 = useAccordion(accordionProps);
+  return <AccordionProvider value={accordion2}><div {...accordion2?.().rootProps} {...htmlProps} /></AccordionProvider>;
+}
+
+// src/accordion/accordion-item-context.ts
+var [AccordionItemProvider, useAccordionItemContext] = createContext(
+  {
+    hookName: "useAccordionItemContext",
+    providerName: "<AccordionItemProvider />"
+  }
+);
+
+// src/accordion/accordion-button.tsx
+function AccordionButton(props) {
+  const api = useAccordionContext();
+  const { value, disabled } = useAccordionItemContext();
+  return <button {...api?.().getTriggerProps?.({
+    value,
+    disabled
+  })} {...props} />;
+}
+
+// src/accordion/accordion-item.tsx
+import { splitProps as splitProps2 } from "solid-js";
+function AccordionItem(props) {
+  const [itemProps, htmlProps] = splitProps2(props, ["value", "disabled"]);
+  const api = useAccordionContext();
+  return <AccordionItemProvider value={itemProps}><div {...api?.().getItemProps({ value: itemProps.value })} {...htmlProps} /></AccordionItemProvider>;
+}
+
+// src/accordion/accordion-panel.tsx
+function AccordionPanel(props) {
+  const api = useAccordionContext();
+  const { value, disabled } = useAccordionItemContext();
+  return <div {...api?.().getContentProps({
+    value,
+    disabled
+  })} {...props} />;
+}
+
+// src/pin-input/pin-input.tsx
+import { splitProps as splitProps3 } from "solid-js";
+
+// src/pin-input/pin-input-context.ts
+var [PinInputProvider, usePinInputContext] = createContext({
+  hookName: "usePinInputContext",
+  providerName: "<PinInputProvider />"
+});
+
+// src/pin-input/use-pin-input.ts
+import * as pinInput from "@zag-js/pin-input";
+import { normalizeProps as normalizeProps2, useMachine as useMachine2 } from "@zag-js/solid";
+import { createMemo as createMemo2, createUniqueId as createUniqueId2 } from "solid-js";
+var usePinInput = (props) => {
+  const [state, send] = useMachine2(
+    pinInput.machine({
+      id: createUniqueId2(),
+      ...props,
+      value: props.defaultValue ?? props.value ?? []
+    })
+  );
+  return createMemo2(() => pinInput.connect(state, send, normalizeProps2));
+};
+
+// src/pin-input/pin-input.tsx
+var PinInput = (props) => {
+  const [pinInputProps, htmlProps] = splitProps3(props, [
+    "autoFocus",
+    "blurOnComplete",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "getRootNode",
+    "ids",
+    "invalid",
+    "mask",
+    "name",
+    "onChange",
+    "onComplete",
+    "onInvalid",
+    "otp",
+    "pattern",
+    "placeholder",
+    "translations",
+    "type",
+    "value"
+  ]);
+  const pinInput2 = usePinInput(pinInputProps);
+  return <PinInputProvider value={pinInput2}><div {...pinInput2?.().rootProps} {...htmlProps} /></PinInputProvider>;
+};
+
+// src/pin-input/pin-input-field.tsx
+var PinInputField = (props) => {
+  const { index, ...htmlProps } = props;
+  const pinInput2 = usePinInputContext();
+  return <input {...pinInput2().getInputProps({
+    index
+  })} {...htmlProps} />;
+};
+export {
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
+  PinInput,
+  PinInputField,
+  useAccordion,
+  usePinInput
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@ark-ui/solid",
+  "version": "0.0.0-rc-20221106094212",
+  "description": "",
+  "keywords": [],
+  "homepage": "https://github.com/chakra-ui/ark#readme",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/ark.git",
+    "directory": "packages/solid"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/ark/issues"
+  },
+  "dependencies": {
+    "@zag-js/accordion": "0.2.0",
+    "@zag-js/checkbox": "0.2.0",
+    "@zag-js/dialog": "0.2.0",
+    "@zag-js/editable": "0.2.0",
+    "@zag-js/hover-card": "0.1.0",
+    "@zag-js/menu": "0.2.0",
+    "@zag-js/number-input": "0.2.0",
+    "@zag-js/pagination": "0.1.0",
+    "@zag-js/pin-input": "0.2.0",
+    "@zag-js/popover": "0.2.0",
+    "@zag-js/pressable": "0.3.0",
+    "@zag-js/radio": "0.1.0",
+    "@zag-js/range-slider": "0.2.0",
+    "@zag-js/rating": "0.2.0",
+    "@zag-js/slider": "0.2.0",
+    "@zag-js/solid": "0.2.0",
+    "@zag-js/tags-input": "0.3.0",
+    "@zag-js/toast": "0.2.0",
+    "@zag-js/tooltip": "0.2.0"
+  },
+  "devDependencies": {
+    "solid-js": "1.6.1",
+    "tsup": "6.4.0",
+    "typescript": "4.8.4"
+  },
+  "peerDependencies": {
+    "solid-js": ">=1.6.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts",
+    "lint": "eslint --ext .ts,.tsx src",
+    "typecheck": "tsc --noEmit"
+  }
+}