@koine/react 1.0.1 → 1.0.2

package/Forms/Toggle/useToggle.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import type { Option } from "../../types";
+import { FormControl } from "../helpers";
+export declare type UseToggleProps = Omit<FormControl, "value"> & {
+    value?: boolean;
+    valueTrue?: string;
+    valueFalse?: string;
+    options?: Option[];
+};
+/**
+ * This hook is meant to powere 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(),
+ * // add `.nullable()` if you do not provide a boolean `defaultValue`
+ * ```
+ *
+ * 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 declare function useToggle(props: UseToggleProps, ref: React.ForwardedRef<HTMLInputElement>): {
+    Inputs: JSX.Element;
+    rootProps: {
+        htmlFor: string | undefined;
+    };
+    label: any;
+    value: any;
+};

package/Forms/antispam.d.ts

@@ -0,0 +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;

package/Forms/helpers.d.ts

@@ -0,0 +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 {};

package/Forms/index.d.ts

@@ -0,0 +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";

package/Forms/styles.d.ts

@@ -0,0 +1,20 @@
+/// <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;

package/Gauge/Gauge.d.ts

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

package/Grid/Grid.d.ts

@@ -0,0 +1,60 @@
+/// <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 {};

package/Grid/index.d.ts

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

package/Hamburger/Hamburger.d.ts

@@ -0,0 +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>;

package/Hamburger/index.d.ts

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

package/Header/index.d.ts

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

package/Header/useHeader.d.ts

@@ -0,0 +1,20 @@
+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 {};

package/Hidden/Hidden.d.ts

@@ -0,0 +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>;

package/Hidden/index.d.ts

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

package/Img/Img.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare type KoineImgProps = {};
+export declare const KoineImg: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare type KoineImgSmartWrapProps = {
+    $loaded?: boolean;
+    $error?: boolean;
+    $bg?: React.CSSProperties["backgroundColor"];
+};
+export declare type KoineImgSmartProps = KoineImgProps & {
+    Wrap: React.FC<KoineImgSmartWrapProps>;
+};

package/Img/index.d.ts

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

package/Link/Link.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare type KoineLinkProps = React.ComponentPropsWithRef<"a">;
+export declare const KoineLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, never>;

package/Link/LinkBlank.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type LinkBlankProps = React.ComponentPropsWithRef<"a">;
+export declare const LinkBlankA: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, {
+    target: "_blank";
+    rel: "noopener";
+}, "rel" | "target">;
+export declare const LinkBlankIcon: import("styled-components").StyledComponent<import("@react-icons/all-files/lib").IconType, import("styled-components").DefaultTheme, {}, never>;
+export declare const LinkBlank: React.FC<LinkBlankProps>;

package/Link/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Link";
+export * from "./LinkBlank";

package/Menu/Menu.d.ts

@@ -0,0 +1 @@
+export declare const Menu: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;

package/Menu/index.d.ts

@@ -0,0 +1 @@
+export * from "./Menu";

package/MenuItem/MenuItem.d.ts

@@ -0,0 +1,4 @@
+export declare const MenuItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {
+    $active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;

package/MenuItem/index.d.ts

@@ -0,0 +1 @@
+export * from "./MenuItem";

package/Meta/Meta.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare type MetaProps = {
+    /**
+     * Determines whether `user-scalable=0` is add to the `meta->viewport` content
+     *
+     * This is an opt in instead of the default browser behaviour as it helps prevent
+     * weird zooming on input fields on iPhone iOS devices.
+     * @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
+     * @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
+     *
+     * @default false
+     */
+    zoom?: boolean;
+};
+export declare const Meta: ({ zoom }: MetaProps) => JSX.Element;

package/Meta/index.d.ts

@@ -0,0 +1 @@
+export * from "./Meta";

package/NoJs/NoJs.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare type NoJsProps = object;
+export declare const NoJs: (_props: NoJsProps) => JSX.Element;

package/NoJs/index.d.ts

@@ -0,0 +1 @@
+export * from "./NoJs";

package/Pagination/PaginationNav.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { KoineComponentProps, KoineComponent } from "../types";
+export declare type KoinePaginationNavProps = {
+    /** The total number of elements to paginate */
+    total: string | number;
+    /** The amount of items per page */
+    perPage: string | number;
+    /** The current page in the pagination */
+    currentPage: string | number;
+    /** Is the relative path of the url to prefix to the page number */
+    baseUrl?: string;
+    /**
+     * The number of pages to show as number (and not dots) around the currentPage
+     * @default 2
+     */
+    showOffset?: number;
+};
+declare type PaginationNavProps = KoineComponentProps<KoinePaginationNavProps, {
+    currentUrl?: string;
+    Link?: KoineComponent;
+}>;
+export declare const KoinePaginationNav: ({ total, perPage, currentPage, baseUrl, showOffset, Koine, }: PaginationNavProps) => JSX.Element | null;
+export {};

package/Pagination/PaginationResults.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare type PaginationResultsProps = unknown;
+export declare const PaginationResults: React.FC<PaginationResultsProps>;

package/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./PaginationNav";
+export * from "./PaginationResults";

package/Pill/Pill.d.ts

@@ -0,0 +1,5 @@
+export declare type PillProps = object;
+export declare const Pill: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & object, never>;
+export declare const PillGreyLight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & object, never>;
+export declare const PillAccentLight: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & object, never>;
+export declare const PillAccentLightOutlined: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {} & object, never>;

package/Pill/index.d.ts

@@ -0,0 +1 @@
+export * from "./Pill";

package/Progress/ProgressCircular.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { CSSProperties } from "styled-components";
+import type { Theme } from "../styles/theme";
+export declare type ProgressCircularProps = {
+    /** @default "1em" */
+    size?: CSSProperties["width"];
+    /** @default 1 */
+    thickness: number;
+    /** @default "currentColor" */
+    color: keyof Theme | NonNullable<CSSProperties["color"]>;
+};
+/**
+ * @see https://mui.com/components/progress/
+ */
+export declare const ProgressCircular: ({ size, thickness, color, ...props }: {
+    [x: string]: any;
+    size?: string | undefined;
+    thickness?: number | undefined;
+    color?: string | undefined;
+}) => JSX.Element;

package/Progress/ProgressLinear.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { CSSProperties } from "styled-components";
+import type { Theme } from "../styles/theme";
+export declare type ProgressLinearProps = {
+    /** @default false */
+    done?: boolean;
+    /** @default "2px" */
+    height?: CSSProperties["height"];
+    /** @default "currentColor" */
+    bg: keyof Theme | NonNullable<CSSProperties["color"]>;
+    /** @default "currentColor" */
+    fg: keyof Theme | NonNullable<CSSProperties["color"]>;
+};
+/**
+ * @see https://mui.com/components/progress/#linear
+ */
+export declare const ProgressLinear: ({ done, height, bg, fg, ...props }: {
+    [x: string]: any;
+    done?: boolean | undefined;
+    height?: string | undefined;
+    bg?: string | undefined;
+    fg?: string | undefined;
+}) => JSX.Element;

package/Progress/ProgressOverlay.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare type ProgressOverlayProps = {
+    running: boolean;
+};
+export declare const ProgressOverlay: ({ running }: ProgressOverlayProps) => JSX.Element;

package/Progress/index.d.ts

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

package/Rating/Rating.d.ts

@@ -0,0 +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;

package/Rating/index.d.ts

@@ -0,0 +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;
+};

package/Select/SelectDownshift.d.ts

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

package/Select/components.d.ts

@@ -0,0 +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>>;

package/Select/index.d.ts

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

package/Sidebar/Sidebar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare type SidebarProps = unknown;
+export declare const Sidebar: React.FC<SidebarProps>;

package/Sidebar/index.d.ts

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

package/Spacing/Spacing.d.ts

@@ -0,0 +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 {};

package/Spacing/index.d.ts

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

package/Sticky/Sticky.d.ts

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

package/Sticky/StickyCss.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare type StickyCssProps = {
+    top: number;
+};
+export declare const StickyCss: React.FC<StickyCssProps>;

package/Sticky/index.d.ts

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

package/Tabs/Tabs.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { TabProps as _TabProps, TabsProps as _TabsProps } from "@reach/tabs";
+export declare const TabsStyled: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", _TabsProps>, import("styled-components").DefaultTheme, _TabsProps & {
+    $vertical?: boolean | undefined;
+}, never>;
+export declare type TabsProps = _TabsProps & {
+    $vertical?: boolean;
+};
+export declare const Tabs: (props: TabsProps) => JSX.Element;
+export declare const TabList: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").MemoComponent<"div", import("@reach/tabs/dist/declarations/src").TabListProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const TabWrap: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"button", _TabProps>, import("styled-components").DefaultTheme, _TabProps & {
+    idx: number;
+} & TabStyledProps, never>;
+export declare const TabText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TabStyledProps, never>;
+export declare const TabUnderline: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLElement, import("framer-motion").HTMLMotionProps<"i">>, import("styled-components").DefaultTheme, TabStyledProps, never>;
+export declare type TabStyledProps = {
+    $active: boolean;
+    $focused: boolean;
+};
+export declare type TabProps = _TabProps & {
+    idx: number;
+};
+export declare const Tab: ({ children, ...props }: TabProps) => JSX.Element;
+export declare const TabPanels: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").MemoComponent<"div", import("@reach/tabs/dist/declarations/src").TabPanelsProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const TabPanel: import("styled-components").StyledComponent<import("@reach/utils/dist/declarations/src/polymorphic").ForwardRefComponent<"div", import("@reach/tabs/dist/declarations/src").TabPanelProps>, import("styled-components").DefaultTheme, {}, never>;

package/Tabs/index.d.ts

@@ -0,0 +1 @@
+export * from "./Tabs";

package/Typography/CopyPasteVisible.d.ts

@@ -0,0 +1 @@
+export declare const CopyPasteVisible: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/Typography/Native.d.ts

@@ -0,0 +1,10 @@
+export declare const p = "\n  margin: 0 0 1em 0;\n";
+export declare const h1: string;
+export declare const h2 = "\n  margin: 0 0 1em 0;\n  font-size: 24px;\n  font-weight: 800;\n  line-height: var(--headingsLineHeight);\n";
+export declare const h3 = "\n  margin: 0 0 1em 0;\n  font-size: 20px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+export declare const h4 = "\n  margin: 0 0 1em 0;\n  font-size: 13px;\n  font-weight: 600;\n  line-height: var(--headingsLineHeight);\n";
+export declare const P: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H1: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H2: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H3: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const H4: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/Typography/ReadMore.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare type ReadMoreProps = {
+    lines?: number;
+    lineHeight?: number;
+    fontSize?: number;
+    bg?: React.CSSProperties["background"];
+    /** @default "Expand" */
+    expand?: string;
+    /** @default "Collapse" */
+    collapse?: string;
+};
+export declare const ReadMore: React.FC<ReadMoreProps>;