@x-green/components 0.1.0

package/dist/index.js

@@ -0,0 +1,523 @@
+import './index.css'
+import { tv as e } from "tailwind-variants";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/button-variants.ts
+var n = ["disabled:pointer-events-none disabled:cursor-not-allowed", "disabled:border-neutral-500 disabled:bg-neutral-50 disabled:text-neutral-500"].join(" "), r = ["disabled:pointer-events-none disabled:cursor-not-allowed", "disabled:border-transparent disabled:bg-transparent disabled:text-neutral-500"].join(" "), i = ["focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary", "data-[status=focus]:isolate data-[status=focus]:outline-2 data-[status=focus]:outline-offset-2 data-[status=focus]:outline-primary"].join(" "), a = e({
+	base: [
+		"box-border inline-flex flex-row items-center justify-center gap-2",
+		"h-[44px] px-3",
+		"rounded-lg border border-solid",
+		"body-md-semibold",
+		"cursor-pointer transition-colors",
+		"focus-visible:isolate",
+		i
+	].join(" "),
+	variants: { variant: {
+		primary: [
+			"border-primary bg-primary text-white",
+			"hover:border-primary-hover hover:bg-primary-hover",
+			"focus-visible:border-primary focus-visible:bg-primary",
+			"data-[status=hover]:border-primary-hover data-[status=hover]:bg-primary-hover",
+			"data-[status=focus]:border-primary data-[status=focus]:bg-primary",
+			n
+		].join(" "),
+		outline: [
+			"border-primary bg-outline text-primary",
+			"hover:border-primary-hover hover:bg-outline hover:text-primary-hover",
+			"focus-visible:border-primary focus-visible:bg-outline focus-visible:text-primary",
+			"data-[status=hover]:border-primary-hover data-[status=hover]:bg-outline data-[status=hover]:text-primary-hover",
+			"data-[status=focus]:border-primary data-[status=focus]:bg-outline data-[status=focus]:text-primary",
+			n
+		].join(" "),
+		transparent: [
+			"border-transparent bg-transparent text-primary",
+			"hover:border-transparent hover:bg-transparent hover:text-primary-hover",
+			"focus-visible:border-transparent focus-visible:bg-transparent focus-visible:text-primary",
+			"data-[status=hover]:border-transparent data-[status=hover]:bg-transparent data-[status=hover]:text-primary-hover",
+			"data-[status=focus]:border-transparent data-[status=focus]:bg-transparent data-[status=focus]:text-primary",
+			r
+		].join(" "),
+		error: [
+			"border-error bg-error text-white",
+			"hover:border-error-hover hover:bg-error-hover",
+			"focus-visible:border-error focus-visible:bg-error",
+			"focus-visible:outline-error",
+			"data-[status=hover]:border-error-hover data-[status=hover]:bg-error-hover",
+			"data-[status=focus]:border-error data-[status=focus]:bg-error data-[status=focus]:outline-error",
+			n
+		].join(" "),
+		"outline-error": [
+			"border-error bg-outline text-error",
+			"hover:border-error-hover hover:bg-outline hover:text-error-hover",
+			"focus-visible:border-error focus-visible:bg-outline focus-visible:text-error",
+			"focus-visible:outline-error",
+			"data-[status=hover]:border-error-hover data-[status=hover]:bg-outline data-[status=hover]:text-error-hover",
+			"data-[status=focus]:border-error data-[status=focus]:bg-outline data-[status=focus]:text-error data-[status=focus]:outline-error",
+			n
+		].join(" "),
+		"transparent-error": [
+			"border-transparent bg-transparent text-error",
+			"hover:border-transparent hover:bg-transparent hover:text-error-hover",
+			"focus-visible:border-transparent focus-visible:bg-transparent focus-visible:text-error",
+			"focus-visible:outline-error",
+			"data-[status=hover]:border-transparent data-[status=hover]:bg-transparent data-[status=hover]:text-error-hover",
+			"data-[status=focus]:border-transparent data-[status=focus]:bg-transparent data-[status=focus]:text-error data-[status=focus]:outline-error",
+			r
+		].join(" "),
+		neutral: [
+			"border-neutral-200 bg-outline text-neutral-800",
+			"hover:border-neutral-300 hover:bg-neutral-50 hover:text-neutral-800",
+			"focus-visible:border-neutral-200 focus-visible:bg-outline focus-visible:text-neutral-800",
+			"data-[status=hover]:border-neutral-300 data-[status=hover]:bg-neutral-50 data-[status=hover]:text-neutral-800",
+			"data-[status=focus]:border-neutral-200 data-[status=focus]:bg-outline data-[status=focus]:text-neutral-800",
+			n
+		].join(" "),
+		"outline-neutral": [
+			"border-neutral-200 bg-outline text-neutral-800",
+			"hover:border-neutral-300 hover:bg-outline hover:text-neutral-800",
+			"focus-visible:border-neutral-200 focus-visible:bg-outline focus-visible:text-neutral-800",
+			"data-[status=hover]:border-neutral-300 data-[status=hover]:bg-outline data-[status=hover]:text-neutral-800",
+			"data-[status=focus]:border-neutral-200 data-[status=focus]:bg-outline data-[status=focus]:text-neutral-800",
+			n
+		].join(" "),
+		"transparent-neutral": [
+			"border-transparent bg-transparent text-neutral-800",
+			"hover:border-transparent hover:bg-transparent hover:text-neutral-900",
+			"focus-visible:border-transparent focus-visible:bg-transparent focus-visible:text-neutral-800",
+			"data-[status=hover]:border-transparent data-[status=hover]:bg-transparent data-[status=hover]:text-neutral-900",
+			"data-[status=focus]:border-transparent data-[status=focus]:bg-transparent data-[status=focus]:text-neutral-800",
+			r
+		].join(" ")
+	} },
+	defaultVariants: { variant: "primary" }
+});
+//#endregion
+//#region src/components/button.tsx
+function o({ variant: e, className: n, type: r = "button", children: i, ...o }) {
+	return /* @__PURE__ */ t("button", {
+		type: r,
+		className: a({
+			variant: e,
+			className: n
+		}),
+		...o,
+		children: i
+	});
+}
+//#endregion
+//#region src/tokens/primitives/colors.ts
+var s = {
+	25: "5%",
+	50: "10%",
+	100: "20%",
+	200: "40%",
+	300: "60%",
+	400: "80%",
+	500: "100%",
+	600: "80%",
+	700: "60%",
+	800: "40%",
+	900: "20%",
+	950: "10%"
+}, c = {
+	neutral: {
+		25: "#EBF0F6",
+		50: "#E5EAF1",
+		100: "#DAE0E7",
+		200: "#C5CAD3",
+		300: "#AFB5C0",
+		400: "#9A9FAC",
+		500: "#848A98",
+		600: "#6A6E7A",
+		700: "#4F535B",
+		800: "#35373D",
+		900: "#1A1C1E",
+		950: "#0D0E0F"
+	},
+	green: {
+		50: "#E6F6EF",
+		100: "#CCECCC",
+		200: "#99D999",
+		300: "#66C766",
+		400: "#33B433",
+		500: "#00A000",
+		600: "#008100",
+		700: "#006100",
+		800: "#004000",
+		900: "#002000",
+		950: "#001000"
+	},
+	blue: {
+		50: "#E6ECF6",
+		100: "#CCD9EC",
+		200: "#99B3D9",
+		300: "#668CC6",
+		400: "#3366B3",
+		500: "#0040A0",
+		600: "#003380",
+		700: "#002660",
+		800: "#001A40",
+		900: "#000D20",
+		950: "#000610"
+	},
+	purple: {
+		50: "#EDE6F6",
+		100: "#DBCCEC",
+		200: "#B899D9",
+		300: "#9466C6",
+		400: "#7133B3",
+		500: "#4D00A0",
+		600: "#3E0080",
+		700: "#2E0060",
+		800: "#1F0040",
+		900: "#0F0020",
+		950: "#080010"
+	},
+	red: {
+		50: "#FDECEC",
+		100: "#FBD8D8",
+		200: "#F7B1B1",
+		300: "#F28A8A",
+		400: "#EE6363",
+		500: "#EA3C3C",
+		600: "#BB3030",
+		700: "#8C2424",
+		800: "#5E1818",
+		900: "#2F0C0C",
+		950: "#170606"
+	},
+	orange: {
+		50: "#FFF1E8",
+		100: "#FFE4D0",
+		200: "#FFC8A1",
+		300: "#FFAD73",
+		400: "#FF9144",
+		500: "#FF7615",
+		600: "#CC5E11",
+		700: "#99470D",
+		800: "#662F08",
+		900: "#331804",
+		950: "#190C02"
+	},
+	yellow: {
+		50: "#FFF8E8",
+		100: "#FFF2D0",
+		200: "#FFE5A1",
+		300: "#FFD773",
+		400: "#FFCA44",
+		500: "#FFBD15",
+		600: "#CC9711",
+		700: "#99710D",
+		800: "#664C08",
+		900: "#332604",
+		950: "#191302"
+	},
+	cyan: {
+		50: "#E8FFFC",
+		100: "#D0FFFA",
+		200: "#A1FFF4",
+		300: "#73FFEF",
+		400: "#44FFE9",
+		500: "#15FFE4",
+		600: "#11CCB6",
+		700: "#0D9989",
+		800: "#08665B",
+		900: "#04332E",
+		950: "#021917"
+	}
+};
+function l(e) {
+	return s[Number(e)];
+}
+function u(e) {
+	let t = c[e];
+	return Object.fromEntries(Object.keys(t).map((t) => [t, `var(--color-${e}-${t})`]));
+}
+var d = Object.fromEntries(Object.entries(c).flatMap(([e, t]) => Object.entries(t).flatMap(([t, n]) => [[`--color-${e}-${t}`, n], [`--color-${e}-${t}-opacity`, l(t)]]))), f = {
+	neutral: u("neutral"),
+	green: u("green"),
+	blue: u("blue"),
+	purple: u("purple"),
+	red: u("red"),
+	orange: u("orange"),
+	yellow: u("yellow"),
+	cyan: u("cyan")
+}, p = { sans: "var(--default-font-family)" }, m = {
+	regular: 400,
+	semibold: 600
+}, h = {
+	xs: "12px",
+	sm: "14px",
+	md: "16px",
+	lg: "20px",
+	xl: "24px",
+	"2xl": "32px",
+	"3xl": "40px",
+	"4xl": "48px",
+	"5xl": "60px"
+}, g = {
+	16: h.md,
+	20: h.lg,
+	24: h.xl,
+	28: "28px",
+	40: h["3xl"],
+	48: h["4xl"],
+	56: "56px",
+	72: "72px"
+}, _ = {
+	primary: "#008149",
+	"primary-hover": "#006137",
+	outline: "#F0F5FB",
+	error: "#BB3030",
+	"error-hover": "#8C2424"
+}, v = {
+	"--color-primary": _.primary,
+	"--color-primary-hover": _["primary-hover"],
+	"--color-outline": _.outline,
+	"--color-error": _.error,
+	"--color-error-hover": _["error-hover"]
+}, y = {
+	background: c.neutral[50],
+	border: c.neutral[500],
+	text: c.neutral[500]
+}, b = {
+	primary: {
+		default: {
+			background: _.primary,
+			border: _.primary
+		},
+		hover: {
+			background: _["primary-hover"],
+			border: _["primary-hover"]
+		},
+		focus: {
+			background: _.primary,
+			border: _.primary
+		},
+		disabled: y
+	},
+	outline: {
+		default: {
+			background: _.outline,
+			border: _.primary
+		},
+		hover: {
+			background: _.outline,
+			border: _["primary-hover"]
+		},
+		focus: {
+			background: _.outline,
+			border: _.primary
+		},
+		disabled: y
+	},
+	transparent: {
+		default: {
+			background: "transparent",
+			border: "transparent",
+			text: _.primary
+		},
+		hover: {
+			background: "transparent",
+			border: "transparent",
+			text: _["primary-hover"]
+		},
+		focus: {
+			background: "transparent",
+			border: "transparent",
+			text: _.primary
+		},
+		disabled: {
+			background: "transparent",
+			border: "transparent",
+			text: c.neutral[500]
+		}
+	},
+	error: {
+		default: {
+			background: _.error,
+			border: _.error
+		},
+		hover: {
+			background: _["error-hover"],
+			border: _["error-hover"]
+		},
+		focus: {
+			background: _.error,
+			border: _.error
+		},
+		disabled: y
+	},
+	"outline-error": {
+		default: {
+			background: _.outline,
+			border: _.error,
+			text: _.error
+		},
+		hover: {
+			background: _.outline,
+			border: _["error-hover"],
+			text: _["error-hover"]
+		},
+		focus: {
+			background: _.outline,
+			border: _.error,
+			text: _.error
+		},
+		disabled: y
+	},
+	"transparent-error": {
+		default: {
+			background: "transparent",
+			border: "transparent",
+			text: _.error
+		},
+		hover: {
+			background: "transparent",
+			border: "transparent",
+			text: _["error-hover"]
+		},
+		focus: {
+			background: "transparent",
+			border: "transparent",
+			text: _.error
+		},
+		disabled: {
+			background: "transparent",
+			border: "transparent",
+			text: c.neutral[500]
+		}
+	},
+	neutral: {
+		default: {
+			background: _.outline,
+			border: c.neutral[200],
+			text: c.neutral[800]
+		},
+		hover: {
+			background: c.neutral[50],
+			border: c.neutral[300],
+			text: c.neutral[800]
+		},
+		focus: {
+			background: _.outline,
+			border: c.neutral[200],
+			text: c.neutral[800]
+		},
+		disabled: y
+	},
+	"outline-neutral": {
+		default: {
+			background: _.outline,
+			border: c.neutral[200],
+			text: c.neutral[800]
+		},
+		hover: {
+			background: _.outline,
+			border: c.neutral[300],
+			text: c.neutral[800]
+		},
+		focus: {
+			background: _.outline,
+			border: c.neutral[200],
+			text: c.neutral[800]
+		},
+		disabled: y
+	},
+	"transparent-neutral": {
+		default: {
+			background: "transparent",
+			border: "transparent",
+			text: c.neutral[800]
+		},
+		hover: {
+			background: "transparent",
+			border: "transparent",
+			text: c.neutral[900]
+		},
+		focus: {
+			background: "transparent",
+			border: "transparent",
+			text: c.neutral[800]
+		},
+		disabled: {
+			background: "transparent",
+			border: "transparent",
+			text: c.neutral[500]
+		}
+	}
+}, x = {
+	fontFamily: p.sans,
+	fontWeight: m.regular
+}, S = {
+	...x,
+	fontWeight: m.semibold
+}, C = {
+	...x,
+	fontSize: h.sm,
+	lineHeight: g[16]
+}, w = {
+	...x,
+	fontSize: h.md,
+	lineHeight: g[20]
+}, T = {
+	...x,
+	fontSize: h.lg,
+	lineHeight: g[24]
+}, E = {
+	"heading-h1": {
+		...S,
+		fontSize: h["5xl"],
+		lineHeight: g[72]
+	},
+	"heading-h2": {
+		...S,
+		fontSize: h["4xl"],
+		lineHeight: g[56]
+	},
+	"heading-h3": {
+		...S,
+		fontSize: h["3xl"],
+		lineHeight: g[48]
+	},
+	"heading-h4": {
+		...S,
+		fontSize: h["2xl"],
+		lineHeight: g[40]
+	},
+	"heading-h5": {
+		...S,
+		fontSize: h.xl,
+		lineHeight: g[28]
+	},
+	"heading-h6": {
+		...S,
+		fontSize: h.lg,
+		lineHeight: g[24]
+	},
+	"body-sm": C,
+	"body-sm-semibold": {
+		...C,
+		fontWeight: m.semibold
+	},
+	"body-sm-link": C,
+	"body-md": w,
+	"body-md-link": w,
+	"body-md-semibold": {
+		...w,
+		fontWeight: m.semibold
+	},
+	"body-lg": T,
+	"body-lg-link": T,
+	"body-lg-semibold": {
+		...T,
+		fontWeight: m.semibold
+	},
+	caption: {
+		...x,
+		fontSize: h.xs,
+		lineHeight: g[16]
+	}
+};
+//#endregion
+export { o as Button, b as button, a as buttonVariants, d as colorCssVariables, f as colorCssVars, s as colorShadeOpacity, c as colors, p as fontFamily, h as fontSize, m as fontWeight, g as lineHeight, v as semanticColorCssVariables, _ as semanticColors, E as typography };

package/dist/tokens/index.d.ts

@@ -0,0 +1,8 @@
+export { colorCssVariables, colorCssVars, colors, colorShadeOpacity, } from './primitives/colors';
+export type { ColorCssVars, ColorFamily, ColorFamilyName, Colors, ColorShade, } from './primitives/colors';
+export { fontFamily, fontSize, fontWeight, lineHeight, } from './primitives/typography';
+export type { FontFamily, FontSize, FontWeight, LineHeight, } from './primitives/typography';
+export { button, semanticColorCssVariables, semanticColors } from './semantic/colors';
+export type { ButtonTokens, SemanticColors } from './semantic/colors';
+export { typography } from './semantic/typography';
+export type { TypographyToken, TypographyTokenName, } from './semantic/typography';