@koine/react 2.0.0-beta.10 → 2.0.0-beta.11

package/Forms/Switch/Switch.js

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    SwitchTrack: function() {
-        return SwitchTrack;
-    },
-    SwitchHandle: function() {
-        return SwitchHandle;
-    },
-    Switch: function() {
-        return Switch;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _styled = require("../../styles/styled");
-const _Checkbox = require("../Checkbox");
-const _Toggle = require("../Toggle");
-const _useToggle = require("../Toggle/useToggle");
-const SWITCH_GUTTER = 0.25;
-const SWITCH_HANDLE_SIZE = 1;
-const SwitchTrack = _styledcomponents.default.span`
-  position: relative;
-  width: ${SWITCH_HANDLE_SIZE * 3}em;
-  height: ${SWITCH_HANDLE_SIZE * 1.5}em;
-  padding: ${SWITCH_GUTTER}em;
-  border-radius: ${SWITCH_HANDLE_SIZE}em;
-  ${_Toggle.toggleBase}
-
-  input:focus ~ & {
-    ${_styled.stateFocus}
-  }
-
-  input:disabled ~ & {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-const SwitchHandle = _styledcomponents.default.span`
-  position: absolute;
-  width: ${SWITCH_HANDLE_SIZE}em;
-  height: ${SWITCH_HANDLE_SIZE}em;
-  left: ${SWITCH_GUTTER}em;
-  margin-top: -1px;
-  /* border: 1px solid currentColor; */
-  background: currentColor;
-  opacity: 0.5;
-  border-radius: 100%;
-  transition: all 0.18s ease-in-out;
-
-  input:checked + ${SwitchTrack} & {
-    opacity: 1;
-    left: calc(100% - ${SWITCH_HANDLE_SIZE}em - ${SWITCH_GUTTER}em);
-  }
-`;
-const Switch = /*#__PURE__*/ (0, _react.forwardRef)(function Switch(props, ref) {
-    const { rootProps, Inputs, label } = (0, _useToggle.useToggle)(props, ref);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Checkbox.CheckboxRoot, {
-        ...rootProps,
-        children: [
-            Inputs,
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(SwitchTrack, {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(SwitchHandle, {})
-            }),
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Checkbox.CheckboxLabel, {
-                children: label
-            })
-        ]
-    });
-});

package/Forms/Switch/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Switch"), exports);

package/Forms/Textarea/Textarea.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    TextareaNative: function() {
-        return TextareaNative;
-    },
-    Textarea: function() {
-        return Textarea;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Label = require("../Label/Label");
-const _styles = require("../styles");
-const TextareaNative = _styledcomponents.default.textarea`
-  ${_styles.inputBase}
-  ${_styles.inputFocus}
-  resize: vertical;
-`;
-const Textarea = /*#__PURE__*/ (0, _react.forwardRef)(function Textarea({ register, name, label, ...props }, ref) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-        children: [
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
-                children: label
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(TextareaNative, {
-                ...register ? register(name) : {
-                    name,
-                    ref
-                },
-                ...props
-            })
-        ]
-    });
-});

package/Forms/Textarea/TextareaRich.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TextareaRich", {
-    enumerable: true,
-    get: function() {
-        return TextareaRich;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _Editor = require("../../Editor");
-const _Label = require("../Label/Label");
-const _helpers = require("../helpers");
-const Root = _styledcomponents.default.div`
-  .ProseMirror {
-    max-height: 160px;
-    overflow: auto;
-  }
-  .EditorContent {
-    position: relative;
-    &:after {
-      position: absolute;
-      content: "";
-      bottom: 0;
-      left: 0;
-      right: 16px; /* scrollbar width? */
-      height: 3em;
-      background: linear-gradient(0deg, white, white 33%, transparent);
-      pointer-events: none;
-    }
-  }
-`;
-const TextareaRich = /*#__PURE__*/ (0, _react.forwardRef)(function TextareaRich({ register, setValue, name, label, defaultValue = "", onChange, ...props }, ref) {
-    if (register) register(name);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(Root, {
-        children: [
-            label && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Label.Label, {
-                children: label
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Editor.Editor, {
-                options: {
-                    // element: <TextareaAutosize />,
-                    content: defaultValue,
-                    onUpdate: (onChange || setValue) && name ? ({ editor })=>{
-                        const value = editor.getHTML();
-                        if (setValue) setValue(name, value);
-                        (0, _helpers.triggerOnChange)(onChange, name, value);
-                    } : undefined
-                },
-                ...props
-            })
-        ]
-    });
-});

package/Forms/Textarea/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Textarea"), exports);
-_export_star._(require("./TextareaRich"), exports);

package/Forms/Toggle/Toggle-tailwind.js

@@ -1,99 +0,0 @@
-// /**
-//  * @file
-//  *
-//  * About accessibility:
-//  * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
-//  *
-//  * @see tests on tailwind playground:
-//  * - https://play.tailwindcss.com/RVldIcmZa5
-//  */
-//  import { type FormControlState } from "../FormControl";
-//  import { FormControlStatefulElement } from "../FormControlStatefulElement";
-//  export type ToggleProps = React.ComponentProps<"span">;
-//  export const Toggle = ({ className = "", ...props }: ToggleProps) => {
-//    return (
-//      <span
-//        className={`relative my-0 -mx-1 inline-flex h-8 w-8 items-center justify-center p-1 ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleLabelProps = React.ComponentProps<"span">;
-//  export const ToggleLabel = ({ className = "", ...props }: ToggleLabelProps) => {
-//    return (
-//      <span
-//        className={`text-grey-200 ml-3 select-none ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleLabelSubProps = React.ComponentProps<"small">;
-//  export const ToggleLabelSub = ({
-//    className = "",
-//    ...props
-//  }: ToggleLabelSubProps) => {
-//    return (
-//      <span
-//        className={`text-xs opacity-70 ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleIndicatorProps = FormControlState & {
-//    className?: string;
-//  };
-//  export const ToggleIndicator = ({
-//    className,
-//    ...props
-//  }: ToggleIndicatorProps) => {
-//    return (
-//      <FormControlStatefulElement
-//        as="span"
-//        className={`relative flex h-[24px] w-[24px] rounded-md border border-solid ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleIndicatorFgProps = React.ComponentProps<"svg">;
-//  export const ToggleIndicatorFg = ({
-//    className = "",
-//    ...props
-//  }: ToggleIndicatorFgProps) => {
-//    return (
-//      <svg
-//        className={`on-toggle-checked:scale-100 absolute left-0 h-full w-full scale-0 transition-transform ${className}`}
-//        {...props}
-//      />
-//    );
-//  };
-//  export type ToggleIndicatorSquaredProps = ToggleIndicatorProps;
-//  export const ToggleIndicatorSquared = (props: ToggleIndicatorSquaredProps) => {
-//    return (
-//      <ToggleIndicator {...props}>
-//        <ToggleIndicatorFg viewBox="0 0 24 24">
-//          <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-//        </ToggleIndicatorFg>
-//      </ToggleIndicator>
-//    );
-//  };
-//  export type ToggleIndicatorRoundedProps = ToggleIndicatorProps & {
-//    /** @default 6 */
-//    r?: number;
-//  };
-//  export const ToggleIndicatorRounded = ({
-//    r = 6,
-//    ...props
-//  }: ToggleIndicatorRoundedProps) => {
-//    return (
-//      <ToggleIndicator {...props}>
-//        <ToggleIndicatorFg viewBox="0 0 24 24">
-//          <circle
-//            r={r}
-//            cx="12"
-//            cy="12"
-//          />
-//        </ToggleIndicatorFg>
-//      </ToggleIndicator>
-//    );
-//  };
-"use strict";

package/Forms/Toggle/Toggle.js

@@ -1,175 +0,0 @@
-/**
- * @file
- *
- * About accessibility:
- * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
- */ "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    toggleBase: function() {
-        return toggleBase;
-    },
-    toggleIndicatorBg: function() {
-        return toggleIndicatorBg;
-    },
-    toggleIndicatorBgShape: function() {
-        return toggleIndicatorBgShape;
-    },
-    toggleIndicatorFg: function() {
-        return toggleIndicatorFg;
-    },
-    Toggle: function() {
-        return Toggle;
-    },
-    ToggleLabel: function() {
-        return ToggleLabel;
-    },
-    ToggleLabelSub: function() {
-        return ToggleLabelSub;
-    },
-    ToggleIndicatorHolder: function() {
-        return ToggleIndicatorHolder;
-    },
-    ToggleIndicatorBgSquare: function() {
-        return ToggleIndicatorBgSquare;
-    },
-    ToggleIndicatorBgCircle: function() {
-        return ToggleIndicatorBgCircle;
-    },
-    ToggleIndicatorFg: function() {
-        return ToggleIndicatorFg;
-    },
-    ToggleIndicatorSquared: function() {
-        return ToggleIndicatorSquared;
-    },
-    ToggleIndicatorRounded: function() {
-        return ToggleIndicatorRounded;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const _styled = require("../../styles/styled");
-const toggleBase = `
-  border: 1px solid var(--forms-border-color);
-`;
-const toggleIndicatorBg = `
-  display: inline-block;
-  flex-shrink: 0;
-  width: 100%;
-  height: 100%;
-`;
-const toggleIndicatorBgShape = `
-  ${toggleIndicatorBg}
-  fill: none;
-  stroke-width: 2px;
-  stroke: var(--forms-border-color);
-`;
-const toggleIndicatorFg = `
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  fill: currentcolor;
-`;
-const Toggle = _styledcomponents.default.span`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2em;
-  height: 2em;
-  margin: 0 -0.3em; /* rtl */
-  padding: 0.3em;
-`;
-const ToggleLabel = _styledcomponents.default.span`
-  margin-left: 0.6em; /* rtl */
-`;
-const ToggleLabelSub = _styledcomponents.default.small`
-  opacity: 0.7;
-  font-size: 0.7em;
-`;
-const ToggleIndicatorHolder = _styledcomponents.default.span`
-  position: relative;
-  display: flex;
-
-  input:focus ~ & {
-    ${_styled.stateFocus}
-  }
-`;
-const ToggleIndicatorBgSquare = _styledcomponents.default.svg`
-  ${toggleIndicatorBgShape}
-`;
-const ToggleIndicatorBgCircle = _styledcomponents.default.svg`
-  ${toggleIndicatorBgShape}
-`;
-const ToggleIndicatorFg = _styledcomponents.default.svg`
-  ${toggleIndicatorFg}
-  transform: scale(0);
-  transition: transform 0.18s ease;
-
-  input:checked + ${ToggleIndicatorHolder} & {
-    transform: scale(1);
-  }
-`;
-const ToggleIndicatorSquared = (props)=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToggleIndicatorHolder, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ToggleIndicatorBgSquare, {
-                viewBox: "0 0 24 24",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("rect", {
-                    width: "24",
-                    height: "24"
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ToggleIndicatorFg, {
-                viewBox: "0 0 24 24",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
-                    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-                })
-            })
-        ]
-    });
-};
-const ToggleIndicatorRounded = ({ r = 6 })=>{
-    const id = (0, _react.useId)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToggleIndicatorHolder, {
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(ToggleIndicatorBgCircle, {
-                viewBox: "0 0 24 24",
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("circle", {
-                        cy: "12",
-                        cx: "12",
-                        r: "12",
-                        id: `r_${id}`,
-                        clipPath: `url(#c_${id})`
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)("clipPath", {
-                        id: `c_${id}`,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)("use", {
-                            xlinkHref: `#r_${id}`
-                        })
-                    })
-                ]
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(ToggleIndicatorFg, {
-                viewBox: "0 0 24 24",
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("circle", {
-                    r: r,
-                    cx: "12",
-                    cy: "12"
-                })
-            })
-        ]
-    });
-};

package/Forms/Toggle/index.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./Toggle"), exports);

package/Forms/Toggle/useToggle-tailwind.js

@@ -1,202 +0,0 @@
-// import React, { useCallback, useId, useMemo } from "react";
-// import type { Option } from "@koine/react";
-// import type { FormControlElementProps } from "../FormControl";
-// export type UseToggleProps = FormControlElementProps<React.FC> & {
-//   // defaultChecked?: boolean;
-//   value?: boolean;
-//   valueTrue?: string;
-//   valueFalse?: string;
-//   options?: Option[];
-// };
-// /**
-//  * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
-//  * components, it works in fact in two modes:
-//  *
-//  * 1: behaviour as standard checkbox
-//  * yup validation would simply look like:
-//  *
-//  * ```ts
-//  * privacy:  boolean().required(),
-//  * ```
-//  *
-//  * 1b: to make the checkbox required (either with `true` or `false`):
-//  * ```
-//  * privacy: boolean().oneOf([true]).required()
-//  * ```
-//  *
-//  * 2: beahviour as two radio for checkbox with custom true/false values as
-//  * strings yup validation would look like:
-//  *
-//  * ```ts
-//  * newsletter: string().oneOf(["yes", "no"]).required(),
-//  * // add `.nullable()` if you do not provide a string `defaultValue`
-//  *
-//  * // to do not make it required and avoid triggering an error when the input is
-//  * // untouched you need to set the default value of the input in the form
-//  * // initialization's `defaultValues` as such:
-//  *
-//  * useForm({ defaultValues: { newsletter: "no" }})
-//  * ```
-//  *
-//  * To enable this mode either pass the props `valueTrue` and `valueFalse` or
-//  * an array of options with the shape of `Option`
-//  */
-// export function useToggle(
-//   props: UseToggleProps,
-//   ref: React.ForwardedRef<HTMLInputElement>
-// ) {
-//   const {
-//     actions,
-//     form: { watch, register },
-//     name,
-//     state,
-//     strings: { label },
-//     options,
-//     value: propValue,
-//     ...restProps
-//   } = props;
-//   let {
-//     valueTrue,
-//     valueFalse,
-//     // defaultChecked,
-//     // defaultValue,
-//     // eslint-disable-next-line prefer-const
-//     // ...remainingInputProps
-//   } = restProps;
-//   // use options data convention to pass on the true/false values
-//   if (options) {
-//     valueTrue = options
-//       .filter((opt) => opt.value === "true")[0]
-//       .label.toString();
-//     valueFalse = options
-//       .filter((opt) => opt.value === "false")[0]
-//       .label.toString();
-//   }
-//   const id = useId();
-//   const idTrue = `${id}-true`;
-//   const idFalse = `${id}-false`;
-//   const isRadio = !!(valueTrue && valueFalse);
-//   // // manage default values for both toggle modes
-//   // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
-//   // // TODO: maybe throw an error if the defaultValue that arrives here is not
-//   // // a valid value
-//   // defaultValue =
-//   //   defaultValue === valueTrue || defaultValue === valueFalse
-//   //     ? defaultValue
-//   //     : valueFalse;
-//   // get the value either from the uncontrolled watched input or from the given
-//   // prop to control the component
-//   let value = watch(name);
-//   if (propValue) {
-//     value = propValue;
-//   }
-//   /**
-//    * Accessibility.
-//    *
-//    * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
-//    * Without this *only* the arrow keys would change the checkbox state
-//    */
-//   const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> =
-//     useCallback(
-//       (event) => {
-//         if (event.key === " ") {
-//           event.preventDefault();
-//           event.stopPropagation();
-//           const firstInput = event.target as HTMLInputElement;
-//           const next = firstInput.nextElementSibling as HTMLInputElement;
-//           const prev = firstInput.previousElementSibling as HTMLInputElement;
-//           const secondInput = next?.tagName === "INPUT" ? next : prev;
-//           let target = firstInput;
-//           if (firstInput.checked) {
-//             target = secondInput;
-//           } else {
-//             if (!secondInput.checked) {
-//               target =
-//                 firstInput.value === valueTrue ? firstInput : secondInput;
-//             }
-//           }
-//           if (target) target.click();
-//         }
-//       },
-//       [valueTrue]
-//     );
-//   // collect all the return values that are dependent on the current value
-//   // of the input
-//   const valueDependentProps = useMemo(
-//     () => ({
-//       rootProps: {
-//         htmlFor: isRadio
-//           ? !value || value === valueFalse
-//             ? idTrue
-//             : idFalse
-//           : id,
-//       },
-//       label: label ? label : value,
-//       value,
-//     }),
-//     [value, valueFalse, isRadio, id, idTrue, idFalse, label]
-//   );
-//   const Inputs = useMemo(
-//     () =>
-//       isRadio ? (
-//         <>
-//           <input
-//             className="peer sr-only"
-//             id={idFalse}
-//             {...register(name, {
-//               onBlur: () => actions.setFocused(false),
-//             })}
-//             onFocus={() => actions.setFocused(true)}
-//             // {...remainingInputProps}
-//             onKeyDown={handleKeyDown}
-//             type="radio"
-//             value={valueFalse}
-//             // defaultChecked={defaultValue === valueFalse}
-//           />
-//           <input
-//             className="peer sr-only"
-//             id={idTrue}
-//             {...register(name, {
-//               onBlur: () => actions.setFocused(false),
-//             })}
-//             onFocus={() => actions.setFocused(true)}
-//             // {...remainingInputProps}
-//             onKeyDown={handleKeyDown}
-//             type="radio"
-//             value={valueTrue}
-//             // defaultChecked={defaultValue === valueTrue}
-//           />
-//         </>
-//       ) : (
-//         <input
-//           className="peer sr-only"
-//           id={id}
-//           type="checkbox"
-//           {...register(name, { onBlur: () => actions.setFocused(false) })}
-//           onFocus={() => actions.setFocused(true)}
-//           // {...remainingInputProps}
-//           // defaultChecked={defaultChecked}
-//         />
-//       ),
-//     [
-//       name,
-//       actions,
-//       // remainingInputProps,
-//       handleKeyDown,
-//       isRadio,
-//       idFalse,
-//       idTrue,
-//       valueFalse,
-//       valueTrue,
-//       id,
-//       // defaultChecked,
-//       // defaultValue,
-//     ]
-//   );
-//   // console.log("useToggle: render", value);
-//   return {
-//     ...valueDependentProps,
-//     Inputs,
-//   };
-// }
-"use strict";