vueless 1.0.2-beta.35 → 1.0.2-beta.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.35",
+  "version": "1.0.2-beta.36",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.text-header/config.ts

@@ -1,6 +1,5 @@
 export default /*tw*/ {
   header: {
-    base: "font-medium",
     variants: {
       variant: {
         default: "text-{color}",
@@ -19,6 +18,13 @@ export default /*tw*/ {
         xl: "text-4xl",
         "2xl": "text-5xl",
       },
+      weight: {
+        light: "font-light",
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+      },
       line: {
         true: "!leading-none",
       },
@@ -33,6 +39,7 @@ export default /*tw*/ {
   defaults: {
     color: "text",
     variant: "default",
+    weight: "medium",
     size: "md",
     tag: "div",
     line: true,

package/ui.text-header/storybook/stories.ts

@@ -15,7 +15,7 @@ import type { Props } from "../types.ts";
 
 interface UHeaderArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "color" | "variant";
+  enum: "size" | "color" | "variant" | "weight";
 }
 
 export default {
@@ -92,6 +92,9 @@ Variants.args = { enum: "variant" };
 export const Colors = EnumTemplate.bind({});
 Colors.args = { enum: "color" };
 
+export const Weights = EnumTemplate.bind({});
+Weights.args = { enum: "weight" };
+
 export const DefaultSlot = DefaultTemplate.bind({});
 DefaultSlot.args = {
   slotTemplate: `

package/ui.text-header/tests/UHeader.test.ts

@@ -79,6 +79,27 @@ describe("UHeader.vue", () => {
       });
     });
 
+    // Weight prop
+    it("applies the correct weight class", async () => {
+      const weights = {
+        light: "font-light",
+        normal: "font-normal",
+        medium: "font-medium",
+        semibold: "font-semibold",
+        bold: "font-bold",
+      };
+
+      Object.entries(weights).forEach(([weight, classes]) => {
+        const component = mount(UHeader, {
+          props: {
+            weight: weight as Props["weight"],
+          },
+        });
+
+        expect(component.attributes("class")).toContain(classes);
+      });
+    });
+
     // Label prop
     it("renders the correct label text", () => {
       const label = "Header Text";

package/ui.text-header/types.ts

@@ -19,6 +19,11 @@ export interface Props {
    */
   variant?: "default" | "accented" | "lifted" | "muted";
 
+  /**
+   * Font weight.
+   */
+  weight?: "light" | "normal" | "medium" | "semibold" | "bold";
+
   /**
    * Header color.
    */