@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/input.d.mts

@@ -0,0 +1,195 @@
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as _mui_material_TextField from '@mui/material/TextField';
+import _mui_material_TextField__default from '@mui/material/TextField';
+export { default as TextField } from '@mui/material/TextField';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import InputBase, { InputBaseProps } from '@mui/material/InputBase';
+import { PaperProps } from '@mui/material/Paper';
+import { BoxProps } from '@mui/material/Box';
+import _mui_material_IconButton from '@mui/material/IconButton';
+import { TooltipProps } from '@mui/material/Tooltip';
+import PhoneInput from 'react-phone-number-input';
+
+type Props$3 = {
+    margin?: 'dense' | 'normal' | 'none';
+    inputProps?: [string, React.Dispatch<React.SetStateAction<string>>];
+    lineHeight?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    label?: string;
+} & React.ComponentProps<typeof _mui_material_TextField__default>;
+type PopperInputRef = {
+    getValue: () => string;
+};
+/**
+ * A Input component that uses Popper to display the input field.
+ *
+ * has get value method if ref is provided.
+ *
+ * [Doc](https://mui.com/material-ui/api/text-field/)
+ */
+declare const PopperInput: React$1.ForwardRefExoticComponent<Omit<Props$3, "ref"> & React$1.RefAttributes<PopperInputRef>>;
+
+/**
+ * A wrapper for Mui Paper
+ */
+declare function MuiPaper(props: PaperProps): react_jsx_runtime.JSX.Element;
+
+type Props$2 = {
+    children: React__default.ReactNode;
+    title?: string;
+    error?: boolean;
+    pyPx?: number;
+    pxPx?: number;
+} & BoxProps;
+/**
+ * A Mui TextField like Box with a title and a border.
+ *
+ * Props options:
+ *
+ * @property {ReactNode} children - Whatever go inside the box.
+ * @property {string} title - The left top title.
+ * @property {string} error - change border-color to red.
+ * @property {number} pyPx - padding top and bottom.
+ * @property {number} pxPx - padding left and right.
+ * @property {Record<string, unknown>} ...rest - Box props to the outer box.
+ * @example
+ * ### Example
+ * ```js
+ * const B = () => (
+ * <BorderBox title="title" error={false} ref={ref}>
+ *  something inside
+ * </BorderBox>)
+ * ```
+ */
+declare const BorderBox: React__default.ForwardRefExoticComponent<Omit<Props$2, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+type IconButtonProps = React.ComponentProps<typeof _mui_material_IconButton>;
+type Props$1 = {
+    /** The Icon to render */
+    children: React.ReactNode;
+    /** The title of the tooltip */
+    title?: string;
+    /**
+     * The color theme of the entire component.
+     * @default 'secondary' (from theme)
+     */
+    color?: IconButtonProps['color'];
+    /**
+     * The size of the component.
+     * @default 'small' (from theme)
+     */
+    size?: IconButtonProps['size'];
+    selected?: boolean;
+    slotProps?: {
+        tooltip?: Omit<TooltipProps, "children">;
+    };
+} & Omit<IconButtonProps, "color" | "size">;
+/**
+ * A MuiIconButton wrapped in a MuiTooltip.
+ * Default props like `size` and `color` are handled by the theme.
+ */
+declare const IconButton: React$1.ForwardRefExoticComponent<Omit<Props$1, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+type buttonOptions = {
+    icon: React__default.ReactNode;
+} & Omit<React__default.ComponentProps<typeof IconButton>, "children" | "size">;
+type Props = {
+    multiline?: boolean;
+    rows?: number;
+    margin?: 'dense' | 'normal' | 'none';
+    size?: 'small' | 'medium';
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    inputProps?: Record<string, unknown>;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    startButtons?: buttonOptions[];
+    endButtons?: buttonOptions[];
+    br?: number;
+    haveBorder?: boolean;
+    borderTitle?: React__default.ComponentProps<typeof Wrapper>["title"];
+    /** Optional custom input component (e.g. raw phone input) */
+    InputComponent?: React__default.ElementType;
+    /** Props forwarded to the custom input component */
+    inputComponentProps?: Record<string, unknown>;
+    slotProps?: {
+        input?: Partial<React__default.ComponentProps<typeof InputBase>["slotProps"]>;
+        paper?: Partial<React__default.ComponentProps<typeof MuiPaper>>;
+        wrapper?: Partial<React__default.ComponentProps<typeof BorderBox>>;
+    };
+} & InputBaseProps;
+/**
+ * A input component stacked with buttons on the left and right side.
+ *
+ * [Doc](https://mui.com/material-ui/api/text-field/)
+ */
+declare const StackInput: React__default.ForwardRefExoticComponent<Omit<Props, "ref"> & React__default.RefAttributes<unknown>>;
+
+declare function Wrapper(p: {
+    children: React__default.ReactNode;
+    haveBorder: boolean;
+    title?: React__default.ComponentProps<typeof BorderBox>["title"];
+} & React__default.ComponentProps<typeof BorderBox>): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare function TelPhoneInput(p: React__default.ComponentProps<typeof PhoneInput> & {
+    error?: boolean;
+    iconComponent?: React__default.ElementType;
+}): react_jsx_runtime.JSX.Element;
+
+declare const textFieldTheme: {
+    readonly defaultProps: {
+        readonly size: "small";
+    };
+    readonly styleOverrides: {
+        readonly root: {
+            readonly "& fieldset": {
+                readonly borderColor: "var(--mui-palette-text-secondary)";
+            };
+            readonly "& .MuiOutlinedInput-root.Mui-focused:not(.Mui-error) fieldset": {
+                readonly borderColor: "var(--mui-palette-text-secondary)";
+            };
+        };
+    };
+};
+declare const inputBaseTheme: {
+    readonly styleOverrides: {
+        readonly root: {
+            readonly "&.MuiInputBase-root::after": {
+                readonly borderColor: "var(--mui-palette-text-secondary)";
+            };
+            readonly "&.MuiInputBase-root::before": {
+                readonly borderColor: "var(--mui-palette-text-secondary)";
+            };
+        };
+    };
+};
+
+/**
+ * A TextField Variant
+ *
+ * `variant="standard"`
+ *
+ * [Doc](https://mui.com/material-ui/api/text-field/)
+ */
+declare const LineInput: React$1.ForwardRefExoticComponent<(Omit<{
+    multiline?: boolean;
+    rows?: number;
+    margin?: "dense" | "normal" | "none";
+    size?: "small" | "medium";
+    label?: string;
+} & _mui_material_TextField.FilledTextFieldProps, "ref"> | Omit<{
+    multiline?: boolean;
+    rows?: number;
+    margin?: "dense" | "normal" | "none";
+    size?: "small" | "medium";
+    label?: string;
+} & _mui_material_TextField.OutlinedTextFieldProps, "ref"> | Omit<{
+    multiline?: boolean;
+    rows?: number;
+    margin?: "dense" | "normal" | "none";
+    size?: "small" | "medium";
+    label?: string;
+} & _mui_material_TextField.StandardTextFieldProps, "ref">) & React$1.RefAttributes<HTMLInputElement>>;
+
+export { LineInput, PopperInput, type PopperInputRef, StackInput, TelPhoneInput, inputBaseTheme, textFieldTheme };

package/dist/input.d.ts

@@ -0,0 +1,195 @@
+import * as React$1 from 'react';
+import React__default from 'react';
+import * as _mui_material_TextField from '@mui/material/TextField';
+import _mui_material_TextField__default from '@mui/material/TextField';
+export { default as TextField } from '@mui/material/TextField';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import InputBase, { InputBaseProps } from '@mui/material/InputBase';
+import { PaperProps } from '@mui/material/Paper';
+import { BoxProps } from '@mui/material/Box';
+import _mui_material_IconButton from '@mui/material/IconButton';
+import { TooltipProps } from '@mui/material/Tooltip';
+import PhoneInput from 'react-phone-number-input';
+
+type Props$3 = {
+    margin?: 'dense' | 'normal' | 'none';
+    inputProps?: [string, React.Dispatch<React.SetStateAction<string>>];
+    lineHeight?: string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    label?: string;
+} & React.ComponentProps<typeof _mui_material_TextField__default>;
+type PopperInputRef = {
+    getValue: () => string;
+};
+/**
+ * A Input component that uses Popper to display the input field.
+ *
+ * has get value method if ref is provided.
+ *
+ * [Doc](https://mui.com/material-ui/api/text-field/)
+ */
+declare const PopperInput: React$1.ForwardRefExoticComponent<Omit<Props$3, "ref"> & React$1.RefAttributes<PopperInputRef>>;
+
+/**
+ * A wrapper for Mui Paper
+ */
+declare function MuiPaper(props: PaperProps): react_jsx_runtime.JSX.Element;
+
+type Props$2 = {
+    children: React__default.ReactNode;
+    title?: string;
+    error?: boolean;
+    pyPx?: number;
+    pxPx?: number;
+} & BoxProps;
+/**
+ * A Mui TextField like Box with a title and a border.
+ *
+ * Props options:
+ *
+ * @property {ReactNode} children - Whatever go inside the box.
+ * @property {string} title - The left top title.
+ * @property {string} error - change border-color to red.
+ * @property {number} pyPx - padding top and bottom.
+ * @property {number} pxPx - padding left and right.
+ * @property {Record<string, unknown>} ...rest - Box props to the outer box.
+ * @example
+ * ### Example
+ * ```js
+ * const B = () => (
+ * <BorderBox title="title" error={false} ref={ref}>
+ *  something inside
+ * </BorderBox>)
+ * ```
+ */
+declare const BorderBox: React__default.ForwardRefExoticComponent<Omit<Props$2, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+type IconButtonProps = React.ComponentProps<typeof _mui_material_IconButton>;
+type Props$1 = {
+    /** The Icon to render */
+    children: React.ReactNode;
+    /** The title of the tooltip */
+    title?: string;
+    /**
+     * The color theme of the entire component.
+     * @default 'secondary' (from theme)
+     */
+    color?: IconButtonProps['color'];
+    /**
+     * The size of the component.
+     * @default 'small' (from theme)
+     */
+    size?: IconButtonProps['size'];
+    selected?: boolean;
+    slotProps?: {
+        tooltip?: Omit<TooltipProps, "children">;
+    };
+} & Omit<IconButtonProps, "color" | "size">;
+/**
+ * A MuiIconButton wrapped in a MuiTooltip.
+ * Default props like `size` and `color` are handled by the theme.
+ */
+declare const IconButton: React$1.ForwardRefExoticComponent<Omit<Props$1, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+type buttonOptions = {
+    icon: React__default.ReactNode;
+} & Omit<React__default.ComponentProps<typeof IconButton>, "children" | "size">;
+type Props = {
+    multiline?: boolean;
+    rows?: number;
+    margin?: 'dense' | 'normal' | 'none';
+    size?: 'small' | 'medium';
+    label?: string;
+    value?: string;
+    placeholder?: string;
+    inputProps?: Record<string, unknown>;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    startButtons?: buttonOptions[];
+    endButtons?: buttonOptions[];
+    br?: number;
+    haveBorder?: boolean;
+    borderTitle?: React__default.ComponentProps<typeof Wrapper>["title"];
+    /** Optional custom input component (e.g. raw phone input) */
+    InputComponent?: React__default.ElementType;
+    /** Props forwarded to the custom input component */
+    inputComponentProps?: Record<string, unknown>;
+    slotProps?: {
+        input?: Partial<React__default.ComponentProps<typeof InputBase>["slotProps"]>;
+        paper?: Partial<React__default.ComponentProps<typeof MuiPaper>>;
+        wrapper?: Partial<React__default.ComponentProps<typeof BorderBox>>;
+    };
+} & InputBaseProps;
+/**
+ * A input component stacked with buttons on the left and right side.
+ *
+ * [Doc](https://mui.com/material-ui/api/text-field/)
+ */
+declare const StackInput: React__default.ForwardRefExoticComponent<Omit<Props, "ref"> & React__default.RefAttributes<unknown>>;
+
+declare function Wrapper(p: {
+    children: React__default.ReactNode;
+    haveBorder: boolean;
+    title?: React__default.ComponentProps<typeof BorderBox>["title"];
+} & React__default.ComponentProps<typeof BorderBox>): string | number | bigint | boolean | Iterable<React__default.ReactNode> | Promise<string | number | bigint | boolean | React__default.ReactPortal | React__default.ReactElement<unknown, string | React__default.JSXElementConstructor<any>> | Iterable<React__default.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+
+declare function TelPhoneInput(p: React__default.ComponentProps<typeof PhoneInput> & {
+    error?: boolean;
+    iconComponent?: React__default.ElementType;
+}): react_jsx_runtime.JSX.Element;
+
+declare const textFieldTheme: {
+    readonly defaultProps: {
+        readonly size: "small";
+    };
+    readonly styleOverrides: {
+        readonly root: {
+            readonly "& fieldset": {
+                readonly borderColor: "var(--mui-palette-text-secondary)";
+            };
+            readonly "& .MuiOutlinedInput-root.Mui-focused:not(.Mui-error) fieldset": {
+                readonly borderColor: "var(--mui-palette-text-secondary)";
+            };
+        };
+    };
+};
+declare const inputBaseTheme: {
+    readonly styleOverrides: {
+        readonly root: {
+            readonly "&.MuiInputBase-root::after": {
+                readonly borderColor: "var(--mui-palette-text-secondary)";
+            };
+            readonly "&.MuiInputBase-root::before": {
+                readonly borderColor: "var(--mui-palette-text-secondary)";
+            };
+        };
+    };
+};
+
+/**
+ * A TextField Variant
+ *
+ * `variant="standard"`
+ *
+ * [Doc](https://mui.com/material-ui/api/text-field/)
+ */
+declare const LineInput: React$1.ForwardRefExoticComponent<(Omit<{
+    multiline?: boolean;
+    rows?: number;
+    margin?: "dense" | "normal" | "none";
+    size?: "small" | "medium";
+    label?: string;
+} & _mui_material_TextField.FilledTextFieldProps, "ref"> | Omit<{
+    multiline?: boolean;
+    rows?: number;
+    margin?: "dense" | "normal" | "none";
+    size?: "small" | "medium";
+    label?: string;
+} & _mui_material_TextField.OutlinedTextFieldProps, "ref"> | Omit<{
+    multiline?: boolean;
+    rows?: number;
+    margin?: "dense" | "normal" | "none";
+    size?: "small" | "medium";
+    label?: string;
+} & _mui_material_TextField.StandardTextFieldProps, "ref">) & React$1.RefAttributes<HTMLInputElement>>;
+
+export { LineInput, PopperInput, type PopperInputRef, StackInput, TelPhoneInput, inputBaseTheme, textFieldTheme };