@onesy/ui-react 1.0.0

package/esm/CalendarWeek/CalendarWeek.js

@@ -0,0 +1,486 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["date", "times", "events", "onOpen", "onTimeClick", "render", "statuses", "displayTime", "day", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { cleanValue, is, textToInnerHTML } from '@onesy/utils';
+import { style as styleMethod, classNames, useOnesyTheme, colors } from '@onesy/style-react';
+import { OnesyDate, add, endOf, format, set, startOf } from '@onesy/date';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import TooltipElement from '../Tooltip';
+import { formats, staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    color: theme.methods.palette.color.value('primary', 10),
+    background: theme.palette.background.default.primary
+  },
+  weekDay: {
+    width: '44px',
+    height: '44px',
+    borderRadius: '50%'
+  },
+  today: {
+    background: theme.palette.color.primary[40],
+    color: '#fff'
+  },
+  days: {
+    overflow: 'auto hidden'
+  },
+  day: {
+    minWidth: '184px',
+    height: '134vh',
+    width: 'calc((100% / 7) - 106px)'
+  },
+  dayBody: {
+    position: 'relative',
+    borderLeft: `1px solid ${theme.palette.light ? '#dadada' : '#575757'}`
+  },
+  dayHeader: {
+    height: '78px',
+    padding: '4px'
+  },
+  hours: {
+    position: 'sticky',
+    top: '0px',
+    left: '0px',
+    width: '44px',
+    height: '134vh',
+    flex: '0 0 auto',
+    marginRight: '8px',
+    background: theme.palette.background.default.primary,
+    zIndex: 14
+  },
+  hourWrapper: {
+    position: 'relative'
+  },
+  hour: {
+    width: '50px',
+    alignSelf: 'flex-start',
+    left: '0px',
+    position: 'absolute',
+    top: '0',
+    marginTop: '-8px',
+    zIndex: '40',
+    borderRadius: theme.methods.shape.radius.value(0.5)
+  },
+  guide: {
+    position: 'absolute',
+    left: '-9px',
+    height: '1px',
+    width: 'calc(100% + 9px)',
+    background: theme.palette.light ? '#dadada' : '#575757'
+  },
+  guidelineHour: {
+    position: 'absolute',
+    left: '0px',
+    height: '2px',
+    transform: 'translateY(-50%)',
+    background: theme.palette.color.tertiary[50],
+    zIndex: 14,
+    '&::before': {
+      position: 'absolute',
+      content: "''",
+      width: '12px',
+      height: '12px',
+      borderRadius: '50%',
+      background: theme.palette.color.tertiary[50],
+      top: '-5px',
+      left: '-6.5px'
+    }
+  },
+  range: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    cursor: 'pointer',
+    zIndex: 1,
+    transition: theme.methods.transitions.make('box-shadow'),
+    overflow: 'hidden',
+    '& > *': {
+      whiteSpace: 'pre-wrap',
+      transition: theme.methods.transitions.make('opacity')
+    },
+    '& > .onesy-work-day-time': {
+      opacity: 0
+    },
+    '&:hover': {
+      zIndex: 14,
+      boxShadow: theme.shadows.values.default[2],
+      '& > .onesy-work-day-time': {
+        opacity: 1
+      }
+    }
+  },
+  time: {
+    position: 'relative',
+    zIndex: 1,
+    padding: '0px 2px',
+    borderRadius: 2
+  }
+}), {
+  name: 'onesy-CalendarWeek'
+});
+const CalendarWeek = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCalendarWeek?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
+  const {
+      date,
+      times: timesProps,
+      events,
+      onOpen,
+      onTimeClick,
+      render,
+      statuses = {},
+      displayTime = true,
+      day: dayProp,
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [now, setNow] = React.useState(new OnesyDate());
+  const refs = {
+    date: React.useRef(date),
+    displayTime: React.useRef(displayTime),
+    interval: React.useRef(undefined),
+    days: React.useRef({}),
+    overlaping: React.useRef({}),
+    statuses: React.useRef(statuses)
+  };
+  refs.date.current = date;
+  refs.displayTime.current = displayTime;
+  refs.statuses.current = statuses;
+  const times = React.useMemo(() => {
+    if (events) {
+      return [{
+        dates: {
+          active: true,
+          values: (is('array', events) ? events : [events]).filter(Boolean)
+        }
+      }];
+    }
+    return (is('array', timesProps) ? timesProps : [timesProps]).filter(Boolean);
+  }, [events, timesProps]);
+  const rangeShade = theme.palette.light ? 60 : 40;
+  React.useEffect(() => {
+    // 1 minute
+    refs.interval.current = setInterval(() => {
+      setNow(new OnesyDate());
+    }, 60 * 1e3);
+    return () => {
+      clearInterval(refs.interval.current);
+    };
+  }, []);
+  const getDates = React.useCallback(available => {
+    const values = available.dates?.values || [];
+    return values.map(item => {
+      if (item.entire) {
+        if (item.from) {
+          let from = new OnesyDate(item.from);
+          let to;
+          if (['day', 'week', 'month', 'year'].includes(item.entire)) from = startOf(from, 'day');
+          if (item.entire === 'minute') from = startOf(from, 'minute');
+          if (item.entire === 'hour') from = startOf(from, 'hour');
+          to = endOf(from, item.entire);
+          item.from = from.milliseconds;
+          item.to = to.milliseconds;
+        }
+      }
+      return item;
+    });
+  }, [times]);
+  const getColor = React.useCallback(item => {
+    let palette = theme.palette.color.neutral;
+    if (item?.status === 'working') palette = theme.palette.color.success;
+    if (item?.status === 'not-working') palette = theme.palette.color.info;
+    if (item?.status === 'break') palette = theme.palette.color.warning;
+    if (item?.status === 'pending') palette = theme.methods.color(colors.yellow[50]);
+    if (item?.status === 'rescheduled') palette = theme.methods.color(colors.purple[50]);
+    if (item?.status === 'canceled') palette = theme.palette.color.error;
+    if (item?.status === 'other') palette = theme.palette.color.neutral;
+    if (item.color) palette = theme.methods.color(item.color);
+    return palette[rangeShade];
+  }, [rangeShade, colors, theme]);
+  const itemToText = React.useCallback(item => {
+    if (item === 'pending') return 'scheduled';
+    if (item === 'not-count-workout-session') return `don't count workout session`;
+    return item;
+  }, []);
+  const renderTimes = function (day, valuesAll) {
+    let weekly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    let itemDay = arguments.length > 3 ? arguments[3] : undefined;
+    if (itemDay !== undefined && !itemDay?.active) return null;
+    if (weekly) {
+      const ends_at = itemDay?.ends_at ? new OnesyDate(itemDay.ends_at) : undefined;
+      if (ends_at) {
+        const day_StartDay = startOf(day, 'day');
+        const ends_at_StartDay = startOf(ends_at, 'day');
+        if (day_StartDay.milliseconds >= ends_at_StartDay.milliseconds) return null;
+      }
+    }
+    const dayStartOfDay = startOf(day, 'day');
+    const dayDate = format(day, formats.date);
+    const values = valuesAll?.filter(item => {
+      const from = new OnesyDate(item.from);
+      const fromStartOfDay = startOf(from, 'day');
+      const to = new OnesyDate(item.to);
+      const toStartOfDay = startOf(to, 'day');
+      return [undefined, true].includes(refs.statuses.current[item.status || 'working']) && (weekly ? weekly :
+      // from
+      (dayDate === format(from, formats.date) || dayStartOfDay.milliseconds > fromStartOfDay.milliseconds) && (
+      // to
+
+      dayDate === format(to, formats.date) || dayStartOfDay.milliseconds < toStartOfDay.milliseconds));
+    });
+    const elements = [];
+    const renderTo = valueNew => {
+      if (valueNew === '23:59') return '24:00';
+      return valueNew;
+    };
+    values?.forEach((item, index) => {
+      if (!(item.from && item.to)) return;
+      let from = new OnesyDate(item.from);
+      let to = new OnesyDate(item.to);
+      if (!weekly) {
+        const fromStartOfDay = startOf(from, 'day');
+        const toStartOfDay = startOf(to, 'day');
+        if (dayStartOfDay?.milliseconds > fromStartOfDay?.milliseconds && (dayDate === format(to, formats.date) || dayStartOfDay.milliseconds < toStartOfDay.milliseconds)) item.from = startOf(from, 'day').milliseconds;
+        if ((dayDate === format(from, formats.date) || dayStartOfDay.milliseconds > fromStartOfDay.milliseconds) && dayStartOfDay?.milliseconds < toStartOfDay?.milliseconds) item.to = endOf(to, 'day').milliseconds;
+      }
+      from = new OnesyDate(item.from);
+      to = new OnesyDate(item.to);
+      const itemDate = format(day, formats.date);
+      const top = +(100 * ((from.hour * 60 + from.minute) / (24 * 60))).toFixed(4);
+      const bottom = +(100 - 100 * ((to.hour * 60 + (to.minute === 59 ? 60 : to.minute)) / (24 * 60))).toFixed(4);
+      if (!refs.days.current[itemDate]) refs.days.current[itemDate] = [];
+      if (!refs.overlaping.current[itemDate]) refs.overlaping.current[itemDate] = [];
+      const bottom_ = 100 - bottom;
+
+      // intersections
+      const overlaps = refs.days.current[itemDate].filter(_ref => {
+        let [itemTop, itemBottom] = _ref;
+        return !(top >= itemBottom || bottom_ <= itemTop);
+      });
+      let level = 0;
+      if (overlaps.length) {
+        level = refs.overlaping.current[itemDate].filter(_ref2 => {
+          let [itemTop, itemBottom] = _ref2;
+          return !(top >= itemBottom || bottom_ <= itemTop);
+        }).length + 1;
+        refs.overlaping.current[itemDate].push([top, bottom_]);
+      }
+      refs.days.current[itemDate].push([top, bottom_]);
+      const minimal = 100 - bottom - top < 5;
+      const background = getColor(item);
+      const WrapperElement = item.status ? Tooltip : React.Fragment;
+      const WrapperElementProps = item.status ? {
+        name: cleanValue(itemToText(item.status), {
+          capitalize: true
+        }),
+        color: getColor(item)
+      } : undefined;
+      const itemProps = {
+        onClicl: event => onOpen(_objectSpread(_objectSpread({}, item), {}, {
+          day,
+          weekly
+        }), event),
+        className: classes.range
+      };
+      const style = _objectSpread({
+        top: `${top}%`,
+        bottom: `${bottom}%`,
+        color: theme.methods.palette.color.text(background),
+        background,
+        left: `calc(0px + ${level * 10}px)`
+      }, top === 0 && bottom === 0 && {
+        border: 'none'
+      });
+      const elementRendered = is('function', render) ? render(item, dayProp ? 'day' : 'week') : /*#__PURE__*/React.createElement(Line, _extends({
+        key: index,
+        gap: 0.5,
+        align: "center",
+        justify: "center"
+      }, itemProps), !minimal && refs.displayTime.current && /*#__PURE__*/React.createElement(Type, {
+        version: "l2",
+        weight: 300,
+        align: "center",
+        className: classes.time,
+        style: {
+          background: getColor(item)
+        }
+      }, format(from, 'hh:mm a'), " - ", renderTo(format(to, 'hh:mm a'))), item.description && /*#__PURE__*/React.createElement(Type, {
+        version: "b2",
+        dangerouslySetInnerHTML: {
+          __html: textToInnerHTML(item.description)
+        },
+        style: {
+          maxHeight: 24,
+          maxWidth: '90%'
+        }
+      }));
+      elements.push(/*#__PURE__*/React.createElement(WrapperElement, WrapperElementProps, /*#__PURE__*/React.cloneElement(elementRendered, _objectSpread(_objectSpread({}, itemProps), {}, {
+        className: classNames([itemProps.className, elementRendered.props?.className]),
+        style: _objectSpread(_objectSpread({}, style), elementRendered.props?.style)
+      }))));
+    });
+    return elements;
+  };
+  const onTimeClickMethod = React.useCallback((itemDay, event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const relativeY = event.clientY - rect.top;
+    const relativePercentage = relativeY / rect.height * 100;
+    let timeDate = set(Math.floor(24 * (relativePercentage / 100)), 'hour', itemDay);
+
+    // start of the hour
+    timeDate = startOf(timeDate, 'hour');
+    onTimeClick?.(timeDate, dayProp ? 'day' : 'week', event);
+  }, []);
+  const timesUI = React.useCallback(dayDate => {
+    // clean up
+    refs.days.current = {};
+    refs.overlaping.current = {};
+    const day = dayDate.dayWeek === 0 ? 7 : dayDate.dayWeek;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, times.map(item => /*#__PURE__*/React.createElement(React.Fragment, null, item.weekly && renderTimes(dayDate, item.weekly.days[day]?.values, true, item.weekly.days[day]), item.dates && renderTimes(dayDate, getDates(item), false))));
+  }, [theme, times, date]);
+  const hours = React.useMemo(() => {
+    return Array.from({
+      length: 24
+    }).map((item, index) => set(index, 'hour', date));
+  }, [date]);
+  const days = React.useMemo(() => {
+    const weekStartDate = set(4, 'hour', startOf(date, 'week'));
+    return Array.from({
+      length: 7
+    }).map((_, index) => add(index, 'day', weekStartDate));
+  }, [date]);
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    gap: 1.5,
+    flex: true,
+    fullWidth: true,
+    className: classNames([staticClassName('CalendarWeek', theme) && ['onesy-CalendarWeek-root', dayProp && 'onesy-CalendarWeek-prop-day'], className, classes.root])
+  }, other), /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "stretch",
+    flex: true,
+    fullWidth: true,
+    className: classes.days
+  }, /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    align: "center",
+    fullWidth: true,
+    className: classNames(['onesy-hours', classes.hours])
+  }, /*#__PURE__*/React.createElement(Line, {
+    className: classes.dayHeader
+  }), /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    flex: true,
+    fullWidth: true,
+    className: classes.hourWrapper
+  }, hours.map((itemHour, index) => /*#__PURE__*/React.createElement(Line, {
+    key: index,
+    gap: 1,
+    align: "unset",
+    className: classes.hour,
+    style: {
+      top: `${100 / 24 * index}%`
+    }
+  }, /*#__PURE__*/React.createElement(Type, {
+    version: "b3",
+    whiteSpace: "nowrap"
+  }, format(itemHour, 'h A')))))), dayProp && /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "column",
+    align: "center",
+    flex: true,
+    className: classNames(['onesy-day', classes.day])
+  }, /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    align: "center",
+    fullWidth: true,
+    className: classes.dayHeader
+  }, /*#__PURE__*/React.createElement(Type, {
+    version: "l1",
+    weight: 200
+  }, format(date, 'd')), /*#__PURE__*/React.createElement(Line, {
+    align: "center",
+    justify: "center",
+    className: classNames([classes.weekDay, date.year === now.year && date.dayYear === now.dayYear && classes.today])
+  }, /*#__PURE__*/React.createElement(Type, {
+    version: "h3",
+    weight: 400,
+    align: "center"
+  }, format(date, 'D')))), /*#__PURE__*/React.createElement(Line, {
+    className: classes.dayBody,
+    flex: true,
+    fullWidth: true,
+    onClick: event => onTimeClickMethod(date, event)
+  }, timesUI(date), hours.map((itemGuide, indexGuide) => /*#__PURE__*/React.createElement(Line, {
+    key: indexGuide,
+    className: classes.guide,
+    fullWidth: true,
+    style: {
+      top: `${100 / 24 * indexGuide}%`
+    }
+  })), format(now, formats.date) === format(date, formats.date) && /*#__PURE__*/React.createElement(Line, {
+    className: classes.guidelineHour,
+    fullWidth: true,
+    style: {
+      top: `${(now.hour * 60 + now.minute) / (24 * 60) * 100}%`
+    }
+  }))), !dayProp && days.map((itemDay, index) => {
+    return /*#__PURE__*/React.createElement(Line, {
+      key: index,
+      gap: 0,
+      direction: "column",
+      align: "center",
+      flex: true,
+      className: classNames(['onesy-day', classes.day])
+    }, /*#__PURE__*/React.createElement(Line, {
+      gap: 0,
+      align: "center",
+      fullWidth: true,
+      className: classes.dayHeader
+    }, /*#__PURE__*/React.createElement(Type, {
+      version: "l1",
+      weight: 200
+    }, format(itemDay, 'd')), /*#__PURE__*/React.createElement(Line, {
+      align: "center",
+      justify: "center",
+      className: classNames([classes.weekDay, itemDay.year === now.year && itemDay.dayYear === now.dayYear && classes.today])
+    }, /*#__PURE__*/React.createElement(Type, {
+      version: "h3",
+      weight: 400,
+      align: "center"
+    }, format(itemDay, 'D')))), /*#__PURE__*/React.createElement(Line, {
+      className: classes.dayBody,
+      flex: true,
+      fullWidth: true,
+      onClick: event => onTimeClickMethod(itemDay, event)
+    }, timesUI(itemDay), hours.map((itemGuide, indexGuide) => /*#__PURE__*/React.createElement(Line, {
+      key: indexGuide,
+      className: classes.guide,
+      fullWidth: true,
+      style: {
+        top: `${100 / 24 * indexGuide}%`
+      }
+    })), format(now, formats.date) === format(itemDay, formats.date) && /*#__PURE__*/React.createElement(Line, {
+      className: classes.guidelineHour,
+      fullWidth: true,
+      style: {
+        top: `${(now.hour * 60 + now.minute) / (24 * 60) * 100}%`
+      }
+    })));
+  })));
+});
+CalendarWeek.displayName = 'onesy-CalendarWeek';
+export default CalendarWeek;

package/esm/CalendarWeek/index.js

@@ -0,0 +1 @@
+export { default } from './CalendarWeek';

package/esm/Card/Card.js

@@ -0,0 +1,119 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "version", "elevation", "focus", "selected", "button", "href", "disabled", "onFocus", "onBlur", "InteractionProps", "Component", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import SurfaceElement from '../Surface';
+import InteractionElement from '../Interaction';
+import LineElement from '../Line';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative',
+    borderRadius: `${theme.shape.radius.unit * 3}px`,
+    maxWidth: '340px',
+    overflow: 'hidden',
+    transition: theme.methods.transitions.make('border-radius'),
+    // reset
+    textDecoration: 'none'
+  },
+  button: {
+    cursor: 'pointer',
+    userSelect: 'none',
+    '&:active': {
+      borderRadius: `${theme.shape.radius.unit * 6}px`
+    }
+  },
+  href: {
+    '&:active': {
+      borderRadius: `${theme.shape.radius.unit * 6}px`
+    }
+  },
+  disabled: {
+    cursor: 'pointer',
+    pointerEvents: 'none',
+    opacity: theme.palette.visual_contrast.default.opacity.disabled
+  }
+}), {
+  name: 'onesy-Card'
+});
+const Card = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCard?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
+  const {
+      tonal = true,
+      color: color_ = 'primary',
+      version = 'filled',
+      elevation: elevation_ = 0,
+      focus: focus_,
+      selected,
+      button,
+      href,
+      disabled,
+      onFocus: onFocus_,
+      onBlur: onBlur_,
+      InteractionProps,
+      Component = props.href ? 'a' : 'div',
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [focus, setFocus] = React.useState(focus_ !== undefined ? focus_ : false);
+  let color = color_;
+  let elevation = elevation_;
+  if (disabled) {
+    color = 'neutral';
+    elevation = 0;
+  }
+  const onFocus = React.useCallback(event => {
+    if (focus_ === undefined && !disabled) {
+      setFocus(true);
+      if (is('function', onFocus_)) onFocus_(event);
+    }
+  }, [focus_, disabled, onFocus_]);
+  const onBlur = React.useCallback(event => {
+    if (focus_ === undefined && !disabled) {
+      setFocus(false);
+      if (is('function', onBlur_)) onBlur_(event);
+    }
+  }, [focus_, disabled, onBlur_]);
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: ref,
+    gap: 0,
+    tabIndex: (href || button) && !disabled ? 0 : undefined,
+    color: color,
+    tonal: tonal,
+    version: version,
+    elevation: elevation,
+    href: href,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    AdditionalProps: {
+      Component
+    },
+    Component: Line,
+    className: classNames([staticClassName('Card', theme) && [`onesy-Card-root`, focus && `onesy-Card-focus`, disabled && `onesy-Card-disabled`], className, classes.root, href && classes.href, button && classes.button, disabled && [classes.disabled, classes[`disabled_version_${version}`]]])
+  }, other), (href || button) && /*#__PURE__*/React.createElement(Interaction, _extends({
+    border: false,
+    pulse: focus,
+    selected: selected
+  }, InteractionProps)), React.Children.toArray(children).map(item => (/*#__PURE__*/React.cloneElement(item, {
+    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
+    version: item.props.version !== undefined ? item.props.version : version,
+    elevation: item.props.elevation !== undefined ? item.props.elevation : elevation,
+    color: item.props.color !== undefined ? item.props.color : color
+  }))));
+});
+Card.displayName = 'onesy-Card';
+export default Card;

package/esm/Card/index.js

@@ -0,0 +1 @@
+export { default } from './Card';

package/esm/CardButton/CardButton.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["focus", "selected", "href", "disabled", "onFocus", "onBlur", "InteractionProps", "Component", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import InteractionElement from '../Interaction';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    cursor: 'pointer',
+    userSelect: 'none'
+  }
+}), {
+  name: 'onesy-CardButton'
+});
+const CardButton = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyCardButton?.props?.default), props_), [props_]);
+  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
+  const {
+      focus: focus_,
+      selected,
+      href,
+      disabled,
+      onFocus: onFocus_,
+      onBlur: onBlur_,
+      InteractionProps,
+      Component: Component_ = props.href ? 'a' : 'div',
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [focus, setFocus] = React.useState(focus_ !== undefined ? focus_ : false);
+  const onFocus = React.useCallback(event => {
+    if (focus_ === undefined && !disabled) {
+      setFocus(true);
+      if (is('function', onFocus_)) onFocus_(event);
+    }
+  }, [focus_, disabled, onFocus_]);
+  const onBlur = React.useCallback(event => {
+    if (focus_ === undefined && !disabled) {
+      setFocus(false);
+      if (is('function', onBlur_)) onBlur_(event);
+    }
+  }, [focus_, disabled, onBlur_]);
+  const Component = Component_;
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    tabIndex: !disabled ? 0 : -1,
+    Component: Component,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    href: href,
+    className: classNames([staticClassName('CardButton', theme) && [`onesy-CardButton-root`, focus && `onesy-CardButton-focus`, disabled && `onesy-CardButton-disabled`], className, classes.root])
+  }, other), /*#__PURE__*/React.createElement(Interaction, _extends({
+    border: false,
+    pulse: focus,
+    selected: selected
+  }, InteractionProps)), children);
+});
+CardButton.displayName = 'onesy-CardButton';
+export default CardButton;

package/esm/CardButton/index.js

@@ -0,0 +1 @@
+export { default } from './CardButton';