kmcom-nuxt-layers 2.2.6 → 2.2.8

package/layers/typography/app/components/Typography/index.vue

@@ -14,33 +14,42 @@
     TypographyTag,
   } from '../../types/typography'
 
-  const props = withDefaults(
-    defineProps<{
-      tag?: TypographyTag
-      weight?: FontWeight
-      width?: FontWidth
-      slant?: FontSlant
-      leading?: FontLeading
-      tracking?: FontTracking
-      align?: TextAlign
-      transform?: TextTransform
-      color?: UiColors
-      size?: FontSize
-    }>(),
-    {
-      tag: 'p',
-      weight: 'font-normal',
-      width: 'font-stretch-normal',
-      slant: 'normal',
-      leading: 'leading-normal',
-      tracking: 'tracking-normal',
-      align: 'left',
-      transform: 'none',
-      size: 'base',
-    }
-  )
-  const { classes } = useTypography(props)
-  const colorClass = useColor(props.color, 'text')
+  defineOptions({ inheritAttrs: false })
+
+  const {
+    tag = 'p',
+    weight = 'font-normal',
+    width = 'font-stretch-normal',
+    slant = 'normal',
+    leading = 'leading-normal',
+    tracking = 'tracking-normal',
+    align = 'left',
+    transform = 'none',
+    color = undefined,
+    size = 'base',
+  } = defineProps<{
+    tag?: TypographyTag
+    weight?: FontWeight
+    width?: FontWidth
+    slant?: FontSlant
+    leading?: FontLeading
+    tracking?: FontTracking
+    align?: TextAlign
+    transform?: TextTransform
+    color?: UiColors
+    size?: FontSize
+  }>()
+  const { classes } = useTypography(() => ({
+    weight,
+    width,
+    slant,
+    leading,
+    tracking,
+    align,
+    transform,
+    size,
+  }))
+  const colorClass = useColor(color, 'text')
 </script>
 
 <template>

package/layers/typography/app/composables/typography.ts

@@ -1,3 +1,6 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
+
 import type {
   FontLeading,
   FontSize,
@@ -35,50 +38,53 @@ function getSizeClass(size: FontSize | undefined): string {
   return typeof size === 'number' ? `text-[${size}]` : `text-${size}`
 }
 
-export function useTypography(props: {
-  weight?: FontWeight
-  slant?: FontSlant
-  width?: FontWidth
-  leading?: FontLeading
-  tracking?: FontTracking
-  align?: TextAlign
-  transform?: TextTransform
-  size?: FontSize
-}) {
-  const classes = computed(() =>
-    [
-      normalizeAxis(props.weight, {
+export function useTypography(
+  props: MaybeRefOrGetter<{
+    weight?: FontWeight
+    slant?: FontSlant
+    width?: FontWidth
+    leading?: FontLeading
+    tracking?: FontTracking
+    align?: TextAlign
+    transform?: TextTransform
+    size?: FontSize
+  }>
+) {
+  const classes = computed(() => {
+    const p = toValue(props)
+    return [
+      normalizeAxis(p.weight, {
         prefix: 'font',
         fallback: 'font-normal',
       }),
 
-      normalizeAxis(props.width, {
+      normalizeAxis(p.width, {
         numericFormatter: (v) => `font-stretch-[${v}%]`,
       }),
 
-      normalizeAxis(props.slant, {
+      normalizeAxis(p.slant, {
         fallback: 'not-italic',
       }),
 
-      normalizeAxis(props.leading, {
+      normalizeAxis(p.leading, {
         prefix: 'leading',
         fallback: 'leading-normal',
       }),
 
-      normalizeAxis(props.tracking, {
+      normalizeAxis(p.tracking, {
         prefix: 'tracking',
         fallback: 'tracking-normal',
       }),
 
-      getSizeClass(props.size),
+      getSizeClass(p.size),
 
-      props.align ? `text-${props.align}` : '',
+      p.align ? `text-${p.align}` : '',
 
-      props.transform && props.transform !== 'none' ? props.transform : '',
+      p.transform && p.transform !== 'none' ? p.transform : '',
     ]
       .filter(Boolean)
       .join(' ')
-  )
+  })
 
   return { classes }
 }

package/layers/typography/app/types/colors.ts

@@ -1,29 +1,9 @@
-/***************************************************************
-  UI Primitives - Semantic Color Types
-
-  `UiSemanticColor` defines neutral or semantic colors for general UI elements.
-  `UiStatusColor` defines status-related colors (info, success, warning, error).
-  `UiCustomColors` defines custom design colors like accent or secondary.
-  `UiBaseColor` defines fundamental colors (black, white).
-  `UiColors` is the union of all color types and can be applied to text, backgrounds, borders, or other UI elements.
-  `ColorUsage` defines the intended usage of a color in a component.
-***************************************************************/
-
-export type ColorUsage = 'text' | 'bg' | 'border'
-
-export type UiSemanticColor = 'dimmed' | 'muted' | 'toned' | 'default' | 'highlighted' | 'inverted'
-
-export type UiStatusColor = 'info' | 'success' | 'warning' | 'error'
-
-export type UiDefaultNuxtUiColors = 'primary' | 'neutral'
-
-export type UiCustomColors = 'secondary' | 'accent'
-
-export type UiBaseColor = 'black' | 'white'
-
-export type UiColors =
-  | UiSemanticColor
-  | UiStatusColor
-  | UiDefaultNuxtUiColors
-  | UiCustomColors
-  | UiBaseColor
+export type {
+  ColorUsage,
+  UiSemanticColor,
+  UiStatusColor,
+  UiDefaultNuxtUiColors,
+  UiCustomColors,
+  UiBaseColor,
+  UiColors,
+} from '#types'

package/layers/typography/app/types/index.ts

@@ -0,0 +1,2 @@
+export type * from './colors'
+export type * from './typography'

package/layers/typography/package.json

@@ -2,5 +2,8 @@
   "name": "kmcom-layer-typography",
   "version": "0.0.1",
   "type": "module",
-  "main": "./nuxt.config.ts"
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "lint": "eslint ."
+  }
 }

package/layers/ui/package.json

@@ -10,6 +10,7 @@
     "dev:prepare": "nuxt prepare .playground",
     "build": "UI_STANDALONE=true nuxi build",
     "generate": "UI_STANDALONE=true nuxi generate",
-    "preview": "nuxt preview .playground"
+    "preview": "nuxt preview .playground",
+    "lint": "eslint ."
   }
 }

package/layers/visual/app/app.config.ts

@@ -1,3 +1,6 @@
+import type { GradientConfig } from './types/gradient'
+import type { AccentSceneConfig } from './types/accent'
+
 export default defineAppConfig({
   uiLayer: {
     gradients: {
@@ -107,8 +110,8 @@ declare module '@nuxt/schema' {
   interface AppConfigInput {
     uiLayer?: {
       name?: string
-      gradients?: Record<string, import('./types/gradient').GradientConfig>
-      accentScenes?: Record<string, import('./types/accent').AccentSceneConfig>
+      gradients?: Record<string, GradientConfig>
+      accentScenes?: Record<string, AccentSceneConfig>
     }
   }
 }

package/layers/visual/app/components/Accent/Blob.vue

@@ -1,27 +1,27 @@
 <script setup lang="ts">
   import type { AccentBlobColor, BlobBlur } from '../../types/accent'
 
-  const props = withDefaults(
-    defineProps<{
-      x: number
-      y: number
-      size?: string
-      blur?: BlobBlur
-      opacity?: number
-      color?: AccentBlobColor
-      shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
-      customColor?: string
-    }>(),
-    {
-      size: '40rem',
-      blur: '3xl',
-      opacity: 25,
-      color: 'primary',
-      shade: 500,
-    }
-  )
+  const {
+    x,
+    y,
+    size = '40rem',
+    blur = '3xl',
+    opacity = 25,
+    color = 'primary',
+    shade = 500,
+    customColor = undefined,
+  } = defineProps<{
+    x: number
+    y: number
+    size?: string
+    blur?: BlobBlur
+    opacity?: number
+    color?: AccentBlobColor
+    shade?: 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
+    customColor?: string
+  }>()
 
-  const { style } = useAccentBlob(props)
+  const { style } = useAccentBlob(() => ({ x, y, size, blur, opacity, color, shade, customColor }))
 </script>
 
 <template>

package/layers/visual/app/components/Accent/Scene.vue

@@ -2,8 +2,8 @@
   import type { AccentSceneConfig, BlobConfig } from '../../types/accent'
 
   const {
-    preset,
-    blobs,
+    preset = undefined,
+    blobs = undefined,
     tag = 'div',
   } = defineProps<{
     preset?: string

package/layers/visual/app/components/Base/Modal.vue

@@ -16,8 +16,8 @@
    */
   const {
     open = false,
-    title,
-    description,
+    title = undefined,
+    description = undefined,
     size = 'md',
   } = defineProps<{
     open?: boolean

package/layers/visual/app/components/Gradient/Background.vue

@@ -2,8 +2,8 @@
   import type { GradientConfig } from '../../types/gradient'
 
   const {
-    preset,
-    config,
+    preset = undefined,
+    config = undefined,
     tag = 'div',
   } = defineProps<{
     preset?: string

package/layers/visual/app/components/Gradient/Text.vue

@@ -2,8 +2,8 @@
   import type { GradientConfig } from '../../types/gradient'
 
   const {
-    preset,
-    config,
+    preset = undefined,
+    config = undefined,
     tag = 'span',
   } = defineProps<{
     preset?: string

package/layers/visual/app/components/Media/Picture.vue

@@ -2,6 +2,8 @@
   import { usePicture } from '../../composables/picture'
   import type { PictureProps } from '../../types/media'
 
+  defineOptions({ inheritAttrs: false })
+
   const {
     src,
     alt,
@@ -40,7 +42,7 @@
     :loading
     :fetchpriority
     :decoding
-    :provider="(provider as any)"
+    :provider="provider as any"
     :preset
     :densities
     :class="wrapperClass"

package/layers/visual/app/components/Progress/Bar.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
   const {
     progress = null,
-    color,
-    size,
-    orientation,
-    status,
-    animation,
-    inverted,
+    color = undefined,
+    size = undefined,
+    orientation = undefined,
+    status = undefined,
+    animation = undefined,
+    inverted = undefined,
   } = defineProps<{
     progress?: number | null
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'

package/layers/visual/app/components/Tint/Overlay.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-  import type { ColorShade, TintColorSlot, TintLevel } from '../../types/tint'
+  import type { ColorShade } from '../../types/gradient'
+  import type { TintColorSlot, TintLevel } from '../../types/tint'
 
-  const props = withDefaults(
-    defineProps<{
-      color: TintColorSlot
-      level: TintLevel
-      shade?: ColorShade
-      tag?: string
-    }>(),
-    {
-      shade: 500,
-      tag: 'div',
-    }
-  )
+  const {
+    color,
+    level,
+    shade = 500,
+    tag = 'div',
+  } = defineProps<{
+    color: TintColorSlot
+    level: TintLevel
+    shade?: ColorShade
+    tag?: string
+  }>()
 
-  const { style } = useTint(props)
+  const { style } = useTint(() => ({ color, level, shade }))
 </script>
 
 <template>

package/layers/visual/app/composables/accent.ts

@@ -1,4 +1,5 @@
-import type { ComputedRef, CSSProperties } from 'vue'
+import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
 
 import type { BlobBlur, BlobConfig } from '../types/accent'
 
@@ -25,22 +26,23 @@ function resolveColor(config: BlobConfig): string {
   return `var(--ui-color-${color}-${shade})`
 }
 
-export function useAccentBlob(config: BlobConfig): {
+export function useAccentBlob(config: MaybeRefOrGetter<BlobConfig>): {
   style: ComputedRef<CSSProperties>
 } {
   const style = computed((): CSSProperties => {
-    const size = config.size ?? '40rem'
-    const opacity = (config.opacity ?? 25) / 100
-    const blurPx = resolveBlurPx(config.blur)
+    const resolved = toValue(config)
+    const size = resolved.size ?? '40rem'
+    const opacity = (resolved.opacity ?? 25) / 100
+    const blurPx = resolveBlurPx(resolved.blur)
 
     return {
       position: 'absolute',
-      left: `${config.x}%`,
-      top: `${config.y}%`,
+      left: `${resolved.x}%`,
+      top: `${resolved.y}%`,
       transform: 'translate(-50%, -50%)',
       width: size,
       height: size,
-      backgroundColor: resolveColor(config),
+      backgroundColor: resolveColor(resolved),
       opacity,
       borderRadius: '9999px',
       filter: blurPx > 0 ? `blur(${blurPx}px)` : undefined,

package/layers/visual/app/composables/tint.ts

@@ -1,18 +1,18 @@
-import type { ComputedRef, CSSProperties } from 'vue'
+import type { ComputedRef, CSSProperties, MaybeRefOrGetter } from 'vue'
+import { toValue } from 'vue'
 
 import { TINT_LEVEL_OPACITY, type TintConfig } from '../types/tint'
 
-export function useTint(config: TintConfig): {
+export function useTint(config: MaybeRefOrGetter<TintConfig>): {
   style: ComputedRef<CSSProperties>
 } {
   const style = computed((): CSSProperties => {
-    const { color, shade = 500 } = config
-    let backgroundColor: string
+    const { color, shade = 500, level } = toValue(config)
+    let backgroundColor = `var(--ui-color-${color}-${shade})`
     if (color === 'white') backgroundColor = '#ffffff'
-    else if (color === 'black') backgroundColor = '#000000'
-    else backgroundColor = `var(--ui-color-${color}-${shade})`
+    if (color === 'black') backgroundColor = '#000000'
 
-    const opacity = TINT_LEVEL_OPACITY[config.level] / 100
+    const opacity = TINT_LEVEL_OPACITY[level] / 100
     return { backgroundColor, opacity }
   })
 

package/layers/visual/app/types/index.ts

@@ -0,0 +1,6 @@
+export type * from './accent'
+export type * from './breakpoints'
+export type * from './gradient'
+export type * from './media'
+export type { TintLevel, TintColorSlot, TintConfig } from './tint'
+export { TINT_LEVEL_OPACITY } from './tint'

package/layers/visual/app/types/media.ts

@@ -174,12 +174,14 @@ export type PictureProps = {
   decoding?: 'sync' | 'async' | 'auto'
 }
 
+import type { ComputedRef } from 'vue'
+
 /**
  * Return type for usePicture composable
  */
 export type UsePictureReturn = {
   /** Computed sizes attribute string */
-  sizesString: import('vue').ComputedRef<string>
+  sizesString: ComputedRef<string>
   /** Computed format string */
-  computedFormat: import('vue').ComputedRef<string>
+  computedFormat: ComputedRef<string>
 }

package/layers/visual/app/types/tint.ts

@@ -1,3 +1,5 @@
+import type { ColorShade } from './gradient'
+
 export type TintLevel = 'subtle' | 'light' | 'medium' | 'strong' | 'heavy'
 export type TintColorSlot =
   | 'primary'
@@ -8,7 +10,6 @@ export type TintColorSlot =
   | 'error'
   | 'white'
   | 'black'
-export type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950
 
 export const TINT_LEVEL_OPACITY: Record<TintLevel, number> = {
   subtle: 5,

package/layers/visual/package.json

@@ -2,5 +2,8 @@
   "name": "kmcom-layer-visual",
   "version": "0.0.1",
   "type": "module",
-  "main": "./nuxt.config.ts"
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "lint": "eslint ."
+  }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.2.6",
+  "version": "2.2.8",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -150,8 +150,10 @@
     "@vueuse/core": "^14.3.0",
     "@vueuse/nuxt": "^14.3.0",
     "@webgpu/glslang": "^0.0.15",
+    "@webgpu/types": "^0.1.70",
     "browserslist": "^4.28.2",
     "changesets": "^1.0.2",
+    "csstype": "^3.2.3",
     "cypress": "^15.16.0",
     "depcheck": "^1.4.7",
     "eslint": "^10.4.1",
@@ -183,7 +185,8 @@
     "stylelint-no-unsupported-browser-features": "^8.1.1",
     "stylelint-prettier": "^5.0.3",
     "tailwindcss": "^4.3.0",
-    "turbo": "^2.9.16",
+    "turbo": "^2.9.18",
+    "type-fest": "^5.7.0",
     "typescript": "^6",
     "vite-plugin-checker": "^0.14.1",
     "vitest": "^4.1.8",