@lunar-js/lunar 0.0.1

package/dist/components/primitives/Button/Button.d.ts

@@ -0,0 +1,27 @@
+import { ButtonSize, ButtonVariant } from "./button.types.js";
+import { ComponentProps, FC } from "react";
+
+//#region src/components/primitives/Button/Button.d.ts
+interface ButtonProps extends ComponentProps<'button'> {
+  /**
+   * When true, the button will render as a child component using Radix UI's Slot primitive.
+   * This allows the button styles to be applied to any element while maintaining accessibility.
+   */
+  asChild?: boolean;
+  /**
+   * The visual style variant of the button.
+   */
+  variant?: ButtonVariant;
+  /**
+   * The size of the button, affecting padding and font size.
+   */
+  size?: ButtonSize;
+}
+/**
+ * Versatile button component with multiple variants and sizes.
+ * Supports rendering as child components via Radix UI's Slot primitive for flexible composition.
+ */
+declare const Button: FC<ButtonProps>;
+//#endregion
+export { Button, type ButtonProps };
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/primitives/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","names":[],"sources":["../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":[],"mappings":";;;;UAOU,WAAA,SAAoB;;AAFqC;;;SAe1D,CAAA,EAAA,OAAA;;;AAbmC;EAwB3C,OAAA,CAAA,EAfW,aAeX;;;;SAXQ;;;;;;cAOH,QAAQ,GAAG"}

package/dist/components/primitives/Button/Button.js

@@ -0,0 +1,25 @@
+import { buttonVariants } from "./button.css.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/components/primitives/Button/Button.tsx
+/**
+* Versatile button component with multiple variants and sizes.
+* Supports rendering as child components via Radix UI's Slot primitive for flexible composition.
+*/
+const Button = ({ className, size, variant, asChild = false, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		"data-slot": "button",
+		className: clsx(buttonVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+};
+var Button_default = Button;
+
+//#endregion
+export { Button_default as default };
+//# sourceMappingURL=Button.js.map

package/dist/components/primitives/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","names":["Button: FC<ButtonProps>"],"sources":["../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["import { type ComponentProps, type FC } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nimport { buttonVariants } from './button.css.js';\nimport type { ButtonSize, ButtonVariant } from './button.types.js';\n\ninterface ButtonProps extends ComponentProps<'button'> {\n  /**\n   * When true, the button will render as a child component using Radix UI's Slot primitive.\n   * This allows the button styles to be applied to any element while maintaining accessibility.\n   */\n  asChild?: boolean;\n  /**\n   * The visual style variant of the button.\n   */\n  variant?: ButtonVariant;\n  /**\n   * The size of the button, affecting padding and font size.\n   */\n  size?: ButtonSize;\n}\n\n/**\n * Versatile button component with multiple variants and sizes.\n * Supports rendering as child components via Radix UI's Slot primitive for flexible composition.\n */\nconst Button: FC<ButtonProps> = ({ className, size, variant, asChild = false, ...props }) => {\n  const Comp = asChild ? Slot : 'button';\n\n  return <Comp data-slot=\"button\" className={clsx(buttonVariants({ variant, size }), className)} {...props} />;\n};\n\nexport type { ButtonProps };\nexport default Button;\n"],"mappings":";;;;;;;;;;AA2BA,MAAMA,UAA2B,EAAE,WAAW,MAAM,SAAS,UAAU,OAAO,GAAG,YAAY;AAG3F,QAAO,oBAFM,UAAU,OAAO;EAEjB,aAAU;EAAS,WAAW,KAAK,eAAe;GAAE;GAAS;GAAM,CAAC,EAAE,UAAU;EAAE,GAAI;GAAS;;AAI9G,qBAAe"}

package/dist/components/primitives/Button/button.css.d.ts

@@ -0,0 +1,16 @@
+import "@vanilla-extract/css";
+import "@vanilla-extract/recipes";
+
+//#region src/components/primitives/Button/button.css.d.ts
+declare const BUTTON_VARIANT__PRIMARY = "primary";
+declare const BUTTON_VARIANT__SECONDARY = "secondary";
+declare const BUTTON_VARIANT__OUTLINE = "outline";
+declare const BUTTON_VARIANT__DESTRUCTIVE = "destructive";
+declare const BUTTON_VARIANT__GHOST = "ghost";
+declare const BUTTON_VARIANT__LINK = "link";
+declare const BUTTON_SIZE__LARGE = "large";
+declare const BUTTON_SIZE__MEDIUM = "medium";
+declare const BUTTON_SIZE__SMALL = "small";
+//#endregion
+export { BUTTON_SIZE__LARGE, BUTTON_SIZE__MEDIUM, BUTTON_SIZE__SMALL, BUTTON_VARIANT__DESTRUCTIVE, BUTTON_VARIANT__GHOST, BUTTON_VARIANT__LINK, BUTTON_VARIANT__OUTLINE, BUTTON_VARIANT__PRIMARY, BUTTON_VARIANT__SECONDARY };
+//# sourceMappingURL=button.css.d.ts.map

package/dist/components/primitives/Button/button.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.css.d.ts","names":[],"sources":["../../../../src/components/primitives/Button/button.css.ts"],"sourcesContent":[],"mappings":";;;;cAOM,uBAAA;cACA,yBAAA;cACA,uBAAA;cACA,2BAAA;AAWc,cAVd,qBAAA,GAJuB,OAAA;AAAA,cAKvB,oBAAA,GAJyB,MAAA;AAAA,cAMzB,kBAAA,GALuB,OAAA;AAAA,cAMvB,mBAAA,GAL2B,QAAA;AAAA,cAM3B,kBAAA,GALqB,OAAA"}

package/dist/components/primitives/Button/button.css.js

@@ -0,0 +1,202 @@
+import { themeContract } from "../../../themes/tokens/tokens.css.js";
+import { COLORS__PURE } from "../../../themes/tokens/primitives/colors.js";
+import { withCustomOutline, withSafeTransition } from "../../../themes/styles/utilities.js";
+import { createVar } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+
+//#region src/components/primitives/Button/button.css.ts
+const BUTTON_VARIANT__PRIMARY = "primary";
+const BUTTON_VARIANT__SECONDARY = "secondary";
+const BUTTON_VARIANT__OUTLINE = "outline";
+const BUTTON_VARIANT__DESTRUCTIVE = "destructive";
+const BUTTON_VARIANT__GHOST = "ghost";
+const BUTTON_VARIANT__LINK = "link";
+const BUTTON_SIZE__LARGE = "large";
+const BUTTON_SIZE__MEDIUM = "medium";
+const BUTTON_SIZE__SMALL = "small";
+const internalFontSize = createVar();
+const internalPadding = createVar();
+const buttonVariants = recipe({
+	base: [
+		withCustomOutline(themeContract.colors.shadow.interactive),
+		withSafeTransition({ transition: "all 0.2s ease-in-out" }),
+		{
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: themeContract.borderRadius.md,
+			fontSize: internalFontSize,
+			padding: internalPadding,
+			fontWeight: themeContract.typography.body.md.medium.fontWeight,
+			gap: "0.5rem",
+			whiteSpace: "nowrap",
+			flexShrink: 0,
+			border: "0",
+			cursor: "pointer",
+			userSelect: "none",
+			position: "relative",
+			textDecoration: "none",
+			outlineColor: COLORS__PURE.transparent,
+			":disabled": { cursor: "not-allowed" }
+		}
+	],
+	variants: {
+		variant: {
+			[BUTTON_VARIANT__PRIMARY]: {
+				backgroundColor: themeContract.colors.action.bg.primary.default,
+				color: themeContract.colors.action.color.primary,
+				selectors: {
+					"&:hover:not(:disabled)": { backgroundColor: themeContract.colors.action.bg.primary.hover },
+					"&:hover:not(:focus-visible)": { boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}` },
+					"&:active:not(:disabled)": {
+						backgroundColor: themeContract.colors.action.bg.primary.active,
+						transform: "translateY(1px)"
+					}
+				},
+				":disabled": {
+					backgroundColor: themeContract.colors.action.bg.primary.disabled,
+					color: themeContract.colors.text.disabled
+				}
+			},
+			[BUTTON_VARIANT__SECONDARY]: {
+				backgroundColor: themeContract.colors.action.bg.secondary.default,
+				borderColor: themeContract.colors.border.action.secondary,
+				color: themeContract.colors.text.primary,
+				selectors: {
+					"&:hover:not(:disabled)": {
+						backgroundColor: themeContract.colors.action.bg.secondary.hover,
+						boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`
+					},
+					"&:active:not(:disabled)": {
+						backgroundColor: themeContract.colors.action.bg.secondary.active,
+						transform: "translateY(1px)"
+					}
+				},
+				":disabled": {
+					backgroundColor: themeContract.colors.action.bg.secondary.disabled,
+					color: themeContract.colors.text.disabled
+				}
+			},
+			[BUTTON_VARIANT__OUTLINE]: {
+				backgroundColor: themeContract.colors.action.bg.outline.default,
+				border: themeContract.borderWidth[1],
+				borderStyle: "solid",
+				borderColor: themeContract.colors.border.interactive.default,
+				color: themeContract.colors.text.interactive.default,
+				selectors: {
+					"&:hover:not(:disabled)": {
+						backgroundColor: themeContract.colors.action.bg.outline.hover,
+						borderColor: themeContract.colors.border.interactive.hover,
+						color: themeContract.colors.text.interactive.hover,
+						boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`
+					},
+					"&:active:not(:disabled)": {
+						backgroundColor: themeContract.colors.action.bg.outline.active,
+						borderColor: themeContract.colors.border.interactive.active,
+						color: themeContract.colors.text.interactive.active,
+						transform: "translateY(1px)"
+					}
+				},
+				":disabled": {
+					backgroundColor: themeContract.colors.action.bg.outline.disabled,
+					borderColor: themeContract.colors.border.action.disabled,
+					color: themeContract.colors.action.color.outline.disabled
+				}
+			},
+			[BUTTON_VARIANT__GHOST]: {
+				backgroundColor: themeContract.colors.action.ghost.default,
+				borderColor: themeContract.colors.action.ghost.default,
+				color: themeContract.colors.text.interactive.default,
+				selectors: {
+					"&:hover:not(:disabled)": {
+						backgroundColor: themeContract.colors.action.ghost.hover,
+						color: themeContract.colors.text.interactive.hover
+					},
+					"&:active:not(:disabled)": {
+						backgroundColor: themeContract.colors.action.ghost.active,
+						color: themeContract.colors.text.interactive.active,
+						transform: "translateY(1px)"
+					}
+				},
+				":disabled": {
+					backgroundColor: themeContract.colors.action.ghost.disabled,
+					color: themeContract.colors.text.disabled
+				}
+			},
+			[BUTTON_VARIANT__LINK]: [withSafeTransition({ transition: "background-size 400ms" }), {
+				alignSelf: "center",
+				color: themeContract.colors.text.interactive.default,
+				background: `none, linear-gradient(to right, ${themeContract.colors.text.interactive.hover}, ${themeContract.colors.text.interactive.hover})`,
+				backgroundRepeat: "no-repeat",
+				backgroundPosition: "100% 100%, 0 100%",
+				backgroundSize: `100% calc(${internalFontSize} / 4), 0 calc(${internalFontSize} / 4)`,
+				borderRadius: themeContract.borderRadius.none,
+				textWrap: "nowrap",
+				padding: "0",
+				paddingBottom: "0.2em",
+				height: "min-content",
+				selectors: {
+					"&:hover:not(:disabled)": {
+						backgroundSize: `0 calc(${internalFontSize} / 4), 100% calc(${internalFontSize} / 4)`,
+						color: themeContract.colors.text.interactive.hover
+					},
+					"&:focus:not(:disabled)": {
+						backgroundSize: `0 calc(${internalFontSize} / 4), 100% calc(${internalFontSize} / 4)`,
+						color: themeContract.colors.text.interactive.hover
+					},
+					"&:active:not(:disabled)": {
+						backgroundSize: `0 calc(${internalFontSize} / 4), 100% calc(${internalFontSize} / 4)`,
+						color: themeContract.colors.text.interactive.active
+					}
+				},
+				":disabled": {
+					color: themeContract.colors.text.disabled,
+					textDecoration: "none"
+				},
+				":focus-visible": { boxShadow: "none" }
+			}],
+			[BUTTON_VARIANT__DESTRUCTIVE]: [withCustomOutline(themeContract.colors.shadow.destructive), {
+				backgroundColor: themeContract.colors.action.destructive.default,
+				borderColor: themeContract.colors.border.action.destructive,
+				color: themeContract.colors.text.inverse,
+				selectors: {
+					"&:hover:not(:disabled)": {
+						backgroundColor: themeContract.colors.action.destructive.hover,
+						boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`
+					},
+					"&:active:not(:disabled)": {
+						backgroundColor: themeContract.colors.action.destructive.active,
+						transform: "translateY(1px)"
+					}
+				},
+				":disabled": {
+					backgroundColor: themeContract.colors.action.destructive.disabled,
+					borderColor: themeContract.colors.border.action.disabled,
+					color: themeContract.colors.text.disabled
+				}
+			}]
+		},
+		size: {
+			[BUTTON_SIZE__SMALL]: { vars: {
+				[internalFontSize]: themeContract.typography.body.sm.medium.fontSize,
+				[internalPadding]: `${themeContract.spacing[1.5]} ${themeContract.spacing[3]}`
+			} },
+			[BUTTON_SIZE__MEDIUM]: { vars: {
+				[internalFontSize]: themeContract.typography.body.md.medium.fontSize,
+				[internalPadding]: `${themeContract.spacing[2]} ${themeContract.spacing[4]}`
+			} },
+			[BUTTON_SIZE__LARGE]: { vars: {
+				[internalFontSize]: themeContract.typography.body.lg.medium.fontSize,
+				[internalPadding]: `${themeContract.spacing[3]} ${themeContract.spacing[6]}`
+			} }
+		}
+	},
+	defaultVariants: {
+		variant: BUTTON_VARIANT__PRIMARY,
+		size: BUTTON_SIZE__MEDIUM
+	}
+});
+
+//#endregion
+export { BUTTON_SIZE__LARGE, BUTTON_SIZE__MEDIUM, BUTTON_SIZE__SMALL, BUTTON_VARIANT__DESTRUCTIVE, BUTTON_VARIANT__GHOST, BUTTON_VARIANT__LINK, BUTTON_VARIANT__OUTLINE, BUTTON_VARIANT__PRIMARY, BUTTON_VARIANT__SECONDARY, buttonVariants };
+//# sourceMappingURL=button.css.js.map

package/dist/components/primitives/Button/button.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.css.js","names":[],"sources":["../../../../src/components/primitives/Button/button.css.ts"],"sourcesContent":["import { createVar } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { themeContract } from '../../../themes/tokens/tokens.css.js';\nimport { withCustomOutline, withSafeTransition } from '../../../themes/styles/utilities.js';\nimport { COLORS__PURE } from '../../../themes/tokens/primitives/colors.js';\n\nconst BUTTON_VARIANT__PRIMARY = 'primary';\nconst BUTTON_VARIANT__SECONDARY = 'secondary';\nconst BUTTON_VARIANT__OUTLINE = 'outline';\nconst BUTTON_VARIANT__DESTRUCTIVE = 'destructive';\nconst BUTTON_VARIANT__GHOST = 'ghost';\nconst BUTTON_VARIANT__LINK = 'link';\n\nconst BUTTON_SIZE__LARGE = 'large';\nconst BUTTON_SIZE__MEDIUM = 'medium';\nconst BUTTON_SIZE__SMALL = 'small';\n\nconst internalFontSize = createVar();\nconst internalPadding = createVar();\n\nconst buttonVariants = recipe({\n  base: [\n    withCustomOutline(themeContract.colors.shadow.interactive),\n    withSafeTransition({ transition: 'all 0.2s ease-in-out' }),\n    {\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      borderRadius: themeContract.borderRadius.md,\n      fontSize: internalFontSize,\n      padding: internalPadding,\n      fontWeight: themeContract.typography.body.md.medium.fontWeight,\n      gap: '0.5rem',\n      whiteSpace: 'nowrap',\n      flexShrink: 0,\n      border: '0',\n      cursor: 'pointer',\n      userSelect: 'none',\n      position: 'relative',\n      textDecoration: 'none',\n      outlineColor: COLORS__PURE.transparent,\n      ':disabled': {\n        cursor: 'not-allowed',\n      },\n    },\n  ],\n  variants: {\n    variant: {\n      [BUTTON_VARIANT__PRIMARY]: {\n        backgroundColor: themeContract.colors.action.bg.primary.default,\n        color: themeContract.colors.action.color.primary,\n        selectors: {\n          '&:hover:not(:disabled)': {\n            backgroundColor: themeContract.colors.action.bg.primary.hover,\n          },\n          '&:hover:not(:focus-visible)': {\n            boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`,\n          },\n          '&:active:not(:disabled)': {\n            backgroundColor: themeContract.colors.action.bg.primary.active,\n            transform: 'translateY(1px)',\n          },\n        },\n        ':disabled': {\n          backgroundColor: themeContract.colors.action.bg.primary.disabled,\n          color: themeContract.colors.text.disabled,\n        },\n      },\n      [BUTTON_VARIANT__SECONDARY]: {\n        backgroundColor: themeContract.colors.action.bg.secondary.default,\n        borderColor: themeContract.colors.border.action.secondary,\n        color: themeContract.colors.text.primary,\n        selectors: {\n          '&:hover:not(:disabled)': {\n            backgroundColor: themeContract.colors.action.bg.secondary.hover,\n            boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`,\n          },\n          '&:active:not(:disabled)': {\n            backgroundColor: themeContract.colors.action.bg.secondary.active,\n            transform: 'translateY(1px)',\n          },\n        },\n        ':disabled': {\n          backgroundColor: themeContract.colors.action.bg.secondary.disabled,\n          color: themeContract.colors.text.disabled,\n        },\n      },\n      [BUTTON_VARIANT__OUTLINE]: {\n        backgroundColor: themeContract.colors.action.bg.outline.default,\n        border: themeContract.borderWidth[1],\n        borderStyle: 'solid',\n        borderColor: themeContract.colors.border.interactive.default,\n        color: themeContract.colors.text.interactive.default,\n        selectors: {\n          '&:hover:not(:disabled)': {\n            backgroundColor: themeContract.colors.action.bg.outline.hover,\n            borderColor: themeContract.colors.border.interactive.hover,\n            color: themeContract.colors.text.interactive.hover,\n            boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`,\n          },\n          '&:active:not(:disabled)': {\n            backgroundColor: themeContract.colors.action.bg.outline.active,\n            borderColor: themeContract.colors.border.interactive.active,\n            color: themeContract.colors.text.interactive.active,\n            transform: 'translateY(1px)',\n          },\n        },\n        ':disabled': {\n          backgroundColor: themeContract.colors.action.bg.outline.disabled,\n          borderColor: themeContract.colors.border.action.disabled,\n          color: themeContract.colors.action.color.outline.disabled,\n        },\n      },\n      [BUTTON_VARIANT__GHOST]: {\n        backgroundColor: themeContract.colors.action.ghost.default,\n        borderColor: themeContract.colors.action.ghost.default,\n        color: themeContract.colors.text.interactive.default,\n        selectors: {\n          '&:hover:not(:disabled)': {\n            backgroundColor: themeContract.colors.action.ghost.hover,\n            color: themeContract.colors.text.interactive.hover,\n          },\n          '&:active:not(:disabled)': {\n            backgroundColor: themeContract.colors.action.ghost.active,\n            color: themeContract.colors.text.interactive.active,\n            transform: 'translateY(1px)',\n          },\n        },\n        ':disabled': {\n          backgroundColor: themeContract.colors.action.ghost.disabled,\n          color: themeContract.colors.text.disabled,\n        },\n      },\n      [BUTTON_VARIANT__LINK]: [\n        withSafeTransition({\n          transition: 'background-size 400ms',\n        }),\n        {\n          alignSelf: 'center',\n          color: themeContract.colors.text.interactive.default,\n          background: `none, linear-gradient(to right, ${themeContract.colors.text.interactive.hover}, ${themeContract.colors.text.interactive.hover})`,\n          backgroundRepeat: 'no-repeat',\n          backgroundPosition: '100% 100%, 0 100%',\n          backgroundSize: `100% calc(${internalFontSize} / 4), 0 calc(${internalFontSize} / 4)`,\n          borderRadius: themeContract.borderRadius.none,\n          textWrap: 'nowrap',\n          padding: '0',\n          paddingBottom: '0.2em',\n          height: 'min-content',\n          selectors: {\n            '&:hover:not(:disabled)': {\n              backgroundSize: `0 calc(${internalFontSize} / 4), 100% calc(${internalFontSize} / 4)`,\n              color: themeContract.colors.text.interactive.hover,\n            },\n            '&:focus:not(:disabled)': {\n              backgroundSize: `0 calc(${internalFontSize} / 4), 100% calc(${internalFontSize} / 4)`,\n              color: themeContract.colors.text.interactive.hover,\n            },\n            '&:active:not(:disabled)': {\n              backgroundSize: `0 calc(${internalFontSize} / 4), 100% calc(${internalFontSize} / 4)`,\n              color: themeContract.colors.text.interactive.active,\n            },\n          },\n          ':disabled': {\n            color: themeContract.colors.text.disabled,\n            textDecoration: 'none',\n          },\n          ':focus-visible': {\n            boxShadow: 'none',\n          },\n        },\n      ],\n      [BUTTON_VARIANT__DESTRUCTIVE]: [\n        withCustomOutline(themeContract.colors.shadow.destructive),\n        {\n          backgroundColor: themeContract.colors.action.destructive.default,\n          borderColor: themeContract.colors.border.action.destructive,\n          color: themeContract.colors.text.inverse,\n          selectors: {\n            '&:hover:not(:disabled)': {\n              backgroundColor: themeContract.colors.action.destructive.hover,\n              boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`,\n            },\n            '&:active:not(:disabled)': {\n              backgroundColor: themeContract.colors.action.destructive.active,\n              transform: 'translateY(1px)',\n            },\n          },\n          ':disabled': {\n            backgroundColor: themeContract.colors.action.destructive.disabled,\n            borderColor: themeContract.colors.border.action.disabled,\n            color: themeContract.colors.text.disabled,\n          },\n        },\n      ],\n    },\n    size: {\n      [BUTTON_SIZE__SMALL]: {\n        vars: {\n          [internalFontSize]: themeContract.typography.body.sm.medium.fontSize,\n          [internalPadding]: `${themeContract.spacing[1.5]} ${themeContract.spacing[3]}`,\n        },\n      },\n      [BUTTON_SIZE__MEDIUM]: {\n        vars: {\n          [internalFontSize]: themeContract.typography.body.md.medium.fontSize,\n          [internalPadding]: `${themeContract.spacing[2]} ${themeContract.spacing[4]}`,\n        },\n      },\n      [BUTTON_SIZE__LARGE]: {\n        vars: {\n          [internalFontSize]: themeContract.typography.body.lg.medium.fontSize,\n          [internalPadding]: `${themeContract.spacing[3]} ${themeContract.spacing[6]}`,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    variant: BUTTON_VARIANT__PRIMARY,\n    size: BUTTON_SIZE__MEDIUM,\n  },\n});\n\nexport {\n  BUTTON_VARIANT__PRIMARY,\n  BUTTON_VARIANT__SECONDARY,\n  BUTTON_VARIANT__OUTLINE,\n  BUTTON_VARIANT__DESTRUCTIVE,\n  BUTTON_VARIANT__GHOST,\n  BUTTON_VARIANT__LINK,\n  BUTTON_SIZE__LARGE,\n  BUTTON_SIZE__MEDIUM,\n  BUTTON_SIZE__SMALL,\n  buttonVariants,\n};\n"],"mappings":"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"}

package/dist/components/primitives/Button/button.types.d.ts

@@ -0,0 +1,8 @@
+import { BUTTON_SIZE__LARGE, BUTTON_SIZE__MEDIUM, BUTTON_SIZE__SMALL, BUTTON_VARIANT__DESTRUCTIVE, BUTTON_VARIANT__GHOST, BUTTON_VARIANT__LINK, BUTTON_VARIANT__OUTLINE, BUTTON_VARIANT__PRIMARY, BUTTON_VARIANT__SECONDARY } from "./button.css.js";
+
+//#region src/components/primitives/Button/button.types.d.ts
+type ButtonVariant = typeof BUTTON_VARIANT__PRIMARY | typeof BUTTON_VARIANT__SECONDARY | typeof BUTTON_VARIANT__OUTLINE | typeof BUTTON_VARIANT__DESTRUCTIVE | typeof BUTTON_VARIANT__GHOST | typeof BUTTON_VARIANT__LINK;
+type ButtonSize = typeof BUTTON_SIZE__LARGE | typeof BUTTON_SIZE__MEDIUM | typeof BUTTON_SIZE__SMALL;
+//#endregion
+export { type ButtonSize, type ButtonVariant };
+//# sourceMappingURL=button.types.d.ts.map

package/dist/components/primitives/Button/button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.types.d.ts","names":[],"sources":["../../../../src/components/primitives/Button/button.types.ts"],"sourcesContent":[],"mappings":";;;KAYK,aAAA,UACM,iCACA,mCACA,iCACA,qCACA,+BACA;KAEN,UAAA,UAAoB,4BAA4B,6BAA6B"}

package/dist/components/primitives/Input/Input.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps, FC } from "react";
+
+//#region src/components/primitives/Input/Input.d.ts
+
+/**
+ * Standard input component with consistent styling and design system integration.
+ * Extends native HTML input element with theme-aware styling.
+ */
+declare const Input: FC<ComponentProps<'input'>>;
+//#endregion
+export { Input };
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/primitives/Input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","names":[],"sources":["../../../../src/components/primitives/Input/Input.tsx"],"sourcesContent":[],"mappings":";;;;;;AAAqD;;cAQ/C,KAAU,EAAH,EAAG,CAAA,cAAA,CAAA,OAAA,CAAA,CAAA"}

package/dist/components/primitives/Input/Input.js

@@ -0,0 +1,21 @@
+import { input } from "./input.css.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/primitives/Input/Input.tsx
+/**
+* Standard input component with consistent styling and design system integration.
+* Extends native HTML input element with theme-aware styling.
+*/
+const Input = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("input", {
+		"data-slot": "input",
+		className: clsx(input, className),
+		...props
+	});
+};
+var Input_default = Input;
+
+//#endregion
+export { Input_default as default };
+//# sourceMappingURL=Input.js.map

package/dist/components/primitives/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","names":["Input: FC<ComponentProps<'input'>>"],"sources":["../../../../src/components/primitives/Input/Input.tsx"],"sourcesContent":["import { type ComponentProps, type FC } from 'react';\nimport clsx from 'clsx';\nimport { input } from './input.css.js';\n\n/**\n * Standard input component with consistent styling and design system integration.\n * Extends native HTML input element with theme-aware styling.\n */\nconst Input: FC<ComponentProps<'input'>> = ({ className, ...props }) => {\n  return <input data-slot=\"input\" className={clsx(input, className)} {...props} />;\n};\n\nexport default Input;\n"],"mappings":";;;;;;;;;AAQA,MAAMA,SAAsC,EAAE,WAAW,GAAG,YAAY;AACtE,QAAO,oBAAC;EAAM,aAAU;EAAQ,WAAW,KAAK,OAAO,UAAU;EAAE,GAAI;GAAS;;AAGlF,oBAAe"}

package/dist/components/primitives/Input/input.css.js

@@ -0,0 +1,54 @@
+import { BREAKPOINT__MD } from "../../../constants/theming.js";
+import { themeContract } from "../../../themes/tokens/tokens.css.js";
+import { COLORS__PURE } from "../../../themes/tokens/primitives/colors.js";
+import { withBreakpoint, withCustomOutline, withSafeTransition } from "../../../themes/styles/utilities.js";
+import { style } from "@vanilla-extract/css";
+
+//#region src/components/primitives/Input/input.css.ts
+const input = style([
+	withBreakpoint(BREAKPOINT__MD, { fontSize: themeContract.typography.body.sm.medium.fontSize }),
+	withCustomOutline(themeContract.colors.shadow.focus),
+	withSafeTransition({ transition: "color 150ms ease-in-out, box-shadow 150ms ease-in-out" }),
+	{
+		width: "100%",
+		minWidth: 0,
+		boxSizing: "border-box",
+		borderRadius: themeContract.borderRadius.md,
+		border: `${themeContract.borderWidth[1]} solid ${themeContract.colors.input.border.default}`,
+		backgroundColor: COLORS__PURE.transparent,
+		paddingLeft: themeContract.spacing[3],
+		paddingRight: themeContract.spacing[3],
+		paddingTop: themeContract.spacing[1],
+		paddingBottom: themeContract.spacing[1],
+		fontSize: themeContract.typography.body.md.medium.fontSize,
+		lineHeight: themeContract.typography.body.md.medium.lineHeight,
+		boxShadow: themeContract.boxShadow.sm,
+		color: themeContract.colors.text.primary,
+		selectors: {
+			"&[aria-invalid=\"true\"]": { borderColor: themeContract.colors.border.error },
+			...withCustomOutline(themeContract.colors.shadow.destructive, "&[aria-invalid=\"true\"]")
+		},
+		"::file-selector-button": {
+			display: "inline-flex",
+			border: 0,
+			backgroundColor: COLORS__PURE.transparent,
+			fontSize: themeContract.typography.body.md.medium.fontSize,
+			fontWeight: themeContract.typography.body.md.medium.fontWeight,
+			color: themeContract.colors.text.primary
+		},
+		"::placeholder": { color: themeContract.colors.input.text.placeholder },
+		"::selection": {
+			backgroundColor: themeContract.colors.action.bg.primary.default,
+			color: themeContract.colors.action.color.primary
+		},
+		":disabled": {
+			pointerEvents: "none",
+			cursor: "not-allowed",
+			opacity: "0.5"
+		}
+	}
+]);
+
+//#endregion
+export { input };
+//# sourceMappingURL=input.css.js.map

package/dist/components/primitives/Input/input.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.css.js","names":[],"sources":["../../../../src/components/primitives/Input/input.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { themeContract } from '../../../themes/tokens/tokens.css.js';\nimport { withBreakpoint, withCustomOutline, withSafeTransition } from '../../../themes/styles/utilities.js';\nimport { BREAKPOINT__MD } from '../../../constants/theming.js';\nimport { COLORS__PURE } from '../../../themes/tokens/primitives/colors.js';\n\nconst input = style([\n  withBreakpoint(BREAKPOINT__MD, {\n    fontSize: themeContract.typography.body.sm.medium.fontSize,\n  }),\n  withCustomOutline(themeContract.colors.shadow.focus),\n  withSafeTransition({\n    transition: 'color 150ms ease-in-out, box-shadow 150ms ease-in-out',\n  }),\n  {\n    width: '100%',\n    minWidth: 0,\n    boxSizing: 'border-box',\n    borderRadius: themeContract.borderRadius.md,\n    border: `${themeContract.borderWidth[1]} solid ${themeContract.colors.input.border.default}`,\n    backgroundColor: COLORS__PURE.transparent,\n    paddingLeft: themeContract.spacing[3],\n    paddingRight: themeContract.spacing[3],\n    paddingTop: themeContract.spacing[1],\n    paddingBottom: themeContract.spacing[1],\n    fontSize: themeContract.typography.body.md.medium.fontSize,\n    lineHeight: themeContract.typography.body.md.medium.lineHeight,\n    boxShadow: themeContract.boxShadow.sm,\n    color: themeContract.colors.text.primary,\n    selectors: {\n      '&[aria-invalid=\"true\"]': {\n        borderColor: themeContract.colors.border.error,\n      },\n      ...withCustomOutline(themeContract.colors.shadow.destructive, '&[aria-invalid=\"true\"]'),\n    },\n\n    '::file-selector-button': {\n      display: 'inline-flex',\n      border: 0,\n      backgroundColor: COLORS__PURE.transparent,\n      fontSize: themeContract.typography.body.md.medium.fontSize,\n      fontWeight: themeContract.typography.body.md.medium.fontWeight,\n      color: themeContract.colors.text.primary,\n    },\n\n    '::placeholder': {\n      color: themeContract.colors.input.text.placeholder,\n    },\n\n    '::selection': {\n      backgroundColor: themeContract.colors.action.bg.primary.default,\n      color: themeContract.colors.action.color.primary,\n    },\n\n    ':disabled': {\n      pointerEvents: 'none',\n      cursor: 'not-allowed',\n      opacity: '0.5',\n    },\n  },\n]);\n\nexport { input };\n"],"mappings":";;;;;;;AAOA,MAAM,QAAQ,MAAM;CAClB,eAAe,gBAAgB,EAC7B,UAAU,cAAc,WAAW,KAAK,GAAG,OAAO,UACnD,CAAC;CACF,kBAAkB,cAAc,OAAO,OAAO,MAAM;CACpD,mBAAmB,EACjB,YAAY,yDACb,CAAC;CACF;EACE,OAAO;EACP,UAAU;EACV,WAAW;EACX,cAAc,cAAc,aAAa;EACzC,QAAQ,GAAG,cAAc,YAAY,GAAG,SAAS,cAAc,OAAO,MAAM,OAAO;EACnF,iBAAiB,aAAa;EAC9B,aAAa,cAAc,QAAQ;EACnC,cAAc,cAAc,QAAQ;EACpC,YAAY,cAAc,QAAQ;EAClC,eAAe,cAAc,QAAQ;EACrC,UAAU,cAAc,WAAW,KAAK,GAAG,OAAO;EAClD,YAAY,cAAc,WAAW,KAAK,GAAG,OAAO;EACpD,WAAW,cAAc,UAAU;EACnC,OAAO,cAAc,OAAO,KAAK;EACjC,WAAW;GACT,4BAA0B,EACxB,aAAa,cAAc,OAAO,OAAO,OAC1C;GACD,GAAG,kBAAkB,cAAc,OAAO,OAAO,aAAa,2BAAyB;GACxF;EAED,0BAA0B;GACxB,SAAS;GACT,QAAQ;GACR,iBAAiB,aAAa;GAC9B,UAAU,cAAc,WAAW,KAAK,GAAG,OAAO;GAClD,YAAY,cAAc,WAAW,KAAK,GAAG,OAAO;GACpD,OAAO,cAAc,OAAO,KAAK;GAClC;EAED,iBAAiB,EACf,OAAO,cAAc,OAAO,MAAM,KAAK,aACxC;EAED,eAAe;GACb,iBAAiB,cAAc,OAAO,OAAO,GAAG,QAAQ;GACxD,OAAO,cAAc,OAAO,OAAO,MAAM;GAC1C;EAED,aAAa;GACX,eAAe;GACf,QAAQ;GACR,SAAS;GACV;EACF;CACF,CAAC"}

package/dist/components/primitives/Label/Label.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, FC } from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+//#region src/components/primitives/Label/Label.d.ts
+
+/**
+ * Accessible label component built on Radix UI's Label primitive.
+ * Provides proper form control labeling with consistent styling.
+ */
+declare const Label: FC<ComponentProps<typeof LabelPrimitive.Root>>;
+//#endregion
+export { Label };
+//# sourceMappingURL=Label.d.ts.map

package/dist/components/primitives/Label/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","names":[],"sources":["../../../../src/components/primitives/Label/Label.tsx"],"sourcesContent":[],"mappings":";;;;;;;AACwD;;cASlD,KAAgC,EAAzB,EAAwC,CAArC,cAAqC,CAAA,OAAf,cAAA,CAAe,IAAA,CAAA,CAAA"}

package/dist/components/primitives/Label/Label.js

@@ -0,0 +1,22 @@
+import { label } from "./label.css.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+//#region src/components/primitives/Label/Label.tsx
+/**
+* Accessible label component built on Radix UI's Label primitive.
+* Provides proper form control labeling with consistent styling.
+*/
+const Label = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+		"data-slot": "label",
+		className: clsx(label, className),
+		...props
+	});
+};
+var Label_default = Label;
+
+//#endregion
+export { Label_default as default };
+//# sourceMappingURL=Label.js.map

package/dist/components/primitives/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","names":["Label: FC<ComponentProps<typeof LabelPrimitive.Root>>"],"sources":["../../../../src/components/primitives/Label/Label.tsx"],"sourcesContent":["import { type ComponentProps, type FC } from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport clsx from 'clsx';\n\nimport { label } from './label.css.js';\n\n/**\n * Accessible label component built on Radix UI's Label primitive.\n * Provides proper form control labeling with consistent styling.\n */\nconst Label: FC<ComponentProps<typeof LabelPrimitive.Root>> = ({ className, ...props }) => {\n  return <LabelPrimitive.Root data-slot=\"label\" className={clsx(label, className)} {...props} />;\n};\n\nexport default Label;\n"],"mappings":";;;;;;;;;;AAUA,MAAMA,SAAyD,EAAE,WAAW,GAAG,YAAY;AACzF,QAAO,oBAAC,eAAe;EAAK,aAAU;EAAQ,WAAW,KAAK,OAAO,UAAU;EAAE,GAAI;GAAS;;AAGhG,oBAAe"}

package/dist/components/primitives/Label/label.css.js

@@ -0,0 +1,35 @@
+import { themeContract } from "../../../themes/tokens/tokens.css.js";
+import { style } from "@vanilla-extract/css";
+
+//#region src/components/primitives/Label/label.css.ts
+const label = style({
+	display: "flex",
+	alignItems: "center",
+	gap: themeContract.spacing[2],
+	fontSize: themeContract.typography.label.lg.medium.fontSize,
+	lineHeight: themeContract.typography.label.lg.medium.lineHeight,
+	fontWeight: themeContract.typography.label.lg.medium.fontWeight,
+	userSelect: "none",
+	selectors: {
+		"[data-disabled=\"true\"] &": {
+			pointerEvents: "none",
+			opacity: .5
+		},
+		":disabled + &": {
+			cursor: "not-allowed",
+			opacity: .5
+		},
+		"input:disabled + &": {
+			cursor: "not-allowed",
+			opacity: .5
+		},
+		":is(input, select, textarea):disabled + &": {
+			cursor: "not-allowed",
+			opacity: .5
+		}
+	}
+});
+
+//#endregion
+export { label };
+//# sourceMappingURL=label.css.js.map

package/dist/components/primitives/Label/label.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.css.js","names":[],"sources":["../../../../src/components/primitives/Label/label.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { themeContract } from '../../../themes/tokens/tokens.css.js';\n\nconst label = style({\n  display: 'flex',\n  alignItems: 'center',\n  gap: themeContract.spacing[2],\n\n  fontSize: themeContract.typography.label.lg.medium.fontSize,\n  lineHeight: themeContract.typography.label.lg.medium.lineHeight,\n  fontWeight: themeContract.typography.label.lg.medium.fontWeight,\n\n  userSelect: 'none',\n\n  selectors: {\n    '[data-disabled=\"true\"] &': {\n      pointerEvents: 'none',\n      opacity: 0.5,\n    },\n\n    ':disabled + &': {\n      cursor: 'not-allowed',\n      opacity: 0.5,\n    },\n\n    'input:disabled + &': {\n      cursor: 'not-allowed',\n      opacity: 0.5,\n    },\n\n    ':is(input, select, textarea):disabled + &': {\n      cursor: 'not-allowed',\n      opacity: 0.5,\n    },\n  },\n});\n\nexport { label };\n"],"mappings":";;;;AAIA,MAAM,QAAQ,MAAM;CAClB,SAAS;CACT,YAAY;CACZ,KAAK,cAAc,QAAQ;CAE3B,UAAU,cAAc,WAAW,MAAM,GAAG,OAAO;CACnD,YAAY,cAAc,WAAW,MAAM,GAAG,OAAO;CACrD,YAAY,cAAc,WAAW,MAAM,GAAG,OAAO;CAErD,YAAY;CAEZ,WAAW;EACT,8BAA4B;GAC1B,eAAe;GACf,SAAS;GACV;EAED,iBAAiB;GACf,QAAQ;GACR,SAAS;GACV;EAED,sBAAsB;GACpB,QAAQ;GACR,SAAS;GACV;EAED,6CAA6C;GAC3C,QAAQ;GACR,SAAS;GACV;EACF;CACF,CAAC"}

package/dist/components/primitives/Typography/Text.d.ts

@@ -0,0 +1,40 @@
+import { TextColor, TextSize, TextType, TextWeight } from "./text.types.js";
+import { ComponentProps, FC } from "react";
+
+//#region src/components/primitives/Typography/Text.d.ts
+interface TextProps extends ComponentProps<'h1'> {
+  /**
+   * When true, the component will render as a child component using Radix UI's Slot primitive.
+   * This allows the text styles to be applied to any element while maintaining accessibility.
+   */
+  asChild?: boolean;
+  /**
+   * HTML element to render as.
+   */
+  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'small';
+  /**
+   * Text style variant that determines the overall visual appearance.
+   */
+  variant?: TextType;
+  /**
+   * Visual size variant - independent of semantic HTML element.
+   * Allows for flexible styling while maintaining proper semantic structure.
+   */
+  size?: TextSize;
+  /**
+   * Color variant for the text.
+   */
+  color?: TextColor;
+  /**
+   * Font weight variant for the text.
+   */
+  weight?: TextWeight;
+}
+/**
+ * Flexible text component that supports multiple HTML elements with consistent styling.
+ * Allows semantic HTML structure while providing design system typography variants.
+ */
+declare const Text: FC<TextProps>;
+//#endregion
+export { Text, type TextProps };
+//# sourceMappingURL=Text.d.ts.map

package/dist/components/primitives/Typography/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","names":[],"sources":["../../../../src/components/primitives/Typography/Text.tsx"],"sourcesContent":[],"mappings":";;;;UAOU,SAAA,SAAkB;;AAFqD;;;SAoBxE,CAAA,EAAA,OAAA;;;;EAlBiC,EAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,MAAA,GAAA,GAAA,GAAA,OAAA;EAiCpC;;;SAAM,CAAA,EApBA,QAoBA;EAAE;;;;SAfL;;;;UAIC;;;;WAIC;;;;;;cAOL,MAAM,GAAG"}

package/dist/components/primitives/Typography/Text.js

@@ -0,0 +1,28 @@
+import { textVariants } from "./text.css.js";
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+
+//#region src/components/primitives/Typography/Text.tsx
+/**
+* Flexible text component that supports multiple HTML elements with consistent styling.
+* Allows semantic HTML structure while providing design system typography variants.
+*/
+const Text = ({ ref, className, asChild, as: tag, variant, size, color, weight, ...props }) => {
+	return /* @__PURE__ */ jsx(asChild ? Slot : tag, {
+		ref,
+		"data-slot": tag,
+		className: clsx(textVariants({
+			variant,
+			size,
+			color,
+			weight
+		}), className),
+		...props
+	});
+};
+var Text_default = Text;
+
+//#endregion
+export { Text_default as default };
+//# sourceMappingURL=Text.js.map

package/dist/components/primitives/Typography/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","names":["Text: FC<TextProps>"],"sources":["../../../../src/components/primitives/Typography/Text.tsx"],"sourcesContent":["import type { ComponentProps, FC } from 'react';\nimport { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx';\n\nimport { textVariants } from './text.css.js';\nimport type { TextColor, TextSize, TextType, TextWeight } from './text.types.js';\n\ninterface TextProps extends ComponentProps<'h1'> {\n  /**\n   * When true, the component will render as a child component using Radix UI's Slot primitive.\n   * This allows the text styles to be applied to any element while maintaining accessibility.\n   */\n  asChild?: boolean;\n  /**\n   * HTML element to render as.\n   */\n  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'small';\n  /**\n   * Text style variant that determines the overall visual appearance.\n   */\n  variant?: TextType;\n  /**\n   * Visual size variant - independent of semantic HTML element.\n   * Allows for flexible styling while maintaining proper semantic structure.\n   */\n  size?: TextSize;\n  /**\n   * Color variant for the text.\n   */\n  color?: TextColor;\n  /**\n   * Font weight variant for the text.\n   */\n  weight?: TextWeight;\n}\n\n/**\n * Flexible text component that supports multiple HTML elements with consistent styling.\n * Allows semantic HTML structure while providing design system typography variants.\n */\nconst Text: FC<TextProps> = ({ ref, className, asChild, as: tag, variant, size, color, weight, ...props }) => {\n  const Comp = asChild ? Slot : tag;\n\n  return (\n    <Comp\n      ref={ref}\n      data-slot={tag}\n      className={clsx(textVariants({ variant, size, color, weight }), className)}\n      {...props}\n    />\n  );\n};\n\nexport type { TextProps };\nexport default Text;\n"],"mappings":";;;;;;;;;;AAwCA,MAAMA,QAAuB,EAAE,KAAK,WAAW,SAAS,IAAI,KAAK,SAAS,MAAM,OAAO,QAAQ,GAAG,YAAY;AAG5G,QACE,oBAHW,UAAU,OAAO;EAIrB;EACL,aAAW;EACX,WAAW,KAAK,aAAa;GAAE;GAAS;GAAM;GAAO;GAAQ,CAAC,EAAE,UAAU;EAC1E,GAAI;GACJ;;AAKN,mBAAe"}