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

package/dist/packages/layout/box/rarui-box.css.d.ts

@@ -0,0 +1,38 @@
+declare const boxFillProperties: {
+    currentColor: string;
+    transparent: string;
+    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "brand-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "brand-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "brand-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    disabled: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "error-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "error-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "error-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    hover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "info-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "info-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "info-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    invert: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-disabled": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "invert-secondary": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    overlay: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    press: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    success: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "success-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    warning: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning-hover": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning-press": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    "warning-subdued": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+export { boxFillProperties };

package/dist/packages/layout/box/rarui-box.types.d.ts

@@ -0,0 +1,227 @@
+import { StandardLonghandProperties, StandardShorthandProperties } from '../../../types/css.types.js';
+import { AddDollar, Conditions } from '../../../types/utils.types.js';
+import { spacingProperties, backgroundColorProperties, colorProperties, borderRadiusProperties, borderWidthProperties, borderColorProperties, shadowProperties, marginProperties, zIndexProperties, fontFamilyProperties, fontSizeProperties, fontWeightProperties, lineHeightProperties } from '../../../properties/css.js';
+import { boxFillProperties } from './rarui-box.css.js';
+
+interface BoxConditions<T> extends Conditions<T> {
+    focus?: T;
+    focusWithin?: T;
+    active?: T;
+    hover?: T;
+    disabled?: T;
+}
+type BoxDynamicProperties = Pick<StandardLonghandProperties, "display" | "width" | "height" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight" | "bottom" | "left" | "right" | "top" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "flexShrink" | "flexGrow" | "order" | "transitionDelay" | "transitionProperty" | "backgroundImage" | "backgroundBlendMode" | "backgroundRepeat" | "backgroundSize" | "flexDirection" | "flexWrap" | "flexBasis" | "justifyContent" | "justifyItems" | "alignContent" | "alignItems" | "alignSelf" | "pointerEvents" | "position" | "boxSizing" | "cursor" | "overflowX" | "overflowY" | "transitionTimingFunction" | "textAlign" | "opacity" | "backgroundPositionY" | "backgroundPositionX"> & Pick<StandardShorthandProperties, "flex" | "gridArea" | "backgroundPosition" | "flexFlow" | "borderStyle" | "overflow" | "textDecoration">;
+interface BoxSprinkle extends BoxDynamicProperties {
+    /**
+     * The gap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
+     */
+    gap?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The gridGap property sets the gaps between rows and columns. It is a shorthand for rowGap and columnGap.
+     */
+    gridGap?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The backgroundColor property sets the background color of the box.
+     * @examples ["$brand", { xs: "$brand", md: "$secondary" }]
+     */
+    backgroundColor?: AddDollar<keyof typeof backgroundColorProperties> | BoxConditions<AddDollar<keyof typeof backgroundColorProperties>>;
+    /**
+     * The color property is used to set the color of the box.
+     */
+    color?: AddDollar<keyof typeof colorProperties> | BoxConditions<AddDollar<keyof typeof colorProperties>>;
+    /**
+     * The fill color property is used to set the color of the box.
+     */
+    fill?: AddDollar<keyof typeof boxFillProperties> | BoxConditions<AddDollar<keyof typeof boxFillProperties>>;
+    /**
+     * The borderRadius property rounds the corners of an box's outer border edge.
+     */
+    borderRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
+    /**
+     * The borderTopLeftRadius property rounds the corners of an box's outer border edge.
+     */
+    borderTopLeftRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
+    /**
+     * The borderTopRightRadius property rounds the corners of an box's outer border edge.
+     */
+    borderTopRightRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
+    /**
+     * The borderBottomLeftRadius property rounds the corners of an box's outer border edge.
+     */
+    borderBottomLeftRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
+    /**
+     * The borderBottomRightRadius property rounds the corners of an box's outer border edge.
+     */
+    borderBottomRightRadius?: AddDollar<keyof typeof borderRadiusProperties> | BoxConditions<AddDollar<keyof typeof borderRadiusProperties>>;
+    /**
+     * The borderWidth property sets the width of an box's border.
+     */
+    borderWidth?: AddDollar<keyof typeof borderWidthProperties> | BoxConditions<AddDollar<keyof typeof borderWidthProperties>>;
+    /**
+     * The borderTopWidth property defines the width of the border at the top of a box.
+     */
+    borderTopWidth?: AddDollar<keyof typeof borderWidthProperties> | BoxConditions<AddDollar<keyof typeof borderWidthProperties>>;
+    /**
+     * The borderBottomWidth property defines the width of the border at the bottom of a box.
+     */
+    borderBottomWidth?: AddDollar<keyof typeof borderWidthProperties> | BoxConditions<AddDollar<keyof typeof borderWidthProperties>>;
+    /**
+     * The borderLeftWidth property defines the width of the border at the left of a box.
+     */
+    borderLeftWidth?: AddDollar<keyof typeof borderWidthProperties> | BoxConditions<AddDollar<keyof typeof borderWidthProperties>>;
+    /**
+     * The borderRightWidth property defines the width of the border at the right of a box.
+     */
+    borderRightWidth?: AddDollar<keyof typeof borderWidthProperties> | BoxConditions<AddDollar<keyof typeof borderWidthProperties>>;
+    /**
+     * The borderWidthX shorthand property defines the width of the element's border on the left and right.
+     */
+    borderWidthX?: AddDollar<keyof typeof borderWidthProperties> | BoxConditions<AddDollar<keyof typeof borderWidthProperties>>;
+    /**
+     * The borderWidthY shorthand property defines the width of the element's border on the top and bottom.
+     */
+    borderWidthY?: AddDollar<keyof typeof borderWidthProperties> | BoxConditions<AddDollar<keyof typeof borderWidthProperties>>;
+    /**
+     * The borderColor property sets the color of the box's four borders.
+     */
+    borderColor?: AddDollar<keyof typeof borderColorProperties> | BoxConditions<AddDollar<keyof typeof borderColorProperties>>;
+    /**
+     * The boxShadow property adds shadow effects around an box's frame.
+     */
+    boxShadow?: AddDollar<keyof typeof shadowProperties> | BoxConditions<AddDollar<keyof typeof shadowProperties>>;
+    /**
+     * The padding properties are used to generate space around an box's content area.
+     */
+    padding?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The paddingTop property sets the height of the padding area on the top of an box.
+     */
+    paddingTop?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The paddingBottom property sets the height of the padding area on the bottom of an box.
+     */
+    paddingBottom?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The paddingLeft property sets the width of the padding area to the left of an box.
+     */
+    paddingLeft?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The paddingLeft property sets the width of the padding area to the right of an box.
+     */
+    paddingRight?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The margin shorthand property sets the margin area on all four sides of an box.
+     */
+    margin?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The marginTop property sets the margin area on the top of an box.
+     */
+    marginTop?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The marginBottom property sets the margin area on the bottom of an box.
+     */
+    marginBottom?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The marginLeft property sets the margin area on the left side of an box.
+     */
+    marginLeft?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The marginRight property sets the margin area on the right side of an box.
+     */
+    marginRight?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | BoxConditions<AddDollar<keyof typeof zIndexProperties>>;
+    /**
+     * The p shorthand property sets the margin area on all four sides of an box.
+     */
+    p?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The pl shorthand property sets the width of the padding area to the left of an box.
+     */
+    pl?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The pl shorthand property sets the width of the padding area to the right of an box.
+     */
+    pr?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The pt shorthand property sets the height of the padding area on the top of an box.
+     */
+    pt?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The pb shorthand property sets the height of the padding area on the botton of an box.
+     */
+    pb?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The px shorthand property defines the width of the left and right padding area of a box.
+     */
+    px?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The py pt shorthand property sets the height of the padding area at the top and bottom of a box.
+     */
+    py?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The paddingX shorthand property defines the width of the left and right padding area of a box.
+     */
+    paddingX?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The paddingY pt shorthand property sets the height of the padding area at the top and bottom of a box.
+     */
+    paddingY?: AddDollar<keyof typeof spacingProperties> | BoxConditions<AddDollar<keyof typeof spacingProperties>>;
+    /**
+     * The m shorthand property sets the margin area on all four sides of an box.
+     */
+    m?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The mr property sets the margin area on the right side of an box.
+     */
+    mr?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The ml property sets the margin area on the left side of an box.
+     */
+    ml?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The mt property sets the margin area on the top of an box.
+     */
+    mt?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The marginBottom property sets the margin area on the bottom of an box.
+     */
+    mb?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The mx property defines the margin area on the left and right side of a box.
+     */
+    mx?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The my property defines the margin area on the top and bottom of a box
+     */
+    my?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The marginX property defines the margin area on the left and right side of a box.
+     */
+    marginX?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The marginY property defines the margin area on the top and bottom of a box
+     */
+    marginY?: AddDollar<keyof typeof marginProperties> | BoxConditions<AddDollar<keyof typeof marginProperties>>;
+    /**
+     * The fontFamily property sets the font family of the box.
+     */
+    fontFamily?: AddDollar<keyof typeof fontFamilyProperties> | BoxConditions<AddDollar<keyof typeof fontFamilyProperties>>;
+    /**
+     * The fontSize property sets the size of the box.
+     */
+    fontSize?: AddDollar<keyof typeof fontSizeProperties> | BoxConditions<AddDollar<keyof typeof fontSizeProperties>>;
+    /**
+     * The fontWeight property sets how thick or thin characters in box should be displayed.
+     */
+    fontWeight?: AddDollar<keyof typeof fontWeightProperties> | BoxConditions<AddDollar<keyof typeof fontWeightProperties>>;
+    /**
+     * The lineHeight property specifies the line height of the box.
+     * @default base
+     */
+    lineHeight?: AddDollar<keyof typeof lineHeightProperties> | BoxConditions<AddDollar<keyof typeof lineHeightProperties>>;
+}
+
+export type { BoxSprinkle };

package/dist/packages/layout/sidebar/index.d.ts

@@ -0,0 +1,121 @@
+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 sidebar: {
+    classnames: {
+        sidebar: RuntimeFn<{
+            position: {
+                left: {
+                    left: number;
+                    transform: "translateX(-100%)";
+                };
+                right: {
+                    right: number;
+                    transform: "translateX(100%)";
+                };
+            };
+            open: {
+                true: {
+                    opacity: number;
+                    transform: "translateX(0)";
+                };
+            };
+        }>;
+        overlay: string;
+    };
+    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";
+            };
+            padding: {
+                values: {
+                    medium: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    none: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                    small: {
+                        default: string;
+                        conditions: Record<"xs" | "xl" | "md" | "lg", string>;
+                    };
+                };
+                staticScale: {
+                    none: string;
+                    small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                name: "padding";
+            };
+        };
+    } & {
+        config: {
+            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 { sidebar };

package/dist/packages/layout/sidebar/rarui-sidebar.css.d.ts

@@ -0,0 +1,37 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const sidebarStyles: {
+    sidebar: RuntimeFn<{
+        /**
+         * Specifies where the sidebar should be positioned
+         */
+        position: {
+            left: {
+                left: number;
+                transform: "translateX(-100%)";
+            };
+            right: {
+                right: number;
+                transform: "translateX(100%)";
+            };
+        };
+        /**
+         * Determines if the sidebar is shown or not.
+         * @default true
+         */
+        open: {
+            true: {
+                opacity: number;
+                transform: "translateX(0)";
+            };
+        };
+    }>;
+    overlay: string;
+};
+declare const sidebarPaddingProperties: {
+    none: string;
+    small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+
+export { sidebarPaddingProperties, sidebarStyles };

package/dist/packages/layout/sidebar/rarui-sidebar.types.d.ts

@@ -0,0 +1,21 @@
+import { RecipeVariants } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+import { zIndexProperties } from '../../../properties/css.js';
+import { StandardLonghandProperties } from '../../../types/css.types.js';
+import { AddDollar, Conditions } from '../../../types/utils.types.js';
+import { sidebarStyles, sidebarPaddingProperties } from './rarui-sidebar.css.js';
+
+type SidebarVariants = RecipeVariants<typeof sidebarStyles.sidebar>;
+type SidebarDynamicProperties = Pick<StandardLonghandProperties, "maxWidth">;
+interface SidebarSprinkle extends SidebarDynamicProperties {
+    /**
+     * The **`padding`** CSS shorthand property sets the padding area on all four sides of an element at once.
+     * @default small
+     */
+    padding?: AddDollar<keyof typeof sidebarPaddingProperties> | Conditions<AddDollar<keyof typeof sidebarPaddingProperties>>;
+    /**
+     * The zIndex property specifies the stack order of the box.
+     */
+    zIndex?: AddDollar<keyof typeof zIndexProperties> | Conditions<AddDollar<keyof typeof zIndexProperties>>;
+}
+
+export type { SidebarSprinkle, SidebarVariants };

package/dist/packages/navigation/breadcrumb/index.d.ts

@@ -0,0 +1,16 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const breadcrumb: {
+    classnames: {
+        breadcrumb: string;
+        item: RuntimeFn<{
+            active: {
+                true: {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        }>;
+    };
+};
+
+export { breadcrumb };

package/dist/packages/navigation/breadcrumb/rarui-breadcrumb.css.d.ts

@@ -0,0 +1,18 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const breadcrumbStyles: {
+    breadcrumb: string;
+    item: RuntimeFn<{
+        /**
+         * Indicates whether the breadcrumb item is currently active.
+         * An active item is typically styled differently to show that it represents the current page.
+         */
+        active: {
+            true: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+    }>;
+};
+
+export { breadcrumbStyles };

package/dist/packages/navigation/breadcrumb/rarui-breadcrumb.types.d.ts

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

package/dist/packages/navigation/link/index.d.ts

@@ -0,0 +1,38 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const link: {
+    classnames: {
+        link: RuntimeFn<{
+            appearance: {
+                brand: {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                neutral: {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                inverted: {
+                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+            size: {
+                large: {
+                    fontSize: "1.125rem";
+                    lineHeight: "1.75rem";
+                    letterSpacing: ".0112rem";
+                };
+                small: {
+                    fontSize: ".875rem";
+                    lineHeight: "1.25rem";
+                    letterSpacing: ".0088rem";
+                };
+                medium: {
+                    fontSize: "1rem";
+                    lineHeight: "1.5rem";
+                    letterSpacing: ".01rem";
+                };
+            };
+        }>;
+    };
+};
+
+export { link };

package/dist/packages/navigation/link/rarui-link.css.d.ts

@@ -0,0 +1,42 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const styles: {
+    link: RuntimeFn<{
+        /**
+         * Determines the visual style of the link.
+         */
+        appearance: {
+            brand: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            neutral: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+            inverted: {
+                color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            };
+        };
+        /**
+         * Specifies the size of the link.
+         */
+        size: {
+            large: {
+                fontSize: "1.125rem";
+                lineHeight: "1.75rem";
+                letterSpacing: ".0112rem";
+            };
+            small: {
+                fontSize: ".875rem";
+                lineHeight: "1.25rem";
+                letterSpacing: ".0088rem";
+            };
+            medium: {
+                fontSize: "1rem";
+                lineHeight: "1.5rem";
+                letterSpacing: ".01rem";
+            };
+        };
+    }>;
+};
+
+export { styles };

package/dist/packages/navigation/link/rarui-link.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-link.css.js';
+
+type LinkVariants = NonNullable<RecipeVariants<typeof styles.link>>;
+
+export type { LinkVariants };

package/dist/packages/navigation/pagination/index.d.ts

@@ -0,0 +1,47 @@
+import { RuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/vanilla-extract-recipes.cjs.d.js';
+
+declare const pagination: {
+    classnames: {
+        container: RuntimeFn<{
+            size: {
+                dot: {
+                    gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                small: {};
+                large: {};
+            };
+        }>;
+        item: RuntimeFn<{
+            selected: {
+                true: {
+                    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})`;
+                        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    };
+                };
+            };
+            size: {
+                dot: {
+                    width: "0.75rem";
+                    height: "0.75rem";
+                    borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                small: {
+                    minWidth: "2.5rem";
+                    height: "2.5rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+                large: {
+                    minWidth: "2.75rem";
+                    height: "2.75rem";
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        }>;
+    };
+};
+
+export { pagination };