@techfides/ui-library-design 0.7.0 → 0.9.0

package/README.md

@@ -2,7 +2,7 @@
 
 The framework-agnostic half of the TechFides UI library: the Tailwind CSS v4 theme, the design tokens, and the variant recipes every component is built from.
 
-No framework, no components. If you are building with Vue, install [`@techfides/ui-library-vue`](https://www.npmjs.com/package/@techfides/ui-library-vue) instead — it depends on this one and brings it with it. Reach for this package directly when you are styling something the component library does not cover, or when a React binding arrives.
+No framework, no components. If you are building with Vue, install [`@techfides/ui-library-vue`](https://www.npmjs.com/package/@techfides/ui-library-vue) instead — it depends on this one and brings it with it. Reach for this package directly when you are styling something the component library does not cover, or when a React binding arrives. Words and languages live in [`@techfides/ui-library-core`](https://www.npmjs.com/package/@techfides/ui-library-core), the framework-free package, not here.
 
 ## Install
 
@@ -37,8 +37,6 @@ cn('bg-tf-panel p-6', props.class)
 
 **Brand** — four accents, switched by a `data-brand` attribute on the root. Every accent role in the system derives from the one the brand names.
 
-**Words** — every string a component says on its own behalf, as a `Language`. `english` and `czech` ship; the framework binding hands one to `provideLanguage`. Words live here rather than in the binding so both bindings say the same thing ([ADR 0004](https://github.com/TechFides/ui-library/blob/main/docs/adr/0004-words-live-in-the-framework-free-package.md)).
-
 ## The one thing to know about surfaces
 
 Depth is carried by lightness, not by shadow: on a dark screen a black shadow has almost nothing to fall on. There are five surface steps and each is measurably lighter than the one below it. A shadow means something different — that a thing has left the page altogether.

package/css/theme.css

@@ -27,6 +27,25 @@
     font-family: var(--font-tf-body);
     scrollbar-gutter: stable;
   }
+
+  x-vue-echarts {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+  }
+
+  x-vue-echarts > .echarts-host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-width: 0;
+  }
+
+  x-vue-echarts > .echarts-host > :first-child,
+  x-vue-echarts > .echarts-host > :first-child > canvas {
+    border-radius: inherit;
+  }
 }
 
 @theme static inline {

package/dist/anatomies.d.ts

@@ -541,7 +541,6 @@ declare const anatomies: {
     };
     readonly spinner: {
       readonly part: "spinner";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: false;
     };
     readonly trailing: {
@@ -836,7 +835,6 @@ declare const anatomies: {
     };
     readonly requiredIndicator: {
       readonly part: "required-indicator";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: false;
     };
     readonly root: {
@@ -863,7 +861,6 @@ declare const anatomies: {
     };
     readonly root: {
       readonly part: "scope-switcher";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: true;
     };
     readonly rowText: {
@@ -878,7 +875,6 @@ declare const anatomies: {
     };
     readonly value: {
       readonly part: "value";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: true;
     };
   };
@@ -904,7 +900,6 @@ declare const anatomies: {
     };
     readonly hint: {
       readonly part: "hint";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: true;
     };
     readonly mark: {
@@ -1011,7 +1006,6 @@ declare const anatomies: {
     };
     readonly spinner: {
       readonly part: "spinner";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: false;
     };
     readonly trailing: {
@@ -1214,7 +1208,6 @@ declare const anatomies: {
     };
     readonly counted: {
       readonly part: "counted";
-      readonly recipe: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
       readonly required: true;
     };
     readonly figure: {
@@ -1582,5 +1575,4 @@ declare const anatomies: {
 };
 type AnyPart = PartsOf<(typeof anatomies)[keyof typeof anatomies]>;
 //#endregion
-export { type AnyPart, anatomies };
-//# sourceMappingURL=anatomies.d.ts.map
+export { type AnyPart, anatomies };

package/dist/anatomies.js

@@ -103,5 +103,3 @@ const anatomies = {
 };
 //#endregion
 export { anatomies };
-
-//# sourceMappingURL=anatomies.js.map

package/dist/anatomy.d.ts

@@ -2,12 +2,11 @@
 type Recipe = (...args: never[]) => string;
 interface Part {
   part: string;
-  recipe: Recipe;
+  recipe?: Recipe;
   required: boolean;
 }
 type Anatomy = Record<string, Part>;
 declare const anatomy: <const Shape extends Anatomy>(parts: Shape) => Shape;
 type PartsOf<Shape> = Shape extends Anatomy ? Shape[keyof Shape]['part'] : never;
 //#endregion
-export { type Anatomy, type Part, type PartsOf, type Recipe, anatomy };
-//# sourceMappingURL=anatomy.d.ts.map
+export { type Anatomy, type Part, type PartsOf, type Recipe, anatomy };

package/dist/anatomy.js

@@ -2,5 +2,3 @@
 const anatomy = (parts) => parts;
 //#endregion
 export { anatomy };
-
-//# sourceMappingURL=anatomy.js.map

package/dist/brands.d.ts

@@ -35,5 +35,4 @@ declare const brands: readonly [{
 declare const defaultBrand: BrandSlug;
 declare const brandTitle: (slug: string) => string;
 //#endregion
-export { type Brand, type BrandSlug, brandTitle, brands, defaultBrand };
-//# sourceMappingURL=brands.d.ts.map
+export { type Brand, type BrandSlug, brandTitle, brands, defaultBrand };

package/dist/brands.js

@@ -37,5 +37,3 @@ const brandTitle = (slug) => {
 };
 //#endregion
 export { brandTitle, brands, defaultBrand };
-
-//# sourceMappingURL=brands.js.map

package/dist/cn.d.ts

@@ -2,5 +2,4 @@ import { ClassValue } from "clsx";
 //#region src/cn.d.ts
 declare const cn: (...inputs: ClassValue[]) => string;
 //#endregion
-export { cn };
-//# sourceMappingURL=cn.d.ts.map
+export { cn };

package/dist/cn.generated.js

@@ -0,0 +1,253 @@
+//#region src/cn.generated.ts
+const twScales = {
+	animate: [
+		"tf-blend-in",
+		"tf-arrive",
+		"tf-depart",
+		"tf-in",
+		"tf-out",
+		"tf-chip-in",
+		"tf-chip-out",
+		"tf-chip-out-auto",
+		"tf-rewind",
+		"tf-lift",
+		"tf-lift-rewind",
+		"tf-drawer",
+		"tf-drawer-rewind",
+		"tf-expand",
+		"tf-collapse",
+		"tf-shake",
+		"tf-pop",
+		"tf-nudge",
+		"tf-fade-in",
+		"tf-fade-out",
+		"tf-fade-rewind",
+		"tf-rise",
+		"tf-draw",
+		"tf-page",
+		"tf-page-again"
+	],
+	blur: [
+		"tf-panel",
+		"tf-glass",
+		"tf-scrim",
+		"tf-cloud-md",
+		"tf-cloud-tight",
+		"tf-cloud-wide"
+	],
+	color: [
+		"tf-accent",
+		"tf-accent-hi",
+		"tf-accent-surface",
+		"tf-accent-deep",
+		"tf-on-accent",
+		"tf-accent-tint",
+		"tf-accent-edge",
+		"tf-bg",
+		"tf-surface",
+		"tf-panel",
+		"tf-panel-2",
+		"tf-panel-hi",
+		"tf-glass",
+		"tf-sunken",
+		"tf-sunken-hi",
+		"tf-sunken-quiet",
+		"tf-control",
+		"tf-control-hi",
+		"tf-surface-hi",
+		"tf-surface-quiet",
+		"tf-shade-under",
+		"tf-shade-deep",
+		"tf-scrim",
+		"tf-line",
+		"tf-line-2",
+		"tf-line-hi",
+		"tf-rule",
+		"tf-fg",
+		"tf-fg-held",
+		"tf-muted",
+		"tf-success",
+		"tf-success-hi",
+		"tf-warning",
+		"tf-warning-hi",
+		"tf-info",
+		"tf-info-hi",
+		"tf-danger",
+		"tf-danger-hi",
+		"tf-on-semantic",
+		"tf-success-tint",
+		"tf-success-edge",
+		"tf-warning-tint",
+		"tf-warning-edge",
+		"tf-info-tint",
+		"tf-info-edge",
+		"tf-danger-tint",
+		"tf-danger-wash",
+		"tf-danger-edge"
+	],
+	container: [
+		"tf-panel",
+		"tf-list",
+		"tf-placard",
+		"tf-measure",
+		"tf-page",
+		"tf-canvas"
+	],
+	ease: [
+		"tf",
+		"tf-spring",
+		"tf-glide",
+		"tf-settle"
+	],
+	font: ["tf-display", "tf-body"],
+	radius: [
+		"tf-none",
+		"tf-inline",
+		"tf-control",
+		"tf-block",
+		"tf-card",
+		"tf-pill"
+	],
+	shadow: ["tf-float", "tf-mark"],
+	spacing: [
+		"tf-hairline",
+		"tf-control-2xs",
+		"tf-control-xs",
+		"tf-control-sm",
+		"tf-control-md",
+		"tf-control-lg",
+		"tf-row",
+		"tf-chip-sm",
+		"tf-target",
+		"tf-menu",
+		"tf-sidebar",
+		"tf-rail",
+		"tf-icon-2xs",
+		"tf-icon-xs",
+		"tf-icon-sm",
+		"tf-icon-md",
+		"tf-icon-lg",
+		"tf-icon-solo-xs",
+		"tf-icon-solo-sm",
+		"tf-icon-solo-md",
+		"tf-icon-solo-lg",
+		"tf-mark-glyph",
+		"tf-mark-dot",
+		"tf-mark-track",
+		"tf-mark-inset"
+	],
+	text: [
+		"tf-numeral",
+		"tf-display",
+		"tf-h1",
+		"tf-h2",
+		"tf-h3",
+		"tf-h4",
+		"tf-figure",
+		"tf-unit",
+		"tf-lead",
+		"tf-body",
+		"tf-body-sm",
+		"tf-caption",
+		"tf-caption-sm"
+	],
+	tracking: ["tf-tight", "tf-eyebrow"]
+};
+const durationSteps = [
+	"tf-1",
+	"tf-2",
+	"tf-3",
+	"tf-4"
+];
+const zSteps = [
+	"tf-raised",
+	"tf-dropdown",
+	"tf-tooltip",
+	"tf-modal",
+	"tf-toast"
+];
+const utilityFamilies = {
+	"tf-animation": [
+		"tf-blend-hushed",
+		"tf-blended",
+		"tf-breathing",
+		"tf-chip-arrives",
+		"tf-chip-departs",
+		"tf-cloud-breathing",
+		"tf-lands",
+		"tf-looping",
+		"tf-pinging",
+		"tf-pops",
+		"tf-shaken",
+		"tf-tallies",
+		"tf-turning",
+		"tf-twinkling"
+	],
+	"tf-cast": [
+		"tf-lifted",
+		"tf-pressed",
+		"tf-raised",
+		"tf-settled",
+		"tf-settled-quiet"
+	],
+	"tf-cloud-blur": [
+		"tf-cloud-md",
+		"tf-cloud-tight",
+		"tf-cloud-wide"
+	],
+	"tf-cloud-tone": [
+		"tf-cloud-brand",
+		"tf-cloud-ink",
+		"tf-cloud-quiet"
+	],
+	"tf-cloud-weather": [
+		"tf-clouded",
+		"tf-clouded-lifted",
+		"tf-clouding",
+		"tf-cloud-hidden"
+	],
+	"tf-edge": [
+		"tf-edge-lit",
+		"tf-edge-milk",
+		"tf-edge-plain",
+		"tf-edge-sweep"
+	],
+	"tf-glass-plate": ["tf-glass-plate", "tf-glass-plate-lit"],
+	"tf-icons": ["tf-icons", "tf-icons-solo"],
+	"tf-label": [
+		"tf-label-inked",
+		"tf-label-lit",
+		"tf-label-quiet"
+	],
+	"tf-lit": ["tf-lit-inside", "tf-lit-rest"],
+	"tf-mark-tone": ["tf-mark-failed", "tf-mark-lit"],
+	"tf-mask": [
+		"tf-cloud-low",
+		"tf-faded-x",
+		"tf-scroll-faded"
+	],
+	"tf-moves": ["tf-moves-glide", "tf-moves-spring"],
+	"tf-plated": ["tf-plated", "tf-plated-quiet"],
+	"tf-rule": [
+		"tf-rule",
+		"tf-rule-fall",
+		"tf-rule-filled",
+		"tf-rule-filled-fall",
+		"tf-rule-quiet",
+		"tf-rule-quiet-fall"
+	],
+	"tf-scroll": ["tf-scroll-hidden", "tf-scroll-thin"],
+	"tf-slides": ["tf-slides-settle", "tf-slides-spring"],
+	"tf-transition": [
+		"tf-arrives",
+		"tf-crossfades",
+		"tf-fades",
+		"tf-grows",
+		"tf-resizes",
+		"tf-reveals",
+		"tf-slows",
+		"tf-transition"
+	]
+};
+//#endregion
+export { durationSteps, twScales, utilityFamilies, zSteps };

package/dist/cn.js

@@ -1,181 +1,23 @@
+import { durationSteps, twScales, utilityFamilies, zSteps } from "./cn.generated.js";
 import { clsx } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 //#region src/cn.ts
-const { color, duration, ...themeScales } = {
-	animate: [
-		"tf-arrive",
-		"tf-blend-in",
-		"tf-in",
-		"tf-out",
-		"tf-chip-in",
-		"tf-chip-out",
-		"tf-rewind",
-		"tf-lift",
-		"tf-lift-rewind",
-		"tf-expand",
-		"tf-collapse",
-		"tf-depart",
-		"tf-shake",
-		"tf-pop",
-		"tf-nudge",
-		"tf-fade-in",
-		"tf-fade-out",
-		"tf-fade-rewind",
-		"tf-page",
-		"tf-page-again",
-		"tf-rise",
-		"tf-draw"
-	],
-	blur: [
-		"tf-panel",
-		"tf-glass",
-		"tf-scrim",
-		"tf-cloud-md",
-		"tf-cloud-tight",
-		"tf-cloud-wide"
-	],
-	color: [
-		"tf-accent",
-		"tf-accent-hi",
-		"tf-accent-deep",
-		"tf-accent-surface",
-		"tf-accent-tint",
-		"tf-accent-edge",
-		"tf-on-accent",
-		"tf-bg",
-		"tf-surface",
-		"tf-surface-hi",
-		"tf-surface-quiet",
-		"tf-sunken",
-		"tf-sunken-hi",
-		"tf-sunken-quiet",
-		"tf-control",
-		"tf-control-hi",
-		"tf-panel",
-		"tf-panel-2",
-		"tf-panel-hi",
-		"tf-glass",
-		"tf-shade-under",
-		"tf-shade-deep",
-		"tf-scrim",
-		"tf-line",
-		"tf-line-2",
-		"tf-line-hi",
-		"tf-rule",
-		"tf-fg",
-		"tf-fg-held",
-		"tf-muted",
-		"tf-success",
-		"tf-success-hi",
-		"tf-warning",
-		"tf-warning-hi",
-		"tf-info",
-		"tf-info-hi",
-		"tf-danger",
-		"tf-danger-hi",
-		"tf-danger-wash",
-		"tf-success-tint",
-		"tf-success-edge",
-		"tf-warning-tint",
-		"tf-warning-edge",
-		"tf-info-tint",
-		"tf-info-edge",
-		"tf-danger-tint",
-		"tf-danger-edge",
-		"tf-on-semantic"
-	],
-	container: [
-		"tf-panel",
-		"tf-placard",
-		"tf-measure",
-		"tf-page",
-		"tf-canvas"
-	],
-	duration: [
-		"tf-1",
-		"tf-2",
-		"tf-3",
-		"tf-4"
-	],
-	ease: [
-		"tf",
-		"tf-spring",
-		"tf-glide",
-		"tf-settle"
-	],
-	font: ["tf-display", "tf-body"],
-	radius: [
-		"tf-none",
-		"tf-inline",
-		"tf-control",
-		"tf-block",
-		"tf-card",
-		"tf-pill"
-	],
-	shadow: ["tf-float", "tf-mark"],
-	spacing: [
-		"tf-hairline",
-		"tf-control-2xs",
-		"tf-control-xs",
-		"tf-control-sm",
-		"tf-control-md",
-		"tf-control-lg",
-		"tf-row",
-		"tf-chip-sm",
-		"tf-target",
-		"tf-menu",
-		"tf-sidebar",
-		"tf-rail",
-		"tf-icon-2xs",
-		"tf-icon-xs",
-		"tf-icon-sm",
-		"tf-icon-md",
-		"tf-icon-lg",
-		"tf-icon-solo-xs",
-		"tf-icon-solo-sm",
-		"tf-icon-solo-md",
-		"tf-icon-solo-lg",
-		"tf-mark-glyph",
-		"tf-mark-dot",
-		"tf-mark-track",
-		"tf-mark-inset"
-	],
-	text: [
-		"tf-numeral",
-		"tf-display",
-		"tf-h1",
-		"tf-h2",
-		"tf-h3",
-		"tf-h4",
-		"tf-figure",
-		"tf-unit",
-		"tf-lead",
-		"tf-body",
-		"tf-body-sm",
-		"tf-caption",
-		"tf-caption-sm"
-	],
-	tracking: ["tf-tight", "tf-eyebrow"]
-};
+const { color, ...themeScales } = twScales;
+const zGroup = "z";
 const twMerge = extendTailwindMerge({ extend: {
 	classGroups: {
-		"bg-image": [{ bg: ["tf-blend"] }],
-		"blend-base": [{ blend: color ?? [] }],
-		"cloud-blur": [
-			"tf-cloud-md",
-			"tf-cloud-tight",
-			"tf-cloud-wide"
-		],
-		duration: [{ duration: duration ?? [] }],
-		"text-color": [{ text: ["tf-blend"] }]
+		...utilityFamilies,
+		"bg-image": [{ bg: ["tf-blend", "tf-blend-rise"] }],
+		"blend-base": [{ blend: color }],
+		duration: [{ duration: durationSteps }],
+		"text-color": [{ text: ["tf-blend"] }],
+		[zGroup]: [{ [zGroup]: zSteps }]
 	},
 	theme: {
 		...themeScales,
-		color: color ?? []
+		color
 	}
 } });
 const cn = (...inputs) => twMerge(clsx(inputs));
 //#endregion
 export { cn };
-
-//# sourceMappingURL=cn.js.map

package/dist/control.d.ts

@@ -10,5 +10,4 @@ declare const controlIcon: {
   xs: string;
 };
 //#endregion
-export { type ButtonSize, type ControlSize, type FieldSize, controlIcon, defaultFieldSize };
-//# sourceMappingURL=control.d.ts.map
+export { type ButtonSize, type ControlSize, type FieldSize, controlIcon, defaultFieldSize };

package/dist/control.js

@@ -8,5 +8,3 @@ const controlIcon = {
 };
 //#endregion
 export { controlIcon, defaultFieldSize };
-
-//# sourceMappingURL=control.js.map