@rarui/styles 2.2.5 → 2.3.0-rc.2

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};

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

@@ -0,0 +1,356 @@
+.rarui-iconButton__k9hrpu0 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  position: relative;
+  gap: var(--rarui-spacing-4xs);
+  font-weight: var(--rarui-fontWeight-semiBold);
+  line-height: var(--rarui-lineHeight-button-l);
+  font-size: var(--rarui-fontSize-button-l);
+  font-family: var(--rarui-fontFamily-button);
+  border-radius: var(--rarui-shape-border-radius-2xs);
+  border-width: var(--rarui-shape-border-width-1);
+  border-style: solid;
+  border-color: var(--rarui-colors-surface-brand);
+}
+.rarui-iconButton__k9hrpu0:disabled {
+  background: var(--rarui-colors-surface-disabled);
+  border-color: var(--rarui-colors-surface-disabled);
+  color: var(--rarui-colors-content-disabled);
+  cursor: not-allowed;
+}
+.rarui-iconButton__k9hrpu0:focus-within {
+  outline: none;
+  box-shadow: var(--rarui-elevation-focus-ring);
+}
+.rarui-iconButton__k9hrpu0:after {
+  content: "";
+  transition: opacity 150ms ease;
+  position: absolute;
+  opacity: 0;
+  inset: -1px;
+  border-radius: var(--rarui-shape-border-radius-2xs);
+}
+.rarui-iconButton__k9hrpu0:hover:after {
+  opacity: 1;
+}
+.rarui-iconButton__k9hrpu0:active:after {
+  opacity: 1;
+}
+.rarui-iconButton_appearance_brand__k9hrpu1 {
+  background-color: var(--rarui-colors-surface-brand);
+  border-color: var(--rarui-colors-surface-brand);
+  color: var(--rarui-colors-content-on-brand);
+}
+.rarui-iconButton_appearance_danger__k9hrpu2 {
+  background-color: var(--rarui-colors-surface-error);
+  border-color: var(--rarui-colors-surface-error);
+  color: var(--rarui-colors-content-on-error);
+}
+.rarui-iconButton_appearance_success__k9hrpu3 {
+  background-color: var(--rarui-colors-surface-success);
+  border-color: var(--rarui-colors-surface-success);
+  color: var(--rarui-colors-content-on-success);
+}
+.rarui-iconButton_appearance_warning__k9hrpu4 {
+  background-color: var(--rarui-colors-surface-warning);
+  border-color: var(--rarui-colors-surface-warning);
+  color: var(--rarui-colors-content-on-warning);
+}
+.rarui-iconButton_appearance_neutral__k9hrpu5 {
+  background-color: var(--rarui-colors-surface-invert);
+  border-color: var(--rarui-colors-surface-invert);
+  color: var(--rarui-colors-content-invert);
+}
+.rarui-iconButton_appearance_inverted__k9hrpu6 {
+  background-color: var(--rarui-colors-surface-primary);
+  border-color: var(--rarui-colors-surface-primary);
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-iconButton_size_large__k9hrpu7 {
+  height: 3rem;
+  width: 3rem;
+  font-size: var(--rarui-fontSize-button-l);
+}
+.rarui-iconButton_size_medium__k9hrpu8 {
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: var(--rarui-fontSize-button-m);
+}
+.rarui-iconButton_size_small__k9hrpu9 {
+  height: 2rem;
+  width: 2rem;
+  font-size: var(--rarui-fontSize-button-s);
+}
+.rarui-iconButton_variant_solid__k9hrpua:hover:after {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-iconButton_variant_solid__k9hrpua:active:after {
+  border-color: var(--rarui-colors-surface-press);
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-iconButton_variant_outlined__k9hrpub {
+  background-color: transparent;
+}
+.rarui-iconButton_variant_ghost__k9hrpuc {
+  background-color: transparent;
+  border-color: transparent;
+}
+.rarui-iconButton_variant_tonal__k9hrpud {
+  border-color: transparent;
+}
+.rarui-iconButton_rounded_true__k9hrpue {
+  border-radius: var(--rarui-shape-border-radius-pill);
+}
+.rarui-iconButton_rounded_true__k9hrpue:after {
+  border-radius: var(--rarui-shape-border-radius-pill);
+}
+.rarui-iconButton__compound_0__k9hrpuf {
+  color: var(--rarui-colors-content-brand);
+  border-color: var(--rarui-colors-border-brand);
+}
+.rarui-iconButton__compound_0__k9hrpuf:hover {
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-iconButton__compound_0__k9hrpuf:active {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-iconButton__compound_1__k9hrpug {
+  color: var(--rarui-colors-content-error);
+  border-color: var(--rarui-colors-border-error);
+}
+.rarui-iconButton__compound_1__k9hrpug:hover {
+  background-color: var(--rarui-colors-surface-error-hover);
+}
+.rarui-iconButton__compound_1__k9hrpug:active {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-iconButton__compound_2__k9hrpuh {
+  color: var(--rarui-colors-content-success);
+  border-color: var(--rarui-colors-border-success);
+}
+.rarui-iconButton__compound_2__k9hrpuh:hover {
+  background-color: var(--rarui-colors-surface-success-hover);
+}
+.rarui-iconButton__compound_2__k9hrpuh:active {
+  background-color: var(--rarui-colors-surface-success-press);
+}
+.rarui-iconButton__compound_3__k9hrpui {
+  color: var(--rarui-colors-content-warning);
+  border-color: var(--rarui-colors-border-warning);
+}
+.rarui-iconButton__compound_3__k9hrpui:hover {
+  background-color: var(--rarui-colors-surface-warning-hover);
+}
+.rarui-iconButton__compound_3__k9hrpui:active {
+  background-color: var(--rarui-colors-surface-warning-press);
+}
+.rarui-iconButton__compound_4__k9hrpuj {
+  color: var(--rarui-colors-content-primary);
+  border-color: var(--rarui-colors-border-secondary);
+}
+.rarui-iconButton__compound_4__k9hrpuj:hover {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-iconButton__compound_4__k9hrpuj:active {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-iconButton__compound_5__k9hrpuk {
+  color: var(--rarui-colors-content-invert);
+  border-color: var(--rarui-colors-border-invert);
+}
+.rarui-iconButton__compound_5__k9hrpuk:hover {
+  background-color: var(--rarui-colors-surface-invert-hover);
+}
+.rarui-iconButton__compound_5__k9hrpuk:active {
+  background-color: var(--rarui-colors-surface-invert-press);
+}
+.rarui-iconButton__compound_6__k9hrpul {
+  color: var(--rarui-colors-content-brand);
+}
+.rarui-iconButton__compound_6__k9hrpul:hover {
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-iconButton__compound_6__k9hrpul:active {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-iconButton__compound_7__k9hrpum {
+  color: var(--rarui-colors-content-error);
+}
+.rarui-iconButton__compound_7__k9hrpum:hover {
+  background-color: var(--rarui-colors-surface-error-hover);
+}
+.rarui-iconButton__compound_7__k9hrpum:active {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-iconButton__compound_8__k9hrpun {
+  color: var(--rarui-colors-content-success);
+}
+.rarui-iconButton__compound_8__k9hrpun:hover {
+  background-color: var(--rarui-colors-surface-success-hover);
+}
+.rarui-iconButton__compound_8__k9hrpun:active {
+  background-color: var(--rarui-colors-surface-success-press);
+}
+.rarui-iconButton__compound_9__k9hrpuo {
+  color: var(--rarui-colors-content-warning);
+}
+.rarui-iconButton__compound_9__k9hrpuo:hover {
+  background-color: var(--rarui-colors-surface-warning-hover);
+}
+.rarui-iconButton__compound_9__k9hrpuo:active {
+  background-color: var(--rarui-colors-surface-warning-press);
+}
+.rarui-iconButton__compound_10__k9hrpup {
+  color: var(--rarui-colors-content-primary);
+}
+.rarui-iconButton__compound_10__k9hrpup:hover {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-iconButton__compound_10__k9hrpup:active {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-iconButton__compound_11__k9hrpuq {
+  color: var(--rarui-colors-content-invert);
+}
+.rarui-iconButton__compound_11__k9hrpuq:hover {
+  background-color: var(--rarui-colors-surface-invert-hover);
+}
+.rarui-iconButton__compound_11__k9hrpuq:active {
+  background-color: var(--rarui-colors-surface-invert-press);
+}
+.rarui-iconButton__compound_12__k9hrpur {
+  color: var(--rarui-colors-content-brand);
+  background-color: var(--rarui-colors-surface-brand-subdued);
+}
+.rarui-iconButton__compound_12__k9hrpur:hover {
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-iconButton__compound_12__k9hrpur:active {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-iconButton__compound_12__k9hrpur:hover {
+  background-color: var(--rarui-colors-surface-brand-subdued);
+}
+.rarui-iconButton__compound_12__k9hrpur:active {
+  background-color: var(--rarui-colors-surface-brand-subdued);
+}
+.rarui-iconButton__compound_12__k9hrpur:hover:after {
+  background-color: var(--rarui-colors-surface-brand-hover);
+}
+.rarui-iconButton__compound_12__k9hrpur:active:after {
+  background-color: var(--rarui-colors-surface-brand-press);
+}
+.rarui-iconButton__compound_13__k9hrpus {
+  color: var(--rarui-colors-content-error);
+  background-color: var(--rarui-colors-surface-error-subdued);
+}
+.rarui-iconButton__compound_13__k9hrpus:hover {
+  background-color: var(--rarui-colors-surface-error-hover);
+}
+.rarui-iconButton__compound_13__k9hrpus:active {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-iconButton__compound_13__k9hrpus:hover {
+  background-color: var(--rarui-colors-surface-error-subdued);
+}
+.rarui-iconButton__compound_13__k9hrpus:active {
+  background-color: var(--rarui-colors-surface-error-subdued);
+}
+.rarui-iconButton__compound_13__k9hrpus:hover:after {
+  background-color: var(--rarui-colors-surface-error-hover);
+}
+.rarui-iconButton__compound_13__k9hrpus:active:after {
+  background-color: var(--rarui-colors-surface-error-press);
+}
+.rarui-iconButton__compound_14__k9hrput {
+  color: var(--rarui-colors-content-success);
+  background-color: var(--rarui-colors-surface-success-subdued);
+}
+.rarui-iconButton__compound_14__k9hrput:hover {
+  background-color: var(--rarui-colors-surface-success-hover);
+}
+.rarui-iconButton__compound_14__k9hrput:active {
+  background-color: var(--rarui-colors-surface-success-press);
+}
+.rarui-iconButton__compound_14__k9hrput:hover {
+  background-color: var(--rarui-colors-surface-success-subdued);
+}
+.rarui-iconButton__compound_14__k9hrput:active {
+  background-color: var(--rarui-colors-surface-success-subdued);
+}
+.rarui-iconButton__compound_14__k9hrput:hover:after {
+  background-color: var(--rarui-colors-surface-success-hover);
+}
+.rarui-iconButton__compound_14__k9hrput:active:after {
+  background-color: var(--rarui-colors-surface-success-press);
+}
+.rarui-iconButton__compound_15__k9hrpuu {
+  color: var(--rarui-colors-content-warning);
+  background-color: var(--rarui-colors-surface-warning-subdued);
+}
+.rarui-iconButton__compound_15__k9hrpuu:hover {
+  background-color: var(--rarui-colors-surface-warning-hover);
+}
+.rarui-iconButton__compound_15__k9hrpuu:active {
+  background-color: var(--rarui-colors-surface-warning-press);
+}
+.rarui-iconButton__compound_15__k9hrpuu:hover {
+  background-color: var(--rarui-colors-surface-warning-subdued);
+}
+.rarui-iconButton__compound_15__k9hrpuu:active {
+  background-color: var(--rarui-colors-surface-warning-subdued);
+}
+.rarui-iconButton__compound_15__k9hrpuu:hover:after {
+  background-color: var(--rarui-colors-surface-warning-hover);
+}
+.rarui-iconButton__compound_15__k9hrpuu:active:after {
+  background-color: var(--rarui-colors-surface-warning-press);
+}
+.rarui-iconButton__compound_16__k9hrpuv {
+  color: var(--rarui-colors-content-primary);
+  background-color: var(--rarui-colors-surface-secondary);
+}
+.rarui-iconButton__compound_16__k9hrpuv:hover {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-iconButton__compound_16__k9hrpuv:active {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-iconButton__compound_16__k9hrpuv:hover {
+  background-color: var(--rarui-colors-surface-secondary);
+}
+.rarui-iconButton__compound_16__k9hrpuv:active {
+  background-color: var(--rarui-colors-surface-secondary);
+}
+.rarui-iconButton__compound_16__k9hrpuv:hover:after {
+  background-color: var(--rarui-colors-surface-hover);
+}
+.rarui-iconButton__compound_16__k9hrpuv:active:after {
+  background-color: var(--rarui-colors-surface-press);
+}
+.rarui-iconButton__compound_17__k9hrpuw {
+  color: var(--rarui-colors-content-invert);
+  background-color: var(--rarui-colors-surface-invert-secondary);
+}
+.rarui-iconButton__compound_17__k9hrpuw:hover {
+  background-color: var(--rarui-colors-surface-invert-hover);
+}
+.rarui-iconButton__compound_17__k9hrpuw:active {
+  background-color: var(--rarui-colors-surface-invert-press);
+}
+.rarui-iconButton__compound_17__k9hrpuw:hover {
+  background-color: var(--rarui-colors-surface-invert-secondary);
+}
+.rarui-iconButton__compound_17__k9hrpuw:active {
+  background-color: var(--rarui-colors-surface-invert-secondary);
+}
+.rarui-iconButton__compound_17__k9hrpuw:hover:after {
+  background-color: var(--rarui-colors-surface-invert-hover);
+}
+.rarui-iconButton__compound_17__k9hrpuw:active:after {
+  background-color: var(--rarui-colors-surface-invert-press);
+}

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

@@ -0,0 +1,98 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const iconButtonStyles: {
+    iconButton: RuntimeFn<{
+        /**
+         * Determines the visual style of the icon button, influencing its color scheme and appearance.
+         */
+        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 icon button component.
+         * @default medium
+         */
+        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: {
+            /**
+             * Defines the visual variant of the icon button, affecting its background style, border and text.
+             */
+            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 { iconButtonStyles };

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

@@ -0,0 +1 @@
+import"./../../../themes/globals.css";import"./rarui-iconButton.css";import{c as a}from"../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js";var n={iconButton:a({defaultClassName:"rarui-iconButton__k9hrpu0",variantClassNames:{appearance:{brand:"rarui-iconButton_appearance_brand__k9hrpu1",danger:"rarui-iconButton_appearance_danger__k9hrpu2",success:"rarui-iconButton_appearance_success__k9hrpu3",warning:"rarui-iconButton_appearance_warning__k9hrpu4",neutral:"rarui-iconButton_appearance_neutral__k9hrpu5",inverted:"rarui-iconButton_appearance_inverted__k9hrpu6"},size:{large:"rarui-iconButton_size_large__k9hrpu7",medium:"rarui-iconButton_size_medium__k9hrpu8",small:"rarui-iconButton_size_small__k9hrpu9"},variant:{solid:"rarui-iconButton_variant_solid__k9hrpua",outlined:"rarui-iconButton_variant_outlined__k9hrpub",ghost:"rarui-iconButton_variant_ghost__k9hrpuc",tonal:"rarui-iconButton_variant_tonal__k9hrpud"},rounded:{true:"rarui-iconButton_rounded_true__k9hrpue"}},defaultVariants:{},compoundVariants:[[{appearance:"brand",variant:"outlined"},"rarui-iconButton__compound_0__k9hrpuf"],[{appearance:"danger",variant:"outlined"},"rarui-iconButton__compound_1__k9hrpug"],[{appearance:"success",variant:"outlined"},"rarui-iconButton__compound_2__k9hrpuh"],[{appearance:"warning",variant:"outlined"},"rarui-iconButton__compound_3__k9hrpui"],[{appearance:"neutral",variant:"outlined"},"rarui-iconButton__compound_4__k9hrpuj"],[{appearance:"inverted",variant:"outlined"},"rarui-iconButton__compound_5__k9hrpuk"],[{appearance:"brand",variant:"ghost"},"rarui-iconButton__compound_6__k9hrpul"],[{appearance:"danger",variant:"ghost"},"rarui-iconButton__compound_7__k9hrpum"],[{appearance:"success",variant:"ghost"},"rarui-iconButton__compound_8__k9hrpun"],[{appearance:"warning",variant:"ghost"},"rarui-iconButton__compound_9__k9hrpuo"],[{appearance:"neutral",variant:"ghost"},"rarui-iconButton__compound_10__k9hrpup"],[{appearance:"inverted",variant:"ghost"},"rarui-iconButton__compound_11__k9hrpuq"],[{appearance:"brand",variant:"tonal"},"rarui-iconButton__compound_12__k9hrpur"],[{appearance:"danger",variant:"tonal"},"rarui-iconButton__compound_13__k9hrpus"],[{appearance:"success",variant:"tonal"},"rarui-iconButton__compound_14__k9hrput"],[{appearance:"warning",variant:"tonal"},"rarui-iconButton__compound_15__k9hrpuu"],[{appearance:"neutral",variant:"tonal"},"rarui-iconButton__compound_16__k9hrpuv"],[{appearance:"inverted",variant:"tonal"},"rarui-iconButton__compound_17__k9hrpuw"]]})};export{n as iconButtonStyles};

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

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

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

@@ -0,0 +1,112 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const input: {
+    classnames: {
+        container: RuntimeFn<{
+            appearance: {
+                success: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":focus": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+                error: {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    ":hover": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    ":focus": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            border: {
+                true: {
+                    borderWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                false: {
+                    borderWidth: number;
+                };
+            };
+            size: {
+                large: {
+                    height: "3rem";
+                };
+                medium: {
+                    height: "2.5rem";
+                };
+                small: {
+                    height: "2rem";
+                };
+            };
+        }>;
+        input: RuntimeFn<{
+            divider: {
+                false: {};
+            };
+            size: {
+                large: {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                medium: {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                small: {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                };
+            };
+        }>;
+        leading: RuntimeFn<{
+            position: {
+                start: {
+                    borderRightWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                end: {
+                    borderLeftWidth: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            divider: {
+                true: {
+                    borderStyle: "solid";
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                false: {
+                    borderRightWidth: number;
+                    borderLeftWidth: number;
+                };
+            };
+            appearance: {
+                success: {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                error: {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            size: {
+                large: {
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                };
+                medium: {
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                };
+                small: {
+                    padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+                };
+            };
+        }>;
+    };
+};
+
+export { input };

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

@@ -0,0 +1 @@
+import{__assign as r}from"tslib";import{styles as s}from"./rarui-input.css.js";var i={classnames:r({},s)};export{i as input};