@strapi/design-system 1.19.0-typescript.0 → 2.0.0-beta.1

package/dist/v2/SubNav/SubNavSection.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const styled = require('styled-components');
-const SubNavSectionLabel = require('./SubNavSectionLabel.js');
-const useId = require('../../hooks/useId.js');
-const Box = require('../../Box/Box.js');
-const Flex = require('../../Flex/Flex.js');
-const Badge = require('../../Badge/Badge.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const SubNavSectionWrapper = styled__default.default(Box.Box) `
-  svg {
-    height: ${4 / 16}rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-`;
-const SubNavSection = ({ collapsable = false, label, badgeLabel, children, id }) => {
-    const [isOpen, setOpenLinks] = React.useState(true);
-    const listId = useId.useId(id);
-    const handleClick = () => {
-        setOpenLinks((prev) => !prev);
-    };
-    return (jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsx(SubNavSectionWrapper, { paddingLeft: 6, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: jsxRuntime.jsxs(Box.Box, { position: "relative", paddingRight: badgeLabel ? 6 : 0, children: [jsxRuntime.jsx(SubNavSectionLabel.SubNavSectionLabel, { onClick: handleClick, ariaExpanded: isOpen, ariaControls: listId, collapsable: collapsable, label: label }), badgeLabel && (jsxRuntime.jsx(Badge.Badge, { backgroundColor: "neutral150", textColor: "neutral600", position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)", children: badgeLabel }))] }) }), (!collapsable || isOpen) && (jsxRuntime.jsx("ol", { id: listId, children: React.Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsxRuntime.jsx("li", { children: child }, index);
-                }) }))] }));
-};
-
-exports.SubNavSection = SubNavSection;

package/dist/v2/SubNav/SubNavSection.mjs

@@ -1,30 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, Children } from 'react';
-import styled from 'styled-components';
-import { SubNavSectionLabel } from './SubNavSectionLabel.mjs';
-import { useId } from '../../hooks/useId.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Badge } from '../../Badge/Badge.mjs';
-
-const SubNavSectionWrapper = styled(Box) `
-  svg {
-    height: ${4 / 16}rem;
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-`;
-const SubNavSection = ({ collapsable = false, label, badgeLabel, children, id }) => {
-    const [isOpen, setOpenLinks] = useState(true);
-    const listId = useId(id);
-    const handleClick = () => {
-        setOpenLinks((prev) => !prev);
-    };
-    return (jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsx(SubNavSectionWrapper, { paddingLeft: 6, paddingTop: 2, paddingBottom: 2, paddingRight: 4, children: jsxs(Box, { position: "relative", paddingRight: badgeLabel ? 6 : 0, children: [jsx(SubNavSectionLabel, { onClick: handleClick, ariaExpanded: isOpen, ariaControls: listId, collapsable: collapsable, label: label }), badgeLabel && (jsx(Badge, { backgroundColor: "neutral150", textColor: "neutral600", position: "absolute", right: 0, top: "50%", transform: "translateY(-50%)", children: badgeLabel }))] }) }), (!collapsable || isOpen) && (jsx("ol", { id: listId, children: Children.map(children, (child, index) => {
-                    // eslint-disable-next-line react/no-array-index-key
-                    return jsx("li", { children: child }, index);
-                }) }))] }));
-};
-
-export { SubNavSection };

package/dist/v2/SubNav/SubNavSectionLabel.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export interface SubNavSectionLabelProps {
-    ariaControls?: string;
-    ariaExpanded?: boolean;
-    collapsable?: boolean;
-    label: string;
-    onClick: React.MouseEventHandler<HTMLButtonElement> & React.MouseEventHandler<HTMLDivElement>;
-}
-export declare const SubNavSectionLabel: ({ collapsable, label, onClick, ariaExpanded, ariaControls, }: SubNavSectionLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/v2/SubNav/SubNavSectionLabel.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const icons = require('@strapi/icons');
-const styled = require('styled-components');
-const Flex = require('../../Flex/Flex.js');
-const Box = require('../../Box/Box.js');
-const Typography = require('../../Typography/Typography.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const SubNavSectionLabelWrapper = styled__default.default(Flex.Flex) `
-  border: none;
-  padding: 0;
-  background: transparent;
-`;
-const DropDownIconWrapper = styled__default.default.div `
-  display: flex;
-  align-items: center;
-  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
-`;
-const SubNavSectionLabel = ({ collapsable = false, label, onClick = () => { }, ariaExpanded, ariaControls, }) => {
-    if (collapsable) {
-        return (jsxRuntime.jsxs(SubNavSectionLabelWrapper, { as: "button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, textAlign: "left", children: [jsxRuntime.jsx(Box.Box, { paddingRight: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), collapsable && (jsxRuntime.jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: jsxRuntime.jsx(icons.CarretDown, { "aria-hidden": true }) }))] }));
-    }
-    return (jsxRuntime.jsx(SubNavSectionLabelWrapper, { children: jsxRuntime.jsx(Box.Box, { paddingRight: 1, children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) }));
-};
-
-exports.SubNavSectionLabel = SubNavSectionLabel;

package/dist/v2/SubNav/SubNavSectionLabel.mjs

@@ -1,25 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { CarretDown } from '@strapi/icons';
-import styled from 'styled-components';
-import { Flex } from '../../Flex/Flex.mjs';
-import { Box } from '../../Box/Box.mjs';
-import { Typography } from '../../Typography/Typography.mjs';
-
-const SubNavSectionLabelWrapper = styled(Flex) `
-  border: none;
-  padding: 0;
-  background: transparent;
-`;
-const DropDownIconWrapper = styled.div `
-  display: flex;
-  align-items: center;
-  transform: rotateX(${({ rotated }) => (rotated ? '0deg' : '180deg')});
-`;
-const SubNavSectionLabel = ({ collapsable = false, label, onClick = () => { }, ariaExpanded, ariaControls, }) => {
-    if (collapsable) {
-        return (jsxs(SubNavSectionLabelWrapper, { as: "button", onClick: onClick, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, textAlign: "left", children: [jsx(Box, { paddingRight: 1, children: jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }), collapsable && (jsx(DropDownIconWrapper, { rotated: ariaExpanded, children: jsx(CarretDown, { "aria-hidden": true }) }))] }));
-    }
-    return (jsx(SubNavSectionLabelWrapper, { children: jsx(Box, { paddingRight: 1, children: jsx(Typography, { variant: "sigma", textColor: "neutral600", children: label }) }) }));
-};
-
-export { SubNavSectionLabel };

package/dist/v2/SubNav/SubNavSections.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { FlexProps } from '../../Flex';
-export interface SubNavSectionsProps extends FlexProps<'ol'> {
-    children: React.ReactNode;
-    spacing?: number;
-    horizontal?: boolean;
-}
-export declare const SubNavSections: ({ children, spacing, horizontal, ...props }: SubNavSectionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/v2/SubNav/SubNavSections.js

@@ -1,17 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const Box = require('../../Box/Box.js');
-const Flex = require('../../Flex/Flex.js');
-
-const SubNavSections = ({ children, spacing = 2, horizontal = false, ...props }) => {
-    return (jsxRuntime.jsx(Box.Box, { paddingTop: 2, paddingBottom: 4, children: jsxRuntime.jsx(Flex.Flex, { as: "ol", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: React.Children.map(children, (child, index) => {
-                /* eslint-disable react/no-array-index-key */
-                return jsxRuntime.jsx("li", { children: child }, index);
-            }) }) }));
-};
-
-exports.SubNavSections = SubNavSections;

package/dist/v2/SubNav/SubNavSections.mjs

@@ -1,13 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children } from 'react';
-import { Box } from '../../Box/Box.mjs';
-import { Flex } from '../../Flex/Flex.mjs';
-
-const SubNavSections = ({ children, spacing = 2, horizontal = false, ...props }) => {
-    return (jsx(Box, { paddingTop: 2, paddingBottom: 4, children: jsx(Flex, { as: "ol", gap: spacing, direction: horizontal ? 'row' : 'column', alignItems: horizontal ? 'center' : 'stretch', ...props, children: Children.map(children, (child, index) => {
-                /* eslint-disable react/no-array-index-key */
-                return jsx("li", { children: child }, index);
-            }) }) }));
-};
-
-export { SubNavSections };

package/dist/v2/SubNav/index.d.ts

@@ -1,6 +0,0 @@
-export * from './SubNav';
-export * from './SubNavHeader';
-export * from './SubNavLink';
-export * from './SubNavLinkSection';
-export * from './SubNavSection';
-export * from './SubNavSections';

package/dist/v2/SubNav/index.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const SubNav = require('./SubNav.js');
-const SubNavHeader = require('./SubNavHeader.js');
-const SubNavLink = require('./SubNavLink.js');
-const SubNavLinkSection = require('./SubNavLinkSection.js');
-const SubNavSection = require('./SubNavSection.js');
-const SubNavSections = require('./SubNavSections.js');
-
-
-
-exports.SubNav = SubNav.SubNav;
-exports.subNavWidth = SubNav.subNavWidth;
-exports.SubNavHeader = SubNavHeader.SubNavHeader;
-exports.SubNavLink = SubNavLink.SubNavLink;
-exports.SubNavLinkSection = SubNavLinkSection.SubNavLinkSection;
-exports.SubNavSection = SubNavSection.SubNavSection;
-exports.SubNavSections = SubNavSections.SubNavSections;

package/dist/v2/SubNav/index.mjs

@@ -1,6 +0,0 @@
-export { SubNav, subNavWidth } from './SubNav.mjs';
-export { SubNavHeader } from './SubNavHeader.mjs';
-export { SubNavLink } from './SubNavLink.mjs';
-export { SubNavLinkSection } from './SubNavLinkSection.mjs';
-export { SubNavSection } from './SubNavSection.mjs';
-export { SubNavSections } from './SubNavSections.mjs';

package/dist/v2/index.d.ts

@@ -1,7 +0,0 @@
-export * from './Breadcrumbs';
-export * from './Link';
-export * from './LinkButton';
-export * from './MainNav';
-export * from './Pagination';
-export * from './SimpleMenu';
-export * from './SubNav';

package/dist/v2/index.js

@@ -1,60 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Breadcrumbs = require('./Breadcrumbs/Breadcrumbs.js');
-const Crumb = require('./Breadcrumbs/Crumb.js');
-const CrumbLink = require('./Breadcrumbs/CrumbLink.js');
-const CrumbSimpleMenu = require('./Breadcrumbs/CrumbSimpleMenu.js');
-const Link = require('./Link/Link.js');
-const LinkButton = require('./LinkButton/LinkButton.js');
-const MainNav = require('./MainNav/MainNav.js');
-const NavBrand = require('./MainNav/NavBrand.js');
-const NavCondense = require('./MainNav/NavCondense.js');
-const NavFooter = require('./MainNav/NavFooter.js');
-const NavLink = require('./MainNav/NavLink.js');
-const NavSection = require('./MainNav/NavSection.js');
-const NavSections = require('./MainNav/NavSections.js');
-const NavUser = require('./MainNav/NavUser.js');
-const Pagination = require('./Pagination/Pagination.js');
-const components = require('./Pagination/components.js');
-const SimpleMenu = require('./SimpleMenu/SimpleMenu.js');
-const Menu = require('./SimpleMenu/Menu.js');
-const SubNav = require('./SubNav/SubNav.js');
-const SubNavHeader = require('./SubNav/SubNavHeader.js');
-const SubNavLink = require('./SubNav/SubNavLink.js');
-const SubNavLinkSection = require('./SubNav/SubNavLinkSection.js');
-const SubNavSection = require('./SubNav/SubNavSection.js');
-const SubNavSections = require('./SubNav/SubNavSections.js');
-
-
-
-exports.Breadcrumbs = Breadcrumbs.Breadcrumbs;
-exports.Crumb = Crumb.Crumb;
-exports.CrumbLink = CrumbLink.CrumbLink;
-exports.CrumbSimpleMenu = CrumbSimpleMenu.CrumbSimpleMenu;
-exports.Link = Link.Link;
-exports.LinkButton = LinkButton.LinkButton;
-exports.MainNav = MainNav.MainNav;
-exports.NavBrand = NavBrand.NavBrand;
-exports.NavCondense = NavCondense.NavCondense;
-exports.NavFooter = NavFooter.NavFooter;
-exports.NavLink = NavLink.NavLink;
-exports.NavSection = NavSection.NavSection;
-exports.NavSections = NavSections.NavSections;
-exports.NavUser = NavUser.NavUser;
-exports.Pagination = Pagination.Pagination;
-exports.Dots = components.Dots;
-exports.NextLink = components.NextLink;
-exports.PageLink = components.PageLink;
-exports.PreviousLink = components.PreviousLink;
-exports.MenuItem = SimpleMenu.MenuItem;
-exports.SimpleMenu = SimpleMenu.SimpleMenu;
-exports.Menu = Menu;
-exports.SubNav = SubNav.SubNav;
-exports.subNavWidth = SubNav.subNavWidth;
-exports.SubNavHeader = SubNavHeader.SubNavHeader;
-exports.SubNavLink = SubNavLink.SubNavLink;
-exports.SubNavLinkSection = SubNavLinkSection.SubNavLinkSection;
-exports.SubNavSection = SubNavSection.SubNavSection;
-exports.SubNavSections = SubNavSections.SubNavSections;

package/dist/v2/index.mjs

@@ -1,25 +0,0 @@
-export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs.mjs';
-export { Crumb } from './Breadcrumbs/Crumb.mjs';
-export { CrumbLink } from './Breadcrumbs/CrumbLink.mjs';
-export { CrumbSimpleMenu } from './Breadcrumbs/CrumbSimpleMenu.mjs';
-export { Link } from './Link/Link.mjs';
-export { LinkButton } from './LinkButton/LinkButton.mjs';
-export { MainNav } from './MainNav/MainNav.mjs';
-export { NavBrand } from './MainNav/NavBrand.mjs';
-export { NavCondense } from './MainNav/NavCondense.mjs';
-export { NavFooter } from './MainNav/NavFooter.mjs';
-export { NavLink } from './MainNav/NavLink.mjs';
-export { NavSection } from './MainNav/NavSection.mjs';
-export { NavSections } from './MainNav/NavSections.mjs';
-export { NavUser } from './MainNav/NavUser.mjs';
-export { Pagination } from './Pagination/Pagination.mjs';
-export { Dots, NextLink, PageLink, PreviousLink } from './Pagination/components.mjs';
-export { MenuItem, SimpleMenu } from './SimpleMenu/SimpleMenu.mjs';
-import * as Menu from './SimpleMenu/Menu.mjs';
-export { Menu };
-export { SubNav, subNavWidth } from './SubNav/SubNav.mjs';
-export { SubNavHeader } from './SubNav/SubNavHeader.mjs';
-export { SubNavLink } from './SubNav/SubNavLink.mjs';
-export { SubNavLinkSection } from './SubNav/SubNavLinkSection.mjs';
-export { SubNavSection } from './SubNav/SubNavSection.mjs';
-export { SubNavSections } from './SubNav/SubNavSections.mjs';