@koine/react 1.0.20 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/Carousel/CarouselCss.js +1 -2
  2. package/Details/Details.js +1 -3
  3. package/Forms/Toggle/Toggle.js +1 -2
  4. package/Rating/Rating.js +1 -2
  5. package/Tabs/TabsMui.d.ts +18 -126
  6. package/Tabs/tw/bare.d.ts +18 -126
  7. package/Tabs/tw/material.d.ts +30 -246
  8. package/Tabs/useTabs.js +1 -2
  9. package/node/Carousel/CarouselCss.js +1 -2
  10. package/node/Details/Details.js +1 -2
  11. package/node/Forms/Toggle/Toggle.js +2 -3
  12. package/node/Rating/Rating.js +2 -3
  13. package/node/Tabs/useTabs.js +1 -2
  14. package/package.json +8 -8
package/Tabs/useTabs.js CHANGED
@@ -1,6 +1,5 @@
1
- import { useCallback, /* useId, */ useMemo } from "react";
1
+ import { useCallback, useId, useMemo } from "react";
2
2
  import { unstable_useControlled as useControlled } from "@mui/utils";
3
- import { useId } from "../hooks/useId";
4
3
  export var useTabs = function (props) {
5
4
  var valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, orientation = props.orientation, direction = props.direction, selectionFollowsFocus = props.selectionFollowsFocus;
6
5
  var _a = useControlled({
package/node/Carousel/CarouselCss.js CHANGED
@@ -6,7 +6,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
6
6
  var react_1 = require("react");
7
7
  var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
8
  var Grid_1 = require("../Grid");
9
- var useId_1 = require("../hooks/useId");
10
9
  exports.CarouselCssRow = (0, styled_components_1.default)(Grid_1.Row)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n ", "\n\n scroll-behavior: smooth;\n scroll-snap-type: x;\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"], ["\n ", "\n\n scroll-behavior: smooth;\n scroll-snap-type: x;\n -ms-overflow-style: none;\n scrollbar-width: none;\n\n &::-webkit-scrollbar {\n display: none;\n }\n"])), function (_a) {
11
10
  var cs = _a.$gutter, gutter = _a.theme.gutter;
12
11
  return "\n margin-left: -".concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2, "px;\n margin-right: -").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : (gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs]) * 2, "px;\n padding-left: ").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs], "px;\n padding-right: ").concat(cs === Grid_1.GRID_GUTTER_DEFAULT ? gutter[Grid_1.GRID_GUTTER_DEFAULT] : gutter[Grid_1.GRID_GUTTER_DEFAULT] - gutter[cs], "px;\n ");
@@ -18,7 +17,7 @@ exports.CarouselCssCol = (0, styled_components_1.default)(Grid_1.Col)(templateOb
18
17
  var KoineCarouselCss = function (_a) {
19
18
  var items = _a.items, $gutterRow = _a.$gutterRow, $gutterCol = _a.$gutterCol, _b = _a.$gutter, $gutter = _b === void 0 ? "quarter" : _b, $proportion = _a.$proportion, _c = _a.$snap, $snap = _c === void 0 ? "center" : _c, width = _a.width, children = _a.children, colProps = tslib_1.__rest(_a, ["items", "$gutterRow", "$gutterCol", "$gutter", "$proportion", "$snap", "width", "children"]);
20
19
  var slides = children ? react_1.Children.toArray(children) : items;
21
- var id = (0, useId_1.useId)();
20
+ var id = (0, react_1.useId)();
22
21
  if (!slides)
23
22
  return null;
24
23
  return ((0, jsx_runtime_1.jsx)(exports.CarouselCssRow, tslib_1.__assign({ "$noWrap": true, "$gutter": $gutterRow || $gutter }, { children: slides.map(function (_slide, idx) { return ((0, jsx_runtime_1.jsx)(exports.CarouselCssCol, tslib_1.__assign({}, colProps, { "$gutter": $gutterCol || $gutter, "$width": width }, { children: slides[idx] }), "CarouselCssCol-".concat(id, "-").concat(idx))); }) })));
package/node/Details/Details.js CHANGED
@@ -6,7 +6,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
6
6
  var react_1 = require("react");
7
7
  var useWindowSize_1 = require("../hooks/useWindowSize");
8
8
  var helpers_1 = require("../helpers");
9
- var useId_1 = require("../hooks/useId");
10
9
  exports.Root = "details";
11
10
  exports.Summary = "summary";
12
11
  exports.Body = "div";
@@ -26,7 +25,7 @@ var DetailsWithRef = (0, react_1.forwardRef)(function Details(_a, ref) {
26
25
  var open = isControlled ? propOpen : stateOpen;
27
26
  var _d = (0, react_1.useState)(open ? "unset" : "hidden"), overflow = _d[0], setOverflow = _d[1];
28
27
  var content = (0, react_1.useRef)(null);
29
- var defaultId = (0, useId_1.useId)();
28
+ var defaultId = (0, react_1.useId)();
30
29
  id = id || defaultId;
31
30
  var handleClick = (0, react_1.useCallback)(function () {
32
31
  if (hash) {
package/node/Forms/Toggle/Toggle.js CHANGED
@@ -9,10 +9,9 @@ var jsx_runtime_1 = require("react/jsx-runtime");
9
9
  * About accessibility:
10
10
  * - minimum target size of 44px https://www.w3.org/TR/WCAG21/#target-size
11
11
  */
12
- // import { useId } from "react";
12
+ var react_1 = require("react");
13
13
  var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
14
14
  var styled_1 = require("../../styles/styled");
15
- var useId_1 = require("../../hooks/useId");
16
15
  exports.toggleBase = "\n border: 1px solid var(--forms-border-color);\n";
17
16
  exports.toggleIndicatorBg = "\n display: inline-block;\n flex-shrink: 0;\n width: 100%;\n height: 100%;\n";
18
17
  exports.toggleIndicatorBgShape = "\n ".concat(exports.toggleIndicatorBg, "\n fill: none;\n stroke-width: 2px;\n stroke: var(--forms-border-color);\n");
@@ -30,7 +29,7 @@ var ToggleIndicatorSquared = function (props) {
30
29
  exports.ToggleIndicatorSquared = ToggleIndicatorSquared;
31
30
  var ToggleIndicatorRounded = function (_a) {
32
31
  var _b = _a.r, r = _b === void 0 ? 6 : _b;
33
- var id = (0, useId_1.useId)();
32
+ var id = (0, react_1.useId)();
34
33
  return ((0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorHolder, { children: [(0, jsx_runtime_1.jsxs)(exports.ToggleIndicatorBgCircle, tslib_1.__assign({ viewBox: "0 0 24 24" }, { children: [(0, jsx_runtime_1.jsx)("circle", { cy: "12", cx: "12", r: "12", id: "r_".concat(id), clipPath: "url(#c_".concat(id, ")") }), (0, jsx_runtime_1.jsx)("clipPath", tslib_1.__assign({ id: "c_".concat(id) }, { children: (0, jsx_runtime_1.jsx)("use", { xlinkHref: "#r_".concat(id) }) }))] })), (0, jsx_runtime_1.jsx)(exports.ToggleIndicatorFg, tslib_1.__assign({ viewBox: "0 0 24 24" }, { children: (0, jsx_runtime_1.jsx)("circle", { r: r, cx: "12", cy: "12" }) }))] }));
35
34
  };
36
35
  exports.ToggleIndicatorRounded = ToggleIndicatorRounded;
package/node/Rating/Rating.js CHANGED
@@ -5,11 +5,10 @@ var tslib_1 = require("tslib");
5
5
  var jsx_runtime_1 = require("react/jsx-runtime");
6
6
  var react_1 = require("react");
7
7
  var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
8
- var useId_1 = require("../hooks/useId");
9
8
  exports.RatingStarRoot = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n display: inline-block;\n vertical-align: middle;\n margin-right: 1px;\n"], ["\n display: inline-block;\n vertical-align: middle;\n margin-right: 1px;\n"])));
10
9
  var RatingStar = function (_a) {
11
10
  var value = _a.value, _b = _a.colorBg, colorBg = _b === void 0 ? "#FFD84C" : _b, _c = _a.colorStroke, colorStroke = _c === void 0 ? "#947813" : _c, size = _a.size, props = tslib_1.__rest(_a, ["value", "colorBg", "colorStroke", "size"]);
12
- var id = (0, useId_1.useId)();
11
+ var id = (0, react_1.useId)();
13
12
  return ((0, jsx_runtime_1.jsxs)(exports.RatingStarRoot, tslib_1.__assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", tslib_1.__assign({ id: id, x1: "0", y1: "0", x2: "1", y2: "0" }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0", stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: colorBg }), (0, jsx_runtime_1.jsx)("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] })) }), (0, jsx_runtime_1.jsx)("path", { stroke: colorStroke, strokeWidth: "0.5", fill: "url(#".concat(id, ")"), d: "M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" })] })));
14
13
  };
15
14
  exports.RatingStar = RatingStar;
@@ -19,7 +18,7 @@ exports.RatingValue = styled_components_1.default.span(templateObject_4 || (temp
19
18
  exports.RatingRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["\n display: flex;\n align-items: center;\n\n &:hover ", " {\n display: inline-block;\n }\n"], ["\n display: flex;\n align-items: center;\n\n &:hover ", " {\n display: inline-block;\n }\n"])), exports.RatingValue);
20
19
  var Rating = function (_a) {
21
20
  var _b = _a.value, value = _b === void 0 ? 0 : _b, count = _a.count, _c = _a.min, min = _c === void 0 ? 0 : _c, _d = _a.max, max = _d === void 0 ? 5 : _d, _e = _a.showDetails, showDetails = _e === void 0 ? true : _e, colorBg = _a.colorBg, colorStroke = _a.colorStroke, _f = _a.starSize, starSize = _f === void 0 ? 16 : _f;
22
- var id = (0, useId_1.useId)();
21
+ var id = (0, react_1.useId)();
23
22
  var currentValue = (0, react_1.useState)(value)[0] /* , _setCurrentValue */;
24
23
  var _g = (0, react_1.useState)([]), stars = _g[0], setStars = _g[1];
25
24
  var getStars = (0, react_1.useCallback)(function (activeCount) {
package/node/Tabs/useTabs.js CHANGED
@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useTabs = void 0;
4
4
  var react_1 = require("react");
5
5
  var utils_1 = require("@mui/utils");
6
- var useId_1 = require("../hooks/useId");
7
6
  var useTabs = function (props) {
8
7
  var valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, orientation = props.orientation, direction = props.direction, selectionFollowsFocus = props.selectionFollowsFocus;
9
8
  var _a = (0, utils_1.unstable_useControlled)({
@@ -12,7 +11,7 @@ var useTabs = function (props) {
12
11
  name: "Tabs",
13
12
  state: "value",
14
13
  }), value = _a[0], setValue = _a[1];
15
- var idPrefix = (0, useId_1.useId)();
14
+ var idPrefix = (0, react_1.useId)();
16
15
  var onSelected = (0, react_1.useCallback)(function (e, newValue) {
17
16
  setValue(newValue);
18
17
  if (onChange) {
package/package.json CHANGED
@@ -3,24 +3,24 @@
3
3
  "sideEffects": false,
4
4
  "main": "./node/index.js",
5
5
  "typings": "./index.d.ts",
6
- "dependencies": {
6
+ "dependencies": {},
7
+ "peerDependencies": {
7
8
  "styled-components": "^5.3.5",
8
- "framer-motion": "^6.3.4",
9
+ "framer-motion": "^6.3.10",
9
10
  "react": "^16.8 || ^17 || ^18",
10
- "@mui/base": "^5.0.0-alpha.82",
11
- "@koine/utils": "1.0.20",
12
- "react-icons": "^4.3.1",
11
+ "@mui/base": "^5.0.0-alpha.83",
12
+ "@koine/utils": "1.0.23",
13
+ "react-icons": "^4.4.0",
13
14
  "date-fns": "^2.28.0",
14
15
  "react-swipeable": "^7.0.0",
15
16
  "@tiptap/react": "^2.0.0-beta.109",
16
17
  "@tiptap/starter-kit": "^2.0.0-beta.185",
17
18
  "yup": "^0.32.11",
18
- "react-hook-form": "^7.31.2",
19
+ "react-hook-form": "^7.31.3",
19
20
  "type-fest": "^2.13.0",
20
21
  "tslib": "^2.4.0"
21
22
  },
22
- "peerDependencies": {},
23
- "version": "1.0.20",
23
+ "version": "1.0.23",
24
24
  "module": "./index.js",
25
25
  "types": "./index.d.ts"
26
26
  }