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

package/dist/Tabs/Tabs.mjs

@@ -1,144 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children, cloneElement, useRef, useEffect } from 'react';
-import { useCallbackRef } from '@strapi/ui-primitives';
-import styled from 'styled-components';
-import { DefaultTabsRow, SimpleTabBox, DefaultTabButton, DefaultTabBox } from './components.mjs';
-import { useTabs } from './TabsContext.mjs';
-import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const useTabsFocus = (selectedTabIndex, onTabChange) => {
-    const tabsRef = useRef(null);
-    const mountedRef = useRef(false);
-    const handleTabChange = useCallbackRef(onTabChange);
-    useEffect(() => {
-        if (!tabsRef.current)
-            return;
-        // We don't' want to send the focus to the tab when it mounts
-        // It could break the navigating flow of the users if the focus was supposed to be
-        // on another element
-        if (mountedRef.current) {
-            const nextFocusEl = tabsRef.current.querySelector('[tabindex="0"]');
-            if (nextFocusEl) {
-                nextFocusEl.focus();
-                handleTabChange(selectedTabIndex);
-            }
-        }
-        if (!mountedRef.current) {
-            mountedRef.current = true;
-        }
-    }, [selectedTabIndex, handleTabChange]);
-    return tabsRef;
-};
-const TabButton = styled.button `
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-`;
-const Tabs = ({ children, ...props }) => {
-    const { id, selectedTabIndex, selectTabIndex, label, variant, onTabChange } = useTabs();
-    const tabsRef = useTabsFocus(selectedTabIndex, onTabChange);
-    const childrenArray = Children.toArray(children).map((node, index) => cloneElement(node, {
-        id: `${id}-${index}`,
-        index,
-        selectedTabIndex,
-        onTabClick: () => selectTabIndex(index),
-        variant,
-    }));
-    const handleKeyDown = (e) => {
-        const hasAllChildrenDisabled = childrenArray.every((node) => node.props.disabled);
-        if (hasAllChildrenDisabled) {
-            return;
-        }
-        switch (e.key) {
-            case KeyboardKeys.RIGHT: {
-                const nextWantedIndex = selectedTabIndex + 1;
-                const findNextIndex = (ref) => {
-                    const isDisabled = childrenArray[ref].props.disabled;
-                    if (!isDisabled) {
-                        return ref;
-                    }
-                    if (ref === childrenArray.length - 1) {
-                        return findNextIndex(0);
-                    }
-                    return findNextIndex(ref + 1);
-                };
-                const nextIndex = findNextIndex(nextWantedIndex >= childrenArray.length ? 0 : nextWantedIndex);
-                selectTabIndex(nextIndex);
-                break;
-            }
-            case KeyboardKeys.LEFT: {
-                const nextWantedIndex = selectedTabIndex - 1;
-                const findNextIndex = (ref) => {
-                    const isDisabled = childrenArray[ref].props.disabled;
-                    if (!isDisabled) {
-                        return ref;
-                    }
-                    if (ref === 0) {
-                        return findNextIndex(childrenArray.length - 1);
-                    }
-                    return findNextIndex(ref - 1);
-                };
-                const nextIndex = findNextIndex(nextWantedIndex < 0 ? childrenArray.length - 1 : nextWantedIndex);
-                selectTabIndex(nextIndex);
-                break;
-            }
-            case KeyboardKeys.HOME: {
-                const nextIndex = childrenArray.findIndex((node) => !node.props.disabled);
-                selectTabIndex(nextIndex);
-                break;
-            }
-            case KeyboardKeys.END: {
-                const arrayOfChildrenProps = childrenArray.map((node, index) => ({ isDisabled: node.props.disabled, index }));
-                const firstNonDisabledChildren = arrayOfChildrenProps.reverse().find(({ isDisabled }) => !isDisabled);
-                if (firstNonDisabledChildren) {
-                    selectTabIndex(firstNonDisabledChildren.index);
-                }
-                break;
-            }
-        }
-    };
-    if (variant === 'simple') {
-        return (
-        // TODO: This needs to be reviewed how to handle correctly since it's supposed to have focus.
-        // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-        jsx("div", { ref: tabsRef, role: "tablist", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray }));
-    }
-    return (jsx(DefaultTabsRow, { ref: tabsRef, role: "tablist", alignItems: "flex-end", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray }));
-};
-const Tab = ({ disabled = false, id, children, variant, hasError = false, index, selectedTabIndex, onTabClick, ...props }) => {
-    const tabId = `${id}-tab`;
-    const tabPanelId = `${id}-tabpanel`;
-    const selected = index === selectedTabIndex;
-    const handleClick = () => {
-        if (disabled) {
-            return;
-        }
-        if (onTabClick) {
-            onTabClick();
-        }
-    };
-    if (variant === 'simple') {
-        let textColor;
-        if (hasError) {
-            textColor = 'danger600';
-        }
-        else if (selected) {
-            textColor = 'primary600';
-        }
-        else if (disabled) {
-            textColor = 'neutral600';
-        }
-        else {
-            textColor = 'neutral600';
-        }
-        return (jsx(TabButton, { id: tabId, role: "tab", "aria-controls": selected ? tabPanelId : undefined, tabIndex: selected ? 0 : -1, "aria-selected": selected, type: "button", onClick: handleClick, "aria-disabled": disabled, ...props, children: jsx(SimpleTabBox, { padding: 4, selected: selected, hasError: hasError, children: jsx(Typography, { variant: "sigma", textColor: textColor, children: children }) }) }));
-    }
-    if (hasError) {
-        console.warn('The "hasError" prop is only available for the "simple" variant.');
-    }
-    const showRightBorder = selectedTabIndex && selectedTabIndex - 1 === index;
-    return (jsx(DefaultTabButton, { id: tabId, role: "tab", type: "button", "aria-controls": selected ? tabPanelId : undefined, tabIndex: selected ? 0 : -1, "aria-selected": selected, onClick: handleClick, "aria-disabled": disabled, showRightBorder: Boolean(showRightBorder), ...props, children: jsx(DefaultTabBox, { padding: selected ? 4 : 3, background: selected ? 'neutral0' : 'neutral100', selected: selected, children: jsx(Typography, { fontWeight: "bold", textColor: selected ? 'primary700' : 'neutral600', children: children }) }) }));
-};
-
-export { Tab, Tabs };

package/dist/Tabs/TabsContext.js

@@ -1,18 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const React = require('react');
-
-const TabsContext = React.createContext({
-    id: '',
-    label: '',
-    selectedTabIndex: 0,
-    selectTabIndex() {
-        throw new Error('TabsContext.selectTabIndex is not implemented.');
-    },
-});
-const useTabs = () => React.useContext(TabsContext);
-
-exports.TabsContext = TabsContext;
-exports.useTabs = useTabs;

package/dist/Tabs/TabsContext.mjs

@@ -1,13 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const TabsContext = createContext({
-    id: '',
-    label: '',
-    selectedTabIndex: 0,
-    selectTabIndex() {
-        throw new Error('TabsContext.selectTabIndex is not implemented.');
-    },
-});
-const useTabs = () => useContext(TabsContext);
-
-export { TabsContext, useTabs };

package/dist/Tabs/components.js

@@ -1,73 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const styled = require('styled-components');
-const Box = require('../Box/Box.js');
-const Flex = require('../Flex/Flex.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-/** Simple variant */
-const SimpleTabBox = styled__default.default(Box.Box) `
-  border-bottom: 2px solid
-    ${({ theme, selected, hasError }) => {
-    if (selected) {
-        if (hasError) {
-            return theme.colors.danger600;
-        }
-        return theme.colors.primary600;
-    }
-    return 'transparent';
-}};
-`;
-/** Default variant */
-const DefaultTabBox = styled__default.default(Box.Box) `
-  border-bottom: 1px solid ${({ theme, selected }) => (selected ? theme.colors.neutral0 : theme.colors.neutral150)};
-`;
-const DefaultTabButton = styled__default.default.button `
-  border: none;
-  background: transparent;
-  padding: 0;
-
-  & + & > ${DefaultTabBox} {
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral150};
-  }
-
-  ${DefaultTabBox} {
-    border-right: ${({ theme, showRightBorder }) => showRightBorder ? `1px solid ${theme.colors.neutral150}` : 'none'};
-  }
-
-  // Hack preventing the outline from being overflow by the following tab
-  outline-offset: -2px;
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-`;
-const DefaultTabsRow = styled__default.default(Flex.Flex) `
-  & > * {
-    flex: 1;
-  }
-
-  & ${DefaultTabButton}:first-of-type ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 0`};
-  }
-
-  & ${DefaultTabButton}:last-of-type ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `0 ${theme.borderRadius} 0 0`};
-  }
-
-  & ${DefaultTabButton}[aria-selected="true"] ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
-    border-left: none;
-    border-right: none;
-  }
-`;
-
-exports.DefaultTabBox = DefaultTabBox;
-exports.DefaultTabButton = DefaultTabButton;
-exports.DefaultTabsRow = DefaultTabsRow;
-exports.SimpleTabBox = SimpleTabBox;

package/dist/Tabs/components.mjs

@@ -1,62 +0,0 @@
-import styled from 'styled-components';
-import { Box } from '../Box/Box.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-/** Simple variant */
-const SimpleTabBox = styled(Box) `
-  border-bottom: 2px solid
-    ${({ theme, selected, hasError }) => {
-    if (selected) {
-        if (hasError) {
-            return theme.colors.danger600;
-        }
-        return theme.colors.primary600;
-    }
-    return 'transparent';
-}};
-`;
-/** Default variant */
-const DefaultTabBox = styled(Box) `
-  border-bottom: 1px solid ${({ theme, selected }) => (selected ? theme.colors.neutral0 : theme.colors.neutral150)};
-`;
-const DefaultTabButton = styled.button `
-  border: none;
-  background: transparent;
-  padding: 0;
-
-  & + & > ${DefaultTabBox} {
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral150};
-  }
-
-  ${DefaultTabBox} {
-    border-right: ${({ theme, showRightBorder }) => showRightBorder ? `1px solid ${theme.colors.neutral150}` : 'none'};
-  }
-
-  // Hack preventing the outline from being overflow by the following tab
-  outline-offset: -2px;
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-`;
-const DefaultTabsRow = styled(Flex) `
-  & > * {
-    flex: 1;
-  }
-
-  & ${DefaultTabButton}:first-of-type ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 0`};
-  }
-
-  & ${DefaultTabButton}:last-of-type ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `0 ${theme.borderRadius} 0 0`};
-  }
-
-  & ${DefaultTabButton}[aria-selected="true"] ${DefaultTabBox} {
-    border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
-    border-left: none;
-    border-right: none;
-  }
-`;
-
-export { DefaultTabBox, DefaultTabButton, DefaultTabsRow, SimpleTabBox };

package/dist/Tabs/index.js

@@ -1,15 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Tabs = require('./Tabs.js');
-const TabPanels = require('./TabPanels.js');
-const TabGroup = require('./TabGroup.js');
-
-
-
-exports.Tab = Tabs.Tab;
-exports.Tabs = Tabs.Tabs;
-exports.TabPanel = TabPanels.TabPanel;
-exports.TabPanels = TabPanels.TabPanels;
-exports.TabGroup = TabGroup.TabGroup;

package/dist/Tabs/index.mjs

@@ -1,3 +0,0 @@
-export { Tab, Tabs } from './Tabs.mjs';
-export { TabPanel, TabPanels } from './TabPanels.mjs';
-export { TabGroup } from './TabGroup.mjs';

package/dist/Tag/Tag.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const Flex = require('../Flex/Flex.js');
-const Typography = require('../Typography/Typography.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const Tag = ({ children, icon, disabled = false, onClick, ...props }) => {
-    const handleClick = (e) => {
-        if (disabled || !onClick)
-            return;
-        onClick(e);
-    };
-    return (jsxRuntime.jsxs(TagWrapper, { as: "button", background: disabled ? 'neutral200' : 'primary100', color: disabled ? 'neutral700' : 'primary600', paddingLeft: 3, paddingRight: 3, onClick: handleClick, "aria-disabled": disabled, disabled: disabled, borderWidth: "1px", borderStyle: "solid", borderColor: disabled ? 'neutral300' : 'primary200', hasRadius: true, height: `${32 / 16}rem`, gap: 2, ...props, children: [jsxRuntime.jsx(TagText, { "$disabled": disabled, variant: "pi", fontWeight: "bold", as: "span", children: children }), icon] }));
-};
-const TagWrapper = styled__default.default(Flex.Flex) `
-  & > svg {
-    height: ${8 / 16}rem;
-    width: ${8 / 16}rem;
-  }
-
-  & > svg path {
-    fill: ${({ theme, ...p }) => (p['aria-disabled'] ? theme.colors.neutral600 : theme.colors.primary600)};
-  }
-`;
-const TagText = styled__default.default(Typography.Typography) `
-  color: inherit;
-  border-right: 1px solid ${({ theme, $disabled }) => ($disabled ? theme.colors.neutral300 : theme.colors.primary200)};
-  padding-right: ${({ theme }) => theme.spaces[2]};
-`;
-
-exports.Tag = Tag;

package/dist/Tag/Tag.mjs

@@ -1,30 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Flex } from '../Flex/Flex.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const Tag = ({ children, icon, disabled = false, onClick, ...props }) => {
-    const handleClick = (e) => {
-        if (disabled || !onClick)
-            return;
-        onClick(e);
-    };
-    return (jsxs(TagWrapper, { as: "button", background: disabled ? 'neutral200' : 'primary100', color: disabled ? 'neutral700' : 'primary600', paddingLeft: 3, paddingRight: 3, onClick: handleClick, "aria-disabled": disabled, disabled: disabled, borderWidth: "1px", borderStyle: "solid", borderColor: disabled ? 'neutral300' : 'primary200', hasRadius: true, height: `${32 / 16}rem`, gap: 2, ...props, children: [jsx(TagText, { "$disabled": disabled, variant: "pi", fontWeight: "bold", as: "span", children: children }), icon] }));
-};
-const TagWrapper = styled(Flex) `
-  & > svg {
-    height: ${8 / 16}rem;
-    width: ${8 / 16}rem;
-  }
-
-  & > svg path {
-    fill: ${({ theme, ...p }) => (p['aria-disabled'] ? theme.colors.neutral600 : theme.colors.primary600)};
-  }
-`;
-const TagText = styled(Typography) `
-  color: inherit;
-  border-right: 1px solid ${({ theme, $disabled }) => ($disabled ? theme.colors.neutral300 : theme.colors.primary200)};
-  padding-right: ${({ theme }) => theme.spaces[2]};
-`;
-
-export { Tag };

package/dist/Tag/__tests__/Tag.spec.d.ts

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

package/dist/Tag/index.js

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

package/dist/Tag/index.mjs

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

package/dist/TextButton/TextButton.js

@@ -1,71 +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 utils = require('../themes/utils.js');
-const Flex = require('../Flex/Flex.js');
-const Typography = require('../Typography/Typography.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 rotation = styled.keyframes `
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-`;
-const LoadingWrapper = styled__default.default.div `
-  animation: ${rotation} 2s infinite linear;
-  will-change: transform;
-`;
-const TextButtonWrapper = styled__default.default(Flex.Flex) `
-  border: none;
-
-  &[aria-disabled='true'] {
-    pointer-events: none;
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.primary600};
-  }
-
-  ${utils.buttonFocusStyle}
-`;
-const TextButton = React__namespace.forwardRef(({ children, startIcon, endIcon, onClick, disabled = false, loading = false, ...props }, ref) => {
-    const handleClick = onClick && !disabled ? onClick : undefined;
-    const isDisabled = disabled || loading;
-    return (jsxRuntime.jsxs(TextButtonWrapper, { ref: ref, "aria-disabled": isDisabled, onClick: handleClick, as: "button", type: "button", background: "transparent", gap: 2, ...props, children: [loading ? (jsxRuntime.jsx(LoadingWrapper, { "aria-hidden": true, children: jsxRuntime.jsx(icons.Loader, {}) })) : (startIcon), jsxRuntime.jsx(Typography.Typography, { variant: "pi", textColor: isDisabled ? 'neutral600' : 'primary600', children: children }), endIcon] }));
-});
-TextButton.displayName = 'TextButton';
-
-exports.TextButton = TextButton;

package/dist/TextButton/TextButton.mjs

@@ -1,44 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { Loader } from '@strapi/icons';
-import styled, { keyframes } from 'styled-components';
-import { buttonFocusStyle } from '../themes/utils.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { Typography } from '../Typography/Typography.mjs';
-
-const rotation = keyframes `
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-`;
-const LoadingWrapper = styled.div `
-  animation: ${rotation} 2s infinite linear;
-  will-change: transform;
-`;
-const TextButtonWrapper = styled(Flex) `
-  border: none;
-
-  &[aria-disabled='true'] {
-    pointer-events: none;
-    svg path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.primary600};
-  }
-
-  ${buttonFocusStyle}
-`;
-const TextButton = React.forwardRef(({ children, startIcon, endIcon, onClick, disabled = false, loading = false, ...props }, ref) => {
-    const handleClick = onClick && !disabled ? onClick : undefined;
-    const isDisabled = disabled || loading;
-    return (jsxs(TextButtonWrapper, { ref: ref, "aria-disabled": isDisabled, onClick: handleClick, as: "button", type: "button", background: "transparent", gap: 2, ...props, children: [loading ? (jsx(LoadingWrapper, { "aria-hidden": true, children: jsx(Loader, {}) })) : (startIcon), jsx(Typography, { variant: "pi", textColor: isDisabled ? 'neutral600' : 'primary600', children: children }), endIcon] }));
-});
-TextButton.displayName = 'TextButton';
-
-export { TextButton };

package/dist/TextButton/index.js

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

package/dist/TextButton/index.mjs

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

package/dist/TextInput/TextInput.js

@@ -1,33 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-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 FieldInput = require('../Field/FieldInput.js');
-const FieldHint = require('../Field/FieldHint.js');
-const FieldError = require('../Field/FieldError.js');
-
-const TextInput = React.forwardRef(({ name, hint, error, label, labelAction, id, required, ...props }, ref) => {
-    const generatedId = useId.useId(id);
-    const inputWrapperRef = React.useRef(null);
-    const inputRef = React.useRef(null);
-    if (!label && !props['aria-label']) {
-        throw new Error('The TextInput component needs a "label" or an "aria-label" props');
-    }
-    /**
-     * TODO: for V2, remove this.
-     */
-    React.useImperativeHandle(ref, () => ({
-        input: inputRef,
-        inputWrapperRef,
-    }), []);
-    return (jsxRuntime.jsx("div", { ref: inputWrapperRef, children: 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(FieldInput.FieldInput, { ref: inputRef, ...props }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }) }));
-});
-TextInput.displayName = 'TextInput';
-
-exports.TextInput = TextInput;

package/dist/TextInput/TextInput.mjs

@@ -1,29 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useId } from '../hooks/useId.mjs';
-import { Field } from '../Field/Field.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-import { FieldLabel } from '../Field/FieldLabel.mjs';
-import { FieldInput } from '../Field/FieldInput.mjs';
-import { FieldHint } from '../Field/FieldHint.mjs';
-import { FieldError } from '../Field/FieldError.mjs';
-
-const TextInput = forwardRef(({ name, hint, error, label, labelAction, id, required, ...props }, ref) => {
-    const generatedId = useId(id);
-    const inputWrapperRef = useRef(null);
-    const inputRef = useRef(null);
-    if (!label && !props['aria-label']) {
-        throw new Error('The TextInput component needs a "label" or an "aria-label" props');
-    }
-    /**
-     * TODO: for V2, remove this.
-     */
-    useImperativeHandle(ref, () => ({
-        input: inputRef,
-        inputWrapperRef,
-    }), []);
-    return (jsx("div", { ref: inputWrapperRef, children: 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(FieldInput, { ref: inputRef, ...props }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }) }));
-});
-TextInput.displayName = 'TextInput';
-
-export { TextInput };

package/dist/TextInput/__tests__/TextInput.spec.d.ts

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

package/dist/TextInput/index.js

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

package/dist/TextInput/index.mjs

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