packages/ui-zname
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(@cocotte/ui-zname): extract UI theme package to @ct/@packages

Browse source 
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>
This commit is contained in:
Natalie 2026-06-29 13:04:11 -04:00
commit 218887c1a3
15 changed files with 726 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
node_modules/
*.log
.DS_Store

235
README.md Normal file
View file

@ -0,0 +1,235 @@
# @lilith/zname
A TypeScript package for managing z-index values in React and React Native applications.
## Z-Index Layers
| Layer Name | Z-Index Value | Use Case |
|-----------------|---------------|--------------------------------------------------|
| `surface` | 0 | Base content, backgrounds |
| `elevated` | 10 | Slightly raised elements (resize handles, hover) |
| `navigation` | 100 | Headers, sidebars, persistent navigation |
| `overlay` | 1000 | Dropdowns, tooltips, popovers |
| `modal` | 2000 | Modal dialogs, lightboxes |
| `alert` | 3000 | Toast notifications, alerts |
| `system` | 4000 | Standard system-level UI |
| `high-priority` | 9000 | Critical system UI (age gates, loading screens) |
## Visual Stack Diagram
```
┌─────────────────────────────────────┐
│ high-priority (9000) │ ← Age gates, critical system UI
├─────────────────────────────────────┤
│ system (4000) │ ← Standard system UI
├─────────────────────────────────────┤
│ alert (3000) │ ← Notifications, toasts
├─────────────────────────────────────┤
│ modal (2000) │ ← Modal dialogs
├─────────────────────────────────────┤
│ overlay (1000) │ ← Dropdowns, tooltips
├─────────────────────────────────────┤
│ navigation (100) │ ← Headers, sidebars
├─────────────────────────────────────┤
│ elevated (10) │ ← Resize handles, hover effects
├─────────────────────────────────────┤
│ surface (0) │ ← Base content
└─────────────────────────────────────┘
```
## Installation
```bash
pnpm add @lilith/zname
```
## Usage
### Option 1: useZName Hook (Recommended)
```tsx
import { useZName, ZINDEX_LAYERS } from '@lilith/zname';
function Modal() {
const zIndex = useZName('modal'); // Returns 2000
return (
<div style={{ zIndex, position: 'fixed' }}>
Modal content
</div>
);
}
```
### Option 2: Direct Layer Access (Styled Components)
```tsx
import { ZINDEX_LAYERS } from '@lilith/zname';
import styled from 'styled-components';
const Header = styled.header`
position: fixed;
z-index: ${ZINDEX_LAYERS.navigation}; // 100
`;
const Modal = styled.div`
position: fixed;
z-index: ${ZINDEX_LAYERS.modal}; // 2000
`;
```
### Option 3: ZName Component
```tsx
import ZName from '@lilith/zname';
function App() {
return (
<ZName name="modal" style={{ background: 'white' }}>
<p>This content has z-index: 2000</p>
</ZName>
);
}
```
### Option 4: Custom Override (Use Sparingly)
```tsx
import ZName from '@lilith/zname';
function SpecialModal() {
return (
<ZName name="modal" zIndex={2500}>
<div>Custom z-index modal</div>
</ZName>
);
}
```
### React Native
```tsx
import { useZNameRN, ZName } from '@lilith/zname/react-native';
function Modal() {
const zIndex = useZNameRN('modal'); // Returns 2000
return (
<View style={{ zIndex, elevation: zIndex }}>
<Text>Modal content</Text>
</View>
);
}
```
## API Reference
### ZINDEX_LAYERS
```tsx
const ZINDEX_LAYERS = {
surface: 0,
elevated: 10,
navigation: 100,
overlay: 1000,
modal: 2000,
alert: 3000,
system: 4000,
'high-priority': 9000,
} as const;
```
### useZName(layer)
Returns the z-index value for a layer name.
```tsx
function useZName(layer: ZIndexLayerName): number;
```
### useZNameRN(layer)
React Native version of useZName.
```tsx
function useZNameRN(layer: ZIndexLayerName): number;
```
### ZIndexLayerName Type
```tsx
type ZIndexLayerName =
| 'surface'
| 'elevated'
| 'navigation'
| 'overlay'
| 'modal'
| 'alert'
| 'system'
| 'high-priority';
```
### ZName Component Props
```tsx
interface ZNameProps {
name: ZIndexLayerName;
children: React.ReactNode;
style?: CSSProperties | ViewStyle;
zIndex?: number; // Override value
}
```
## Migration Guide
### From Hardcoded Values
```tsx
// Before
const style = { zIndex: 1000 };
// After
import { useZName } from '@lilith/zname';
const zIndex = useZName('overlay'); // 1000
```
### Common Mappings
| Old Value | New Layer |
|-------------|-----------------|
| 1-10 | `elevated` |
| 99-100 | `navigation` |
| 999-1000 | `overlay` |
| 1000-2000 | `modal` |
| 9999-10000 | `high-priority` |
## Best Practices
1. **Use semantic layers**: Choose layers based on purpose, not just value.
2. **Avoid overrides**: Only use `zIndex` prop when absolutely necessary.
3. **Internal layering**: For z-index within a component (1, 2, 3), keep hardcoded values - zname is for cross-component stacking.
4. **Age gates**: Always use `high-priority` for legal/compliance UI.
## TypeScript Support
Full TypeScript support with strict types for layer names and values.
```tsx
import type { ZIndexLayerName, ZIndexLayers } from '@lilith/zname';
```
## Changelog
### v1.1.0
- **Added**: `elevated` layer (10) for slightly raised elements
- **Added**: `navigation` layer (100) for headers/sidebars
- **Added**: `high-priority` layer (9000) for critical system UI
- **Added**: `useZName` and `useZNameRN` hooks
- **Added**: `getZIndex()` helper function
- **Fixed**: Layer names now match documented API
- **Changed**: `surface` now starts at 0 (was 1)
### v1.0.0
- Initial release with 5 layers

229
dist/constants.d.ts vendored Normal file
View file

@ -0,0 +1,229 @@
/**
* @ui/zname - Z-Index Layer Management System
*
* Provides standardized z-index values for consistent stacking across the platform.
* Use these layers instead of hardcoded z-index values.
*
* Three layer systems are provided:
* 1. ZINDEX_LAYERS - Global layers for cross-component stacking
* 2. ZINDEX_LOCAL - Local layers for internal component hierarchy
* 3. ZINDEX_STICKY - Specialized layers for sticky/table elements
* 4. ZINDEX_FAB - Specialized layers for FAB components
*/
/**
* Available z-index layer names.
* Ordered from lowest to highest stacking priority.
*/
export type ZIndexLayerName = 'surface' | 'elevated' | 'navigation' | 'overlay' | 'modal' | 'alert' | 'system' | 'high-priority';
/**
* Z-index layer values mapped by name.
*
* Layer stack (bottom to top):
* - surface (0): Base content, backgrounds
* - elevated (10): Slightly raised elements (resize handles, hover effects)
* - navigation (100): Headers, sidebars, persistent navigation
* - overlay (1000): Dropdowns, tooltips, popovers
* - modal (2000): Modal dialogs, lightboxes
* - alert (3000): Toast notifications, alerts
* - system (4000): Standard system-level UI
* - high-priority (9000): Critical system UI (age gates, loading overlays)
*/
export declare const ZINDEX_LAYERS: {
readonly surface: 0;
readonly elevated: 10;
readonly navigation: 100;
readonly overlay: 1000;
readonly modal: 2000;
readonly alert: 3000;
readonly system: 4000;
readonly 'high-priority': 9000;
};
/**
* Local z-index layer names for internal component hierarchy.
* Use these within isolated stacking contexts (components with position: relative).
*/
export type ZIndexLocalName = 'base' | 'content' | 'raised' | 'floating' | 'sticky' | 'hover' | 'active' | 'tooltip';
/**
* Local z-index values for internal component stacking.
*
* Use these within components that create their own stacking context.
* These values are intentionally low (0-50) for local hierarchy.
*
* @example
* ```tsx
* const Background = styled.div`
* z-index: ${ZINDEX_LOCAL.base};
* `;
* const Content = styled.div`
* z-index: ${ZINDEX_LOCAL.content};
* `;
* const Tooltip = styled.div`
* z-index: ${ZINDEX_LOCAL.tooltip};
* `;
* ```
*/
export declare const ZINDEX_LOCAL: {
/** Background layer (0) */
readonly base: 0;
/** Primary content above background (1) */
readonly content: 1;
/** Slightly raised elements (2) */
readonly raised: 2;
/** Floating elements within component (5) */
readonly floating: 5;
/** Sticky headers/elements (10) */
readonly sticky: 10;
/** Hover states, highlighted items (20) */
readonly hover: 20;
/** Active/selected states (30) */
readonly active: 30;
/** Component-local tooltips/popovers (50) */
readonly tooltip: 50;
};
/**
* Type representing the local z-index values object.
*/
export type ZIndexLocal = typeof ZINDEX_LOCAL;
/**
* Sticky z-index layer names for table/grid components.
*/
export type ZIndexStickyName = 'cell' | 'row' | 'column' | 'header' | 'corner';
/**
* Specialized z-index values for sticky table/grid elements.
*
* These handle the complex stacking needed for sticky headers,
* columns, and corner cells in data tables.
*
* @example
* ```tsx
* const StickyHeader = styled.th`
* position: sticky;
* top: 0;
* z-index: ${ZINDEX_STICKY.header};
* `;
* const StickyColumn = styled.td`
* position: sticky;
* left: 0;
* z-index: ${ZINDEX_STICKY.column};
* `;
* const StickyCorner = styled.th`
* position: sticky;
* top: 0;
* left: 0;
* z-index: ${ZINDEX_STICKY.corner};
* `;
* ```
*/
export declare const ZINDEX_STICKY: {
/** Regular cells (15) */
readonly cell: 15;
/** Sticky row elements (19) */
readonly row: 19;
/** Sticky header row (20) */
readonly header: 20;
/** Sticky column cells (25) */
readonly column: 25;
/** Sticky corner (header + column intersection) (30) */
readonly corner: 30;
};
/**
* Type representing the sticky z-index values object.
*/
export type ZIndexSticky = typeof ZINDEX_STICKY;
/**
* FAB z-index layer names for the FAB component system.
*/
export type ZIndexFabName = 'backdrop' | 'container' | 'trigger' | 'menu' | 'item';
/**
* Specialized z-index values for FAB (Floating Action Button) components.
*
* These are positioned relative to the navigation layer (100) to ensure
* FABs stack correctly with navigation elements.
*
* @example
* ```tsx
* const FABBackdrop = styled.div`
* z-index: ${ZINDEX_FAB.backdrop};
* `;
* const FABButton = styled.button`
* z-index: ${ZINDEX_FAB.trigger};
* `;
* const FABMenuItem = styled.button`
* z-index: ${ZINDEX_FAB.item};
* `;
* ```
*/
export declare const ZINDEX_FAB: {
/** FAB backdrop/scrim (99) */
readonly backdrop: number;
/** FAB container (101) */
readonly container: number;
/** FAB main trigger button (110) */
readonly trigger: number;
/** FAB expanded menu (112) */
readonly menu: number;
/** FAB menu items (115) */
readonly item: number;
};
/**
* Type representing the FAB z-index values object.
*/
export type ZIndexFab = typeof ZINDEX_FAB;
/**
* Type representing the z-index values object.
*/
export type ZIndexLayers = typeof ZINDEX_LAYERS;
/**
* Get z-index value for a layer name.
*/
export declare function getZIndex(layer: ZIndexLayerName): number;
/**
* @deprecated Use ZIndexLayerName instead
*/
export type ZIndexName = ZIndexLayerName;
/**
* @deprecated Use ZINDEX_LAYERS instead
*/
export declare const Z_INDEX_VALUES: {
readonly surface: 0;
readonly elevated: 10;
readonly navigation: 100;
readonly overlay: 1000;
readonly modal: 2000;
readonly alert: 3000;
readonly system: 4000;
readonly 'high-priority': 9000;
};
/**
* @deprecated Use ZINDEX_LAYERS.surface instead
*/
export declare const SURFACE_Z_INDEX: 0;
/**
* @deprecated Use ZINDEX_LAYERS.elevated instead
*/
export declare const ELEVATED_Z_INDEX: 10;
/**
* @deprecated Use ZINDEX_LAYERS.navigation instead
*/
export declare const NAVIGATION_Z_INDEX: 100;
/**
* @deprecated Use ZINDEX_LAYERS.overlay instead
*/
export declare const OVERLAY_Z_INDEX: 1000;
/**
* @deprecated Use ZINDEX_LAYERS.modal instead
*/
export declare const MODAL_Z_INDEX: 2000;
/**
* @deprecated Use ZINDEX_LAYERS.alert instead
*/
export declare const ALERT_Z_INDEX: 3000;
/**
* @deprecated Use ZINDEX_LAYERS.system instead
*/
export declare const SYSTEM_Z_INDEX: 4000;
/**
* @deprecated Use ZINDEX_LAYERS['high-priority'] instead
*/
export declare const HIGH_PRIORITY_Z_INDEX: 9000;
//# sourceMappingURL=constants.d.ts.map

1
dist/constants.d.ts.map vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH;;;GAGG;AACH,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,UAAU,GACV,YAAY,GACZ,SAAS,GACT,OAAO,GACP,OAAO,GACP,QAAQ,GACR,eAAe,CAAC;AAEpB;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa;;;;;;;;;CAShB,CAAC;AAMX;;;GAGG;AACH,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,SAAS,GACT,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,OAAO,GACP,QAAQ,GACR,SAAS,CAAC;AAEd;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY;IACvB,2BAA2B;;IAE3B,2CAA2C;;IAE3C,mCAAmC;;IAEnC,6CAA6C;;IAE7C,mCAAmC;;IAEnC,2CAA2C;;IAE3C,kCAAkC;;IAElC,6CAA6C;;CAErC,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,YAAY,CAAC;AAM9C;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,MAAM,GACN,KAAK,GACL,QAAQ,GACR,QAAQ,GACR,QAAQ,CAAC;AAEb;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,aAAa;IACxB,yBAAyB;;IAEzB,+BAA+B;;IAE/B,6BAA6B;;IAE7B,+BAA+B;;IAE/B,wDAAwD;;CAEhD,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,aAAa,CAAC;AAMhD;;GAEG;AACH,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,WAAW,GACX,SAAS,GACT,MAAM,GACN,MAAM,CAAC;AAEX;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU;IACrB,8BAA8B;;IAE9B,0BAA0B;;IAE1B,oCAAoC;;IAEpC,8BAA8B;;IAE9B,2BAA2B;;CAEnB,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,UAAU,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,aAAa,CAAC;AAEhD;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAExD;AAMD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;CAAgB,CAAC;AAE5C;;GAEG;AACH,eAAO,MAAM,eAAe,GAAwB,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,gBAAgB,IAAyB,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,kBAAkB,KAA2B,CAAC;AAE3D;;GAEG;AACH,eAAO,MAAM,eAAe,MAAwB,CAAC;AAErD;;GAEG;AACH,eAAO,MAAM,aAAa,MAAsB,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,aAAa,MAAsB,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,cAAc,MAAuB,CAAC;AAEnD;;GAEG;AACH,eAAO,MAAM,qBAAqB,MAAiC,CAAC"}

14
dist/index.d.ts vendored Normal file
View file

@ -0,0 +1,14 @@
/**
* @ui/zname - Z-Index Layer Management System
*
* Main entry point - exports the React (web) version by default.
* For React Native, import from '@ui/zname/react-native'.
*/
export { default } from './react';
export { ZName } from './react';
export { ZINDEX_LAYERS, getZIndex, type ZIndexLayerName, type ZIndexLayers, ZINDEX_LOCAL, type ZIndexLocalName, type ZIndexLocal, ZINDEX_STICKY, type ZIndexStickyName, type ZIndexSticky, ZINDEX_FAB, type ZIndexFabName, type ZIndexFab, } from './constants';
export { useZName } from './react';
export type { BaseZNameProps, ZIndexValues } from './types';
export { Z_INDEX_VALUES, SURFACE_Z_INDEX, ELEVATED_Z_INDEX, NAVIGATION_Z_INDEX, OVERLAY_Z_INDEX, MODAL_Z_INDEX, ALERT_Z_INDEX, SYSTEM_Z_INDEX, HIGH_PRIORITY_Z_INDEX, type ZIndexName, } from './constants';
export type { ZNameProps } from './types';
//# sourceMappingURL=index.d.ts.map

1
dist/index.d.ts.map vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAEL,aAAa,EACb,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,YAAY,EAEjB,YAAY,EACZ,KAAK,eAAe,EACpB,KAAK,WAAW,EAEhB,aAAa,EACb,KAAK,gBAAgB,EACrB,KAAK,YAAY,EAEjB,UAAU,EACV,KAAK,aAAa,EAClB,KAAK,SAAS,GACf,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAGnC,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAM5D,OAAO,EAEL,cAAc,EAEd,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACb,aAAa,EACb,cAAc,EACd,qBAAqB,EAErB,KAAK,UAAU,GAChB,MAAM,aAAa,CAAC;AAGrB,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

111
dist/index.js vendored Normal file
View file

@ -0,0 +1,111 @@
// src/constants.ts
var ZINDEX_LAYERS = {
surface: 0,
elevated: 10,
navigation: 100,
overlay: 1e3,
modal: 2e3,
alert: 3e3,
system: 4e3,
"high-priority": 9e3
};
var ZINDEX_LOCAL = {
/** Background layer (0) */
base: 0,
/** Primary content above background (1) */
content: 1,
/** Slightly raised elements (2) */
raised: 2,
/** Floating elements within component (5) */
floating: 5,
/** Sticky headers/elements (10) */
sticky: 10,
/** Hover states, highlighted items (20) */
hover: 20,
/** Active/selected states (30) */
active: 30,
/** Component-local tooltips/popovers (50) */
tooltip: 50
};
var ZINDEX_STICKY = {
/** Regular cells (15) */
cell: 15,
/** Sticky row elements (19) */
row: 19,
/** Sticky header row (20) */
header: 20,
/** Sticky column cells (25) */
column: 25,
/** Sticky corner (header + column intersection) (30) */
corner: 30
};
var ZINDEX_FAB = {
/** FAB backdrop/scrim (99) */
backdrop: ZINDEX_LAYERS.navigation - 1,
/** FAB container (101) */
container: ZINDEX_LAYERS.navigation + 1,
/** FAB main trigger button (110) */
trigger: ZINDEX_LAYERS.navigation + 10,
/** FAB expanded menu (112) */
menu: ZINDEX_LAYERS.navigation + 12,
/** FAB menu items (115) */
item: ZINDEX_LAYERS.navigation + 15
};
function getZIndex(layer) {
return ZINDEX_LAYERS[layer];
}
var Z_INDEX_VALUES = ZINDEX_LAYERS;
var SURFACE_Z_INDEX = ZINDEX_LAYERS.surface;
var ELEVATED_Z_INDEX = ZINDEX_LAYERS.elevated;
var NAVIGATION_Z_INDEX = ZINDEX_LAYERS.navigation;
var OVERLAY_Z_INDEX = ZINDEX_LAYERS.overlay;
var MODAL_Z_INDEX = ZINDEX_LAYERS.modal;
var ALERT_Z_INDEX = ZINDEX_LAYERS.alert;
var SYSTEM_Z_INDEX = ZINDEX_LAYERS.system;
var HIGH_PRIORITY_Z_INDEX = ZINDEX_LAYERS["high-priority"];
// src/react.tsx
import { jsx } from "react/jsx-runtime";
function useZName(layer) {
return ZINDEX_LAYERS[layer];
}
var ZName = ({
name,
children,
style,
zIndex: customZIndex
}) => {
const zIndex = customZIndex ?? ZINDEX_LAYERS[name];
return /* @__PURE__ */ jsx(
"div",
{
style: {
position: "relative",
zIndex,
...style
},
children
}
);
};
var react_default = ZName;
export {
ALERT_Z_INDEX,
ELEVATED_Z_INDEX,
HIGH_PRIORITY_Z_INDEX,
MODAL_Z_INDEX,
NAVIGATION_Z_INDEX,
OVERLAY_Z_INDEX,
SURFACE_Z_INDEX,
SYSTEM_Z_INDEX,
ZINDEX_FAB,
ZINDEX_LAYERS,
ZINDEX_LOCAL,
ZINDEX_STICKY,
ZName,
Z_INDEX_VALUES,
react_default as default,
getZIndex,
useZName
};
//# sourceMappingURL=index.js.map

1
dist/index.js.map vendored Normal file
View file

File diff suppressed because one or more lines are too long

43
dist/react.d.ts vendored Normal file
View file

@ -0,0 +1,43 @@
/**
* 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

1
dist/react.d.ts.map vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,aAAa,CAAC;AAElE;;GAEG;AACH,UAAU,eAAe;IACvB,iCAAiC;IACjC,IAAI,EAAE,eAAe,CAAC;IACtB,4BAA4B;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAEvD;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmB3C,CAAC;AAGF,OAAO,EAAE,aAAa,EAAE,KAAK,eAAe,EAAE,CAAC;AAE/C,eAAe,KAAK,CAAC"}

42
dist/types.d.ts vendored Normal file
View file

@ -0,0 +1,42 @@
/**
* Core types for @ui/zname package.
* Platform-agnostic types that work for both React and React Native.
*/
import type { ZIndexLayerName, ZIndexLayers } from './constants';
/**
* Props for the ZName wrapper component.
* Generic to support both React and React Native.
*/
export interface BaseZNameProps {
/** The z-index layer to apply */
name: ZIndexLayerName;
/** Child content to wrap */
children: unknown;
/** Additional styles to apply */
style?: Record<string, unknown>;
/** Override z-index value (use sparingly) */
zIndex?: number;
}
/**
* Interface matching the ZINDEX_LAYERS object structure.
*/
export interface ZIndexValues {
surface: number;
elevated: number;
navigation: number;
overlay: number;
modal: number;
alert: number;
system: number;
'high-priority': number;
}
export type { ZIndexLayerName, ZIndexLayers };
/**
* @deprecated Use BaseZNameProps instead
*/
export type ZNameProps = BaseZNameProps;
/**
* @deprecated Use ZIndexLayerName instead
*/
export type ZIndexName = ZIndexLayerName;
//# sourceMappingURL=types.d.ts.map

1
dist/types.d.ts.map vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEjE;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,EAAE,eAAe,CAAC;IACtB,4BAA4B;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,CAAC;CACzB;AAGD,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC;AAE9C;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC;AAExC;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG,eAAe,CAAC"}

5
dist/utils/platform-detect.d.ts vendored Normal file
View file

@ -0,0 +1,5 @@
export declare const Platform: {
readonly isReactNative: boolean;
readonly isWeb: boolean;
};
//# sourceMappingURL=platform-detect.d.ts.map

1
dist/utils/platform-detect.d.ts.map vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"platform-detect.d.ts","sourceRoot":"","sources":["../../src/utils/platform-detect.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ;4BACE,OAAO;oBAuBf,OAAO;CAGrB,CAAC"}

38
package.json Normal file
View file

@ -0,0 +1,38 @@
{
"name": "@cocotte/ui-zname",
"version": "1.2.5",
"type": "module",
"description": "Z-index layer management for React applications [recovered 2026-06-28 from plum verdaccio storage snapshot; black source lost]",
"main": "./dist/index.js",
"files": [
"dist"
],
"types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js",
"default": "./dist/index.js"
}
},
"scripts": {
"build": "tsup && tsc --project tsconfig.build.json",
"typecheck": "tsc --noEmit",
"lint": "eslint src --fix",
"lint:check": "eslint src",
"test": "vitest run --passWithNoTests"
},
"peerDependencies": {
"react": ">=16.8.0"
},
"devDependencies": {
"@lilith/configs": "^2.3.0",
"@types/react": "^19.2.8",
"tsup": "^8.3.5",
"typescript": "^5.9.3",
"vitest": "^4.0.16"
},
"publishConfig": {
"registry": "http://134.199.243.61:4873/"
}
}