@rarui/styles 2.2.5 → 2.3.0-rc.2

package/dist/packages/input/button/rarui-button.css.d.ts

@@ -0,0 +1,105 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const buttonStyles: {
+    button: RuntimeFn<{
+        /**
+         * Specifies whether the button should take up the full width of its container.
+         * This variant is useful when you want to make a button span the entire width of its parent container.
+         *
+         */
+        full: {
+            true: {
+                width: "100%";
+            };
+        };
+        /**
+         * Defines the appearance variants for the button component.
+         * Each appearance variant corresponds to a specific background color, border color, and text color.
+         */
+        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})`;
+            };
+        };
+        /**
+         * Defines the size of the button component.
+         * @default "large"
+         */
+        size: {
+            large: {
+                gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                height: "3rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            medium: {
+                gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                height: "2.5rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            small: {
+                gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                height: "2rem";
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Defines the visual variant of the badge, affecting its background style, border and text.
+         */
+        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";
+            };
+            text: {
+                backgroundColor: "transparent";
+                textDecoration: "underline";
+                borderColor: "transparent";
+            };
+            tonal: {
+                borderColor: "transparent";
+            };
+        };
+    }>;
+};
+
+export { buttonStyles };

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

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-button.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var r={button:a({defaultClassName:"rarui-button__15gxywr0",variantClassNames:{full:{true:"rarui-button_full_true__15gxywr1"},appearance:{brand:"rarui-button_appearance_brand__15gxywr2",danger:"rarui-button_appearance_danger__15gxywr3",success:"rarui-button_appearance_success__15gxywr4",warning:"rarui-button_appearance_warning__15gxywr5",neutral:"rarui-button_appearance_neutral__15gxywr6",inverted:"rarui-button_appearance_inverted__15gxywr7"},size:{large:"rarui-button_size_large__15gxywr8",medium:"rarui-button_size_medium__15gxywr9",small:"rarui-button_size_small__15gxywra"},variant:{solid:"rarui-button_variant_solid__15gxywrb",outlined:"rarui-button_variant_outlined__15gxywrc",text:"rarui-button_variant_text__15gxywrd",tonal:"rarui-button_variant_tonal__15gxywre"}},defaultVariants:{},compoundVariants:[[{appearance:"brand",variant:"outlined"},"rarui-button__compound_0__15gxywrf"],[{appearance:"danger",variant:"outlined"},"rarui-button__compound_1__15gxywrg"],[{appearance:"success",variant:"outlined"},"rarui-button__compound_2__15gxywrh"],[{appearance:"warning",variant:"outlined"},"rarui-button__compound_3__15gxywri"],[{appearance:"neutral",variant:"outlined"},"rarui-button__compound_4__15gxywrj"],[{appearance:"inverted",variant:"outlined"},"rarui-button__compound_5__15gxywrk"],[{appearance:"brand",variant:"text"},"rarui-button__compound_6__15gxywrl"],[{appearance:"danger",variant:"text"},"rarui-button__compound_7__15gxywrm"],[{appearance:"success",variant:"text"},"rarui-button__compound_8__15gxywrn"],[{appearance:"warning",variant:"text"},"rarui-button__compound_9__15gxywro"],[{appearance:"neutral",variant:"text"},"rarui-button__compound_10__15gxywrp"],[{appearance:"inverted",variant:"text"},"rarui-button__compound_11__15gxywrq"],[{appearance:"brand",variant:"tonal"},"rarui-button__compound_12__15gxywrr"],[{appearance:"danger",variant:"tonal"},"rarui-button__compound_13__15gxywrs"],[{appearance:"success",variant:"tonal"},"rarui-button__compound_14__15gxywrt"],[{appearance:"warning",variant:"tonal"},"rarui-button__compound_15__15gxywru"],[{appearance:"neutral",variant:"tonal"},"rarui-button__compound_16__15gxywrv"],[{appearance:"inverted",variant:"tonal"},"rarui-button__compound_17__15gxywrw"]]})};export{r as buttonStyles};

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

@@ -0,0 +1,6 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { buttonStyles } from './rarui-button.css.js';
+
+type ButtonVariants = NonNullable<RecipeVariants<typeof buttonStyles.button>>;
+
+export type { ButtonVariants };

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

@@ -0,0 +1,53 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const checkbox: {
+    classnames: {
+        checkbox: RuntimeFn<{
+            error: {
+                true: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":checked": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            size: {
+                medium: {
+                    width: "1.25rem";
+                    height: "1.25rem";
+                };
+                large: {
+                    width: "1.5rem";
+                    height: "1.5rem";
+                };
+            };
+            indeterminate: {
+                true: {
+                    selectors: {
+                        "&:checked:after": {
+                            top: number;
+                            bottom: number;
+                            margin: "auto";
+                            height: number;
+                            borderLeft: "none";
+                            transform: "rotate(0deg)";
+                        };
+                    };
+                };
+            };
+        }>;
+        label: RuntimeFn<{
+            error: {
+                true: {
+                    vars: {
+                        [x: string]: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        }>;
+        container: string;
+        overlay: string;
+    };
+};
+
+export { checkbox };

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

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

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

@@ -0,0 +1,88 @@
+.rarui-checkbox__1qvfiyr1 {
+  appearance: none;
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  cursor: pointer;
+  border-width: var(--rarui-shape-border-width-2);
+  border-style: solid;
+  border-color: var(--rarui-colors-border-primary);
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  background-color: var(--rarui-colors-surface-primary);
+}
+.rarui-checkbox__1qvfiyr1:checked {
+  border: none;
+  background-color: var(--rarui-colors-surface-brand);
+}
+.rarui-checkbox__1qvfiyr1:disabled {
+  background-color: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-border-subdued);
+  pointer-events: none;
+}
+.rarui-checkbox__1qvfiyr1:after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+.rarui-checkbox__1qvfiyr1:checked:after {
+  width: 0.625rem;
+  height: 0.25rem;
+  bottom: .1875rem;
+  border-left: var(--rarui-shape-border-width-2) solid var(--rarui-colors-content-on-brand);
+  border-bottom: var(--rarui-shape-border-width-2) solid var(--rarui-colors-content-on-brand);
+  transform: rotate(-45deg);
+}
+.rarui-checkbox_error_true__1qvfiyr2 {
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-checkbox_error_true__1qvfiyr2:checked {
+  background-color: var(--rarui-colors-surface-error);
+}
+.rarui-checkbox_size_medium__1qvfiyr3 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+.rarui-checkbox_size_large__1qvfiyr4 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.rarui-checkbox_indeterminate_true__1qvfiyr5:checked:after {
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  height: 0;
+  border-left: none;
+  transform: rotate(0deg);
+}
+.rarui-checkbox_label__1qvfiyr6 {
+  --overlayBackgroundColor__1qvfiyr0: var(--rarui-colors-surface-brand-hover);
+  display: flex;
+  align-items: center;
+  position: relative;
+  gap: var(--rarui-spacing-3xs);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-checkbox_label_error_true__1qvfiyr7 {
+  --overlayBackgroundColor__1qvfiyr0: var(--rarui-colors-surface-error-hover);
+}
+.rarui-checkbox_container__1qvfiyr8 {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  padding: 6px;
+}
+.rarui-checkbox_overlay__1qvfiyr9 {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  border-radius: inherit;
+}
+.rarui-checkbox_container__1qvfiyr8:hover:not(:has(.rarui-checkbox__1qvfiyr1:disabled)) .rarui-checkbox_overlay__1qvfiyr9 {
+  background-color: var(--overlayBackgroundColor__1qvfiyr0);
+  border-radius: 50%;
+}

package/dist/packages/input/checkbox/rarui-checkbox.css.d.ts

@@ -0,0 +1,63 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const checkboxStyles: {
+    checkbox: RuntimeFn<{
+        /**
+         * Specifies whether the checkbox is in error state
+         */
+        error: {
+            true: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":checked": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the checkbox
+         */
+        size: {
+            medium: {
+                width: "1.25rem";
+                height: "1.25rem";
+            };
+            large: {
+                width: "1.5rem";
+                height: "1.5rem";
+            };
+        };
+        /**
+         * Specifies whether the checkbox is indeterminate state
+         */
+        indeterminate: {
+            true: {
+                selectors: {
+                    "&:checked:after": {
+                        top: number;
+                        bottom: number;
+                        margin: "auto";
+                        height: number;
+                        borderLeft: "none";
+                        transform: "rotate(0deg)";
+                    };
+                };
+            };
+        };
+    }>;
+    label: RuntimeFn<{
+        /**
+         * Specifies whether the label is in error state
+         */
+        error: {
+            true: {
+                vars: {
+                    [x: string]: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    }>;
+    container: string;
+    overlay: string;
+};
+
+export { checkboxStyles };

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

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-checkbox.css";import{c as r}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var e={checkbox:r({defaultClassName:"rarui-checkbox__1qvfiyr1",variantClassNames:{error:{true:"rarui-checkbox_error_true__1qvfiyr2"},size:{medium:"rarui-checkbox_size_medium__1qvfiyr3",large:"rarui-checkbox_size_large__1qvfiyr4"},indeterminate:{true:"rarui-checkbox_indeterminate_true__1qvfiyr5"}},defaultVariants:{},compoundVariants:[]}),label:r({defaultClassName:"rarui-checkbox_label__1qvfiyr6",variantClassNames:{error:{true:"rarui-checkbox_label_error_true__1qvfiyr7"}},defaultVariants:{},compoundVariants:[]}),container:"rarui-checkbox_container__1qvfiyr8",overlay:"rarui-checkbox_overlay__1qvfiyr9"};export{e as checkboxStyles};

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

@@ -0,0 +1,6 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { checkboxStyles } from './rarui-checkbox.css.js';
+
+type CheckboxVariants = NonNullable<RecipeVariants<typeof checkboxStyles.checkbox>>;
+
+export type { CheckboxVariants };

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

@@ -0,0 +1,93 @@
+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 chip: {
+    classnames: {
+        chip: RuntimeFn<{
+            pill: {
+                true: {
+                    borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            selected: {
+                true: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            size: {
+                medium: {
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    height: "2rem";
+                };
+                small: {
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    height: "1.5rem";
+                };
+            };
+            textOverflow: {
+                true: {
+                    minWidth: "auto";
+                    width: "100%";
+                };
+            };
+        }>;
+        content: RuntimeFn<{
+            textOverflow: {
+                true: {
+                    textOverflow: "ellipsis";
+                    whiteSpace: "nowrap";
+                    width: "100%";
+                    display: "block";
+                    overflow: "hidden";
+                };
+            };
+        }>;
+        close: string;
+        overlay: string;
+    };
+    sprinkle: SprinklesFn<[{
+        config: {
+            padding: {
+                values: {
+                    medium: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    small: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    medium: string;
+                    small: string;
+                };
+                name: "padding";
+            };
+        };
+    } & {
+        config: {
+            textTransform: {
+                dynamic: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+                dynamicScale: true;
+                name: "textTransform";
+                vars: {
+                    default: string;
+                    conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                };
+            };
+        };
+    }]>;
+};
+
+export { chip };

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

@@ -0,0 +1 @@
+import{chipSprinkle as r,chipStyles as s}from"./rarui-chip.css.js";var a={classnames:s,sprinkle:r};export{a as chip};

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

@@ -0,0 +1,150 @@
+.rarui-chip__1rk47pp0 {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: fit-content;
+  box-sizing: border-box;
+  position: relative;
+  border-style: solid;
+  transition: all 150ms ease;
+  overflow: hidden;
+  gap: var(--rarui-spacing-3xs);
+  font-weight: var(--rarui-fontWeight-medium);
+  font-family: var(--rarui-fontFamily-body);
+  border-width: var(--rarui-shape-border-width-1);
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  border-color: var(--rarui-colors-border-subdued);
+  background-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-chip__1rk47pp0:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-chip__1rk47pp0:hover {
+  background-color: var(--rarui-colors-surface-brand-hover);
+  border-color: var(--rarui-colors-border-brand);
+}
+.rarui-chip__1rk47pp0:active {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-chip__1rk47pp0:disabled {
+  background: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-border-disabled);
+  color: var(--rarui-colors-content-disabled);
+  cursor: not-allowed;
+}
+.rarui-chip_pill_true__1rk47pp1 {
+  border-radius: var(--rarui-shape-border-radius-pill);
+}
+.rarui-chip_selected_true__1rk47pp2 {
+  border-color: var(--rarui-colors-surface-brand);
+  background-color: var(--rarui-colors-surface-brand);
+  color: var(--rarui-colors-content-on-brand);
+}
+.rarui-chip_selected_true__1rk47pp2:hover {
+  background-color: var(--rarui-colors-surface-brand);
+}
+.rarui-chip_size_medium__1rk47pp3 {
+  line-height: var(--rarui-lineHeight-button-m);
+  font-size: var(--rarui-fontSize-button-m);
+  height: 2rem;
+}
+.rarui-chip_size_small__1rk47pp4 {
+  line-height: var(--rarui-lineHeight-button-s);
+  font-size: var(--rarui-fontSize-button-s);
+  height: 1.5rem;
+}
+.rarui-chip_textOverflow_true__1rk47pp5 {
+  min-width: auto;
+  width: 100%;
+}
+.rarui-chip_content__1rk47pp6 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--rarui-spacing-3xs);
+}
+.rarui-chip_content_textOverflow_true__1rk47pp7 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  display: block;
+  overflow: hidden;
+}
+.rarui-chip_close__1rk47pp8 {
+  transition: all 150ms ease;
+  color: var(--rarui-colors-content-secondary);
+  border-radius: var(--rarui-shape-border-radius-pill);
+}
+.rarui-chip_close__1rk47pp8:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-chip_close__1rk47pp8:hover {
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-chip_close__1rk47pp8[aria-disabled='true'] {
+  color: var(--rarui-colors-content-disabled);
+}
+.rarui-chip_overlay__1rk47pp9 {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+.rarui-chip__1rk47pp0:hover .rarui-chip_overlay__1rk47pp9 {
+  border-color: var(--rarui-colors-surface-hover);
+}
+.rarui-chip__1rk47pp0:active .rarui-chip_overlay__1rk47pp9 {
+  opacity: 1;
+  background-color: var(--rarui-colors-surface-press);
+  border-color: var(--rarui-colors-surface-press);
+}
+.rarui-chip__1rk47pp0:disabled .rarui-chip_overlay__1rk47pp9 {
+  opacity: 0;
+}
+@media screen and (min-width: 0px) {
+  .rarui-chip_textTransform-xs__1rk47ppe {
+    text-transform: var(--textTransform-xs__1rk47ppa);
+  }
+  .rarui-chip_padding-medium-xs__1rk47ppi {
+    padding: 0 var(--rarui-spacing-xs);
+  }
+  .rarui-chip_padding-small-xs__1rk47ppm {
+    padding: 0 var(--rarui-spacing-4xs);
+  }
+}
+@media screen and (min-width: 768px) {
+  .rarui-chip_textTransform-md__1rk47ppf {
+    text-transform: var(--textTransform-md__1rk47ppb);
+  }
+  .rarui-chip_padding-medium-md__1rk47ppj {
+    padding: 0 var(--rarui-spacing-xs);
+  }
+  .rarui-chip_padding-small-md__1rk47ppn {
+    padding: 0 var(--rarui-spacing-4xs);
+  }
+}
+@media screen and (min-width: 1200px) {
+  .rarui-chip_textTransform-lg__1rk47ppg {
+    text-transform: var(--textTransform-lg__1rk47ppc);
+  }
+  .rarui-chip_padding-medium-lg__1rk47ppk {
+    padding: 0 var(--rarui-spacing-xs);
+  }
+  .rarui-chip_padding-small-lg__1rk47ppo {
+    padding: 0 var(--rarui-spacing-4xs);
+  }
+}
+@media screen and (min-width: 1400px) {
+  .rarui-chip_textTransform-xl__1rk47pph {
+    text-transform: var(--textTransform-xl__1rk47ppd);
+  }
+  .rarui-chip_padding-medium-xl__1rk47ppl {
+    padding: 0 var(--rarui-spacing-xs);
+  }
+  .rarui-chip_padding-small-xl__1rk47ppp {
+    padding: 0 var(--rarui-spacing-4xs);
+  }
+}

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

@@ -0,0 +1,75 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const chipStyles: {
+    chip: RuntimeFn<{
+        /**
+         * Specifies whether the chip will be displayed in the pill shape
+         */
+        pill: {
+            true: {
+                borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies whether the chip is selected
+         */
+        selected: {
+            true: {
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                ":hover": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the chip
+         */
+        size: {
+            medium: {
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                height: "2rem";
+            };
+            small: {
+                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                height: "1.5rem";
+            };
+        };
+        /**
+         * Specifies whether to handle text overflow within the chip.
+         * When true, overflowing text is typically truncated with an ellipsis.
+         */
+        textOverflow: {
+            true: {
+                minWidth: "auto";
+                width: "100%";
+            };
+        };
+    }>;
+    content: RuntimeFn<{
+        /**
+         * Specifies whether to handle text overflow within the chip.
+         * When true, overflowing text is typically truncated with an ellipsis.
+         */
+        textOverflow: {
+            true: {
+                textOverflow: "ellipsis";
+                whiteSpace: "nowrap";
+                width: "100%";
+                display: "block";
+                overflow: "hidden";
+            };
+        };
+    }>;
+    close: string;
+    overlay: string;
+};
+declare const paddingProperties: {
+    medium: string;
+    small: string;
+};
+
+export { chipStyles, paddingProperties };

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

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-chip.css";import{c as r}from"../../../node_modules/rainbow-sprinkles/dist/createRuntimeFn-891c4670.esm.js";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var i=r({config:{textTransform:{dynamic:{default:"rarui-chip_textTransform-xs__1rk47ppe",conditions:{xs:"rarui-chip_textTransform-xs__1rk47ppe",md:"rarui-chip_textTransform-md__1rk47ppf",lg:"rarui-chip_textTransform-lg__1rk47ppg",xl:"rarui-chip_textTransform-xl__1rk47pph"}},name:"textTransform",vars:{conditions:{xs:"var(--textTransform-xs__1rk47ppa)",md:"var(--textTransform-md__1rk47ppb)",lg:"var(--textTransform-lg__1rk47ppc)",xl:"var(--textTransform-xl__1rk47ppd)"},default:"var(--textTransform-xs__1rk47ppa)"},dynamicScale:!0},padding:{values:{medium:{conditions:{xs:"rarui-chip_padding-medium-xs__1rk47ppi",md:"rarui-chip_padding-medium-md__1rk47ppj",lg:"rarui-chip_padding-medium-lg__1rk47ppk",xl:"rarui-chip_padding-medium-xl__1rk47ppl"},default:"rarui-chip_padding-medium-xs__1rk47ppi"},small:{conditions:{xs:"rarui-chip_padding-small-xs__1rk47ppm",md:"rarui-chip_padding-small-md__1rk47ppn",lg:"rarui-chip_padding-small-lg__1rk47ppo",xl:"rarui-chip_padding-small-xl__1rk47ppp"},default:"rarui-chip_padding-small-xs__1rk47ppm"}},name:"padding",staticScale:_}}}),p={chip:a({defaultClassName:"rarui-chip__1rk47pp0",variantClassNames:{pill:{true:"rarui-chip_pill_true__1rk47pp1"},selected:{true:"rarui-chip_selected_true__1rk47pp2"},size:{medium:"rarui-chip_size_medium__1rk47pp3",small:"rarui-chip_size_small__1rk47pp4"},textOverflow:{true:"rarui-chip_textOverflow_true__1rk47pp5"}},defaultVariants:{},compoundVariants:[]}),content:a({defaultClassName:"rarui-chip_content__1rk47pp6",variantClassNames:{textOverflow:{true:"rarui-chip_content_textOverflow_true__1rk47pp7"}},defaultVariants:{},compoundVariants:[]}),close:"rarui-chip_close__1rk47pp8",overlay:"rarui-chip_overlay__1rk47pp9"},_={medium:"0 var(--rarui-spacing-xs)",small:"0 var(--rarui-spacing-4xs)"};export{i as chipSprinkle,p as chipStyles,_ as paddingProperties};