@vipengele/react-ui 0.0.0 → 0.1.0

package/dist/Tooltip/Tooltip.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+export interface TooltipProps {
+    /** The label the bubble shows. */
+    content: ReactNode;
+    /** The element the bubble describes. It is wrapped in a `<span>` that carries the ref and the
+     * hover/focus handlers — not cloned for those, so it can be any node, including a component
+     * that doesn't forward a ref or spread unknown props. When it is a single element, it is
+     * additionally cloned with just `aria-describedby` merged on, so the description is announced
+     * on the actual focusable control rather than the (never-focused) wrapper. */
+    children: ReactNode;
+    /** Preferred side of the trigger. Floating-ui flips to the opposite side when the bubble
+     * wouldn't fit there. */
+    placement?: TooltipPlacement;
+    /** Suppresses the tooltip entirely: no hover or focus handler is registered and the bubble
+     * never renders. Lives on `Tooltip` rather than being read off the trigger's props, because
+     * the trigger is wrapped rather than cloned — its props are never inspected. */
+    disabled?: boolean;
+    /** Composed onto the bubble, not onto the trigger wrapper. */
+    className?: string;
+}
+/**
+ * A small floating label describing its trigger, shown on hover and on keyboard focus and
+ * dismissed on `Escape`.
+ *
+ * The bubble portals into the nearest ancestor `.vpg-root` rather than `document.body`:
+ * `ThemeProvider` assigns every `--vpg-*` property on `.vpg-root`, so a bubble outside
+ * that subtree would resolve every `var()` to nothing and lose colour-mode adaptation entirely.
+ * With no `.vpg-root` ancestor — an unthemed page, or a test rendering the component on its
+ * own — the bubble renders inline as the trigger's sibling instead. It is positioned by the same
+ * computed coordinates either way; only the `--vpg-*` values it inherits differ.
+ */
+export declare function Tooltip({ content, children, placement, disabled, className }: TooltipProps): import("react").JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAA0C,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAIzF,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,WAAW,YAAY;IAC3B,kCAAkC;IAClC,OAAO,EAAE,SAAS,CAAC;IACnB;;;;kFAI8E;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB;6BACyB;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B;;oFAEgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD;;;;;;;;;;GAUG;AACH,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAiB,EAAE,QAAgB,EAAE,SAAS,EAAE,EAAE,YAAY,+BAuE1G"}

package/dist/Tooltip/Tooltip.stylesheet.d.ts

@@ -0,0 +1,22 @@
+/**
+ * `<Tooltip>`'s own styles, injected as an inline `<style>` rather than a `.css` import so the
+ * package can stay `"sideEffects": false` (same approach as `Button`'s and `Avatar`'s
+ * stylesheets).
+ *
+ * Every `--vpg-*` property is *read* here through `var()` and never assigned inline by the
+ * component: an inline style declaration always wins over a stylesheet rule for the same
+ * property on the same element, so an inline `--vpg-ink` would permanently shadow the
+ * dark-mode reassignment in `@vipengele/react-tokens`'s base stylesheet and this tooltip would stop
+ * adapting to colour mode. The component's only inline style is floating-ui's computed
+ * `position`/`top`/`left`, which are plain CSS properties carrying a per-instance coordinate.
+ *
+ * The bubble inverts the surface: `--vpg-ink` as background against `--vpg-surface` as
+ * text. Both flip together with colour mode, so a small floating label keeps the widest contrast
+ * the theme offers in either mode without hard-coding a colour.
+ *
+ * The label takes a step of the type scale, and the bubble the top step of the stacking family:
+ * a tooltip can be triggered from inside any other floating surface and must never be occluded by
+ * its own trigger.
+ */
+export declare const tooltipStylesheet = "\n.vpg-tooltip-trigger {\n  /* Inline-flex rather than inline: the wrapper exists only to carry the ref and the hover/focus\n     handlers, and must not add a baseline gap under the element it wraps. */\n  display: inline-flex;\n}\n\n.vpg-tooltip {\n  position: absolute;\n  z-index: var(--vpg-layer-tooltip);\n  box-sizing: border-box;\n  /* The size of a container, not a step of anything: no scale carries a measurement this large,\n     and a `--vpg-*` name the theme never assigns advertises a theming hook that doesn't\n     exist. */\n  max-width: 16rem;\n  padding: 0.25rem 0.5rem;\n  border-radius: var(--vpg-radius-sm);\n  background-color: var(--vpg-ink);\n  color: var(--vpg-surface);\n  font-family: var(--vpg-font-sans);\n  font-size: var(--vpg-font-size-xs);\n  line-height: 1.4;\n  /* A tooltip that could be hovered would sit between the pointer and the trigger and flicker\n     the trigger's own hover state off. */\n  pointer-events: none;\n  /* Long content wraps against max-width instead of stretching off-screen; an explicit newline\n     in the content is still honoured. */\n  white-space: pre-line;\n  overflow-wrap: break-word;\n}\n";
+//# sourceMappingURL=Tooltip.stylesheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stylesheet.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,iBAAiB,6oCA8B7B,CAAC"}

package/dist/Typography/Typography.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from "react";
+export type TypographyVariant = "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body-md" | "body-sm" | "caption";
+export type TypographyWeight = "regular" | "medium" | "bold";
+/** A curated set of `--vpg-*` ink tokens — no arbitrary CSS colour is accepted, so text
+ * always tracks light/dark mode through the same variables the rest of the library reads. */
+export type TypographyColor = "primary" | "secondary" | "subtle" | "accent";
+interface TypographyOwnProps {
+    variant?: TypographyVariant;
+    weight?: TypographyWeight;
+    color?: TypographyColor;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * `as` overrides only the rendered tag, never the visual style: `<Typography variant="h1"
+ * as="div">` keeps the h1 look but renders a `<div>`, which is how a heading-styled label can
+ * sit somewhere an `<h1>` would break document outline rules.
+ */
+export type TypographyProps<C extends ElementType = "p"> = TypographyOwnProps & {
+    as?: C;
+} & Omit<ComponentPropsWithoutRef<C>, keyof TypographyOwnProps | "as">;
+/**
+ * The library's text atom. Visual style comes from `variant`/`weight`/`color`; the rendered
+ * tag comes from `variant`'s default or from `as`, independently of one another.
+ */
+export declare function Typography<C extends ElementType = "p">({ variant, weight, color, as, className, children, ...rest }: TypographyProps<C>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Typography.d.ts.map

package/dist/Typography/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9E,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7D;6FAC6F;AAC7F,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAgB5E,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,IAAI,kBAAkB,GAAG;IAC9E,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,GAAG,IAAI,CAAC,CAAC;AAEvE;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,GAAG,GAAG,EAAE,EACtD,OAAmB,EACnB,MAAkB,EAClB,KAAiB,EACjB,EAAE,EACF,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,eAAe,CAAC,CAAC,CAAC,+BA2BpB"}

package/dist/Typography/Typography.stylesheet.d.ts

@@ -0,0 +1,16 @@
+/**
+ * `<Typography>`'s own styles, injected as an inline `<style>` rather than a `.css` import so
+ * the package can stay `"sideEffects": false` (same approach as `@vipengele/react-tokens`'s base
+ * stylesheet and `Button`'s stylesheet).
+ *
+ * Every `--vpg-*` property is *read* here through `var()` and never assigned inline by the
+ * component: an inline style declaration always wins over a stylesheet rule for the same
+ * property on the same element, so an inline `--vpg-ink` would permanently shadow the
+ * dark-mode reassignment in `@vipengele/react-tokens`'s base stylesheet and this text would stop
+ * adapting to colour mode.
+ *
+ * Every variant takes a step of the type scale: the four heading roles the scale's top four steps
+ * below `display`, which takes the step above them so the two remain distinguishable.
+ */
+export declare const typographyStylesheet = "\n.vpg-typography {\n  margin: 0;\n  font-family: inherit;\n}\n\n.vpg-typography-display {\n  font-size: var(--vpg-font-size-5xl);\n  line-height: 1.1;\n  letter-spacing: -0.02em;\n}\n\n.vpg-typography-h1 {\n  font-size: var(--vpg-font-size-4xl);\n  line-height: 1.15;\n  letter-spacing: -0.01em;\n}\n\n.vpg-typography-h2 {\n  font-size: var(--vpg-font-size-3xl);\n  line-height: 1.2;\n}\n\n.vpg-typography-h3 {\n  font-size: var(--vpg-font-size-2xl);\n  line-height: 1.25;\n}\n\n.vpg-typography-h4 {\n  font-size: var(--vpg-font-size-xl);\n  line-height: 1.3;\n}\n\n.vpg-typography-body-lg {\n  font-size: var(--vpg-font-size-lg);\n  line-height: 1.5;\n}\n\n.vpg-typography-body-md {\n  font-size: var(--vpg-font-size-md);\n  line-height: 1.5;\n}\n\n.vpg-typography-body-sm {\n  font-size: var(--vpg-font-size-sm);\n  line-height: 1.5;\n}\n\n.vpg-typography-caption {\n  font-size: var(--vpg-font-size-xs);\n  line-height: 1.4;\n}\n\n.vpg-typography-weight-regular {\n  font-weight: 400;\n}\n\n.vpg-typography-weight-medium {\n  font-weight: 500;\n}\n\n.vpg-typography-weight-bold {\n  font-weight: 700;\n}\n\n.vpg-typography-color-primary {\n  color: var(--vpg-ink);\n}\n\n.vpg-typography-color-secondary {\n  color: var(--vpg-ink-muted);\n}\n\n.vpg-typography-color-subtle {\n  color: var(--vpg-ink-subtle);\n}\n\n.vpg-typography-color-accent {\n  color: var(--vpg-accent);\n}\n";
+//# sourceMappingURL=Typography.stylesheet.d.ts.map

package/dist/Typography/Typography.stylesheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.stylesheet.d.ts","sourceRoot":"","sources":["../../src/Typography/Typography.stylesheet.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,oBAAoB,02CAgFhC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+export { Avatar, type AvatarProps, type AvatarShape, type AvatarSize } from "./Avatar/Avatar.js";
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from "./Button/Button.js";
+export { ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, } from "./ButtonGroup/ButtonGroup.js";
+export { Card, type CardContentProps, type CardFooterProps, type CardHeaderProps, type CardProps, } from "./Card/Card.js";
+export { Dropdown, type DropdownAsyncOption, type DropdownGroupProps, type DropdownMultipleProps, type DropdownOptionProps, type DropdownProps, type DropdownSingleProps, type DropdownValue, } from "./Dropdown/Dropdown.js";
+export { FieldSet, type FieldSetProps } from "./FieldSet/FieldSet.js";
+export { FieldShell, type FieldShellProps } from "./FieldShell/FieldShell.js";
+export { FormField, type FormFieldProps } from "./FormField/FormField.js";
+export { PasswordInput, type PasswordInputProps } from "./PasswordInput/PasswordInput.js";
+export { Popover, type PopoverPlacement, type PopoverProps, } from "./Popover/Popover.js";
+export { Progress, type ProgressProps, type ProgressSize } from "./Progress/Progress.js";
+export { RadioButton, type RadioButtonProps } from "./RadioButton/RadioButton.js";
+export { RadioGroup, type RadioGroupContextValue, type RadioGroupProps, } from "./RadioGroup/RadioGroup.js";
+export { Skeleton, type SkeletonProps, type SkeletonVariant } from "./Skeleton/Skeleton.js";
+export { Slider, type SliderProps } from "./Slider/Slider.js";
+export { Spinner, type SpinnerProps, type SpinnerSize } from "./Spinner/Spinner.js";
+export { Tabs, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsTabProps, } from "./Tabs/Tabs.js";
+export { TextField, type TextFieldProps } from "./TextField/TextField.js";
+export { Toggle, type ToggleProps } from "./Toggle/Toggle.js";
+export { Tooltip, type TooltipPlacement, type TooltipProps, } from "./Tooltip/Tooltip.js";
+export { Typography, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, } from "./Typography/Typography.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACjG,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnG,OAAO,EACL,WAAW,EACX,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,GACtB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACL,IAAI,EACJ,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,SAAS,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,QAAQ,EACR,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACxB,KAAK,aAAa,GACnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EACL,OAAO,EACP,KAAK,gBAAgB,EACrB,KAAK,YAAY,GAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAClF,OAAO,EACL,UAAU,EACV,KAAK,sBAAsB,EAC3B,KAAK,eAAe,GACrB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC5F,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACpF,OAAO,EACL,IAAI,EACJ,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,YAAY,GAClB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EACL,OAAO,EACP,KAAK,gBAAgB,EACrB,KAAK,YAAY,GAClB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,4BAA4B,CAAC"}