vueless 0.0.147 → 0.0.149

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.147",
+  "version": "0.0.149",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button-toggle/composables/attrs.composable.js

@@ -6,7 +6,7 @@ import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { items } = config.value;
+  const { label, items } = config.value;
 
   const cvaItems = cva({
     base: items.base,
@@ -14,6 +14,12 @@ export function useAttrs(props) {
     compoundVariants: items.compoundVariants,
   });
 
+  const cvaLabel = cva({
+    base: label.base,
+    variants: label.variants,
+    compoundVariants: label.compoundVariants,
+  });
+
   const itemsClasses = computed(() =>
     cvaItems({
       size: props.size,
@@ -21,7 +27,13 @@ export function useAttrs(props) {
     }),
   );
 
-  const labelAttrs = getAttrs("label", { isComponent: true });
+  const labelClasses = computed(() =>
+    cvaLabel({
+      block: props.block,
+    }),
+  );
+
+  const labelAttrs = getAttrs("label", { isComponent: true, classes: labelClasses });
   const itemsAttrs = getAttrs("items", { classes: itemsClasses });
   const itemAttrs = getAttrs("item", { isComponent: true });
 

package/ui.button-toggle/configs/default.config.js

@@ -1,15 +1,22 @@
 export default /*tw*/ {
-  label: "",
+  label: {
+    base: "flex flex-wrap",
+    variants: {
+      block: {
+        true: "w-full",
+      },
+    },
+  },
   items: {
     base: "flex flex-wrap",
     variants: {
       size: {
-        "2xs": "gap-2",
-        xs: "gap-3",
-        sm: "gap-4",
-        md: "gap-5",
-        lg: "gap-6",
-        xl: "gap-7",
+        "2xs": "gap-0.5",
+        xs: "gap-1",
+        sm: "gap-1.5",
+        md: "gap-2",
+        lg: "gap-2.5",
+        xl: "gap-3",
       },
       separated: {
         false: `

package/ui.button-toggle/index.vue

@@ -1,6 +1,6 @@
 <template>
   <ULabel
-    :size="size"
+    :size="labelSize"
     :label="label"
     :description="description"
     :align="labelAlign"
@@ -191,6 +191,19 @@ const selectedValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
+const labelSize = computed(() => {
+  const sizes = {
+    "2xs": "sm",
+    xs: "sm",
+    sm: "md",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+  };
+
+  return sizes[props.size];
+});
+
 const type = computed(() => {
   return props.multiple ? TYPE_CHECKBOX : TYPE_RADIO;
 });

package/ui.button-toggle-item/configs/default.config.js

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: "",
     variants: {
       separated: {
-        false: "rounded-none",
+        false: "!rounded-none",
       },
     },
   },
@@ -18,12 +18,12 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { color: "grayscale", variant: "primary", class: "!bg-gray-700 !border-gray-700" },
-      { color: "grayscale", variant: "secondary", class: "!text-gray-700 !border-gray-700 !bg-gray-700 !bg-opacity-15" },
-      { color: "grayscale", variant: "thirdary", class: "!text-gray-700 !bg-gray-700" },
-      { color: "white", variant: "primary", class: "!text-gray-700 !border-gray-100 !bg-gray-100" },
-      { color: "white", variant: "secondary", class: "!text-gray-700 !border-gray-400" },
-      { color: "white", variant: "thirdary", class: "!text-gray-700 !bg-white" },
+      { color: "grayscale", variant: "primary", class: "!bg-brand-700 !border-brand-700" },
+      { color: "grayscale", variant: "secondary", class: "!text-brand-700 !border-brand-700 !bg-brand-50 !bg-opacity-100" },
+      { color: "grayscale", variant: "thirdary", class: "!text-brand-700 !bg-brand-50" },
+      { color: "white", variant: "primary", class: "!text-brand-700 !border-brand-600 !bg-brand-50" },
+      { color: "white", variant: "secondary", class: "!text-brand-700 !border-brand-600 !bg-brand-50" },
+      { color: "white", variant: "thirdary", class: "!text-brand-700 !bg-brand-50" },
     ],
   },
   defaultVariants: {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.147",
+  "version": "0.0.149",
   "contributions": {
     "html": {
       "description-markup": "markdown",