@rarui/styles 2.2.5 → 2.3.0-rc.2

package/dist/packages/input/chip/rarui-chip.types.d.ts

@@ -0,0 +1,15 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { paddingProperties, chipStyles } from './rarui-chip.css.js';
+import { StandardLonghandProperties } from '../../../types/css.types.js';
+import { AddDollar, Conditions } from '../../../types/utils.types.js';
+
+type ChipVariants = NonNullable<RecipeVariants<typeof chipStyles.chip>>;
+type ChipDynamicProperties = Pick<StandardLonghandProperties, "textTransform">;
+interface ChipSprinkle extends ChipDynamicProperties {
+    /**
+     * The padding properties are used to generate space around an chip's content area.
+     */
+    padding?: AddDollar<keyof typeof paddingProperties> | Conditions<AddDollar<keyof typeof paddingProperties>>;
+}
+
+export type { ChipSprinkle, ChipVariants };

package/dist/packages/input/datepicker/index.d.ts

@@ -0,0 +1,10 @@
+declare const datepicker: {
+    classnames: {
+        datepicker: string;
+        day: string;
+        weekday: string;
+        time: string;
+    };
+};
+
+export { datepicker };

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

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

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.d.ts

@@ -0,0 +1,112 @@
+import { SprinklesFn } from '../../../node_modules/rainbow-sprinkles/dist/declarations/src/createRuntimeFn.d.js';
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const dropdown: {
+    classnames: {
+        dropdown: RuntimeFn<{
+            padding: {
+                base: {
+                    padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                none: {
+                    padding: number;
+                };
+            };
+        }>;
+        item: RuntimeFn<{
+            selected: {
+                true: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        }>;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            zIndex: {
+                values: {
+                    100: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    200: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    300: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    400: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    500: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    600: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    700: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    800: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    900: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    "100": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "200": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "300": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "400": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "500": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "600": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "700": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "800": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "900": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "zIndex";
+            };
+        };
+    } & {
+        config: {
+            width: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "width";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+            maxWidth: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "maxWidth";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+        };
+    }]>;
+};
+
+export { dropdown };

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.d.ts

@@ -0,0 +1,30 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const dropdownStyles: {
+    dropdown: RuntimeFn<{
+        /**
+         * Specifies the padding inside the dropdown menu. This prop accepts one of the following values: "base" or "none".
+         * @default base
+         */
+        padding: {
+            base: {
+                padding: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            none: {
+                padding: number;
+            };
+        };
+    }>;
+    item: RuntimeFn<{
+        selected: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    }>;
+};
+
+export { dropdownStyles };

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/dropdown/rarui-dropdown.types.d.ts

@@ -0,0 +1,16 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { dropdownStyles } from './rarui-dropdown.css.js';
+import { StandardLonghandProperties } from '../../../types/css.types.js';
+import { AddDollar, Conditions } from '../../../types/utils.types.js';
+import { zIndexProperties } from '../../../properties/css.js';
+
+type DropdownVariants = NonNullable<RecipeVariants<typeof dropdownStyles.dropdown> & RecipeVariants<typeof dropdownStyles.item>>;
+type DropdownDynamicProperties = Pick<StandardLonghandProperties, "width" | "maxWidth">;
+interface DropdownSprinkle extends DropdownDynamicProperties {
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+
+export type { DropdownDynamicProperties, DropdownSprinkle, DropdownVariants };

package/dist/packages/input/iconButton/index.d.ts

@@ -0,0 +1,90 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const iconButton: {
+    classnames: {
+        iconButton: RuntimeFn<{
+            appearance: {
+                brand: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                danger: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                success: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                warning: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                neutral: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                inverted: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            size: {
+                large: {
+                    height: "3rem";
+                    width: "3rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                medium: {
+                    height: "2.5rem";
+                    width: "2.5rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                small: {
+                    height: "2rem";
+                    width: "2rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            variant: {
+                solid: {
+                    selectors: {
+                        "&:hover:after": {
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                        "&:active:after": {
+                            borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                    };
+                };
+                outlined: {
+                    backgroundColor: "transparent";
+                };
+                ghost: {
+                    backgroundColor: "transparent";
+                    borderColor: "transparent";
+                };
+                tonal: {
+                    borderColor: "transparent";
+                };
+            };
+            rounded: {
+                true: {
+                    borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":after": {
+                        borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        }>;
+    };
+};
+
+export { iconButton };