@rarui/styles 2.2.5-rc.2 → 2.3.0-rc.1

package/dist/packages/input/datepicker/rarui-datepicker.css

@@ -0,0 +1,186 @@
+.rarui-datepicker__1172dxe0 {
+  border: none;
+  font-family: var(--rarui-fontFamily-body);
+  color: var(--rarui-colors-content-primary);
+  background-color: var(--rarui-colors-surface-primary);
+  box-shadow: var(--rarui-elevation-bottom-1);
+  border-radius: var(--rarui-shape-border-radius-xs);
+  overflow: hidden;
+}
+.rarui-datepicker_weekday__1172dxe1 {
+  text-transform: capitalize;
+  flex: 1;
+  color: var(--rarui-colors-content-secondary);
+  font-size: var(--rarui-fontSize-body-xs);
+  font-weight: var(--rarui-fontWeight-regular);
+}
+.rarui-datepicker_day__1172dxe2 {
+  width: 2.5rem;
+}
+.rarui-datepicker_time__1172dxe3 {
+  height: auto !important;
+  padding: 0 !important;
+  margin: 0px var(--rarui-spacing-4xs);
+  margin-bottom: var(--rarui-spacing-4xs);
+}
+.rarui-datepicker_time__1172dxe3:hover {
+  background-color: var(--rarui-colors-surface-brand-hover) !important;
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__header {
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+}
+.rarui-datepicker__1172dxe0 .react-datepicker-time__header {
+  background-color: var(--rarui-colors-surface-secondary);
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__time-container {
+  border-left-color: var(--rarui-colors-border-subdued);
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__time-box, .rarui-datepicker__1172dxe0 .react-datepicker__time {
+  border-bottom-right-radius: 0 !important;
+  background: transparent;
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__time-list {
+  background-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__time-list::-webkit-scrollbar {
+  width: .375rem;
+  background: transparent;
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__time-list::-webkit-scrollbar-thumb {
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  background-color: var(--rarui-colors-content-disabled);
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__day-names {
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--rarui-spacing-xs);
+  padding-top: var(--rarui-spacing-3xs);
+  padding-bottom: 0;
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__year {
+  max-width: 242px;
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__year-wrapper {
+  max-width: 100%;
+  display: block;
+}
+
+   .rarui-datepicker__1172dxe0 .react-datepicker__month,
+   .rarui-datepicker__1172dxe0 .react-datepicker__children-container
+  {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__month {
+  box-sizing: border-box;
+  padding: var(--rarui-spacing-xs);
+  padding-top: var(--rarui-spacing-3xs);
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__month {
+  box-sizing: border-box;
+  padding: var(--rarui-spacing-xs);
+  padding-top: var(--rarui-spacing-3xs);
+}
+
+   .rarui-datepicker__1172dxe0 .react-datepicker__day,
+   .rarui-datepicker__1172dxe0 .react-datepicker__month-text,
+   .rarui-datepicker__1172dxe0 .react-datepicker__year-text,
+   .rarui-datepicker__1172dxe0 .rarui-datepicker_time__1172dxe3
+  {
+  border-style: solid;
+  border-color: transparent;
+  line-height: 2.5rem;
+  text-transform: capitalize;
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  border-width: var(--rarui-shape-border-width-1);
+  color: var(--rarui-colors-content-primary);
+  font-size: var(--rarui-fontSize-button-s);
+  font-weight: var(--rarui-fontWeight-medium);
+}
+
+   .rarui-datepicker__1172dxe0 .react-datepicker__day:hover,
+   .rarui-datepicker__1172dxe0 .react-datepicker__month-text:hover,
+   .rarui-datepicker__1172dxe0 .react-datepicker__year-text:hover,
+   .rarui-datepicker__1172dxe0 .rarui-datepicker_time__1172dxe3:hover
+  {
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  border-color: var(--rarui-colors-border-brand);
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+
+   .rarui-datepicker__1172dxe0 .react-datepicker__day:focus-within,
+   .rarui-datepicker__1172dxe0 .react-datepicker__month-text:focus-within,
+   .rarui-datepicker__1172dxe0 .react-datepicker__year-text:focus-within,
+   .rarui-datepicker__1172dxe0 .react-datepicker__time-list-item:focus-within
+  {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+
+   .rarui-datepicker__1172dxe0 .react-datepicker__day--today,
+   .rarui-datepicker__1172dxe0 .react-datepicker__month-text--today,
+   .rarui-datepicker__1172dxe0 .react-datepicker__year-text--today,
+   .rarui-datepicker__1172dxe0 .react-datepicker__time-list--today
+  {
+  background-color: var(--rarui-colors-surface-primary);
+  border-color: var(--rarui-colors-surface-brand);
+  color: var(--rarui-colors-content-brand);
+}
+
+   .rarui-datepicker__1172dxe0 .react-datepicker__day--keyboard-selected,
+   .rarui-datepicker__1172dxe0 .react-datepicker__month-text--keyboard-selected,
+   .rarui-datepicker__1172dxe0 .react-datepicker__year-text--keyboard-selected
+
+  {
+  background-color: transparent;
+}
+
+   .rarui-datepicker__1172dxe0 .react-datepicker__day--selected,
+   .rarui-datepicker__1172dxe0 .react-datepicker__month-text--selected,
+   .rarui-datepicker__1172dxe0 .react-datepicker__year-text--selected,
+   .rarui-datepicker__1172dxe0 .react-datepicker__time-list-item--selected,
+   .rarui-datepicker__1172dxe0 .react-datepicker__day--range-end
+  {
+  background-color: var(--rarui-colors-surface-brand) !important;
+  color: var(--rarui-colors-content-on-brand);
+  font-weight: var(--rarui-fontWeight-medium);
+  border-color: var(--rarui-colors-surface-brand);
+}
+
+   .rarui-datepicker__1172dxe0 .react-datepicker__day--in-range,
+   .rarui-datepicker__1172dxe0 .react-datepicker__day--in-selecting-range,
+   .rarui-datepicker__1172dxe0 .react-datepicker__month-text--in-range,
+   .rarui-datepicker__1172dxe0 .react-datepicker__month-text--in-selecting-range,
+   .rarui-datepicker__1172dxe0 .react-datepicker__year-text--in-range,
+   .rarui-datepicker__1172dxe0 .react-datepicker__year-text--in-selecting-range
+  {
+  background-color: var(--rarui-colors-surface-brand-hover);
+  border-radius: var(--rarui-shape-border-radius-2xs);
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__day--disabled {
+  color: var(--rarui-colors-content-disabled);
+  opacity: 1;
+  font-weight: var(--rarui-fontWeight-regular);
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__day--disabled:hover {
+  border-color: transparent;
+  background-color: transparent;
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__day--outside-month {
+  color: var(--rarui-colors-content-disabled);
+  opacity: 0.6;
+  font-weight: var(--rarui-fontWeight-regular);
+}
+.rarui-datepicker__1172dxe0 .react-datepicker__day--outside-month:hover {
+  border-color: transparent;
+  background-color: transparent;
+}

package/dist/packages/input/datepicker/rarui-datepicker.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-datepicker.css";var e={datepicker:"rarui-datepicker__1172dxe0",day:"rarui-datepicker_day__1172dxe2",weekday:"rarui-datepicker_weekday__1172dxe1",time:"rarui-datepicker_time__1172dxe3"};export{e as datepickerStyles};

package/dist/packages/input/dropdown/index.js

@@ -0,0 +1 @@
+import{dropdownSprinkle as r,dropdownStyles as s}from"./rarui-dropdown.css.js";var o={classnames:s,sprinkle:r};export{o as dropdown};

package/dist/packages/input/dropdown/rarui-dropdown.css

@@ -0,0 +1,196 @@
+.rarui-dropdown__1b7gjg50 {
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  border-style: solid;
+  box-sizing: border-box;
+  gap: var(--rarui-spacing-3xs);
+  z-index: var(--rarui-zIndex-800);
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  padding: var(--rarui-spacing-3xs);
+  box-shadow: var(--rarui-elevation-bottom-2);
+  border-width: var(--rarui-shape-border-width-1);
+  border-color: var(--rarui-colors-border-subdued);
+  background-color: var(--rarui-colors-surface-primary);
+}
+.rarui-dropdown_padding_base__1b7gjg51 {
+  padding: var(--rarui-spacing-3xs);
+}
+.rarui-dropdown_padding_none__1b7gjg52 {
+  padding: 0;
+}
+.rarui-dropdown_item__1b7gjg53 {
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  width: 100%;
+  box-sizing: border-box;
+  transition: all 150ms ease;
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  gap: var(--rarui-spacing-3xs);
+  padding: var(--rarui-spacing-3xs);
+  color: var(--rarui-colors-content-primary);
+  font-weight: var(--rarui-fontWeight-medium);
+  font-size: var(--rarui-fontSize-button-s);
+}
+.rarui-dropdown_item__1b7gjg53:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-dropdown_item__1b7gjg53:hover {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-dropdown_item__1b7gjg53:active {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-dropdown_item__1b7gjg53:disabled {
+  color: var(--rarui-colors-content-disabled);
+}
+.rarui-dropdown_item_selected_true__1b7gjg54 {
+  background-color: var(--rarui-colors-surface-brand-subdued);
+}
+.rarui-dropdown_item_selected_true__1b7gjg54:hover {
+  background-color: var(--rarui-colors-surface-brand-subdued);
+}
+@media screen and (min-width: 0px) {
+  .rarui-dropdown_width-xs__1b7gjg59 {
+    width: var(--width-xs__1b7gjg55);
+  }
+  .rarui-dropdown_maxWidth-xs__1b7gjg5h {
+    max-width: var(--maxWidth-xs__1b7gjg5d);
+  }
+  .rarui-dropdown_zIndex-100-xs__1b7gjg5l {
+    z-index: var(--rarui-zIndex-100);
+  }
+  .rarui-dropdown_zIndex-200-xs__1b7gjg5p {
+    z-index: var(--rarui-zIndex-200);
+  }
+  .rarui-dropdown_zIndex-300-xs__1b7gjg5t {
+    z-index: var(--rarui-zIndex-300);
+  }
+  .rarui-dropdown_zIndex-400-xs__1b7gjg5x {
+    z-index: var(--rarui-zIndex-400);
+  }
+  .rarui-dropdown_zIndex-500-xs__1b7gjg511 {
+    z-index: var(--rarui-zIndex-500);
+  }
+  .rarui-dropdown_zIndex-600-xs__1b7gjg515 {
+    z-index: var(--rarui-zIndex-600);
+  }
+  .rarui-dropdown_zIndex-700-xs__1b7gjg519 {
+    z-index: var(--rarui-zIndex-700);
+  }
+  .rarui-dropdown_zIndex-800-xs__1b7gjg51d {
+    z-index: var(--rarui-zIndex-800);
+  }
+  .rarui-dropdown_zIndex-900-xs__1b7gjg51h {
+    z-index: var(--rarui-zIndex-900);
+  }
+}
+@media screen and (min-width: 768px) {
+  .rarui-dropdown_width-md__1b7gjg5a {
+    width: var(--width-md__1b7gjg56);
+  }
+  .rarui-dropdown_maxWidth-md__1b7gjg5i {
+    max-width: var(--maxWidth-md__1b7gjg5e);
+  }
+  .rarui-dropdown_zIndex-100-md__1b7gjg5m {
+    z-index: var(--rarui-zIndex-100);
+  }
+  .rarui-dropdown_zIndex-200-md__1b7gjg5q {
+    z-index: var(--rarui-zIndex-200);
+  }
+  .rarui-dropdown_zIndex-300-md__1b7gjg5u {
+    z-index: var(--rarui-zIndex-300);
+  }
+  .rarui-dropdown_zIndex-400-md__1b7gjg5y {
+    z-index: var(--rarui-zIndex-400);
+  }
+  .rarui-dropdown_zIndex-500-md__1b7gjg512 {
+    z-index: var(--rarui-zIndex-500);
+  }
+  .rarui-dropdown_zIndex-600-md__1b7gjg516 {
+    z-index: var(--rarui-zIndex-600);
+  }
+  .rarui-dropdown_zIndex-700-md__1b7gjg51a {
+    z-index: var(--rarui-zIndex-700);
+  }
+  .rarui-dropdown_zIndex-800-md__1b7gjg51e {
+    z-index: var(--rarui-zIndex-800);
+  }
+  .rarui-dropdown_zIndex-900-md__1b7gjg51i {
+    z-index: var(--rarui-zIndex-900);
+  }
+}
+@media screen and (min-width: 1200px) {
+  .rarui-dropdown_width-lg__1b7gjg5b {
+    width: var(--width-lg__1b7gjg57);
+  }
+  .rarui-dropdown_maxWidth-lg__1b7gjg5j {
+    max-width: var(--maxWidth-lg__1b7gjg5f);
+  }
+  .rarui-dropdown_zIndex-100-lg__1b7gjg5n {
+    z-index: var(--rarui-zIndex-100);
+  }
+  .rarui-dropdown_zIndex-200-lg__1b7gjg5r {
+    z-index: var(--rarui-zIndex-200);
+  }
+  .rarui-dropdown_zIndex-300-lg__1b7gjg5v {
+    z-index: var(--rarui-zIndex-300);
+  }
+  .rarui-dropdown_zIndex-400-lg__1b7gjg5z {
+    z-index: var(--rarui-zIndex-400);
+  }
+  .rarui-dropdown_zIndex-500-lg__1b7gjg513 {
+    z-index: var(--rarui-zIndex-500);
+  }
+  .rarui-dropdown_zIndex-600-lg__1b7gjg517 {
+    z-index: var(--rarui-zIndex-600);
+  }
+  .rarui-dropdown_zIndex-700-lg__1b7gjg51b {
+    z-index: var(--rarui-zIndex-700);
+  }
+  .rarui-dropdown_zIndex-800-lg__1b7gjg51f {
+    z-index: var(--rarui-zIndex-800);
+  }
+  .rarui-dropdown_zIndex-900-lg__1b7gjg51j {
+    z-index: var(--rarui-zIndex-900);
+  }
+}
+@media screen and (min-width: 1400px) {
+  .rarui-dropdown_width-xl__1b7gjg5c {
+    width: var(--width-xl__1b7gjg58);
+  }
+  .rarui-dropdown_maxWidth-xl__1b7gjg5k {
+    max-width: var(--maxWidth-xl__1b7gjg5g);
+  }
+  .rarui-dropdown_zIndex-100-xl__1b7gjg5o {
+    z-index: var(--rarui-zIndex-100);
+  }
+  .rarui-dropdown_zIndex-200-xl__1b7gjg5s {
+    z-index: var(--rarui-zIndex-200);
+  }
+  .rarui-dropdown_zIndex-300-xl__1b7gjg5w {
+    z-index: var(--rarui-zIndex-300);
+  }
+  .rarui-dropdown_zIndex-400-xl__1b7gjg510 {
+    z-index: var(--rarui-zIndex-400);
+  }
+  .rarui-dropdown_zIndex-500-xl__1b7gjg514 {
+    z-index: var(--rarui-zIndex-500);
+  }
+  .rarui-dropdown_zIndex-600-xl__1b7gjg518 {
+    z-index: var(--rarui-zIndex-600);
+  }
+  .rarui-dropdown_zIndex-700-xl__1b7gjg51c {
+    z-index: var(--rarui-zIndex-700);
+  }
+  .rarui-dropdown_zIndex-800-xl__1b7gjg51g {
+    z-index: var(--rarui-zIndex-800);
+  }
+  .rarui-dropdown_zIndex-900-xl__1b7gjg51k {
+    z-index: var(--rarui-zIndex-900);
+  }
+}

package/dist/packages/input/dropdown/rarui-dropdown.css.js

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-dropdown.css";import{c as d}from"../../../node_modules/rainbow-sprinkles/dist/createRuntimeFn-891c4670.esm.js";import{c as r}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var _=d({config:{width:{dynamic:{default:"rarui-dropdown_width-xs__1b7gjg59",conditions:{xs:"rarui-dropdown_width-xs__1b7gjg59",md:"rarui-dropdown_width-md__1b7gjg5a",lg:"rarui-dropdown_width-lg__1b7gjg5b",xl:"rarui-dropdown_width-xl__1b7gjg5c"}},name:"width",vars:{conditions:{xs:"var(--width-xs__1b7gjg55)",md:"var(--width-md__1b7gjg56)",lg:"var(--width-lg__1b7gjg57)",xl:"var(--width-xl__1b7gjg58)"},default:"var(--width-xs__1b7gjg55)"},dynamicScale:!0},maxWidth:{dynamic:{default:"rarui-dropdown_maxWidth-xs__1b7gjg5h",conditions:{xs:"rarui-dropdown_maxWidth-xs__1b7gjg5h",md:"rarui-dropdown_maxWidth-md__1b7gjg5i",lg:"rarui-dropdown_maxWidth-lg__1b7gjg5j",xl:"rarui-dropdown_maxWidth-xl__1b7gjg5k"}},name:"maxWidth",vars:{conditions:{xs:"var(--maxWidth-xs__1b7gjg5d)",md:"var(--maxWidth-md__1b7gjg5e)",lg:"var(--maxWidth-lg__1b7gjg5f)",xl:"var(--maxWidth-xl__1b7gjg5g)"},default:"var(--maxWidth-xs__1b7gjg5d)"},dynamicScale:!0},zIndex:{values:{100:{conditions:{xs:"rarui-dropdown_zIndex-100-xs__1b7gjg5l",md:"rarui-dropdown_zIndex-100-md__1b7gjg5m",lg:"rarui-dropdown_zIndex-100-lg__1b7gjg5n",xl:"rarui-dropdown_zIndex-100-xl__1b7gjg5o"},default:"rarui-dropdown_zIndex-100-xs__1b7gjg5l"},200:{conditions:{xs:"rarui-dropdown_zIndex-200-xs__1b7gjg5p",md:"rarui-dropdown_zIndex-200-md__1b7gjg5q",lg:"rarui-dropdown_zIndex-200-lg__1b7gjg5r",xl:"rarui-dropdown_zIndex-200-xl__1b7gjg5s"},default:"rarui-dropdown_zIndex-200-xs__1b7gjg5p"},300:{conditions:{xs:"rarui-dropdown_zIndex-300-xs__1b7gjg5t",md:"rarui-dropdown_zIndex-300-md__1b7gjg5u",lg:"rarui-dropdown_zIndex-300-lg__1b7gjg5v",xl:"rarui-dropdown_zIndex-300-xl__1b7gjg5w"},default:"rarui-dropdown_zIndex-300-xs__1b7gjg5t"},400:{conditions:{xs:"rarui-dropdown_zIndex-400-xs__1b7gjg5x",md:"rarui-dropdown_zIndex-400-md__1b7gjg5y",lg:"rarui-dropdown_zIndex-400-lg__1b7gjg5z",xl:"rarui-dropdown_zIndex-400-xl__1b7gjg510"},default:"rarui-dropdown_zIndex-400-xs__1b7gjg5x"},500:{conditions:{xs:"rarui-dropdown_zIndex-500-xs__1b7gjg511",md:"rarui-dropdown_zIndex-500-md__1b7gjg512",lg:"rarui-dropdown_zIndex-500-lg__1b7gjg513",xl:"rarui-dropdown_zIndex-500-xl__1b7gjg514"},default:"rarui-dropdown_zIndex-500-xs__1b7gjg511"},600:{conditions:{xs:"rarui-dropdown_zIndex-600-xs__1b7gjg515",md:"rarui-dropdown_zIndex-600-md__1b7gjg516",lg:"rarui-dropdown_zIndex-600-lg__1b7gjg517",xl:"rarui-dropdown_zIndex-600-xl__1b7gjg518"},default:"rarui-dropdown_zIndex-600-xs__1b7gjg515"},700:{conditions:{xs:"rarui-dropdown_zIndex-700-xs__1b7gjg519",md:"rarui-dropdown_zIndex-700-md__1b7gjg51a",lg:"rarui-dropdown_zIndex-700-lg__1b7gjg51b",xl:"rarui-dropdown_zIndex-700-xl__1b7gjg51c"},default:"rarui-dropdown_zIndex-700-xs__1b7gjg519"},800:{conditions:{xs:"rarui-dropdown_zIndex-800-xs__1b7gjg51d",md:"rarui-dropdown_zIndex-800-md__1b7gjg51e",lg:"rarui-dropdown_zIndex-800-lg__1b7gjg51f",xl:"rarui-dropdown_zIndex-800-xl__1b7gjg51g"},default:"rarui-dropdown_zIndex-800-xs__1b7gjg51d"},900:{conditions:{xs:"rarui-dropdown_zIndex-900-xs__1b7gjg51h",md:"rarui-dropdown_zIndex-900-md__1b7gjg51i",lg:"rarui-dropdown_zIndex-900-lg__1b7gjg51j",xl:"rarui-dropdown_zIndex-900-xl__1b7gjg51k"},default:"rarui-dropdown_zIndex-900-xs__1b7gjg51h"}},name:"zIndex",staticScale:{100:"var(--rarui-zIndex-100)",200:"var(--rarui-zIndex-200)",300:"var(--rarui-zIndex-300)",400:"var(--rarui-zIndex-400)",500:"var(--rarui-zIndex-500)",600:"var(--rarui-zIndex-600)",700:"var(--rarui-zIndex-700)",800:"var(--rarui-zIndex-800)",900:"var(--rarui-zIndex-900)"}}}}),n={dropdown:r({defaultClassName:"rarui-dropdown__1b7gjg50",variantClassNames:{padding:{base:"rarui-dropdown_padding_base__1b7gjg51",none:"rarui-dropdown_padding_none__1b7gjg52"}},defaultVariants:{},compoundVariants:[]}),item:r({defaultClassName:"rarui-dropdown_item__1b7gjg53",variantClassNames:{selected:{true:"rarui-dropdown_item_selected_true__1b7gjg54"}},defaultVariants:{},compoundVariants:[]})};export{_ as dropdownSprinkle,n as dropdownStyles};

package/dist/packages/input/iconButton/index.js

@@ -0,0 +1 @@
+import{iconButtonStyles as r}from"./rarui-iconButton.css.js";var s={classnames:r};export{s as iconButton};