@dnanpm/ui-components 0.0.4 → 0.0.5

package/README.md

@@ -1,6 +1,6 @@
 # DNA UI Components
 
-[![npm version](https://badge.fury.io/js/%40dnanpm%2Fui-components.svg)](https://badge.fury.io/js/%40dnanpm%2Fui-components)
+[![npm version](https://img.shields.io/npm/v/%40dnanpm%2Fui-components?logo=npm)](https://www.npmjs.com/package/@dnanpm/ui-components)
 
 > ⚠️ **Under Heavy Development** — This package is actively being developed. Breaking changes may occur between minor versions during the 0.x release cycle.
 
@@ -12,6 +12,7 @@ React component library for the DNA Design System. Built with TypeScript, CSS Mo
 ## Features
 
 - Accessible, responsive, and customizable components
+- Canonical DNA component APIs with swappable internal implementations
 - Built with TypeScript and CSS Modules
 - Themed with design tokens from `@dnanpm/design-tokens`
 - Supports server-side rendering and tree-shaking
@@ -28,7 +29,7 @@ pnpm add @dnanpm/ui-components @dnanpm/design-tokens
 ## Usage
 
 ```tsx
-import { Button, Box } from '@dnanpm/ui-components';
+import { Box, Button, Dialog, Tooltip } from '@dnanpm/ui-components';
 import '@dnanpm/ui-components/styles.css';
 
 function App() {
@@ -43,11 +44,38 @@ function App() {
             <Box elevation="high">
                 <h2>Elevated Content</h2>
             </Box>
+
+            <Tooltip content="Additional context lives behind the same DNA API.">
+                <Button aria-label="Show more information" variant="secondary">
+                    Hover me
+                </Button>
+            </Tooltip>
+
+            <Dialog
+                trigger={<Button>Open dialog</Button>}
+                title="Project details"
+                description="Implementation stays internal to the design system."
+                footer={<Button>Done</Button>}
+            >
+                <p>
+                    Consumers use the same component contract regardless of what powers it
+                    underneath.
+                </p>
+            </Dialog>
         </div>
     );
 }
 ```
 
+## Implementation Model
+
+This package now supports two contributor paths under one public API surface:
+
+- `Plain React` components, written entirely in-house.
+- `Base UI` components, where the public DNA API is built on top of a headless library primitive directly in the component file.
+
+Consumers should not need to know which path a component uses. Public names, props, and behavior belong to DNA; implementation choices stay internal.
+
 Design tokens are available as CSS custom properties: `var(--colors-primitive-pink-500)`, `var(--spacing-ui-md)`, etc.
 
 ### Tree-shaking

package/dist/components/Box/Box.d.ts

@@ -1,24 +1,2 @@
-/**
- * Box Component
- *
- * A versatile container component with elevation (shadow) variants.
- * Can be rendered as any HTML element using the polymorphic `as` prop.
- *
- * Features:
- * - Polymorphic: Render as any element (div, section, article, etc.)
- * - Elevation: Four shadow depth levels (none, low, high, extraHigh)
- * - Ref forwarding supported
- * - Uses design tokens for consistent shadows
- *
- * @example
- * // Basic box with no elevation
- * <Box>Content</Box>
- *
- * // Box with elevation
- * <Box elevation="high">Elevated content</Box>
- *
- * // Box as section element
- * <Box as="section" elevation="low">Section content</Box>
- */
 export declare const Box: import('react').ForwardRefExoticComponent<import('./Box.types').BaseBoxProps & import('react').HTMLAttributes<HTMLElement> & import('react').RefAttributes<HTMLElement>>;
 //# sourceMappingURL=Box.d.ts.map

package/dist/components/Box/Box.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAOH,eAAO,MAAM,GAAG,0KAUf,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,GAAG,0KAUf,CAAC"}

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,MAAM,+HAoDlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,MAAM,+HAoDlB,CAAC"}

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,3 @@
+import { DialogProps } from './Dialog.types';
+export declare const Dialog: import('react').ForwardRefExoticComponent<DialogProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,wGAsDjB,CAAC"}

package/dist/components/Dialog/Dialog.types.d.ts

@@ -0,0 +1,45 @@
+import { DialogPortalProps, DialogRootProps } from '@base-ui/react/dialog';
+import * as React from 'react';
+export type DialogSize = 'sm' | 'md' | 'lg';
+export interface DialogProps extends Omit<DialogRootProps, 'children' | 'disablePointerDismissal'>, Pick<DialogPortalProps, 'keepMounted'> {
+    /**
+     * Optional trigger element composed without changing its public API.
+     */
+    readonly trigger?: React.ReactElement;
+    /**
+     * Dialog title announced by assistive technology.
+     */
+    readonly title: React.ReactNode;
+    /**
+     * Optional supporting copy below the title.
+     */
+    readonly description?: React.ReactNode;
+    /**
+     * Main dialog content.
+     */
+    readonly children?: React.ReactNode;
+    /**
+     * Optional footer actions.
+     */
+    readonly footer?: React.ReactNode;
+    /**
+     * Whether clicking the backdrop should close the dialog.
+     * @default true
+     */
+    readonly closeOnOutsideClick?: boolean;
+    /**
+     * Accessible label for the close button.
+     * @default 'Close dialog'
+     */
+    readonly closeLabel?: string;
+    /**
+     * Width preset for the popup.
+     * @default 'md'
+     */
+    readonly size?: DialogSize;
+    /**
+     * Optional popup className.
+     */
+    readonly className?: string;
+}
+//# sourceMappingURL=Dialog.types.d.ts.map

package/dist/components/Dialog/Dialog.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEhF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WACb,SACI,IAAI,CAAC,eAAe,EAAE,UAAU,GAAG,yBAAyB,CAAC,EAC7D,IAAI,CAAC,iBAAiB,EAAE,aAAa,CAAC;IAC1C;;OAEG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvC;;OAEG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC/B"}

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,3 @@
+export { Dialog } from './Dialog';
+export type { DialogProps, DialogSize } from './Dialog.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,3 @@
+import { TooltipProps } from './Tooltip.types';
+export declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,OAAO,yGAqClB,CAAC"}

package/dist/components/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,39 @@
+import { TooltipPortalProps, TooltipPositionerProps, TooltipRootProps, TooltipTriggerProps } from '@base-ui/react/tooltip';
+import * as React from 'react';
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipAlign = 'start' | 'center' | 'end';
+export interface TooltipProps extends Omit<TooltipRootProps, 'children'>, Pick<TooltipTriggerProps, 'delay' | 'closeDelay'>, Pick<TooltipPortalProps, 'keepMounted'>, Pick<TooltipPositionerProps, 'side' | 'align' | 'sideOffset'> {
+    /**
+     * Visual tooltip content rendered in the popup.
+     */
+    readonly content: React.ReactNode;
+    /**
+     * Trigger element composed without changing its public API.
+     */
+    readonly children: React.ReactElement;
+    /**
+     * Preferred tooltip side.
+     * @default 'top'
+     */
+    readonly side?: TooltipSide;
+    /**
+     * Popup alignment relative to the trigger.
+     * @default 'center'
+     */
+    readonly align?: TooltipAlign;
+    /**
+     * Space between trigger and popup.
+     * @default 8
+     */
+    readonly sideOffset?: number;
+    /**
+     * Whether to render the arrow.
+     * @default true
+     */
+    readonly showArrow?: boolean;
+    /**
+     * Optional popup className.
+     */
+    readonly className?: string;
+}
+//# sourceMappingURL=Tooltip.types.d.ts.map

package/dist/components/Tooltip/Tooltip.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EACR,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,mBAAmB,EACtB,MAAM,wBAAwB,CAAC;AAEhC,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAC9D,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,MAAM,WAAW,YACb,SACI,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EAClC,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,YAAY,CAAC,EACjD,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,EACvC,IAAI,CAAC,sBAAsB,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY,CAAC;IACjE;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;IAC5B;;;OAGG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC/B"}

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipAlign, TooltipProps, TooltipSide } from './Tooltip.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/index.d.ts

@@ -1,3 +1,5 @@
 export * from './Box';
 export * from './Button';
+export * from './Dialog';
+export * from './Tooltip';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}