@koine/react 1.0.8 → 1.0.11

package/Progress/ProgressOverlay.js

@@ -32,9 +32,9 @@ export const ProgressOverlay = ({ running }) => {
     useEffect(() => {
         document.body.style.cursor = running ? "wait" : "";
     }, [running]);
-    return (_jsxs(ProgressOverlayWrap, Object.assign({ animate: {
+    return (_jsxs(ProgressOverlayWrap, { animate: {
             opacity: running ? 1 : 0,
-        }, initial: { opacity: 0 }, transition: { type: "easeInOut" } }, { children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, Object.assign({ style: {
+        }, initial: { opacity: 0 }, transition: { type: "easeInOut" }, children: [_jsx(ProgressLinear, { bg: "var(--accent400)", fg: "var(--accent300)", done: !running }), _jsx(ProgressOverlayCenterer, { style: {
                     top: headerHeight + "px",
-                } }, { children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) }))] })));
+                }, children: _jsx(ProgressCircular, { size: "50px", color: "var(--accent300)" }) })] }));
 };

package/Progress/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./ProgressCircular";
-export * from "./ProgressLinear";
-export * from "./ProgressOverlay";
+export * from "./ProgressCircular";
+export * from "./ProgressLinear";
+export * from "./ProgressOverlay";

package/Progress/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Progress/index.js",
+  "types": "./index.d.ts"
+}

package/Rating/Rating.d.ts

@@ -1,35 +1,35 @@
-/// <reference types="react" />
-export declare type RatingStarProps = React.ComponentPropsWithoutRef<"svg"> & RatingStarModel & {
-    /** @default 16 */
-    size?: number;
-    /** Between 0 and 1 */
-    value: number;
-    /** @default "#FFD84C" */
-    colorBg?: React.CSSProperties["color"];
-    /** @default "#947813" */
-    colorStroke?: React.CSSProperties["color"];
-};
-export declare const RatingStarRoot: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingStar: ({ value, colorBg, colorStroke, size, ...props }: RatingStarProps) => JSX.Element;
-export declare const RatingDetails: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingValue: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const RatingRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare type RatingStarModel = {
-    value: number;
-    idx?: number;
-    dataIdx?: number;
-};
-export declare type RatingProps = {
-    /** @default 0 */
-    value: number;
-    count?: number;
-    /** @default 0 */
-    min?: number;
-    /** @default 5 */
-    max?: number;
-    /** @default true */
-    showDetails?: boolean;
-    starSize?: RatingStarProps["size"];
-} & Pick<RatingStarProps, "colorBg" | "colorStroke">;
-export declare const Rating: ({ value, count, min, max, showDetails, colorBg, colorStroke, starSize, }: RatingProps) => JSX.Element;
+/// <reference types="react" />
+export declare type RatingStarProps = React.ComponentPropsWithoutRef<"svg"> & RatingStarModel & {
+    /** @default 16 */
+    size?: number;
+    /** Between 0 and 1 */
+    value: number;
+    /** @default "#FFD84C" */
+    colorBg?: React.CSSProperties["color"];
+    /** @default "#947813" */
+    colorStroke?: React.CSSProperties["color"];
+};
+export declare const RatingStarRoot: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
+export declare const RatingStar: ({ value, colorBg, colorStroke, size, ...props }: RatingStarProps) => JSX.Element;
+export declare const RatingDetails: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const RatingCount: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const RatingValue: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const RatingRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare type RatingStarModel = {
+    value: number;
+    idx?: number;
+    dataIdx?: number;
+};
+export declare type RatingProps = {
+    /** @default 0 */
+    value: number;
+    count?: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 5 */
+    max?: number;
+    /** @default true */
+    showDetails?: boolean;
+    starSize?: RatingStarProps["size"];
+} & Pick<RatingStarProps, "colorBg" | "colorStroke">;
+export declare const Rating: ({ value, count, min, max, showDetails, colorBg, colorStroke, starSize, }: RatingProps) => JSX.Element;

package/Rating/Rating.js

@@ -1,17 +1,15 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, /* useId, */ useState } from "react";
 import styled from "styled-components";
-import { uid } from "@koine/utils";
+import { useId } from "../hooks/useId";
 export const RatingStarRoot = styled.svg `
   display: inline-block;
   vertical-align: middle;
   margin-right: 1px;
 `;
-export const RatingStar = (_a) => {
-    var { value, colorBg = "#FFD84C", colorStroke = "#947813", size } = _a, props = __rest(_a, ["value", "colorBg", "colorStroke", "size"]);
-    const id = uid("Star");
-    return (_jsxs(RatingStarRoot, Object.assign({ viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px" }, props, { children: [_jsx("defs", { children: _jsxs("linearGradient", Object.assign({ id: id, x1: "0", y1: "0", x2: "1", y2: "0" }, { children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] })) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: `url(#${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" })] })));
+export const RatingStar = ({ value, colorBg = "#FFD84C", colorStroke = "#947813", size, ...props }) => {
+    const id = useId();
+    return (_jsxs(RatingStarRoot, { viewBox: "0 0 16 16", "data-value": value, width: size + "px", height: size + "px", ...props, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: id, x1: "0", y1: "0", x2: "1", y2: "0", children: [_jsx("stop", { offset: "0", stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: colorBg }), _jsx("stop", { offset: value, stopColor: "rgba(255, 255, 255, 0)" })] }) }), _jsx("path", { stroke: colorStroke, strokeWidth: "0.5", fill: `url(#${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" })] }));
 };
 export const RatingDetails = styled.span `
   padding-left: 0.5em;
@@ -38,7 +36,7 @@ export const RatingRoot = styled.div `
   }
 `;
 export const Rating = ({ value = 0, count, min = 0, max = 5, showDetails = true, colorBg, colorStroke, starSize = 16, }) => {
-    const id = uid("Rating");
+    const id = useId();
     const [currentValue /* , _setCurrentValue */] = useState(value);
     const [stars, setStars] = useState([]);
     const getStars = useCallback((activeCount) => {

package/Rating/index.d.ts

@@ -1,11 +1,11 @@
-export * from "./Rating";
-export declare const getRatingWord: (value: number, precision?: number) => any;
-export declare const getRatingValue: (value: number) => string | number;
-/**
- * @see https://stackoverflow.com/a/14224813
- */
-export declare function convertRange(value: number, r1: number[], r2: number[]): number;
-export declare const deriveRating: (title: string, date: Date, minValue?: number, maxValue?: number, minQuantity?: number) => {
-    value: number;
-    count: number;
-};
+export * from "./Rating";
+export declare const getRatingWord: (value: number, precision?: number) => any;
+export declare const getRatingValue: (value: number) => string | number;
+/**
+ * @see https://stackoverflow.com/a/14224813
+ */
+export declare function convertRange(value: number, r1: number[], r2: number[]): number;
+export declare const deriveRating: (title: string, date: Date, minValue?: number, maxValue?: number, minQuantity?: number) => {
+    value: number;
+    count: number;
+};

package/Rating/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Rating/index.js",
+  "types": "./index.d.ts"
+}

package/Select/SelectDownshift.d.ts

@@ -1,5 +1,5 @@
-import type { Option } from "../types";
-export declare type SelectProps = {
-    options?: Option[];
-};
-export declare const Select: null;
+import type { Option } from "../types";
+export declare type SelectProps = {
+    options?: Option[];
+};
+export declare const Select: null;

package/Select/components.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-export declare const SelectArrowStyled: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLSpanElement, import("framer-motion").HTMLMotionProps<"span">>, import("styled-components").DefaultTheme, {}, never>;
-export declare type SelectArrowProps = {
-    isOpen?: boolean;
-};
-export declare const SelectArrow: import("react").ForwardRefExoticComponent<SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>;
+/// <reference types="react" />
+export declare const SelectArrowStyled: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLSpanElement, import("framer-motion").HTMLMotionProps<"span">>, import("styled-components").DefaultTheme, {}, never>;
+export declare type SelectArrowProps = {
+    isOpen?: boolean;
+};
+export declare const SelectArrow: import("react").ForwardRefExoticComponent<SelectArrowProps & import("react").RefAttributes<HTMLSpanElement>>;

package/Select/components.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
@@ -14,7 +13,6 @@ export const SelectArrowStyled = styled(m.span) `
     cursor: pointer;
   }
 `;
-export const SelectArrow = forwardRef(function SelectArrow(_a, ref) {
-    var { isOpen } = _a, props = __rest(_a, ["isOpen"]);
-    return (_jsx(SelectArrowStyled, Object.assign({ animate: { rotate: isOpen ? 180 : 0 }, ref: ref }, props, { children: _jsx(IconCollapse, {}) })));
+export const SelectArrow = forwardRef(function SelectArrow({ isOpen, ...props }, ref) {
+    return (_jsx(SelectArrowStyled, { animate: { rotate: isOpen ? 180 : 0 }, ref: ref, ...props, children: _jsx(IconCollapse, {}) }));
 });

package/Select/index.d.ts

@@ -1,2 +1,2 @@
-export type { SelectProps } from "./SelectDownshift";
-export { Select } from "./SelectDownshift";
+export type { SelectProps } from "./SelectDownshift";
+export { Select } from "./SelectDownshift";

package/Select/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Select/index.js",
+  "types": "./index.d.ts"
+}

package/Sidebar/Sidebar.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare type SidebarProps = unknown;
-export declare const Sidebar: React.FC<SidebarProps>;
+/// <reference types="react" />
+export declare type SidebarProps = React.PropsWithChildren<unknown>;
+export declare const Sidebar: ({ children }: SidebarProps) => JSX.Element;

package/Sidebar/Sidebar.js

@@ -44,5 +44,5 @@ export const Sidebar = ({ children }) => {
     const handleClickToggle = useCallback(() => {
         setOpen((prevOpen) => !prevOpen);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, Object.assign({ onClick: handleClickToggle }, { children: _jsx(IconButtonFab, Object.assign({ "$variant": "contained" }, { children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) })) })), _jsx(SidebarWrapper, Object.assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, { onClick: handleClickToggle, children: _jsx(IconButtonFab, { "$variant": "contained", children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) }) }), _jsx(SidebarWrapper, { "$open": open, "$top": headerHeight, children: children })] }));
 };

package/Sidebar/index.d.ts

@@ -1 +1 @@
-export * from "./Sidebar";
+export * from "./Sidebar";

package/Sidebar/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Sidebar/index.js",
+  "types": "./index.d.ts"
+}

package/Spacing/Spacing.d.ts

@@ -1,30 +1,30 @@
-/// <reference types="react" />
-import { SpacingSize, SpacingFactor, SpacingProperty, SpacingDirectionAxis, SpacingDevices } from "../styles/spacing";
-export declare type SpacingPropsStyled = {
-    $top?: SpacingFnArgs;
-    $bottom?: SpacingFnArgs;
-};
-declare type SpacingFnArgs = [
-    SpacingSize,
-    SpacingFactor,
-    SpacingProperty,
-    SpacingDevices[]
-];
-declare type SpacingSyntaxFactor = string;
-declare type SpacingSyntaxDevices = `${SpacingDevices}` | `${SpacingDevices},${SpacingDevices}` | `${SpacingDevices},${SpacingDevices},${SpacingDevices}`;
-declare type SpacingSyntax = `${SpacingSize}` | `${SpacingSize}:${SpacingSyntaxFactor}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}:${SpacingSyntaxDevices}`;
-export declare type SpacingProps = React.ComponentPropsWithoutRef<"div"> & Partial<Record<SpacingDirectionAxis, SpacingSyntax>>;
-/**
- * Usage:
- *
- * ```jsx
- * <Spacing top="sm" />
- * <Spacing top="sm:1.5" />
- * <Spacing top="sm:1.5" bottom="lg" />
- * <Spacing vertical="sm:1.5:margin:mobile" />
- * <Spacing top="sm:1.5:padding:mobile" />
- * <Spacing top="sm:2:padding:tablet,desktop" />
- * ```
- */
-export declare const Spacing: React.FC<SpacingProps>;
-export {};
+/// <reference types="react" />
+import { SpacingSize, SpacingFactor, SpacingProperty, SpacingDirectionAxis, SpacingDevices } from "../styles/spacing";
+export declare type SpacingPropsStyled = {
+    $top?: SpacingFnArgs;
+    $bottom?: SpacingFnArgs;
+};
+declare type SpacingFnArgs = [
+    SpacingSize,
+    SpacingFactor,
+    SpacingProperty,
+    SpacingDevices[]
+];
+declare type SpacingSyntaxFactor = string;
+declare type SpacingSyntaxDevices = `${SpacingDevices}` | `${SpacingDevices},${SpacingDevices}` | `${SpacingDevices},${SpacingDevices},${SpacingDevices}`;
+declare type SpacingSyntax = `${SpacingSize}` | `${SpacingSize}:${SpacingSyntaxFactor}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}` | `${SpacingSize}:${SpacingSyntaxFactor}:${SpacingProperty}:${SpacingSyntaxDevices}`;
+export declare type SpacingProps = React.ComponentPropsWithoutRef<"div"> & Partial<Record<SpacingDirectionAxis, SpacingSyntax>>;
+/**
+ * Usage:
+ *
+ * ```jsx
+ * <Spacing top="sm" />
+ * <Spacing top="sm:1.5" />
+ * <Spacing top="sm:1.5" bottom="lg" />
+ * <Spacing vertical="sm:1.5:margin:mobile" />
+ * <Spacing top="sm:1.5:padding:mobile" />
+ * <Spacing top="sm:2:padding:tablet,desktop" />
+ * ```
+ */
+export declare const Spacing: ({ top, bottom, vertical, ...props }: SpacingProps) => JSX.Element;
+export {};

package/Spacing/Spacing.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { isUndefined } from "@koine/utils";
@@ -10,7 +9,7 @@ const Root = styled.div `
 const extractDirectionArgs = (raw) => {
     const [size, factor, property, devices] = raw.split(":");
     const factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
-    const devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
+    const devicesArg = devices?.split(",");
     return [size, factorArg, property, devicesArg];
 };
 /**
@@ -25,8 +24,7 @@ const extractDirectionArgs = (raw) => {
  * <Spacing top="sm:2:padding:tablet,desktop" />
  * ```
  */
-export const Spacing = (_a) => {
-    var { top, bottom, vertical } = _a, props = __rest(_a, ["top", "bottom", "vertical"]);
+export const Spacing = ({ top, bottom, vertical, ...props }) => {
     let $top;
     let $bottom;
     if (top) {
@@ -43,5 +41,5 @@ export const Spacing = (_a) => {
         // eslint-disable-next-line react/jsx-no-useless-fragment
         return _jsx(_Fragment, { children: props.children });
     }
-    return _jsx(Root, Object.assign({ "$top": $top, "$bottom": $bottom }, props));
+    return _jsx(Root, { "$top": $top, "$bottom": $bottom, ...props });
 };

package/Spacing/index.d.ts

@@ -1 +1 @@
-export * from "./Spacing";
+export * from "./Spacing";

package/Spacing/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Spacing/index.js",
+  "types": "./index.d.ts"
+}

package/Sticky/Sticky.d.ts

@@ -1,2 +1,2 @@
-export declare type StickyProps = {};
-export declare const Sticky: null;
+export declare type StickyProps = {};
+export declare const Sticky: null;

package/Sticky/Sticky.js

@@ -1,6 +1,5 @@
 export const Sticky = null;
 // import {
-//   FC,
 //   Ref,
 //   CSSProperties,
 //   useState,

package/Sticky/StickyCss.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare type StickyCssProps = {
-    top: number;
-};
-export declare const StickyCss: React.FC<StickyCssProps>;
+/// <reference types="react" />
+export declare type StickyCssProps = React.ComponentProps<"div"> & {
+    top: number;
+};
+export declare const StickyCss: ({ top, ...props }: StickyCssProps) => JSX.Element;

package/Sticky/StickyCss.js

@@ -1,6 +1,4 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const StickyCss = (_a) => {
-    var { top } = _a, props = __rest(_a, ["top"]);
-    return _jsx("div", Object.assign({ style: { position: "sticky", top: 100 } }, props));
+export const StickyCss = ({ top, ...props }) => {
+    return _jsx("div", { style: { position: "sticky", top: 100 }, ...props });
 };

package/Sticky/index.d.ts

@@ -1 +1 @@
-export * from "./StickyCss";
+export * from "./StickyCss";

package/Sticky/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Sticky/index.js",
+  "types": "./index.d.ts"
+}