@webflare/ui 0.0.0-stage → 0.1.1

package/dist/styled-system/types/tokens.d.ts

@@ -0,0 +1,60 @@
+import type { Registered } from './register.js';
+
+export type BreakpointToken = Registered<"BreakpointToken", "2xl" | "2xs" | "3xl" | "3xs" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">
+
+export type ColorToken = Registered<"ColorToken", "accent-border" | "accent-subtle" | "accent-text" | "black" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.50" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "border" | "border.card" | "border.hover" | "border.subtle" | "brand.100" | "brand.200" | "brand.300" | "brand.400" | "brand.50" | "brand.500" | "brand.600" | "brand.700" | "brand.800" | "brand.900" | "colorPalette" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.50" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" | "colorPalette.card" | "colorPalette.hover" | "colorPalette.inverse" | "colorPalette.light" | "colorPalette.muted" | "colorPalette.placeholder" | "colorPalette.raised" | "colorPalette.subtle" | "colorPalette.subtle.light" | "colorPalette.text" | "colorPalette.track" | "danger" | "danger.subtle" | "danger.subtle.light" | "danger.text" | "green.100" | "green.200" | "green.300" | "green.400" | "green.50" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "grey.100" | "grey.200" | "grey.300" | "grey.400" | "grey.50" | "grey.500" | "grey.600" | "grey.700" | "grey.800" | "grey.900" | "grey.950" | "info" | "info.subtle" | "info.subtle.light" | "info.text" | "input-bg" | "input-border" | "input-color" | "input-disabled-bg" | "loader.track" | "muted" | "neutral" | "neutral.inverse" | "neutral.light" | "neutral.subtle" | "primary" | "primary-pale" | "red.100" | "red.200" | "red.300" | "red.400" | "red.50" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "success" | "success.subtle" | "success.subtle.light" | "success.text" | "surface" | "surface-muted" | "surface.raised" | "text.muted" | "text.placeholder" | "transparent" | "warning" | "warning.subtle" | "warning.subtle.light" | "warning.text" | "white" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.50" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950">
+
+export type DurationToken = Registered<"DurationToken", "fast" | "normal" | "slow">
+
+export type EasingToken = Registered<"EasingToken", "default" | "out">
+
+export type FontSizeToken = Registered<"FontSizeToken", "2xl" | "3xl" | "4xl" | "5xl" | "lg" | "md" | "sm" | "xl" | "xs">
+
+export type FontWeightToken = Registered<"FontWeightToken", "bold" | "extrabold" | "medium" | "normal" | "regular" | "semibold">
+
+export type FontToken = Registered<"FontToken", "body" | "mono" | "sans" | "serif">
+
+export type LetterSpacingToken = Registered<"LetterSpacingToken", "normal" | "tight" | "tighter" | "wide">
+
+export type LineHeightToken = Registered<"LineHeightToken", "heading" | "none" | "normal" | "relaxed" | "tight">
+
+export type OpacityToken = Registered<"OpacityToken", "color.neutral" | "color.neutral.lighter" | "color.status" | "color.status.lighter">
+
+export type RadiusToken = Registered<"RadiusToken", "2xl" | "3xl" | "4xl" | "5xl" | "lg" | "md" | "pill" | "sm" | "xl">
+
+export type ShadowToken = Registered<"ShadowToken", "card" | "float" | "focus" | "focus-danger" | "focus-success">
+
+export type SizeToken = Registered<"SizeToken", "breakpoint-2xl" | "breakpoint-2xs" | "breakpoint-3xl" | "breakpoint-3xs" | "breakpoint-4xl" | "breakpoint-lg" | "breakpoint-md" | "breakpoint-sm" | "breakpoint-xl" | "breakpoint-xs" | "container" | "prose">
+
+export type SpacingToken = Registered<"SpacingToken", "-10xl" | "-11xl" | "-12xl" | "-2xl" | "-2xs" | "-3xl" | "-3xs" | "-4xl" | "-5xl" | "-6xl" | "-7xl" | "-8xl" | "-9xl" | "-lg" | "-md" | "-sm" | "-xl" | "-xs" | "10xl" | "11xl" | "12xl" | "2xl" | "2xs" | "3xl" | "3xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "lg" | "md" | "sm" | "xl" | "xs">
+
+interface LocalTokens {
+  breakpoints: BreakpointToken
+  colors: ColorToken
+  durations: DurationToken
+  easings: EasingToken
+  fontSizes: FontSizeToken
+  fontWeights: FontWeightToken
+  fonts: FontToken
+  letterSpacings: LetterSpacingToken
+  lineHeights: LineHeightToken
+  opacity: OpacityToken
+  radii: RadiusToken
+  shadows: ShadowToken
+  sizes: SizeToken
+  spacing: SpacingToken
+}
+
+export interface Tokens extends Registered<"Tokens", LocalTokens> {}
+
+export type Token = Registered<"Token", `breakpoints.${BreakpointToken}` | `colors.${ColorToken}` | `durations.${DurationToken}` | `easings.${EasingToken}` | `fontSizes.${FontSizeToken}` | `fontWeights.${FontWeightToken}` | `fonts.${FontToken}` | `letterSpacings.${LetterSpacingToken}` | `lineHeights.${LineHeightToken}` | `opacity.${OpacityToken}` | `radii.${RadiusToken}` | `shadows.${ShadowToken}` | `sizes.${SizeToken}` | `spacing.${SpacingToken}`>
+
+export type ColorOpacityModifier = Registered<"ColorOpacityModifier", `${number}` | OpacityToken>
+
+export type ColorOpacityToken = Registered<"ColorOpacityToken", `colors.${ColorToken}/${ColorOpacityModifier}`>
+
+export type TokenPath = Token | ColorOpacityToken
+
+export type ColorPalette = Registered<"ColorPalette", "accent-border" | "accent-subtle" | "accent-text" | "black" | "blue" | "border" | "brand" | "danger" | "danger.subtle" | "green" | "grey" | "info" | "info.subtle" | "input-bg" | "input-border" | "input-color" | "input-disabled-bg" | "loader" | "muted" | "neutral" | "primary" | "primary-pale" | "red" | "success" | "success.subtle" | "surface" | "surface-muted" | "text" | "transparent" | "warning" | "warning.subtle" | "white" | "yellow">
+
+export type TokenValue<T extends string> = T extends keyof Tokens ? Tokens[T] : never

package/dist/styles-8a0pzMRc.js

@@ -0,0 +1,88 @@
+import { sva } from "@webflare/ui/css";
+// src/components/PricingCard/styles.ts
+var pricingCardStyles = sva({
+	slots: [
+		"root",
+		"header",
+		"headerPackage",
+		"title",
+		"subtitle",
+		"pricing",
+		"price",
+		"badge"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			width: "100%",
+			maxWidth: "100%",
+			color: "neutral",
+			backgroundColor: "surface",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border.card",
+			borderRadius: "md",
+			position: "relative",
+			outlineWidth: "2px",
+			outlineStyle: "solid",
+			outlineColor: "transparent",
+			transition: "all 300ms",
+			_hover: { borderColor: "grey.400" }
+		},
+		header: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "sm",
+			padding: "lg",
+			_hasNext: {
+				borderBottomWidth: "1px",
+				borderBottomStyle: "solid",
+				borderBottomColor: "border.card"
+			}
+		},
+		headerPackage: {
+			display: "flex",
+			flexDir: "column"
+		},
+		title: {
+			fontSize: "lg",
+			fontWeight: "700"
+		},
+		subtitle: {
+			fontSize: "md",
+			color: "text.muted"
+		},
+		pricing: {
+			display: "flex",
+			alignItems: "baseline",
+			gap: "sm"
+		},
+		price: {
+			fontSize: "2xl",
+			fontWeight: "600"
+		},
+		badge: {
+			pos: "absolute",
+			bottom: "100%",
+			left: "50%",
+			translate: "auto",
+			translateX: "-1/2",
+			translateY: "1/2",
+			display: "inline-flex",
+			bg: "primary",
+			color: "neutral.inverse",
+			borderRadius: "pill",
+			paddingBlock: "2xs",
+			paddingInline: "md",
+			fontSize: "sm",
+			fontWeight: "semibold"
+		}
+	},
+	variants: { highlight: { true: { root: {
+		borderColor: "primary",
+		outlineColor: "primary"
+	} } } },
+	defaultVariants: { highlight: false }
+});
+export { pricingCardStyles as t };

package/dist/styles-BU90HeKh.js

@@ -0,0 +1,72 @@
+import { sva } from "@webflare/ui/css";
+// src/components/Field/styles.ts
+/** Field chrome around a control: wrapper, label, required mark, footer, message, error. */
+var fieldStyles = sva({
+	slots: [
+		"root",
+		"label",
+		"required",
+		"footer",
+		"message",
+		"error"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "xs"
+		},
+		label: {
+			display: "block",
+			fontWeight: "500",
+			paddingX: "xs",
+			color: "neutral",
+			lineHeight: "1",
+			userSelect: "none",
+			cursor: "pointer",
+			transition: "color 0.2s ease-in-out",
+			_disabled: {
+				color: {
+					base: "grey.400",
+					_dark: "grey.600",
+					_osDark: "grey.600"
+				},
+				cursor: "not-allowed"
+			}
+		},
+		required: {
+			color: "danger",
+			fontWeight: "800"
+		},
+		footer: {
+			display: "flex",
+			flexWrap: "wrap",
+			flexDirection: "row",
+			justifyContent: "space-between",
+			columnGap: "md"
+		},
+		message: {
+			display: "block",
+			paddingX: "xs",
+			fontSize: "sm",
+			fontWeight: "400",
+			color: "text.muted",
+			wordBreak: "break-word"
+		},
+		error: {
+			display: "block",
+			paddingX: "xs",
+			fontSize: "sm",
+			fontWeight: "500",
+			color: "danger.subtle",
+			wordBreak: "break-word"
+		}
+	},
+	variants: { size: {
+		sm: { label: { fontSize: "sm" } },
+		md: { label: { fontSize: "md" } },
+		lg: { label: { fontSize: "lg" } }
+	} },
+	defaultVariants: { size: "md" }
+});
+export { fieldStyles as t };

package/dist/styles-BvLgeNpb.cjs

@@ -0,0 +1,42 @@
+// src/components/Carousel/styles.ts
+var carouselStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"viewport",
+		"item",
+		"navigation",
+		"button"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			maxWidth: "100%"
+		},
+		viewport: {
+			"display": "flex",
+			"flexDirection": "row",
+			"width": "100%",
+			"overflowX": "scroll",
+			"scrollSnapType": "x mandatory",
+			"scrollBehavior": "smooth",
+			"scrollbarWidth": "none",
+			"&::-webkit-scrollbar": { display: "none" },
+			"gap": "16px",
+			"padding": "16px 0px"
+		},
+		item: {
+			scrollSnapAlign: "start",
+			display: "flex"
+		},
+		navigation: {},
+		button: { fontFamily: "inherit" }
+	}
+});
+Object.defineProperty(exports, "carouselStyles", {
+	enumerable: true,
+	get: function() {
+		return carouselStyles;
+	}
+});

package/dist/styles-CK7DJVwO.js

@@ -0,0 +1,72 @@
+import { sva } from "@webflare/ui/css";
+// src/components/Form/styles.ts
+var formPromptStyles = sva({
+	slots: [
+		"root",
+		"form",
+		"textarea",
+		"footer",
+		"inputs",
+		"action"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "lg"
+		},
+		form: {
+			flexGrow: "1",
+			containerType: "inline-size",
+			display: "flex",
+			flexDirection: "column",
+			gap: "xl",
+			width: "100%",
+			bgColor: "surface.raised",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border",
+			borderRadius: "2xl",
+			padding: "xl",
+			outlineWidth: "3px",
+			outlineStyle: "solid",
+			outlineOffset: "0px",
+			outlineColor: "transparent",
+			transition: "all 200ms"
+		},
+		textarea: {
+			flexGrow: "1",
+			fontFamily: "inherit",
+			color: "neutral",
+			padding: "xs",
+			resize: "none",
+			fieldSizing: "content",
+			minHeight: "var(--textarea-min-h, 120px)",
+			maxHeight: "var(--textarea-max-h, 300px)",
+			_focus: { outline: "none" }
+		},
+		footer: {
+			display: "flex",
+			flexDirection: "row",
+			flexWrap: "wrap",
+			justifyContent: "space-between",
+			gap: "xl",
+			alignItems: "end"
+		},
+		inputs: {
+			"flex": "1",
+			"flexBasis": "100%",
+			"display": "flex",
+			"flexDirection": "row",
+			"flexWrap": "wrap",
+			"gap": "md",
+			"@container (min-width: 600px)": { flexBasis: "0%" }
+		},
+		action: {
+			"flex": "0",
+			"flexBasis": "100%",
+			"@container (min-width: 600px)": { flexBasis: "auto" }
+		}
+	}
+});
+export { formPromptStyles as t };

package/dist/styles-Cjlvkx8i.cjs

@@ -0,0 +1,92 @@
+// src/components/PricingCard/styles.ts
+var pricingCardStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"header",
+		"headerPackage",
+		"title",
+		"subtitle",
+		"pricing",
+		"price",
+		"badge"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			width: "100%",
+			maxWidth: "100%",
+			color: "neutral",
+			backgroundColor: "surface",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border.card",
+			borderRadius: "md",
+			position: "relative",
+			outlineWidth: "2px",
+			outlineStyle: "solid",
+			outlineColor: "transparent",
+			transition: "all 300ms",
+			_hover: { borderColor: "grey.400" }
+		},
+		header: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "sm",
+			padding: "lg",
+			_hasNext: {
+				borderBottomWidth: "1px",
+				borderBottomStyle: "solid",
+				borderBottomColor: "border.card"
+			}
+		},
+		headerPackage: {
+			display: "flex",
+			flexDir: "column"
+		},
+		title: {
+			fontSize: "lg",
+			fontWeight: "700"
+		},
+		subtitle: {
+			fontSize: "md",
+			color: "text.muted"
+		},
+		pricing: {
+			display: "flex",
+			alignItems: "baseline",
+			gap: "sm"
+		},
+		price: {
+			fontSize: "2xl",
+			fontWeight: "600"
+		},
+		badge: {
+			pos: "absolute",
+			bottom: "100%",
+			left: "50%",
+			translate: "auto",
+			translateX: "-1/2",
+			translateY: "1/2",
+			display: "inline-flex",
+			bg: "primary",
+			color: "neutral.inverse",
+			borderRadius: "pill",
+			paddingBlock: "2xs",
+			paddingInline: "md",
+			fontSize: "sm",
+			fontWeight: "semibold"
+		}
+	},
+	variants: { highlight: { true: { root: {
+		borderColor: "primary",
+		outlineColor: "primary"
+	} } } },
+	defaultVariants: { highlight: false }
+});
+Object.defineProperty(exports, "pricingCardStyles", {
+	enumerable: true,
+	get: function() {
+		return pricingCardStyles;
+	}
+});

package/dist/styles-CuN4CHU4.cjs

@@ -0,0 +1,76 @@
+// src/components/Field/styles.ts
+/** Field chrome around a control: wrapper, label, required mark, footer, message, error. */
+var fieldStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"label",
+		"required",
+		"footer",
+		"message",
+		"error"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "xs"
+		},
+		label: {
+			display: "block",
+			fontWeight: "500",
+			paddingX: "xs",
+			color: "neutral",
+			lineHeight: "1",
+			userSelect: "none",
+			cursor: "pointer",
+			transition: "color 0.2s ease-in-out",
+			_disabled: {
+				color: {
+					base: "grey.400",
+					_dark: "grey.600",
+					_osDark: "grey.600"
+				},
+				cursor: "not-allowed"
+			}
+		},
+		required: {
+			color: "danger",
+			fontWeight: "800"
+		},
+		footer: {
+			display: "flex",
+			flexWrap: "wrap",
+			flexDirection: "row",
+			justifyContent: "space-between",
+			columnGap: "md"
+		},
+		message: {
+			display: "block",
+			paddingX: "xs",
+			fontSize: "sm",
+			fontWeight: "400",
+			color: "text.muted",
+			wordBreak: "break-word"
+		},
+		error: {
+			display: "block",
+			paddingX: "xs",
+			fontSize: "sm",
+			fontWeight: "500",
+			color: "danger.subtle",
+			wordBreak: "break-word"
+		}
+	},
+	variants: { size: {
+		sm: { label: { fontSize: "sm" } },
+		md: { label: { fontSize: "md" } },
+		lg: { label: { fontSize: "lg" } }
+	} },
+	defaultVariants: { size: "md" }
+});
+Object.defineProperty(exports, "fieldStyles", {
+	enumerable: true,
+	get: function() {
+		return fieldStyles;
+	}
+});

package/dist/styles-WOyB8APA.js

@@ -0,0 +1,38 @@
+import { sva } from "@webflare/ui/css";
+// src/components/Carousel/styles.ts
+var carouselStyles = sva({
+	slots: [
+		"root",
+		"viewport",
+		"item",
+		"navigation",
+		"button"
+	],
+	base: {
+		root: {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			maxWidth: "100%"
+		},
+		viewport: {
+			"display": "flex",
+			"flexDirection": "row",
+			"width": "100%",
+			"overflowX": "scroll",
+			"scrollSnapType": "x mandatory",
+			"scrollBehavior": "smooth",
+			"scrollbarWidth": "none",
+			"&::-webkit-scrollbar": { display: "none" },
+			"gap": "16px",
+			"padding": "16px 0px"
+		},
+		item: {
+			scrollSnapAlign: "start",
+			display: "flex"
+		},
+		navigation: {},
+		button: { fontFamily: "inherit" }
+	}
+});
+export { carouselStyles as t };

package/dist/styles-_I-I4HYc.cjs

@@ -0,0 +1,76 @@
+// src/components/Form/styles.ts
+var formPromptStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"form",
+		"textarea",
+		"footer",
+		"inputs",
+		"action"
+	],
+	base: {
+		root: {
+			display: "flex",
+			flexDirection: "column",
+			gap: "lg"
+		},
+		form: {
+			flexGrow: "1",
+			containerType: "inline-size",
+			display: "flex",
+			flexDirection: "column",
+			gap: "xl",
+			width: "100%",
+			bgColor: "surface.raised",
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border",
+			borderRadius: "2xl",
+			padding: "xl",
+			outlineWidth: "3px",
+			outlineStyle: "solid",
+			outlineOffset: "0px",
+			outlineColor: "transparent",
+			transition: "all 200ms"
+		},
+		textarea: {
+			flexGrow: "1",
+			fontFamily: "inherit",
+			color: "neutral",
+			padding: "xs",
+			resize: "none",
+			fieldSizing: "content",
+			minHeight: "var(--textarea-min-h, 120px)",
+			maxHeight: "var(--textarea-max-h, 300px)",
+			_focus: { outline: "none" }
+		},
+		footer: {
+			display: "flex",
+			flexDirection: "row",
+			flexWrap: "wrap",
+			justifyContent: "space-between",
+			gap: "xl",
+			alignItems: "end"
+		},
+		inputs: {
+			"flex": "1",
+			"flexBasis": "100%",
+			"display": "flex",
+			"flexDirection": "row",
+			"flexWrap": "wrap",
+			"gap": "md",
+			"@container (min-width: 600px)": { flexBasis: "0%" }
+		},
+		action: {
+			"flex": "0",
+			"flexBasis": "100%",
+			"@container (min-width: 600px)": { flexBasis: "auto" }
+		}
+	}
+});
+Object.defineProperty(exports, "formPromptStyles", {
+	enumerable: true,
+	get: function() {
+		return formPromptStyles;
+	}
+});

package/dist/types-B1vOzUjg.js

@@ -0,0 +1,5 @@
+import { t as createInjectionKey } from "./injection-key-BQYV9vIr.js";
+// src/components/PricingCard/types.ts
+var PricingCardStylesKey = createInjectionKey("PricingCardStyles");
+var PricingCardDataKey = createInjectionKey("PricingCardData");
+export { PricingCardStylesKey as n, PricingCardDataKey as t };

package/dist/types-Boy3jvmf.js

@@ -0,0 +1,4 @@
+import { t as createInjectionKey } from "./injection-key-BQYV9vIr.js";
+// src/components/Carousel/types.ts
+var CarouselContextKey = createInjectionKey("Carousel");
+export { CarouselContextKey as t };