@timmbr/ui 1.0.0-beta

package/dist/providers/TimmbrConfigProvider.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export interface ComponentConfig {
+    button?: {
+        defaultVariant?: 'default' | 'outline' | 'ghost';
+        defaultSize?: 'default' | 'sm' | 'lg' | 'icon';
+    };
+    accordion?: {
+        defaultMotion?: boolean;
+    };
+    icon?: {
+        defaultSize?: number;
+    };
+}
+export interface TimmbrConfig {
+    animations?: {
+        enabled?: boolean;
+    };
+    theme?: {
+        mode?: 'light' | 'dark' | 'system';
+    };
+    components?: ComponentConfig;
+}
+export declare const defaultTimmbrConfig: Required<TimmbrConfig>;
+export interface TimmbrConfigProviderProps {
+    children: React.ReactNode;
+    config?: Partial<TimmbrConfig>;
+}
+/**
+ * Global configuration provider for the Timmbr Design System.
+ * Supports customizing animation behavior, default component variants/sizes, and themes.
+ * Wrapping the app with this provider is optional; components fall back to default values automatically.
+ */
+export declare const TimmbrConfigProvider: React.FC<TimmbrConfigProviderProps>;
+/**
+ * Hook to access Timmbr design system configuration.
+ */
+export declare const useTimmbrConfig: () => TimmbrConfig;
+//# sourceMappingURL=TimmbrConfigProvider.d.ts.map

package/dist/providers/TimmbrConfigProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimmbrConfigProvider.d.ts","sourceRoot":"","sources":["../../src/providers/TimmbrConfigProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE;QACP,cAAc,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;QACjD,WAAW,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;KAChD,CAAC;IACF,SAAS,CAAC,EAAE;QACV,aAAa,CAAC,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,IAAI,CAAC,EAAE;QACL,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE;QACX,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IACF,KAAK,CAAC,EAAE;QACN,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;KACpC,CAAC;IACF,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,EAAE,QAAQ,CAAC,YAAY,CAmBtD,CAAC;AAIF,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAChC;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAoDpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,QAAO,YAElC,CAAC"}

package/dist/providers/TimmbrConfigProvider.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+
+const defaultTimmbrConfig = {
+  animations: {
+    enabled: true
+  },
+  theme: {
+    mode: "light"
+  },
+  components: {
+    button: {
+      defaultVariant: "default",
+      defaultSize: "default"
+    },
+    accordion: {
+      defaultMotion: true
+    },
+    icon: {
+      defaultSize: 24
+    }
+  }
+};
+const TimmbrConfigContext = React.createContext(defaultTimmbrConfig);
+const TimmbrConfigProvider = ({
+  children,
+  config
+}) => {
+  const mergedConfig = React.useMemo(() => {
+    return {
+      animations: {
+        ...defaultTimmbrConfig.animations,
+        ...config?.animations
+      },
+      theme: {
+        ...defaultTimmbrConfig.theme,
+        ...config?.theme
+      },
+      components: {
+        button: {
+          ...defaultTimmbrConfig.components.button,
+          ...config?.components?.button
+        },
+        accordion: {
+          ...defaultTimmbrConfig.components.accordion,
+          ...config?.components?.accordion
+        },
+        icon: {
+          ...defaultTimmbrConfig.components.icon,
+          ...config?.components?.icon
+        }
+      }
+    };
+  }, [config]);
+  const animationsDisabled = mergedConfig.animations?.enabled === false;
+  React.useEffect(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute(
+        "data-animations-disabled",
+        animationsDisabled ? "true" : "false"
+      );
+    }
+    return () => {
+      if (typeof document !== "undefined") {
+        document.documentElement.removeAttribute("data-animations-disabled");
+      }
+    };
+  }, [animationsDisabled]);
+  return /* @__PURE__ */ jsx(TimmbrConfigContext.Provider, { value: mergedConfig, children });
+};
+const useTimmbrConfig = () => {
+  return React.useContext(TimmbrConfigContext);
+};
+
+export { TimmbrConfigProvider, defaultTimmbrConfig, useTimmbrConfig };

package/dist/providers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TimmbrConfigProvider';
+export * from './AnimationProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}

package/dist/types/motion.d.ts

@@ -0,0 +1,99 @@
+export interface MotionSpring {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}
+export interface MotionTransition {
+    duration?: number;
+    delay?: number;
+    easing?: string;
+    type?: 'tween' | 'spring' | 'keyframes' | 'inertia';
+    spring?: MotionSpring;
+}
+export type MotionPreset = 'fade' | 'fade-in' | 'scale' | 'scale-in' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'popover' | 'modal' | 'drawer' | 'bounce' | 'none';
+export interface MotionConfig {
+    /**
+     * Whether animations are enabled.
+     * If false, disables transitions and keyframe animations.
+     */
+    enabled?: boolean;
+    /**
+     * Entrance or presence animation preset.
+     */
+    preset?: MotionPreset;
+    /**
+     * Explicit initial animation state (used by motion primitives like Framer Motion or Motion One).
+     */
+    initial?: Record<string, any> | string | boolean;
+    /**
+     * Explicit target/animate state (used by motion primitives).
+     */
+    animate?: MotionPreset | Record<string, any> | string;
+    /**
+     * Exit animation state for unmounting presence transitions.
+     */
+    exit?: Record<string, any> | string;
+    /**
+     * Hover animation definition or toggle.
+     */
+    hover?: boolean | {
+        scale?: number;
+        y?: number;
+        x?: number;
+        brightness?: number;
+        className?: string;
+    } | Record<string, any>;
+    /**
+     * While hover target (alias for motion primitive whileHover).
+     */
+    whileHover?: Record<string, any> | string;
+    /**
+     * Tap / active click compression animation definition or toggle.
+     */
+    tap?: boolean | {
+        scale?: number;
+        y?: number;
+        x?: number;
+        className?: string;
+    } | Record<string, any>;
+    /**
+     * While tap target (alias for motion primitive whileTap).
+     */
+    whileTap?: Record<string, any> | string;
+    /**
+     * Custom variants map for orchestrating complex multi-state animations.
+     */
+    variants?: Record<string, any>;
+    /**
+     * Transition timing, curves, and spring physics.
+     */
+    transition?: MotionTransition;
+    /**
+     * Additional custom animation utility classes.
+     */
+    className?: string;
+}
+export type MotionProp = boolean | MotionPreset | MotionConfig;
+export interface MotionProps {
+    /**
+     * Component-level animation control.
+     * Supports:
+     * - boolean: `false` to disable all transitions and animations, `true` to enable.
+     * - MotionPreset string: `'fade'`, `'scale'`, `'slide-up'`, `'slide-down'`, etc.
+     * - MotionConfig object: complete animation specifications including hover, tap, presets,
+     *   transitions, and motion primitive compatibility (Framer Motion / Motion One).
+     * Defaults to global TimmbrConfigProvider / AnimationProvider setting (`true`).
+     */
+    motion?: MotionProp;
+}
+/**
+ * Resolves whether a component should animate and computes relevant utility classes,
+ * inline styles, and motion telemetry for direct rendering or motion primitive delegation.
+ */
+export declare function resolveMotion(motion?: MotionProp, globalMotion?: boolean): {
+    shouldAnimate: boolean;
+    motionClass?: string;
+    config?: MotionConfig;
+    dataAttributes?: Record<string, string>;
+};
+//# sourceMappingURL=motion.d.ts.map

package/dist/types/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/types/motion.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;IACpD,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB;AAED,MAAM,MAAM,YAAY,GACpB,MAAM,GACN,SAAS,GACT,OAAO,GACP,UAAU,GACV,UAAU,GACV,YAAY,GACZ,YAAY,GACZ,aAAa,GACb,SAAS,GACT,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,GAAG,OAAO,CAAC;IACjD;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;IACtD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;IACpC;;OAEG;IACH,KAAK,CAAC,EACF,OAAO,GACP;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,GACnF,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,GAAG,CAAC,EACA,OAAO,GACP;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,GAC9D,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,YAAY,GAAG,YAAY,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAqBD;;;GAGG;AACH,wBAAgB,aAAa,CAC3B,MAAM,CAAC,EAAE,UAAU,EACnB,YAAY,GAAE,OAAc,GAC3B;IACD,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACzC,CAiEA"}

package/dist/types/motion.js

@@ -0,0 +1,73 @@
+const PRESET_CLASSES = {
+  fade: "transition-opacity duration-200 animate-in fade-in",
+  "fade-in": "transition-opacity duration-200 animate-in fade-in",
+  scale: "transition-all duration-200 animate-in zoom-in-95",
+  "scale-in": "transition-all duration-200 animate-in zoom-in-95",
+  "slide-up": "transition-all duration-200 animate-in slide-in-from-bottom-2 fade-in",
+  "slide-down": "transition-all duration-200 animate-in slide-in-from-top-2 fade-in",
+  "slide-left": "transition-all duration-200 animate-in slide-in-from-right-2 fade-in",
+  "slide-right": "transition-all duration-200 animate-in slide-in-from-left-2 fade-in",
+  popover: "transition-all duration-150 animate-in zoom-in-95 fade-in",
+  modal: "transition-all duration-200 animate-in zoom-in-95 fade-in",
+  drawer: "transition-transform duration-300 ease-in-out",
+  bounce: "transition-transform duration-300 animate-bounce",
+  none: "transition-none animate-none"
+};
+function resolveMotion(motion, globalMotion = true) {
+  if (motion === false) {
+    return {
+      shouldAnimate: false,
+      motionClass: "transition-none animate-none active:scale-100"
+    };
+  }
+  if (typeof motion === "string") {
+    if (!globalMotion) {
+      return {
+        shouldAnimate: false,
+        motionClass: "transition-none animate-none active:scale-100"
+      };
+    }
+    return {
+      shouldAnimate: true,
+      motionClass: PRESET_CLASSES[motion] || PRESET_CLASSES.fade,
+      config: { preset: motion },
+      dataAttributes: { "data-motion-preset": motion }
+    };
+  }
+  if (typeof motion === "object" && motion !== null) {
+    if (motion.enabled === false || !globalMotion && motion.enabled !== true) {
+      return {
+        shouldAnimate: false,
+        motionClass: "transition-none animate-none active:scale-100",
+        config: motion
+      };
+    }
+    const classes = [];
+    if (motion.preset && PRESET_CLASSES[motion.preset]) {
+      classes.push(PRESET_CLASSES[motion.preset]);
+    }
+    if (motion.className) {
+      classes.push(motion.className);
+    }
+    return {
+      shouldAnimate: true,
+      motionClass: classes.length > 0 ? classes.join(" ") : void 0,
+      config: motion,
+      dataAttributes: {
+        "data-motion-enabled": "true",
+        ...motion.preset ? { "data-motion-preset": motion.preset } : {}
+      }
+    };
+  }
+  if (!globalMotion && motion !== true) {
+    return {
+      shouldAnimate: false,
+      motionClass: "transition-none animate-none active:scale-100"
+    };
+  }
+  return {
+    shouldAnimate: true
+  };
+}
+
+export { resolveMotion };

package/dist/utils/gap.d.ts

@@ -0,0 +1,2 @@
+export declare function formatGap(gap: number | string | undefined): string | undefined;
+//# sourceMappingURL=gap.d.ts.map

package/dist/utils/gap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gap.d.ts","sourceRoot":"","sources":["../../src/utils/gap.ts"],"names":[],"mappings":"AAqCA,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAuB9E"}

package/dist/utils/gap.js

@@ -0,0 +1,55 @@
+const STANDARD_GAP_MAP = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  7: "gap-7",
+  8: "gap-8",
+  9: "gap-9",
+  10: "gap-10",
+  11: "gap-11",
+  12: "gap-12",
+  14: "gap-14",
+  16: "gap-16",
+  20: "gap-20",
+  24: "gap-24",
+  28: "gap-28",
+  32: "gap-32",
+  36: "gap-36",
+  40: "gap-40",
+  44: "gap-44",
+  48: "gap-48",
+  52: "gap-52",
+  56: "gap-56",
+  60: "gap-60",
+  64: "gap-64",
+  72: "gap-72",
+  80: "gap-80",
+  96: "gap-96"
+};
+function formatGap(gap) {
+  if (gap === void 0 || gap === null) return void 0;
+  if (typeof gap === "number") {
+    if (gap in STANDARD_GAP_MAP) {
+      return STANDARD_GAP_MAP[gap];
+    }
+    return `gap-[${gap}px]`;
+  }
+  if (typeof gap === "string") {
+    const trimmed = gap.trim();
+    const num = Number(trimmed);
+    if (!isNaN(num) && num in STANDARD_GAP_MAP) {
+      return STANDARD_GAP_MAP[num];
+    }
+    if (trimmed.startsWith("gap-")) {
+      return trimmed;
+    }
+    return `gap-[${trimmed}]`;
+  }
+  return void 0;
+}
+
+export { formatGap };

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@timmbr/ui",
+  "version": "1.0.0-beta",
+  "description": "High-performance, Next.js App Router-compatible UI design system components for Timmbr",
+  "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",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "default": "./dist/*.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toast": "^1.2.23",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "class-variance-authority": "^0.7.1",
+    "@timmbr/icons": "1.0.0-beta",
+    "@timmbr/hooks": "1.0.0-beta",
+    "@timmbr/theme": "1.0.0-beta",
+    "@timmbr/utils": "1.0.0-beta",
+    "@timmbr/motion": "1.0.0-beta"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@storybook/react": "^10.6.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^26.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.2.0",
+    "vitest": "^3.0.5",
+    "@timmbr/tsconfig": "1.0.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rimraf dist"
+  }
+}