@os-design/core 1.0.280 → 1.0.282

package/src/Switch/index.tsx

@@ -80,7 +80,7 @@ const hoverStyles = (p) =>
   css`
     @media (hover: hover) {
       &:hover,
-      &:focus {
+      &:focus-visible {
         ${hoverUncheckedStyles(p)};
         ${hoverCheckedStyles(p)};
       }
@@ -161,7 +161,6 @@ const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
       defaultValue,
       onChange = () => {},
       size,
-      onMouseDown = () => {},
       onKeyDown = () => {},
       ...rest
     },
@@ -178,14 +177,6 @@ const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
       setForwardedValue(!forwardedValue);
     }, [disabled, forwardedValue, setForwardedValue]);
 
-    const mouseDownHandler = useCallback(
-      (e) => {
-        onMouseDown(e);
-        e.preventDefault();
-      },
-      [onMouseDown]
-    );
-
     const keyDownHandler = useCallback(
       (e) => {
         if (e.key === ' ') setForwardedValue(!forwardedValue);
@@ -201,7 +192,6 @@ const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
         checked={forwardedValue}
         size={size}
         onClick={clickHandler}
-        onMouseDown={mouseDownHandler}
         onKeyDown={keyDownHandler}
         role='switch'
         aria-checked={forwardedValue}

package/src/TagLink/index.tsx

@@ -25,7 +25,7 @@ const StyledTagLink = styled(
 
   @media (hover: hover) {
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: ${(p) => clr(p.theme.tagColorBgHover)};
     }
   }
@@ -35,16 +35,8 @@ const StyledTagLink = styled(
  * The tag component with a link.
  */
 const TagLink = forwardRef<HTMLAnchorElement, TagLinkProps>(
-  ({ left, right, as, onMouseDown = () => {}, children, ...rest }, ref) => (
-    <StyledTagLink
-      as={as}
-      onMouseDown={(e) => {
-        onMouseDown(e);
-        e.preventDefault();
-      }}
-      {...rest}
-      ref={ref}
-    >
+  ({ left, right, as, children, ...rest }, ref) => (
+    <StyledTagLink as={as} {...rest} ref={ref}>
       {left && <LeftAddon>{left}</LeftAddon>}
       {children}
       {right && <RightAddon>{right}</RightAddon>}

package/src/TimeGrid/index.tsx

@@ -0,0 +1,189 @@
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import { forwardRef } from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { clr } from '@os-design/theming';
+import { resetButtonStyles, transitionStyles } from '@os-design/styles';
+import timeToString from './utils/timeToString.js';
+
+interface Time {
+  hour: number;
+  minute: number;
+}
+
+type JsxDivProps = Omit<
+  JSX.IntrinsicElements['div'],
+  'defaultValue' | 'onChange' | 'ref'
+>;
+export interface TimeGridProps extends JsxDivProps {
+  /**
+   * Times shown in the list in minutes (600 is 10:00).
+   * @default []
+   */
+  times?: Time[];
+  /**
+   * The time format: 12-hour clock or 24-hour clock.
+   * @default false
+   */
+  hour12?: boolean;
+  /**
+   * Number of columns where the times are shown.
+   * @default 3
+   */
+  columns?: number;
+  /**
+   * What times are disabled.
+   * @default undefined
+   */
+  disabledTimes?: Time[];
+  /**
+   * The selected time.
+   * @default undefined
+   */
+  value?: Time | null;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: Time | null;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: Time | null) => void;
+}
+
+interface ContainerProps {
+  columns: number;
+}
+export const Container = styled(
+  'div',
+  omitEmotionProps('columns')
+)<ContainerProps>`
+  display: grid;
+  grid-gap: 0.5em;
+  grid-template-columns: repeat(${(p) => p.columns}, auto);
+  justify-content: space-evenly;
+`;
+
+const selectedStyles = (p) =>
+  p.selected &&
+  css`
+    background-color: ${clr(p.theme.buttonPrimaryColorBg)};
+    color: ${clr(p.theme.buttonPrimaryColorText)};
+
+    @media (hover: hover) {
+      &:hover,
+      &:focus-visible {
+        background-color: ${clr(p.theme.buttonPrimaryColorBgHover)};
+      }
+    }
+  `;
+
+const disabledStyles = (p) =>
+  p.disabled &&
+  css`
+    background-color: ${clr(p.theme.colorBg)} !important;
+    color: ${clr(p.theme.buttonDisabledGhostColorText)};
+    cursor: not-allowed;
+    ${p.selected &&
+    css`
+      background-color: ${clr(p.theme.buttonDisabledPrimaryColorBg)} !important;
+      color: ${clr(p.theme.buttonDisabledPrimaryColorText)};
+    `}
+  `;
+
+interface TimeProps {
+  selected: boolean;
+  disabled: boolean;
+}
+const Time = styled(
+  'button',
+  omitEmotionProps('selected', 'disabled')
+)<TimeProps>`
+  ${resetButtonStyles};
+  cursor: pointer;
+  user-select: none;
+  font-size: 1em;
+  line-height: 1;
+  white-space: nowrap;
+
+  height: ${(p) => p.theme.menuItemHeight}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 0 0.8em;
+
+  background-color: ${(p) => clr(p.theme.colorBg)};
+  color: ${(p) => clr(p.theme.colorText)};
+  border-radius: ${(p) => p.theme.borderRadius}em;
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus-visible {
+      background-color: ${(p) => clr(p.theme.menuItemSelectedColorBg)};
+    }
+  }
+
+  ${selectedStyles};
+  ${disabledStyles};
+  ${transitionStyles('background-color')};
+`;
+
+/**
+ * The component to choose a time in a grid.
+ */
+const TimeGrid = forwardRef<HTMLDivElement, TimeGridProps>(
+  (
+    {
+      times = [],
+      hour12 = false,
+      columns = 3,
+      disabledTimes = [],
+      value,
+      defaultValue,
+      onChange = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    return (
+      <Container columns={columns} {...rest} ref={ref}>
+        {times.map((time) => {
+          const key = time.hour * 60 + time.minute;
+          const disabled =
+            disabledTimes.findIndex(
+              ({ hour, minute }) => hour === time.hour && minute === time.minute
+            ) >= 0;
+          return (
+            <div key={key}>
+              <Time
+                selected={time === forwardedValue}
+                disabled={disabled}
+                onClick={() => {
+                  if (!disabled) {
+                    setForwardedValue(time);
+                  }
+                }}
+              >
+                {timeToString(time, hour12)}
+              </Time>
+            </div>
+          );
+        })}
+      </Container>
+    );
+  }
+);
+
+TimeGrid.displayName = 'TimeGrid';
+
+export default TimeGrid;

package/src/TimeGrid/utils/convertHours.ts

@@ -0,0 +1,15 @@
+export type Meridiem = 'am' | 'pm';
+
+export const convertTo12hours = (hours: number): [number, Meridiem] => {
+  if (hours >= 12) {
+    const hours12 = hours % 12;
+    return [hours12 === 0 ? 12 : hours12, 'pm'];
+  } else {
+    return [hours === 0 ? 12 : hours, 'am'];
+  }
+};
+
+export const convertTo24hours = (hours: number, meridiem: Meridiem): number => {
+  const h = hours === 12 ? 0 : hours;
+  return h + (meridiem === 'am' ? 0 : 12);
+};

package/src/TimeGrid/utils/createTimes.ts

@@ -0,0 +1,20 @@
+export interface Time {
+  hour: number;
+  minute: number;
+}
+
+const createTimes = (from: Time, to: Time, stepMinutes: number) => {
+  const min = from.hour * 60 + from.minute;
+  const max = to.hour * 60 + to.minute;
+  const times: Time[] = [];
+
+  for (let i = min; i <= max - stepMinutes; i += stepMinutes) {
+    const hour = Math.floor(i / 60);
+    const minute = i % 60;
+    times.push({ hour, minute });
+  }
+
+  return times;
+};
+
+export default createTimes;

package/src/TimeGrid/utils/timeToString.ts

@@ -0,0 +1,17 @@
+import { convertTo12hours } from './convertHours.js';
+import type { Time } from './createTimes.js';
+
+const timeToString = (time: Time, hour12: boolean) => {
+  const minute = time.minute.toString().padStart(2, '0');
+
+  if (hour12) {
+    const [h, meridiem] = convertTo12hours(time.hour);
+    const hour = h.toString().padStart(2, '0');
+    return `${hour}:${minute} ${meridiem}`;
+  }
+
+  const hour = time.hour.toString().padStart(2, '0');
+  return `${hour}:${minute}`;
+};
+
+export default timeToString;

package/src/TimeGridSkeleton/index.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import { forwardRef } from 'react';
+import Skeleton from '../Skeleton/index.js';
+import { Container } from '../TimeGrid/index.js';
+
+export interface TimeGridSkeletonProps {
+  /**
+   * The number of times.
+   * @default 8
+   */
+  count?: number;
+  /**
+   * Number of columns where the times are shown.
+   * @default 3
+   */
+  columns?: number;
+}
+
+const Time = styled.div`
+  height: ${(p) => p.theme.menuItemHeight}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 0 0.8em;
+`;
+
+let key = 0;
+
+/**
+ * Provides a time grid placeholder while a user waits for the content to load.
+ */
+const TimeGridSkeleton = forwardRef<HTMLDivElement, TimeGridSkeletonProps>(
+  ({ count = 8, columns = 3 }, ref) => (
+    <Container columns={columns} ref={ref}>
+      {Array(count)
+        .fill(0)
+        .map(() => (
+          <Time key={key++}>
+            <Skeleton width='2.5em' />
+          </Time>
+        ))}
+    </Container>
+  )
+);
+
+TimeGridSkeleton.displayName = 'TimeGridSkeleton';
+
+export default TimeGridSkeleton;

package/src/TimeList/index.tsx

@@ -0,0 +1,135 @@
+import { omitEmotionProps, useForwardedState } from '@os-design/utils';
+import { forwardRef } from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { clr } from '@os-design/theming';
+import { resetButtonStyles, transitionStyles } from '@os-design/styles';
+import timeToString from './utils/timeToString.js';
+
+interface Time {
+  hour: number;
+  minute: number;
+}
+
+type JsxDivProps = Omit<
+  JSX.IntrinsicElements['div'],
+  'defaultValue' | 'onChange' | 'ref'
+>;
+export interface TimeListProps extends JsxDivProps {
+  /**
+   * Times shown in the list.
+   * @default []
+   */
+  times?: Time[];
+  /**
+   * The time format: 12-hour clock or 24-hour clock.
+   * @default false
+   */
+  hour12?: boolean;
+  /**
+   * The selected time.
+   * @default undefined
+   */
+  value?: Time | null;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: Time | null;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: Time | null) => void;
+}
+
+const selectedStyles = (p) =>
+  p.selected &&
+  css`
+    background-color: ${clr(p.theme.buttonPrimaryColorBg)};
+    color: ${clr(p.theme.buttonPrimaryColorText)};
+
+    @media (hover: hover) {
+      &:hover,
+      &:focus-visible {
+        background-color: ${clr(p.theme.buttonPrimaryColorBgHover)};
+      }
+    }
+  `;
+
+interface TimeProps {
+  selected: boolean;
+}
+const Time = styled('button', omitEmotionProps('selected'))<TimeProps>`
+  ${resetButtonStyles};
+  cursor: pointer;
+  user-select: none;
+  font-size: 1em;
+  line-height: 1;
+
+  width: 100%;
+  height: ${(p) => p.theme.menuItemHeight}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 0 0.8em;
+
+  background-color: ${(p) => clr(p.theme.colorBg)};
+  color: ${(p) => clr(p.theme.colorText)};
+
+  @media (hover: hover) {
+    &:hover,
+    &:focus-visible {
+      background-color: ${(p) => clr(p.theme.menuItemSelectedColorBg)};
+    }
+  }
+
+  ${selectedStyles};
+  ${transitionStyles('background-color')};
+`;
+
+/**
+ * The component to choose a time in a list.
+ */
+const TimeList = forwardRef<HTMLDivElement, TimeListProps>(
+  (
+    {
+      times = [],
+      hour12 = false,
+      value,
+      defaultValue,
+      onChange = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    return (
+      <div {...rest} ref={ref}>
+        {times.map((time) => {
+          const key = time.hour * 60 + time.minute;
+          return (
+            <Time
+              key={key}
+              selected={time === forwardedValue}
+              onClick={() => setForwardedValue(time)}
+            >
+              {timeToString(time, hour12)}
+            </Time>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+TimeList.displayName = 'TimeList';
+
+export default TimeList;

package/src/TimeList/utils/convertHours.ts

@@ -0,0 +1,15 @@
+export type Meridiem = 'am' | 'pm';
+
+export const convertTo12hours = (hours: number): [number, Meridiem] => {
+  if (hours >= 12) {
+    const hours12 = hours % 12;
+    return [hours12 === 0 ? 12 : hours12, 'pm'];
+  } else {
+    return [hours === 0 ? 12 : hours, 'am'];
+  }
+};
+
+export const convertTo24hours = (hours: number, meridiem: Meridiem): number => {
+  const h = hours === 12 ? 0 : hours;
+  return h + (meridiem === 'am' ? 0 : 12);
+};

package/src/TimeList/utils/createTimes.ts

@@ -0,0 +1,20 @@
+export interface Time {
+  hour: number;
+  minute: number;
+}
+
+const createTimes = (from: Time, to: Time, stepMinutes: number) => {
+  const min = from.hour * 60 + from.minute;
+  const max = to.hour * 60 + to.minute;
+  const times: Time[] = [];
+
+  for (let i = min; i <= max - stepMinutes; i += stepMinutes) {
+    const hour = Math.floor(i / 60);
+    const minute = i % 60;
+    times.push({ hour, minute });
+  }
+
+  return times;
+};
+
+export default createTimes;

package/src/TimeList/utils/timeToString.ts

@@ -0,0 +1,17 @@
+import { convertTo12hours } from './convertHours.js';
+import type { Time } from './createTimes.js';
+
+const timeToString = (time: Time, hour12: boolean) => {
+  const minute = time.minute.toString().padStart(2, '0');
+
+  if (hour12) {
+    const [h, meridiem] = convertTo12hours(time.hour);
+    const hour = h.toString().padStart(2, '0');
+    return `${hour}:${minute} ${meridiem}`;
+  }
+
+  const hour = time.hour.toString().padStart(2, '0');
+  return `${hour}:${minute}`;
+};
+
+export default timeToString;

package/src/TimeListSkeleton/index.tsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+import { forwardRef } from 'react';
+import Skeleton from '../Skeleton/index.js';
+
+export interface TimeListSkeletonProps {
+  /**
+   * The number of times.
+   * @default 8
+   */
+  count?: number;
+}
+
+const Time = styled.div`
+  height: ${(p) => p.theme.menuItemHeight}em;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  padding: 0 0.8em;
+`;
+
+let key = 0;
+
+/**
+ * Provides a time list placeholder while a user waits for the content to load.
+ */
+const TimeListSkeleton = forwardRef<HTMLDivElement, TimeListSkeletonProps>(
+  ({ count = 8 }, ref) => (
+    <div ref={ref}>
+      {Array(count)
+        .fill(0)
+        .map(() => (
+          <Time key={key++}>
+            <Skeleton width='2.5em' />
+          </Time>
+        ))}
+    </div>
+  )
+);
+
+TimeListSkeleton.displayName = 'TimeListSkeleton';
+
+export default TimeListSkeleton;

package/src/index.ts

@@ -8,6 +8,7 @@ export { default as Button } from './Button/index.js';
 export { default as ButtonLink } from './ButtonLink/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as CheckboxSkeleton } from './CheckboxSkeleton/index.js';
+export { default as DateCalendar } from './DateCalendar/index.js';
 export { default as DatePicker } from './DatePicker/index.js';
 export { default as Drawer } from './Drawer/index.js';
 export { default as Form } from './Form/index.js';
@@ -19,6 +20,7 @@ export { default as HeaderSkeleton } from './HeaderSkeleton/index.js';
 export { default as Image } from './Image/index.js';
 export { default as ImageSkeleton } from './ImageSkeleton/index.js';
 export { default as Input } from './Input/index.js';
+export { default as InputDateUnstyled } from './InputDateUnstyled/index.js';
 export { default as InputNumber } from './InputNumber/index.js';
 export { default as InputPassword } from './InputPassword/index.js';
 export { default as InputSearch } from './InputSearch/index.js';
@@ -63,6 +65,10 @@ export { default as TagSkeleton } from './TagSkeleton/index.js';
 export { default as TextArea } from './TextArea/index.js';
 export { default as TextAreaSkeleton } from './TextAreaSkeleton/index.js';
 export { default as ThemeSwitcher } from './ThemeSwitcher/index.js';
+export { default as TimeGrid } from './TimeGrid/index.js';
+export { default as TimeGridSkeleton } from './TimeGridSkeleton/index.js';
+export { default as TimeList } from './TimeList/index.js';
+export { default as TimeListSkeleton } from './TimeListSkeleton/index.js';
 export { default as Video } from './Video/index.js';
 
 export * from './Alert/index.js';
@@ -75,6 +81,7 @@ export * from './Button/index.js';
 export * from './ButtonLink/index.js';
 export * from './Checkbox/index.js';
 export * from './CheckboxSkeleton/index.js';
+export * from './DateCalendar/index.js';
 export * from './DatePicker/index.js';
 export * from './Drawer/index.js';
 export * from './Form/index.js';
@@ -85,6 +92,7 @@ export * from './HeaderSkeleton/index.js';
 export * from './Image/index.js';
 export * from './ImageSkeleton/index.js';
 export * from './Input/index.js';
+export * from './InputDateUnstyled/index.js';
 export * from './InputNumber/index.js';
 export * from './InputPassword/index.js';
 export * from './InputSearch/index.js';
@@ -128,4 +136,8 @@ export * from './TagSkeleton/index.js';
 export * from './TextArea/index.js';
 export * from './TextAreaSkeleton/index.js';
 export * from './ThemeSwitcher/index.js';
+export * from './TimeGrid/index.js';
+export * from './TimeGridSkeleton/index.js';
+export * from './TimeList/index.js';
+export * from './TimeListSkeleton/index.js';
 export * from './Video/index.js';

package/dist/DatePicker/DatePickerCalendar.d.ts

@@ -1,11 +0,0 @@
-import { type DatePickerLocale } from '@os-design/date-picker-utils';
-import React from 'react';
-interface DatePickerCalendarProps {
-    firstDayOfWeek: 'monday' | 'saturday' | 'sunday';
-    locale: DatePickerLocale;
-    value?: Date | [Date, Date] | null;
-    onSelect?: (value: Date) => void;
-}
-declare const DatePickerCalendar: React.FC<DatePickerCalendarProps>;
-export default DatePickerCalendar;
-//# sourceMappingURL=DatePickerCalendar.d.ts.map

package/dist/DatePicker/DatePickerCalendar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DatePickerCalendar.d.ts","sourceRoot":"","sources":["../../src/DatePicker/DatePickerCalendar.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,gBAAgB,EAGtB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,KAKN,MAAM,OAAO,CAAC;AAGf,UAAU,uBAAuB;IAC/B,cAAc,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAC;IACjD,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CAClC;AAuFD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkHzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}