kmcom-nuxt-layers 1.0.1

package/layers/ui/app/types/breakpoints.ts

@@ -0,0 +1,179 @@
+/**
+ * Breakpoint Types
+ *
+ * Centralized breakpoint definitions matching Tailwind defaults.
+ * Used for responsive sizing, layouts, and media queries across the design system.
+ */
+
+/**
+ * Responsive breakpoint names matching Tailwind defaults
+ */
+export type ResponsiveBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+
+/**
+ * Breakpoint values in pixels
+ * Matches Tailwind's default breakpoint system
+ *
+ * @see https://tailwindcss.com/docs/responsive-design
+ */
+export const BREAKPOINT_VALUES = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} as const
+
+/**
+ * Type for breakpoint values object
+ */
+export type BreakpointValues = typeof BREAKPOINT_VALUES
+
+/**
+ * Type for individual breakpoint keys
+ */
+export type BreakpointKey = keyof typeof BREAKPOINT_VALUES
+
+/**
+ * Type for breakpoint pixel values
+ */
+export type BreakpointValue = (typeof BREAKPOINT_VALUES)[BreakpointKey]
+
+/**
+ * Device-based breakpoint names
+ * Semantic breakpoints based on common device categories
+ */
+export type DeviceBreakpoint = 'mobile' | 'tablet' | 'desktop' | 'wide'
+
+/**
+ * Device breakpoint values in pixels
+ * Semantic breakpoints for mobile-first responsive design
+ *
+ * - mobile: 0-639px (default, no min-width)
+ * - tablet: 640px+ (tablets and small laptops)
+ * - desktop: 1024px+ (laptops and desktops)
+ * - wide: 1920px+ (large monitors and 4K displays)
+ */
+export const DEVICE_BREAKPOINT_VALUES = {
+  mobile: 0,
+  tablet: 640,
+  desktop: 1024,
+  wide: 1920,
+} as const
+
+/**
+ * Type for device breakpoint values object
+ */
+export type DeviceBreakpointValues = typeof DEVICE_BREAKPOINT_VALUES
+
+/**
+ * Type for individual device breakpoint keys
+ */
+export type DeviceBreakpointKey = keyof typeof DEVICE_BREAKPOINT_VALUES
+
+/**
+ * Type for device breakpoint pixel values
+ */
+export type DeviceBreakpointValue = (typeof DEVICE_BREAKPOINT_VALUES)[DeviceBreakpointKey]
+
+/**
+ * Phone-specific breakpoint names
+ * Granular breakpoints for different phone sizes
+ */
+export type PhoneBreakpoint = 'phone-sm' | 'phone-md' | 'phone-lg'
+
+/**
+ * Phone breakpoint values in pixels
+ * Covers the range of common smartphone screen sizes
+ *
+ * - phone-sm: 320px+ (iPhone SE, small Android phones)
+ * - phone-md: 375px+ (iPhone 12/13/14, standard phones)
+ * - phone-lg: 428px+ (iPhone Pro Max, large Android phones)
+ */
+export const PHONE_BREAKPOINT_VALUES = {
+  'phone-sm': 320,
+  'phone-md': 375,
+  'phone-lg': 428,
+} as const
+
+/**
+ * Type for phone breakpoint values object
+ */
+export type PhoneBreakpointValues = typeof PHONE_BREAKPOINT_VALUES
+
+/**
+ * Type for individual phone breakpoint keys
+ */
+export type PhoneBreakpointKey = keyof typeof PHONE_BREAKPOINT_VALUES
+
+/**
+ * Type for phone breakpoint pixel values
+ */
+export type PhoneBreakpointValue = (typeof PHONE_BREAKPOINT_VALUES)[PhoneBreakpointKey]
+
+/**
+ * Tablet-specific breakpoint names
+ * Granular breakpoints for different tablet sizes
+ */
+export type TabletBreakpoint = 'tablet-sm' | 'tablet-md' | 'tablet-lg'
+
+/**
+ * Tablet breakpoint values in pixels
+ * Covers the range of common tablet screen sizes
+ *
+ * - tablet-sm: 768px+ (iPad mini, small tablets)
+ * - tablet-md: 834px+ (iPad, standard tablets)
+ * - tablet-lg: 1024px+ (iPad Pro 11", large tablets)
+ */
+export const TABLET_BREAKPOINT_VALUES = {
+  'tablet-sm': 768,
+  'tablet-md': 834,
+  'tablet-lg': 1024,
+} as const
+
+/**
+ * Type for tablet breakpoint values object
+ */
+export type TabletBreakpointValues = typeof TABLET_BREAKPOINT_VALUES
+
+/**
+ * Type for individual tablet breakpoint keys
+ */
+export type TabletBreakpointKey = keyof typeof TABLET_BREAKPOINT_VALUES
+
+/**
+ * Type for tablet breakpoint pixel values
+ */
+export type TabletBreakpointValue = (typeof TABLET_BREAKPOINT_VALUES)[TabletBreakpointKey]
+
+/**
+ * Device orientation types
+ * Used for orientation-specific responsive design
+ */
+export type DeviceOrientation = 'portrait' | 'landscape'
+
+/**
+ * Orientation breakpoint configuration
+ * Maps orientation to media query conditions
+ *
+ * Note: These are not pixel-based breakpoints, but media query features
+ */
+export const ORIENTATION_BREAKPOINTS = {
+  portrait: 'portrait',
+  landscape: 'landscape',
+} as const
+
+/**
+ * Type for orientation breakpoints object
+ */
+export type OrientationBreakpoints = typeof ORIENTATION_BREAKPOINTS
+
+/**
+ * Combined breakpoint type (all systems)
+ */
+export type AllBreakpoints =
+  | ResponsiveBreakpoint
+  | DeviceBreakpoint
+  | PhoneBreakpoint
+  | TabletBreakpoint
+  | DeviceOrientation

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

@@ -0,0 +1,29 @@
+/***************************************************************
+  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

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

@@ -0,0 +1,185 @@
+/**
+ * Media Types
+ *
+ * Type definitions for Picture component and usePicture composable.
+ * Provides type-safe image optimization, responsive sizing, and format handling.
+ */
+
+/**
+ * Supported image formats for optimization
+ */
+export type ImageFormat = 'avif' | 'webp' | 'jpg' | 'jpeg' | 'png' | 'gif' | 'svg'
+
+/**
+ * Image loading strategy
+ */
+export type ImageLoading = 'lazy' | 'eager'
+
+/**
+ * Image fit/object-fit behavior
+ */
+export type ImageFit = 'cover' | 'contain' | 'fill' | 'inside' | 'outside'
+
+/**
+ * Re-export breakpoint types for convenience
+ */
+export type {
+  ResponsiveBreakpoint,
+  DeviceBreakpoint,
+  PhoneBreakpoint,
+  TabletBreakpoint,
+  DeviceOrientation,
+} from '#layers/ui/app/types/breakpoints'
+
+/**
+ * Responsive sizes configuration
+ * Allows defining different image sizes per breakpoint
+ * Supports Tailwind, device, phone, tablet, and orientation breakpoints
+ *
+ * @example
+ * ```ts
+ * // Using Tailwind breakpoints
+ * const sizes: ResponsiveSizes = {
+ *   default: '100vw',
+ *   md: '50vw',
+ *   lg: '33vw'
+ * }
+ *
+ * // Using device breakpoints
+ * const deviceSizes: ResponsiveSizes = {
+ *   default: '100vw',
+ *   tablet: '768px',
+ *   desktop: '1024px'
+ * }
+ *
+ * // Using granular phone breakpoints
+ * const phoneSizes: ResponsiveSizes = {
+ *   default: '100vw',
+ *   'phone-sm': '320px',
+ *   'phone-md': '375px',
+ *   'phone-lg': '428px'
+ * }
+ *
+ * // Using orientation breakpoints
+ * const orientationSizes: ResponsiveSizes = {
+ *   default: '100vw',
+ *   portrait: '100vw',
+ *   landscape: '50vw'
+ * }
+ * ```
+ */
+export interface ResponsiveSizes {
+  default: string
+  // Tailwind breakpoints
+  sm?: string
+  md?: string
+  lg?: string
+  xl?: string
+  '2xl'?: string
+  // Device breakpoints
+  mobile?: string
+  tablet?: string
+  desktop?: string
+  wide?: string
+  // Phone breakpoints
+  'phone-sm'?: string
+  'phone-md'?: string
+  'phone-lg'?: string
+  // Tablet breakpoints
+  'tablet-sm'?: string
+  'tablet-md'?: string
+  'tablet-lg'?: string
+  // Orientation breakpoints
+  portrait?: string
+  landscape?: string
+}
+
+/**
+ * Props for Picture component
+ * Wraps NuxtPicture with sensible defaults and responsive sizing
+ */
+export interface PictureProps {
+  // Required props
+  /** Image source URL or path */
+  src: string
+  /** Alt text for accessibility (required) */
+  alt: string
+
+  // Dimensions
+  /** Image width in pixels */
+  width?: number
+  /** Image height in pixels */
+  height?: number
+
+  // Responsive sizing
+  /**
+   * Responsive sizes - can be a string or ResponsiveSizes object
+   * @example '(min-width: 1024px) 1024px, 100vw'
+   * @example { default: '100vw', md: '50vw', lg: '33vw' }
+   */
+  sizes?: string | ResponsiveSizes
+
+  // Formats & optimization
+  /**
+   * Image formats to generate (comma-separated)
+   * @example 'avif,webp,jpg'
+   * @default 'webp'
+   */
+  format?: string
+  /**
+   * Image quality (0-100)
+   * @default 80
+   */
+  quality?: number
+  /**
+   * Image fit behavior
+   * @default 'cover'
+   */
+  fit?: ImageFit
+
+  // Loading strategy
+  /**
+   * Loading strategy
+   * @default 'lazy'
+   */
+  loading?: ImageLoading
+  /**
+   * Fetch priority hint
+   * @default 'auto'
+   */
+  fetchpriority?: 'high' | 'low' | 'auto'
+
+  // Nuxt Image specific
+  /** Image provider - defaults to 'ipx' (Nuxt's built-in image optimizer) */
+  provider?: 'ipx'
+  /** Nuxt Image preset name */
+  preset?: string
+  /**
+   * Pixel density descriptors
+   * @example 'x1 x2'
+   */
+  densities?: string
+
+  // Styling
+  /** Class for picture wrapper element */
+  class?: string
+  /** Class for img element */
+  imgClass?: string
+
+  // Performance
+  /**
+   * Image decoding strategy
+   * @default 'async'
+   */
+  decoding?: 'sync' | 'async' | 'auto'
+}
+
+/**
+ * Return type for usePicture composable
+ */
+export interface UsePictureReturn {
+  /** Computed sizes attribute string */
+  sizesString: import('vue').ComputedRef<string>
+  /** Computed format string */
+  computedFormat: import('vue').ComputedRef<string>
+}

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

@@ -0,0 +1,108 @@
+// ui/types/typography.ts
+
+/* ======================================================
+   Typography Tags
+   - Supported HTML tags for typography components
+   ====================================================== */
+
+export type TypographyTag =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'p'
+  | 'span'
+  | 'li'
+  | 'pre'
+  | 'code'
+  | 'blockquote'
+
+/* ======================================================
+   Font Weight
+   - Supports Tailwind utilities
+   - Supports numeric variable-axis overrides (wght)
+   ====================================================== */
+
+export type FontWeightNumber = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+
+export type FontWeight =
+  | 'font-thin'
+  | 'font-extralight'
+  | 'font-light'
+  | 'font-normal'
+  | 'font-medium'
+  | 'font-semibold'
+  | 'font-bold'
+  | 'font-extrabold'
+  | 'font-black'
+  | FontWeightNumber
+
+/* ======================================================
+   Font Width
+   - Semantic abstraction over wdth axis
+   ====================================================== */
+
+export type FontWidth = 'condensed' | 'normal' | 'expanded' | number // variable wdth axis override
+
+/* ======================================================
+   Font Slant
+   - slnt / ital axis abstraction
+   ====================================================== */
+
+export type FontSlant = 'normal' | 'italic' | 'oblique' | number // variable slnt axis override
+
+/* ======================================================
+   Line Height (Leading)
+   ====================================================== */
+
+export type FontLeadingNumber = 0.9 | 1 | 1.1 | 1.2 | 1.25 | 1.3 | 1.4 | 1.5 | 1.6 | 1.75 | 2
+
+export type FontLeading =
+  | 'leading-none'
+  | 'leading-tight'
+  | 'leading-snug'
+  | 'leading-normal'
+  | 'leading-relaxed'
+  | 'leading-loose'
+  | FontLeadingNumber
+
+/* ======================================================
+   Letter Spacing (Tracking)
+   ====================================================== */
+
+export type FontTrackingNumber = -0.05 | -0.025 | 0 | 0.025 | 0.05 | 0.075 | 0.1
+
+export type FontTracking =
+  | 'tracking-tighter'
+  | 'tracking-tight'
+  | 'tracking-normal'
+  | 'tracking-wide'
+  | 'tracking-wider'
+  | 'tracking-widest'
+  | FontTrackingNumber
+
+/* ======================================================
+   Text Layout
+   ====================================================== */
+
+export type TextAlign = 'left' | 'center' | 'right' | 'justify'
+
+export type TextTransform = 'none' | 'uppercase' | 'lowercase' | 'capitalize'
+
+/* ======================================================
+   Base Typography Props
+   - Used by Text / Heading / Prose components
+   ====================================================== */
+
+export interface TypographyProps {
+  as?: keyof HTMLElementTagNameMap
+  weight?: FontWeight
+  width?: FontWidth
+  slant?: FontSlant
+  leading?: FontLeading
+  tracking?: FontTracking
+  align?: TextAlign
+  transform?: TextTransform
+}

package/layers/ui/app/utils/regex.ts

@@ -0,0 +1,6 @@
+type newText = string | string[]
+const spacesRegex: RegExp = /\s/
+
+export function splitSpaces(text: string): newText {
+  return text.split(spacesRegex)
+}

package/layers/ui/app.config.ts

@@ -0,0 +1,12 @@
+export default defineAppConfig({
+  uiLayer: {},
+})
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    uiLayer?: {
+      /** Project name */
+      name?: string
+    }
+  }
+}

package/layers/ui/nuxt.config.ts

@@ -0,0 +1,38 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  $meta: {
+    name: 'ui',
+  },
+
+  // Only extend core when running standalone dev (via dev:ui script)
+  extends: process.env.UI_STANDALONE ? ['../core'] : [],
+
+  alias: {
+    '#layers/ui': import.meta.dirname,
+  },
+
+  modules: [
+    '@nuxt/eslint',
+    '@nuxt/ui',
+    // '@nuxt/image'
+  ],
+
+  css: ['#layers/ui/app/assets/css/main.css'],
+
+  // devtools: {
+  //   enabled: true,
+  // },
+
+  compatibilityDate: '2026-01-24',
+
+  typescript: {
+    typeCheck: true,
+    strict: true,
+  },
+
+  // vite: {
+  //   build: {
+  //     target: 'es2020',
+  //   },
+  // },
+})

package/layers/ui/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "ui",
+  "type": "module",
+  "version": "0.0.1",
+  "main": "./nuxt.config.ts",
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "dev:ui": "UI_STANDALONE=true nuxi dev",
+    "dev:prepare": "nuxt prepare .playground",
+    "build": "UI_STANDALONE=true nuxi build",
+    "generate": "UI_STANDALONE=true nuxi generate",
+    "preview": "nuxt preview .playground"
+  }
+}

package/layers/ui/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../apps/playground/tsconfig.json",
+  "compilerOptions": {
+    "strict": true
+  }
+}