@tachui/responsive 0.8.0-alpha

package/dist/modifiers/responsive/types.d.ts

@@ -0,0 +1,183 @@
+/**
+ * Responsive Design System Types
+ *
+ * CSS-Native media query and responsive design type definitions for tachUI.
+ * Provides comprehensive type safety for responsive modifiers while maintaining
+ * backward compatibility with existing modifier system.
+ */
+/**
+ * Standard breakpoint identifiers following Tailwind conventions
+ */
+export type BreakpointKey = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Breakpoint configuration mapping breakpoint keys to CSS values
+ */
+export interface BreakpointConfig {
+    base?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    '2xl'?: string;
+}
+/**
+ * Default breakpoint values (Tailwind-inspired)
+ */
+export declare const DEFAULT_BREAKPOINTS: Required<BreakpointConfig>;
+/**
+ * Responsive value type that accepts either a single value or breakpoint-specific values
+ */
+export type ResponsiveValue<T> = T | Partial<Record<BreakpointKey, T>>;
+/**
+ * CSS property values that can be responsive
+ */
+export type ResponsiveCSSValue = ResponsiveValue<string | number>;
+/**
+ * Advanced media query configuration for custom responsive behavior
+ */
+export interface MediaQueryConfig {
+    query: string;
+    styles: Record<string, string | number>;
+}
+/**
+ * Responsive modifier configuration combining breakpoints and custom media queries
+ */
+export interface ResponsiveModifierConfig<T = any> {
+    breakpoints?: Partial<Record<BreakpointKey, T>>;
+    mediaQueries?: MediaQueryConfig[];
+    fallback?: T;
+}
+/**
+ * Responsive layout configuration for common responsive patterns
+ */
+export interface ResponsiveLayoutConfig {
+    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+    wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>;
+    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
+    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>;
+    gap?: ResponsiveValue<number | string>;
+}
+/**
+ * Responsive typography configuration
+ */
+export interface ResponsiveTypographyConfig {
+    fontSize?: ResponsiveValue<number | string>;
+    lineHeight?: ResponsiveValue<number | string>;
+    letterSpacing?: ResponsiveValue<number | string>;
+    fontWeight?: ResponsiveValue<number | string>;
+    textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>;
+    textTransform?: ResponsiveValue<'none' | 'uppercase' | 'lowercase' | 'capitalize'>;
+}
+/**
+ * Responsive spacing configuration
+ */
+export interface ResponsiveSpacingConfig {
+    top?: ResponsiveValue<number | string>;
+    right?: ResponsiveValue<number | string>;
+    bottom?: ResponsiveValue<number | string>;
+    left?: ResponsiveValue<number | string>;
+    horizontal?: ResponsiveValue<number | string>;
+    vertical?: ResponsiveValue<number | string>;
+    all?: ResponsiveValue<number | string>;
+}
+/**
+ * Responsive dimension configuration
+ */
+export interface ResponsiveDimensionConfig {
+    width?: ResponsiveValue<number | string>;
+    height?: ResponsiveValue<number | string>;
+    minWidth?: ResponsiveValue<number | string>;
+    maxWidth?: ResponsiveValue<number | string>;
+    minHeight?: ResponsiveValue<number | string>;
+    maxHeight?: ResponsiveValue<number | string>;
+}
+/**
+ * Responsive visibility configuration
+ */
+export interface ResponsiveVisibilityConfig {
+    display?: ResponsiveValue<'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid'>;
+    visibility?: ResponsiveValue<'visible' | 'hidden' | 'collapse'>;
+    opacity?: ResponsiveValue<number>;
+}
+/**
+ * Comprehensive responsive style configuration
+ */
+export interface ResponsiveStyleConfig extends ResponsiveLayoutConfig, ResponsiveTypographyConfig, ResponsiveDimensionConfig, ResponsiveVisibilityConfig {
+    backgroundColor?: ResponsiveValue<string>;
+    color?: ResponsiveValue<string>;
+    border?: ResponsiveValue<string>;
+    borderRadius?: ResponsiveValue<number | string>;
+    boxShadow?: ResponsiveValue<string>;
+    transform?: ResponsiveValue<string>;
+    transition?: ResponsiveValue<string>;
+    padding?: ResponsiveSpacingConfig | ResponsiveValue<number | string>;
+    margin?: ResponsiveSpacingConfig | ResponsiveValue<number | string>;
+    [key: string]: any;
+}
+/**
+ * Breakpoint context information for responsive utilities
+ */
+export interface BreakpointContext {
+    current: BreakpointKey;
+    width: number;
+    height: number;
+    isAbove: (breakpoint: BreakpointKey) => boolean;
+    isBelow: (breakpoint: BreakpointKey) => boolean;
+    isBetween: (min: BreakpointKey, max: BreakpointKey) => boolean;
+    matches: (query: string) => boolean;
+}
+/**
+ * Responsive modifier factory configuration
+ */
+export interface ResponsiveModifierFactoryConfig {
+    breakpoints?: BreakpointConfig;
+    generateCSS?: boolean;
+    fallbackToJS?: boolean;
+    optimizeOutput?: boolean;
+    debugMode?: boolean;
+}
+/**
+ * CSS media query generation result
+ */
+export interface GeneratedMediaQuery {
+    breakpoint: BreakpointKey;
+    query: string;
+    styles: Record<string, string | number>;
+    selector: string;
+}
+/**
+ * Responsive modifier application result
+ */
+export interface ResponsiveModifierResult {
+    cssRules: string[];
+    mediaQueries: GeneratedMediaQuery[];
+    fallbackStyles: Record<string, string | number>;
+    hasResponsiveStyles: boolean;
+}
+/**
+ * Type guard to check if a value is responsive
+ */
+export declare function isResponsiveValue<T>(value: ResponsiveValue<T>): value is Partial<Record<BreakpointKey, T>>;
+/**
+ * Type guard to check if a breakpoint key is valid
+ */
+export declare function isValidBreakpointKey(key: string): key is BreakpointKey;
+/**
+ * Utility type to make any property responsive
+ */
+export type MakeResponsive<T> = {
+    [K in keyof T]: ResponsiveValue<T[K]>;
+};
+/**
+ * Extract responsive properties from a configuration object
+ */
+export type ResponsiveProperties<T> = {
+    [K in keyof T as T[K] extends ResponsiveValue<any> ? K : never]: T[K];
+};
+/**
+ * Extract non-responsive properties from a configuration object
+ */
+export type NonResponsiveProperties<T> = {
+    [K in keyof T as T[K] extends ResponsiveValue<any> ? never : K]: T[K];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/modifiers/responsive/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/modifiers/responsive/types.ts"],"names":[],"mappings":"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"}

package/dist/modifiers/responsive/utilities.d.ts

@@ -0,0 +1,149 @@
+/**
+ * Responsive Design Utilities
+ *
+ * Provides utility functions and hooks for working with responsive design
+ * in tachUI applications. Includes breakpoint detection, media query helpers,
+ * and responsive value resolution.
+ */
+import { BreakpointKey, BreakpointContext, ResponsiveValue } from './types';
+import { Signal } from '@tachui/core';
+/**
+ * Hook to get current breakpoint information
+ */
+export declare function useBreakpoint(): {
+    current: Signal<BreakpointKey>;
+    context: Signal<BreakpointContext>;
+    isAbove: (breakpoint: BreakpointKey) => Signal<boolean>;
+    isBelow: (breakpoint: BreakpointKey) => Signal<boolean>;
+    isBetween: (min: BreakpointKey, max: BreakpointKey) => Signal<boolean>;
+    matches: (query: string) => Signal<boolean>;
+};
+/**
+ * Hook to create a reactive media query
+ */
+export declare function useMediaQuery(query: string): Signal<boolean>;
+/**
+ * Resolve a responsive value to its current value based on the current breakpoint
+ */
+export declare function useResponsiveValue<T>(value: ResponsiveValue<T>): Signal<T>;
+/**
+ * Create a responsive value resolver for static resolution
+ */
+export declare function resolveResponsiveValue<T>(value: ResponsiveValue<T>, targetBreakpoint?: BreakpointKey): T;
+/**
+ * Create responsive CSS custom properties (CSS variables)
+ */
+export declare function createResponsiveCSSVariables(prefix: string, values: Record<string, ResponsiveValue<string | number>>): Record<string, string>;
+/**
+ * Generate CSS media query string for common patterns
+ */
+export declare const MediaQueries: {
+    readonly mobile: "(max-width: 767px)";
+    readonly tablet: "(min-width: 768px) and (max-width: 1023px)";
+    readonly desktop: "(min-width: 1024px)";
+    readonly landscape: "(orientation: landscape)";
+    readonly portrait: "(orientation: portrait)";
+    readonly highDPI: "(min-resolution: 2dppx)";
+    readonly lowDPI: "(max-resolution: 1dppx)";
+    readonly retinaDisplay: "(min-resolution: 2dppx)";
+    readonly standardDisplay: "(max-resolution: 1.9dppx)";
+    readonly darkMode: "(prefers-color-scheme: dark)";
+    readonly lightMode: "(prefers-color-scheme: light)";
+    readonly noColorSchemePreference: "(prefers-color-scheme: no-preference)";
+    readonly reducedMotion: "(prefers-reduced-motion: reduce)";
+    readonly allowMotion: "(prefers-reduced-motion: no-preference)";
+    readonly highContrast: "(prefers-contrast: high)";
+    readonly lowContrast: "(prefers-contrast: low)";
+    readonly normalContrast: "(prefers-contrast: no-preference)";
+    readonly reduceData: "(prefers-reduced-data: reduce)";
+    readonly allowData: "(prefers-reduced-data: no-preference)";
+    readonly reduceTransparency: "(prefers-reduced-transparency: reduce)";
+    readonly allowTransparency: "(prefers-reduced-transparency: no-preference)";
+    readonly canHover: "(hover: hover)";
+    readonly noHover: "(hover: none)";
+    readonly finePointer: "(pointer: fine)";
+    readonly coarsePointer: "(pointer: coarse)";
+    readonly anyCanHover: "(any-hover: hover)";
+    readonly anyNoHover: "(any-hover: none)";
+    readonly anyFinePointer: "(any-pointer: fine)";
+    readonly anyCoarsePointer: "(any-pointer: coarse)";
+    readonly slowUpdate: "(update: slow)";
+    readonly fastUpdate: "(update: fast)";
+    readonly blockScrolling: "(overflow-block: scroll)";
+    readonly blockPaged: "(overflow-block: paged)";
+    readonly inlineScrolling: "(overflow-inline: scroll)";
+    readonly forcedColors: "(forced-colors: active)";
+    readonly normalColors: "(forced-colors: none)";
+    readonly invertedColors: "(inverted-colors: inverted)";
+    readonly normalInvertedColors: "(inverted-colors: none)";
+    readonly scriptingEnabled: "(scripting: enabled)";
+    readonly scriptingDisabled: "(scripting: none)";
+    readonly scriptingInitialOnly: "(scripting: initial-only)";
+    readonly containerSmall: "(max-width: 400px)";
+    readonly containerMedium: "(min-width: 401px) and (max-width: 800px)";
+    readonly containerLarge: "(min-width: 801px)";
+    readonly minWidth: (width: number | string) => string;
+    readonly maxWidth: (width: number | string) => string;
+    readonly between: (min: number | string, max: number | string) => string;
+    readonly minHeight: (height: number | string) => string;
+    readonly maxHeight: (height: number | string) => string;
+    readonly heightBetween: (min: number | string, max: number | string) => string;
+    readonly square: "(aspect-ratio: 1/1)";
+    readonly landscape16_9: "(aspect-ratio: 16/9)";
+    readonly portrait9_16: "(aspect-ratio: 9/16)";
+    readonly widescreen: "(min-aspect-ratio: 16/9)";
+    readonly tallscreen: "(max-aspect-ratio: 9/16)";
+    readonly customAspectRatio: (ratio: string) => string;
+    readonly minAspectRatio: (ratio: string) => string;
+    readonly maxAspectRatio: (ratio: string) => string;
+    readonly lowRes: "(max-resolution: 120dpi)";
+    readonly standardRes: "(min-resolution: 120dpi) and (max-resolution: 192dpi)";
+    readonly highRes: "(min-resolution: 192dpi)";
+    readonly customResolution: (dpi: number) => string;
+    readonly print: "print";
+    readonly screen: "screen";
+    readonly speech: "speech";
+    readonly iPhone: "(max-width: 428px)";
+    readonly iPad: "(min-width: 768px) and (max-width: 1024px)";
+    readonly desktopSmall: "(min-width: 1024px) and (max-width: 1440px)";
+    readonly desktopLarge: "(min-width: 1440px)";
+    readonly touchDevice: "(pointer: coarse)";
+    readonly mouseDevice: "(pointer: fine)";
+    readonly keyboardNavigation: "(hover: none) and (pointer: coarse)";
+    readonly wideColorGamut: "(color-gamut: p3)";
+    readonly standardColorGamut: "(color-gamut: srgb)";
+    readonly hdr: "(dynamic-range: high)";
+    readonly sdr: "(dynamic-range: standard)";
+};
+/**
+ * Utility to combine multiple media queries
+ */
+export declare function combineMediaQueries(...queries: string[]): string;
+/**
+ * Utility to create OR media queries
+ */
+export declare function orMediaQueries(...queries: string[]): string;
+/**
+ * Create a responsive show/hide utility
+ */
+export declare function createResponsiveVisibility(config: {
+    showOn?: BreakpointKey[];
+    hideOn?: BreakpointKey[];
+}): Signal<boolean>;
+/**
+ * Debug utility to log current responsive state
+ */
+export declare function logResponsiveState(): void;
+/**
+ * Utility function to wrap existing modifier builder with responsive capabilities
+ */
+export declare function withResponsive<T>(value: T): T;
+/**
+ * Development-only responsive debugging overlay
+ */
+export declare function enableResponsiveDebugOverlay(options?: {
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    showDimensions?: boolean;
+    showBreakpoint?: boolean;
+}): void;
+//# sourceMappingURL=utilities.d.ts.map

package/dist/modifiers/responsive/utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilities.d.ts","sourceRoot":"","sources":["../../../src/modifiers/responsive/utilities.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EACL,aAAa,EACb,iBAAiB,EACjB,eAAe,EAEhB,MAAM,SAAS,CAAA;AAMhB,OAAO,EAAgC,MAAM,EAAE,MAAM,cAAc,CAAA;AAEnE;;GAEG;AACH,wBAAgB,aAAa,IAAI;IAC/B,OAAO,EAAE,MAAM,CAAC,aAAa,CAAC,CAAA;IAC9B,OAAO,EAAE,MAAM,CAAC,iBAAiB,CAAC,CAAA;IAClC,OAAO,EAAE,CAAC,UAAU,EAAE,aAAa,KAAK,MAAM,CAAC,OAAO,CAAC,CAAA;IACvD,OAAO,EAAE,CAAC,UAAU,EAAE,aAAa,KAAK,MAAM,CAAC,OAAO,CAAC,CAAA;IACvD,SAAS,EAAE,CAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,aAAa,KAAK,MAAM,CAAC,OAAO,CAAC,CAAA;IACtE,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,OAAO,CAAC,CAAA;CAC5C,CA+CA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,CAc5D;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAwC1E;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EACtC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,gBAAgB,CAAC,EAAE,aAAa,GAC/B,CAAC,CAmCH;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAC1C,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,GACvD,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAyBxB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAoFL,MAAM,GAAG,MAAM;+BAEf,MAAM,GAAG,MAAM;4BAElB,MAAM,GAAG,MAAM,OAAO,MAAM,GAAG,MAAM;iCAIhC,MAAM,GAAG,MAAM;iCAEf,MAAM,GAAG,MAAM;kCAEd,MAAM,GAAG,MAAM,OAAO,MAAM,GAAG,MAAM;;;;;;wCAS/B,MAAM;qCACT,MAAM;qCACN,MAAM;;;;qCAMN,MAAM;;;;;;;;;;;;;;;CAuBtB,CAAA;AAEV;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,CAEhE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM,CAE3D;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,MAAM,EAAE;IACjD,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;CACzB,GAAG,MAAM,CAAC,OAAO,CAAC,CAgBlB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CA0BzC;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAI7C;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,GAAE;IACP,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAA;IACpE,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,cAAc,CAAC,EAAE,OAAO,CAAA;CACpB,GACL,IAAI,CAwDN"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@tachui/responsive",
+  "version": "0.8.0-alpha",
+  "description": "Advanced responsive design patterns and utilities for tachUI framework",
+  "homepage": "https://tachui.dev/",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./modifiers": {
+      "types": "./dist/modifiers/index.d.ts",
+      "import": "./dist/modifiers/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@tachui/core": "0.8.0-alpha",
+    "@tachui/modifiers": "0.8.0-alpha"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/jsdom": "^21.1.6",
+    "@vitest/coverage-v8": "^1.0.0",
+    "jsdom": "^23.2.0",
+    "typescript": "^5.2.0",
+    "vite": "^7.1.1",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "typescript": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "keywords": [
+    "ui",
+    "responsive",
+    "breakpoints",
+    "media-queries",
+    "container-queries",
+    "responsive-design",
+    "tachui",
+    "typescript"
+  ],
+  "author": "tachUI Team",
+  "license": "MPL-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tach-UI/tachUI",
+    "directory": "packages/responsive"
+  },
+  "scripts": {
+    "build": "rm -rf dist && vite build && tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "valid": "clear && vitest run && pnpm type-check && pnpm lint && pnpm build",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
+    "test:ci": "npm run test:run",
+    "type-check": "tsc --project tsconfig.type-check.json",
+    "clean": "rm -rf dist",
+    "lint": "oxlint src"
+  }
+}