218887c1a3
Re-scoped from @lilith/ui-zname to @cocotte/ui-zname. In-set cross-package deps re-pointed to @cocotte; out-of-set @lilith deps preserved (same Verdaccio). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
43 lines
No EOL
1.2 KiB
TypeScript
43 lines
No EOL
1.2 KiB
TypeScript
/**
|
|
* React implementation of ZName component and useZName hook.
|
|
*/
|
|
import type React from 'react';
|
|
import type { CSSProperties, ReactNode } from 'react';
|
|
import { ZINDEX_LAYERS, type ZIndexLayerName } from './constants';
|
|
/**
|
|
* Props for the React ZName component.
|
|
*/
|
|
interface ReactZNameProps {
|
|
/** The z-index layer to apply */
|
|
name: ZIndexLayerName;
|
|
/** Child content to wrap */
|
|
children: ReactNode;
|
|
/** Additional CSS styles */
|
|
style?: CSSProperties;
|
|
/** Override z-index value (use sparingly) */
|
|
zIndex?: number;
|
|
}
|
|
/**
|
|
* Hook to get z-index value for a layer name.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* const modalZIndex = useZName('modal'); // 2000
|
|
* const ageGateZIndex = useZName('high-priority'); // 9000
|
|
* ```
|
|
*/
|
|
export declare function useZName(layer: ZIndexLayerName): number;
|
|
/**
|
|
* Component that wraps children in a div with the specified z-index layer.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <ZName name="modal" style={{ background: 'white' }}>
|
|
* <ModalContent />
|
|
* </ZName>
|
|
* ```
|
|
*/
|
|
export declare const ZName: React.FC<ReactZNameProps>;
|
|
export { ZINDEX_LAYERS, type ZIndexLayerName };
|
|
export default ZName;
|
|
//# sourceMappingURL=react.d.ts.map
|