sprintify-ui 0.6.39 → 0.6.40

package/dist/types/src/components/BaseBadge.vue.d.ts

@@ -1,4 +1,8 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    class: {
+        type: import("vue").PropType<string | string[]>;
+        default: undefined;
+    };
     color: {
         type: import("vue").PropType<string>;
         default: string;
@@ -11,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     size: {
-        type: import("vue").PropType<"base" | "sm" | "lg">;
+        type: import("vue").PropType<string>;
         default: string;
     };
     contrast: {
@@ -22,6 +26,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    class: {
+        type: import("vue").PropType<string | string[]>;
+        default: undefined;
+    };
     color: {
         type: import("vue").PropType<string>;
         default: string;
@@ -34,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: undefined;
     };
     size: {
-        type: import("vue").PropType<"base" | "sm" | "lg">;
+        type: import("vue").PropType<string>;
         default: string;
     };
     contrast: {
@@ -45,9 +53,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
     };
 }>>, {
+    class: string | string[];
     color: string;
     icon: string;
-    size: "base" | "sm" | "lg";
+    size: string;
     contrast: "high" | "low";
 }, {}>, {
     default?(_: {}): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.39",
+  "version": "0.6.40",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseBadge.stories.js

@@ -4,7 +4,7 @@ import { palette } from '@/utils/colors';
 
 const colors = [...Object.keys(palette), '#ff0000', '#dbeafe'];
 
-const sizes = ['sm', 'base', 'lg'];
+const sizes = ['sm', 'md', 'lg'];
 
 export default {
   title: 'Components/BaseBadge',
@@ -88,9 +88,9 @@ export const Sizes = (args) => ({
     return { args, colors, sizes };
   },
   template: `
-  <div v-for="size in sizes" :key="size">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
-    <BaseBadge v-bind="args" :size="size" icon="heroicons:beaker-20-solid">
+  <div v-for="size in sizes" :key="size" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseBadge v-bind="args" :size="size">
       Administrator
     </BaseBadge>
   </div>

package/src/components/BaseBadge.vue

@@ -1,7 +1,6 @@
 <template>
   <span
-    class="inline-flex items-center rounded-full font-medium leading-tight"
-    :class="[sizeClasses, wrapClasses]"
+    :class="classes"
     :style="colorStyle"
   >
     <BaseIcon
@@ -17,20 +16,29 @@
 <script lang="ts" setup>
 import { getColorConfig } from '@/utils/colors';
 import { Icon as BaseIcon } from '@iconify/vue';
+import { twMerge } from 'tailwind-merge';
+
+const sizes = ['sm', 'md', 'lg'];
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
   defineProps<{
+    class?: string | string[];
     contrast?: 'low' | 'high';
     color?: string;
-    size?: 'sm' | 'base' | 'lg';
+    size?: typeof sizes[number];
     icon?: string;
     wrap?: boolean;
     bordered?: boolean;
   }>(),
   {
-    contrast: 'high',
+    class: undefined,
+    contrast: 'low',
     color: 'gray',
-    size: 'base',
+    size: 'md',
     icon: undefined,
   }
 );
@@ -52,36 +60,34 @@ const colorStyle = computed((): Record<string, string> => {
   return styles;
 });
 
-const wrapClasses = computed(() => {
-  if (!props.wrap) {
-    return 'whitespace-nowrap';
+const sizeInternal = computed(() => {
+  if (!sizes.includes(props.size)) {
+    return 'md';
   }
-  return '';
-});
 
-const sizeClasses = computed(() => {
-  if (props.size == 'sm') {
-    return 'px-2 py-px text-[11px]';
-  }
-  if (props.size == 'base') {
-    return 'px-2.5 py-0.5 text-xs';
-  }
-  if (props.size == 'lg') {
-    return 'px-3 py-0.5 text-sm';
-  }
-  return 'px-2.5 py-0.5 text-xs';
+  return props.size;
 });
 
+const classes = computed(() => {
+  const base = 'inline-flex items-center rounded leading-tight';
+  const size = {
+    sm: 'px-1.5 py-px text-[10px]',
+    md: 'px-1.5 py-0.5 text-xs',
+    lg: 'px-1.5 py-0.5 text-sm',
+  }[sizeInternal.value];
+  const wrap = props.wrap ? 'whitespace-nowrap' : '';
+
+  return twMerge(base, wrap, size, props.class);
+})
+
 const iconSizeClasses = computed(() => {
-  if (props.size == 'sm') {
-    return 'h-2.5 w-2.5 mr-1 -ml-px';
-  }
-  if (props.size == 'base') {
-    return 'h-3 w-3 mr-1 -ml-0.5';
-  }
-  if (props.size == 'lg') {
-    return 'h-4 w-4 mr-1 -ml-0.5';
-  }
-  return 'h-3 w-3 mr-1 -ml-0.5';
+
+  const size = {
+    sm: 'h-2.5 w-2.5 mr-1',
+    md: 'h-3 w-3 mr-1',
+    lg: 'h-4 w-4 mr-1',
+  }[sizeInternal.value];
+
+  return size;
 });
 </script>

package/src/utils/colors.ts

@@ -44,7 +44,7 @@ export const palette: Record<string, ColorPalette> = {
   red: {
     low: {
       backgroundColor: colors.red[100],
-      textColor: colors.red[700],
+      textColor: colors.red[800],
       borderColor: colors.red[300],
     },
     high: {
@@ -56,7 +56,7 @@ export const palette: Record<string, ColorPalette> = {
   orange: {
     low: {
       backgroundColor: colors.orange[100],
-      textColor: colors.orange[700],
+      textColor: colors.orange[800],
       borderColor: colors.orange[300],
     },
     high: {
@@ -68,7 +68,7 @@ export const palette: Record<string, ColorPalette> = {
   yellow: {
     low: {
       backgroundColor: colors.yellow[100],
-      textColor: colors.yellow[700],
+      textColor: colors.yellow[800],
       borderColor: colors.yellow[300],
     },
     high: {
@@ -80,7 +80,7 @@ export const palette: Record<string, ColorPalette> = {
   green: {
     low: {
       backgroundColor: colors.green[100],
-      textColor: colors.green[700],
+      textColor: colors.green[800],
       borderColor: colors.green[300],
     },
     high: {
@@ -92,7 +92,7 @@ export const palette: Record<string, ColorPalette> = {
   teal: {
     low: {
       backgroundColor: colors.teal[100],
-      textColor: colors.teal[700],
+      textColor: colors.teal[800],
       borderColor: colors.teal[300],
     },
     high: {
@@ -104,7 +104,7 @@ export const palette: Record<string, ColorPalette> = {
   cyan: {
     low: {
       backgroundColor: colors.cyan[100],
-      textColor: colors.cyan[700],
+      textColor: colors.cyan[800],
       borderColor: colors.cyan[300],
     },
     high: {
@@ -116,7 +116,7 @@ export const palette: Record<string, ColorPalette> = {
   blue: {
     low: {
       backgroundColor: colors.blue[100],
-      textColor: colors.blue[700],
+      textColor: colors.blue[800],
       borderColor: colors.blue[300],
     },
     high: {
@@ -128,7 +128,7 @@ export const palette: Record<string, ColorPalette> = {
   indigo: {
     low: {
       backgroundColor: colors.indigo[100],
-      textColor: colors.indigo[700],
+      textColor: colors.indigo[800],
       borderColor: colors.indigo[300],
     },
     high: {
@@ -140,7 +140,7 @@ export const palette: Record<string, ColorPalette> = {
   purple: {
     low: {
       backgroundColor: colors.purple[100],
-      textColor: colors.purple[700],
+      textColor: colors.purple[800],
       borderColor: colors.purple[300],
     },
     high: {
@@ -152,7 +152,7 @@ export const palette: Record<string, ColorPalette> = {
   pink: {
     low: {
       backgroundColor: colors.pink[100],
-      textColor: colors.pink[700],
+      textColor: colors.pink[800],
       borderColor: colors.pink[300],
     },
     high: {