@os-design/core 1.0.254 → 1.0.256

package/dist/DatePicker/index.js

@@ -0,0 +1,315 @@
+import styled from '@emotion/styled';
+import { defaultLocale, getAccessibilityDateLabel, useFormattedValue } from '@os-design/date-picker-utils';
+import { Down, Up } from '@os-design/icons';
+import { useIsMinWidth } from '@os-design/media';
+import { ThemeOverrider } from '@os-design/theming';
+import { useForwardedRef, useForwardedState, useKeyPress } from '@os-design/utils';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Button from '../Button';
+import Modal from '../Modal';
+import Popover from '../Popover';
+import { ClearIcon, Placeholder, SelectContainer, Title, ToggleContent, ToggleIconContainer, ToggleLeftAddon, ToggleRightAddon } from '../Select';
+import TimePicker from '../TimePicker';
+import DatePickerCalendar from './DatePickerCalendar';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledPopover = styled(Popover)`
+  padding: ${p => p.theme.datePickerPadding}em;
+`;
+const TimeContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 0.5em;
+`;
+const Dash = styled.div`
+  margin: 0 0.5em;
+  line-height: ${p => p.theme.baseHeight}em;
+`;
+const StyledTimePicker = styled(TimePicker)`
+  width: 2.5em;
+  text-align: center;
+`;
+const timePickerStyle = {
+  style: {
+    width: 'auto'
+  }
+};
+const createDate = (date, time) => {
+  const d = new Date(0);
+  d.setFullYear(date.getFullYear());
+  d.setMonth(date.getMonth());
+  d.setDate(date.getDate());
+  d.setHours(0);
+  d.setMinutes(0);
+  if (time) {
+    d.setHours(time.getHours());
+    d.setMinutes(time.getMinutes());
+  }
+  return d;
+};
+
+/**
+ * The component to choose a date.
+ */
+const DatePicker = /*#__PURE__*/forwardRef(({
+  left,
+  leftHasPadding = false,
+  right,
+  rightHasPadding = false,
+  placeholder,
+  disabled = false,
+  autoFocus = false,
+  autoOpen = false,
+  format,
+  firstDayOfWeek = 'sunday',
+  locale = defaultLocale,
+  showTime = false,
+  timeNotation = '12-hour',
+  range = false,
+  value,
+  defaultValue,
+  onChange,
+  onClose = () => {},
+  onBlur = () => {},
+  size,
+  ...rest
+}, ref) => {
+  const [containerRef, mergedContainerRef] = useForwardedRef(ref);
+  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]);
+  useEffect(() => {
+    if (!opened) {
+      onCloseRef.current();
+      containerRef.current?.focus();
+    }
+  }, [containerRef, opened]);
+  const formattedValue = useFormattedValue({
+    forwardedValue,
+    format,
+    showTime,
+    timeNotation
+  });
+  const closeHandler = useCallback(() => {
+    setOpened(false);
+  }, []);
+  useKeyPress(typeof window !== 'undefined' ? window : undefined, 'Escape', closeHandler);
+  const isMinXs = useIsMinWidth('xs');
+  const blurHandler = useCallback(e => {
+    if (!opened) onBlur(e);
+  }, [onBlur, opened]);
+  const valueIsSpecified = useMemo(() => formattedValue !== undefined && formattedValue !== null, [formattedValue]);
+  const rightHasPaddingValue = useMemo(() => {
+    if (valueIsSpecified) return false;
+    return right ? rightHasPadding : true;
+  }, [right, rightHasPadding, valueIsSpecified]);
+  const rightValue = useMemo(() => {
+    if (valueIsSpecified) {
+      return /*#__PURE__*/_jsx("div", {
+        "aria-hidden": true,
+        children: /*#__PURE__*/_jsx(Button, {
+          type: "ghost",
+          wide: "never",
+          size: "small",
+          disabled: disabled,
+          onClick: e => {
+            setForwardedValue(null);
+            e.stopPropagation();
+          },
+          onKeyDown: e => {
+            if (disabled) return;
+            if (['Enter', ' '].includes(e.key)) {
+              setForwardedValue(null);
+              if (!containerRef.current) return;
+              containerRef.current.focus();
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          },
+          "aria-label": locale.clearLabel,
+          children: /*#__PURE__*/_jsx(ClearIcon, {})
+        })
+      });
+    }
+    return right || /*#__PURE__*/_jsx(ToggleIconContainer, {
+      children: opened ? /*#__PURE__*/_jsx(Up, {}) : /*#__PURE__*/_jsx(Down, {})
+    });
+  }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
+  const firstTimePickerRef = useRef(null);
+  const secondTimePickerRef = useRef(null);
+  const rangeStartedRef = useRef(false);
+  useEffect(() => {
+    rangeStartedRef.current = false;
+  }, [opened]);
+  const changeHandler = useCallback(date => {
+    setForwardedValue(prev => {
+      if (!range) return createDate(date, prev);
+      const d = createDate(date);
+      const nextValue = prev && Array.isArray(prev) && rangeStartedRef.current ? [new Date(prev[0].getTime()), createDate(date, prev[1])] : [d, d];
+      rangeStartedRef.current = !rangeStartedRef.current;
+      return nextValue.sort((a, b) => a.getTime() - b.getTime());
+    });
+  }, [range, setForwardedValue]);
+  const calendarComponent = useMemo(() => /*#__PURE__*/_jsx(DatePickerCalendar, {
+    firstDayOfWeek: firstDayOfWeek,
+    locale: locale,
+    value: forwardedValue,
+    onSelect: v => {
+      changeHandler(v);
+      firstTimePickerRef.current?.focus();
+      if (!showTime && (!range || !rangeStartedRef.current)) {
+        closeHandler();
+      }
+    }
+  }), [changeHandler, closeHandler, firstDayOfWeek, forwardedValue, locale, range, showTime]);
+  const tabOnInputComplete = useCallback(e => {
+    if (e.target.selectionStart < 5) return;
+    secondTimePickerRef.current?.focus();
+    setForwardedValue(([from]) => {
+      const nextTo = new Date(from.getTime());
+      nextTo.setHours(nextTo.getHours() + 1);
+      return [from, nextTo];
+    });
+  }, [setForwardedValue]);
+  const closeOnInputComplete = useCallback(e => {
+    if (e.target.selectionStart < 5) return;
+    closeHandler();
+  }, [closeHandler]);
+  const timeComponent = useMemo(() => showTime && forwardedValue ? /*#__PURE__*/_jsx(TimeContainer, {
+    children: Array.isArray(forwardedValue) ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(StyledTimePicker, {
+        ref: firstTimePickerRef
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        ,
+        autoFocus: true,
+        disabled: disabled,
+        notation: timeNotation,
+        containerProps: timePickerStyle,
+        value: forwardedValue[0],
+        onChange: v => setForwardedValue([v, forwardedValue[1]]),
+        onKeyDown: e => {
+          if (disabled) return;
+          if (e.key === 'Enter') {
+            setOpened(!opened);
+          }
+        },
+        onKeyUp: tabOnInputComplete
+      }), /*#__PURE__*/_jsx(Dash, {
+        children: "\u2013"
+      }), /*#__PURE__*/_jsx(StyledTimePicker, {
+        ref: secondTimePickerRef,
+        disabled: disabled,
+        notation: timeNotation,
+        containerProps: timePickerStyle,
+        value: forwardedValue[1],
+        onChange: v => setForwardedValue([forwardedValue[0], v]),
+        onKeyDown: e => {
+          if (disabled) return;
+          if (e.key === 'Enter') {
+            setOpened(!opened);
+          }
+        },
+        onKeyUp: closeOnInputComplete
+      })]
+    }) : /*#__PURE__*/_jsx(StyledTimePicker, {
+      ref: firstTimePickerRef
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      ,
+      autoFocus: true,
+      disabled: disabled,
+      notation: timeNotation,
+      containerProps: timePickerStyle,
+      value: forwardedValue,
+      onChange: setForwardedValue,
+      onKeyDown: e => {
+        if (disabled) return;
+        if (e.key === 'Enter') {
+          setOpened(!opened);
+        }
+      },
+      onKeyUp: closeOnInputComplete
+    })
+  }) : null, [closeOnInputComplete, disabled, forwardedValue, opened, setForwardedValue, showTime, tabOnInputComplete, timeNotation]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(SelectContainer, {
+      opened: opened,
+      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-label": forwardedValue ? getAccessibilityDateLabel(forwardedValue, locale) : undefined,
+      "aria-disabled": disabled,
+      ...rest,
+      ref: mergedContainerRef,
+      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,
+        children: valueIsSpecified ? /*#__PURE__*/_jsx(Title, {
+          disabled: disabled,
+          "aria-hidden": true,
+          children: formattedValue
+        }) : /*#__PURE__*/_jsx(Placeholder, {
+          children: placeholder
+        })
+      }), rightValue && /*#__PURE__*/_jsx(ThemeOverrider, {
+        overrides: t => ({
+          buttonPaddingHorizontal: 0.8,
+          baseHeight: t.selectToggleListItemHeight / t.sizes.small
+        }),
+        children: /*#__PURE__*/_jsx(ToggleRightAddon, {
+          hasPadding: rightHasPaddingValue,
+          children: rightValue
+        })
+      })]
+    }), isMinXs ? /*#__PURE__*/_jsxs(StyledPopover, {
+      trigger: containerRef,
+      placement: "bottom-start",
+      visible: opened,
+      onClose: closeHandler,
+      size: size,
+      children: [calendarComponent, timeComponent]
+    }) : /*#__PURE__*/_jsxs(Modal, {
+      title: placeholder,
+      header: null,
+      footer: null,
+      visible: opened,
+      onClose: closeHandler,
+      size: size,
+      children: [calendarComponent, timeComponent]
+    })]
+  });
+});
+DatePicker.displayName = 'DatePicker';
+export default DatePicker;

package/dist/Drawer/index.d.ts

@@ -0,0 +1,33 @@
+import { type WithSize } from '@os-design/styles';
+import React from 'react';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface DrawerProps extends JsxDivProps, WithSize {
+    /**
+     * The placement of the drawer.
+     * @default right
+     */
+    placement?: 'left' | 'right';
+    /**
+     * The width of the drawer.
+     * @default 15em
+     */
+    width?: string;
+    /**
+     * Whether the drawer is visible.
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * Specifies a callback that will be called when a user clicks the mask.
+     * The callback should set the visible state to false.
+     * @default undefined
+     */
+    onClose?: () => void;
+}
+export declare const useCloseDrawer: () => () => void;
+/**
+ * The side panel that appears from the edge of the screen.
+ */
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export default Drawer;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,QAAQ,EAId,MAAM,mBAAmB,CAAC;AAG3B,OAAO,KAA8C,MAAM,OAAO,CAAC;AAInE,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,WAAY,SAAQ,WAAW,EAAE,QAAQ;IACxD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAmGD,eAAO,MAAM,cAAc,cAF0B,IAEa,CAAC;AAEnE;;GAEG;AACH,QAAA,MAAM,MAAM,oFAmEX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/dist/Drawer/index.js

@@ -0,0 +1,136 @@
+import { css, keyframes } from '@emotion/react';
+import styled from '@emotion/styled';
+import Portal from '@os-design/portal';
+import { enableScrollingStyles, resetFocusStyles, sizeStyles } from '@os-design/styles';
+import { clr, useTheme } from '@os-design/theming';
+import { omitEmotionProps, useBodyScroll, useClosable } from '@os-design/utils';
+import React, { forwardRef, useCallback, useContext } from 'react';
+import FocusLock from 'react-focus-lock';
+import { ModalMask } from '../Modal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DRAWER_CONTAINER_Z_INDEX = 1000;
+const DRAWER_BOX_SHADOW_SIZE_EM = 1;
+const DrawerMask = styled(ModalMask)`
+  z-index: ${DRAWER_CONTAINER_Z_INDEX};
+`;
+const Container = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  z-index: ${DRAWER_CONTAINER_Z_INDEX};
+`;
+const placementLeftFadeIn = keyframes`
+  from { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }
+  to { transform: translateX(0); }
+`;
+const placementLeftFadeOut = keyframes`
+  from { transform: translateX(0); }
+  to { transform: translateX(calc(-100% - ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }
+`;
+const placementRightFadeIn = keyframes`
+  from { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }
+  to { transform: translateX(calc(100vw - 100%)); }
+`;
+const placementRightFadeOut = keyframes`
+  from { transform: translateX(calc(100vw - 100%)); }
+  to { transform: translateX(calc(100vw + ${DRAWER_BOX_SHADOW_SIZE_EM}em)); }
+`;
+const placementLeftVisibleStyles = p => p.placement === 'left' && p.visible && css`
+    animation: ${placementLeftFadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+const placementLeftInvisibleStyles = p => p.placement === 'left' && !p.visible && css`
+    animation: ${placementLeftFadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+const placementRightVisibleStyles = p => p.placement === 'right' && p.visible && css`
+    animation: ${placementRightFadeIn} ${p.theme.transitionDelay}ms forwards;
+  `;
+const placementRightInvisibleStyles = p => p.placement === 'right' && !p.visible && css`
+    animation: ${placementRightFadeOut} ${p.theme.transitionDelay}ms forwards;
+  `;
+const Content = styled('div', omitEmotionProps('placement', 'width', 'visible', 'size'))`
+  ${resetFocusStyles};
+
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: ${p => p.width};
+  max-width: 90%;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  background-color: ${p => clr(p.theme.colorBg)};
+  color: ${p => clr(p.theme.colorText)};
+  box-shadow: 0 0 ${DRAWER_BOX_SHADOW_SIZE_EM}em
+    ${p => clr(p.theme.drawerColorBoxShadow)};
+
+  ${placementLeftVisibleStyles};
+  ${placementLeftInvisibleStyles};
+  ${placementRightVisibleStyles};
+  ${placementRightInvisibleStyles};
+
+  ${enableScrollingStyles('y')};
+  ${sizeStyles};
+`;
+const CloseDrawerContext = /*#__PURE__*/React.createContext(() => {});
+export const useCloseDrawer = () => useContext(CloseDrawerContext);
+
+/**
+ * The side panel that appears from the edge of the screen.
+ */
+const Drawer = /*#__PURE__*/forwardRef(({
+  placement = 'right',
+  width = '15em',
+  visible = false,
+  onClose = () => {},
+  size,
+  children,
+  onClick = () => {},
+  ...rest
+}, ref) => {
+  const {
+    theme
+  } = useTheme();
+  const mounted = useClosable(visible, theme.transitionDelay);
+  useBodyScroll(!visible);
+  const clickHandler = useCallback(e => {
+    e.stopPropagation();
+    onClick(e);
+  }, [onClick]);
+  const keyDownHandler = useCallback(e => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      onClose();
+    }
+  }, [onClose]);
+  if (!mounted) return null;
+  return /*#__PURE__*/_jsxs(Portal, {
+    children: [/*#__PURE__*/_jsx(DrawerMask, {
+      visible: visible
+    }), /*#__PURE__*/_jsx(Container, {
+      onClick: onClose,
+      children: /*#__PURE__*/_jsx(FocusLock, {
+        autoFocus: false,
+        children: /*#__PURE__*/_jsx(CloseDrawerContext.Provider, {
+          value: onClose,
+          children: /*#__PURE__*/_jsx(Content, {
+            placement: placement,
+            width: width,
+            visible: visible,
+            size: size,
+            tabIndex: -1,
+            onKeyDown: keyDownHandler,
+            onClick: clickHandler,
+            role: "dialog",
+            "aria-modal": true,
+            ...rest,
+            ref: ref,
+            children: children
+          })
+        })
+      })
+    })]
+  });
+});
+Drawer.displayName = 'Drawer';
+export default Drawer;

package/dist/Form/FormConfigContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface FormConfigContextProps {
+    /**
+     * The text that is displayed to the right of the label of the optional field.
+     */
+    optionalText: string;
+}
+declare const FormConfigContext: React.Context<FormConfigContextProps>;
+export default FormConfigContext;
+//# sourceMappingURL=FormConfigContext.d.ts.map

package/dist/Form/FormConfigContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormConfigContext.d.ts","sourceRoot":"","sources":["../../src/Form/FormConfigContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,iBAAiB,uCAErB,CAAC;AAIH,eAAe,iBAAiB,CAAC"}

package/dist/Form/FormConfigContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const FormConfigContext = /*#__PURE__*/React.createContext({
+  optionalText: 'optional'
+});
+FormConfigContext.displayName = 'FormConfigContext';
+export default FormConfigContext;

package/dist/Form/index.d.ts

@@ -0,0 +1,15 @@
+import { type WithSize } from '@os-design/styles';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface FormProps extends JsxDivProps, WithSize {
+    /**
+     * The text that is displayed to the right of the label of the optional field.
+     * @default optional
+     */
+    optionalText?: string;
+}
+/**
+ * The wrapper of the form.
+ */
+declare const Form: import("react").ForwardRefExoticComponent<FormProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Form;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Form/index.tsx"],"names":[],"mappings":"AACA,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,SAAU,SAAQ,WAAW,EAAE,QAAQ;IACtD;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAeD;;GAEG;AACH,QAAA,MAAM,IAAI,sGAaT,CAAC;AAIF,eAAe,IAAI,CAAC"}

package/dist/Form/index.js

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import { sizeStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef, useMemo } from 'react';
+import FormConfigContext from './FormConfigContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledForm = styled('div', omitEmotionProps('size'))`
+  max-width: 50em;
+
+  & > * + * {
+    margin-top: 1em;
+  }
+  & > style + * {
+    margin-top: 0;
+  }
+
+  ${sizeStyles};
+`;
+
+/**
+ * The wrapper of the form.
+ */
+const Form = /*#__PURE__*/forwardRef(({
+  optionalText = 'optional',
+  ...rest
+}, ref) => {
+  const memoizedOptionalText = useMemo(() => ({
+    optionalText
+  }), [optionalText]);
+  return /*#__PURE__*/_jsx(FormConfigContext.Provider, {
+    value: memoizedOptionalText,
+    children: /*#__PURE__*/_jsx(StyledForm, {
+      ...rest,
+      ref: ref
+    })
+  });
+});
+Form.displayName = 'Form';
+export default Form;

package/dist/FormDivider/index.d.ts

@@ -0,0 +1,19 @@
+import { type WithSize } from '@os-design/styles';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface FormDividerProps extends JsxDivProps, WithSize {
+    /**
+     * The title that is in the center of the divider.
+     */
+    title: string;
+    /**
+     * The description that is under the title.
+     * @default undefined
+     */
+    description?: string;
+}
+/**
+ * The divider line for separating the various elements of the form.
+ */
+declare const FormDivider: import("react").ForwardRefExoticComponent<FormDividerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FormDivider;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormDivider/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAK9E,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7D,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,QAAQ;IAC7D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuCD;;GAEG;AACH,QAAA,MAAM,WAAW,6GAShB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/FormDivider/index.js

@@ -0,0 +1,61 @@
+import styled from '@emotion/styled';
+import { ellipsisStyles, sizeStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Container = styled('div', omitEmotionProps('size'))`
+  display: flex;
+  align-items: center;
+  margin: 3em 0 1em;
+
+  &::before,
+  &::after {
+    content: '';
+    flex: 1;
+    min-width: 5%;
+    max-width: 50%;
+    border-top: 1px solid ${p => clr(p.theme.formDividerColor)};
+  }
+
+  ${sizeStyles};
+`;
+const Content = styled.div`
+  padding: 0 1.5em;
+  text-align: center;
+  overflow: hidden;
+`;
+const Title = styled.div`
+  color: ${p => clr(p.theme.colorText)};
+  font-size: ${p => p.theme.sizes.large}em;
+  font-weight: 500;
+  ${ellipsisStyles};
+`;
+const Description = styled.div`
+  color: ${p => clr(p.theme.inputColorPlaceholder)};
+  font-size: ${p => p.theme.sizes.small}em;
+  line-height: 1.2;
+  ${ellipsisStyles};
+`;
+
+/**
+ * The divider line for separating the various elements of the form.
+ */
+const FormDivider = /*#__PURE__*/forwardRef(({
+  title,
+  description,
+  ...rest
+}, ref) => /*#__PURE__*/_jsx(Container, {
+  role: "separator",
+  ...rest,
+  ref: ref,
+  children: /*#__PURE__*/_jsxs(Content, {
+    children: [/*#__PURE__*/_jsx(Title, {
+      children: title
+    }), /*#__PURE__*/_jsx(Description, {
+      children: description
+    })]
+  })
+}));
+FormDivider.displayName = 'FormDivider';
+export default FormDivider;

package/dist/FormItem/index.d.ts

@@ -0,0 +1,31 @@
+import { type WithSize } from '@os-design/styles';
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface FormItemProps extends JsxDivProps, WithSize {
+    /**
+     * Label of the field.
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * The help message located at the bottom of the field.
+     * @default undefined
+     */
+    help?: string;
+    /**
+     * The error message located at the bottom of the field.
+     * If specified, the field has a red border.
+     * @default undefined
+     */
+    error?: string | null;
+    /**
+     * Whether the field is optional.
+     * @default false
+     */
+    optional?: boolean;
+}
+/**
+ * The wrapper of the field.
+ */
+declare const FormItem: import("react").ForwardRefExoticComponent<FormItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FormItem;
+//# sourceMappingURL=index.d.ts.map