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

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

@@ -0,0 +1,54 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const selectStyles: {
+    select: RuntimeFn<{
+        /**
+         * Determines the visual style of the input, affecting its border
+         */
+        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})`;
+                };
+                ":active": {
+                    backgroundColor: `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})`;
+                };
+                ":active": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        /**
+         * Specifies the size of the badge, controlling its dimensions.
+         */
+        size: {
+            large: {
+                height: "3rem";
+            };
+            medium: {
+                height: "2.5rem";
+            };
+            small: {
+                height: "2rem";
+                padding: `0 var(--${string})` | `0 var(--${string}, ${string})` | `0 var(--${string}, ${number})`;
+            };
+        };
+    }>;
+    list: string;
+    close: string;
+};
+
+export { selectStyles };

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

@@ -0,0 +1,9 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { selectStyles } from './rarui-select.css.js';
+import { DropdownSprinkle } from '../dropdown/rarui-dropdown.types.js';
+import { StandardLonghandProperties } from '../../../types/css.types.js';
+
+type SelectVariants = NonNullable<RecipeVariants<typeof selectStyles.select>>;
+type SelectSprinkle = Pick<StandardLonghandProperties, "maxHeight"> & Pick<DropdownSprinkle, "zIndex">;
+
+export type { SelectSprinkle, SelectVariants };

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

@@ -0,0 +1,36 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const textarea: {
+    classnames: {
+        textarea: 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})`;
+                    };
+                    ":disabled": {
+                        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})`;
+                    };
+                    ":disabled": {
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        }>;
+    };
+};
+
+export { textarea };

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

@@ -0,0 +1,37 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const textareaStyles: {
+    textarea: RuntimeFn<{
+        /**
+         * Determines the visual style of the textarea, affecting its border
+         */
+        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})`;
+                };
+                ":disabled": {
+                    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})`;
+                };
+                ":disabled": {
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    }>;
+};
+
+export { textareaStyles };

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

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

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

@@ -0,0 +1,106 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const toggle: {
+    classnames: {
+        toggle: RuntimeFn<{
+            size: {
+                large: {
+                    ":before": {
+                        width: "1.5rem";
+                        height: "1.5rem";
+                    };
+                    ":after": {
+                        top: "-.3125rem";
+                        left: "-.3125rem";
+                        height: "2.75rem";
+                        width: "2.75rem";
+                    };
+                };
+                small: {
+                    ":before": {
+                        width: "1rem";
+                        height: "1rem";
+                    };
+                    ":after": {
+                        top: "-.4375rem";
+                        left: "-.5rem";
+                        height: "2.5rem";
+                        width: "2.5rem";
+                    };
+                };
+            };
+            error: {
+                true: {
+                    ":before": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                    selectors: {
+                        "&:has(input:checked):before": {
+                            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        };
+                    };
+                };
+            };
+        }>;
+        input: string;
+        slider: RuntimeFn<{
+            size: {
+                large: {
+                    width: "3.25rem";
+                    height: "2rem";
+                    ":after": {
+                        content: "";
+                    };
+                };
+                small: {
+                    width: "2.75rem";
+                    height: "1.5rem";
+                };
+            };
+            error: {
+                true: {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    "&[aria-disabled='true']": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                        borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        }>;
+        unchecked: RuntimeFn<{
+            size: {
+                large: {
+                    left: "1rem";
+                    height: "1.5rem";
+                    width: "1.5rem";
+                    borderRadius: "0.75rem";
+                };
+                small: {
+                    left: "0.75rem";
+                    width: "1rem";
+                    height: "1rem";
+                    borderRadius: "0.5rem";
+                };
+            };
+        }>;
+        checked: RuntimeFn<{
+            size: {
+                large: {
+                    left: "2.25rem";
+                    height: "1.5rem";
+                    width: "1.5rem";
+                    borderRadius: "0.75rem";
+                };
+                small: {
+                    left: "2rem";
+                    width: "1rem";
+                    height: "1rem";
+                    borderRadius: "0.5rem";
+                };
+            };
+        }>;
+    };
+};
+
+export { toggle };

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

@@ -0,0 +1,110 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const styles: {
+    toggle: RuntimeFn<{
+        /**
+         * Specifies the size of the toggle, controlling its dimensions.
+         */
+        size: {
+            large: {
+                ":before": {
+                    width: "1.5rem";
+                    height: "1.5rem";
+                };
+                ":after": {
+                    top: "-.3125rem";
+                    left: "-.3125rem";
+                    height: "2.75rem";
+                    width: "2.75rem";
+                };
+            };
+            small: {
+                ":before": {
+                    width: "1rem";
+                    height: "1rem";
+                };
+                ":after": {
+                    top: "-.4375rem";
+                    left: "-.5rem";
+                    height: "2.5rem";
+                    width: "2.5rem";
+                };
+            };
+        };
+        /**
+         * Specifies whether the radiobutton is in error state
+         */
+        error: {
+            true: {
+                ":before": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                selectors: {
+                    "&:has(input:checked):before": {
+                        backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+        };
+    }>;
+    input: string;
+    slider: RuntimeFn<{
+        size: {
+            large: {
+                width: "3.25rem";
+                height: "2rem";
+                ":after": {
+                    content: "";
+                };
+            };
+            small: {
+                width: "2.75rem";
+                height: "1.5rem";
+            };
+        };
+        error: {
+            true: {
+                backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                "&[aria-disabled='true']": {
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    borderColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    }>;
+    unchecked: RuntimeFn<{
+        size: {
+            large: {
+                left: "1rem";
+                height: "1.5rem";
+                width: "1.5rem";
+                borderRadius: "0.75rem";
+            };
+            small: {
+                left: "0.75rem";
+                width: "1rem";
+                height: "1rem";
+                borderRadius: "0.5rem";
+            };
+        };
+    }>;
+    checked: RuntimeFn<{
+        size: {
+            large: {
+                left: "2.25rem";
+                height: "1.5rem";
+                width: "1.5rem";
+                borderRadius: "0.75rem";
+            };
+            small: {
+                left: "2rem";
+                width: "1rem";
+                height: "1rem";
+                borderRadius: "0.5rem";
+            };
+        };
+    }>;
+};
+
+export { styles };

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

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