@hyperpackai/hyperui 0.1.0

package/dist/components/surfaces.js

@@ -0,0 +1,423 @@
+/**
+ * HyperUI Surface & Layout Components
+ * Paper · Box · Container · Stack · Grid · ImageList · List
+ */
+import { injectCSS, cn, h } from "../theme/index.js";
+// ============================================================
+// PAPER
+// ============================================================
+const PAPER_CSS = `
+.hu-paper { background: var(--hu-bg); border-radius: var(--hu-radius); transition: box-shadow var(--hu-duration); }
+.hu-paper--elevation-0  { box-shadow: none; }
+.hu-paper--elevation-1  { box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.1); }
+.hu-paper--elevation-2  { box-shadow: 0 3px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.08); }
+.hu-paper--elevation-3  { box-shadow: 0 8px 16px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.08); }
+.hu-paper--elevation-4  { box-shadow: 0 16px 32px rgba(0,0,0,.15), 0 6px 12px rgba(0,0,0,.1); }
+.hu-paper--elevation-5  { box-shadow: 0 24px 48px rgba(0,0,0,.18), 0 10px 20px rgba(0,0,0,.12); }
+.hu-paper--outlined { border: 1px solid var(--hu-border); box-shadow: none; }
+.hu-paper--square { border-radius: 0; }
+`;
+export function Paper(props) {
+    injectCSS("hu-paper", PAPER_CSS);
+    const { elevation = 1, variant = "elevation", square, component = "div" } = props;
+    return h(component, {
+        class: cn("hu-paper", variant === "elevation" ? `hu-paper--elevation-${elevation}` : "hu-paper--outlined", square && "hu-paper--square", props.class)
+    }, props.children);
+}
+export function Box(props) {
+    const { component = "div", display, flexDirection, alignItems, justifyContent, gap, padding, margin, width, height, overflow, position, style, onClick, children } = props;
+    const styles = [];
+    if (display)
+        styles.push(`display:${display}`);
+    if (flexDirection)
+        styles.push(`flex-direction:${flexDirection}`);
+    if (alignItems)
+        styles.push(`align-items:${alignItems}`);
+    if (justifyContent)
+        styles.push(`justify-content:${justifyContent}`);
+    if (gap !== undefined)
+        styles.push(`gap:${typeof gap === "number" ? `${gap}px` : gap}`);
+    if (padding !== undefined)
+        styles.push(`padding:${typeof padding === "number" ? `${padding}px` : padding}`);
+    if (margin !== undefined)
+        styles.push(`margin:${typeof margin === "number" ? `${margin}px` : margin}`);
+    if (width !== undefined)
+        styles.push(`width:${typeof width === "number" ? `${width}px` : width}`);
+    if (height !== undefined)
+        styles.push(`height:${typeof height === "number" ? `${height}px` : height}`);
+    if (overflow)
+        styles.push(`overflow:${overflow}`);
+    if (position)
+        styles.push(`position:${position}`);
+    if (style)
+        styles.push(style);
+    return h(component, { class: props.class, style: styles.join(";") || undefined, onClick }, children);
+}
+// ============================================================
+// CONTAINER
+// ============================================================
+const CONTAINER_CSS = `
+.hu-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--hu-space-4); padding-right: var(--hu-space-4); box-sizing: border-box; }
+.hu-container--xs { max-width: 444px; }
+.hu-container--sm { max-width: 600px; }
+.hu-container--md { max-width: 900px; }
+.hu-container--lg { max-width: 1200px; }
+.hu-container--xl { max-width: 1536px; }
+.hu-container--fluid { max-width: 100%; }
+.hu-container--disableGutters { padding-left: 0; padding-right: 0; }
+`;
+export function Container(props) {
+    injectCSS("hu-container", CONTAINER_CSS);
+    const { maxWidth = "lg", disableGutters } = props;
+    return h("div", {
+        class: cn("hu-container", `hu-container--${maxWidth}`, disableGutters && "hu-container--disableGutters", props.class)
+    }, props.children);
+}
+// ============================================================
+// STACK
+// ============================================================
+const STACK_CSS = `
+.hu-stack { display: flex; }
+.hu-stack--row { flex-direction: row; }
+.hu-stack--column { flex-direction: column; }
+.hu-stack--wrap { flex-wrap: wrap; }
+.hu-stack--align-start   { align-items: flex-start; }
+.hu-stack--align-center  { align-items: center; }
+.hu-stack--align-end     { align-items: flex-end; }
+.hu-stack--align-stretch { align-items: stretch; }
+.hu-stack--justify-start   { justify-content: flex-start; }
+.hu-stack--justify-center  { justify-content: center; }
+.hu-stack--justify-end     { justify-content: flex-end; }
+.hu-stack--justify-between { justify-content: space-between; }
+.hu-stack--justify-around  { justify-content: space-around; }
+.hu-stack--justify-evenly  { justify-content: space-evenly; }
+.hu-stack--divider > * + * { border-top: 1px solid var(--hu-border); }
+.hu-stack--row.hu-stack--divider > * + * { border-top: none; border-left: 1px solid var(--hu-border); }
+`;
+export function Stack(props) {
+    injectCSS("hu-stack", STACK_CSS);
+    const { direction = "column", spacing, alignItems, justifyContent, flexWrap, divider } = props;
+    const gapStyle = spacing !== undefined
+        ? `gap:${typeof spacing === "number" ? `${spacing * 8}px` : spacing}`
+        : undefined;
+    return h("div", {
+        class: cn("hu-stack", `hu-stack--${direction}`, alignItems && `hu-stack--align-${alignItems}`, justifyContent && `hu-stack--justify-${justifyContent}`, flexWrap && "hu-stack--wrap", divider && "hu-stack--divider", props.class),
+        style: gapStyle
+    }, props.children);
+}
+// ============================================================
+// GRID
+// ============================================================
+const GRID_CSS = `
+.hu-grid { display: grid; box-sizing: border-box; }
+.hu-grid--container { width: 100%; }
+.hu-grid--item { box-sizing: border-box; }
+`;
+export function Grid(props) {
+    injectCSS("hu-grid", GRID_CSS);
+    const { container, item, columns = 12, spacing = 0, xs, sm, md, lg, xl } = props;
+    const styles = [];
+    if (container) {
+        styles.push(`grid-template-columns: repeat(${columns}, 1fr)`);
+        if (spacing)
+            styles.push(`gap: ${spacing * 8}px`);
+        if (props.columnSpacing)
+            styles.push(`column-gap: ${props.columnSpacing * 8}px`);
+        if (props.rowSpacing)
+            styles.push(`row-gap: ${props.rowSpacing * 8}px`);
+    }
+    if (item) {
+        const colSpan = (v) => v === true ? "1 / -1" : v === "auto" ? "auto" : v ? `span ${v}` : undefined;
+        const span = colSpan(xs) ?? colSpan(sm) ?? colSpan(md) ?? colSpan(lg) ?? colSpan(xl);
+        if (span)
+            styles.push(`grid-column: ${span}`);
+    }
+    return h("div", {
+        class: cn("hu-grid", container && "hu-grid--container", item && "hu-grid--item", props.class),
+        style: styles.join(";") || undefined
+    }, props.children);
+}
+// ============================================================
+// IMAGE LIST
+// ============================================================
+const IMAGE_LIST_CSS = `
+.hu-image-list { display: grid; overflow-y: auto; list-style: none; padding: 0; margin: 0; }
+.hu-image-list--standard { align-items: start; }
+.hu-image-list--masonry { display: block; columns: 3; column-gap: 8px; }
+.hu-image-list--quilted { }
+.hu-image-list__item { overflow: hidden; position: relative; }
+.hu-image-list--masonry .hu-image-list__item { break-inside: avoid; margin-bottom: 8px; }
+.hu-image-list__img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.hu-image-list--standard .hu-image-list__img { height: inherit; }
+.hu-image-list__bar {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  background: linear-gradient(transparent, rgba(0,0,0,.65));
+  padding: var(--hu-space-3) var(--hu-space-2) var(--hu-space-2);
+  color: #fff;
+}
+.hu-image-list__bar--top { top: 0; bottom: auto; background: linear-gradient(rgba(0,0,0,.65), transparent); }
+.hu-image-list__title { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium); }
+.hu-image-list__subtitle { font-size: var(--hu-font-size-xs); opacity: .8; }
+`;
+export function ImageList(props) {
+    injectCSS("hu-image-list", IMAGE_LIST_CSS);
+    const { cols = 3, rowHeight = 180, gap = 8, variant = "standard", items } = props;
+    const styles = [
+        variant !== "masonry" ? `grid-template-columns: repeat(${cols}, 1fr)` : "",
+        variant !== "masonry" ? `grid-auto-rows: ${rowHeight === "auto" ? "auto" : `${rowHeight}px`}` : "",
+        `gap: ${gap}px`
+    ].filter(Boolean);
+    return h("ul", {
+        class: cn("hu-image-list", `hu-image-list--${variant}`, props.class),
+        style: styles.join(";")
+    }, ...items.map(item => h("li", {
+        class: "hu-image-list__item",
+        style: item.cols || item.rows
+            ? `grid-column: span ${item.cols ?? 1}; grid-row: span ${item.rows ?? 1};`
+            : undefined,
+        onClick: item.onClick
+    }, h("img", { class: "hu-image-list__img", src: item.src, alt: item.alt ?? item.title ?? "" }), item.title && h("div", { class: cn("hu-image-list__bar", item.titleBarPosition === "top" && "hu-image-list__bar--top") }, h("div", { class: "hu-image-list__title" }, item.title), item.subtitle && h("div", { class: "hu-image-list__subtitle" }, item.subtitle)))));
+}
+// ============================================================
+// LIST / LIST ITEM
+// ============================================================
+const LIST_CSS = `
+.hu-list { list-style: none; padding: 0; margin: 0; }
+.hu-list--dense .hu-list-item { padding-top: 4px; padding-bottom: 4px; }
+.hu-list--bordered { border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md); overflow: hidden; }
+.hu-list--bordered .hu-list-item + .hu-list-item { border-top: 1px solid var(--hu-border); }
+.hu-list--disablePadding .hu-list-item { padding-left: 0; padding-right: 0; }
+
+.hu-list-subheader {
+  padding: var(--hu-space-1-5) var(--hu-space-2) var(--hu-space-1);
+  font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold);
+  color: var(--hu-text-2); text-transform: uppercase; letter-spacing: .06em;
+  line-height: 2.4;
+}
+.hu-list-subheader--sticky { position: sticky; top: 0; background: var(--hu-bg); z-index: 1; }
+
+.hu-list-item {
+  display: flex; align-items: center;
+  padding: var(--hu-space-2-5) var(--hu-space-2);
+  min-height: 48px; box-sizing: border-box;
+  position: relative;
+}
+.hu-list-item--button { cursor: pointer; transition: background var(--hu-duration); }
+.hu-list-item--button:hover { background: var(--hu-bg-3); }
+.hu-list-item--button:focus-visible { background: var(--hu-bg-3); outline: none; }
+.hu-list-item--selected { background: var(--hu-primary-bg); color: var(--hu-primary); }
+.hu-list-item--disabled { opacity: .5; pointer-events: none; }
+.hu-list-item--divider { border-bottom: 1px solid var(--hu-border); }
+.hu-list-item-icon { min-width: 40px; color: var(--hu-text-2); display: flex; align-items: center; justify-content: flex-start; }
+.hu-list-item-avatar { min-width: 56px; }
+.hu-list-item-text { flex: 1; min-width: 0; }
+.hu-list-item-text__primary { font-size: var(--hu-font-size-sm); color: var(--hu-text); font-weight: var(--hu-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hu-list-item-text__secondary { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hu-list-item-secondary-action { margin-left: var(--hu-space-2); }
+`;
+export function ListSubheader(props) {
+    injectCSS("hu-list", LIST_CSS);
+    return h("li", { class: cn("hu-list-subheader", props.sticky && "hu-list-subheader--sticky", props.class) }, props.children);
+}
+export function List(props) {
+    injectCSS("hu-list", LIST_CSS);
+    return h("ul", {
+        class: cn("hu-list", props.dense && "hu-list--dense", props.bordered && "hu-list--bordered", props.disablePadding && "hu-list--disablePadding", props.class)
+    }, props.subheader, props.children);
+}
+export function ListItem(props) {
+    injectCSS("hu-list", LIST_CSS);
+    const { button, selected, disabled, divider, secondaryAction, onClick, children } = props;
+    return h(button ? "button" : "li", {
+        class: cn("hu-list-item", button && "hu-list-item--button", selected && "hu-list-item--selected", disabled && "hu-list-item--disabled", divider && "hu-list-item--divider", props.class),
+        type: button ? "button" : undefined,
+        disabled, onClick, tabindex: button ? "0" : undefined
+    }, children, secondaryAction && h("div", { class: "hu-list-item-secondary-action" }, secondaryAction));
+}
+export function ListItemIcon(props) {
+    injectCSS("hu-list", LIST_CSS);
+    return h("div", { class: cn("hu-list-item-icon", props.class) }, props.children);
+}
+export function ListItemText(props) {
+    injectCSS("hu-list", LIST_CSS);
+    return h("div", { class: cn("hu-list-item-text", props.class) }, props.primary && h("div", { class: "hu-list-item-text__primary" }, props.primary), props.secondary && h("div", { class: "hu-list-item-text__secondary" }, props.secondary));
+}
+// ============================================================
+// ENTERPRISE LAYOUTS
+// ============================================================
+const ENTERPRISE_LAYOUT_CSS = `
+.hu-page-layout {
+  min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
+  background: var(--hu-bg-2); color: var(--hu-text);
+}
+.hu-page-layout--contained .hu-page-layout__main {
+  width: 100%; max-width: var(--hu-page-max, 1200px); margin-inline: auto;
+}
+.hu-page-layout__header {
+  position: relative; z-index: var(--hu-z-sticky); background: var(--hu-bg);
+  border-block-end: 1px solid var(--hu-border);
+}
+.hu-page-layout__header--sticky { position: sticky; inset-block-start: 0; }
+.hu-page-layout__main {
+  min-width: 0; padding: var(--hu-page-padding, var(--hu-space-6));
+}
+.hu-page-layout__footer {
+  background: var(--hu-bg); border-block-start: 1px solid var(--hu-border);
+}
+
+.hu-dashboard-layout {
+  min-height: 100dvh; display: grid; color: var(--hu-text); background: var(--hu-bg-2);
+  grid-template-areas:
+    "sidebar header"
+    "sidebar main";
+  grid-template-columns: var(--hu-dashboard-sidebar, 280px) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.hu-dashboard-layout--collapsed { grid-template-columns: var(--hu-dashboard-sidebar-collapsed, 72px) minmax(0, 1fr); }
+.hu-dashboard-layout__header {
+  grid-area: header; min-width: 0; position: sticky; inset-block-start: 0;
+  z-index: var(--hu-z-sticky); background: var(--hu-bg);
+  border-block-end: 1px solid var(--hu-border);
+}
+.hu-dashboard-layout__sidebar {
+  grid-area: sidebar; min-width: 0; min-height: 0; overflow: auto;
+  background: var(--hu-bg); border-inline-end: 1px solid var(--hu-border);
+}
+.hu-dashboard-layout__main {
+  grid-area: main; min-width: 0; min-height: 0; overflow: auto;
+  padding: var(--hu-dashboard-padding, var(--hu-space-6));
+}
+.hu-dashboard-layout__aside {
+  border-inline-start: 1px solid var(--hu-border); background: var(--hu-bg);
+  min-width: 0; overflow: auto;
+}
+.hu-dashboard-layout--with-aside {
+  grid-template-areas:
+    "sidebar header header"
+    "sidebar main aside";
+  grid-template-columns: var(--hu-dashboard-sidebar, 280px) minmax(0, 1fr) var(--hu-dashboard-aside, 320px);
+}
+
+.hu-split-pane {
+  display: grid; min-width: 0; min-height: 0; overflow: hidden;
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md);
+}
+.hu-split-pane--horizontal { grid-template-columns: minmax(0, var(--hu-split-primary, 50%)) auto minmax(0, 1fr); }
+.hu-split-pane--vertical { grid-template-rows: minmax(0, var(--hu-split-primary, 50%)) auto minmax(0, 1fr); }
+.hu-split-pane__pane { min-width: 0; min-height: 0; overflow: auto; }
+.hu-split-pane__separator {
+  display: flex; align-items: center; justify-content: center;
+  background: var(--hu-bg-3); color: var(--hu-text-3); flex: none;
+}
+.hu-split-pane__separator--horizontal {
+  width: var(--hu-split-handle, 8px); cursor: col-resize; border-inline: 1px solid var(--hu-border);
+}
+.hu-split-pane__separator--vertical {
+  height: var(--hu-split-handle, 8px); cursor: row-resize; border-block: 1px solid var(--hu-border);
+}
+.hu-split-pane__separator:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: -2px; }
+
+.hu-resizable-panel {
+  min-width: var(--hu-panel-min-width, 160px); max-width: var(--hu-panel-max-width, none);
+  min-height: var(--hu-panel-min-height, 120px); max-height: var(--hu-panel-max-height, none);
+  width: var(--hu-panel-width, auto); height: var(--hu-panel-height, auto);
+  resize: var(--hu-panel-resize, both); overflow: auto;
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md);
+}
+.hu-resizable-panel__header {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--hu-space-3);
+  padding: var(--hu-space-3) var(--hu-space-4); border-block-end: 1px solid var(--hu-border);
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-resizable-panel__body { padding: var(--hu-space-4); min-width: 0; }
+
+@media (max-width: 768px) {
+  .hu-page-layout__main { padding: var(--hu-space-4); }
+  .hu-dashboard-layout,
+  .hu-dashboard-layout--with-aside {
+    grid-template-areas:
+      "header"
+      "main";
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+  .hu-dashboard-layout__sidebar,
+  .hu-dashboard-layout__aside { display: none; }
+  .hu-dashboard-layout__main { padding: var(--hu-space-4); }
+  .hu-split-pane--horizontal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
+  .hu-split-pane--horizontal .hu-split-pane__separator { width: auto; height: var(--hu-split-handle, 8px); cursor: row-resize; border-inline: 0; border-block: 1px solid var(--hu-border); }
+}
+`;
+export function PageLayout(props) {
+    injectCSS("hu-enterprise-layout", ENTERPRISE_LAYOUT_CSS);
+    const styles = [];
+    if (props.maxWidth !== undefined)
+        styles.push(`--hu-page-max:${toCssUnit(props.maxWidth)}`);
+    if (props.padding !== undefined)
+        styles.push(`--hu-page-padding:${toCssUnit(props.padding)}`);
+    return h("div", {
+        class: cn("hu-page-layout", props.contained && "hu-page-layout--contained", props.class),
+        style: styles.join(";") || undefined
+    }, props.header && h("header", {
+        class: cn("hu-page-layout__header", props.stickyHeader && "hu-page-layout__header--sticky")
+    }, props.header), h("main", { class: "hu-page-layout__main" }, props.children), props.footer && h("footer", { class: "hu-page-layout__footer" }, props.footer));
+}
+export function DashboardLayout(props) {
+    injectCSS("hu-enterprise-layout", ENTERPRISE_LAYOUT_CSS);
+    const styles = [];
+    if (props.sidebarWidth !== undefined)
+        styles.push(`--hu-dashboard-sidebar:${toCssUnit(props.sidebarWidth)}`);
+    if (props.collapsedSidebarWidth !== undefined)
+        styles.push(`--hu-dashboard-sidebar-collapsed:${toCssUnit(props.collapsedSidebarWidth)}`);
+    if (props.asideWidth !== undefined)
+        styles.push(`--hu-dashboard-aside:${toCssUnit(props.asideWidth)}`);
+    if (props.padding !== undefined)
+        styles.push(`--hu-dashboard-padding:${toCssUnit(props.padding)}`);
+    return h("div", {
+        class: cn("hu-dashboard-layout", props.collapsed && "hu-dashboard-layout--collapsed", props.aside != null && "hu-dashboard-layout--with-aside", props.class),
+        style: styles.join(";") || undefined
+    }, props.header && h("header", { class: "hu-dashboard-layout__header" }, props.header), props.sidebar && h("aside", { class: "hu-dashboard-layout__sidebar", "aria-label": "Primary navigation" }, props.sidebar), h("main", { class: "hu-dashboard-layout__main" }, props.children), props.aside && h("aside", { class: "hu-dashboard-layout__aside", "aria-label": "Secondary panel" }, props.aside));
+}
+export function SplitPane(props) {
+    injectCSS("hu-enterprise-layout", ENTERPRISE_LAYOUT_CSS);
+    const orientation = props.orientation ?? "horizontal";
+    const style = props.primarySize !== undefined
+        ? `--hu-split-primary:${toCssUnit(props.primarySize)}`
+        : undefined;
+    return h("div", {
+        class: cn("hu-split-pane", `hu-split-pane--${orientation}`, props.class),
+        style
+    }, h("div", { class: "hu-split-pane__pane" }, props.start), h("div", {
+        class: cn("hu-split-pane__separator", `hu-split-pane__separator--${orientation}`),
+        role: "separator",
+        tabindex: "0",
+        "aria-orientation": orientation === "horizontal" ? "vertical" : "horizontal",
+        "aria-label": props.separatorLabel ?? "Resize panels"
+    }), h("div", { class: "hu-split-pane__pane" }, props.end));
+}
+export function ResizablePanel(props) {
+    injectCSS("hu-enterprise-layout", ENTERPRISE_LAYOUT_CSS);
+    const styles = [];
+    if (props.width !== undefined)
+        styles.push(`--hu-panel-width:${toCssUnit(props.width)}`);
+    if (props.height !== undefined)
+        styles.push(`--hu-panel-height:${toCssUnit(props.height)}`);
+    if (props.minWidth !== undefined)
+        styles.push(`--hu-panel-min-width:${toCssUnit(props.minWidth)}`);
+    if (props.maxWidth !== undefined)
+        styles.push(`--hu-panel-max-width:${toCssUnit(props.maxWidth)}`);
+    if (props.minHeight !== undefined)
+        styles.push(`--hu-panel-min-height:${toCssUnit(props.minHeight)}`);
+    if (props.maxHeight !== undefined)
+        styles.push(`--hu-panel-max-height:${toCssUnit(props.maxHeight)}`);
+    styles.push(`--hu-panel-resize:${props.resize ?? "both"}`);
+    return h("section", {
+        class: cn("hu-resizable-panel", props.class),
+        style: styles.join(";")
+    }, (props.title || props.actions) && h("div", { class: "hu-resizable-panel__header" }, h("div", {}, props.title), props.actions && h("div", {}, props.actions)), h("div", { class: "hu-resizable-panel__body" }, props.children));
+}
+function toCssUnit(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}

package/dist/components/typography.d.ts

@@ -0,0 +1,69 @@
+/**
+ * HyperUI Typography Components
+ * Typography · Chip · Divider · Link · AvatarGroup
+ */
+import { type VNode } from "../theme/index.js";
+export type TypographyVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "overline" | "inherit";
+export type TypographyColor = "primary" | "secondary" | "error" | "warning" | "info" | "success";
+export type TypographyAlign = "left" | "center" | "right" | "justify";
+export interface TypographyProps {
+    variant?: TypographyVariant;
+    component?: string;
+    color?: TypographyColor;
+    align?: TypographyAlign;
+    gutterBottom?: boolean;
+    noWrap?: boolean;
+    paragraph?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Typography(props: TypographyProps): VNode;
+export type ChipColor = "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success";
+export type ChipVariant = "filled" | "outlined";
+export type ChipSize = "sm" | "md" | "lg";
+export interface ChipProps {
+    label: string;
+    color?: ChipColor;
+    variant?: ChipVariant;
+    size?: ChipSize;
+    icon?: unknown;
+    avatar?: string;
+    onDelete?: () => void;
+    onClick?: (e: MouseEvent) => void;
+    disabled?: boolean;
+    class?: string;
+}
+export declare function Chip(props: ChipProps): VNode;
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerTextAlign = "left" | "center" | "right";
+export interface DividerProps {
+    orientation?: DividerOrientation;
+    variant?: "fullWidth" | "inset" | "middle";
+    textAlign?: DividerTextAlign;
+    dashed?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Divider(props: DividerProps): VNode;
+export type LinkColor = "primary" | "inherit" | "secondary" | "error";
+export type LinkUnderline = "none" | "hover" | "always";
+export interface LinkProps {
+    href?: string;
+    target?: string;
+    rel?: string;
+    color?: LinkColor;
+    underline?: LinkUnderline;
+    component?: string;
+    onClick?: (e: MouseEvent) => void;
+    class?: string;
+    children?: unknown;
+}
+export declare function Link(props: LinkProps): VNode;
+export interface AvatarGroupProps {
+    max?: number;
+    size?: "sm" | "md" | "lg" | "xl";
+    class?: string;
+    children?: unknown[];
+}
+export declare function AvatarGroup(props: AvatarGroupProps): VNode;
+//# sourceMappingURL=typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/components/typography.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AA2CjE,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,WAAW,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAC7J,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AACjG,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAgBxD;AAkDD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AACvG,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAwB5C;AA+BD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAyBlD;AAqBD,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACtE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAc5C;AAkBD,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB;AAID,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAa1D"}