draft-components 2.11.0 → 3.0.0

package/dist/components/checkbox/checkbox.css

@@ -0,0 +1,90 @@
+.dc-checkbox {
+  --dc-checkbox-size: 20px;
+  --dc-checkbox-radius: 6px;
+  --dc-checkbox-bg: var(--dc-control-bg);
+  --dc-checkbox-bg-checked: var(--dc-control-primary-color);
+  --dc-checkbox-border-color: var(--dc-control-border-color);
+  --dc-checkbox-border-color-checked: var(--dc-control-primary-color);
+  --dc-checkbox-icon-color: var(--dc-control-on-primary-color);
+  --dc-checkbox-focus-ring-color: var(--dc-focus-ring-color);
+
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--dc-checkbox-size);
+  height: var(--dc-checkbox-size);
+  line-height: 0;
+  text-align: left;
+  color-scheme: light;
+}
+
+.dc-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.dc-checkbox__check {
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+  cursor: pointer;
+  background: var(--dc-checkbox-bg);
+  border: 1px solid var(--dc-checkbox-border-color);
+  border-radius: var(--dc-checkbox-radius);
+  transition: opacity 0.2s;
+}
+
+.dc-checkbox__icon {
+  display: none;
+  width: 100%;
+  height: 100%;
+  color: var(--dc-checkbox-icon-color);
+}
+
+.dc-checkbox__input:checked + .dc-checkbox__check {
+  background: var(--dc-checkbox-bg-checked);
+  border-color: var(--dc-checkbox-border-color-checked);
+}
+
+.dc-checkbox__input:checked + .dc-checkbox__check .dc-checkbox__icon {
+  display: initial;
+}
+
+.dc-checkbox__input:disabled + .dc-checkbox__check {
+  cursor: default;
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-checkbox__input:focus {
+  outline: none;
+}
+
+.dc-checkbox__input:focus + .dc-checkbox__check::after {
+  position: absolute;
+  inset: -3px;
+  pointer-events: none;
+  content: "";
+  border-radius: calc(3px + var(--dc-checkbox-radius));
+  box-shadow: 0 0 0 3px var(--dc-checkbox-focus-ring-color);
+}
+
+.dc-checkbox__input:focus:not(:focus-visible) + .dc-checkbox__check::after {
+  content: none;
+}
+
+.dark .dc-checkbox,
+.dark.dc-checkbox {
+  color-scheme: dark;
+}

package/dist/components/checkbox/checkbox.js

@@ -5,7 +5,9 @@ export const Checkbox = forwardRef(function Checkbox({ hasMixedState = false, st
     return (_jsxs("label", { style: style, className: classNames('dc-checkbox', className), children: [_jsx("input", { ...props, ref: ref, type: "checkbox", className: "dc-checkbox__input", onChange: (event) => {
                     onChange?.(event);
                     onToggle?.(event.target.checked);
-                } }), _jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState ? (_jsx(DashIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon" })) : (_jsx(CheckIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-check-icon" })) })] }));
+                } }), _jsx("span", { className: "dc-checkbox__check", "data-testid": "checkbox-check", "aria-hidden": true, children: hasMixedState
+                    ? (_jsx(DashIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-dash-icon" }))
+                    : (_jsx(CheckIcon, { className: "dc-checkbox__icon", "data-testid": "checkbox-check-icon" })) })] }));
 });
 function CheckIcon(props) {
     return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: 20, height: 20, ...props, children: _jsx("path", { d: "M5 10.4444L9 14L15 6", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }) }));

package/dist/components/color-picker/color-picker.css

@@ -0,0 +1,86 @@
+.dc-color-picker {
+  --dc-color-picker-btn-size: 24px;
+  --dc-color-picker-btn-color: var(--dc-control-on-primary-color);
+  --dc-color-picker-btn-check-color: white;
+  --dc-color-picker-btn-inner-border-color: rgb(var(--dc-black-rgb) / 5%);
+  --dc-color-picker-btn-focus-ring-color: var(--dc-focus-ring-color);
+
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0;
+  margin: 0;
+  color-scheme: light;
+  border: none;
+}
+
+.dc-color-picker_disabled {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-color-picker__btn {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-color-picker-btn-size);
+  height: var(--dc-color-picker-btn-size);
+  font-size: 0;
+  color: transparent;
+  cursor: pointer;
+  background: var(--dc-color-picker-btn-color);
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px var(--dc-color-picker-btn-inner-border-color);
+}
+
+.dc-color-picker_disabled .dc-color-picker__btn {
+  cursor: default;
+}
+
+.dc-color-picker__btn > input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.dc-color-picker__btn > input + .dc-color-picker__btn-check {
+  display: none;
+}
+
+.dc-color-picker__btn > input:checked + .dc-color-picker__btn-check {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: inline-block;
+  width: 38%;
+  height: 38%;
+  background: var(--dc-color-picker-btn-check-color);
+  border-radius: 50%;
+  box-shadow: 0 1px 2px 0 rgb(var(--dc-black-rgb) / 5%);
+  transform: translate(-50%, -50%);
+}
+
+.dc-color-picker__btn:focus-within::before {
+  position: absolute;
+  inset: -2px;
+  z-index: -1;
+  display: inline-block;
+  content: "";
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px var(--dc-color-picker-btn-focus-ring-color);
+}
+
+.dark .dc-color-picker,
+.dark.dc-color-picker {
+  --dc-color-picker-btn-inner-border-color: rgb(255 255 255 / 10%);
+
+  color-scheme: dark;
+}

package/dist/components/date-picker/calendar-grid.js

@@ -24,8 +24,8 @@ export function CalendarGrid({ focusDay, minDate, maxDate, locale, weekStartsOn,
             const inDisplayedMonth = date >= monthStart && date <= monthEnd;
             let calendarDay = null;
             if (inDisplayedMonth) {
-                calendarDay = _jsx(CalendarDay, { ...getDayProps?.(date), date: date, dateISO: dateISO, locale: locale, isToday: isSameDay(date, today), isWeekend: isWeekend(date), isFocusable: isSameDay(date, focusDay), isDisabled: (minDate != null && date < minDate) ||
-                        (maxDate != null && date > maxDate), onClick: handleSelectDay(date), onMouseEnter: handleHoverDay(date) });
+                calendarDay = (_jsx(CalendarDay, { ...getDayProps?.(date), date: date, dateISO: dateISO, locale: locale, isToday: isSameDay(date, today), isWeekend: isWeekend(date), isFocusable: isSameDay(date, focusDay), isDisabled: (minDate != null && date < minDate)
+                        || (maxDate != null && date > maxDate), onClick: handleSelectDay(date), onMouseEnter: handleHoverDay(date) }));
             }
             columns.push(_jsx("td", { role: "gridcell", children: calendarDay }, dateISO));
             date = addDays(date, 1);

package/dist/components/date-picker/date-helpers.js

@@ -64,9 +64,9 @@ export function isValidDateISO(value) {
     return DATE_ISO_REGEX.test(value);
 }
 export function isSameDay(a, b) {
-    return (a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
+    return (a.getFullYear() === b.getFullYear()
+        && a.getMonth() === b.getMonth()
+        && a.getDate() === b.getDate());
 }
 export function isWeekend(date) {
     return date.getDay() === 6 || date.getDay() === 0;

package/dist/components/date-picker/date-picker.css

@@ -0,0 +1,203 @@
+.dc-datepicker {
+  --dc-columnheader-text-color: var(--dc-control-secondary-text-color);
+
+  /* Day properties */
+  --dc-day-font-size: 14px;
+  --dc-day-text-color: var(--dc-control-primary-text-color);
+  --dc-day-text-color-today: var(--dc-control-primary-color);
+  --dc-day-text-color-weekend: var(--dc-control-secondary-text-color);
+  --dc-day-text-color-selected: var(--dc-control-on-primary-color);
+  --dc-day-size: 32px;
+  --dc-day-max-width: 40px;
+  --dc-day-radius: 16px;
+  --dc-day-border-color: transparent;
+  --dc-day-border-color-hover: var(--dc-control-primary-color);
+  --dc-day-bg-selected: var(--dc-control-primary-color);
+  --dc-day-bg-selected-hover: var(--dc-control-primary-color-hover);
+  --dc-day-bg-range: var(--dc-control-secondary-color);
+  --dc-day-focus-ring-color: var(--dc-control-primary-color);
+
+  display: inline-block;
+  color-scheme: light;
+}
+
+/* Calendar controls */
+
+.dc-calendar-next-month,
+.dc-calendar-prev-month {
+  --dc-button-height: 28px;
+}
+
+.dc-calendar-month-select {
+  --dc-select-height: 28px;
+}
+
+.dc-calendar-year-input {
+  --dc-input-height: 28px;
+}
+
+/* Calendar day */
+
+.dc-calendar-day {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  font-family: var(--dc-primary-font);
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--dc-day-text-color);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+}
+
+.dc-calendar-day__body {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dc-day-size);
+  height: var(--dc-day-size);
+  border-radius: var(--dc-day-radius);
+}
+
+.dc-calendar-day_in-range {
+  position: relative;
+}
+
+.dc-calendar-day_in-range::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  content: "";
+  background: var(--dc-day-bg-range);
+}
+
+.dc-calendar-day_range-start::before {
+  left: calc(50% - var(--dc-day-size) / 2);
+  border-top-left-radius: var(--dc-day-radius);
+  border-bottom-left-radius: var(--dc-day-radius);
+}
+
+.dc-calendar-day_range-end::before {
+  right: calc(50% - var(--dc-day-size) / 2);
+  border-top-right-radius: var(--dc-day-radius);
+  border-bottom-right-radius: var(--dc-day-radius);
+}
+
+.dc-calendar-day_weekend > .dc-calendar-day__body {
+  color: var(--dc-day-text-color-weekend);
+}
+
+.dc-calendar-day_today > .dc-calendar-day__body {
+  color: var(--dc-day-text-color-today);
+}
+
+.dc-calendar-day_selected > .dc-calendar-day__body {
+  color: var(--dc-day-text-color-selected);
+  background: var(--dc-day-bg-selected);
+}
+
+.dc-calendar-day:hover {
+  cursor: pointer;
+}
+
+.dc-calendar-day:hover > .dc-calendar-day__body {
+  box-shadow: inset 0 0 0 2px var(--dc-day-border-color-hover);
+}
+
+.dc-calendar-day_selected:hover > .dc-calendar-day__body {
+  background: var(--dc-day-bg-selected-hover);
+  box-shadow: none;
+}
+
+.dc-calendar-day:disabled {
+  cursor: default;
+}
+
+.dc-calendar-day:disabled > .dc-calendar-day__body {
+  box-shadow: none;
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-calendar-day:focus {
+  outline: none;
+}
+
+.dc-calendar-day:focus > .dc-calendar-day__body {
+  box-shadow: inset 0 0 0 2px var(--dc-day-border-color-hover);
+}
+
+.dc-calendar-day_selected:focus > .dc-calendar-day__body {
+  position: relative;
+  box-shadow: none;
+}
+
+.dc-calendar-day_selected:focus > .dc-calendar-day__body::after {
+  position: absolute;
+  inset: -2px;
+  content: "";
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px var(--dc-day-focus-ring-color);
+}
+
+/* Calendar styles */
+
+.dc-calendar {
+  display: inline-flex;
+  flex-direction: column;
+  width: calc(7 * var(--dc-day-max-width));
+  min-width: calc(7 * var(--dc-day-size));
+  max-width: 100%;
+}
+
+.dc-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dc-calendar__header > * {
+  margin-right: 2px;
+  margin-left: 2px;
+}
+
+.dc-calendar__header > *:first-child {
+  margin-right: auto;
+  margin-left: 0;
+}
+
+.dc-calendar__header > *:last-child {
+  margin-right: 0;
+  margin-left: auto;
+}
+
+.dc-calendar__grid {
+  margin-top: 16px;
+  border-spacing: 0;
+}
+
+.dc-calendar__grid th,
+.dc-calendar__grid td {
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.dc-calendar__grid th {
+  padding-bottom: 4px;
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--dc-columnheader-text-color);
+}
+
+.dc-calendar__grid td {
+  padding-top: 4px;
+}
+
+.dark .dc-datepicker,
+.dark.dc-datepicker {
+  color-scheme: dark;
+}

package/dist/components/date-picker/date-range.js

@@ -13,8 +13,8 @@ export class DateRange {
         return new DateRange(start, end);
     }
     contains(date) {
-        return ((isSameDay(date, this.start) || date > this.start) &&
-            (isSameDay(date, this.end) || date < this.end));
+        return ((isSameDay(date, this.start) || date > this.start)
+            && (isSameDay(date, this.end) || date < this.end));
     }
     toDateISORange() {
         return {

package/dist/components/date-picker/parse-min-max-props.js

@@ -3,13 +3,13 @@ export function parseMinMaxProps(props) {
     const min = props.min;
     const max = props.max;
     const minDate = min
-        ? parseDateISO(min, "The 'min' property must be a date in the ISO format.")
+        ? parseDateISO(min, 'The \'min\' property must be a date in the ISO format.')
         : null;
     const maxDate = max
-        ? parseDateISO(max, "The 'max' property must be a date in the ISO format.")
+        ? parseDateISO(max, 'The \'max\' property must be a date in the ISO format.')
         : null;
     if (minDate != null && maxDate != null && minDate >= maxDate) {
-        throw new RangeError("'min' property must be less than 'max' property.");
+        throw new RangeError('\'min\' property must be less than \'max\' property.');
     }
     return { minDate, maxDate };
 }

package/dist/components/date-picker-popover/date-picker-popover.css

@@ -0,0 +1,8 @@
+.dc-date-picker-popover {
+  color-scheme: light;
+}
+
+.dark .dc-date-picker-popover,
+.dark.dc-date-picker-popover {
+  color-scheme: dark;
+}

package/dist/components/date-range-picker-popover/date-range-picker-popover.css

@@ -0,0 +1,73 @@
+.dc-date-range-picker-popover {
+  display: inline-grid;
+  grid-template-areas:
+    "presets calendar"
+    "footer  footer";
+  grid-template-columns: auto 1fr;
+  grid-gap: 20px 24px;
+  max-width: none;
+  color-scheme: light;
+}
+
+.dc-date-range-picker-popover_compact {
+  grid-template-areas:
+    "presets"
+    "calendar"
+    "footer";
+  grid-template-columns: 100%;
+  max-width: 100%;
+}
+
+.dc-date-range-picker-popover__presets {
+  grid-area: presets;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.dc-date-range-picker-popover__presets > * {
+  white-space: nowrap;
+}
+
+.dc-date-range-picker-popover__presets > * + * {
+  margin-top: 8px;
+}
+
+.dc-date-range-picker-popover__calendar {
+  grid-area: calendar;
+}
+
+.dc-date-range-picker-popover__footer {
+  display: grid;
+  grid-area: footer;
+  grid-template-areas: "content cancel confirm";
+  grid-template-columns: 1fr auto auto;
+  grid-gap: 8px;
+  align-items: center;
+  font: var(--dc-text-xs);
+}
+
+.dc-date-range-picker-popover__footer-content {
+  grid-area: content;
+}
+
+.dc-date-range-picker-popover__footer-cancel {
+  grid-area: cancel;
+}
+
+.dc-date-range-picker-popover__footer-confirm {
+  grid-area: confirm;
+}
+
+.dc-date-range-picker-popover_compact .dc-date-range-picker-popover__footer {
+  grid-template-areas:
+    "content content"
+    "cancel  confirm";
+  grid-template-columns: 1fr 1fr;
+  text-align: right;
+}
+
+.dark .dc-date-range-picker-popover,
+.dark.dc-date-range-picker-popover {
+  color-scheme: dark;
+}

package/dist/components/date-range-picker-popover/helpers.js

@@ -4,8 +4,8 @@ export function findSelectedOption(selection, options) {
     }
     const selectedOption = options.find((option) => {
         const range = option.range;
-        return (range.start === selection.range.start &&
-            range.end === selection.range.end);
+        return (range.start === selection.range.start
+            && range.end === selection.range.end);
     });
     return selectedOption || null;
 }