@chem-po/react-web 0.0.2 → 0.0.4

package/dist/index.css

@@ -0,0 +1,2 @@
+.page{display:flex;align-items:center;flex-direction:column;position:relative;overflow:hidden;width:100%;min-height:0;flex:1}.page-enter{opacity:0;transform:scale(1.05);overflow:hidden}.page-enter-active{opacity:1;transform:scale(1);overflow:hidden!important;transition:opacity .3s,transform .3s}.page-exit{opacity:1;transform:scale(1)}.page-exit-active{opacity:0;overflow:hidden!important;transition:opacity .3s,transform .3s}.gradient-text{background-clip:text!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}.react-date-picker,.react-datetime-picker,.react-time-picker{border:none;width:100%;box-sizing:border-box;margin:.25rem;padding:.5rem;border:1px solid #cdcdcd}.react-date-picker__wrapper,.react-datetime-picker__wrapper,.react-time-picker__wrapper{width:100%;display:flex;border:none!important}.react-date-picker__clear-button__icon,.react-date-picker__button__icon,.react-time-picker__clear-button,.react-time-picker__button__icon{margin-left:auto}.react-date-picker__inputGroup,.react-datetime-picker__inputGroup{flex:1}.react-date-picker__inputGroup>input,.react-time-picker__inputGroup>input,.react-time-picker__inputGroup>select{font-size:1rem;color:#000a;background-color:transparent;width:50px;outline:none;margin:0 .3rem;font-family:Public Sans}.number-input::placeholder{opacity:.7;color:#000}.number-input-dark::placeholder{opacity:.7;color:#fff}.upload-enter{opacity:0;height:0;overflow:hidden}.upload-enter-active{opacity:1;height:26px;overflow:hidden;transition:opacity .3s,height .3s}.upload-exit{opacity:1;height:26px;overflow:hidden}.upload-exit-active{opacity:0;height:0;overflow:hidden;transition:opacity .3s,height .3s}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/box/MobileFrame/styles.css","../src/components/text/GradientText/styles.css","../src/components/form/input/input.css","../src/components/form/input/number/styles.css","../src/components/form/UploadProgress/styles.css"],"sourcesContent":[".page {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  min-height: 0;\n  flex: 1;\n}\n\n.page-enter {\n  opacity: 0;\n  transform: scale(1.05);\n  overflow: hidden;\n}\n\n.page-enter-active {\n  opacity: 1;\n  transform: scale(1);\n  overflow: hidden !important;\n  transition: opacity 300ms, transform 300ms;\n}\n\n.page-exit {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.page-exit-active {\n  opacity: 0;\n  overflow: hidden !important;\n  /* transform: scale(0.95); */\n  transition: opacity 300ms, transform 300ms;\n}\n",".gradient-text {\n  background-clip: text !important;\n  -webkit-background-clip: text !important;\n  -webkit-text-fill-color: transparent !important;\n}\n",".react-date-picker,\n.react-datetime-picker,\n.react-time-picker {\n  border: none;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0.25rem 0.25rem;\n  padding: 0.5rem 0.5rem;\n  /* box-shadow: 0 0 7px rgba(0, 0, 0, 0.1); */\n  border: 1px solid #cdcdcd;\n  /* background-color: white; */\n}\n\n.react-date-picker__wrapper,\n.react-datetime-picker__wrapper,\n.react-time-picker__wrapper {\n  width: 100%;\n  display: flex;\n  border: none !important;\n}\n\n.react-date-picker__clear-button__icon,\n.react-date-picker__button__icon,\n.react-time-picker__clear-button,\n.react-time-picker__button__icon {\n  margin-left: auto;\n}\n\n.react-date-picker__inputGroup,\n.react-datetime-picker__inputGroup {\n  flex: 1;\n}\n\n.react-date-picker__inputGroup > input,\n.react-time-picker__inputGroup > input,\n.react-time-picker__inputGroup > select {\n  font-size: 1rem;\n  color: #000000aa;\n  background-color: transparent;\n  width: 50px;\n  outline: none;\n  margin: 0 0.3rem;\n  font-family: 'Public Sans';\n}\n",".number-input::placeholder {\n  opacity: 0.7;\n  color: #000;\n}\n.number-input-dark::placeholder {\n  opacity: 0.7;\n  color: white;\n}\n",".upload-enter {\n  opacity: 0;\n  height: 0;\n  overflow: hidden;\n}\n.upload-enter-active {\n  opacity: 1;\n  height: 26px;\n  overflow: hidden;\n  transition: opacity 300ms, height 300ms;\n}\n\n.upload-exit {\n  opacity: 1;\n  height: 26px;\n  overflow: hidden;\n}\n.upload-exit-active {\n  opacity: 0;\n  height: 0;\n  overflow: hidden;\n  transition: opacity 300ms, height 300ms;\n}\n"],"mappings":"AAAA,CAAC,KACC,QAAS,KACT,YAAa,OACb,eAAgB,OAChB,SAAU,SACV,SAAU,OACV,MAAO,KACP,WAAY,EACZ,KAAM,CACR,CAEA,CAAC,WACC,QAAS,EACT,UAAW,MAAM,MACjB,SAAU,MACZ,CAEA,CAAC,kBACC,QAAS,EACT,UAAW,MAAM,GACjB,SAAU,iBACV,WAAY,QAAQ,GAAK,CAAE,UAAU,GACvC,CAEA,CAAC,UACC,QAAS,EACT,UAAW,MAAM,EACnB,CAEA,CAAC,iBACC,QAAS,EACT,SAAU,iBAEV,WAAY,QAAQ,GAAK,CAAE,UAAU,GACvC,CClCA,CAAC,cACC,gBAAiB,eACjB,wBAAyB,eACzB,wBAAyB,qBAC3B,CCJA,CAAC,kBACD,CAAC,sBACD,CAAC,kBACC,OAAQ,KACR,MAAO,KACP,WAAY,WALd,OAMU,OANV,QAOW,MAET,OAAQ,IAAI,MAAM,OAEpB,CAEA,CAAC,2BACD,CAAC,+BACD,CAAC,2BACC,MAAO,KACP,QAAS,KACT,OAAQ,cACV,CAEA,CAAC,sCACD,CAAC,gCACD,CAAC,gCACD,CAAC,gCACC,YAAa,IACf,CAEA,CAAC,8BACD,CAAC,kCACC,KAAM,CACR,CAEA,CALC,6BAK8B,CAAE,MACjC,CAAC,6BAA8B,CAAE,MACjC,CADC,6BAC8B,CAAE,OAC/B,UAAW,KACX,MAAO,MACP,iBAAkB,YAClB,MAAO,KACP,QAAS,KAxCX,OAyCU,EAAE,MACV,YAAa,WACf,CC3CA,CAAC,YAAY,cACX,QAAS,GACT,MAAO,IACT,CACA,CAAC,iBAAiB,cAChB,QAAS,GACT,MAAO,IACT,CCPA,CAAC,aACC,QAAS,EACT,OAAQ,EACR,SAAU,MACZ,CACA,CAAC,oBACC,QAAS,EACT,OAAQ,KACR,SAAU,OACV,WAAY,QAAQ,GAAK,CAAE,OAAO,GACpC,CAEA,CAAC,YACC,QAAS,EACT,OAAQ,KACR,SAAU,MACZ,CACA,CAAC,mBACC,QAAS,EACT,OAAQ,EACR,SAAU,OACV,WAAY,QAAQ,GAAK,CAAE,OAAO,GACpC","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,323 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { CenterProps, FlexProps, StackProps, BoxProps, IconButtonProps, CircularProgressProps, ImageProps, ButtonProps, ModalProps, ModalContentProps } from '@chakra-ui/react';
+import * as react from 'react';
+import react__default, { PropsWithChildren, FC, ReactNode, JSX, MouseEvent, CSSProperties } from 'react';
+import { View, ListField, FormProps, DataViewProps, FieldMapFormProps, FieldFormProps, Field, EditableProps, ListProviderProps, ThemedAsset } from '@chem-po/react';
+import { AnyObject, WithId, FetchFeedFunction, FileValue, InputRef, ImageViewOptions, SpotifyTrack } from '@chem-po/core';
+
+interface SignInProps {
+    layout?: 'row' | 'column';
+}
+declare const SignIn: ({ layout }: SignInProps) => react_jsx_runtime.JSX.Element;
+declare const AbsoluteLogin: (props: SignInProps) => react_jsx_runtime.JSX.Element;
+
+declare const CollapseHorizontal: ({ width, children, active, duration, ...props }: CenterProps & {
+    width: number;
+    active: boolean;
+    duration?: number;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const ContentBox: react.ForwardRefExoticComponent<FlexProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const Expandable: ({ header, children, initExpanded, nested, alwaysExpanded, headerProps, iconColor, footer, isOpen: isOpenProp, onClose: onCloseProp, onOpen: onOpenProp, ...stackProps }: PropsWithChildren<StackProps & {
+    header: string | FC<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
+    footer?: FC<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
+    headerProps?: StackProps;
+    nested?: boolean;
+    alwaysExpanded?: boolean;
+    initExpanded?: boolean;
+    isOpen?: boolean;
+    onClose?: () => void;
+    iconColor?: string;
+    onOpen?: () => void;
+}>) => react_jsx_runtime.JSX.Element;
+
+declare const ExpandOnMount: FC<BoxProps & {
+    in?: boolean;
+    animateOpacity?: boolean;
+    duration?: number;
+    onExited?: () => void;
+}>;
+
+declare const FullSizeContainer: ({ children, ...props }: Omit<BoxProps, "children"> & {
+    children: FC<{
+        width: number;
+        height: number;
+    }>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FullSizeProvider: ({ children, ...props }: BoxProps) => react_jsx_runtime.JSX.Element;
+
+declare const MobileFrame: ({ children, navBarChildren, views, }: PropsWithChildren<{
+    views: View[];
+    navBarChildren?: ReactNode;
+}>) => react_jsx_runtime.JSX.Element;
+
+declare const DeleteConfirmAlert: ({ confirmActive, onCancel, onConfirm, body, actionName, actionLoading, itemName, }: {
+    confirmActive: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+    body?: string | ReactNode;
+    actionLoading?: boolean;
+    actionName?: string;
+    itemName: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const DeleteButton: react__default.FC<Partial<IconButtonProps> & {
+    onDelete: (() => Promise<any>) | (() => void);
+    itemName: string;
+    actionName?: string;
+    noConfirm?: boolean;
+    text?: string;
+    alertBody?: string | ReactNode;
+}>;
+
+interface ToggleOption<Option extends string = string> {
+    id: Option;
+    label: string;
+    disabledMessage?: string;
+    Render: (selected: boolean) => JSX.Element;
+}
+interface ToggleProps<Option extends string> {
+    options: ToggleOption<Option>[];
+    value: Option;
+    size?: number;
+    onChange: (value: Option) => Promise<void> | void;
+}
+declare const Toggle: <Option extends string>({ value, onChange, size, options, }: ToggleProps<Option>) => react_jsx_runtime.JSX.Element;
+
+declare const ViewButton: FC<{
+    onClick: (e: MouseEvent) => void;
+    isOpen: boolean;
+    viewText?: string;
+    hideText?: string;
+    color?: string;
+}>;
+
+interface MediaFeedContextValue<T extends AnyObject = AnyObject> {
+    curr: WithId<T> | null;
+}
+declare const useMediaFeed: <T extends AnyObject = AnyObject>() => MediaFeedContextValue<T>;
+
+type GetBackgroundUrl<T extends AnyObject = AnyObject> = (item: T) => string | null | undefined;
+type GetBackgroundValue<T extends AnyObject = AnyObject> = (item: T) => FileValue | null | undefined;
+interface MediaFeedProps<T extends AnyObject = AnyObject> {
+    collection: string;
+    fetch: FetchFeedFunction;
+    authRequired?: boolean;
+    limit?: number;
+    swipeDisabled?: boolean;
+    defaultBackground?: string;
+    getBackgroundUrl?: GetBackgroundUrl<T>;
+    getBackgroundValue?: GetBackgroundValue<T>;
+    RenderItem: (item: WithId<T>) => JSX.Element;
+}
+
+declare const MediaFeed: <T extends AnyObject = AnyObject>({ fetch, collection: collectionPath, RenderItem, authRequired, getBackgroundUrl, getBackgroundValue, limit, defaultBackground, swipeDisabled, children, }: PropsWithChildren<MediaFeedProps<T>>) => react_jsx_runtime.JSX.Element;
+
+declare const ListFieldInput: FC<{
+    field: ListField;
+    name: string;
+}>;
+declare const FormElement: ({ field, name, }: {
+    field: FormProps["field"];
+    name: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const DataView: ({ field, value, onClose, onDelete, onSubmit, itemName, storagePath, path, }: DataViewProps & {
+    path?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const FieldMapForm: FC<FieldMapFormProps>;
+declare const FieldForm: FC<FieldFormProps>;
+declare const Form: FC<FormProps>;
+
+declare const Editable: <T extends Field>({ value: initValue, field, onSubmit, storagePath, style, onEditClose, onEditOpen, }: EditableProps<CSSProperties, T>) => react_jsx_runtime.JSX.Element;
+
+declare const StandaloneInput: react.ForwardRefExoticComponent<{
+    onChange: (v?: any) => void;
+    value?: any;
+    field: Field;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    theme?: "basic" | "detailed";
+    inEditable?: boolean;
+    style?: CSSProperties;
+} & react.RefAttributes<InputRef>>;
+
+declare const FileView: ({ value, hasUpload, noLabel, loading, imageOptions, }: {
+    value?: FileValue | null;
+    hasUpload?: boolean;
+    noLabel?: boolean;
+    loading?: boolean;
+    imageOptions?: ImageViewOptions;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const FieldView: ({ field, value, noLabel, style, }: {
+    field: Field;
+    value: any;
+    noLabel?: boolean;
+    style?: CSSProperties;
+}) => react_jsx_runtime.JSX.Element;
+
+interface DataListHeaderProps {
+    onResize: (size: {
+        height: number;
+        width: number;
+    }) => void;
+    refetch?: () => void;
+    boxProps?: BoxProps;
+}
+interface DataListFooterProps {
+    flexProps?: FlexProps;
+    noFooter?: boolean;
+    onResize: (size: {
+        height: number;
+        width: number;
+    }) => void;
+}
+type ListViewProps<T extends AnyObject> = ListProviderProps<T> & {
+    flexProps?: FlexProps;
+    footerProps?: FlexProps;
+    noFooter?: boolean;
+    headerProps?: BoxProps;
+    modals?: ReactNode;
+};
+type ListContentProps<T extends AnyObject> = Omit<ListViewProps<T>, 'list' | 'basePath' | 'flexProps'>;
+
+declare const DataList: <T extends AnyObject>({ list, basePath, flexProps, infiniteScroll, ...rest }: ListViewProps<T>) => react_jsx_runtime.JSX.Element;
+
+declare const ListContainer: (props: FlexProps) => react_jsx_runtime.JSX.Element;
+
+declare const ListContent: <T extends AnyObject>({ modals, noFooter, headerProps, footerProps, }: ListContentProps<T>) => react_jsx_runtime.JSX.Element;
+
+declare const CircularProgress: (props: CircularProgressProps) => react_jsx_runtime.JSX.Element;
+
+declare const LottieLoadingLogo: ({ size, isLoading, speed, inFeed, asset, }: {
+    size?: number | string;
+    color?: string;
+    isLoading: boolean;
+    asset: ThemedAsset;
+    inFeed?: boolean;
+    speed?: number;
+}) => react_jsx_runtime.JSX.Element;
+declare const LoadingLogo: ({ isLoading, size, inFeed, }: {
+    isLoading: boolean;
+    size?: number | string;
+    inFeed?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+declare const Loading: ({ text, inBox, stackProps, }: {
+    text?: string;
+    inBox?: boolean;
+    stackProps?: StackProps;
+}) => react_jsx_runtime.JSX.Element;
+declare const LoadingOverlay: ({ isLoading, text, inFeed, ...props }: {
+    isLoading: boolean;
+    text?: string;
+    inFeed?: boolean;
+} & CenterProps) => react_jsx_runtime.JSX.Element;
+
+interface LoadingImageProps {
+    src?: string | null;
+    loadingOverride?: boolean;
+    onLoad?: ImageProps['onLoad'];
+    alt?: string;
+    noFullView?: boolean;
+    buttonFullView?: boolean;
+    imageProps?: Omit<ImageProps, 'onLoad'>;
+}
+declare const LoadingImage: ({ src, loadingOverride, alt, onLoad, width, height, noFullView, buttonFullView, imageProps, ...boxProps }: LoadingImageProps & Omit<BoxProps, "onLoad">) => react_jsx_runtime.JSX.Element;
+
+declare const LoadingSwitch: ({ value, label, onChange, }: {
+    value: boolean;
+    label: string;
+    onChange: (updated: boolean) => Promise<void>;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const PlayButton: ({ media, size, opacity, buttonProps, }: {
+    media: WithId<SpotifyTrack> | null;
+    size?: number;
+    opacity?: number;
+    withThumbnail?: boolean;
+    buttonProps?: ButtonProps;
+}) => react_jsx_runtime.JSX.Element;
+
+type DefaultModalProps = PropsWithChildren<Omit<ModalProps, 'render'>> & {
+    contentProps?: ModalContentProps;
+    onContentMounted?: (mounted: boolean) => void;
+};
+
+declare const DefaultModal: (props: DefaultModalProps) => react_jsx_runtime.JSX.Element;
+
+declare const DesktopModal: ({ children, isOpen, contentProps, ...props }: DefaultModalProps) => react_jsx_runtime.JSX.Element;
+
+declare const MobileOverlayBackground: ({ onClick }: {
+    onClick?: () => void;
+}) => react_jsx_runtime.JSX.Element;
+declare const MobileModal: ({ isOpen, onClose, children, contentProps, onContentMounted, closeOnOverlayClick, }: DefaultModalProps) => react_jsx_runtime.JSX.Element | null;
+
+declare const NAV_BAR_HEIGHT = 50;
+declare const NavBar: ({ selectedView, children, }: PropsWithChildren<{
+    selectedView?: View | null;
+}>) => react_jsx_runtime.JSX.Element;
+
+declare const ImageViewOverlay: ({ src, onClose }: {
+    src: string;
+    onClose: () => void;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const MobileOverlay: (props: FlexProps) => react_jsx_runtime.JSX.Element;
+
+declare const NumberTicker: ({ value, duration }: {
+    value: number;
+    duration?: number;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const DarkModeToggle: () => react_jsx_runtime.JSX.Element;
+declare const AbsoluteDarkModeToggle: (props: FlexProps) => react_jsx_runtime.JSX.Element;
+
+declare const ErrorView: ({ message }: {
+    message?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const RedirectView: react__default.FC<{
+    loading?: boolean;
+}>;
+
+declare const switchTheme: {
+    baseStyle?: {
+        track: {
+            _focusVisible: {
+                boxShadow: string;
+            };
+        };
+    } | undefined;
+    sizes?: {
+        [key: string]: _chakra_ui_react.PartsStyleInterpolation<{
+            keys: ("label" | "track" | "container" | "thumb")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: _chakra_ui_react.PartsStyleInterpolation<{
+            keys: ("label" | "track" | "container" | "thumb")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("label" | "track" | "container" | "thumb")[];
+};
+declare const headingFont = "Encode Sans";
+declare const bodyFont = "Noto Sans";
+declare const baseTheme: Record<string, any>;
+
+declare const useBorderColor: () => "#00000033" | "#ffffff33";
+
+declare const initializeScreen: () => () => void;
+
+export { AbsoluteDarkModeToggle, AbsoluteLogin, CircularProgress, CollapseHorizontal, ContentBox, DarkModeToggle, DataList, type DataListFooterProps, type DataListHeaderProps, DataView, DefaultModal, DeleteButton, DeleteConfirmAlert, DesktopModal, Editable, ErrorView, ExpandOnMount, Expandable, FieldForm, FieldMapForm, FieldView, FileView, Form, FormElement, FullSizeContainer, FullSizeProvider, ImageViewOverlay, ListContainer, ListContent, type ListContentProps, ListFieldInput, type ListViewProps, Loading, LoadingImage, type LoadingImageProps, LoadingLogo, LoadingOverlay, LoadingSwitch, LottieLoadingLogo, MediaFeed, MobileFrame, MobileModal, MobileOverlay, MobileOverlayBackground, NAV_BAR_HEIGHT, NavBar, NumberTicker, PlayButton, RedirectView, SignIn, StandaloneInput, Toggle, type ToggleOption, type ToggleProps, ViewButton, baseTheme, bodyFont, headingFont, initializeScreen, switchTheme, useBorderColor, useMediaFeed };

package/dist/index.d.ts

@@ -0,0 +1,323 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _chakra_ui_react from '@chakra-ui/react';
+import { CenterProps, FlexProps, StackProps, BoxProps, IconButtonProps, CircularProgressProps, ImageProps, ButtonProps, ModalProps, ModalContentProps } from '@chakra-ui/react';
+import * as react from 'react';
+import react__default, { PropsWithChildren, FC, ReactNode, JSX, MouseEvent, CSSProperties } from 'react';
+import { View, ListField, FormProps, DataViewProps, FieldMapFormProps, FieldFormProps, Field, EditableProps, ListProviderProps, ThemedAsset } from '@chem-po/react';
+import { AnyObject, WithId, FetchFeedFunction, FileValue, InputRef, ImageViewOptions, SpotifyTrack } from '@chem-po/core';
+
+interface SignInProps {
+    layout?: 'row' | 'column';
+}
+declare const SignIn: ({ layout }: SignInProps) => react_jsx_runtime.JSX.Element;
+declare const AbsoluteLogin: (props: SignInProps) => react_jsx_runtime.JSX.Element;
+
+declare const CollapseHorizontal: ({ width, children, active, duration, ...props }: CenterProps & {
+    width: number;
+    active: boolean;
+    duration?: number;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const ContentBox: react.ForwardRefExoticComponent<FlexProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const Expandable: ({ header, children, initExpanded, nested, alwaysExpanded, headerProps, iconColor, footer, isOpen: isOpenProp, onClose: onCloseProp, onOpen: onOpenProp, ...stackProps }: PropsWithChildren<StackProps & {
+    header: string | FC<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
+    footer?: FC<{
+        isOpen: boolean;
+        onClose: () => void;
+    }>;
+    headerProps?: StackProps;
+    nested?: boolean;
+    alwaysExpanded?: boolean;
+    initExpanded?: boolean;
+    isOpen?: boolean;
+    onClose?: () => void;
+    iconColor?: string;
+    onOpen?: () => void;
+}>) => react_jsx_runtime.JSX.Element;
+
+declare const ExpandOnMount: FC<BoxProps & {
+    in?: boolean;
+    animateOpacity?: boolean;
+    duration?: number;
+    onExited?: () => void;
+}>;
+
+declare const FullSizeContainer: ({ children, ...props }: Omit<BoxProps, "children"> & {
+    children: FC<{
+        width: number;
+        height: number;
+    }>;
+}) => react_jsx_runtime.JSX.Element;
+declare const FullSizeProvider: ({ children, ...props }: BoxProps) => react_jsx_runtime.JSX.Element;
+
+declare const MobileFrame: ({ children, navBarChildren, views, }: PropsWithChildren<{
+    views: View[];
+    navBarChildren?: ReactNode;
+}>) => react_jsx_runtime.JSX.Element;
+
+declare const DeleteConfirmAlert: ({ confirmActive, onCancel, onConfirm, body, actionName, actionLoading, itemName, }: {
+    confirmActive: boolean;
+    onCancel: () => void;
+    onConfirm: () => void;
+    body?: string | ReactNode;
+    actionLoading?: boolean;
+    actionName?: string;
+    itemName: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const DeleteButton: react__default.FC<Partial<IconButtonProps> & {
+    onDelete: (() => Promise<any>) | (() => void);
+    itemName: string;
+    actionName?: string;
+    noConfirm?: boolean;
+    text?: string;
+    alertBody?: string | ReactNode;
+}>;
+
+interface ToggleOption<Option extends string = string> {
+    id: Option;
+    label: string;
+    disabledMessage?: string;
+    Render: (selected: boolean) => JSX.Element;
+}
+interface ToggleProps<Option extends string> {
+    options: ToggleOption<Option>[];
+    value: Option;
+    size?: number;
+    onChange: (value: Option) => Promise<void> | void;
+}
+declare const Toggle: <Option extends string>({ value, onChange, size, options, }: ToggleProps<Option>) => react_jsx_runtime.JSX.Element;
+
+declare const ViewButton: FC<{
+    onClick: (e: MouseEvent) => void;
+    isOpen: boolean;
+    viewText?: string;
+    hideText?: string;
+    color?: string;
+}>;
+
+interface MediaFeedContextValue<T extends AnyObject = AnyObject> {
+    curr: WithId<T> | null;
+}
+declare const useMediaFeed: <T extends AnyObject = AnyObject>() => MediaFeedContextValue<T>;
+
+type GetBackgroundUrl<T extends AnyObject = AnyObject> = (item: T) => string | null | undefined;
+type GetBackgroundValue<T extends AnyObject = AnyObject> = (item: T) => FileValue | null | undefined;
+interface MediaFeedProps<T extends AnyObject = AnyObject> {
+    collection: string;
+    fetch: FetchFeedFunction;
+    authRequired?: boolean;
+    limit?: number;
+    swipeDisabled?: boolean;
+    defaultBackground?: string;
+    getBackgroundUrl?: GetBackgroundUrl<T>;
+    getBackgroundValue?: GetBackgroundValue<T>;
+    RenderItem: (item: WithId<T>) => JSX.Element;
+}
+
+declare const MediaFeed: <T extends AnyObject = AnyObject>({ fetch, collection: collectionPath, RenderItem, authRequired, getBackgroundUrl, getBackgroundValue, limit, defaultBackground, swipeDisabled, children, }: PropsWithChildren<MediaFeedProps<T>>) => react_jsx_runtime.JSX.Element;
+
+declare const ListFieldInput: FC<{
+    field: ListField;
+    name: string;
+}>;
+declare const FormElement: ({ field, name, }: {
+    field: FormProps["field"];
+    name: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const DataView: ({ field, value, onClose, onDelete, onSubmit, itemName, storagePath, path, }: DataViewProps & {
+    path?: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const FieldMapForm: FC<FieldMapFormProps>;
+declare const FieldForm: FC<FieldFormProps>;
+declare const Form: FC<FormProps>;
+
+declare const Editable: <T extends Field>({ value: initValue, field, onSubmit, storagePath, style, onEditClose, onEditOpen, }: EditableProps<CSSProperties, T>) => react_jsx_runtime.JSX.Element;
+
+declare const StandaloneInput: react.ForwardRefExoticComponent<{
+    onChange: (v?: any) => void;
+    value?: any;
+    field: Field;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    theme?: "basic" | "detailed";
+    inEditable?: boolean;
+    style?: CSSProperties;
+} & react.RefAttributes<InputRef>>;
+
+declare const FileView: ({ value, hasUpload, noLabel, loading, imageOptions, }: {
+    value?: FileValue | null;
+    hasUpload?: boolean;
+    noLabel?: boolean;
+    loading?: boolean;
+    imageOptions?: ImageViewOptions;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const FieldView: ({ field, value, noLabel, style, }: {
+    field: Field;
+    value: any;
+    noLabel?: boolean;
+    style?: CSSProperties;
+}) => react_jsx_runtime.JSX.Element;
+
+interface DataListHeaderProps {
+    onResize: (size: {
+        height: number;
+        width: number;
+    }) => void;
+    refetch?: () => void;
+    boxProps?: BoxProps;
+}
+interface DataListFooterProps {
+    flexProps?: FlexProps;
+    noFooter?: boolean;
+    onResize: (size: {
+        height: number;
+        width: number;
+    }) => void;
+}
+type ListViewProps<T extends AnyObject> = ListProviderProps<T> & {
+    flexProps?: FlexProps;
+    footerProps?: FlexProps;
+    noFooter?: boolean;
+    headerProps?: BoxProps;
+    modals?: ReactNode;
+};
+type ListContentProps<T extends AnyObject> = Omit<ListViewProps<T>, 'list' | 'basePath' | 'flexProps'>;
+
+declare const DataList: <T extends AnyObject>({ list, basePath, flexProps, infiniteScroll, ...rest }: ListViewProps<T>) => react_jsx_runtime.JSX.Element;
+
+declare const ListContainer: (props: FlexProps) => react_jsx_runtime.JSX.Element;
+
+declare const ListContent: <T extends AnyObject>({ modals, noFooter, headerProps, footerProps, }: ListContentProps<T>) => react_jsx_runtime.JSX.Element;
+
+declare const CircularProgress: (props: CircularProgressProps) => react_jsx_runtime.JSX.Element;
+
+declare const LottieLoadingLogo: ({ size, isLoading, speed, inFeed, asset, }: {
+    size?: number | string;
+    color?: string;
+    isLoading: boolean;
+    asset: ThemedAsset;
+    inFeed?: boolean;
+    speed?: number;
+}) => react_jsx_runtime.JSX.Element;
+declare const LoadingLogo: ({ isLoading, size, inFeed, }: {
+    isLoading: boolean;
+    size?: number | string;
+    inFeed?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+declare const Loading: ({ text, inBox, stackProps, }: {
+    text?: string;
+    inBox?: boolean;
+    stackProps?: StackProps;
+}) => react_jsx_runtime.JSX.Element;
+declare const LoadingOverlay: ({ isLoading, text, inFeed, ...props }: {
+    isLoading: boolean;
+    text?: string;
+    inFeed?: boolean;
+} & CenterProps) => react_jsx_runtime.JSX.Element;
+
+interface LoadingImageProps {
+    src?: string | null;
+    loadingOverride?: boolean;
+    onLoad?: ImageProps['onLoad'];
+    alt?: string;
+    noFullView?: boolean;
+    buttonFullView?: boolean;
+    imageProps?: Omit<ImageProps, 'onLoad'>;
+}
+declare const LoadingImage: ({ src, loadingOverride, alt, onLoad, width, height, noFullView, buttonFullView, imageProps, ...boxProps }: LoadingImageProps & Omit<BoxProps, "onLoad">) => react_jsx_runtime.JSX.Element;
+
+declare const LoadingSwitch: ({ value, label, onChange, }: {
+    value: boolean;
+    label: string;
+    onChange: (updated: boolean) => Promise<void>;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const PlayButton: ({ media, size, opacity, buttonProps, }: {
+    media: WithId<SpotifyTrack> | null;
+    size?: number;
+    opacity?: number;
+    withThumbnail?: boolean;
+    buttonProps?: ButtonProps;
+}) => react_jsx_runtime.JSX.Element;
+
+type DefaultModalProps = PropsWithChildren<Omit<ModalProps, 'render'>> & {
+    contentProps?: ModalContentProps;
+    onContentMounted?: (mounted: boolean) => void;
+};
+
+declare const DefaultModal: (props: DefaultModalProps) => react_jsx_runtime.JSX.Element;
+
+declare const DesktopModal: ({ children, isOpen, contentProps, ...props }: DefaultModalProps) => react_jsx_runtime.JSX.Element;
+
+declare const MobileOverlayBackground: ({ onClick }: {
+    onClick?: () => void;
+}) => react_jsx_runtime.JSX.Element;
+declare const MobileModal: ({ isOpen, onClose, children, contentProps, onContentMounted, closeOnOverlayClick, }: DefaultModalProps) => react_jsx_runtime.JSX.Element | null;
+
+declare const NAV_BAR_HEIGHT = 50;
+declare const NavBar: ({ selectedView, children, }: PropsWithChildren<{
+    selectedView?: View | null;
+}>) => react_jsx_runtime.JSX.Element;
+
+declare const ImageViewOverlay: ({ src, onClose }: {
+    src: string;
+    onClose: () => void;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const MobileOverlay: (props: FlexProps) => react_jsx_runtime.JSX.Element;
+
+declare const NumberTicker: ({ value, duration }: {
+    value: number;
+    duration?: number;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const DarkModeToggle: () => react_jsx_runtime.JSX.Element;
+declare const AbsoluteDarkModeToggle: (props: FlexProps) => react_jsx_runtime.JSX.Element;
+
+declare const ErrorView: ({ message }: {
+    message?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+declare const RedirectView: react__default.FC<{
+    loading?: boolean;
+}>;
+
+declare const switchTheme: {
+    baseStyle?: {
+        track: {
+            _focusVisible: {
+                boxShadow: string;
+            };
+        };
+    } | undefined;
+    sizes?: {
+        [key: string]: _chakra_ui_react.PartsStyleInterpolation<{
+            keys: ("label" | "track" | "container" | "thumb")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: _chakra_ui_react.PartsStyleInterpolation<{
+            keys: ("label" | "track" | "container" | "thumb")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("label" | "track" | "container" | "thumb")[];
+};
+declare const headingFont = "Encode Sans";
+declare const bodyFont = "Noto Sans";
+declare const baseTheme: Record<string, any>;
+
+declare const useBorderColor: () => "#00000033" | "#ffffff33";
+
+declare const initializeScreen: () => () => void;
+
+export { AbsoluteDarkModeToggle, AbsoluteLogin, CircularProgress, CollapseHorizontal, ContentBox, DarkModeToggle, DataList, type DataListFooterProps, type DataListHeaderProps, DataView, DefaultModal, DeleteButton, DeleteConfirmAlert, DesktopModal, Editable, ErrorView, ExpandOnMount, Expandable, FieldForm, FieldMapForm, FieldView, FileView, Form, FormElement, FullSizeContainer, FullSizeProvider, ImageViewOverlay, ListContainer, ListContent, type ListContentProps, ListFieldInput, type ListViewProps, Loading, LoadingImage, type LoadingImageProps, LoadingLogo, LoadingOverlay, LoadingSwitch, LottieLoadingLogo, MediaFeed, MobileFrame, MobileModal, MobileOverlay, MobileOverlayBackground, NAV_BAR_HEIGHT, NavBar, NumberTicker, PlayButton, RedirectView, SignIn, StandaloneInput, Toggle, type ToggleOption, type ToggleProps, ViewButton, baseTheme, bodyFont, headingFont, initializeScreen, switchTheme, useBorderColor, useMediaFeed };