@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/dist/Textarea/Textarea.js

@@ -1,55 +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 useId = require('../hooks/useId.js');
-const utils = require('../themes/utils.js');
-const Box = require('../Box/Box.js');
-const FieldContext = require('../Field/FieldContext.js');
-const Field = require('../Field/Field.js');
-const Flex = require('../Flex/Flex.js');
-const FieldLabel = require('../Field/FieldLabel.js');
-const FieldHint = require('../Field/FieldHint.js');
-const FieldError = require('../Field/FieldError.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const React__default = /*#__PURE__*/_interopDefault(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const Wrapper = styled__default.default(Box.Box) `
-  ${utils.inputFocusStyle()}
-`;
-const TextareaElement = styled__default.default(Box.Box) `
-  border: none;
-  resize: none;
-
-  ::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
-    font-size: ${({ theme }) => theme.fontSizes[2]};
-    color: ${({ theme }) => theme.colors.neutral500};
-    opacity: 1;
-  }
-
-  &:focus-within {
-    outline: none;
-  }
-`;
-const TextareaInput = React__default.default.forwardRef(({ disabled, ...props }, ref) => {
-    const { id, error, hint, required } = FieldContext.useField();
-    const hasError = Boolean(error);
-    let ariaDescription = hint ? `${id}-hint` : undefined;
-    if (error) {
-        ariaDescription = `${id}-error`;
-    }
-    return (jsxRuntime.jsx(Wrapper, { borderColor: hasError ? 'danger600' : 'neutral200', hasError: hasError, hasRadius: true, children: jsxRuntime.jsx(TextareaElement, { "aria-describedby": ariaDescription, "aria-invalid": hasError, "aria-required": required, as: "textarea", background: disabled ? 'neutral150' : 'neutral0', color: disabled ? 'neutral600' : 'neutral800', disabled: disabled, fontSize: 2, hasRadius: true, height: `${105 / 16}rem`, id: id, ref: ref, lineHeight: 4, padding: 4, width: "100%", ...props }) }));
-});
-const Textarea = React__default.default.forwardRef(({ name, hint, error, label, labelAction, id, required = false, children, value, ...props }, ref) => {
-    const generatedId = useId.useId(id);
-    return (jsxRuntime.jsx(Field.Field, { name: name, hint: hint, error: error, id: generatedId, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && jsxRuntime.jsx(FieldLabel.FieldLabel, { action: labelAction, children: label }), jsxRuntime.jsx(TextareaInput, { ref: ref, value: children ?? value, ...props }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
-});
-
-exports.Textarea = Textarea;

package/dist/Textarea/Textarea.mjs

@@ -1,46 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default from 'react';
-import styled from 'styled-components';
-import { useId } from '../hooks/useId.mjs';
-import { inputFocusStyle } from '../themes/utils.mjs';
-import { Box } from '../Box/Box.mjs';
-import { useField } from '../Field/FieldContext.mjs';
-import { Field } from '../Field/Field.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { FieldLabel } from '../Field/FieldLabel.mjs';
-import { FieldHint } from '../Field/FieldHint.mjs';
-import { FieldError } from '../Field/FieldError.mjs';
-
-const Wrapper = styled(Box) `
-  ${inputFocusStyle()}
-`;
-const TextareaElement = styled(Box) `
-  border: none;
-  resize: none;
-
-  ::placeholder {
-    color: ${({ theme }) => theme.colors.neutral500};
-    font-size: ${({ theme }) => theme.fontSizes[2]};
-    color: ${({ theme }) => theme.colors.neutral500};
-    opacity: 1;
-  }
-
-  &:focus-within {
-    outline: none;
-  }
-`;
-const TextareaInput = React__default.forwardRef(({ disabled, ...props }, ref) => {
-    const { id, error, hint, required } = useField();
-    const hasError = Boolean(error);
-    let ariaDescription = hint ? `${id}-hint` : undefined;
-    if (error) {
-        ariaDescription = `${id}-error`;
-    }
-    return (jsx(Wrapper, { borderColor: hasError ? 'danger600' : 'neutral200', hasError: hasError, hasRadius: true, children: jsx(TextareaElement, { "aria-describedby": ariaDescription, "aria-invalid": hasError, "aria-required": required, as: "textarea", background: disabled ? 'neutral150' : 'neutral0', color: disabled ? 'neutral600' : 'neutral800', disabled: disabled, fontSize: 2, hasRadius: true, height: `${105 / 16}rem`, id: id, ref: ref, lineHeight: 4, padding: 4, width: "100%", ...props }) }));
-});
-const Textarea = React__default.forwardRef(({ name, hint, error, label, labelAction, id, required = false, children, value, ...props }, ref) => {
-    const generatedId = useId(id);
-    return (jsx(Field, { name: name, hint: hint, error: error, id: generatedId, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label && jsx(FieldLabel, { action: labelAction, children: label }), jsx(TextareaInput, { ref: ref, value: children ?? value, ...props }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
-});
-
-export { Textarea };

package/dist/Textarea/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Textarea = require('./Textarea.js');
-
-
-
-exports.Textarea = Textarea.Textarea;

package/dist/Textarea/index.mjs

@@ -1 +0,0 @@
-export { Textarea } from './Textarea.mjs';

package/dist/ThemeProvider/ThemeProvider.js

@@ -1,187 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const LiveRegions = require('../LiveRegions/LiveRegions.js');
-const index = require('../themes/lightTheme/index.js');
-
-const GlobalStyle = styled.createGlobalStyle `
- /* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-  html,
-  body,
-  div,
-  span,
-  applet,
-  object,
-  iframe,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  blockquote,
-  pre,
-  a,
-  abbr,
-  acronym,
-  address,
-  big,
-  cite,
-  code,
-  del,
-  dfn,
-  em,
-  img,
-  ins,
-  kbd,
-  q,
-  s,
-  samp,
-  small,
-  strike,
-  strong,
-  sub,
-  sup,
-  tt,
-  var,
-  b,
-  u,
-  i,
-  center,
-  dl,
-  dt,
-  dd,
-  ol,
-  ul,
-  li,
-  fieldset,
-  form,
-  label,
-  legend,
-  table,
-  caption,
-  tbody,
-  tfoot,
-  thead,
-  tr,
-  th,
-  td,
-  article,
-  aside,
-  canvas,
-  details,
-  embed,
-  figure,
-  figcaption,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  output,
-  ruby,
-  section,
-  summary,
-  time,
-  mark,
-  audio,
-  video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-  }
-  /* HTML5 display-role reset for older browsers */
-  article,
-  aside,
-  details,
-  figcaption,
-  figure,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  section {
-    display: block;
-  }
-  body {
-    line-height: 1;
-  }
-  ol,
-  ul {
-    list-style: none;
-  }
-  blockquote,
-  q {
-    quotes: none;
-  }
-  blockquote:before,
-  blockquote:after,
-  q:before,
-  q:after {
-    content: "";
-    content: none;
-  }
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-  /* My styles */
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  *:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.primary600};
-    outline-offset: 2px;
-  }
-
-  /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
-  *:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  body,html{
-    height: 100%;
-  }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
-
-  button {
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: inherit;
-    font-size: 100%;
-    cursor: pointer;
-    font: inherit;
-  }
-
-  textarea,input {
-    font: inherit;
-  }
-
-  .lock-body-scroll {
-    height: 100vh;
-    overflow-y: hidden;
-  }
-`;
-const ThemeProvider = ({ children, theme = index.lightTheme }) => {
-    return (jsxRuntime.jsxs(styled.ThemeProvider, { theme: theme, children: [children, jsxRuntime.jsx(LiveRegions.LiveRegions, {}), jsxRuntime.jsx(GlobalStyle, {})] }));
-};
-
-exports.ThemeProvider = ThemeProvider;

package/dist/ThemeProvider/ThemeProvider.mjs

@@ -1,183 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { createGlobalStyle, ThemeProvider as ThemeProvider$1 } from 'styled-components';
-import { LiveRegions } from '../LiveRegions/LiveRegions.mjs';
-import { lightTheme } from '../themes/lightTheme/index.mjs';
-
-const GlobalStyle = createGlobalStyle `
- /* http://meyerweb.com/eric/tools/css/reset/ 
-   v2.0 | 20110126
-   License: none (public domain)
-*/
-  html,
-  body,
-  div,
-  span,
-  applet,
-  object,
-  iframe,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  blockquote,
-  pre,
-  a,
-  abbr,
-  acronym,
-  address,
-  big,
-  cite,
-  code,
-  del,
-  dfn,
-  em,
-  img,
-  ins,
-  kbd,
-  q,
-  s,
-  samp,
-  small,
-  strike,
-  strong,
-  sub,
-  sup,
-  tt,
-  var,
-  b,
-  u,
-  i,
-  center,
-  dl,
-  dt,
-  dd,
-  ol,
-  ul,
-  li,
-  fieldset,
-  form,
-  label,
-  legend,
-  table,
-  caption,
-  tbody,
-  tfoot,
-  thead,
-  tr,
-  th,
-  td,
-  article,
-  aside,
-  canvas,
-  details,
-  embed,
-  figure,
-  figcaption,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  output,
-  ruby,
-  section,
-  summary,
-  time,
-  mark,
-  audio,
-  video {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-  }
-  /* HTML5 display-role reset for older browsers */
-  article,
-  aside,
-  details,
-  figcaption,
-  figure,
-  footer,
-  header,
-  hgroup,
-  menu,
-  nav,
-  section {
-    display: block;
-  }
-  body {
-    line-height: 1;
-  }
-  ol,
-  ul {
-    list-style: none;
-  }
-  blockquote,
-  q {
-    quotes: none;
-  }
-  blockquote:before,
-  blockquote:after,
-  q:before,
-  q:after {
-    content: "";
-    content: none;
-  }
-  table {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
-  /* My styles */
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  *:focus-visible {
-    outline: 2px solid ${({ theme }) => theme.colors.primary600};
-    outline-offset: 2px;
-  }
-
-  /* Focusing the button with a mouse, touch, or stylus will show a subtle drop shadow. */
-  *:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  body,html{
-    height: 100%;
-  }
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
-
-  button {
-    margin: 0;
-    padding: 0;
-    border: none;
-    background: none;
-    color: inherit;
-    font-size: 100%;
-    cursor: pointer;
-    font: inherit;
-  }
-
-  textarea,input {
-    font: inherit;
-  }
-
-  .lock-body-scroll {
-    height: 100vh;
-    overflow-y: hidden;
-  }
-`;
-const ThemeProvider = ({ children, theme = lightTheme }) => {
-    return (jsxs(ThemeProvider$1, { theme: theme, children: [children, jsx(LiveRegions, {}), jsx(GlobalStyle, {})] }));
-};
-
-export { ThemeProvider };

package/dist/ThemeProvider/hooks.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const styled = require('styled-components');
-
-const useTheme = () => {
-    return styled.useTheme();
-};
-
-exports.useTheme = useTheme;

package/dist/ThemeProvider/hooks.mjs

@@ -1,7 +0,0 @@
-import { useTheme as useTheme$1 } from 'styled-components';
-
-const useTheme = () => {
-    return useTheme$1();
-};
-
-export { useTheme };

package/dist/ThemeProvider/index.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const ThemeProvider = require('./ThemeProvider.js');
-const hooks = require('./hooks.js');
-
-
-
-exports.ThemeProvider = ThemeProvider.ThemeProvider;
-exports.useTheme = hooks.useTheme;

package/dist/ThemeProvider/index.mjs

@@ -1,2 +0,0 @@
-export { ThemeProvider } from './ThemeProvider.mjs';
-export { useTheme } from './hooks.mjs';

package/dist/TimePicker/TimePicker.js

@@ -1,139 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const icons = require('@strapi/icons');
-const styled = require('styled-components');
-const Combobox = require('../Combobox/Combobox.js');
-const DesignSystemProvider = require('../DesignSystemProvider.js');
-const useControllableState = require('../hooks/useControllableState.js');
-const useDateFormatter = require('../hooks/useDateFormatter.js');
-const useId = require('../hooks/useId.js');
-const Field = require('../Field/Field.js');
-const Flex = require('../Flex/Flex.js');
-const FieldLabel = require('../Field/FieldLabel.js');
-const FieldHint = require('../Field/FieldHint.js');
-const FieldError = require('../Field/FieldError.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const isNotAlphabeticalCharacter = (str) => {
-    return Boolean(str.match(/^[^a-zA-Z]*$/));
-};
-const TimePickerInput = React__namespace.forwardRef(({ id, step = 15, 
-/**
- * @preserve
- * @deprecated This is no longer used.
- */
-ariaLabel: _ariaLabel, 
-/**
- * @preserve
- * @deprecated This is no longer used.
- */
-selectButtonTitle: _selectButtonTitle, value: valueProp, defaultValue, onChange, ...restProps }, forwardedRef) => {
-    const context = DesignSystemProvider.useDesignSystem('TimePicker');
-    const generatedId = useId.useId(id);
-    const [textValue, setTextValue] = React__namespace.useState('');
-    const [value, setValue] = useControllableState.useControllableState({
-        prop: valueProp,
-        defaultProp: defaultValue,
-        onChange,
-    });
-    const formatter = useDateFormatter.useDateFormatter(context.locale, {
-        hour: '2-digit',
-        minute: '2-digit',
-        hour12: false,
-    });
-    const separator = React__namespace.useMemo(() => {
-        const parts = formatter.formatToParts(new Date());
-        const { value: separator } = parts.find((part) => part.type === 'literal');
-        return separator;
-    }, [formatter]);
-    const timeOptions = React__namespace.useMemo(() => {
-        const stepCount = 60 / step;
-        return [...Array(24).keys()].flatMap((hour) => [...Array(stepCount).keys()].map((minuteStep) => formatter.format(new Date(0, 0, 0, hour, minuteStep * step))));
-    }, [step, formatter]);
-    const handleTextValueChange = (string) => {
-        if (!string || isNotAlphabeticalCharacter(string)) {
-            setTextValue(string);
-        }
-    };
-    const createNewTimeValue = (value) => {
-        const [hours, minutes] = value.split(separator);
-        if (!hours && !minutes)
-            return undefined;
-        const hoursAsNumber = Number(hours ?? '0');
-        const minutesAsNumber = Number(minutes ?? '0');
-        if (hoursAsNumber > 23 || minutesAsNumber > 59)
-            return undefined;
-        return formatter.format(new Date(0, 0, 0, hoursAsNumber, minutesAsNumber));
-    };
-    const handleBlur = (event) => {
-        const newValue = createNewTimeValue(event.target.value);
-        if (newValue) {
-            setTextValue(newValue);
-            setValue(newValue);
-        }
-        else {
-            setTextValue(value);
-        }
-    };
-    const handleChange = (changedValue) => {
-        if (typeof changedValue !== 'undefined') {
-            const newValue = createNewTimeValue(changedValue);
-            setValue(newValue);
-        }
-        else {
-            setValue(changedValue);
-        }
-    };
-    /**
-     * Because we allow values that aren't necessarily in the list & we control the text value, we need to
-     * update the text value when the value changes to keep the two in sync.
-     */
-    React__namespace.useEffect(() => {
-        const actualValue = typeof valueProp === 'undefined' ? '' : valueProp;
-        if (isNotAlphabeticalCharacter(actualValue)) {
-            setTextValue(actualValue);
-        }
-    }, [valueProp, setTextValue]);
-    return (jsxRuntime.jsx(Combobox.ComboboxInput, { ...restProps, ref: forwardedRef, value: value, onChange: handleChange, isPrintableCharacter: isNotAlphabeticalCharacter, allowCustomValue: true, placeholder: `--${separator}--`, autocomplete: "none", startIcon: jsxRuntime.jsx(StyledClock, {}), id: generatedId, inputMode: "numeric", pattern: `\\d{2}\\${separator}\\d{2}`, textValue: textValue, onTextValueChange: handleTextValueChange, onBlur: handleBlur, children: timeOptions.map((time) => (jsxRuntime.jsx(Combobox.Option, { value: time, children: time }, time))) }));
-});
-const StyledClock = styled__default.default(icons.Clock) `
-  height: 1rem;
-  width: 1rem;
-
-  & > path {
-    fill: ${({ theme }) => theme.colors.neutral500};
-  }
-`;
-const TimePicker = React__namespace.forwardRef(({ label, error, hint, id, required, labelAction, ...restProps }, forwardedRef) => {
-    const generatedId = useId.useId(id);
-    return (jsxRuntime.jsx(Field.Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [jsxRuntime.jsx(FieldLabel.FieldLabel, { action: labelAction, children: label }), jsxRuntime.jsx(TimePickerInput, { ref: forwardedRef, id: generatedId, error: error, required: required, ...restProps }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
-});
-
-exports.TimePicker = TimePicker;
-exports.TimePickerInput = TimePickerInput;