@clement_lores/admin-design-system 1.0.0

package/types/src/molecules/stepper/stepper.d.ts

@@ -0,0 +1,112 @@
+/// <reference types="react" resolution-mode="require"/>
+/**
+ * @classdesc
+ *
+ * <img src="components/stepper.png" />
+ *
+ * It provides wizard workflow where user can go through a couple of steps.
+ * Stepper makes sense when you use it along with {@link Step} component.
+ *
+ * It receives all the same props as {@link Box} - {@link BoxProps}.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Stepper, StepperProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-stepper--clickable-steps Storybook}
+ * @example <caption>Clickable steps</caption>
+ * const { useState } = React
+ * const steps = [{
+ *   number: 1, label: "Do this first",
+ * }, {
+ *   number: 2, label: "Don't forget this",
+ * }, {
+ *   number: 3, label: "And finally this",
+ * }]
+ * const ComponentWithStepper = () => {
+ *   const [currentStep, setCurrentStep] = useState(1)
+ *   return (
+ *   <Box>
+ *     <Stepper>
+ *     {steps.map(step => (
+ *        <Step
+ *          active={currentStep === step.number}
+ *          completed={currentStep > step.number}
+ *          onClick={setCurrentStep}
+ *          number={step.number}
+ *        >
+ *          {step.label}
+ *        </Step>
+ *     ))}
+ *     </Stepper>
+ *   </Box>
+ *   )
+ * }
+ *
+ * return (<ComponentWithStepper />)
+ *
+ * @example <caption>Steps with bottom navigation</caption>
+ * const { useState } = React
+ * const steps = [{
+ *   number: 1, label: "Do this first",
+ * }, {
+ *   number: 2, label: "Don't forget this",
+ * }, {
+ *   number: 3, label: "And finally this",
+ * }]
+ * const ComponentWithStepper = () => {
+ *   const [currentStep, setCurrentStep] = useState(1)
+ *   return (
+ *   <Box>
+ *     <Stepper>
+ *     {steps.map(step => (
+ *        <Step
+ *          active={currentStep === step.number}
+ *          completed={currentStep > step.number}
+ *          number={step.number}
+ *        >
+ *          {step.label}
+ *        </Step>
+ *     ))}
+ *     </Stepper>
+ *     <Box mt="xl">
+ *       <Button
+ *         disabled={currentStep === 1}
+ *         mr="default"
+ *         onClick={() => setCurrentStep(currentStep - 1)}
+ *       >
+ *         Previous Step
+ *       </Button>
+ *       <Button
+ *         disabled={currentStep === 3}
+ *         variant="primary"
+ *         onClick={() => setCurrentStep(currentStep + 1)}
+ *       >
+ *         Next Step
+ *       </Button>
+ *     </Box>
+ *   </Box>
+ *   )
+ * }
+ *
+ * return (<ComponentWithStepper />)
+ *
+ * @section design-system
+ */
+declare const Stepper: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<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> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+}, never>;
+export { Stepper };
+export default Stepper;

package/types/src/molecules/stepper/stepper.stories.d.ts

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

package/types/src/molecules/tinymce-editor/index.d.ts

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

package/types/src/molecules/tinymce-editor/tinymce-editor.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IAllProps } from '@tinymce/tinymce-react';
+interface TinymceEditorOptions extends Omit<Partial<IAllProps>, 'onEditorChange'> {
+    contentStyle?: string | null;
+    height?: string | null;
+}
+export interface TinymceEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    options?: TinymceEditorOptions;
+}
+declare const TinyMCE: React.FC<TinymceEditorProps>;
+export { TinyMCE };
+export default TinyMCE;

package/types/src/molecules/tinymce-editor/tinymce-editor.styled.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" resolution-mode="require"/>
+import { BoxProps } from '../../atoms/box/index.js';
+import { InputProps } from '../../atoms/input/index.js';
+import { TextProps } from '../../atoms/text/index.js';
+export type EditorWrapperProps = TextProps & InputProps & BoxProps;
+export declare const EditorWrapper: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, import("styled-system").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> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    variant?: "sm" | "lg" | "xs" | undefined;
+    as?: string | undefined;
+} & 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;
+} & {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<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>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<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> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+}, never>;

package/types/src/molecules/value-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from './value-group.jsx';
+export * from './value-group-props.js';

package/types/src/molecules/value-group/value-group-props.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+/**
+ * Props passed to ValueGroup
+ *
+ * @memberof ValueGroup
+ * @alias ValueGroupProps
+ */
+export type ValueGroupProps = {
+    /** Value group label */
+    label: string;
+    /** Field value passed as a value */
+    value?: string | number | boolean;
+    /** Field value passed as children node */
+    children?: ReactNode;
+};

package/types/src/molecules/value-group/value-group.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ValueGroupProps } from './value-group-props.js';
+/**
+ * @load ./value-group.doc.md
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see ValueGroupProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-value-group--default Storybook}
+ * @new In version 3.3
+ * @section design-system
+ */
+export declare const ValueGroup: React.FC<ValueGroupProps>;
+export default ValueGroup;

package/types/src/molecules/value-group/value-group.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ValueGroup } from './index.js';
+export declare const Default: StoryObj<{
+    onClick: (e: any) => void;
+}>;
+declare const meta: Meta<typeof ValueGroup>;
+export default meta;

package/types/src/organisms/button-group/button-group.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ButtonGroupProps } from './button-group.types.js';
+/**
+ * @load ./button-group.doc.md
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-button-group--default Storybook}
+ * @component
+ * @subcategory Organisms
+ * @section design-system
+ * @new in version 3.3
+ */
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;
+export default ButtonGroup;

package/types/src/organisms/button-group/button-group.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ButtonGroup, ButtonGroupProps } from './index.js';
+export declare const Default: StoryObj<ButtonGroupProps & {
+    onClick: (e: any, s: any) => void;
+}>;
+declare const meta: Meta<typeof ButtonGroup>;
+export default meta;

package/types/src/organisms/button-group/button-group.styled.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" resolution-mode="require"/>
+import { css } from "../../utils/styled";
+import { ButtonGroupProps } from './button-group.types.js';
+export declare const BUTTON_IN_GROUP_CLASS_NAME: string;
+export declare const buttonMargin: (props: Pick<ButtonGroupProps, 'size'>) => ReturnType<typeof css>;
+export declare const hasHandler: (props: any) => ReturnType<typeof css> | string;
+export declare const hasLabel: (props: any) => ReturnType<typeof css> | string;
+export declare const StyledSingleButton: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    className: string;
+} & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
+    variant?: "text" | import("../../theme.js").VariantType | "contained" | "outlined" | undefined;
+    color?: "text" | "success" | "info" | "warning" | "primary" | "secondary" | "danger" | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "md" | undefined;
+    rounded?: boolean | undefined;
+    label?: string | undefined;
+} & {
+    onClick?: import("react").MouseEventHandler<HTMLButtonElement> | undefined;
+} & {
+    hasLabel: boolean;
+}, "className">;
+export declare const StyledDropDownItemAction: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, object, string | number | symbol>;
+export declare const StyledButtonGroup: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<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> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+}, never>;

package/types/src/organisms/button-group/button-group.types.d.ts

@@ -0,0 +1,59 @@
+import type { ButtonProps } from '../../atoms/button/index.js';
+import type { IconProps } from '../../atoms/icon/index.js';
+import type { VariantType } from '../../theme.js';
+/**
+ * Props of buttons in {@link ButtonGroup}
+ *
+ * @memberof ButtonGroup
+ */
+export type ButtonInGroupProps = Omit<ButtonProps, 'onClick'> & {
+    /** Icon of a button */
+    icon?: IconProps['icon'];
+    /** Label, when set to null, with icon given, button will adjust it's margin */
+    label?: string | null;
+    /** Variant compatible with Button variant */
+    variant?: VariantType;
+    /** Variant href */
+    href?: string;
+    /**
+     * Button source - if set, this will be passed to onClick handler. It can be useful if when
+     * you have one handler function for all the buttons.
+     */
+    source?: any;
+    /**
+     * On click handler invoked when button has been clicked.
+     */
+    onClick?: (event: any, source: any) => any | Promise<any>;
+    /**
+     * Array of nested buttons.
+     */
+    buttons?: Array<ButtonInGroupProps>;
+    /**
+     * CSS Selector
+     */
+    'data-css'?: string;
+} & {
+    className?: string;
+};
+type ButtonPropsSize = ButtonProps['size'];
+type ButtonPropsRounded = ButtonProps['rounded'];
+/**
+ * Props passed to ButtonGroup element.
+ *
+ * @memberof ButtonGroup
+ */
+export type ButtonGroupProps = {
+    /**
+     * Default size for all buttons. The same as {@link ButtonProps}.size
+     */
+    size?: ButtonPropsSize;
+    /**
+     * Default rounded property for all buttons. The same as {@link ButtonProps}.rounded
+     */
+    rounded?: ButtonPropsRounded;
+    /**
+     * Array of top level buttons.
+     */
+    buttons: Array<ButtonInGroupProps>;
+};
+export {};

package/types/src/organisms/button-group/button-in-group.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonInGroupProps } from './button-group.types.js';
+export declare const ButtonInGroup: React.FC<ButtonInGroupProps>;
+export default ButtonInGroup;

package/types/src/organisms/button-group/drop-down-item-with-buttons.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonInGroupProps } from './button-group.types.js';
+export declare const DropDownItemWithButtons: React.FC<ButtonInGroupProps>;
+export default DropDownItemWithButtons;

package/types/src/organisms/button-group/index.d.ts

@@ -0,0 +1,6 @@
+export * from './button-group.jsx';
+export * from './button-group.styled.jsx';
+export * from './button-group.types.js';
+export * from './button-in-group.jsx';
+export * from './drop-down-item-with-buttons.jsx';
+export * from './single-button-in-group.jsx';

package/types/src/organisms/button-group/single-button-in-group.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ButtonInGroupProps } from './button-group.types.js';
+export declare const SingleButtonInGroup: React.FC<ButtonInGroupProps>;
+export default SingleButtonInGroup;

package/types/src/organisms/current-user-nav/current-user-nav-props.d.ts

@@ -0,0 +1,37 @@
+import type { IconProps } from '../../atoms/icon/index.js';
+/**
+ * Action element passed to CurrentUserNavProps
+ *
+ * @memberof CurrentUserNav
+ * @alias CurrentUserNavAction
+ */
+export type CurrentUserNavAction = {
+    /** action label */
+    label: string;
+    /** action OnClick handler - taking event as a param */
+    onClick?: (event: any) => void;
+    /** Action icon */
+    icon?: IconProps['icon'];
+    /** indicates if action is active */
+    isActive?: string;
+    /** href for an action */
+    href?: string;
+};
+/**
+ * Props passed to {@link CurrentUserNav} component
+ *
+ * @memberof CurrentUserNav
+ * @alias CurrentUserNavProps
+ */
+export type CurrentUserNavProps = {
+    /** User name */
+    name: string;
+    /** User title - visible below the name */
+    title?: string;
+    /** Avatar url */
+    avatarUrl?: string;
+    /** Array of all the actions visible on hover */
+    dropActions?: Array<CurrentUserNavAction>;
+    /** Array of all the actions visible by the user name */
+    lineActions?: Array<CurrentUserNavAction>;
+};

package/types/src/organisms/current-user-nav/current-user-nav-styled.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" resolution-mode="require"/>
+export declare const StyledCurrentUserNav: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<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> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+}, never>;
+export default StyledCurrentUserNav;

package/types/src/organisms/current-user-nav/current-user-nav.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CurrentUserNavProps } from './current-user-nav-props.js';
+/**
+ * @load ./current-user-nav.doc.md
+ * @component
+ * @subcategory Organisms
+ * @hideconstructor
+ * @see CurrentUserNavProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-organisms-current-user-nav--default Storybook}
+ * @new In version 3.3
+ * @section design-system
+ */
+export declare const CurrentUserNav: React.FC<CurrentUserNavProps>;
+export default CurrentUserNav;

package/types/src/organisms/current-user-nav/current-user-nav.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CurrentUserNav, CurrentUserNavProps } from './index.js';
+export declare const Default: StoryObj<CurrentUserNavProps & {
+    onClick: (e: any) => void;
+}>;
+declare const meta: Meta<typeof CurrentUserNav>;
+export default meta;

package/types/src/organisms/current-user-nav/index.d.ts

@@ -0,0 +1,3 @@
+export * from './current-user-nav.jsx';
+export * from './current-user-nav-props.js';
+export * from './current-user-nav-styled.js';

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

@@ -0,0 +1,4 @@
+export * from './button-group/index.js';
+export * from './current-user-nav/index.js';
+export * from './made-with-love/index.js';
+export * from './navigation/index.js';

package/types/src/organisms/made-with-love/index.d.ts

@@ -0,0 +1 @@
+export * from './made-with-love.jsx';

package/types/src/organisms/made-with-love/made-with-love.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const MadeWithLove: FC;
+export default MadeWithLove;

package/types/src/organisms/made-with-love/made-with-love.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react';
+import MadeWithLove from './made-with-love.jsx';
+export declare const Default: StoryObj;
+declare const meta: Meta<typeof MadeWithLove>;
+export default meta;

package/types/src/organisms/navigation/index.d.ts

@@ -0,0 +1,4 @@
+export * from './navigation.jsx';
+export * from './navigation-element-wrapper.jsx';
+export * from './navigation-styled.jsx';
+export * from './navigation-props.js';

package/types/src/organisms/navigation/navigation-element-wrapper.d.ts

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

package/types/src/organisms/navigation/navigation-props.d.ts

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+import { NavigationElementProps } from '../../molecules/navigation-element/navigation-element-props.js';
+/**
+ * Array of navigation elements. Extending {@link NavigationElementProps}
+ *
+ * @memberof Navigation
+ * @alias NavigationElementWithChildrenProps
+ */
+export type NavigationElementWithChildrenProps = NavigationElementProps & {
+    elements?: Array<NavigationElementWithChildrenProps>;
+};
+/**
+ * Props passed to {@link Navigation} component
+ *
+ * @memberof Navigation
+ * @alias NavigationProps
+ */
+export type NavigationProps = {
+    label?: string;
+    elements: Array<NavigationElementWithChildrenProps>;
+} & PropsWithChildren;

package/types/src/organisms/navigation/navigation-styled.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" resolution-mode="require"/>
+export declare const StyledNavigation: import("styled-components").StyledComponent<string, import("styled-components").DefaultTheme, {
+    children?: import("react").ReactNode;
+} & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").BorderRadiusProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & Omit<import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol>, "color"> & {
+    color?: string | undefined;
+} & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & Omit<import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, "flex"> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ShadowProps<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> & {
+    flex?: boolean | import("styled-system").ResponsiveValue<import("csstype").Property.Flex<import("styled-system").TLengthStyledSystem>, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
+    variant?: "grey" | "white" | "transparent" | "card" | "container" | undefined;
+    animate?: boolean | undefined;
+    className?: string | undefined;
+}, never>;
+export default StyledNavigation;

package/types/src/organisms/navigation/navigation.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NavigationProps } from './navigation-props.js';
+/**
+ * @load ./navigation.doc.md
+ * @component
+ * @subcategory Organisms
+ * @hideconstructor
+ * @see NavigationProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-organisms-navigation--default Storybook}
+ * @new In version 3.3
+ * @section design-system
+ */
+export declare const Navigation: React.FC<NavigationProps>;
+export default Navigation;

package/types/src/organisms/navigation/navigation.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Navigation } from './index.js';
+import { NavigationProps } from './navigation-props.js';
+export declare const Default: StoryObj<NavigationProps & {
+    onClick: (e: any) => void;
+}>;
+declare const meta: Meta<typeof Navigation>;
+export default meta;

package/types/src/templates/blog.d.ts

@@ -0,0 +1 @@
+export {};

package/types/src/templates/blog.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta, StoryFn } from '@storybook/react';
+export declare const Default: StoryFn;
+declare const meta: Meta;
+export default meta;