@inkra/react 0.0.0-stage → 0.1.0

package/dist/tabs/index.d.ts

@@ -0,0 +1,22 @@
+import * as Primitive from '@radix-ui/react-tabs';
+import { type ReactNode } from 'react';
+export interface TabsProps extends Primitive.TabsProps {
+    size?: 'sm' | 'md' | 'lg';
+    animated?: boolean;
+}
+export interface TabsListProps extends Primitive.TabsListProps {
+    align?: 'start' | 'center' | 'end';
+    fullWidth?: boolean;
+    divided?: boolean;
+}
+export interface TabsTriggerProps extends Omit<Primitive.TabsTriggerProps, 'asChild'> {
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+export type TabsContentProps = Primitive.TabsContentProps;
+export declare const Tabs: {
+    Root: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+    List: import("react").ForwardRefExoticComponent<TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<Primitive.TabsContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/tabs/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-tabs';
+import { createContext, forwardRef, useContext, useRef, useState } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PencilLine } from '../PencilLine.js';
+import { useSelectionDrawing } from '../internal/useSelectionDrawing.js';
+const ValueContext = createContext(undefined);
+const AnimatedContext = createContext(true);
+const OrientationContext = createContext('horizontal');
+const DividedContext = createContext(false);
+const Root = forwardRef(function TabsRoot({ value, defaultValue, onValueChange, className, size = 'md', animated = true, orientation = 'horizontal', ...props }, ref) {
+    const [internal, setInternal] = useState(defaultValue);
+    const current = value === undefined ? internal : value;
+    const lastChange = useRef(current);
+    lastChange.current = current;
+    return _jsx(ValueContext.Provider, { value: current, children: _jsx(AnimatedContext.Provider, { value: animated, children: _jsx(OrientationContext.Provider, { value: orientation, children: _jsx(Primitive.Root, { ...props, orientation: orientation, ref: ref, "data-size": size, className: ['inkra-tabs', className].filter(Boolean).join(' '), value: current ?? '', onValueChange: next => {
+                        // Pointer focus and pointer down can request the same tab before React renders.
+                        if (lastChange.current === next)
+                            return;
+                        lastChange.current = next;
+                        if (value === undefined)
+                            setInternal(next);
+                        onValueChange?.(next);
+                    } }) }) }) });
+});
+const List = forwardRef(function TabsList({ className, align = 'start', fullWidth = false, divided = false, ...props }, ref) {
+    return _jsx(DividedContext.Provider, { value: divided, children: _jsx(Primitive.List, { ...props, ref: ref, "data-align": align, "data-full-width": fullWidth || undefined, "data-divided": divided || undefined, className: ['inkra-tabs__list', className].filter(Boolean).join(' ') }) });
+});
+const Trigger = forwardRef(function TabsTrigger({ value, className, children, startIcon, endIcon, ...props }, ref) {
+    const current = useContext(ValueContext);
+    const divided = useContext(DividedContext);
+    const orientation = useContext(OrientationContext);
+    const surface = useRef(null);
+    useSelectionDrawing(surface, current === value, useContext(AnimatedContext));
+    return _jsxs(Primitive.Trigger, { ...props, value: value, ref: ref, className: ['inkra-tabs__trigger', className].filter(Boolean).join(' '), children: [divided && _jsx(PencilLine, { className: "inkra-tabs__divider", orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: `tab-divider-${value}` }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-tabs__selection", variant: "selection", seed: `tab-${value}`, ref: surface }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-tabs__focus-ring", variant: "outline", seed: `tab-${value}-focus` }), startIcon && _jsx("span", { className: "inkra-tabs__icon", "aria-hidden": "true", children: startIcon }), _jsx("span", { className: "inkra-tabs__label", children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children }), endIcon && _jsx("span", { className: "inkra-tabs__icon", "aria-hidden": "true", children: endIcon })] });
+});
+const Content = forwardRef(function TabsContent({ className, value, ...props }, ref) {
+    const current = useContext(ValueContext);
+    return _jsx(Primitive.Content, { ...props, value: value, ref: ref, hidden: current !== value, className: ['inkra-tabs__content', className].filter(Boolean).join(' ') });
+});
+export const Tabs = { Root, List, Trigger, Content };

package/dist/tokens.css

@@ -0,0 +1,355 @@
+:root,
+[data-theme="light"],
+[data-inkra-theme="light"],
+[data-theme="auto"],
+[data-inkra-theme="auto"] {
+  color-scheme: light;
+
+  --inkra-ocean-50: #c4e7f0;
+  --inkra-ocean-100: #b4dfe9;
+  --inkra-ocean-200: #a2d3df;
+  --inkra-ocean-300: #93c7d0;
+  --inkra-ocean-400: #78a9b3;
+  --inkra-ocean-500: #5ca0b0;
+  --inkra-ocean-600: #4b96aa;
+  --inkra-ocean-700: #3e7b8c;
+  --inkra-ocean-800: #305e6b;
+  --inkra-ocean-900: #294c56;
+  --inkra-ocean-950: #172f36;
+  --inkra-graphite-50: #f5f6f5;
+  --inkra-graphite-100: #e6e9e7;
+  --inkra-graphite-200: #ced4d0;
+  --inkra-graphite-300: #acb7b0;
+  --inkra-graphite-400: #85958c;
+  --inkra-graphite-500: #64766b;
+  --inkra-graphite-600: #4d5e54;
+  --inkra-graphite-700: #3b4b41;
+  --inkra-graphite-800: #293d33;
+  --inkra-graphite-900: #202d25;
+  --inkra-graphite-950: #141c17;
+  --inkra-cinnabar-50: #fcf3f0;
+  --inkra-cinnabar-100: #f6e2da;
+  --inkra-cinnabar-200: #ecc2b4;
+  --inkra-cinnabar-300: #dfa492;
+  --inkra-cinnabar-400: #cf806b;
+  --inkra-cinnabar-500: #b96350;
+  --inkra-cinnabar-600: #994f3f;
+  --inkra-cinnabar-700: #803c30;
+  --inkra-cinnabar-800: #672e26;
+  --inkra-cinnabar-900: #51251f;
+  --inkra-cinnabar-950: #311510;
+  --inkra-pine-50: #f1f7f0;
+  --inkra-pine-100: #e0eedc;
+  --inkra-pine-200: #c5ddbd;
+  --inkra-pine-300: #a4c69b;
+  --inkra-pine-400: #82ad7b;
+  --inkra-pine-500: #629568;
+  --inkra-pine-600: #4c7952;
+  --inkra-pine-700: #395e40;
+  --inkra-pine-800: #294a32;
+  --inkra-pine-900: #203b29;
+  --inkra-pine-950: #112218;
+  --inkra-warm-50: #fdfcf8;
+  --inkra-warm-100: #f8f5ec;
+  --inkra-warm-200: #f4f0e3;
+  --inkra-warm-300: #f2ead7;
+  --inkra-warm-400: #ddd6c4;
+  --inkra-warm-500: #b6b39d;
+  --inkra-warm-600: #8d8b78;
+  --inkra-warm-700: #5f6052;
+  --inkra-warm-800: #3f4037;
+  --inkra-warm-900: #292920;
+  --inkra-warm-950: #1b1b17;
+
+  --inkra-paper: #f4f0e3;
+  --inkra-surface: #fdfcf8;
+  --inkra-surface-muted: #f2ead7;
+  --inkra-ink: #172b21;
+  --inkra-ink-muted: #45594c;
+  --inkra-ink-subtle: #616d63;
+  --inkra-accent: #4b96aa;
+  --inkra-accent-strong: #305e6b;
+  --inkra-accent-soft: #78a9b3;
+  --inkra-on-accent: #173b45;
+  --inkra-coral: #994f3f;
+  --inkra-coral-soft: #d49b8b;
+  --inkra-blue: #4d91a0;
+  --inkra-blue-soft: #87bbc0;
+  --inkra-border: #99aa9b;
+  --inkra-border-strong: #536d59;
+  --inkra-focus: #305e6b;
+  --inkra-danger: #873e36;
+  --inkra-danger-soft: #d49b8b;
+  --inkra-success-pigment: #629568;
+  --inkra-success-foreground: #21472f;
+  --inkra-success-surface: var(--inkra-paper);
+  --inkra-warning-surface: var(--inkra-paper);
+  --inkra-danger-surface: var(--inkra-paper);
+  --inkra-info-surface: var(--inkra-paper);
+  --inkra-warning-pigment: #e6c17b;
+  --inkra-warning-foreground: #6b4d1f;
+  --inkra-danger-pigment: #d49b8b;
+  --inkra-danger-foreground: #873e36;
+  --inkra-info-pigment: #4b96aa;
+  --inkra-info-foreground: #173b45;
+  --inkra-selection: #d6b781;
+  --inkra-selection-pigment: #769566;
+  --inkra-selection-foreground: #173b2b;
+  --inkra-overlay: rgb(24 35 28 / 20%);
+  --inkra-shadow-overlay: 0 3px 12px rgb(24 35 28 / 20%);
+
+  --inkra-font-hand: "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti",
+    "Trip Map Hand", cursive;
+  --inkra-font-body: var(--inkra-font-hand);
+  --inkra-font-display: var(--inkra-font-hand);
+  --inkra-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --inkra-text-xs: 12px;
+  --inkra-text-sm: 13px;
+  --inkra-text-md: 15px;
+  --inkra-text-lg: 17px;
+  --inkra-text-xl: 20px;
+  --inkra-text-2xl: 24px;
+  --inkra-text-3xl: 28px;
+  --inkra-weight-regular: 400;
+  --inkra-weight-medium: 400;
+  --inkra-weight-semibold: 400;
+  --inkra-line-tight: 1.2;
+  --inkra-line-ui: 1.45;
+  --inkra-line-body: 1.6;
+  --inkra-letter-spacing: 0;
+
+  --inkra-space-0: 0;
+  --inkra-space-1: 4px;
+  --inkra-space-2: 8px;
+  --inkra-space-3: 12px;
+  --inkra-space-4: 16px;
+  --inkra-space-5: 20px;
+  --inkra-space-6: 24px;
+  --inkra-space-7: 28px;
+  --inkra-space-8: 32px;
+  --inkra-space-9: 36px;
+  --inkra-space-10: 40px;
+  --inkra-space-11: 44px;
+  --inkra-space-12: 48px;
+  --inkra-space-13: 52px;
+  --inkra-space-14: 56px;
+  --inkra-space-15: 60px;
+  --inkra-space-16: 64px;
+  --inkra-radius-none: 0;
+  --inkra-radius-sm: 3px;
+  --inkra-radius-md: 6px;
+  --inkra-radius-lg: 8px;
+  --inkra-control-xs: 32px;
+  --inkra-control-sm: 36px;
+  --inkra-control-md: 44px;
+  --inkra-control-lg: 48px;
+  --inkra-touch-target: 44px;
+  --inkra-icon-xs: 14px;
+  --inkra-icon-sm: 16px;
+  --inkra-icon-md: 20px;
+  --inkra-icon-lg: 24px;
+  --inkra-content-width: 72rem;
+  --inkra-reading-width: 44rem;
+  --inkra-sidebar-width: 15rem;
+  --inkra-header-height: 64px;
+  --inkra-focus-width: 2px;
+  --inkra-focus-offset: 3px;
+
+  --inkra-motion-fast: 120ms;
+  --inkra-motion-normal: 180ms;
+  --inkra-motion-slow: 420ms;
+  --inkra-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --inkra-z-base: 0;
+  --inkra-z-sticky: 10;
+  --inkra-z-popover: 20;
+  --inkra-z-modal: 30;
+  --inkra-z-tooltip: 40;
+
+  --inkra-stroke-width: 1.2px;
+  --inkra-stroke-variation: 0.82;
+  --inkra-stroke-grain: 0.7;
+  --inkra-stroke-breaks: 0.2;
+  --inkra-stroke-amplitude: 0.6px;
+  --inkra-stroke-step: 0.8px;
+  --inkra-stroke-passes: 3;
+  --inkra-stroke-gain: 2.1;
+  --inkra-action-stroke-width: 1.35px;
+  --inkra-action-stroke-gain: 2.5;
+  --inkra-quiet-stroke-width: 0.75px;
+  --inkra-quiet-stroke-passes: 2;
+  --inkra-badge-stroke-width: 0.9px;
+  --inkra-badge-stroke-passes: 2;
+
+  --inkra-wash-opacity: 0.48;
+  --inkra-wash-strength: 0.48;
+  --inkra-wash-spacing: 1.8px;
+  --inkra-wash-roughness: 3;
+  --inkra-wash-inset: 2px;
+  --inkra-wash-edge-reach: 0px;
+  --inkra-quiet-wash-strength: 0.18;
+  --inkra-badge-wash-strength: 0.25;
+
+  --inkra-letter-variation: 0.52;
+  --inkra-letter-breaks: 0.18;
+  --inkra-letter-outline: 0.96;
+  --inkra-letter-fill: 0.34;
+  --inkra-letter-grain: 0.45;
+  --inkra-paper-tile-size: 384px;
+  --inkra-render-dpr-cap: 2;
+}
+
+[data-theme="dark"],
+[data-inkra-theme="dark"] {
+  color-scheme: dark;
+
+  --inkra-paper: #191d1e;
+  --inkra-surface: #272d2e;
+  --inkra-surface-muted: #23292a;
+  --inkra-ink: #f5f6ed;
+  --inkra-ink-muted: #becbbb;
+  --inkra-ink-subtle: #96a591;
+  --inkra-accent: #82bdcb;
+  --inkra-accent-strong: #d3e9ee;
+  --inkra-accent-soft: #8cb2ba;
+  --inkra-on-accent: #edf8fa;
+  --inkra-coral: #ffd1c6;
+  --inkra-coral-soft: #292920;
+  --inkra-blue: #78b8c8;
+  --inkra-blue-soft: #78a9b3;
+  --inkra-border: #a7b5a6;
+  --inkra-border-strong: #a7b5a6;
+  --inkra-focus: #a1c9d3;
+  --inkra-danger: #ffd1c6;
+  --inkra-danger-soft: #d49b8b;
+  --inkra-success-pigment: #76a37b;
+  --inkra-success-foreground: #d5efd7;
+  --inkra-success-surface: #20372b;
+  --inkra-warning-surface: #3a3020;
+  --inkra-danger-surface: #3b2727;
+  --inkra-info-surface: #20343c;
+  --inkra-warning-pigment: #d6b67c;
+  --inkra-warning-foreground: #ffe5b3;
+  --inkra-danger-pigment: #c98f82;
+  --inkra-danger-foreground: #ffd1c6;
+  --inkra-info-pigment: #82bdcb;
+  --inkra-info-foreground: #d8f1f5;
+  --inkra-selection: #d6b781;
+  --inkra-selection-pigment: #9bbd85;
+  --inkra-selection-foreground: #e9f3e3;
+  --inkra-overlay: rgb(4 4 3 / 64%);
+  --inkra-shadow-overlay: 0 8px 28px rgb(0 0 0 / 28%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]):not([data-inkra-theme]),
+  [data-theme="auto"],
+  [data-inkra-theme="auto"] {
+    color-scheme: dark;
+
+    --inkra-paper: #191d1e;
+    --inkra-surface: #272d2e;
+    --inkra-surface-muted: #23292a;
+    --inkra-ink: #f5f6ed;
+    --inkra-ink-muted: #becbbb;
+    --inkra-ink-subtle: #96a591;
+    --inkra-accent: #82bdcb;
+    --inkra-accent-strong: #d3e9ee;
+    --inkra-accent-soft: #8cb2ba;
+    --inkra-on-accent: #edf8fa;
+    --inkra-coral: #ffd1c6;
+    --inkra-coral-soft: #292920;
+    --inkra-blue: #78b8c8;
+    --inkra-blue-soft: #78a9b3;
+    --inkra-border: #a7b5a6;
+    --inkra-border-strong: #a7b5a6;
+    --inkra-focus: #a1c9d3;
+    --inkra-danger: #ffd1c6;
+    --inkra-danger-soft: #d49b8b;
+    --inkra-success-pigment: #76a37b;
+    --inkra-success-foreground: #d5efd7;
+    --inkra-success-surface: #20372b;
+    --inkra-warning-surface: #3a3020;
+    --inkra-danger-surface: #3b2727;
+    --inkra-info-surface: #20343c;
+    --inkra-warning-pigment: #d6b67c;
+    --inkra-warning-foreground: #ffe5b3;
+    --inkra-danger-pigment: #c98f82;
+    --inkra-danger-foreground: #ffd1c6;
+    --inkra-info-pigment: #82bdcb;
+    --inkra-info-foreground: #d8f1f5;
+    --inkra-selection: #d6b781;
+    --inkra-selection-pigment: #9bbd85;
+    --inkra-selection-foreground: #e9f3e3;
+    --inkra-overlay: rgb(4 4 3 / 64%);
+    --inkra-shadow-overlay: 0 8px 28px rgb(0 0 0 / 28%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  [data-theme],
+  [data-inkra-theme] {
+    --inkra-motion-fast: 0ms;
+    --inkra-motion-normal: 0ms;
+    --inkra-motion-slow: 0ms;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root,
+  [data-theme],
+  [data-inkra-theme] {
+    --inkra-ink-muted: var(--inkra-ink);
+    --inkra-border: var(--inkra-border-strong);
+    --inkra-focus-width: 3px;
+    --inkra-wash-opacity: 0.18;
+    --inkra-wash-strength: 0.18;
+  }
+}
+
+@media (forced-colors: active) {
+  :root,
+  [data-theme],
+  [data-inkra-theme] {
+    --inkra-paper: Canvas;
+    --inkra-surface: Canvas;
+    --inkra-surface-muted: Canvas;
+    --inkra-ink: CanvasText;
+    --inkra-ink-muted: CanvasText;
+    --inkra-ink-subtle: CanvasText;
+    --inkra-accent: Highlight;
+    --inkra-accent-strong: Highlight;
+    --inkra-accent-soft: Canvas;
+    --inkra-on-accent: HighlightText;
+    --inkra-coral: CanvasText;
+    --inkra-coral-soft: Canvas;
+    --inkra-blue: LinkText;
+    --inkra-blue-soft: Canvas;
+    --inkra-border: CanvasText;
+    --inkra-border-strong: CanvasText;
+    --inkra-focus: Highlight;
+    --inkra-danger: Mark;
+    --inkra-danger-soft: Canvas;
+    --inkra-success-pigment: Highlight;
+    --inkra-success-foreground: CanvasText;
+    --inkra-warning-pigment: Highlight;
+    --inkra-warning-foreground: CanvasText;
+    --inkra-danger-pigment: Mark;
+    --inkra-danger-foreground: MarkText;
+    --inkra-info-pigment: Highlight;
+    --inkra-info-foreground: LinkText;
+    --inkra-selection: Highlight;
+    --inkra-selection-pigment: Highlight;
+    --inkra-selection-foreground: HighlightText;
+    --inkra-overlay: rgb(0 0 0 / 50%);
+    --inkra-shadow-overlay: none;
+    --inkra-stroke-grain: 0;
+    --inkra-stroke-breaks: 0;
+    --inkra-wash-opacity: 0;
+    --inkra-wash-strength: 0;
+    --inkra-quiet-wash-strength: 0;
+    --inkra-badge-wash-strength: 0;
+    --inkra-letter-breaks: 0;
+    --inkra-letter-grain: 0;
+  }
+}

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,24 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type { PencilSurfaceVariant } from '../PencilSurface.js';
+export type TooltipProviderProps = TooltipPrimitive.TooltipProviderProps;
+export declare const TooltipProvider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
+export type TooltipRootProps = TooltipPrimitive.TooltipProps;
+export declare function TooltipRoot(props: TooltipRootProps): import("react").JSX.Element;
+export type TooltipTriggerProps = TooltipPrimitive.TooltipTriggerProps;
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type TooltipPortalProps = TooltipPrimitive.TooltipPortalProps;
+export declare function TooltipPortal({ children, ...props }: TooltipPortalProps): import("react").JSX.Element;
+export interface TooltipContentProps extends TooltipPrimitive.TooltipContentProps {
+    seed?: string | number;
+    surfaceClassName?: string;
+    surfaceRadius?: number;
+    surfaceVariant?: PencilSurfaceVariant;
+}
+export declare const TooltipContent: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Tooltip: Readonly<{
+    Provider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
+    Root: typeof TooltipRoot;
+    Trigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof TooltipPortal;
+    Content: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/tooltip/Tooltip.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { forwardRef, useId } from 'react';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export const TooltipProvider = TooltipPrimitive.Provider;
+export function TooltipRoot(props) {
+    return (_jsx(PortalThemeProvider, { children: _jsx(TooltipPrimitive.Root, { ...props }) }));
+}
+export const TooltipTrigger = forwardRef(function TooltipTrigger(props, forwardedRef) {
+    const ref = usePortalTriggerRef(forwardedRef);
+    return _jsx(TooltipPrimitive.Trigger, { ...props, ref: ref });
+});
+export function TooltipPortal({ children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+}
+export const TooltipContent = forwardRef(function TooltipContent({ children, className, seed, sideOffset = 6, surfaceClassName, surfaceRadius = 6, surfaceVariant = 'paper', ...props }, ref) {
+    const generatedId = useId();
+    const resolvedSeed = seed ?? `inkra-tooltip-${generatedId}`;
+    return (_jsx(TooltipPrimitive.Content, { ...props, className: classes('inkra-tooltip__content', className), ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: classes('inkra-tooltip__surface', surfaceClassName), radius: surfaceRadius, seed: resolvedSeed, variant: surfaceVariant, children: _jsx("div", { className: "inkra-tooltip__content-body", children: typeof children === 'string' ? (_jsx(PencilText, { seed: `${resolvedSeed}-text`, children: children })) : children }) }) }));
+});
+export const Tooltip = Object.freeze({
+    Provider: TooltipProvider,
+    Root: TooltipRoot,
+    Trigger: TooltipTrigger,
+    Portal: TooltipPortal,
+    Content: TooltipContent,
+});

package/dist/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, } from './Tooltip.js';
+export type { TooltipContentProps, TooltipPortalProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps, } from './Tooltip.js';

package/dist/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, } from './Tooltip.js';

package/package.json

@@ -1,6 +1,102 @@
 {
   "name": "@inkra/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/inkrajs/inkra.git",
+    "directory": "packages/inkra"
+  },
+  "homepage": "https://inkrajs.github.io/",
+  "bugs": { "url": "https://github.com/inkrajs/inkra/issues" },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./PencilSurface": {
+      "types": "./dist/PencilSurface.d.ts",
+      "import": "./dist/PencilSurface.js",
+      "default": "./dist/PencilSurface.js"
+    },
+    "./PencilText": {
+      "types": "./dist/PencilText.d.ts",
+      "import": "./dist/PencilText.js",
+      "default": "./dist/PencilText.js"
+    },
+    "./PencilIcon": {
+      "types": "./dist/PencilIcon.d.ts",
+      "import": "./dist/PencilIcon.js",
+      "default": "./dist/PencilIcon.js"
+    },
+    "./PencilLine": {
+      "types": "./dist/PencilLine.d.ts",
+      "import": "./dist/PencilLine.js",
+      "default": "./dist/PencilLine.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md",
+    "Yozai-OFL.txt"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "node scripts/clean.mjs && tsc -p tsconfig.json && node scripts/copy-styles.mjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "npm run build && node --test test/*.test.mjs",
+    "pack:check": "npm pack --dry-run"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.22",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "5.9.3"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "tag": "latest"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "hand-drawn",
+    "pencil",
+    "accessible"
+  ],
+  "dependencies": {
+    "@base-ui/react": "^1.9.0",
+    "@radix-ui/react-accordion": "^1.3.1",
+    "@radix-ui/react-avatar": "^1.3.1",
+    "@radix-ui/react-dialog": "^1.3.1",
+    "@radix-ui/react-dropdown-menu": "^2.2.1",
+    "@radix-ui/react-popover": "^1.3.1",
+    "@radix-ui/react-select": "^2.4.1",
+    "@radix-ui/react-slider": "^1.6.1",
+    "@radix-ui/react-tabs": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.4.1",
+    "@types/geojson": "^7946.0.16",
+    "leaflet": "^1.9.4",
+    "lucide-react": "^1.60.0",
+    "react-day-picker": "^9.14.0"
+  }
+}