@indielayer/ui 1.4.0 → 1.5.0

package/lib/tailwind.preset.js

@@ -28,7 +28,6 @@ module.exports = () => ({
         secondary: getColorVarPallete('secondary'),
         success: getColorVarPallete('success'),
         warning: getColorVarPallete('warning'),
-        danger: getColorVarPallete('error'),
         error: getColorVarPallete('error'),
       },
       borderColor: getColorVar('border'),

package/lib/themes/base/index.js

@@ -1,14 +1,11 @@
 import * as e from "./components.js";
 import s from "./styles.css.js";
-const o = {
+const t = {
   name: "Base",
-  colors: {
-    primary: { 50: "#ecfdf5", 100: "#d1fae5", 200: "#a7f3d0", 300: "#6ee7b7", 400: "#34d399", 500: "#10b981", 600: "#059669", 700: "#047857", 800: "#065f46", 900: "#064e3b", 950: "#022c22" }
-  },
   styles: `${s}`,
   classPrefix: "x-",
   components: e
-}, a = o;
+}, m = t;
 export {
-  a as default
+  m as default
 };

package/lib/themes/base/styles.css.js

@@ -9,6 +9,10 @@ html.dark {
   background-color: #111827;
 }
 
+body {
+  font-size: 14px;
+}
+
 *,
 ::before,
 ::after {

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.4.0";
+declare const _default: "1.5.0";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.4.0";
+const e = "1.5.0";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -35,6 +35,7 @@
       "require": "./lib/index.umd.js",
       "types": "./lib/index.d.ts"
     },
+    "./docs/*": "./docs/*",
     "./nuxt": "./exports/nuxt.mjs",
     "./nuxt.plugin": "./exports/nuxt.plugin.js",
     "./nuxt.plugin.js": "./exports/nuxt.plugin.js",

package/src/components/accordion/theme/AccordionItem.base.theme.ts

@@ -11,7 +11,7 @@ const theme: AccordionItemTheme = {
         if (props.iconAlign === 'left') classes.push('pl-8 pr-4')
         else classes.push('pr-8 pl-4')
         classes.push('py-2')
-        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-600')
+        if (!props.disabled) classes.push('hover:bg-secondary-50 dark:hover:bg-secondary-600')
       }
 
       if (!props.disabled) classes.push('cursor-pointer')
@@ -23,7 +23,7 @@ const theme: AccordionItemTheme = {
       const classes = ['absolute flex transform transition-transform duration-150']
 
       if (!data.collapsed) classes.push('rotate-180')
-      if (props.disabled) classes.push('text-gray-300')
+      if (props.disabled) classes.push('text-secondary-300')
 
       if (props.iconAlign === 'left') classes.push('left-2')
       else classes.push('right-2')

package/src/components/badge/Badge.vue

@@ -101,7 +101,7 @@ const { styles, classes, className } = useTheme('Badge', {}, props)
         :class="[
           positionClasses,
           {
-            'border-2 border-gray-50 dark:border-gray-900': outlined,
+            'border-2 border-secondary-50 dark:border-secondary-900': outlined,
           }
         ]"
       >

package/src/components/breadcrumbs/theme/Breadcrumbs.base.theme.ts

@@ -4,7 +4,7 @@ const theme: BreadcrumbsTheme = {
   classes: {
     wrapper: 'flex items-center flex-wrap',
     item: 'flex items-center last-of-type:font-semibold',
-    separator: 'text-gray-400 mx-1.5',
+    separator: 'text-secondary-400 mx-1.5',
   },
 }
 

package/src/components/button/theme/Button.base.theme.ts

@@ -193,10 +193,10 @@ const theme: ButtonTheme = {
         // filled
         vars.push(css.variables({
           text: '#fff',
-          border: !data.isButtonGroup ? 'transparent' : color[600],
+          border: color[600],
           dark: {
             text: '#fff',
-            border: !data.isButtonGroup ? 'transparent' : color[500],
+            border: color[500],
           },
         }))
         if (props.disabled) {

package/src/components/card/theme/Card.base.theme.ts

@@ -2,7 +2,7 @@ import type { CardTheme } from '../Card.vue'
 
 const theme: CardTheme = {
   classes: {
-    wrapper: ({ props }) => `rounded bg-white dark:bg-gray-800${props.flat ? '' : ' shadow'}`,
+    wrapper: ({ props }) => `bg-slate-50 dark:bg-slate-800 rounded-md ${props.flat ? '' : 'shadow'}`,
   },
 }
 

package/src/components/checkbox/Checkbox.vue

@@ -149,7 +149,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
-        <span v-else-if="indeterminate" name="check-icon" class="w-2/3 h-[2px] bg-white dark:bg-gray-900"></span>
+        <span v-else-if="indeterminate" name="check-icon" class="w-2/3 h-[2px] bg-white dark:bg-secondary-900"></span>
         <slot v-else name="icon">
           <svg
             viewBox="0 0 20 20"

package/src/components/checkbox/theme/Checkbox.base.theme.ts

@@ -11,17 +11,17 @@ const theme: CheckboxTheme = {
     },
 
     box: ({ props }) => {
-      const classes = ['rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
+      const classes = ['rounded flex justify-center items-center shrink-0 border border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
 
-      if (props.size === 'xs' || props.size === 'sm') classes.push('h-4 w-4')
+      if (props.size === 'lg') classes.push('h-5 w-5')
       else if (props.size === 'xl') classes.push('h-6 w-6')
-      else classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
 
       return classes
     },
 
     content: ({ props }) => {
-      const classes = ['flex items-center']
+      const classes = ['flex items-baseline']
 
       if (props.disabled) classes.push('cursor-not-allowed')
 
@@ -29,17 +29,17 @@ const theme: CheckboxTheme = {
     },
 
     icon: ({ props }) => {
-      const classes = ['fill-current text-white dark:text-gray-900']
+      const classes = ['fill-current text-white']
 
-      if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
+      if (props.size === 'lg') classes.push('h-3 w-3')
       else if (props.size === 'xl') classes.push('h-4 w-4')
-      else classes.push('h-3 w-3')
+      else classes.push('h-2.5 w-2.5')
 
       return classes
     },
 
     label: ({ props }) => {
-      const classes = ['inline-block font-medium text-gray-800 dark:text-gray-200 pl-2']
+      const classes = ['inline-block font-medium text-secondary-800 dark:text-secondary-200 pl-2']
 
       if (props.size === 'xs') classes.push('text-xs')
       else if (props.size === 'sm') classes.push('text-sm')

package/src/components/checkbox/theme/Checkbox.carbon.theme.ts

@@ -29,7 +29,7 @@ const theme: CheckboxTheme = {
     },
 
     icon: ({ props }) => {
-      const classes = ['fill-current text-white dark:text-gray-900']
+      const classes = ['fill-current text-white dark:text-secondary-900']
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
       else if (props.size === 'xl') classes.push('h-3.5 w-3.5')
@@ -39,7 +39,7 @@ const theme: CheckboxTheme = {
     },
 
     label: ({ props }) => {
-      const classes = ['text-gray-800 dark:text-gray-200 pl-2 text-sm']
+      const classes = ['text-secondary-800 dark:text-secondary-200 pl-2 text-sm']
 
       if (props.size === 'xs') classes.push('text-xs')
       else if (props.size === 'sm') classes.push('text-sm')

package/src/components/container/theme/Container.base.theme.ts

@@ -3,9 +3,9 @@ import type { ContainerTheme } from '../Container.vue'
 const theme: ContainerTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes = ['px-4 md:px-8']
+      const classes = ['px-4 md:px-6']
 
-      if (!props.fluid) classes.push('max-w-screen-2xl mx-auto')
+      if (!props.fluid) classes.push('max-w-screen-lg mx-auto')
 
       return classes
     },

package/src/components/divider/Divider.vue

@@ -40,7 +40,7 @@ const { styles, classes, className } = useTheme('Divider', {}, props)
     ></div>
     <div
       v-if="label"
-      class="font-medium text-sm text-gray-600 dark:text-gray-300"
+      class="font-medium text-sm text-secondary-600 dark:text-secondary-300"
       :class="[
         classes.label,
         {

package/src/components/divider/theme/Divider.base.theme.ts

@@ -4,9 +4,9 @@ const theme: DividerTheme = {
   classes: {
     wrapper: ({ props }) => `flex justify-center items-center ${props.vertical ? 'h-full flex-col' : 'w-full'}`,
 
-    label: 'font-medium text-sm text-gray-600 dark:text-gray-300',
+    label: 'font-medium text-sm text-secondary-600 dark:text-secondary-300',
 
-    line: 'bg-gray-200 dark:bg-slate-700 flex-grow',
+    line: 'bg-secondary-200 dark:bg-secondary-700 flex-grow',
   },
 }
 

package/src/components/drawer/Drawer.vue

@@ -155,7 +155,7 @@ function onEnter(el: Element, done: () => void) {
   }
   el.addEventListener('transitionend', done)
   setTimeout(() => {
-    if (props.backdrop) el.classList.add('bg-gray-500/30')
+    if (props.backdrop) el.classList.add('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = '0'
     else if (props.position === 'bottom') (el as HTMLElement).style.bottom = '0'
     else if (props.position === 'left') (el as HTMLElement).style.left = '0'
@@ -168,7 +168,7 @@ function onBeforeLeave(el: Element) {}
 function onLeave(el: Element, done: () => void) {
   el.addEventListener('transitionend', done)
   setTimeout(() => {
-    if (props.backdrop) el.classList.remove('bg-gray-500/30')
+    if (props.backdrop) el.classList.remove('bg-slate-500/30')
     if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`
     else if (props.position === 'bottom') (el as HTMLElement).style.bottom = `-${props.height}px`
     else if (props.position === 'left') (el as HTMLElement).style.left = `-${props.width}px`

package/src/components/drawer/theme/Drawer.base.theme.ts

@@ -2,7 +2,7 @@ import type { DrawerTheme } from '../Drawer.vue'
 
 const theme: DrawerTheme = {
   classes: {
-    wrapper: 'flex flex-col max-h-full bg-white dark:bg-gray-800',
+    wrapper: 'flex flex-col max-h-full bg-white dark:bg-secondary-800',
 
     backdrop: 'duration-150 ease-in-out',
   },

package/src/components/form/Form.vue

@@ -139,7 +139,7 @@ const { styles, classes, className } = useTheme('Form', {}, props)
     @submit="submit"
   >
     <slot name="header">
-      <div v-if="title || description" class="mb-10">
+      <div v-if="title || description" class="mb-6">
         <p v-if="title" :class="classes.title">{{ title }}</p>
         <p v-if="description" :class="classes.description">{{ description }}</p>
       </div>

package/src/components/form/theme/Form.base.theme.ts

@@ -8,7 +8,7 @@ const theme: FormTheme = {
 
     title: 'text-xl mb-1',
 
-    description: 'text-gray-500',
+    description: 'text-secondary-500',
 
     footer: 'space-x-4 mt-4',
   },

package/src/components/form/theme/Form.carbon.theme.ts

@@ -8,7 +8,7 @@ const theme: FormTheme = {
 
     title: 'text-xl mb-1',
 
-    description: 'text-gray-500',
+    description: 'text-secondary-500',
 
     footer: 'grid grid-cols-2 gap-4 lg:flex mt-8',
   },

package/src/components/formGroup/FormGroup.vue

@@ -106,6 +106,7 @@ defineExpose({ focus, blur, reset, validate, setError })
     :class="[
       className,
     ]"
+    :tooltip="tooltip"
     v-on="listeners"
   >
     <div :class="classes.wrapper">

package/src/components/formGroup/theme/FormGroup.base.theme.ts

@@ -5,7 +5,7 @@ const theme: FormGroupTheme = {
     wrapper: ({ props }) => {
       const classes = ['']
 
-      if (!props.vertical) classes.push('flex gap-2')
+      if (!props.vertical) classes.push('flex gap-4')
       else classes.push('grid gap-1')
 
       return classes

package/src/components/icon/theme/Icon.base.theme.ts

@@ -8,9 +8,9 @@ const theme: IconTheme = {
       if (props.size === 'xs') return classes + ' h-3 w-3'
       else if (props.size === 'sm') return classes + ' h-4 w-4'
       else if (props.size === 'lg') return classes + ' h-6 w-6'
-      else if (props.size === 'xl') return classes + ' h-9 w-9'
+      else if (props.size === 'xl') return classes + ' h-7 w-7'
 
-      return classes + ' h-5 w-5'
+      return classes + ' h-4 w-4'
     },
   },
 }

package/src/components/input/Input.vue

@@ -114,6 +114,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
+    :tooltip="tooltip"
   >
     <div class="relative">
       <slot name="prefix">
@@ -134,7 +135,7 @@ defineExpose({ focus, blur, reset, validate, setError })
           type === 'password' ? 'pr-10' : '',
           // error
           errorInternal
-            ? 'border-red-500 dark:border-red-400 focus:outline-red-500'
+            ? 'border-error-500 dark:border-error-400 focus:outline-error-500'
             : 'focus:outline-[color:var(--x-input-border)]',
           {
             '!pl-10': iconLeft,

package/src/components/input/theme/Input.base.theme.ts

@@ -5,9 +5,9 @@ const theme: InputTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']
+      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border shadow-sm rounded-md']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
       else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
@@ -16,13 +16,13 @@ const theme: InputTheme = {
       else classes.push('px-3 py-2')
 
       classes.push(props.disabled
-        ? 'bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed'
-        : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        ? 'bg-secondary-100 dark:bg-secondary-700 text-secondary-400 dark:text-secondary-600 cursor-not-allowed'
+        : 'bg-white dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
 
       return classes
     },
 
-    icon: 'text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0',
+    icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
   },
 
   styles: ({ colors, props, css }) => {

package/src/components/input/theme/Input.carbon.theme.ts

@@ -5,26 +5,26 @@ const theme: InputTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4']
+      const classes = ['appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-secondary-300 dark:border-secondary-700 border-b text-sm px-4']
 
-      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
       else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
       else classes.push('py-2.5')
 
       if (props.disabled) {
-        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+        classes.push('bg-secondary-100 dark:bg-secondary-900 text-secondary-300 cursor-not-allowed')
       } else if (props.readonly) {
-        classes.push('bg-white dark:bg-gray-900 text-gray-700')
+        classes.push('bg-white dark:bg-secondary-900 text-secondary-700')
       } else {
-        classes.push('bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-secondary-50 dark:bg-secondary-800 text-secondary-700 dark:text-secondary-200')
       }
 
       return classes
     },
 
-    icon: 'text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0',
+    icon: 'text-secondary-600 dark:text-secondary-300 absolute my-auto inset-y-0',
   },
 
   styles: ({ colors, props, css }) => {

package/src/components/inputFooter/theme/InputFooter.base.theme.ts

@@ -2,9 +2,9 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 
 const theme: InputFooterTheme = {
   classes: {
-    wrapper: 'min-h-[1.3rem] text-sm mt-1',
-    helperText: 'text-gray-500 dark:text-gray-400',
-    errorText: 'text-red-500 dark:text-red-400',
+    wrapper: 'min-h-[1.3rem] text-xs mt-1',
+    helperText: 'text-secondary-500 dark:text-secondary-400',
+    errorText: 'text-error-500 dark:text-error-400',
   },
 }
 

package/src/components/inputFooter/theme/InputFooter.carbon.theme.ts

@@ -3,8 +3,8 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 const theme: InputFooterTheme = {
   classes: {
     wrapper: 'text-xs mt-1',
-    helperText: 'text-gray-500 dark:text-gray-400',
-    errorText: 'text-red-500 dark:text-red-400',
+    helperText: 'text-secondary-500 dark:text-secondary-400',
+    errorText: 'text-error-500 dark:text-error-400',
   },
 }
 

package/src/components/label/Label.vue

@@ -10,6 +10,7 @@ const labelProps = {
     type: String,
     default: 'label',
   },
+  tooltip: String,
 }
 
 export type LabelProps = ExtractPublicPropTypes<typeof labelProps>
@@ -29,6 +30,7 @@ export default {
 import type { ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useCommon } from '../../composables/useCommon'
+import XToggleTip from '../tooltip/ToggleTip.vue'
 
 const props = defineProps(labelProps)
 
@@ -47,7 +49,8 @@ const { styles, classes, className } = useTheme('Label', {}, props)
       :title="label"
       :class="classes.label"
     >
-      {{ label }}
+      <span>{{ label }}</span>
+      <x-toggle-tip v-if="tooltip" :content="tooltip"/>
     </component>
     <slot></slot>
   </component>

package/src/components/label/theme/Label.base.theme.ts

@@ -12,7 +12,7 @@ const theme: LabelTheme = {
     },
 
     label: ({ props }) => {
-      const classes = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
+      const classes = 'flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1'
 
       if (props.size === 'xs') return classes + ' text-xs'
       else if (props.size === 'sm') return classes + ' text-sm'

package/src/components/label/theme/Label.carbon.theme.ts

@@ -11,7 +11,7 @@ const theme: LabelTheme = {
       return classes
     },
 
-    label: 'text-xs text-gray-500 dark:text-gray-200 mb-2',
+    label: 'text-xs text-secondary-500 dark:text-secondary-200 mb-2',
   },
 }
 

package/src/components/link/Link.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 const linkProps = {
-  ...useColors.props('primary'),
+  ...useColors.props('secondary'),
   tag: {
     type: String,
     default: 'a',

package/src/components/loader/theme/Loader.base.theme.ts

@@ -4,7 +4,7 @@ const theme: LoaderTheme = {
   classes: {
     wrapper: 'inline-flex items-center justify-center',
     iconSuccess: 'text-green-500',
-    iconError: 'text-red-500',
+    iconError: 'text-error-500',
     label: 'mx-2 text-sm',
   },
 }

package/src/components/loader/theme/Loader.carbon.theme.ts

@@ -4,7 +4,7 @@ const theme: LoaderTheme = {
   classes: {
     wrapper: 'inline-flex items-center justify-center',
     iconSuccess: 'text-green-500',
-    iconError: 'text-red-500',
+    iconError: 'text-error-500',
     label: 'mx-2 text-sm',
   },
 }

package/src/components/menu/Menu.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 const menuProps = {
   ...useCommon.props(),
-  ...useColors.props('primary'),
+  ...useColors.props('secondary'),
   items: Array as PropType<MenuArrayItem[]>,
   collapsible: {
     type: Boolean,
@@ -109,7 +109,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
           </template>
           <template #content="{ expand }">
             <x-menu
-              class="border-l ml-4 border-gray-100 dark:border-gray-700"
+              class="border-l ml-4 border-secondary-100 dark:border-secondary-700"
               :class="{ 'pl-1': filled }"
               :items="item.items"
               :color="item.color || color"
@@ -138,7 +138,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
             @click="$emit('item-click')"
           />
           <x-menu
-            class="x-menu-inner space-y-1 ml-4 border-l border-gray-100 dark:border-gray-700"
+            class="x-menu-inner space-y-1 ml-4 border-l border-secondary-100 dark:border-secondary-700"
             :class="{ 'pl-1': filled }"
             :items="item.items"
             :color="item.color || color"