@plexui/styles 0.0.0-stage → 0.1.1

package/dist/es/components/DataTable/DataTable.module.css

@@ -0,0 +1,117 @@
+@layer components {.DataTable {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+}.TableContainer {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}.EmptyCell {
+  height: 200px;
+  vertical-align: middle;
+  color: var(--color-text-tertiary);
+  text-align: center;
+}
+  :where(.DataTable[data-variant="bordered"]) .TableContainer {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+  }
+
+  :where(.DataTable[data-variant="bordered"]) :where(thead) {
+    --table-header-background: var(--color-surface-secondary);
+  }
+
+  :where(.DataTable[data-variant="bordered"]) .Pagination {
+    border-top: none;
+  }
+  :where(.DataTable[data-clickable]) :where(tbody tr) {
+    cursor: pointer;
+  }
+
+    :where(.DataTable[data-clickable]) :where(tbody tr):focus-visible {
+      outline: 2px solid var(--color-ring);
+      outline-offset: -2px;
+    }/* The row selection column: as wide as its checkboxes (the table's fixed
+   layout takes column widths from the header row) */.SelectColumn {
+  box-sizing: content-box;
+  width: var(--checkbox-indicator-size);
+}.Pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--spacing) * 3) 0;
+  border-top: 1px solid var(--color-border);
+}.PaginationLeft {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 2);
+}.PaginationRight {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 3);
+}.PaginationLabel {
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-sm-size);
+}.PaginationInfo {
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-sm-size);
+}.PaginationSelect {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+  padding-right: calc(var(--spacing) * 6);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text);
+  font-size: var(--font-text-sm-size);
+  line-height: var(--font-text-sm-line-height);
+  cursor: pointer;
+  background-color: var(--color-surface);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-position: right calc(var(--spacing) * 1.5) center;
+  background-repeat: no-repeat;
+}
+
+  .PaginationSelect:focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: -1px;
+  }.PaginationButtons {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+}.ColumnHeaderButton {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--spacing) * 1);
+  color: inherit;
+  font-weight: inherit;
+  white-space: nowrap;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+}
+
+  .ColumnHeaderButton:hover {
+    color: var(--color-text);
+  }.SortIcon {
+  display: inline-flex;
+  opacity: 0.4;
+}
+
+  :where(.ColumnHeaderButton:hover) .SortIcon {
+    opacity: 0.7;
+  }
+
+  .SortIcon svg {
+    width: var(--font-text-sm-size);
+    height: var(--font-text-sm-size);
+  }:where(.ColumnHeaderButton[data-sorted]) .SortIcon {
+  opacity: 1;
+}
+}

package/dist/es/components/DatePicker/Calendar.module.css

@@ -0,0 +1,271 @@
+@layer components {.CalendarContainer {
+  position: relative;
+  width: 210px;
+  /*  Default size of the calendar is assumed to be 224px */
+  /*  and then is dynamically set via JS measuring */
+  height: 224px;
+}.Previous {
+  position: absolute;
+  top: 0;
+  left: -2px;
+  z-index: 2;
+  background-color: var(--color-surface-elevated);
+}
+
+  /*  Prevent titles from bleeding beyond the button */
+  .Previous::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    display: block;
+    width: 12px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+  }
+
+  /*  Slide fade as titles collide with the button */
+  .Previous::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 100%;
+    display: block;
+    width: 14px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+  }.Next {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  z-index: 2;
+  background-color: var(--color-surface-elevated);
+}
+
+  /*  Prevent titles from bleeding beyond the button */
+  .Next::before {
+    position: absolute;
+    top: 0;
+    right: -10px;
+    bottom: 0;
+    display: block;
+    width: 12px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+  }
+
+  /*  Slide fade as titles collide with the button */
+  .Next::after {
+    position: absolute;
+    top: 0;
+    right: 100%;
+    bottom: 0;
+    display: block;
+    width: 14px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+  }/*  Lift the inner button above the pseudo elements to avoid clipping in the focus ring box shadow. */.Next button[type="button"],
+.Previous button[type="button"] {
+  z-index: 2;
+}.CalendarContainer[data-dropdown] .Previous::before,
+.CalendarContainer[data-dropdown] .Previous::after,
+.CalendarContainer[data-dropdown] .Next::before,
+.CalendarContainer[data-dropdown] .Next::after {
+  display: none;
+}.CalendarWrapper {
+  overflow: hidden;
+  padding: 10px 12px 12px;
+}.CalendarRange {
+  transition: transform 0.25s var(--cubic-move);
+}.Calendar {
+  --cell-size: 30px;
+  --cell-vertical-gutter: 2px;
+
+  position: absolute;
+  top: 0;
+  width: 210px;
+  font-size: 14px;
+}
+
+  .Calendar[data-static] {
+    position: relative;
+  }.Week {
+  display: flex;
+  margin-bottom: var(--cell-vertical-gutter);
+}
+
+  .Week:last-child {
+    margin-bottom: 0;
+  }.DayLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  letter-spacing: normal;
+  text-align: center;
+}.MonthLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0;
+  margin: 0 0 6px;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: var(--font-weight-semibold);
+}.Day {
+  position: relative;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  text-align: center;
+  transition: background-color 0.15s var(--cubic-enter);
+}
+
+  .Day[data-is-selected] {
+    border-radius: var(--radius-full);
+  }
+
+  .Day[data-is-selected], :where([data-theme="light"]) .Day[data-is-selected] {
+background-color: var(--alpha-06);
+}
+
+  :where([data-theme="dark"]) .Day[data-is-selected] {
+background-color: var(--alpha-08);
+}.InteractiveDay {
+  position: relative;
+  display: block;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  border: 0;
+  border-radius: var(--radius-full);
+  -webkit-appearance: auto;
+     -moz-appearance: auto;
+          appearance: auto;
+  background: none;
+  cursor: pointer;
+  font-size: var(--font-text-sm-size);
+}
+
+  .InteractiveDay::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border: 1px solid var(--color-text);
+    border-radius: var(--radius-full);
+    content: "";
+    opacity: 0;
+    transition:
+      color,
+      0.15s var(--cubic-enter),
+      opacity 0.15s var(--cubic-enter);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .InteractiveDay:hover::before {
+      opacity: 1;
+    }
+}
+
+  .InteractiveDay[disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+    .InteractiveDay[disabled]::before {
+      display: none;
+    }
+
+  [data-is-selected] .InteractiveDay {
+    background: var(--color-text);
+    color: var(--color-text-inverse);
+  }.TodayDot {
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  width: 3px;
+  height: 3px;
+  border-radius: 100%;
+  margin-left: -1px;
+  background-color: var(--color-text);
+  transition: background-color 0.15s var(--cubic-enter);
+}
+
+  [data-is-selected] .TodayDot {
+    background-color: var(--gray-0);
+  }.MonthLabelSpacer {
+  height: 28px;
+  margin: 0 0 6px;
+}.DropdownCaption {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  height: 28px;
+  pointer-events: none;
+}.DropdownCaption > * {
+  pointer-events: auto;
+}.TimeFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 10px;
+  margin-top: 10px;
+}.TimeFooter, :where([data-theme="light"]) .TimeFooter {
+border-top: 1px solid var(--alpha-06);
+}:where([data-theme="dark"]) .TimeFooter {
+border-top: 1px solid var(--alpha-08);
+}.TimeLabel {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+}.TimeInputGroup {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}.TimeField {
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--color-text);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+  text-align: center;
+  transition: background-color 0.15s var(--cubic-enter);
+}.TimeField, :where([data-theme="light"]) .TimeField {
+background-color: var(--alpha-04);
+}:where([data-theme="dark"]) .TimeField {
+background-color: var(--alpha-06);
+}
+
+  .TimeField:focus {
+    outline: 2px solid var(--color-ring);
+    outline-offset: -2px;
+  }
+
+  .TimeField:focus, :where([data-theme="light"]) .TimeField:focus {
+background-color: var(--alpha-06);
+}
+
+  :where([data-theme="dark"]) .TimeField:focus {
+background-color: var(--alpha-08);
+}.TimeSeparator {
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+}

package/dist/es/components/DateRangePicker/Calendar.module.css

@@ -0,0 +1,295 @@
+@layer components {.CalendarContainer {
+  position: relative;
+  width: 210px;
+  /*  Default size of the calendar is assumed to be 224px */
+  /*  and then is dynamically set via JS measuring */
+  height: 224px;
+}
+
+  @media (min-width: 576px) {.CalendarContainer {
+    width: 452px;
+}
+}.Previous {
+  position: absolute;
+  top: 0;
+  left: -2px;
+  z-index: 2;
+  background-color: var(--color-surface-elevated);
+}
+
+  /*  Prevent titles from bleeding beyond the button */
+  .Previous::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -10px;
+    display: block;
+    width: 12px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+  }
+
+  /*  Slide fade as titles collide with the button */
+  .Previous::after {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 100%;
+    display: block;
+    width: 14px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+  }.Next {
+  position: absolute;
+  top: 0;
+  right: -2px;
+  z-index: 2;
+  background-color: var(--color-surface-elevated);
+}
+
+  /*  Prevent titles from bleeding beyond the button */
+  .Next::before {
+    position: absolute;
+    top: 0;
+    right: -10px;
+    bottom: 0;
+    display: block;
+    width: 12px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+  }
+
+  /*  Slide fade as titles collide with the button */
+  .Next::after {
+    position: absolute;
+    top: 0;
+    right: 100%;
+    bottom: 0;
+    display: block;
+    width: 14px;
+    background-color: var(--color-surface-elevated);
+    content: "";
+    -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+            mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+  }/*  Lift the inner button above the pseudo elements to avoid clipping in the focus ring box shadow. */.Next button[type="button"],
+.Previous button[type="button"] {
+  z-index: 2;
+}.CalendarWrapper {
+  overflow: hidden;
+  padding: 10px 12px 12px;
+}.CalendarRange {
+  transition: transform 0.25s var(--cubic-move);
+}.ButtonText {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font-weight: var(--font-weight-normal);
+  text-align: left;
+}
+
+  [data-active] .ButtonText {
+    font-weight: var(--font-weight-semibold);
+  }.Calendar {
+  --cell-size: 30px;
+  --cell-vertical-gutter: 2px;
+
+  position: absolute;
+  top: 0;
+  width: 210px;
+  font-size: 14px;
+}.Week {
+  display: flex;
+  margin-bottom: var(--cell-vertical-gutter);
+}
+
+  .Week:last-child {
+    margin-bottom: 0;
+  }.DayLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  color: var(--color-text-secondary);
+  font-size: 12px;
+  letter-spacing: normal;
+  text-align: center;
+}.MonthLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0;
+  margin: 0 0 6px;
+  color: var(--color-text);
+  font-size: 13px;
+  font-weight: var(--font-weight-semibold);
+}.Day {
+  position: relative;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  text-align: center;
+  transition: background-color 0.15s var(--cubic-enter);
+}
+
+  .Day:first-child {
+    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
+  }
+
+  .Day:last-child {
+    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+  }
+
+  .Day[data-is-start], .Day[data-is-end], .Day[data-is-in-range], :where([data-theme="light"]) .Day[data-is-start], :where([data-theme="light"]) .Day[data-is-end], :where([data-theme="light"]) .Day[data-is-in-range] {
+background-color: var(--alpha-06);
+}
+
+  :where([data-theme="dark"]) .Day[data-is-start], :where([data-theme="dark"]) .Day[data-is-end], :where([data-theme="dark"]) .Day[data-is-in-range] {
+background-color: var(--alpha-08);
+}
+
+  .Day[data-is-start][data-is-end] {
+    background: none;
+  }
+
+  .Day[data-is-first-range-trail] {
+    border-radius: 0;
+  }
+
+    .Day[data-is-first-range-trail]::before {
+      position: absolute;
+      top: 0;
+      right: 100%;
+      bottom: 0;
+      width: 15px;
+      content: "";
+      -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+              mask-image: linear-gradient(90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+      transition: opacity 0.15s var(--cubic-enter);
+    }
+
+    .Day[data-is-first-range-trail]::before, :where([data-theme="light"]) .Day[data-is-first-range-trail]::before {
+background-color: var(--alpha-06);
+}
+
+    :where([data-theme="dark"]) .Day[data-is-first-range-trail]::before {
+background-color: var(--alpha-08);
+}
+
+      @starting-style {
+
+    .Day[data-is-first-range-trail]::before {
+        opacity: 0
+    }
+      }
+
+  .Day[data-is-last-range-trail] {
+    border-radius: 0;
+  }
+
+    .Day[data-is-last-range-trail]::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 100%;
+      width: 15px;
+      content: "";
+      -webkit-mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+              mask-image: linear-gradient(-90deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
+      transition: opacity 0.15s var(--cubic-enter);
+    }
+
+    .Day[data-is-last-range-trail]::before, :where([data-theme="light"]) .Day[data-is-last-range-trail]::before {
+background-color: var(--alpha-06);
+}
+
+    :where([data-theme="dark"]) .Day[data-is-last-range-trail]::before {
+background-color: var(--alpha-08);
+}
+
+      @starting-style {
+
+    .Day[data-is-last-range-trail]::before {
+        opacity: 0
+    }
+      }
+
+  .Day[data-is-start] {
+    border-bottom-left-radius: var(--radius-full);
+    border-top-left-radius: var(--radius-full);
+  }
+
+  .Day[data-is-end] {
+    border-bottom-right-radius: var(--radius-full);
+    border-top-right-radius: var(--radius-full);
+  }.InteractiveDay {
+  position: relative;
+  display: block;
+  width: var(--cell-size);
+  height: var(--cell-size);
+  border: 0;
+  border-radius: var(--radius-full);
+  -webkit-appearance: auto;
+     -moz-appearance: auto;
+          appearance: auto;
+  background: none;
+  cursor: pointer;
+  font-size: var(--font-text-sm-size);
+}
+
+  .InteractiveDay::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border: 1px solid var(--color-text);
+    border-radius: var(--radius-full);
+    content: "";
+    opacity: 0;
+    transition:
+      color,
+      0.15s var(--cubic-enter),
+      opacity 0.15s var(--cubic-enter);
+  }
+
+  .InteractiveDay:hover::before {
+    opacity: 1;
+  }
+
+  .InteractiveDay[disabled] {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+    .InteractiveDay[disabled]::before {
+      display: none;
+    }
+
+  [data-is-start] .InteractiveDay,
+  [data-is-end] .InteractiveDay {
+    background: var(--color-text);
+    color: var(--color-text-inverse);
+  }.TodayDot {
+  position: absolute;
+  bottom: 3px;
+  left: 50%;
+  width: 3px;
+  height: 3px;
+  border-radius: 100%;
+  margin-left: -1px;
+  background-color: var(--color-text);
+  transition: background-color 0.15s var(--cubic-enter);
+}
+
+  [data-is-start] .TodayDot,
+  [data-is-end] .TodayDot {
+    background-color: var(--gray-0);
+  }.Shortcuts {
+  flex: 1;
+  width: 150px;
+  padding: calc(var(--spacing) * 2);
+  border-right: 1px solid var(--color-border);
+}
+}

package/dist/es/components/DateRangePicker/Trigger.module.css

@@ -0,0 +1,25 @@
+@layer components {.StepperControl {
+  padding-right: calc((var(--select-control-size) - var(--clear-size)) / 2);
+  padding-left: calc((var(--select-control-size) - var(--clear-size)) / 2);
+}
+
+  .StepperControl .StepperPrevious,
+  .StepperControl .StepperNext {
+    --button-size: var(--clear-size);
+    --button-icon-size: var(--clear-icon-size);
+  }.StepperContent {
+  display: flex;
+  align-items: center;
+  gap: var(--select-control-gap);
+}.StepperText {
+  min-width: 9em;
+  text-align: center;
+}.RangeText {
+  display: inline-block;
+  font-variant: tabular-nums;
+}.RangeTextSeparator {
+  margin: 0 calc(var(--spacing) * 1);
+  font-size: var(--font-text-sm-size);
+  letter-spacing: 0;
+}
+}