@os-design/core 1.0.254 → 1.0.256

package/dist/Select/index.js

@@ -0,0 +1,558 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { Close, CloseCircle, Down, Loading, Up } from '@os-design/icons';
+import { m, useIsMinWidth } from '@os-design/media';
+import { ellipsisStyles, resetButtonStyles, transitionStyles } from '@os-design/styles';
+import { ThemeOverrider, clr, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useBrowserLayoutEffect, useEvent, useFontSize, useForwardedRef, useForwardedState, useResizeObserver, useSize } from '@os-design/utils';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FixedSizeList } from 'react-window';
+import Button from '../Button';
+import { InputContainer } from '../Input';
+import InputSearch from '../InputSearch';
+import useRWLoadNext from '../List/utils/useRWLoadNext';
+import Menu from '../Menu';
+import MenuItem from '../MenuItem';
+import Tag from '../Tag';
+import defaultLocale from './utils/defaultLocale';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const selectContainerPaddingStyles = p => {
+  const paddingVertical = (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
+  return css`
+    padding: calc(${paddingVertical}em - 1px) 0;
+  `;
+};
+const selectContainerOpenedStyles = p => p.opened && !p.unbordered && css`
+    border-color: ${clr(p.theme.inputFocusColorBorder)};
+    box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};
+  `;
+const selectContainerUnborderedStyles = p => p.unbordered && css`
+    border: 0;
+    box-shadow: none !important;
+    ${transitionStyles('background-color')(p)};
+  `;
+const selectContainerUnborderedHoverStyles = p => p.unbordered && !p.disabled && css`
+    @media (hover: hover) {
+      &:hover,
+      &:focus {
+        background-color: ${clr(p.theme.buttonGhostColorBgHover)};
+      }
+    }
+  `;
+export const SelectContainer = styled(InputContainer, omitEmotionProps('opened', 'unbordered', 'disabled'))`
+  cursor: ${p => !p.disabled ? 'pointer' : 'not-allowed'};
+  user-select: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  height: unset;
+  min-height: ${p => p.theme.baseHeight}em;
+
+  ${selectContainerPaddingStyles};
+  ${selectContainerOpenedStyles};
+  ${selectContainerUnborderedStyles};
+  ${selectContainerUnborderedHoverStyles};
+`;
+const SelectMenu = styled(Menu, omitEmotionProps('width'))`
+  padding-top: 0;
+  padding-bottom: 0;
+  max-height: unset;
+
+  ${m.min.xs} {
+    width: ${p => p.width}px;
+  }
+`;
+const NotFound = styled.div`
+  height: ${p => p.theme.menuItemHeight}em;
+  display: flex;
+  align-items: center;
+
+  padding: 0 ${p => p.theme.inputPaddingHorizontal}em;
+  color: ${p => clr(p.theme.selectNotFoundColorText)};
+`;
+const InputSearchContainer = styled.div`
+  padding: ${p => p.theme.menuPaddingVertical}em
+    ${p => p.theme.inputPaddingHorizontal}em 0;
+`;
+export const ToggleContainer = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+`;
+const toggleContentNotHasLeftStyles = p => !p.hasLeft && css`
+    padding-left: ${p.theme.inputPaddingHorizontal}em;
+  `;
+const toggleContentNotHasRightStyles = p => !p.hasRight && !p.unbordered && css`
+    padding-right: ${p.theme.inputPaddingHorizontal}em;
+  `;
+export const ToggleContent = styled('div', omitEmotionProps('hasLeft', 'hasRight', 'unbordered'))`
+  flex: 1;
+  ${toggleContentNotHasLeftStyles};
+  ${toggleContentNotHasRightStyles};
+  ${ellipsisStyles};
+`;
+export const Placeholder = styled.span`
+  color: ${p => clr(p.theme.inputColorPlaceholder)};
+  ${ellipsisStyles};
+`;
+const titleUnborderedStyles = p => p.unbordered && css`
+    font-weight: 500;
+    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}
+  `;
+const titleDisabledStyles = p => p.disabled && css`
+    color: ${clr(p.theme.inputDisabledColorText)};
+  `;
+export const Title = styled('span', omitEmotionProps('disabled', 'unbordered'))`
+  color: ${p => clr(p.theme.colorText)};
+  ${titleUnborderedStyles};
+  ${titleDisabledStyles};
+  ${ellipsisStyles};
+`;
+const ToggleListItem = styled(Tag, omitEmotionProps('disabled'))`
+  // Reset tag styles
+  padding-top: 0;
+  padding-bottom: 0;
+
+  height: ${p => p.theme.selectToggleListItemHeight}em;
+  ${titleDisabledStyles};
+`;
+const ToggleList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden; // For ellipsis styles
+
+  margin: 0 ${p => p.theme.selectToggleListItemGap}em
+    ${p => -p.theme.selectToggleListItemGap}em 0;
+
+  & > div {
+    margin: 0 ${p => p.theme.selectToggleListItemGap}em
+      ${p => p.theme.selectToggleListItemGap}em 0;
+  }
+`;
+const DeleteButton = styled.button`
+  ${resetButtonStyles};
+  cursor: pointer;
+  display: inherit;
+  font-size: 1em;
+  margin-left: 0.2em;
+
+  background-color: transparent;
+  color: ${p => clr(p.theme.selectToggleDeleteButtonColorIcon)};
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      color: ${p => clr(p.theme.selectToggleDeleteButtonColorIconHover)};
+    }
+  }
+
+  ${transitionStyles('color')};
+`;
+const toggleIconUnborderedStyles = p => p.unbordered && css`
+    padding-top: 0.2em;
+    font-size: 0.8em;
+    ${!p.disabled && `color: ${clr(p.theme.colorPrimary)};`}
+  `;
+export const ToggleIconContainer = styled('span', omitEmotionProps('unbordered'))`
+  color: ${p => clr(p.theme.selectColorIcon)};
+  line-height: 1;
+  ${toggleIconUnborderedStyles};
+`;
+export const ClearIcon = styled(CloseCircle)`
+  transform: scale(1.2) !important;
+`;
+const Addon = styled('span', omitEmotionProps('hasPadding'))`
+  display: flex;
+  align-items: center;
+  user-select: none;
+  color: ${p => clr(p.theme.inputColorPlaceholder)};
+
+  svg {
+    transform: scale(1.2);
+  }
+`;
+export const ToggleLeftAddon = styled(Addon)`
+  padding-right: ${p => p.theme.inputAddonPaddingHorizontal}em;
+  ${p => p.hasPadding && css`
+      padding-left: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+export const ToggleRightAddon = styled(Addon)`
+  padding-left: ${p => p.theme.inputAddonPaddingHorizontal}em;
+  ${p => p.hasPadding && css`
+      padding-right: ${p.theme.inputPaddingHorizontal}em;
+    `}
+`;
+
+/**
+ * The component that allows to pick a value from predefined options.
+ */
+const Select = /*#__PURE__*/forwardRef(({
+  options = [],
+  initSelectedOptions = [],
+  left,
+  leftHasPadding = false,
+  right,
+  rightHasPadding = false,
+  placeholder,
+  searchVisible = false,
+  searchProps = {},
+  notFoundText = 'Not found',
+  unbordered = false,
+  loading = false,
+  disabled = false,
+  autoFocus = false,
+  autoOpen = false,
+  clearVisible = false,
+  threshold = 10,
+  visibleCount = 6,
+  overscanCount = 10,
+  multiple = false,
+  maxSelectedItems = 0,
+  locale = defaultLocale,
+  value,
+  defaultValue,
+  onChange,
+  onLoadNext = () => {},
+  onClose = () => {},
+  onBlur = () => {},
+  size,
+  placement,
+  ...rest
+}, ref) => {
+  const [containerRef, mergedContainerRef] = useForwardedRef(ref);
+  const [width, setWidth] = useState(0);
+  const [opened, setOpened] = useState(autoOpen);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [forwardedValue, setForwardedValue] = useForwardedState({
+    value,
+    defaultValue,
+    onChange
+  });
+  useEffect(() => {
+    if (autoFocus) containerRef.current?.focus();
+  }, [autoFocus, containerRef]);
+  const onCloseRef = useRef(onClose);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+  }, [onClose]);
+  const initRef = useRef(false);
+  useEffect(() => {
+    if (!initRef.current) {
+      initRef.current = true;
+      return;
+    }
+    if (!opened) onCloseRef.current();
+  }, [opened]);
+
+  /**
+   * Detect the width of the container when the select was opened and update
+   * it when either the container size or the window size has been changed.
+   */
+  const resizeHandler = useCallback(() => {
+    window.requestAnimationFrame(() => {
+      if (!opened || !containerRef.current) return;
+      const nextWidth = containerRef.current.getBoundingClientRect().width;
+      if (width === nextWidth) return;
+      setWidth(nextWidth);
+    });
+  }, [opened, containerRef, width]);
+  useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);
+  useResizeObserver(containerRef, resizeHandler);
+  useEvent(typeof window !== 'undefined' ? window : undefined, 'resize', resizeHandler);
+
+  // Replace the aria-haspopup attribute from menu to listbox
+  useBrowserLayoutEffect(() => {
+    if (!containerRef.current) return;
+    containerRef.current.setAttribute('aria-haspopup', 'listbox');
+  }, []);
+  const listBoxId = useMemo(() => `listbox-${Math.random().toString(36).slice(2, 11)}`, []);
+  const blurHandler = useCallback(e => {
+    if (!opened) onBlur(e);
+  }, [onBlur, opened]);
+  const onDelete = useCallback(v => {
+    if (!multiple) return;
+    setForwardedValue((forwardedValue || []).filter(item => item !== v));
+  }, [forwardedValue, multiple, setForwardedValue]);
+  const prevSelectedOptions = useRef(initSelectedOptions);
+  const selectedOptions = useMemo(() => {
+    if (!forwardedValue) return [];
+    const values = Array.isArray(forwardedValue) ? forwardedValue : [forwardedValue];
+    const items = [...options, ...prevSelectedOptions.current];
+    return values.map(v => {
+      const option = items.find(item => item.value === v);
+      return {
+        title: option ? option.title : v,
+        value: v
+      };
+    });
+  }, [forwardedValue, options]);
+  useEffect(() => {
+    prevSelectedOptions.current = selectedOptions;
+  }, [selectedOptions]);
+  const toggleContent = useMemo(() => {
+    if (multiple) {
+      if (!forwardedValue || forwardedValue.length === 0) {
+        return /*#__PURE__*/_jsx(Placeholder, {
+          children: placeholder
+        });
+      }
+      return /*#__PURE__*/_jsx(ToggleList, {
+        children: selectedOptions.map(({
+          title,
+          value: v
+        }) => /*#__PURE__*/_jsx(ToggleListItem, {
+          disabled: disabled,
+          right: !disabled ? /*#__PURE__*/_jsx(DeleteButton, {
+            onClick: e => {
+              onDelete(v);
+              e.stopPropagation();
+            },
+            onKeyDown: e => e.stopPropagation(),
+            "aria-label": `${locale.deleteLabel} ${title}`,
+            "aria-hidden": true,
+            children: /*#__PURE__*/_jsx(Close, {})
+          }) : undefined,
+          "aria-hidden": true,
+          children: title
+        }, v))
+      });
+    }
+    if (!forwardedValue) {
+      return /*#__PURE__*/_jsx(Placeholder, {
+        children: placeholder
+      });
+    }
+    const option = selectedOptions.find(item => item.value === forwardedValue);
+    return /*#__PURE__*/_jsx(Title, {
+      disabled: disabled,
+      unbordered: unbordered,
+      children: option ? option.title : ''
+    });
+  }, [disabled, forwardedValue, locale.deleteLabel, multiple, onDelete, placeholder, selectedOptions, unbordered]);
+  const toggleShowClearButton = useMemo(() => {
+    if (!clearVisible) return false;
+    if (multiple) return forwardedValue && forwardedValue.length > 0;
+    return !!forwardedValue;
+  }, [clearVisible, forwardedValue, multiple]);
+  const toggleOnClear = useCallback(() => {
+    setForwardedValue(multiple ? [] : null);
+    if (!containerRef.current) return;
+    containerRef.current.focus();
+  }, [containerRef, multiple, setForwardedValue]);
+  const toggleRightValue = useMemo(() => {
+    if (loading) return /*#__PURE__*/_jsx(Loading, {});
+    if (toggleShowClearButton) {
+      return /*#__PURE__*/_jsx(Button, {
+        type: "ghost",
+        wide: "never",
+        size: "small",
+        disabled: disabled,
+        onClick: e => {
+          toggleOnClear();
+          e.stopPropagation();
+        },
+        onKeyDown: e => {
+          if (e.key === 'Enter') toggleOnClear();
+          e.stopPropagation();
+        },
+        "aria-label": locale.clearLabel,
+        children: /*#__PURE__*/_jsx(ClearIcon, {})
+      });
+    }
+    return right || /*#__PURE__*/_jsx(ToggleIconContainer, {
+      unbordered: unbordered,
+      children: opened ? /*#__PURE__*/_jsx(Up, {}) : /*#__PURE__*/_jsx(Down, {})
+    });
+  }, [disabled, loading, locale.clearLabel, opened, right, toggleOnClear, toggleShowClearButton, unbordered]);
+  const toggleRightHasPaddingValue = useMemo(() => {
+    if (loading) return true;
+    if (toggleShowClearButton) return false;
+    return right ? rightHasPadding : true;
+  }, [loading, right, rightHasPadding, toggleShowClearButton]);
+  const onSelect = useCallback(v => {
+    if (multiple) {
+      // Delete the value because it was already selected
+      if ((forwardedValue || []).includes(v)) {
+        setForwardedValue((forwardedValue || []).filter(item => item !== v));
+        return;
+      }
+
+      // Add a new value if the number of selected items is less than max
+      if (maxSelectedItems === 0 || (forwardedValue || []).length < maxSelectedItems) {
+        setForwardedValue([...(forwardedValue || []), v]);
+        return;
+      }
+      return;
+    }
+    setForwardedValue(v);
+  }, [forwardedValue, maxSelectedItems, multiple, setForwardedValue]);
+  const windowSize = useSize();
+  const isMinXs = useIsMinWidth('xs');
+  const fontSize = useFontSize(typeof window !== 'undefined' ? document.body : null);
+  const {
+    theme
+  } = useTheme();
+  const scaleFactor = useMemo(() => {
+    const s = size || 'medium';
+    return ['small', 'medium', 'large'].includes(s) ? theme.sizes[s] : Number(s.replace(/^([0-9]+(\.[0-9]+)?).*/, '$1')) || 1; // Extract the number
+  }, [size, theme.sizes]);
+  const paddingBottom = useMemo(() => {
+    const paddingEm = isMinXs ? theme.menuPaddingVertical : theme.modalBodyPaddingVertical[0];
+    return paddingEm * fontSize * scaleFactor;
+  }, [isMinXs, theme.menuPaddingVertical, theme.modalBodyPaddingVertical, fontSize, scaleFactor]);
+  const paddingTop = useMemo(() => searchVisible ? 5 * scaleFactor : paddingBottom, [searchVisible, scaleFactor, paddingBottom]);
+  const searchInputHeight = useMemo(() => searchVisible ? (theme.baseHeight + theme.menuPaddingVertical) * fontSize * scaleFactor : 0, [searchVisible, theme.baseHeight, theme.menuPaddingVertical, fontSize, scaleFactor]);
+  const itemSize = useMemo(() => theme.menuItemHeight * fontSize * scaleFactor, [theme.menuItemHeight, fontSize, scaleFactor]);
+  const height = useMemo(() => {
+    // Modal
+    if (!isMinXs) {
+      const maxHeight = windowSize.height - theme.modalHeaderHeight * fontSize * scaleFactor - searchInputHeight;
+      const curHeight = options.length * itemSize + paddingTop + paddingBottom;
+      return curHeight < maxHeight ? curHeight : maxHeight;
+    }
+    // Popover
+    const count = options.length < visibleCount ? options.length : visibleCount;
+    return count * itemSize + paddingTop + paddingBottom;
+  }, [isMinXs, options.length, visibleCount, itemSize, windowSize.height, theme.modalHeaderHeight, fontSize, scaleFactor, searchInputHeight, paddingTop, paddingBottom]);
+  const scrollHandler = useRWLoadNext({
+    itemCount: options.length,
+    threshold,
+    itemSize,
+    paddingTop,
+    height,
+    onLoadNext
+  });
+  const InnerElement = useCallback(({
+    style,
+    ...innerElementRest
+  }) => /*#__PURE__*/_jsx("div", {
+    style: {
+      ...style,
+      height: `${parseFloat(style.height) + paddingTop + paddingBottom}px`
+    },
+    role: "listbox",
+    id: listBoxId,
+    ...innerElementRest
+  }), [listBoxId, paddingBottom, paddingTop]);
+  const listItemFn = useCallback(({
+    index,
+    style
+  }) => {
+    const {
+      title: optionTitle,
+      value: optionValue,
+      onClick: optionOnClick,
+      ...restOption
+    } = options[index];
+    return /*#__PURE__*/_jsx(MenuItem, {
+      style: {
+        ...style,
+        top: `${parseFloat(style.top ? style.top.toString() : '0') + paddingTop}px`
+      },
+      selected: multiple && (forwardedValue || []).includes(optionValue || '') || !multiple && forwardedValue === optionValue,
+      onClick: e => {
+        if (!optionValue) return;
+        onSelect(optionValue);
+
+        // Focus the input.
+        // Otherwise, if multiple is false and the user presses enter to select an item,
+        // the input will lose focus.
+        if (containerRef.current && !multiple) {
+          containerRef.current.focus();
+        }
+        if (optionOnClick) optionOnClick(e);
+      },
+      role: "option",
+      "aria-selected": multiple && (forwardedValue || []).includes(optionValue || '') || !multiple && forwardedValue === optionValue,
+      ...restOption,
+      children: optionTitle
+    });
+  }, [containerRef, forwardedValue, multiple, onSelect, options, paddingTop]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SelectContainer, {
+      opened: opened,
+      unbordered: unbordered,
+      disabled: disabled,
+      size: size,
+      tabIndex: !disabled ? 0 : -1,
+      onClick: () => {
+        if (disabled) return;
+        setOpened(!opened);
+      },
+      onKeyDown: e => {
+        if (disabled) return;
+        if (['Enter', ' '].includes(e.key)) {
+          setOpened(!opened);
+          e.preventDefault();
+        }
+      },
+      onMouseDown: e => e.preventDefault(),
+      onBlur: blurHandler,
+      role: "combobox",
+      "aria-disabled": disabled,
+      "aria-busy": loading,
+      "aria-haspopup": "listbox",
+      "aria-owns": listBoxId,
+      ...rest,
+      ref: mergedContainerRef,
+      children: /*#__PURE__*/_jsxs(ToggleContainer, {
+        children: [left && /*#__PURE__*/_jsx(ThemeOverrider, {
+          overrides: t => ({
+            buttonPaddingHorizontal: 0.8,
+            baseHeight: t.selectToggleListItemHeight / t.sizes.small
+          }),
+          children: /*#__PURE__*/_jsx(ToggleLeftAddon, {
+            hasPadding: leftHasPadding,
+            children: left
+          })
+        }), /*#__PURE__*/_jsx(ToggleContent, {
+          hasLeft: !!left,
+          hasRight: !!right,
+          unbordered: unbordered,
+          children: toggleContent
+        }), toggleRightValue && /*#__PURE__*/_jsx(ThemeOverrider, {
+          overrides: t => ({
+            buttonPaddingHorizontal: 0.8,
+            baseHeight: t.selectToggleListItemHeight / t.sizes.small
+          }),
+          children: /*#__PURE__*/_jsx(ToggleRightAddon, {
+            hasPadding: toggleRightHasPaddingValue,
+            children: toggleRightValue
+          })
+        })]
+      })
+    }), /*#__PURE__*/_jsxs(SelectMenu, {
+      trigger: containerRef,
+      visible: opened,
+      onClose: () => setOpened(false),
+      size: size,
+      width: width,
+      closeOnSelect: !multiple,
+      modalTitle: placeholder,
+      placement: placement,
+      children: [searchVisible && /*#__PURE__*/_jsx(InputSearchContainer, {
+        children: /*#__PURE__*/_jsx(InputSearch, {
+          ...searchProps
+        })
+      }), options.length > 0 ? /*#__PURE__*/_jsx(FixedSizeList, {
+        width: "100%",
+        height: height,
+        itemSize: itemSize,
+        itemCount: options.length,
+        overscanCount: overscanCount,
+        onScroll: ({
+          scrollOffset
+        }) => scrollHandler(scrollOffset),
+        innerElementType: InnerElement,
+        children: listItemFn
+      }) : /*#__PURE__*/_jsx(NotFound, {
+        children: notFoundText
+      })]
+    })]
+  });
+});
+Select.displayName = 'Select';
+export default Select;

package/dist/Select/utils/defaultLocale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultLocale.d.ts","sourceRoot":"","sources":["../../../src/Select/utils/defaultLocale.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,aAAa,EAAE,YAGpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Select/utils/defaultLocale.js

@@ -0,0 +1,5 @@
+const defaultLocale = {
+  deleteLabel: 'Delete',
+  clearLabel: 'Clear'
+};
+export default defaultLocale;

package/dist/Skeleton/index.d.ts

@@ -0,0 +1,14 @@
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface SkeletonProps extends JsxDivProps {
+    /**
+     * The width of the skeleton.
+     * @default 100%
+     */
+    width?: string;
+}
+/**
+ * Provides a basic placeholder while a user waits for the content to load.
+ */
+declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Skeleton;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Skeleton/index.tsx"],"names":[],"mappings":"AAMA,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2BD;;GAEG;AACH,QAAA,MAAM,QAAQ,0GAIb,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/dist/Skeleton/index.js

@@ -0,0 +1,40 @@
+import { keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SkeletonAnimation = keyframes`
+  from { background-position: 100% 50%; }
+  to { background-position: 0 50%; }
+`;
+const StyledSkeleton = styled('div', omitEmotionProps('width', 'size'))`
+  width: ${p => p.width};
+  height: 1em;
+
+  background: linear-gradient(
+    90deg,
+    ${p => clr(p.theme.skeletonColorBgFrom)} 25%,
+    ${p => clr(p.theme.skeletonColorBgTo)} 37%,
+    ${p => clr(p.theme.skeletonColorBgFrom)} 63%
+  );
+  background-size: 400% 100%;
+
+  border-radius: ${p => p.theme.borderRadius}em;
+  animation: ${SkeletonAnimation} 1.4s ease infinite;
+`;
+
+/**
+ * Provides a basic placeholder while a user waits for the content to load.
+ */
+const Skeleton = /*#__PURE__*/forwardRef(({
+  width = '100%',
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(StyledSkeleton, {
+  width: width,
+  "aria-busy": true,
+  ...rest,
+  ref: ref
+}));
+Skeleton.displayName = 'Skeleton';
+export default Skeleton;

package/dist/Switch/index.d.ts

@@ -0,0 +1,30 @@
+import { type WithSize } from '@os-design/styles';
+type JsxButtonProps = Omit<JSX.IntrinsicElements['button'], 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'ref'>;
+export interface SwitchProps extends JsxButtonProps, WithSize {
+    /**
+     * Whether the switch is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the switch is checked.
+     * @default false
+     */
+    value?: boolean;
+    /**
+     * The default value.
+     * @default undefined
+     */
+    defaultValue?: boolean;
+    /**
+     * The change event handler.
+     * @default undefined
+     */
+    onChange?: (value: boolean) => void;
+}
+/**
+ * The switch that can be enabled or disabled.
+ */
+declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default Switch;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAC;AAK3B,KAAK,cAAc,GAAG,IAAI,CACxB,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAC/B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,KAAK,CAC1D,CAAC;AACF,MAAM,WAAW,WAAY,SAAQ,cAAc,EAAE,QAAQ;IAC3D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAmHD;;GAEG;AACH,QAAA,MAAM,MAAM,2GAyDX,CAAC;AAIF,eAAe,MAAM,CAAC"}