@indielayer/ui 1.4.0 → 1.5.0

package/src/components/slider/theme/Slider.carbon.theme.ts

@@ -4,7 +4,7 @@ const theme: SliderTheme = {
   classes: {
     wrapper: '',
 
-    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900 dark:bg-gray-100',
+    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-secondary-900 dark:bg-secondary-100',
   },
 
   styles: ({ props, colors, css }) => {

package/src/components/stepper/Stepper.vue

@@ -116,7 +116,7 @@ const { styles, classes, className } = useTheme('Stepper', {}, props)
             :key="index"
             :class="[classes.step, {
               'cursor-pointer': interactive && !step.disabled,
-              'text-gray-400 dark:text-gray-600': step.disabled,
+              'text-secondary-400 dark:text-secondary-600': step.disabled,
               'flex-1': grow,
             }]"
             :disabled="step.disabled || !interactive"
@@ -125,7 +125,7 @@ const { styles, classes, className } = useTheme('Stepper', {}, props)
             <div class="overflow-hidden">
               <div
                 class="h-0.5 w-full mb-2"
-                :class="[step.status === 'complete' || step.status === 'incomplete' ? 'bg-primary-500' : 'bg-gray-200 dark:bg-gray-700']"
+                :class="[step.status === 'complete' || step.status === 'incomplete' ? 'bg-primary-500' : 'bg-secondary-200 dark:bg-secondary-700']"
               ></div>
               <div class="flex items-start pr-4">
                 <x-icon
@@ -138,7 +138,7 @@ const { styles, classes, className } = useTheme('Stepper', {}, props)
                 />
                 <div class="grid text-left">
                   <div class="text-sm truncate">{{ step.label }}</div>
-                  <div v-if="step.description" class="text-xs text-gray-500">{{ step.description }}</div>
+                  <div v-if="step.description" class="text-xs text-secondary-500">{{ step.description }}</div>
                 </div>
               </div>
             </div>

package/src/components/tab/Tab.vue

@@ -139,7 +139,7 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
         'text-[color:var(--x-tab-group-text)] dark:text-[color:var(--x-tab-group-dark-text)]': selected,
         'cursor-pointer': !disabled,
         'cursor-not-allowed': disabled,
-        'cursor-not-allowed text-gray-500': disabled && !selected,
+        'cursor-not-allowed text-secondary-500': disabled && !selected,
       },
     ]"
     :aria-disabled="disabled ? 'true' : undefined"
@@ -165,13 +165,13 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
           v-if="removable"
           size="sm"
           :icon="closeIcon"
-          class="ml-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-500 transition-colors duration-150"
+          class="ml-2 cursor-pointer hover:text-secondary-700 dark:hover:text-secondary-500 transition-colors duration-150"
           @click="(e: Event) => $emit('remove', e)"
         />
       </div>
     </slot>
     <teleport v-if="selected && teleportTo" :to="teleportTo">
-      <div role="tabpanel" :class="classes.tabpanel">
+      <div v-if="$slots.default" role="tabpanel" :class="classes.tabpanel">
         <slot></slot>
       </div>
     </teleport>

package/src/components/tab/theme/TabGroup.base.theme.ts

@@ -9,7 +9,7 @@ const theme: TabGroupTheme = {
 
       if (!props.fullWidth) c.push('!w-fit')
       if (props.variant === 'block') c.push('rounded-md')
-      if (props.variant === 'block' && !props.ghost) c.push('bg-slate-100 dark:bg-gray-800 p-1')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-100 dark:bg-secondary-800 p-1')
 
       return c
     },
@@ -17,7 +17,7 @@ const theme: TabGroupTheme = {
     list: ({ props }) => {
       const c = ['flex min-w-full w-fit']
 
-      if (props.variant === 'line') c.push('border-b border-gray-200 dark:border-gray-700')
+      if (props.variant === 'line') c.push('border-b border-secondary-200 dark:border-secondary-700')
       if (props.variant === 'line' && !props.grow) c.push('space-x-8')
       if (props.variant === 'block') c.push('z-[1]')
       if (props.align === 'center') c.push('justify-center')
@@ -38,7 +38,7 @@ const theme: TabGroupTheme = {
   },
 
   styles: ({ props, colors, css }) => {
-    const gray = colors.getPalette('gray')
+    const secondary = colors.getPalette('secondary')
     const color = colors.getPalette(props.color)
 
     return css.variables({
@@ -46,7 +46,7 @@ const theme: TabGroupTheme = {
       bg: props.ghost ? color[50] : '#fff',
       dark: {
         text: color[400],
-        bg: props.ghost ? color[900] : gray[700],
+        bg: props.ghost ? color[900] : secondary[700],
       },
     })
   },

package/src/components/tab/theme/TabGroup.carbon.theme.ts

@@ -9,7 +9,7 @@ const theme: TabGroupTheme = {
 
       if (!props.fullWidth) c.push('!w-fit')
       if (props.variant === 'block') c.push('')
-      if (props.variant === 'block' && !props.ghost) c.push('bg-gray-200 dark:bg-gray-800')
+      if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-200 dark:bg-secondary-800')
 
       return c
     },
@@ -17,7 +17,7 @@ const theme: TabGroupTheme = {
     list: ({ props }) => {
       const c = ['flex min-w-full w-fit']
 
-      if (props.variant === 'line') c.push('border-b border-gray-200 dark:border-gray-700')
+      if (props.variant === 'line') c.push('border-b border-secondary-200 dark:border-secondary-700')
       if (props.variant === 'line' && !props.grow) c.push('')
       if (props.variant === 'block') c.push('z-[1] py-1.5')
       if (props.align === 'center') c.push('justify-center')
@@ -31,7 +31,7 @@ const theme: TabGroupTheme = {
 
       if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
 
-      if (props.variant === 'block') c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-gray-100 dark:bg-gray-700')
+      if (props.variant === 'block') c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-secondary-100 dark:bg-secondary-700')
 
       return c
     },

package/src/components/table/Table.vue

@@ -66,6 +66,8 @@ import XSpinner from '../spinner/Spinner.vue'
 import XSkeleton from '../skeleton/Skeleton.vue'
 import type { SkeletonShape } from '../skeleton/Skeleton.vue'
 
+import XIcon from '../icon/Icon.vue'
+
 import { chevronDownIcon } from '../../common/icons'
 
 const props = defineProps({

package/src/components/table/theme/Table.base.theme.ts

@@ -16,7 +16,7 @@ const theme: TableTheme = {
       return classes
     },
 
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30',
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-secondary-300 dark:bg-secondary-600 rounded opacity-30',
   },
 }
 

package/src/components/table/theme/Table.carbon.theme.ts

@@ -2,7 +2,7 @@ import type { TableTheme } from '../Table.vue'
 
 const theme: TableTheme = {
   classes: {
-    wrapper: 'w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-gray-800',
+    wrapper: 'w-full h-full shadow-sm overflow-x-auto text-sm bg-white dark:bg-secondary-800',
 
     table: ({ props }) => {
       const classes = ['w-full relative']
@@ -16,7 +16,7 @@ const theme: TableTheme = {
       return classes
     },
 
-    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-30',
+    loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-secondary-300 dark:bg-secondary-600 rounded opacity-30',
   },
 }
 

package/src/components/table/theme/TableHead.base.theme.ts

@@ -3,7 +3,7 @@ import type { TableHeadTheme } from '../TableHead.vue'
 const theme: TableHeadTheme = {
   classes: {
     thead: 'align-bottom',
-    row: 'text-sm text-gray-600 dark:text-gray-400 border-b',
+    row: 'text-sm text-secondary-600 dark:text-secondary-400 border-b',
   },
 }
 

package/src/components/table/theme/TableHead.carbon.theme.ts

@@ -3,7 +3,7 @@ import type { TableHeadTheme } from '../TableHead.vue'
 const theme: TableHeadTheme = {
   classes: {
     thead: 'align-bottom',
-    row: 'text-gray-900 dark:text-gray-50',
+    row: 'text-secondary-900 dark:text-secondary-50',
   },
 }
 

package/src/components/table/theme/TableHeader.base.theme.ts

@@ -5,7 +5,7 @@ const theme: TableHeaderTheme = {
     th: ({ props }) => {
       const classes = ['relative py-2 font-semibold tracking-widest uppercase text-xs px-3']
 
-      if (props.sortable) classes.push('cursor-pointer hover:text-gray-800 dark:hover:text-gray-300 transition-colors duration-150 ease-in-out')
+      if (props.sortable) classes.push('cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out')
 
       if (props.stickyHeader) classes.push('sticky top-0')
 

package/src/components/table/theme/TableHeader.carbon.theme.ts

@@ -3,9 +3,9 @@ import type { TableHeaderTheme } from '../TableHeader.vue'
 const theme: TableHeaderTheme = {
   classes: {
     th: ({ props }) => {
-      const classes = ['relative py-3.5 font-semibold text-sm px-3 bg-gray-200 dark:bg-gray-700 select-none']
+      const classes = ['relative py-3.5 font-semibold text-sm px-3 bg-secondary-200 dark:bg-secondary-700 select-none']
 
-      if (props.sortable) classes.push('cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-150 ease-in-out pr-5')
+      if (props.sortable) classes.push('cursor-pointer hover:bg-secondary-300 dark:hover:bg-secondary-600 transition-colors duration-150 ease-in-out pr-5')
 
       if (props.stickyHeader) classes.push('sticky top-0')
 

package/src/components/table/theme/TableRow.base.theme.ts

@@ -6,12 +6,12 @@ const theme: TableRowTheme = {
       const classes = []
 
       if (props.striped) {
-        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+        classes.push('odd:bg-secondary-50 dark:odd:bg-secondary-800')
       } else {
-        classes.push('border-b border-gray-200 dark:border-gray-700')
+        classes.push('border-b border-secondary-200 dark:border-secondary-700')
       }
 
-      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer')
+      if (props.pointer) classes.push('hover:bg-secondary-50 dark:hover:bg-secondary-700 cursor-pointer')
 
       return classes
     },

package/src/components/table/theme/TableRow.carbon.theme.ts

@@ -6,12 +6,12 @@ const theme: TableRowTheme = {
       const classes = []
 
       if (props.striped) {
-        classes.push('odd:bg-gray-50 dark:odd:bg-gray-800')
+        classes.push('odd:bg-secondary-50 dark:odd:bg-secondary-800')
       } else {
-        classes.push('border-b border-gray-200 dark:border-gray-700')
+        classes.push('border-b border-secondary-200 dark:border-secondary-700')
       }
 
-      if (props.pointer) classes.push('hover:bg-gray-50 dark:hover:bg-gray-600 cursor-pointer')
+      if (props.pointer) classes.push('hover:bg-secondary-50 dark:hover:bg-secondary-600 cursor-pointer')
 
       return classes
     },

package/src/components/tag/Tag.vue

@@ -70,7 +70,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
       <x-icon
         :size="closeIconSize"
         :icon="closeIcon"
-        class="ml-1.5 cursor-pointer hover:text-gray-700 transition-colors duration-150"
+        class="ml-1.5 cursor-pointer hover:text-secondary-700 transition-colors duration-150"
         @click="(e: Event) => $emit('remove', e)"
       />
     </span>

package/src/components/textarea/Textarea.vue

@@ -19,6 +19,7 @@ const textareaProps = {
   adjustToText: Boolean,
   preventEnter: Boolean,
   block: Boolean,
+  resizable: Boolean,
 }
 
 export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
@@ -114,6 +115,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       className,
       classes.wrapper,
     ]"
+    :tooltip="tooltip"
   >
     <textarea
       :id="id"
@@ -123,7 +125,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       :class="[
         classes.input,
         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-textarea-border)]',
       ]"
       :disabled="disabled"

package/src/components/textarea/theme/Textarea.base.theme.ts

@@ -5,9 +5,10 @@ const theme: TextareaTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition 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 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 (!props.resizable) classes.push('resize-none')
+      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,8 +17,8 @@ const theme: TextareaTheme = {
       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
     },

package/src/components/textarea/theme/Textarea.carbon.theme.ts

@@ -5,20 +5,20 @@ const theme: TextareaTheme = {
     wrapper: '',
 
     input: ({ props, data }) => {
-      const classes = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4']
+      const classes = ['resize-none appearance-none block w-full placeholder-secondary-400 dark:placeholder-secondary-500 outline-transparent outline outline-2 outline-offset-[-1px] transition 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

package/src/components/toggle/Toggle.vue

@@ -76,8 +76,8 @@ defineExpose({ focus, blur, reset, validate, setError })
         :style="styles"
         :class="{
           [`shadow-lg shadow-${color}-500/50`]: glow && modelValue,
-          'bg-gray-300 dark:bg-gray-500': !disabled && !checked && !loading,
-          'bg-gray-100 dark:bg-gray-700': disabled || loading,
+          'bg-secondary-300 dark:bg-secondary-500': !disabled && !checked && !loading,
+          'bg-secondary-100 dark:bg-secondary-700': disabled || loading,
           'bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]': !disabled && checked,
         }"
       >
@@ -102,7 +102,7 @@ defineExpose({ focus, blur, reset, validate, setError })
                 'translate-x-full': checked,
                 'shadow': !disabled
               },
-              disabled ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-800'
+              disabled ? 'bg-secondary-50 dark:bg-secondary-800' : 'bg-white dark:bg-secondary-800'
             ]"
           ></div>
         </div>

package/src/components/toggle/theme/Toggle.base.theme.ts

@@ -5,7 +5,7 @@ const theme: ToggleTheme = {
     wrapper: '',
 
     label: ({ props }) => {
-      const c = 'font-medium text-gray-800 dark:text-gray-200'
+      const c = 'font-medium text-secondary-800 dark:text-secondary-200'
 
       if (props.size === 'xs') return c + ' text-xs'
       else if (props.size === 'sm') return c + ' text-sm'

package/src/components/tooltip/ToggleTip.vue

@@ -0,0 +1,31 @@
+<script lang="ts">
+const toggleTipProps = {
+  content: String,
+  icon: String,
+}
+
+export type ToggleTipProps = ExtractPublicPropTypes<typeof toggleTipProps>
+
+export default { name: 'XToggleTip' }
+</script>
+
+<script setup lang="ts">
+import { computed, type ExtractPublicPropTypes } from 'vue'
+import XTooltip from './Tooltip.vue'
+import XIcon from '../icon/Icon.vue'
+
+import { infoIcon } from '../../common/icons'
+
+const props = defineProps(toggleTipProps)
+
+const computedIcon = computed(() => props.icon || infoIcon)
+</script>
+
+<template>
+  <x-tooltip placement="auto">
+    <x-icon :icon="computedIcon" class="text-secondary-500 dark:text-secondary-300 cursor-pointer" />
+    <template #tooltip>
+      <div v-html="content"></div>
+    </template>
+  </x-tooltip>
+</template>

package/src/components/tooltip/Tooltip.vue

@@ -1,5 +1,12 @@
 <script lang="ts">
-const tooltipProps = {}
+const tooltipProps = {
+  placement: {
+    type: String as PropType<PopoverPlacement>,
+    default: 'bottom',
+  },
+}
+
+export type PopoverPlacement = Placement
 
 export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>
 
@@ -7,17 +14,20 @@ export default { name: 'XTooltip' }
 </script>
 
 <script setup lang="ts">
-import type { ExtractPublicPropTypes } from 'vue'
+import type { ExtractPublicPropTypes, PropType } from 'vue'
 import XPopover from '../../components/popover/Popover.vue'
 import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
+import { type Placement } from 'floating-vue'
+
+const props = defineProps(tooltipProps)
 </script>
 
 <template>
-  <x-popover :triggers="['hover']" class="inline-block">
+  <x-popover :triggers="['hover', 'click']" class="inline-block" :hide-arrow="false" :placement="placement">
     <slot></slot>
     <template #content>
       <div class="dark">
-        <x-popover-container class="p-2 text-white text-sm w-max max-w-xs">
+        <x-popover-container class="p-2 text-white text-xs w-max max-w-xs">
           <slot name="tooltip"></slot>
         </x-popover-container>
       </div>

package/src/components/tooltip/__tests__/ToggleTip.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ToggleTip from '../ToggleTip.vue'
+
+describe('ToggleTip', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(ToggleTip)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/tooltip/index.ts

@@ -1,2 +1,5 @@
 export { default as XTooltip } from './Tooltip.vue'
 export type { TooltipProps } from './Tooltip.vue'
+
+export { default as XToggleTip } from './ToggleTip.vue'
+export type { ToggleTipProps } from './ToggleTip.vue'

package/src/composables/useColors.ts

@@ -33,7 +33,7 @@ export interface ColorComposition {
 const colorCache: ColorLibrary = {}
 
 const defaultColors = {
-  primary: tailwindColors.sky,
+  primary: tailwindColors.emerald,
   secondary: tailwindColors.slate,
   success: tailwindColors.green,
   warning: tailwindColors.yellow,

package/src/composables/useInputtable.ts

@@ -169,4 +169,5 @@ useInputtable.props = () => ({
     type: Array,
     default: () => [],
   },
+  tooltip: String,
 } as const)

package/src/themes/base/index.ts

@@ -4,9 +4,6 @@ import rawStyles from './styles.css?raw'
 
 const theme: UITheme = {
   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: `${rawStyles}`,
   classPrefix: 'x-',
   components,

package/src/themes/base/styles.css

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

package/src/version.ts

@@ -1 +1 @@
-export default '1.4.0'
+export default '1.5.0'

package/volar.d.ts

@@ -53,6 +53,7 @@ declare module 'vue' {
     XTextarea: typeof import('@indielayer/ui')['XTextarea']
     XThemeProvider: typeof import('@indielayer/ui')['XThemeProvider']
     XToggle: typeof import('@indielayer/ui')['XToggle']
+    XToggleTip: typeof import('@indielayer/ui')['XToggleTip']
     XTooltip: typeof import('@indielayer/ui')['XTooltip']
   }
 }