@plexui/ui 0.19.0 → 0.20.0

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

@@ -1,108 +0,0 @@
-@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;
-  }.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

@@ -1,271 +0,0 @@
-@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: var(--tracking-none);
-  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-focus-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

@@ -1,295 +0,0 @@
-@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: var(--tracking-none);
-  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

@@ -1,25 +0,0 @@
-@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;
-}
-}