@koine/react 1.0.8 → 1.0.9

package/Forms/Toggle/useToggle.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import { useWatch } from "react-hook-form";
@@ -33,12 +32,12 @@ import { InputInvisible } from "../styles";
  * an array of options with the shape of `Option`
  */
 export function useToggle(props, ref) {
-    const { name, control, register, label, options, value: propValue } = props, restProps = __rest(props, ["name", "control", "register", "label", "options", "value"]);
-    let { id, valueTrue, valueFalse } = restProps, 
+    const { name, control, register, label, options, value: propValue, ...restProps } = props;
+    let { id, valueTrue, valueFalse, 
     // defaultChecked,
     // defaultValue,
     // eslint-disable-next-line prefer-const
-    remainingInputProps = __rest(restProps, ["id", "valueTrue", "valueFalse"]);
+    ...remainingInputProps } = restProps;
     // use options data convention to pass on the true/false values
     if (options) {
         valueTrue = options
@@ -97,7 +96,7 @@ export function useToggle(props, ref) {
             const firstInput = event.target;
             const next = firstInput.nextElementSibling;
             const prev = firstInput.previousElementSibling;
-            const secondInput = (next === null || next === void 0 ? void 0 : next.tagName) === "INPUT" ? next : prev;
+            const secondInput = next?.tagName === "INPUT" ? next : prev;
             let target = firstInput;
             if (firstInput.checked) {
                 target = secondInput;
@@ -125,7 +124,7 @@ export function useToggle(props, ref) {
         label: label ? label : value,
         value,
     }), [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
-    const Inputs = useMemo(() => isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, Object.assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), _jsx(InputInvisible, Object.assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : (_jsx(InputInvisible, Object.assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps))), [
+    const Inputs = useMemo(() => isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, { id: idFalse, ...inputProps, ...remainingInputProps, onKeyDown: handleKeyDown, type: "radio", value: valueFalse }), _jsx(InputInvisible, { id: idTrue, ...inputProps, ...remainingInputProps, onKeyDown: handleKeyDown, type: "radio", value: valueTrue })] })) : (_jsx(InputInvisible, { id: id, type: "checkbox", ...inputProps, ...remainingInputProps })), [
         inputProps,
         remainingInputProps,
         handleKeyDown,
@@ -139,5 +138,8 @@ export function useToggle(props, ref) {
         // defaultValue,
     ]);
     // console.log("useToggle: render", value);
-    return Object.assign(Object.assign({}, valueDependentProps), { Inputs });
+    return {
+        ...valueDependentProps,
+        Inputs,
+    };
 }

package/Forms/antispam.d.ts

@@ -1,24 +1,24 @@
-import type { ObjectShape } from "yup/lib/object";
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- */
-export declare function encodeForm<T extends ObjectShape = {}>(validationRules: T): {
-    encodedSchema: import("yup/lib/object").RequiredObjectSchema<Record<string, T[keyof T]>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<Record<string, T[keyof T]>>>;
-    encodedNames: Record<keyof T, string>;
-};
-/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */
-export declare function decodeForm<ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData): ReturnAs;
+import type { ObjectShape } from "yup/lib/object";
+/**
+ * Encode form
+ *
+ * Takes a record of yup validations and outputs a `yup` schema with encoded
+ * names (antispam technique) and a record of the encoded/decoded input `name`s.
+ *
+ * We skip the names prefixed wth an underscore which are considered programmatic
+ * form data not created by user input.
+ */
+export declare function encodeForm<T extends ObjectShape = {}>(validationRules: T): {
+    encodedSchema: import("yup/lib/object").RequiredObjectSchema<Record<string, T[keyof T]>, import("yup/lib/object").AnyObject, import("yup/lib/object").TypeOfShape<Record<string, T[keyof T]>>>;
+    encodedNames: Record<keyof T, string>;
+};
+/**
+ * Decode form data
+ *
+ * This function is meant to be used inside an api endpoint to gather an encoded
+ * form submit data and transform it to the decoded desired json data.
+ *
+ * Here too we skip encoding/decoding process for names prefixed wth an underscore
+ * which are considered programmatic form data not created by user input.
+ */
+export declare function decodeForm<ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData): ReturnAs;

package/Forms/helpers.d.ts

@@ -1,26 +1,26 @@
-/// <reference types="react" />
-import type { Control, UseFormRegister, UseFormSetValue } from "react-hook-form";
-import type { Option } from "../types";
-declare type FormControlNativeType = "input" | "select" | "textarea";
-declare type FormControlFieldValues = Record<string, any>;
-export declare type FormControlNative<T extends FormControlNativeType = "input"> = Omit<React.ComponentPropsWithRef<T>, "name">;
-export declare type FormControlProps<T extends FormControlFieldValues = any> = {
-    label?: React.ReactNode;
-    name: string;
-    control?: Control<T>;
-    register?: UseFormRegister<T>;
-    setValue?: UseFormSetValue<T>;
-};
-export declare type FormControl<TControlType extends FormControlNativeType = "input", TFieldValues extends FormControlFieldValues = any> = FormControlNative<TControlType> & FormControlProps<TFieldValues>;
-export declare const normaliseOptions: (options?: (string | Option)[]) => Option[];
-export declare function defaultOptionsFilterFn(options: Option[], inputValue?: string): Option[];
-/**
- * We are faking the native input `onChange` event
- */
-export declare function triggerOnChange<T extends HTMLElement = HTMLInputElement>(onChange?: React.ChangeEventHandler<T>, name?: string, value?: any): void;
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */
-export declare function triggerChange(input: HTMLInputElement, value?: string): void;
-export {};
+/// <reference types="react" />
+import type { Control, UseFormRegister, UseFormSetValue } from "react-hook-form";
+import type { Option } from "../types";
+declare type FormControlNativeType = "input" | "select" | "textarea";
+declare type FormControlFieldValues = Record<string, any>;
+export declare type FormControlNative<T extends FormControlNativeType = "input"> = Omit<React.ComponentPropsWithRef<T>, "name">;
+export declare type FormControlProps<T extends FormControlFieldValues = any> = {
+    label?: React.ReactNode;
+    name: string;
+    control?: Control<T>;
+    register?: UseFormRegister<T>;
+    setValue?: UseFormSetValue<T>;
+};
+export declare type FormControl<TControlType extends FormControlNativeType = "input", TFieldValues extends FormControlFieldValues = any> = FormControlNative<TControlType> & FormControlProps<TFieldValues>;
+export declare const normaliseOptions: (options?: (string | Option)[]) => Option[];
+export declare function defaultOptionsFilterFn(options: Option[], inputValue?: string): Option[];
+/**
+ * We are faking the native input `onChange` event
+ */
+export declare function triggerOnChange<T extends HTMLElement = HTMLInputElement>(onChange?: React.ChangeEventHandler<T>, name?: string, value?: any): void;
+/**
+ * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
+ * @deprecated
+ */
+export declare function triggerChange(input: HTMLInputElement, value?: string): void;
+export {};

package/Forms/index.d.ts

@@ -1,16 +1,16 @@
-export * from "./antispam";
-export * from "./Checkbox";
-export * from "./Input";
-export * from "./InputGroup";
-export * from "./Feedback";
-export * from "./Field";
-export * from "./InputGroup";
-export * from "./Form";
-export * from "./Label";
-export * from "./Password";
-export * from "./Radio";
-export * from "./Switch";
-export * from "./Textarea";
-export * from "./Toggle";
-export * from "./helpers";
-export * from "./styles";
+export * from "./antispam";
+export * from "./Checkbox";
+export * from "./Input";
+export * from "./InputGroup";
+export * from "./Feedback";
+export * from "./Field";
+export * from "./InputGroup";
+export * from "./Form";
+export * from "./Label";
+export * from "./Password";
+export * from "./Radio";
+export * from "./Switch";
+export * from "./Textarea";
+export * from "./Toggle";
+export * from "./helpers";
+export * from "./styles";

package/Forms/package.json

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

package/Forms/styles.d.ts

@@ -1,20 +1,19 @@
-/// <reference types="react" />
-export declare const InputInvisible: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputHoneypot: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
-    type: "text";
-    autoComplete: "new-password";
-    tabIndex: -1;
-}, "type" | "autoComplete" | "tabIndex">;
-export declare const InputProgress: import("styled-components").StyledComponent<(p: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-/**
- * Remove the default light blue background on autofilled inputs. To be used as
- * a function that outputs a CSS string.
- *
- * @see https://stackoverflow.com/a/62624824/1938970
- */
-export declare const inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
-export declare const inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
-export declare const inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
-export declare const inputReset: string;
-export declare const inputBase: string;
-export declare const inputFocus: string;
+export declare const InputInvisible: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
+export declare const InputHoneypot: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    type: "text";
+    autoComplete: "new-password";
+    tabIndex: -1;
+}, "tabIndex" | "type" | "autoComplete">;
+export declare const InputProgress: import("styled-components").StyledComponent<(p: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+/**
+ * Remove the default light blue background on autofilled inputs. To be used as
+ * a function that outputs a CSS string.
+ *
+ * @see https://stackoverflow.com/a/62624824/1938970
+ */
+export declare const inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
+export declare const inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
+export declare const inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
+export declare const inputReset: string;
+export declare const inputBase: string;
+export declare const inputFocus: string;

package/Forms/styles.js

@@ -11,7 +11,7 @@ export const InputHoneypot = styled(InputInvisible).attrs({
     autoComplete: "new-password",
     tabIndex: -1,
 }) ``;
-export const InputProgress = styled((p) => (_jsx(ProgressLinear, Object.assign({ fg: "var(--accent300)", bg: "var(--accent400)" }, p)))) `
+export const InputProgress = styled((p) => (_jsx(ProgressLinear, { fg: "var(--accent300)", bg: "var(--accent400)", ...p }))) `
   position: absolute;
   bottom: 0;
   left: 0;

package/Gauge/Gauge.d.ts

@@ -1,5 +1,5 @@
-export declare type GaugeProps = {
-    /** In percentage */
-    value: number;
-};
-export declare const Gauge: (_props: GaugeProps) => null;
+export declare type GaugeProps = {
+    /** In percentage */
+    value: number;
+};
+export declare const Gauge: (_props: GaugeProps) => null;

package/Grid/Grid.d.ts

@@ -1,60 +1,64 @@
-/// <reference types="react" />
-import type { Theme, Breakpoint } from "../styles/theme";
-export declare const GRID_COLUMNS = 12;
-export declare const GRID_GUTTER_DEFAULT: keyof Theme["gutter"];
-export declare type GridProps = {
-    /**
-     * @default "half"
-     */
-    $gutter?: keyof Theme["gutter"];
-};
-export declare type ContainerProps = GridProps & {
-    size: Breakpoint;
-    clamp?: boolean;
-};
-export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    size: Breakpoint;
-    clamp?: boolean | undefined;
-}, never>;
-export declare type ContainerFluidProps = GridProps & {
-    size: Breakpoint;
-};
-export declare const ContainerFluid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    size: Breakpoint;
-}, never>;
-declare type Direction = "min" | "max";
-export declare type RowProps = GridProps & {
-    $valign?: React.CSSProperties["alignItems"];
-    $reverse?: `${Direction}:${Breakpoint}`;
-    /**
-     * It forces child columns to be on one line overflowing the content when it does not fit,
-     * it is suggested to use with children having a minimum width not in percentage,
-     * for things like sliders and carousels
-     */
-    $noWrap?: boolean;
-};
-export declare const Row: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
-    $valign?: React.CSSProperties["alignItems"];
-    $reverse?: "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | undefined;
-    /**
-     * It forces child columns to be on one line overflowing the content when it does not fit,
-     * it is suggested to use with children having a minimum width not in percentage,
-     * for things like sliders and carousels
-     */
-    $noWrap?: boolean | undefined;
-}, never>;
-export declare type ColProps = GridProps & Partial<Record<Breakpoint, number>> & {
-    $width?: number;
-    $flex?: boolean;
-    $valign?: React.CSSProperties["alignItems"];
-    $auto?: boolean;
-    $offset?: string;
-};
-export declare const Col: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & Partial<Record<Breakpoint, number>> & {
-    $width?: number | undefined;
-    $flex?: boolean | undefined;
-    $valign?: React.CSSProperties["alignItems"];
-    $auto?: boolean | undefined;
-    $offset?: string | undefined;
-}, never>;
-export {};
+/// <reference types="react" />
+import type { Theme, Breakpoint } from "../styles/theme";
+export declare const GRID_COLUMNS = 12;
+export declare const GRID_GUTTER_DEFAULT: keyof Theme["gutter"];
+export declare type GridProps = {
+    /**
+     * @default "half"
+     */
+    $gutter?: keyof Theme["gutter"];
+};
+export declare type ContainerProps = React.PropsWithChildren<GridProps & {
+    size: Breakpoint;
+    clamp?: boolean;
+}>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
+    size: Breakpoint;
+    clamp?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+}, never>;
+export declare type ContainerFluidProps = React.PropsWithChildren<GridProps & {
+    size: Breakpoint;
+}>;
+export declare const ContainerFluid: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
+    size: Breakpoint;
+} & {
+    children?: import("react").ReactNode;
+}, never>;
+declare type Direction = "min" | "max";
+export declare type RowProps = GridProps & {
+    $valign?: React.CSSProperties["alignItems"];
+    $reverse?: `${Direction}:${Breakpoint}`;
+    /**
+     * It forces child columns to be on one line overflowing the content when it does not fit,
+     * it is suggested to use with children having a minimum width not in percentage,
+     * for things like sliders and carousels
+     */
+    $noWrap?: boolean;
+};
+export declare const Row: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & {
+    $valign?: React.CSSProperties["alignItems"];
+    $reverse?: "max:xs" | "max:sm" | "max:md" | "max:lg" | "max:xl" | "max:xxl" | "min:xs" | "min:sm" | "min:md" | "min:lg" | "min:xl" | "min:xxl" | undefined;
+    /**
+     * It forces child columns to be on one line overflowing the content when it does not fit,
+     * it is suggested to use with children having a minimum width not in percentage,
+     * for things like sliders and carousels
+     */
+    $noWrap?: boolean | undefined;
+}, never>;
+export declare type ColProps = GridProps & Partial<Record<Breakpoint, number>> & {
+    $width?: number;
+    $flex?: boolean;
+    $valign?: React.CSSProperties["alignItems"];
+    $auto?: boolean;
+    $offset?: string;
+};
+export declare const Col: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, GridProps & Partial<Record<Breakpoint, number>> & {
+    $width?: number | undefined;
+    $flex?: boolean | undefined;
+    $valign?: React.CSSProperties["alignItems"];
+    $auto?: boolean | undefined;
+    $offset?: string | undefined;
+}, never>;
+export {};

package/Grid/index.d.ts

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

package/Grid/package.json

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

package/Hamburger/Hamburger.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-export declare type HamburgerProps = {
-    /** A way to provide your own state value. Can be used together with a state action (the `toggle` prop). */
-    toggled?: boolean;
-};
-export declare const Hamburger: React.FC<HamburgerProps>;
+/// <reference types="react" />
+export declare type HamburgerProps = React.ComponentProps<"div"> & {
+    /** A way to provide your own state value. Can be used together with a state action (the `toggle` prop). */
+    toggled?: boolean;
+};
+export declare const Hamburger: ({ toggled, ...props }: HamburgerProps) => JSX.Element;

package/Hamburger/Hamburger.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @file
@@ -49,7 +48,17 @@ const barStyles = {
     background: "currentColor",
     transition,
 };
-export const Hamburger = (_a) => {
-    var { toggled } = _a, props = __rest(_a, ["toggled"]);
-    return (_jsxs("div", Object.assign({ style: Object.assign(Object.assign({}, burgerStyles), { transform: `${toggled ? `rotate(90deg)` : "none"}` }), tabIndex: 0 }, props, { children: [_jsx("div", { style: Object.assign(Object.assign({}, barStyles), { top: `${topOffset}px`, transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}` }) }), _jsx("div", { style: Object.assign(Object.assign({}, barStyles), { top: `${topOffset + barHeight + margin}px`, transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}` }) }), _jsx(HamburgerLabel, Object.assign({ "$toggled": toggled }, { children: "Menu" }))] })));
+export const Hamburger = ({ toggled, ...props }) => {
+    return (_jsxs("div", { style: {
+            ...burgerStyles,
+            transform: `${toggled ? `rotate(90deg)` : "none"}`,
+        }, tabIndex: 0, ...props, children: [_jsx("div", { style: {
+                    ...barStyles,
+                    top: `${topOffset}px`,
+                    transform: `${toggled ? `rotate(-45deg) translate(0px, ${move}px)` : "none"}`,
+                } }), _jsx("div", { style: {
+                    ...barStyles,
+                    top: `${topOffset + barHeight + margin}px`,
+                    transform: `${toggled ? `rotate(45deg) translate(0, -${move}px)` : "none"}`,
+                } }), _jsx(HamburgerLabel, { "$toggled": toggled, children: "Menu" })] }));
 };

package/Hamburger/index.d.ts

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

package/Hamburger/package.json

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

package/Header/index.d.ts

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

package/Header/package.json

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

package/Header/useHeader.d.ts

@@ -1,20 +1,24 @@
-declare type isSticky = boolean & {
-    _branded: true;
-};
-declare type placeholderHeight = number & {
-    _branded: true;
-};
-declare type headerHeight = number & {
-    _branded: true;
-};
-declare type logoWidth = number & {
-    _branded: true;
-};
-declare type UseHeaderState = readonly [
-    isSticky,
-    placeholderHeight,
-    headerHeight,
-    logoWidth
-];
-export declare const useHeader: () => UseHeaderState;
-export {};
+/** @type {boolean} */
+declare type isSticky = boolean & {
+    _branded: true;
+};
+/** @type {number} */
+declare type placeholderHeight = number & {
+    _branded: true;
+};
+/** @type {number} */
+declare type headerHeight = number & {
+    _branded: true;
+};
+/** @type {number} */
+declare type logoWidth = number & {
+    _branded: true;
+};
+declare type UseHeaderState = readonly [
+    isSticky,
+    placeholderHeight,
+    headerHeight,
+    logoWidth
+];
+export declare const useHeader: () => UseHeaderState;
+export {};

package/Header/useHeader.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useScrollPosition } from "@n8tb1t/use-scroll-position";
+import { useScrollPosition } from "../hooks/useScrollPosition";
 import { useTheme } from "../styles/theme";
 import { useMedia } from "../styles/media";
 export const useHeader = () => {
@@ -10,8 +10,8 @@ export const useHeader = () => {
     const [headerHeight, setHeaderHeight] = useState(themed.height[valueIdx]);
     const [placeholderHeight, setPlaceholderHeight] = useState(themed.height[valueIdx]);
     const [logoWidth, setLogoWidth] = useState(themed.logoWidth[valueIdx]);
-    useScrollPosition(({ currPos }) => {
-        const isPastThreshold = currPos.y * -1 > 40;
+    useScrollPosition((currentPosition) => {
+        const isPastThreshold = currentPosition.y * -1 > 40;
         if (isSticky !== isPastThreshold)
             setIsSticky(isPastThreshold);
     }, [isSticky]);

package/Hidden/Hidden.d.ts

@@ -1,6 +1,6 @@
-import { Breakpoint } from "../styles/theme";
-export declare type HiddenProps = {
-    $min?: Breakpoint;
-    $max?: Breakpoint;
-};
-export declare const Hidden: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HiddenProps, never>;
+import { Breakpoint } from "../styles/theme";
+export declare type HiddenProps = {
+    $min?: Breakpoint;
+    $max?: Breakpoint;
+};
+export declare const Hidden: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, HiddenProps, never>;

package/Hidden/index.d.ts

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

package/Hidden/package.json

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

package/Img/index.d.ts

@@ -1 +1 @@
-export * from "./Img";
+export * from "./types";

package/Img/index.js

@@ -1 +1 @@
-export * from "./Img";
+export * from "./types";

package/Img/package.json

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

package/Img/sc/bare.d.ts

@@ -0,0 +1,2 @@
+export declare type KoineImgProps = {};
+export declare const KoineImg: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;

package/Img/{Img.js → sc/bare.js}

@@ -4,6 +4,9 @@ import styled from "styled-components";
 //   $fit?: "cover" | "contain";
 // };
 export const KoineImg = styled.img ``;
+// export const KoineImg = styled.img<KoineImgProps>`
+//   object-fit: ${(p) => p.$fit || "cover"};
+// `;
 // /**
 //  * Replacement core component for native `<img />`
 //  *

package/Img/types.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export declare type KoineImgSmartWrapProps = React.PropsWithChildren<{
+    $loaded?: boolean;
+    $error?: boolean;
+    $bg?: React.CSSProperties["backgroundColor"];
+}>;
+export declare type KoineImgSmartProps = {
+    Wrap: React.FC<KoineImgSmartWrapProps>;
+};