@os-design/core 1.0.254 → 1.0.256

package/dist/Switch/index.js

@@ -0,0 +1,126 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { resetButtonStyles, sizeStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import { forwardRef, useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const FRACTION_DIGITS = 4;
+const uncheckedStyles = p => !p.checked && css`
+    background-color: ${clr(p.theme.switchUncheckedColorBg)};
+    &::after {
+      left: ${+((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS)}em;
+    }
+  `;
+const checkedStyles = p => p.checked && css`
+    background-color: ${clr(p.theme.switchCheckedColorBg)};
+    &::after {
+      left: ${+(p.theme.switchWidth - p.theme.switchCircleSize - (p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS)}em;
+    }
+  `;
+const hoverUncheckedStyles = p => !p.checked && css`
+    background-color: ${clr(p.theme.switchUncheckedColorBgHover)};
+  `;
+const hoverCheckedStyles = p => p.checked && css`
+    background-color: ${clr(p.theme.switchCheckedColorBgHover)};
+  `;
+const hoverStyles = p => !p.disabled && css`
+    @media (hover: hover) {
+      &:hover,
+      &:focus {
+        ${hoverUncheckedStyles(p)};
+        ${hoverCheckedStyles(p)};
+      }
+    }
+  `;
+const disabledUncheckedStyles = p => !p.checked && css`
+    background-color: ${clr(p.theme.switchDisabledUncheckedColorBg)};
+  `;
+const disabledCheckedStyles = p => p.checked && css`
+    background-color: ${clr(p.theme.switchDisabledCheckedColorBg)};
+  `;
+const disabledStyles = p => p.disabled && css`
+    cursor: not-allowed;
+    ${disabledUncheckedStyles(p)};
+    ${disabledCheckedStyles(p)};
+  `;
+const StyledSwitch = styled('button', omitEmotionProps('size', 'checked'))`
+  ${resetButtonStyles};
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  display: block;
+
+  width: ${p => p.theme.switchWidth}em;
+  height: ${p => p.theme.switchHeight}em;
+  border-radius: ${p => p.theme.switchHeight / 2}em;
+
+  &::after {
+    position: absolute;
+    top: ${p => +((p.theme.switchHeight - p.theme.switchCircleSize) / 2).toFixed(FRACTION_DIGITS)}em;
+
+    width: ${p => p.theme.switchCircleSize}em;
+    height: ${p => p.theme.switchCircleSize}em;
+    border-radius: 50%;
+
+    background-color: ${p => clr(p.theme.switchColorCircleBg)};
+    content: ' ';
+
+    ${transitionStyles('left')};
+  }
+
+  ${uncheckedStyles};
+  ${checkedStyles};
+  ${hoverStyles};
+  ${disabledStyles};
+
+  ${sizeStyles};
+  ${transitionStyles('background-color')};
+`;
+
+/**
+ * The switch that can be enabled or disabled.
+ */
+const Switch = /*#__PURE__*/forwardRef(({
+  disabled = false,
+  value,
+  defaultValue,
+  onChange = () => {},
+  size,
+  onMouseDown = () => {},
+  onKeyDown = () => {},
+  ...rest
+}, ref) => {
+  const [forwardedValue, setForwardedValue] = useForwardedState({
+    value,
+    defaultValue,
+    onChange
+  });
+  const clickHandler = useCallback(() => {
+    if (disabled) return;
+    setForwardedValue(!forwardedValue);
+  }, [disabled, forwardedValue, setForwardedValue]);
+  const mouseDownHandler = useCallback(e => {
+    onMouseDown(e);
+    e.preventDefault();
+  }, [onMouseDown]);
+  const keyDownHandler = useCallback(e => {
+    if (e.key === ' ') setForwardedValue(!forwardedValue);
+    onKeyDown(e);
+    e.preventDefault();
+  }, [forwardedValue, onKeyDown, setForwardedValue]);
+  return /*#__PURE__*/_jsx(StyledSwitch, {
+    disabled: disabled,
+    checked: forwardedValue,
+    size: size,
+    onClick: clickHandler,
+    onMouseDown: mouseDownHandler,
+    onKeyDown: keyDownHandler,
+    role: "switch",
+    "aria-checked": forwardedValue,
+    ...rest,
+    ref: ref
+  });
+});
+Switch.displayName = 'Switch';
+export default Switch;

package/dist/SwitchSkeleton/index.d.ts

@@ -0,0 +1,9 @@
+import { type WithSize } from '@os-design/styles';
+import { type SkeletonProps } from '../Skeleton';
+export type SwitchSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;
+/**
+ * Provides a switch placeholder while a user waits for the content to load.
+ */
+declare const SwitchSkeleton: import("react").ForwardRefExoticComponent<Omit<SkeletonProps, "width"> & WithSize & import("react").RefAttributes<HTMLDivElement>>;
+export default SwitchSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/SwitchSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SwitchSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;AAY1E;;GAEG;AACH,QAAA,MAAM,cAAc,oIAEnB,CAAC;AAIF,eAAe,cAAc,CAAC"}

package/dist/SwitchSkeleton/index.js

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+import { sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import Skeleton from '../Skeleton';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledSwitchSkeleton = styled(Skeleton, omitEmotionProps('size'))`
+  width: ${p => p.theme.switchWidth}em;
+  height: ${p => p.theme.switchHeight}em;
+  border-radius: ${p => p.theme.switchHeight / 2}em;
+  ${sizeStyles};
+`;
+
+/**
+ * Provides a switch placeholder while a user waits for the content to load.
+ */
+const SwitchSkeleton = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(StyledSwitchSkeleton, {
+  width: "100%",
+  ...props,
+  ref: ref
+}));
+SwitchSkeleton.displayName = 'SwitchSkeleton';
+export default SwitchSkeleton;

package/dist/Tag/index.d.ts

@@ -0,0 +1,34 @@
+import { type WithSize } from '@os-design/styles';
+import React from 'react';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface BaseTagProps extends WithSize {
+    /**
+     * The component located on the left side.
+     * @default undefined
+     */
+    left?: React.ReactNode;
+    /**
+     * The component located on the right side.
+     * @default undefined
+     */
+    right?: React.ReactNode;
+}
+export type TagProps = JsxDivProps & BaseTagProps;
+export declare const TagContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & WithSize, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const LeftAddon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const RightAddon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * The component to display a label, tag, or category.
+ */
+declare const Tag: React.ForwardRefExoticComponent<JsxDivProps & BaseTagProps & React.RefAttributes<HTMLDivElement>>;
+export default Tag;
+//# sourceMappingURL=index.d.ts.map

package/dist/Tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Tag/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAE7D,MAAM,WAAW,YAAa,SAAQ,QAAQ;IAC5C;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,MAAM,MAAM,QAAQ,GAAG,WAAW,GAAG,YAAY,CAAC;AAElD,eAAO,MAAM,YAAY;;SA8C0jH,MAAO,WAAW;gGAhCpmH,CAAC;AAMF,eAAO,MAAM,SAAS;;SAtBV,MAAM,WAAW;qFAyB5B,CAAC;AAEF,eAAO,MAAM,UAAU;;eA3BL,WAAW;qFA8B5B,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,GAAG,mGAQR,CAAC;AAIF,eAAe,GAAG,CAAC"}

package/dist/Tag/index.js

@@ -0,0 +1,54 @@
+import styled from '@emotion/styled';
+import { ellipsisStyles, sizeStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TagContainer = styled('div', omitEmotionProps('size'))`
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+
+  background-color: ${p => clr(p.theme.tagColorBg)};
+  color: ${p => clr(p.theme.tagColorText)};
+
+  border-radius: ${p => p.theme.borderRadius}em;
+  padding: ${p => p.theme.tagPaddingVertical}em
+    ${p => p.theme.tagPaddingHorizontal}em;
+
+  ${sizeStyles};
+  ${transitionStyles('background-color')};
+`;
+const Content = styled.div`
+  ${ellipsisStyles};
+`;
+export const LeftAddon = styled.div`
+  display: inherit;
+  padding-right: ${p => p.theme.tagAddonPaddingHorizontal}em;
+`;
+export const RightAddon = styled.div`
+  display: inherit;
+  padding-left: ${p => p.theme.tagAddonPaddingHorizontal}em;
+`;
+
+/**
+ * The component to display a label, tag, or category.
+ */
+const Tag = /*#__PURE__*/forwardRef(({
+  left,
+  right,
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/_jsxs(TagContainer, {
+  ...rest,
+  ref: ref,
+  children: [left && /*#__PURE__*/_jsx(LeftAddon, {
+    children: left
+  }), /*#__PURE__*/_jsx(Content, {
+    children: children
+  }), right && /*#__PURE__*/_jsx(RightAddon, {
+    children: right
+  })]
+}));
+Tag.displayName = 'Tag';
+export default Tag;

package/dist/TagLink/index.d.ts

@@ -0,0 +1,10 @@
+import type { LinkProps, ReactRouterLinkProps } from '../Link';
+import { type BaseTagProps } from '../Tag';
+type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+export type TagLinkProps = JsxAProps & ReactRouterLinkProps & Pick<LinkProps, 'as'> & BaseTagProps;
+/**
+ * The tag component with a link.
+ */
+declare const TagLink: import("react").ForwardRefExoticComponent<JsxAProps & ReactRouterLinkProps & Pick<LinkProps, "as"> & BaseTagProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default TagLink;
+//# sourceMappingURL=index.d.ts.map

package/dist/TagLink/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TagLink/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,EAAE,KAAK,YAAY,EAAuC,MAAM,QAAQ,CAAC;AAEhF,KAAK,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,CAAC;AACzD,MAAM,MAAM,YAAY,GAAG,SAAS,GAClC,oBAAoB,GACpB,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GACrB,YAAY,CAAC;AAiBf;;GAEG;AACH,QAAA,MAAM,OAAO,uKAgBZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/TagLink/index.js

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import { LeftAddon, RightAddon, TagContainer } from '../Tag';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledTagLink = styled(TagContainer.withComponent('a'), omitEmotionProps('as'))`
+  cursor: pointer;
+  text-decoration: none;
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      background-color: ${p => clr(p.theme.tagColorBgHover)};
+    }
+  }
+`;
+
+/**
+ * The tag component with a link.
+ */
+const TagLink = /*#__PURE__*/forwardRef(({
+  left,
+  right,
+  as,
+  onMouseDown = () => {},
+  children,
+  ...rest
+}, ref) => /*#__PURE__*/_jsxs(StyledTagLink, {
+  as: as,
+  onMouseDown: e => {
+    onMouseDown(e);
+    e.preventDefault();
+  },
+  ...rest,
+  ref: ref,
+  children: [left && /*#__PURE__*/_jsx(LeftAddon, {
+    children: left
+  }), children, right && /*#__PURE__*/_jsx(RightAddon, {
+    children: right
+  })]
+}));
+TagLink.displayName = 'TagLink';
+export default TagLink;

package/dist/TagList/index.d.ts

@@ -0,0 +1,15 @@
+import { type WithSize } from '@os-design/styles';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface TagListProps extends JsxDivProps, WithSize {
+    /**
+     * Whether the tag list is collapsible.
+     * @default false
+     */
+    collapsible?: boolean;
+}
+/**
+ * The component to display a list of tags.
+ */
+declare const TagList: import("react").ForwardRefExoticComponent<TagListProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TagList;
+//# sourceMappingURL=index.d.ts.map

package/dist/TagList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TagList/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,QAAQ,EAAc,MAAM,mBAAmB,CAAC;AAK9D,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,QAAQ;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AA4CD;;GAEG;AACH,QAAA,MAAM,OAAO,yGA4BZ,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/dist/TagList/index.js

@@ -0,0 +1,67 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Down, Up } from '@os-design/icons';
+import { sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef, useState } from 'react';
+import Button from '../Button';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const collapsibleStyles = p => p.collapsible && !p.opened && css`
+    // The height of the tag
+    height: ${p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;
+  `;
+const Container = styled('div', omitEmotionProps('opened', 'collapsible', 'size'))`
+  display: flex;
+  overflow: hidden;
+  ${collapsibleStyles};
+  ${sizeStyles};
+`;
+const Content = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
+
+  margin: ${p => -p.theme.tagListGap}em 0 0 ${p => -p.theme.tagListGap}em;
+  & > * {
+    margin: ${p => p.theme.tagListGap}em 0 0 ${p => p.theme.tagListGap}em;
+  }
+`;
+const Control = styled.div`
+  margin-left: 0.2em;
+`;
+const OpenButton = styled(Button)`
+  // The height of the tag
+  height: ${p => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;
+  padding: 0 0.5em;
+`;
+
+/**
+ * The component to display a list of tags.
+ */
+const TagList = /*#__PURE__*/forwardRef(({
+  collapsible = false,
+  size,
+  children,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = useState(false);
+  return /*#__PURE__*/_jsxs(Container, {
+    opened: opened,
+    collapsible: collapsible,
+    size: size,
+    ...rest,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(Content, {
+      children: children
+    }), collapsible && /*#__PURE__*/_jsx(Control, {
+      children: /*#__PURE__*/_jsx(OpenButton, {
+        type: "ghost",
+        wide: "never",
+        onClick: () => setOpened(!opened),
+        children: opened ? /*#__PURE__*/_jsx(Up, {}) : /*#__PURE__*/_jsx(Down, {})
+      })
+    })]
+  });
+});
+TagList.displayName = 'TagList';
+export default TagList;

package/dist/TagListSkeleton/index.d.ts

@@ -0,0 +1,19 @@
+import { type TagListProps } from '../TagList';
+export interface TagListSkeletonProps extends TagListProps {
+    /**
+     * The width of the tag skeleton.
+     * @default undefined
+     */
+    width?: string;
+    /**
+     * The number of tag skeletons.
+     * @default 3
+     */
+    tagsCount?: number;
+}
+/**
+ * Provides a tag list placeholder while a user waits for the content to load.
+ */
+declare const TagListSkeleton: import("react").ForwardRefExoticComponent<TagListSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TagListSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/TagListSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TagListSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAGxD,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;GAEG;AACH,QAAA,MAAM,eAAe,iHAWpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/dist/TagListSkeleton/index.js

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+import TagList from '../TagList';
+import TagSkeleton from '../TagSkeleton';
+import { jsx as _jsx } from "react/jsx-runtime";
+let tagIndex = 0;
+
+/**
+ * Provides a tag list placeholder while a user waits for the content to load.
+ */
+const TagListSkeleton = /*#__PURE__*/forwardRef(({
+  width,
+  tagsCount = 3,
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(TagList, {
+  ...rest,
+  ref: ref,
+  children: Array(tagsCount).fill(0).map(() => {
+    tagIndex += 1;
+    return /*#__PURE__*/_jsx(TagSkeleton, {
+      width: width
+    }, tagIndex);
+  })
+}));
+TagListSkeleton.displayName = 'TagListSkeleton';
+export default TagListSkeleton;

package/dist/TagSkeleton/index.d.ts

@@ -0,0 +1,15 @@
+import { type WithSize } from '@os-design/styles';
+import { type SkeletonProps } from '../Skeleton';
+export interface TagSkeletonProps extends Omit<SkeletonProps, 'width'>, WithSize {
+    /**
+     * The width of the skeleton.
+     * @default 6em
+     */
+    width?: string;
+}
+/**
+ * Provides a tag placeholder while a user waits for the content to load.
+ */
+declare const TagSkeleton: import("react").ForwardRefExoticComponent<TagSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default TagSkeleton;
+//# sourceMappingURL=index.d.ts.map

package/dist/TagSkeleton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TagSkeleton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAiB,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,OAAO,CAAC,EAClC,QAAQ;IACV;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAYD;;GAEG;AACH,QAAA,MAAM,WAAW,6GAIhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/TagSkeleton/index.js

@@ -0,0 +1,25 @@
+import styled from '@emotion/styled';
+import { sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import Skeleton from '../Skeleton';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledTagSkeleton = styled(Skeleton, omitEmotionProps('width', 'size'))`
+  width: ${p => p.width};
+  height: ${p => p.theme.lineHeight + p.theme.tagPaddingVertical * 2}em;
+  ${sizeStyles};
+`;
+
+/**
+ * Provides a tag placeholder while a user waits for the content to load.
+ */
+const TagSkeleton = /*#__PURE__*/forwardRef(({
+  width = '6em',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(StyledTagSkeleton, {
+  width: width,
+  ...rest,
+  ref: ref
+}));
+TagSkeleton.displayName = 'TagSkeleton';
+export default TagSkeleton;

package/dist/TextArea/index.d.ts

@@ -0,0 +1,63 @@
+import type { WithSize } from '@os-design/styles';
+import React, { type ChangeEvent, type ForwardedRef } from 'react';
+type JsxTextAreaProps = Omit<JSX.IntrinsicElements['textarea'], 'value' | 'onChange' | 'ref'>;
+export interface TextAreaProps extends JsxTextAreaProps, WithSize {
+    /**
+     * The component located on the left side.
+     * @default undefined
+     */
+    left?: React.ReactNode;
+    /**
+     * Adds padding to the left component.
+     * It can be useful when passing an icon or text in the left component.
+     * @default false
+     */
+    leftHasPadding?: boolean;
+    /**
+     * The component located on the right side.
+     * @default undefined
+     */
+    right?: React.ReactNode;
+    /**
+     * Adds padding to the right component.
+     * It can be useful when passing an icon or text in the right component.
+     * @default false
+     */
+    rightHasPadding?: boolean;
+    /**
+     * Whether the textarea is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Shows the loading status.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The ref of the textarea container.
+     * @default undefined
+     */
+    containerRef?: ForwardedRef<HTMLDivElement>;
+    /**
+     * The props of the textarea container.
+     * @default undefined
+     */
+    containerProps?: JSX.IntrinsicElements['div'];
+    /**
+     * The textarea value.
+     * @default undefined
+     */
+    value?: string;
+    /**
+     * The change event handler.
+     * @default undefined
+     */
+    onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+}
+/**
+ * The multiline input component.
+ */
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;
+//# sourceMappingURL=index.d.ts.map

package/dist/TextArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TextArea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGlD,OAAO,KAAK,EAAE,EACZ,KAAK,WAAW,EAEhB,KAAK,YAAY,EAKlB,MAAM,OAAO,CAAC;AAIf,KAAK,gBAAgB,GAAG,IAAI,CAC1B,GAAG,CAAC,iBAAiB,CAAC,UAAU,CAAC,EACjC,OAAO,GAAG,UAAU,GAAG,KAAK,CAC7B,CAAC;AACF,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,QAAQ;IAC/D;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C;;;OAGG;IACH,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC9C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACzE;AA6CD;;GAEG;AACH,QAAA,MAAM,QAAQ,2FAuGb,CAAC;AAIF,eAAe,QAAQ,CAAC"}