@starui/shared 0.0.1-alpha.0

package/es/constants/index.d.ts

@@ -0,0 +1,45 @@
+export declare const BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+    readonly xxl: 1600;
+};
+export declare const BREAKPOINT_NAMES: readonly ["xs", "sm", "md", "lg", "xl", "xxl"];
+export type BreakpointName = typeof BREAKPOINT_NAMES[number];
+export declare const KEY_CODES: {
+    readonly ENTER: 13;
+    readonly ESC: 27;
+    readonly SPACE: 32;
+    readonly TAB: 9;
+    readonly UP: 38;
+    readonly DOWN: 40;
+    readonly LEFT: 37;
+    readonly RIGHT: 39;
+    readonly HOME: 36;
+    readonly END: 35;
+    readonly PAGE_UP: 33;
+    readonly PAGE_DOWN: 34;
+};
+export declare const MOUSE_BUTTONS: {
+    readonly LEFT: 0;
+    readonly MIDDLE: 1;
+    readonly RIGHT: 2;
+};
+export declare const ANIMATION_DURATION: {
+    readonly FAST: 150;
+    readonly BASE: 300;
+    readonly SLOW: 500;
+};
+export declare const Z_INDEX: {
+    readonly DROPDOWN: 1000;
+    readonly STICKY: 1020;
+    readonly FIXED: 1030;
+    readonly MODAL_BACKDROP: 1040;
+    readonly MODAL: 1050;
+    readonly POPOVER: 1060;
+    readonly TOOLTIP: 1070;
+    readonly MESSAGE: 1080;
+    readonly NOTIFICATION: 1090;
+};

package/es/constants/index.js

@@ -0,0 +1,48 @@
+// Moon UI Shared - Constants
+// ===========================
+const BREAKPOINTS = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1600,
+};
+const BREAKPOINT_NAMES = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
+const KEY_CODES = {
+    ENTER: 13,
+    ESC: 27,
+    SPACE: 32,
+    TAB: 9,
+    UP: 38,
+    DOWN: 40,
+    LEFT: 37,
+    RIGHT: 39,
+    HOME: 36,
+    END: 35,
+    PAGE_UP: 33,
+    PAGE_DOWN: 34,
+};
+const MOUSE_BUTTONS = {
+    LEFT: 0,
+    MIDDLE: 1,
+    RIGHT: 2,
+};
+const ANIMATION_DURATION = {
+    FAST: 150,
+    BASE: 300,
+    SLOW: 500,
+};
+const Z_INDEX = {
+    DROPDOWN: 1000,
+    STICKY: 1020,
+    FIXED: 1030,
+    MODAL_BACKDROP: 1040,
+    MODAL: 1050,
+    POPOVER: 1060,
+    TOOLTIP: 1070,
+    MESSAGE: 1080,
+    NOTIFICATION: 1090,
+};
+
+export { ANIMATION_DURATION, BREAKPOINTS, BREAKPOINT_NAMES, KEY_CODES, MOUSE_BUTTONS, Z_INDEX };

package/es/hooks/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Hook for responsive breakpoint detection
+ */
+export declare function useBreakpoint(): {
+    width: any;
+    breakpoint: any;
+    isMobileView: any;
+    isTabletView: any;
+    isDesktopView: any;
+};
+/**
+ * Hook for theme management
+ */
+export declare function useTheme(): {
+    theme: any;
+    setTheme: (newTheme: "light" | "dark") => void;
+    toggleTheme: () => void;
+};
+/**
+ * Hook for click outside detection
+ */
+export declare function useClickOutside(elementRef: any, callback: () => void): void;
+/**
+ * Hook for scroll position
+ */
+export declare function useScroll(): {
+    scrollX: any;
+    scrollY: any;
+};
+/**
+ * Hook for async operations with loading state
+ */
+export declare function useAsync<T>(asyncFn: (...args: any[]) => Promise<T>): {
+    loading: any;
+    error: any;
+    data: any;
+    execute: (...args: any[]) => Promise<any>;
+};
+/**
+ * Hook for localStorage with reactivity
+ */
+export declare function useLocalStorage<T>(key: string, defaultValue: T): {
+    value: any;
+    setValue: (newValue: T) => void;
+    removeValue: () => void;
+};

package/es/hooks/index.js

@@ -0,0 +1,165 @@
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { debounce } from '../utils/index.js';
+
+// Moon UI Shared - Vue Composition Hooks
+// =======================================
+/**
+ * Hook for responsive breakpoint detection
+ */
+function useBreakpoint() {
+    const width = ref(typeof window !== 'undefined' ? window.innerWidth : 0);
+    const breakpoint = computed(() => {
+        if (width.value >= 1600)
+            return 'xxl';
+        if (width.value >= 1200)
+            return 'xl';
+        if (width.value >= 992)
+            return 'lg';
+        if (width.value >= 768)
+            return 'md';
+        if (width.value >= 576)
+            return 'sm';
+        return 'xs';
+    });
+    const isMobileView = computed(() => width.value < 768);
+    const isTabletView = computed(() => width.value >= 768 && width.value < 992);
+    const isDesktopView = computed(() => width.value >= 992);
+    const updateWidth = debounce(() => {
+        width.value = window.innerWidth;
+    }, 100);
+    onMounted(() => {
+        window.addEventListener('resize', updateWidth);
+    });
+    onUnmounted(() => {
+        window.removeEventListener('resize', updateWidth);
+    });
+    return {
+        width,
+        breakpoint,
+        isMobileView,
+        isTabletView,
+        isDesktopView,
+    };
+}
+/**
+ * Hook for theme management
+ */
+function useTheme() {
+    const theme = ref('light');
+    const setTheme = (newTheme) => {
+        theme.value = newTheme;
+        if (typeof document !== 'undefined') {
+            document.documentElement.setAttribute('data-theme', newTheme);
+        }
+    };
+    const toggleTheme = () => {
+        setTheme(theme.value === 'light' ? 'dark' : 'light');
+    };
+    onMounted(() => {
+        if (typeof window !== 'undefined') {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (prefersDark) {
+                setTheme('dark');
+            }
+        }
+    });
+    return {
+        theme,
+        setTheme,
+        toggleTheme,
+    };
+}
+/**
+ * Hook for click outside detection
+ */
+function useClickOutside(elementRef, callback) {
+    const handler = (event) => {
+        const el = elementRef.value;
+        if (el && !el.contains(event.target)) {
+            callback();
+        }
+    };
+    onMounted(() => {
+        document.addEventListener('click', handler);
+    });
+    onUnmounted(() => {
+        document.removeEventListener('click', handler);
+    });
+}
+/**
+ * Hook for scroll position
+ */
+function useScroll() {
+    const scrollX = ref(0);
+    const scrollY = ref(0);
+    const updateScroll = () => {
+        scrollX.value = window.scrollX;
+        scrollY.value = window.scrollY;
+    };
+    onMounted(() => {
+        window.addEventListener('scroll', updateScroll);
+        updateScroll();
+    });
+    onUnmounted(() => {
+        window.removeEventListener('scroll', updateScroll);
+    });
+    return {
+        scrollX,
+        scrollY,
+    };
+}
+/**
+ * Hook for async operations with loading state
+ */
+function useAsync(asyncFn) {
+    const loading = ref(false);
+    const error = ref(null);
+    const data = ref(null);
+    const execute = async (...args) => {
+        loading.value = true;
+        error.value = null;
+        try {
+            data.value = await asyncFn(...args);
+            return data.value;
+        }
+        catch (err) {
+            error.value = err;
+            throw err;
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    return {
+        loading,
+        error,
+        data,
+        execute,
+    };
+}
+/**
+ * Hook for localStorage with reactivity
+ */
+function useLocalStorage(key, defaultValue) {
+    const stored = typeof window !== 'undefined' ? localStorage.getItem(key) : null;
+    const value = ref(stored ? JSON.parse(stored) : defaultValue);
+    const setValue = (newValue) => {
+        value.value = newValue;
+        if (typeof window !== 'undefined') {
+            localStorage.setItem(key, JSON.stringify(newValue));
+        }
+    };
+    const removeValue = () => {
+        value.value = defaultValue;
+        if (typeof window !== 'undefined') {
+            localStorage.removeItem(key);
+        }
+    };
+    return {
+        value,
+        setValue,
+        removeValue,
+    };
+}
+
+export { useAsync, useBreakpoint, useClickOutside, useLocalStorage, useScroll, useTheme };

package/es/index.d.ts

@@ -0,0 +1,4 @@
+export * from './utils';
+export * from './hooks';
+export * from './constants';
+export * from './types';

package/es/index.js

@@ -0,0 +1,3 @@
+export { clamp, copyToClipboard, debounce, deepMerge, formatDate, formatFileSize, generateId, isMobile, isPlainObject, isTouchDevice, throttle } from './utils/index.js';
+export { useAsync, useBreakpoint, useClickOutside, useLocalStorage, useScroll, useTheme } from './hooks/index.js';
+export { ANIMATION_DURATION, BREAKPOINTS, BREAKPOINT_NAMES, KEY_CODES, MOUSE_BUTTONS, Z_INDEX } from './constants/index.js';

package/es/types/index.d.ts

@@ -0,0 +1,18 @@
+export type Nullable<T> = T | null;
+export type Optional<T> = T | undefined;
+export type MaybeRef<T> = T | {
+    value: T;
+};
+export type MaybeArray<T> = T | T[];
+export type MaybePromise<T> = T | Promise<T>;
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+export type Merge<T, U> = Omit<T, keyof U> & U;
+export type ExtractPropTypes<T> = {
+    [K in keyof T]: T[K] extends {
+        type: infer R;
+    } ? R extends (...args: any[]) => any ? R : R extends new (...args: any[]) => any ? InstanceType<R> : R : T[K] extends {
+        type: infer R;
+    } ? R : any;
+};

package/es/utils/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Check if the current environment is mobile
+ */
+export declare function isMobile(): boolean;
+/**
+ * Check if the device supports touch
+ */
+export declare function isTouchDevice(): boolean;
+/**
+ * Debounce function
+ */
+export declare function debounce<T extends (...args: any[]) => any>(fn: T, delay: number): (...args: Parameters<T>) => void;
+/**
+ * Throttle function
+ */
+export declare function throttle<T extends (...args: any[]) => any>(fn: T, limit: number): (...args: Parameters<T>) => void;
+/**
+ * Generate unique ID
+ */
+export declare function generateId(prefix?: string): string;
+/**
+ * Deep merge objects
+ */
+export declare function deepMerge<T extends Record<string, any>>(target: T, source: Partial<T>): T;
+/**
+ * Format file size
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * Copy text to clipboard
+ */
+export declare function copyToClipboard(text: string): Promise<boolean>;
+/**
+ * Check if value is a plain object
+ */
+export declare function isPlainObject(value: any): value is Record<string, any>;
+/**
+ * Clamp a number between min and max
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * Format date
+ */
+export declare function formatDate(date: Date | string | number, format?: string): string;

package/es/utils/index.js

@@ -0,0 +1,120 @@
+// Moon UI Shared - Utility Functions
+// ====================================
+/**
+ * Check if the current environment is mobile
+ */
+function isMobile() {
+    if (typeof window === 'undefined')
+        return false;
+    return window.innerWidth < 768;
+}
+/**
+ * Check if the device supports touch
+ */
+function isTouchDevice() {
+    if (typeof window === 'undefined')
+        return false;
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
+/**
+ * Debounce function
+ */
+function debounce(fn, delay) {
+    let timer = null;
+    return function (...args) {
+        if (timer)
+            clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), delay);
+    };
+}
+/**
+ * Throttle function
+ */
+function throttle(fn, limit) {
+    let inThrottle = false;
+    return function (...args) {
+        if (!inThrottle) {
+            fn(...args);
+            inThrottle = true;
+            setTimeout(() => (inThrottle = false), limit);
+        }
+    };
+}
+/**
+ * Generate unique ID
+ */
+function generateId(prefix = 'moon') {
+    return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+/**
+ * Deep merge objects
+ */
+function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key in source) {
+        if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+            result[key] = deepMerge(result[key] || {}, source[key]);
+        }
+        else {
+            result[key] = source[key];
+        }
+    }
+    return result;
+}
+/**
+ * Format file size
+ */
+function formatFileSize(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+/**
+ * Copy text to clipboard
+ */
+async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch (err) {
+        console.error('Failed to copy:', err);
+        return false;
+    }
+}
+/**
+ * Check if value is a plain object
+ */
+function isPlainObject(value) {
+    return value !== null && typeof value === 'object' && Object.prototype.toString.call(value) === '[object Object]';
+}
+/**
+ * Clamp a number between min and max
+ */
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+/**
+ * Format date
+ */
+function formatDate(date, format = 'YYYY-MM-DD HH:mm:ss') {
+    const d = new Date(date);
+    const year = d.getFullYear();
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    const hours = String(d.getHours()).padStart(2, '0');
+    const minutes = String(d.getMinutes()).padStart(2, '0');
+    const seconds = String(d.getSeconds()).padStart(2, '0');
+    return format
+        .replace('YYYY', String(year))
+        .replace('MM', month)
+        .replace('DD', day)
+        .replace('HH', hours)
+        .replace('mm', minutes)
+        .replace('ss', seconds);
+}
+
+export { clamp, copyToClipboard, debounce, deepMerge, formatDate, formatFileSize, generateId, isMobile, isPlainObject, isTouchDevice, throttle };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@starui/shared",
+  "version": "0.0.1-alpha.0",
+  "description": "Star UI Shared - Shared utilities and tools for Star UI",
+  "type": "module",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "files": [
+    "lib",
+    "es",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "import": "./es/index.js",
+      "types": "./es/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.js",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write ."
+  },
+  "keywords": [
+    "vue3",
+    "utils",
+    "tools",
+    "shared",
+    "typescript"
+  ],
+  "author": "Star UI Team",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/star-ui.git",
+    "directory": "packages/shared"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@types/node": "^20.10.0",
+    "rollup": "^4.6.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  }
+}

package/src/constants/index.ts

@@ -0,0 +1,54 @@
+// Moon UI Shared - Constants
+// ===========================
+
+export const BREAKPOINTS = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1600,
+} as const
+
+export const BREAKPOINT_NAMES = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const
+
+export type BreakpointName = typeof BREAKPOINT_NAMES[number]
+
+export const KEY_CODES = {
+  ENTER: 13,
+  ESC: 27,
+  SPACE: 32,
+  TAB: 9,
+  UP: 38,
+  DOWN: 40,
+  LEFT: 37,
+  RIGHT: 39,
+  HOME: 36,
+  END: 35,
+  PAGE_UP: 33,
+  PAGE_DOWN: 34,
+} as const
+
+export const MOUSE_BUTTONS = {
+  LEFT: 0,
+  MIDDLE: 1,
+  RIGHT: 2,
+} as const
+
+export const ANIMATION_DURATION = {
+  FAST: 150,
+  BASE: 300,
+  SLOW: 500,
+} as const
+
+export const Z_INDEX = {
+  DROPDOWN: 1000,
+  STICKY: 1020,
+  FIXED: 1030,
+  MODAL_BACKDROP: 1040,
+  MODAL: 1050,
+  POPOVER: 1060,
+  TOOLTIP: 1070,
+  MESSAGE: 1080,
+  NOTIFICATION: 1090,
+} as const

package/src/hooks/index.ts

@@ -0,0 +1,189 @@
+// Moon UI Shared - Vue Composition Hooks
+// =======================================
+
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
+import { isMobile, debounce } from '../utils'
+
+/**
+ * Hook for responsive breakpoint detection
+ */
+export function useBreakpoint() {
+  const width = ref(typeof window !== 'undefined' ? window.innerWidth : 0)
+  
+  const breakpoint = computed(() => {
+    if (width.value >= 1600) return 'xxl'
+    if (width.value >= 1200) return 'xl'
+    if (width.value >= 992) return 'lg'
+    if (width.value >= 768) return 'md'
+    if (width.value >= 576) return 'sm'
+    return 'xs'
+  })
+  
+  const isMobileView = computed(() => width.value < 768)
+  const isTabletView = computed(() => width.value >= 768 && width.value < 992)
+  const isDesktopView = computed(() => width.value >= 992)
+  
+  const updateWidth = debounce(() => {
+    width.value = window.innerWidth
+  }, 100)
+  
+  onMounted(() => {
+    window.addEventListener('resize', updateWidth)
+  })
+  
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateWidth)
+  })
+  
+  return {
+    width,
+    breakpoint,
+    isMobileView,
+    isTabletView,
+    isDesktopView,
+  }
+}
+
+/**
+ * Hook for theme management
+ */
+export function useTheme() {
+  const theme = ref<'light' | 'dark'>('light')
+  
+  const setTheme = (newTheme: 'light' | 'dark') => {
+    theme.value = newTheme
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('data-theme', newTheme)
+    }
+  }
+  
+  const toggleTheme = () => {
+    setTheme(theme.value === 'light' ? 'dark' : 'light')
+  }
+  
+  onMounted(() => {
+    if (typeof window !== 'undefined') {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+      if (prefersDark) {
+        setTheme('dark')
+      }
+    }
+  })
+  
+  return {
+    theme,
+    setTheme,
+    toggleTheme,
+  }
+}
+
+/**
+ * Hook for click outside detection
+ */
+export function useClickOutside(
+  elementRef: any,
+  callback: () => void
+) {
+  const handler = (event: MouseEvent) => {
+    const el = elementRef.value
+    if (el && !el.contains(event.target as Node)) {
+      callback()
+    }
+  }
+  
+  onMounted(() => {
+    document.addEventListener('click', handler)
+  })
+  
+  onUnmounted(() => {
+    document.removeEventListener('click', handler)
+  })
+}
+
+/**
+ * Hook for scroll position
+ */
+export function useScroll() {
+  const scrollX = ref(0)
+  const scrollY = ref(0)
+  
+  const updateScroll = () => {
+    scrollX.value = window.scrollX
+    scrollY.value = window.scrollY
+  }
+  
+  onMounted(() => {
+    window.addEventListener('scroll', updateScroll)
+    updateScroll()
+  })
+  
+  onUnmounted(() => {
+    window.removeEventListener('scroll', updateScroll)
+  })
+  
+  return {
+    scrollX,
+    scrollY,
+  }
+}
+
+/**
+ * Hook for async operations with loading state
+ */
+export function useAsync<T>(
+  asyncFn: (...args: any[]) => Promise<T>
+) {
+  const loading = ref(false)
+  const error = ref<Error | null>(null)
+  const data = ref<T | null>(null)
+  
+  const execute = async (...args: any[]) => {
+    loading.value = true
+    error.value = null
+    
+    try {
+      data.value = await asyncFn(...args)
+      return data.value
+    } catch (err) {
+      error.value = err as Error
+      throw err
+    } finally {
+      loading.value = false
+    }
+  }
+  
+  return {
+    loading,
+    error,
+    data,
+    execute,
+  }
+}
+
+/**
+ * Hook for localStorage with reactivity
+ */
+export function useLocalStorage<T>(key: string, defaultValue: T) {
+  const stored = typeof window !== 'undefined' ? localStorage.getItem(key) : null
+  const value = ref<T>(stored ? JSON.parse(stored) : defaultValue)
+  
+  const setValue = (newValue: T) => {
+    value.value = newValue
+    if (typeof window !== 'undefined') {
+      localStorage.setItem(key, JSON.stringify(newValue))
+    }
+  }
+  
+  const removeValue = () => {
+    value.value = defaultValue
+    if (typeof window !== 'undefined') {
+      localStorage.removeItem(key)
+    }
+  }
+  
+  return {
+    value,
+    setValue,
+    removeValue,
+  }
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+// Moon UI Shared - Utilities and Tools
+// =====================================
+
+// Export utilities
+export * from './utils'
+
+// Export hooks
+export * from './hooks'
+
+// Export constants
+export * from './constants'
+
+// Export types
+export * from './types'

package/src/theme/index.scss

@@ -0,0 +1,4 @@
+// Moon UI Shared - Theme Entry Point
+// ===================================
+
+@import './mixins.scss';

package/src/theme/mixins.scss

@@ -0,0 +1,174 @@
+// Moon UI Shared - SCSS Mixins
+// =============================
+
+// Hairline border for high DPI displays
+@mixin hairline($color: #ebedf0, $radius: 0) {
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 200%;
+    height: 200%;
+    border: 1px solid $color;
+    transform: scale(0.5);
+    transform-origin: left top;
+    pointer-events: none;
+    
+    @if $radius != 0 {
+      border-radius: $radius * 2;
+    }
+  }
+}
+
+// Text overflow ellipsis
+@mixin ellipsis($lines: 1) {
+  @if $lines == 1 {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  } @else {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: $lines;
+    -webkit-box-orient: vertical;
+  }
+}
+
+// Safe area padding for mobile devices
+@mixin safe-area-padding-bottom() {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+@mixin safe-area-padding-top() {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+
+@mixin safe-area-padding-left() {
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+}
+
+@mixin safe-area-padding-right() {
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}
+
+// Responsive breakpoints
+@mixin respond-to($breakpoint) {
+  $breakpoints: (
+    'xs': 0,
+    'sm': 576px,
+    'md': 768px,
+    'lg': 992px,
+    'xl': 1200px,
+    'xxl': 1600px
+  );
+  
+  $value: map-get($breakpoints, $breakpoint);
+  
+  @if $value != 0 {
+    @media (min-width: $value) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin mobile-only {
+  @media (max-width: 767px) {
+    @content;
+  }
+}
+
+@mixin tablet-up {
+  @media (min-width: 768px) {
+    @content;
+  }
+}
+
+@mixin desktop-up {
+  @media (min-width: 992px) {
+    @content;
+  }
+}
+
+// Flexbox utilities
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+// Absolute positioning
+@mixin absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@mixin absolute-full {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+// Clearfix
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+// Hide scrollbar but keep functionality
+@mixin scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+// Custom scrollbar
+@mixin custom-scrollbar($width: 8px, $track-color: #f1f1f1, $thumb-color: #c1c1c1) {
+  &::-webkit-scrollbar {
+    width: $width;
+    height: $width;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: $track-color;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: $thumb-color;
+    border-radius: 999px;
+    
+    &:hover {
+      background: darken($thumb-color, 10%);
+    }
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,30 @@
+// Moon UI Shared - Common Types
+// ===============================
+
+export type Nullable<T> = T | null
+
+export type Optional<T> = T | undefined
+
+export type MaybeRef<T> = T | { value: T }
+
+export type MaybeArray<T> = T | T[]
+
+export type MaybePromise<T> = T | Promise<T>
+
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
+}
+
+export type Merge<T, U> = Omit<T, keyof U> & U
+
+export type ExtractPropTypes<T> = {
+  [K in keyof T]: T[K] extends { type: infer R }
+    ? R extends (...args: any[]) => any
+      ? R
+      : R extends new (...args: any[]) => any
+      ? InstanceType<R>
+      : R
+    : T[K] extends { type: infer R }
+    ? R
+    : any
+}

package/src/utils/index.ts

@@ -0,0 +1,133 @@
+// Moon UI Shared - Utility Functions
+// ====================================
+
+/**
+ * Check if the current environment is mobile
+ */
+export function isMobile(): boolean {
+  if (typeof window === 'undefined') return false
+  return window.innerWidth < 768
+}
+
+/**
+ * Check if the device supports touch
+ */
+export function isTouchDevice(): boolean {
+  if (typeof window === 'undefined') return false
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
+}
+
+/**
+ * Debounce function
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  delay: number
+): (...args: Parameters<T>) => void {
+  let timer: ReturnType<typeof setTimeout> | null = null
+  return function (...args: Parameters<T>) {
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), delay)
+  }
+}
+
+/**
+ * Throttle function
+ */
+export function throttle<T extends (...args: any[]) => any>(
+  fn: T,
+  limit: number
+): (...args: Parameters<T>) => void {
+  let inThrottle = false
+  return function (...args: Parameters<T>) {
+    if (!inThrottle) {
+      fn(...args)
+      inThrottle = true
+      setTimeout(() => (inThrottle = false), limit)
+    }
+  }
+}
+
+/**
+ * Generate unique ID
+ */
+export function generateId(prefix = 'moon'): string {
+  return `${prefix}-${Math.random().toString(36).substr(2, 9)}`
+}
+
+/**
+ * Deep merge objects
+ */
+export function deepMerge<T extends Record<string, any>>(
+  target: T,
+  source: Partial<T>
+): T {
+  const result = { ...target }
+  for (const key in source) {
+    if (source[key] && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+      result[key] = deepMerge(result[key] || {}, source[key] as any)
+    } else {
+      result[key] = source[key] as any
+    }
+  }
+  return result
+}
+
+/**
+ * Format file size
+ */
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+/**
+ * Copy text to clipboard
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text)
+    return true
+  } catch (err) {
+    console.error('Failed to copy:', err)
+    return false
+  }
+}
+
+/**
+ * Check if value is a plain object
+ */
+export function isPlainObject(value: any): value is Record<string, any> {
+  return value !== null && typeof value === 'object' && Object.prototype.toString.call(value) === '[object Object]'
+}
+
+/**
+ * Clamp a number between min and max
+ */
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+/**
+ * Format date
+ */
+export function formatDate(date: Date | string | number, format = 'YYYY-MM-DD HH:mm:ss'): string {
+  const d = new Date(date)
+  const year = d.getFullYear()
+  const month = String(d.getMonth() + 1).padStart(2, '0')
+  const day = String(d.getDate()).padStart(2, '0')
+  const hours = String(d.getHours()).padStart(2, '0')
+  const minutes = String(d.getMinutes()).padStart(2, '0')
+  const seconds = String(d.getSeconds()).padStart(2, '0')
+
+  return format
+    .replace('YYYY', String(year))
+    .replace('MM', month)
+    .replace('DD', day)
+    .replace('HH', hours)
+    .replace('mm', minutes)
+    .replace('ss', seconds)
+}