@corndev/ui-overlays 0.0.0-reserved.0 → 1.0.0-beta.1

package/dist/components/popover/popover.css

@@ -0,0 +1,115 @@
+.corn-popover {
+  position: fixed;
+  z-index: 8000;
+  background-color: var(--corn-bg-primary);
+  border: 1px solid var(--corn-border-light);
+  border-radius: var(--corn-radius-md);
+  box-shadow: var(--corn-shadow-lg);
+  min-width: 200px;
+  max-width: 320px;
+  font-family: var(--corn-font-family);
+  font-size: var(--corn-font-size-base);
+  color: var(--corn-text-primary);
+  opacity: 0;
+  transform: scale(0.95);
+  transition:
+    opacity var(--corn-transition-fast),
+    transform var(--corn-transition-fast);
+  pointer-events: none;
+}
+
+/* Closed is out of the tab order and the accessibility tree, not just
+   transparent: the vanilla popover stays in the document between openings, and
+   at opacity 0 alone its controls were still reachable by Tab. The visibility
+   change waits for the fade, so closing still animates: visibility interpolates
+   as "visible while either end is", so it holds for the whole fade and flips at
+   the end. Not a zero-length transition with the token as its delay — the token
+   carries its own easing, so that names two and the browser drops the whole
+   declaration, fade included. */
+.corn-popover:not([data-visible]) {
+  visibility: hidden;
+  transition:
+    opacity var(--corn-transition-fast),
+    transform var(--corn-transition-fast),
+    visibility var(--corn-transition-fast);
+}
+
+.corn-popover[data-visible] {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: auto;
+}
+
+/* Arrow */
+.corn-popover::before {
+  content: '';
+  position: absolute;
+  border: 7px solid transparent;
+}
+
+.corn-popover[data-placement='top']::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--corn-border-light);
+}
+
+.corn-popover[data-placement='bottom']::before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--corn-border-light);
+}
+
+.corn-popover[data-placement='left']::before {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--corn-border-light);
+}
+
+.corn-popover[data-placement='right']::before {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--corn-border-light);
+}
+
+/* Header */
+.corn-popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--corn-spacing-sm) var(--corn-spacing-md);
+  border-bottom: 1px solid var(--corn-border-light);
+}
+
+.corn-popover-title {
+  font-size: var(--corn-font-size-base);
+  font-weight: 600;
+  color: var(--corn-text-primary);
+}
+
+.corn-popover-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--corn-font-size-lg);
+  line-height: 1;
+  color: var(--corn-text-secondary);
+  padding: 0 4px;
+  border-radius: var(--corn-radius-sm);
+  transition: color var(--corn-transition-fast), background-color var(--corn-transition-fast);
+}
+
+.corn-popover-close:hover {
+  color: var(--corn-text-primary);
+  background-color: var(--corn-bg-tertiary);
+}
+
+/* Body */
+.corn-popover-body {
+  padding: var(--corn-spacing-md);
+  color: var(--corn-text-secondary);
+  line-height: 1.6;
+}

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Creates a popover attached to a trigger element.
+ *
+ * @param {HTMLElement} triggerEl - Element that opens/closes the popover
+ * @param {Object} options
+ * @param {string|HTMLElement} options.content - Popover body content (required). A string is shown as text, never parsed as HTML; pass an element for markup.
+ * @param {string} [options.title] - Optional heading inside the popover
+ * @param {'top'|'bottom'|'left'|'right'} [options.placement='bottom'] - Preferred placement
+ * @param {boolean} [options.defaultOpen=false] - Open as soon as it is created.
+ * @param {(open: boolean) => void} [options.onChange] - Called whenever it opens or closes,
+ *   with the new state — by the trigger, Escape, an outside click, or `open()`/`close()`.
+ * @param {boolean} [options.trapFocus=false] - Make it a modal dialog: focus moves in and
+ *   Tab stays inside, the page behind goes inert, Escape answers only the top layer,
+ *   and closing hands focus back to the trigger — the same code Modal and Drawer
+ *   run. Without it the popover is a non-modal panel and the page stays live.
+ * @param {boolean} [options.closeOnOutsideClick=true] - Dismiss when clicking outside
+ * @param {Function} [options.onOpen] - Called when popover opens
+ * @param {Function} [options.onClose] - Called when popover closes
+ * @returns {{ open: Function, close: Function, toggle: Function, destroy: Function }}
+ */
+export function createPopover(triggerEl: HTMLElement, options?: {
+    content: string | HTMLElement;
+    title?: string;
+    placement?: "top" | "bottom" | "left" | "right";
+    defaultOpen?: boolean;
+    onChange?: (open: boolean) => void;
+    trapFocus?: boolean;
+    closeOnOutsideClick?: boolean;
+    onOpen?: Function;
+    onClose?: Function;
+}): {
+    open: Function;
+    close: Function;
+    toggle: Function;
+    destroy: Function;
+};

package/dist/components/tooltip/tooltip.css

@@ -0,0 +1,60 @@
+.corn-tooltip {
+  position: fixed;
+  z-index: 9000;
+  padding: var(--corn-spacing-xs) var(--corn-spacing-sm);
+  background-color: var(--corn-text-primary);
+  color: var(--corn-text-inverse);
+  font-family: var(--corn-font-family);
+  font-size: var(--corn-font-size-sm);
+  line-height: 1.4;
+  border-radius: var(--corn-radius-sm);
+  white-space: nowrap;
+  max-width: 240px;
+  white-space: normal;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.95);
+  transition:
+    opacity var(--corn-transition-fast),
+    transform var(--corn-transition-fast);
+}
+
+.corn-tooltip[data-visible] {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Arrow */
+.corn-tooltip::after {
+  content: '';
+  position: absolute;
+  border: 5px solid transparent;
+}
+
+.corn-tooltip[data-placement='top']::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--corn-text-primary);
+}
+
+.corn-tooltip[data-placement='bottom']::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--corn-text-primary);
+}
+
+.corn-tooltip[data-placement='left']::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--corn-text-primary);
+}
+
+.corn-tooltip[data-placement='right']::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--corn-text-primary);
+}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Attaches a tooltip to a trigger element.
+ *
+ * @param {HTMLElement} triggerEl - Element that triggers the tooltip
+ * @param {Object} options
+ * @param {string} options.content - Tooltip text (required)
+ * @param {'top'|'bottom'|'left'|'right'} [options.placement='top'] - Preferred placement
+ * @param {number} [options.delay=0] - Show delay in ms
+ * @returns {{ show: Function, hide: Function, destroy: Function }}
+ */
+export function createTooltip(triggerEl: HTMLElement, options?: {
+    content: string;
+    placement?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+}): {
+    show: Function;
+    hide: Function;
+    destroy: Function;
+};

package/dist/index.css

@@ -0,0 +1,13 @@
+@import './components/modal/modal.css';
+@import './components/drawer/drawer.css';
+@import './components/accordion/accordion.css';
+@import './components/tooltip/tooltip.css';
+@import './components/popover/popover.css';
+@import './components/menu/menu.css';
+
+/* Tells lib/styles-check.js this stylesheet is loaded, so a component rendered
+   without it can say which import is missing. */
+:root {
+  --corn-styles-ui-overlays: 1;
+}
+