@clement_lores/admin-design-system 1.0.0

package/types/src/atoms/currency-input/currency-input.d.ts

@@ -0,0 +1,74 @@
+/// <reference types="react" resolution-mode="require"/>
+import { TypographyProps } from 'styled-system';
+import { CurrencyInputProps as CurrencyInputFieldProps, formatValue as formatCurrencyProperty } from 'react-currency-input-field';
+import { InputProps } from '../input/index.js';
+/**
+ * Prop Types of a CurrencyInput component.
+ * CurrencyInput is based on `react-currency-input-field` @see {@link https://github.com/cchanxzy/react-currency-input-field React Currency Input Field Component}
+ * It extends all {@link SpaceProps}, {@link TypographyProps} and {@link LayoutProps} and {@link https://github.com/cchanxzy/react-currency-input-field#props React Currency Input Field Component Props}
+ * @memberof CurrencyInput
+ * @alias CurrencyInputProps
+ * @property {string} [...] All props default to _currencyinput_ html component like `onChange`,
+ *                          `value` etc.
+ * @property {string} [...] Props from {@link SpaceProps}, {@link TypographyProps}
+ *                          and {@link LayoutProps} + they extend {@link InputProps}
+ */
+export type CurrencyInputProps = TypographyProps & InputProps & CurrencyInputFieldProps;
+/**
+ * @classdesc
+ *
+ * <img src="components/currency-input.png" />
+ *
+ * Wrapped `currencyinput` html element.
+ *
+ * ### Usage
+ *
+ * ```ts
+ * import { CurrencyInput, CurrencyInputProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-currencyinput--default Storybook}
+ * @see CurrencyInputProps
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Label htmlFor="currencyinput1">Some example label</Label>
+ *      <CurrencyInput id="currencyinput1" intlConfig={{ locale: 'en-US', currency: 'GBP' }} />;
+ *   </Box>
+ * )
+ * @section design-system
+ */
+declare const CurrencyInput: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    borderless?: boolean | undefined;
+    variant?: "default" | "sm" | "lg" | "xl" | "xxl" | undefined;
+} & Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+}, "ref" | "form" | "slot" | "style" | "title" | "pattern" | "type" | "name" | "src" | "alt" | "color" | "size" | "content" | "hidden" | "children" | "width" | "height" | "onChange" | "value" | "onClick" | "required" | "checked" | "accept" | "autoComplete" | "capture" | "crossOrigin" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "min" | "minLength" | "multiple" | "readOnly" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "enterKeyHint"> & {
+    allowDecimals?: boolean | undefined;
+    allowNegativeValue?: boolean | undefined;
+    id?: string | undefined;
+    maxLength?: number | undefined;
+    className?: string | undefined;
+    customInput?: import("react").ElementType | undefined;
+    decimalsLimit?: number | undefined;
+    decimalScale?: number | undefined;
+    defaultValue?: string | number | undefined;
+    disabled?: boolean | undefined;
+    fixedDecimalLength?: number | undefined;
+    onValueChange?: ((value: string | undefined, name?: string | undefined, values?: import("react-currency-input-field/dist/components/CurrencyInputProps.js").CurrencyInputOnChangeValues | undefined) => void) | undefined;
+    placeholder?: string | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    step?: number | undefined;
+    decimalSeparator?: string | undefined;
+    groupSeparator?: string | undefined;
+    disableGroupSeparators?: boolean | undefined;
+    disableAbbreviations?: boolean | undefined;
+    intlConfig?: import("react-currency-input-field/dist/components/CurrencyInputProps.js").IntlConfig | undefined;
+    transformRawValue?: ((rawValue: string) => string) | undefined;
+}, string | number | symbol>;
+export { CurrencyInput, formatCurrencyProperty };
+export default CurrencyInput;

package/types/src/atoms/currency-input/currency-input.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { CurrencyInput } from './index.js';
+export declare const Default: StoryObj;
+export declare const Examples: StoryFn;
+declare const meta: Meta<typeof CurrencyInput>;
+export default meta;

package/types/src/atoms/currency-input/index.d.ts

@@ -0,0 +1 @@
+export * from './currency-input.jsx';

package/types/src/atoms/icon/icon.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import * as FeatherIcons from 'react-feather';
+import { SpaceProps, BorderRadiusProps } from 'styled-system';
+import { NewColorProps as ColorProps } from '../../utils/color-props.js';
+/**
+ * Prop Types of an Icon component.
+ * Apart from props defined below it extends all {@link ColorProps} and {@link SpaceProps}
+ *
+ * @memberof Icon
+ * @alias IconProps
+ * @property {string} [...] Other props from {@link ColorProps} and {@link SpaceProps}
+ */
+export type IconProps = SpaceProps & BorderRadiusProps & ColorProps & {
+    /**
+     * CamelCased name of an icon from https://feathericons.com/
+     */
+    icon?: keyof typeof FeatherIcons | string;
+    /**
+     * Size variant. Default to 16
+     */
+    size?: number;
+    /**
+     * Icon color
+     */
+    color?: string;
+    /**
+     * Icon background
+     */
+    bg?: string;
+    /**
+     * If background should be rounded
+     */
+    rounded?: boolean;
+    /**
+     * Indicates if given icons should spin
+     */
+    spin?: boolean;
+};
+/**
+ * @classdesc
+ *
+ * <img src="components/icon.png" />
+ *
+ * Component wrapping [react-feather](https://www.npmjs.com/package/react-feather).
+ * List of all icons can be found here: https://feathericons.com/
+ * If you have problem verifying the key of given icon - you can always open the
+ * Chrome Terminal (with AdminJS open) and write there:
+ *
+ * ```
+ * Object.keys(window.FeatherIcons)
+ * ```
+ *
+ * to see list of all available icon keys.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Icon, IconProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see IconProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-icon--default Storybook}
+ * @hideconstructor
+ * @example <caption>Icons inside other elements</caption>
+ * return (
+ *   <Box variant="grey">
+ *     <Label mb="default"><Icon icon="Camera" />Icon in Label</Label>
+ *     <Button><Icon icon="Camera" />Icon in button</Button>
+ *   </Box>
+ * )
+ * @example <caption>Different sizes</caption>
+ * const sizes = [16, 20, 24, 32]
+ * return (
+ *   <Box variant="grey">
+ *     {sizes.map(size => (
+ *       <Label m="default"><Icon icon="Camera" size={size}/>Icon {size}</Label>
+ *     ))}
+ *   </Box>
+ * )
+ *
+ * @example <caption>Big rounded icon with background</caption>
+ * return (
+ *   <Box variant="grey">
+ *     <Icon icon="Plus" color="white" bg="primary100" rounded size={32} p="default"/>
+ *   </Box>
+ * )
+ * @section design-system
+ */
+declare const Icon: React.FC<IconProps>;
+export { Icon };
+export default Icon;

package/types/src/atoms/icon/icon.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Icon } from './icon.js';
+export declare const Default: StoryObj;
+export declare const Icons: StoryFn;
+declare const meta: Meta<typeof Icon>;
+export default meta;

package/types/src/atoms/icon/index.d.ts

@@ -0,0 +1 @@
+export * from './icon.jsx';

package/types/src/atoms/illustration/illustration.d.ts

@@ -0,0 +1,52 @@
+import React, { PropsWithChildren } from 'react';
+import * as Illustrations from '../illustrations/index.js';
+export type IllustrationVariant = keyof typeof Illustrations;
+/**
+ * @memberof Illustration
+ * @alias IllustrationProps
+ */
+export type IllustrationProps = {
+    /** Available illustration variant */
+    variant: IllustrationVariant;
+    /** Optional max width restrictions */
+    width?: number;
+    /** Optional max height restrictions */
+    height?: number;
+};
+type RawIllustrationType = IllustrationProps & PropsWithChildren;
+/**
+ * @classdesc
+ *
+ * <img src="components/illustration.png" />
+ *
+ * Awesome database with all the illustrations provided with AdminJS.
+ *
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Illustration, IllustrationProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see IllustrationProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-illustration--default Storybook}
+ * @hideconstructor
+ *
+ * @example <caption>Folders</caption>
+ * return (
+ *   <Illustration variant="Folders" />
+ * )
+ * @example <caption>DocumentSearch</caption>
+ * return (
+ *   <Illustration variant="DocumentSearch" />
+ * )
+ * @example <caption>Rocket</caption>
+ * return (
+ *   <Box bg="grey100" p="xxl"><Illustration variant="Rocket" /></Box>
+ * )
+ * @section design-system
+ */
+export declare const Illustration: React.FC<RawIllustrationType>;
+export default Illustration;

package/types/src/atoms/illustration/illustration.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Illustration, IllustrationProps } from './index.js';
+export declare const Default: StoryObj<IllustrationProps>;
+export declare const Illustrations: StoryFn;
+declare const meta: Meta<typeof Illustration>;
+export default meta;

package/types/src/atoms/illustration/index.d.ts

@@ -0,0 +1 @@
+export * from './illustration.jsx';

package/types/src/atoms/illustrations/accept.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Accept: React.FC<Props>;
+export default Accept;

package/types/src/atoms/illustrations/adminjs-logo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const AdminJSLogo: React.FC<Props>;
+export default AdminJSLogo;

package/types/src/atoms/illustrations/astronaut.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Astronaut: React.FC<Props>;
+export default Astronaut;

package/types/src/atoms/illustrations/bag.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Bag: React.FC<Props>;
+export default Bag;

package/types/src/atoms/illustrations/beware.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Beware: React.FC<Props>;
+export default Beware;

package/types/src/atoms/illustrations/box.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Box: React.FC<Props>;
+export default Box;

package/types/src/atoms/illustrations/calendar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Calendar: React.FC<Props>;
+export default Calendar;

package/types/src/atoms/illustrations/cancel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Cancel: React.FC<Props>;
+export default Cancel;

package/types/src/atoms/illustrations/cards.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Cards: React.FC<Props>;
+export default Cards;

package/types/src/atoms/illustrations/clip.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Clip: React.FC<Props>;
+export default Clip;

package/types/src/atoms/illustrations/cloud.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Cloud: React.FC<Props>;
+export default Cloud;

package/types/src/atoms/illustrations/cup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Cup: React.FC<Props>;
+export default Cup;

package/types/src/atoms/illustrations/details.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Details: React.FC<Props>;
+export default Details;

package/types/src/atoms/illustrations/docs.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Docs: React.FC<Props>;
+export default Docs;

package/types/src/atoms/illustrations/document-check.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const DocumentCheck: React.FC<Props>;
+export default DocumentCheck;

package/types/src/atoms/illustrations/document-search.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const DocumentSearch: React.FC<Props>;
+export default DocumentSearch;

package/types/src/atoms/illustrations/drawer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Drawer: React.FC<Props>;
+export default Drawer;

package/types/src/atoms/illustrations/file-search.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const FileSearch: React.FC<Props>;
+export default FileSearch;

package/types/src/atoms/illustrations/flag-in-cog.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const FlagInCog: React.FC<Props>;
+export default FlagInCog;

package/types/src/atoms/illustrations/folder.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Folder: React.FC<Props>;
+export default Folder;

package/types/src/atoms/illustrations/folders.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Folders: React.FC<Props>;
+export default Folders;

package/types/src/atoms/illustrations/github-logo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const GithubLogo: React.FC<Props>;
+export default GithubLogo;

package/types/src/atoms/illustrations/identity-card.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const IdentityCard: React.FC<Props>;
+export default IdentityCard;

package/types/src/atoms/illustrations/index.d.ts

@@ -0,0 +1,35 @@
+export { default as Accept } from './accept.jsx';
+export { default as AdminJSLogo } from './adminjs-logo.jsx';
+export { default as Astronaut } from './astronaut.jsx';
+export { default as Bag } from './bag.jsx';
+export { default as Beware } from './beware.jsx';
+export { default as Box } from './box.jsx';
+export { default as Calendar } from './calendar.jsx';
+export { default as Cancel } from './cancel.jsx';
+export { default as Cards } from './cards.jsx';
+export { default as Clip } from './clip.jsx';
+export { default as Cloud } from './cloud.jsx';
+export { default as Cup } from './cup.jsx';
+export { default as Details } from './details.jsx';
+export { default as Docs } from './docs.jsx';
+export { default as DocumentCheck } from './document-check.jsx';
+export { default as DocumentSearch } from './document-search.jsx';
+export { default as Drawer } from './drawer.jsx';
+export { default as FileSearch } from './file-search.jsx';
+export { default as FlagInCog } from './flag-in-cog.jsx';
+export { default as Folder } from './folder.jsx';
+export { default as Folders } from './folders.jsx';
+export { default as GithubLogo } from './github-logo.jsx';
+export { default as IdentityCard } from './identity-card.jsx';
+export { default as Launch } from './launch.jsx';
+export { default as Moon } from './moon.jsx';
+export { default as NotFound } from './not-found.jsx';
+export { default as Notebook } from './notebook.jsx';
+export { default as Padlock } from './padlock.jsx';
+export { default as Photos } from './photos.jsx';
+export { default as Planet } from './planet.jsx';
+export { default as Plug } from './plug.jsx';
+export { default as Rocket } from './rocket.jsx';
+export { default as RocketNew } from './rocket-new.jsx';
+export { default as SlackLogo } from './slack-logo.jsx';
+export { default as Tags } from './tags.jsx';

package/types/src/atoms/illustrations/launch.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Launch: React.FC<Props>;
+export default Launch;

package/types/src/atoms/illustrations/moon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+declare const Moon: React.FC<Props>;
+export default Moon;

package/types/src/atoms/illustrations/not-found.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const NotFound: React.FC<Props>;
+export default NotFound;

package/types/src/atoms/illustrations/notebook.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Notebook: React.FC<Props>;
+export default Notebook;

package/types/src/atoms/illustrations/padlock.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Padlock: React.FC<Props>;
+export default Padlock;

package/types/src/atoms/illustrations/photos.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Photos: React.FC<Props>;
+export default Photos;

package/types/src/atoms/illustrations/planet.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Planet: React.FC<Props>;
+export default Planet;

package/types/src/atoms/illustrations/plug.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Plug: React.FC<Props>;
+export default Plug;

package/types/src/atoms/illustrations/props.type.d.ts

@@ -0,0 +1,6 @@
+import { DefaultTheme } from "../../utils/styled";
+export type Props = {
+    width?: number;
+    height?: number;
+    theme?: DefaultTheme;
+};

package/types/src/atoms/illustrations/rocket-new.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const RocketNew: React.FC<Props>;
+export default RocketNew;

package/types/src/atoms/illustrations/rocket.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Rocket: React.FC<Props>;
+export default Rocket;

package/types/src/atoms/illustrations/slack-logo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Slack: React.FC<Props>;
+export default Slack;

package/types/src/atoms/illustrations/tags.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Props } from './props.type.js';
+export declare const Tags: React.FC<Props>;
+export default Tags;

package/types/src/atoms/index.d.ts

@@ -0,0 +1,23 @@
+export * from './avatar/index.js';
+export * from './badge/index.js';
+export * from './box/index.js';
+export * from './button/index.js';
+export * from './check-box/index.js';
+export * from './currency-input/index.js';
+export * from './icon/index.js';
+export * from './illustration/index.js';
+export * from './input/index.js';
+export * from './label/index.js';
+export * from './link/index.js';
+export * from './loader/index.js';
+export * from './overlay/index.js';
+export * from './phone-input/index.js';
+export * from './placeholder/index.js';
+export * from './radio/index.js';
+export * from './section/index.js';
+export * from './table/index.js';
+export * from './tabs/index.js';
+export * from './text/index.js';
+export * from './text-area/index.js';
+export * from './tooltip/index.js';
+export * from './typography/index.js';

package/types/src/atoms/input/index.d.ts

@@ -0,0 +1 @@
+export * from './input.jsx';

package/types/src/atoms/input/input.d.ts

@@ -0,0 +1,63 @@
+import { SpaceProps, LayoutProps } from 'styled-system';
+import { css } from "../../utils/styled";
+/**
+ * Prop Types of an Input component.
+ * Apart from variant it extends all {@link LayoutProps} and {@link SpaceProps}
+ *
+ * @memberof Input
+ * @alias InputProps
+ * @property {string} [...] Other props from {@link LayoutProps}, {@link SpaceProps}
+ */
+export type InputProps = SpaceProps & LayoutProps & {
+    borderless?: boolean;
+    variant?: 'sm' | 'lg' | 'xl' | 'default' | 'xxl';
+};
+/**
+ * Input CSS Styles which can be reused in another input component with styled-components
+ *
+ * ### Usage:
+ *
+ * ```
+ * import { InputCSS } from '@adminjs/design-system'
+ *
+ * const MyStyledInput = styled.input`
+ *   ${InputCSS}
+ * `
+ * ```
+ * @memberof Input
+ * @alias InputCSS
+ */
+export declare const InputCSS: ReturnType<typeof css>;
+/**
+ * @classdesc
+ *
+ * <img src="components/input.png" />
+ *
+ * Wrapped `input` html element.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Input, InputProps, InputCSS } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Atoms
+ * @see InputProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-input--default Storybook}
+ * @hideconstructor
+ * @example
+ * return (
+ *   <Box p="xl">
+ *      <Label htmlFor="input1">Some example label</Label>
+ *      <Input id="input1" width={1/2} />
+ *   </Box>
+ * )
+ * @section design-system
+ */
+declare const Input: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    borderless?: boolean | undefined;
+    variant?: "default" | "sm" | "lg" | "xl" | "xxl" | undefined;
+}, never>;
+export { Input };
+export default Input;

package/types/src/atoms/input/input.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react';
+import { Input } from './index.js';
+export declare const Default: StoryObj;
+export declare const Examples: StoryFn;
+declare const meta: Meta<typeof Input>;
+export default meta;

package/types/src/atoms/label/index.d.ts

@@ -0,0 +1 @@
+export * from './label.jsx';