asheeui 2.0.0 → 2.3.0

package/dist/index.css

@@ -1,540 +0,0 @@
-/**
- * AsheeUI global styles.
- * This file defines the base styles, CSS variables, scrollbar styling,
- * and animation keyframes for the AsheeUI component library. It uses
- * Tailwind CSS v4 with the @theme and @layer directives.
- *
- * The styles are organized into layers:
- * - @theme: Defines CSS custom properties mapped to AsheeUI theme variables.
- * - @layer base: Contains global styles, scrollbar customization, and animations.
- *
- * This file should be imported once at the root of your application.
- */
-
-@layer base, utilities;
-
-/* Tell Tailwind v4 to scan asheeui components for utility classes */
-@source "./**/*.{ts,tsx}";
-
-@theme inline {
-  /**
-   * Theme color variables mapped to AsheeUI CSS custom properties.
-   * These are set by the AsheeThemeScript and theme controller.
-   */
-  --color-background: var(--ashee-background);
-  --color-foreground: var(--ashee-foreground);
-  --color-primary: var(--ashee-primary);
-  --color-secondary: var(--ashee-secondary);
-  --color-border: var(--ashee-border);
-  --color-danger: var(--ashee-danger);
-  --color-warning: var(--ashee-warning);
-  --color-success: var(--ashee-success);
-
-  /**
-   * Scrollbar configuration variables.
-   * These are set by the scrollbar configuration.
-   */
-  --scrollbar-width: var(--ashee-scrollbar-width);
-  --scrollbar-radius: var(--ashee-scrollbar-radius);
-  --scrollbar-track-radius: var(--ashee-scrollbar-track-radius);
-  --scrollbar-thumb-border: var(--ashee-scrollbar-thumb-border);
-  --scrollbar-gutter: var(--ashee-scrollbar-gutter);
-}
-
-@layer base {
-  /**
-   * Global HTML and body styles.
-   * Applies the theme background and text colors to the page.
-   */
-  html,
-  body {
-    background-color: var(--ashee-background);
-    color: var(--ashee-foreground);
-  }
-
-  /**
-   * Scrollbar styling for all elements.
-   * Uses both standard scrollbar properties and webkit-prefixed pseudo-elements
-   * for cross-browser compatibility.
-   */
-  html,
-  body,
-  * {
-    scrollbar-color: var(--ashee-scrollbar-thumb) var(--ashee-scrollbar-track);
-    scrollbar-width: var(--ashee-scrollbar-fallback-width, thin);
-    scrollbar-gutter: var(--ashee-scrollbar-gutter, stable);
-  }
-
-  ::-webkit-scrollbar {
-    width: var(--ashee-scrollbar-width);
-    height: var(--ashee-scrollbar-width);
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--ashee-scrollbar-track);
-    border-radius: var(
-      --ashee-scrollbar-track-radius,
-      var(--ashee-scrollbar-radius)
-    );
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--ashee-scrollbar-thumb);
-    border-radius: var(--ashee-scrollbar-radius);
-    border: var(--ashee-scrollbar-thumb-border) solid transparent;
-    background-clip: padding-box;
-  }
-
-  /**
-   * Remove spinner buttons from number inputs.
-   */
-  input[type="number"]::-webkit-outer-spin-button,
-  input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /**
-   * Disabled state styling for form elements.
-   */
-  input:disabled,
-  textarea:disabled,
-  select:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-    background-color: #f5f5f521;
-  }
-
-  /**
-   * Utility class to hide scrollbars while maintaining scrollability.
-   */
-  .scrollable-hidden::-webkit-scrollbar {
-    display: none;
-  }
-  .scrollable-hidden {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  /**
-   * Utility class to hide scrollbars completely and eliminate scrollbar spacing
-   * across all browsers while preserving scrollability.
-   */
-  .scrollbar-hide {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    scrollbar-gutter: auto;
-  }
-
-  .scrollbar-hide::-webkit-scrollbar {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-
-  .scrollbar-hide::-webkit-scrollbar-track,
-  .scrollbar-hide::-webkit-scrollbar-thumb {
-    background: transparent;
-    border: none;
-  }
-
-  /* ─── Modal Animations ────────────────────────────────────────────────────── */
-
-  @keyframes modalPopIn {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes modalPopOut {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-
-  @keyframes backdropFadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes backdropFadeOut {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  .animate-modal-in {
-    animation: modalPopIn 200ms ease-out forwards;
-  }
-
-  .animate-modal-out {
-    animation: modalPopOut 150ms ease-in forwards;
-  }
-
-  .animate-backdrop-in {
-    animation: backdropFadeIn 150ms ease-out forwards;
-  }
-
-  .animate-backdrop-out {
-    animation: backdropFadeOut 150ms ease-in forwards;
-  }
-
-  /* ─── Drawer Animations ──────────────────────────────────────────────────── */
-
-  /* Right */
-  @keyframes drawerSlideRightOpen {
-    from {
-      transform: translateX(100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes drawerSlideRightClosed {
-    from {
-      transform: translateX(0);
-      opacity: 1;
-    }
-    to {
-      transform: translateX(100%);
-      opacity: 0;
-    }
-  }
-
-  /* Left */
-  @keyframes drawerSlideLeftOpen {
-    from {
-      transform: translateX(-100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes drawerSlideLeftClosed {
-    from {
-      transform: translateX(0);
-      opacity: 1;
-    }
-    to {
-      transform: translateX(-100%);
-      opacity: 0;
-    }
-  }
-
-  /* Top */
-  @keyframes drawerSlideTopOpen {
-    from {
-      transform: translateY(-100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes drawerSlideTopClosed {
-    from {
-      transform: translateY(0);
-      opacity: 1;
-    }
-    to {
-      transform: translateY(-100%);
-      opacity: 0;
-    }
-  }
-
-  /* Bottom */
-  @keyframes drawerSlideBottomOpen {
-    from {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes drawerSlideBottomClosed {
-    from {
-      transform: translateY(0);
-      opacity: 1;
-    }
-    to {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-  }
-
-  /* Backdrop animation */
-  @keyframes drawerBackdropIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes drawerBackdropOut {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  .drawer-slide-right-open {
-    animation: drawerSlideRightOpen 250ms ease-out forwards;
-  }
-
-  .drawer-slide-right-closed {
-    animation: drawerSlideRightClosed 250ms ease-in forwards;
-  }
-
-  .drawer-slide-left-open {
-    animation: drawerSlideLeftOpen 250ms ease-out forwards;
-  }
-
-  .drawer-slide-left-closed {
-    animation: drawerSlideLeftClosed 250ms ease-in forwards;
-  }
-
-  .drawer-slide-top-open {
-    animation: drawerSlideTopOpen 250ms ease-out forwards;
-  }
-
-  .drawer-slide-top-closed {
-    animation: drawerSlideTopClosed 250ms ease-in forwards;
-  }
-
-  .drawer-slide-bottom-open {
-    animation: drawerSlideBottomOpen 250ms ease-out forwards;
-  }
-
-  .drawer-slide-bottom-closed {
-    animation: drawerSlideBottomClosed 250ms ease-in forwards;
-  }
-
-  .drawer-backdrop-in {
-    animation: drawerBackdropIn 250ms ease-out forwards;
-  }
-
-  .drawer-backdrop-out {
-    animation: drawerBackdropOut 250ms ease-in forwards;
-  }
-
-  /* ─── Toast Animations ────────────────────────────────────────────────────── */
-
-  /* Top Right */
-  @keyframes toastEnterTopRight {
-    from {
-      transform: translateX(100%) scale(0.95);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes toastExitTopRight {
-    from {
-      transform: translateX(0) scale(1);
-      opacity: 1;
-    }
-    to {
-      transform: translateX(100%) scale(0.95);
-      opacity: 0;
-    }
-  }
-
-  /* Bottom Right */
-  @keyframes toastEnterBottomRight {
-    from {
-      transform: translateX(100%) scale(0.95);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes toastExitBottomRight {
-    from {
-      transform: translateX(0) scale(1);
-      opacity: 1;
-    }
-    to {
-      transform: translateX(100%) scale(0.95);
-      opacity: 0;
-    }
-  }
-
-  /* Top Left */
-  @keyframes toastEnterTopLeft {
-    from {
-      transform: translateX(-100%) scale(0.95);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes toastExitTopLeft {
-    from {
-      transform: translateX(0) scale(1);
-      opacity: 1;
-    }
-    to {
-      transform: translateX(-100%) scale(0.95);
-      opacity: 0;
-    }
-  }
-
-  /* Bottom Left */
-  @keyframes toastEnterBottomLeft {
-    from {
-      transform: translateX(-100%) scale(0.95);
-      opacity: 0;
-    }
-    to {
-      transform: translateX(0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes toastExitBottomLeft {
-    from {
-      transform: translateX(0) scale(1);
-      opacity: 1;
-    }
-    to {
-      transform: translateX(-100%) scale(0.95);
-      opacity: 0;
-    }
-  }
-
-  /* Top Center */
-  @keyframes toastEnterTopCenter {
-    from {
-      transform: translateY(-100%) scale(0.95);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes toastExitTopCenter {
-    from {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-    to {
-      transform: translateY(-100%) scale(0.95);
-      opacity: 0;
-    }
-  }
-
-  /* Bottom Center */
-  @keyframes toastEnterBottomCenter {
-    from {
-      transform: translateY(100%) scale(0.95);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-  }
-
-  @keyframes toastExitBottomCenter {
-    from {
-      transform: translateY(0) scale(1);
-      opacity: 1;
-    }
-    to {
-      transform: translateY(100%) scale(0.95);
-      opacity: 0;
-    }
-  }
-
-  /* Toast Animation Classes */
-  .toast-enter-top-right {
-    animation: toastEnterTopRight 200ms ease-out forwards;
-  }
-
-  .toast-exit-top-right {
-    animation: toastExitTopRight 150ms ease-in forwards;
-  }
-
-  .toast-enter-bottom-right {
-    animation: toastEnterBottomRight 200ms ease-out forwards;
-  }
-
-  .toast-exit-bottom-right {
-    animation: toastExitBottomRight 150ms ease-in forwards;
-  }
-
-  .toast-enter-top-left {
-    animation: toastEnterTopLeft 200ms ease-out forwards;
-  }
-
-  .toast-exit-top-left {
-    animation: toastExitTopLeft 150ms ease-in forwards;
-  }
-
-  .toast-enter-bottom-left {
-    animation: toastEnterBottomLeft 200ms ease-out forwards;
-  }
-
-  .toast-exit-bottom-left {
-    animation: toastExitBottomLeft 150ms ease-in forwards;
-  }
-
-  .toast-enter-top-center {
-    animation: toastEnterTopCenter 200ms ease-out forwards;
-  }
-
-  .toast-exit-top-center {
-    animation: toastExitTopCenter 150ms ease-in forwards;
-  }
-
-  .toast-enter-bottom-center {
-    animation: toastEnterBottomCenter 200ms ease-out forwards;
-  }
-
-  .toast-exit-bottom-center {
-    animation: toastExitBottomCenter 150ms ease-in forwards;
-  }
-}

package/dist/libs/context.d.ts

@@ -1,55 +0,0 @@
-import { Config } from '../config/config';
-/**
- * React context for the AsheeUI configuration.
- * Holds the global Config object that provides theme settings,
- * component defaults, and other library-wide configuration.
- * This context is populated by the AsheeUIProvider component.
- */
-export declare const AsheeConfigContext: import('react').Context<Config | null>;
-/**
- * Hook that returns the AsheeUI configuration from context.
- * Must be used within a component tree wrapped by AsheeUIProvider.
- * Throws an error if used outside of the provider.
- *
- * @returns The current AsheeUI Config object.
- *
- * @throws {Error} When used outside of an AsheeUIProvider.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const config = useAsheeConfig();
- *   const theme = config.theme;
- *   // Use the configuration...
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Wrapping the app root
- * function App() {
- *   return (
- *     <AsheeUIProvider config={myConfig}>
- *       <MyComponent />
- *     </AsheeUIProvider>
- *   );
- * }
- * ```
- */
-export declare function useAsheeConfig(): Config;
-/**
- * Alias for {@link useAsheeConfig}, exported from the `asheeui` root.
- * Provides a shorter name for convenience when importing from the main package.
- *
- * @example
- * ```tsx
- * import { useAshee } from 'asheeui';
- *
- * function MyComponent() {
- *   const config = useAshee();
- *   // Same as useAsheeConfig()
- * }
- * ```
- */
-export declare const useAshee: typeof useAsheeConfig;
-//# sourceMappingURL=context.d.ts.map

package/dist/libs/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/libs/context.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE/C;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,wCAAqC,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAQvC;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,uBAAiB,CAAC"}

package/dist/libs/context.js

@@ -1,12 +0,0 @@
-"use client";
-"use client";
-import { createContext as e, useContext as t } from "react";
-//#region src/libs/context.tsx
-var n = e(null);
-function r() {
-	let e = t(n);
-	if (!e) throw Error("useAsheeConfig must be used within an AsheeUIProvider - wrap your app root with <AsheeUIProvider>.");
-	return e;
-}
-//#endregion
-export { n as AsheeConfigContext, r as useAsheeConfig };

package/dist/libs/index.js

@@ -1,7 +0,0 @@
-export * from "./context.js";
-export * from "./registry.js";
-export * from "./use-body-scroll-lock.js";
-export * from "./use-dialog-overlay.js";
-export * from "./use-floating-z-index.js";
-export * from "./use-isomorphic-layout-effect.js";
-export * from "./use-prefers-reduced-motion.js";

package/dist/libs/registry.d.ts

@@ -1,70 +0,0 @@
-/**
- * Component configuration registry for AsheeUI.
- * This file provides the central registry system for component-level default
- * configurations. Components can register their default props here, which can
- * then be overridden by theme-level defaults or instance-level props.
- * The registry uses a map-based approach with TypeScript type augmentation
- * to provide type safety for component-specific configurations.
- */
-export interface ComponentTypeConfigRegistry {
-}
-/**
- * The complete registry of component configurations.
- * This type is augmented by individual component config modules
- * (see src/components/*-config.ts) to include their specific config types.
- */
-export type ComponentConfigRegistry = ComponentTypeConfigRegistry;
-/**
- * Registers default configuration for a component.
- * This is typically called from component config modules during initialization.
- * The registered defaults are used as fallback values when component-level
- * props are not provided.
- *
- * @param name - The component identifier (e.g., "Button", "Input").
- * @param config - The default configuration object for the component.
- *
- * @example
- * ```tsx
- * registerComponentDefaults('Button', {
- *   variant: 'solid',
- *   color: 'primary',
- *   size: 'md',
- *   radius: 'lg'
- * });
- * ```
- *
- * @see ComponentConfigRegistry - The augmented type that provides type safety.
- */
-export declare function registerComponentDefaults<K extends keyof ComponentConfigRegistry>(name: K, config: ComponentConfigRegistry[K]): void;
-/**
- * Retrieves the default configuration for a component.
- * Returns undefined if no defaults have been registered for the component.
- *
- * @param name - The component identifier (e.g., "Button", "Input").
- * @returns The default configuration object for the component, or undefined.
- *
- * @example
- * ```tsx
- * const defaults = getComponentDefaults('Button');
- * if (defaults) {
- *   // Use default values as fallbacks
- *   const variant = props.variant ?? defaults.variant;
- * }
- * ```
- */
-export declare function getComponentDefaults<K extends keyof ComponentConfigRegistry>(name: K): ComponentConfigRegistry[K] | undefined;
-/**
- * Retrieves all registered component defaults.
- * Returns a partial registry object containing all defaults that have
- * been registered across all components.
- *
- * @returns A partial registry containing all component defaults.
- *
- * @example
- * ```tsx
- * const allDefaults = getAllComponentDefaults();
- * // Returns: { Button: { variant: 'solid', ... }, Input: { size: 'md', ... } }
- * ```
- */
-export declare function getAllComponentDefaults(): Partial<ComponentConfigRegistry>;
-//# sourceMappingURL=registry.d.ts.map

package/dist/libs/registry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../src/libs/registry.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,MAAM,WAAW,2BAA2B;CAAG;AAE/C;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,2BAA2B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,yBAAyB,CACvC,CAAC,SAAS,MAAM,uBAAuB,EACvC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,QAE5C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,MAAM,uBAAuB,EAC1E,IAAI,EAAE,CAAC,GACN,uBAAuB,CAAC,CAAC,CAAC,GAAG,SAAS,CAIxC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,IAAI,OAAO,CAAC,uBAAuB,CAAC,CAM1E"}

package/dist/libs/registry.js

@@ -1,13 +0,0 @@
-"use client";
-//#region src/libs/registry.ts
-var e = /* @__PURE__ */ new Map();
-function t(t, n) {
-	e.set(t, n);
-}
-function n() {
-	let t = {};
-	for (let [n, r] of e.entries()) t[n] = r;
-	return t;
-}
-//#endregion
-export { n as getAllComponentDefaults, t as registerComponentDefaults };