@lablup/ui-common 0.1.0-alpha.0

package/dist/components/Tabs/index.js

@@ -0,0 +1,3 @@
+import { TAG_CONFIG as e } from "./tabTags.js";
+import { Tabs as t } from "./Tabs2.js";
+export { e as TAG_CONFIG, t as Tabs };

package/dist/components/Tabs/tabTags.d.ts

@@ -0,0 +1,9 @@
+import { BadgeProps } from '../Badge';
+/** Guide tag types — displayed as a small badge after the label */
+export type TabTagType = "required" | "recommended" | "beta" | "experimental";
+/** English default label for every {@link TabTagType}. */
+export type TabTagLabels = Record<TabTagType, string>;
+/** Mapping of tag type to badge variant */
+export declare const TAG_CONFIG: Record<TabTagType, {
+    variant: BadgeProps["variant"];
+}>;

package/dist/components/Tabs/tabTags.js

@@ -0,0 +1,11 @@
+//#region src/components/Tabs/tabTags.ts
+var e = {
+	required: { variant: "warning" },
+	recommended: { variant: "primary" },
+	beta: { variant: "info" },
+	experimental: { variant: "warning" }
+};
+//#endregion
+export { e as TAG_CONFIG };
+
+//# sourceMappingURL=tabTags.js.map

package/dist/components/Tabs/tabTags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabTags.js","names":[],"sources":["../../../src/components/Tabs/tabTags.ts"],"sourcesContent":["/**\n * Tag label types and badge-variant configuration for the Tabs component.\n *\n * Used to display guide badge labels (Beta, Experimental, Required, Recommended)\n * next to tab labels. The label text itself is supplied by the consumer via\n * `Tabs`' `tagLabels` prop (see `TabTagLabels`) — this module only carries the\n * presentation mapping from tag type to badge variant.\n */\n\nimport type { BadgeProps } from \"../Badge\";\n\n/** Guide tag types — displayed as a small badge after the label */\nexport type TabTagType = \"required\" | \"recommended\" | \"beta\" | \"experimental\";\n\n/** English default label for every {@link TabTagType}. */\nexport type TabTagLabels = Record<TabTagType, string>;\n\n/** Mapping of tag type to badge variant */\nexport const TAG_CONFIG: Record<TabTagType, { variant: BadgeProps[\"variant\"] }> = {\n  required: { variant: \"warning\" },\n  recommended: { variant: \"primary\" },\n  beta: { variant: \"info\" },\n  experimental: { variant: \"warning\" },\n};\n"],"mappings":";AAkBA,IAAa,IAAqE;CAChF,UAAU,EAAE,SAAS,UAAU;CAC/B,aAAa,EAAE,SAAS,UAAU;CAClC,MAAM,EAAE,SAAS,OAAO;CACxB,cAAc,EAAE,SAAS,UAAU;AACrC"}

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface TooltipProps {
+    /** Tooltip content - can be string or ReactNode */
+    content: ReactNode;
+    /** Children to wrap with tooltip (trigger element) */
+    children: ReactNode;
+    /** Additional class name for the wrapper */
+    className?: string;
+    /** Additional class name for the tooltip content */
+    contentClassName?: string;
+    /** Custom ID for the tooltip (for aria-describedby association) */
+    tooltipId?: string;
+    /** Tab index for the wrapper. Use -1 when wrapping already-focusable elements like buttons. Defaults to 0. */
+    tabIndex?: number;
+}
+export declare function Tooltip({ content, children, className, contentClassName, tooltipId, tabIndex, }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip/Tooltip2.js

@@ -0,0 +1,67 @@
+/* empty css        */
+import { useCallback as e, useEffect as t, useId as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { createPortal as s } from "react-dom";
+//#region src/components/Tooltip/Tooltip.tsx
+function c({ content: c, children: l, className: u, contentClassName: d, tooltipId: f, tabIndex: p = 0 }) {
+	let [m, h] = i(!1), [g, _] = i(null), v = r(null), y = r(null), b = r(!0), x = n(), S = f ?? `tooltip-${x}`;
+	t(() => (b.current = !0, () => {
+		b.current = !1;
+	}), []), t(() => {
+		let e = y.current;
+		if (!e) return;
+		let t = () => {
+			b.current && h(!0);
+		}, n = () => {
+			b.current && (h(!1), _(null));
+		};
+		return e.addEventListener("focusin", t), e.addEventListener("focusout", n), () => {
+			e.removeEventListener("focusin", t), e.removeEventListener("focusout", n);
+		};
+	}, []), t(() => {
+		if (!m || !y.current || !b.current) return;
+		let e = y.current.getBoundingClientRect();
+		requestAnimationFrame(() => {
+			if (!b.current || !v.current) return;
+			let t = v.current.getBoundingClientRect(), n = e.top, r = window.innerHeight - e.bottom, i = t.height, a = n < i + 10 && r > n ? "bottom" : "top", o = e.left + e.width / 2, s = t.width, c = o - s / 2, l = window.innerWidth;
+			c + s > l - 16 && (c = l - s - 16), c < 16 && (c = 16);
+			let u;
+			u = a === "top" ? e.top - i - 8 : e.bottom + 8, _({
+				top: u,
+				left: c,
+				placement: a
+			});
+		});
+	}, [m]);
+	let C = e(() => {
+		h(!0);
+	}, []), w = e(() => {
+		h(!1), _(null);
+	}, []), T = m && /* @__PURE__ */ a("div", {
+		ref: v,
+		id: S,
+		className: `tooltip__content tooltip__content--${g?.placement ?? "top"} ${d ?? ""}`,
+		style: g ? {
+			top: `${String(g.top)}px`,
+			left: `${String(g.left)}px`
+		} : { visibility: "hidden" },
+		role: "tooltip",
+		children: typeof c == "string" ? /* @__PURE__ */ a("p", {
+			className: "tooltip__text",
+			children: c
+		}) : c
+	});
+	return /* @__PURE__ */ o("div", {
+		ref: y,
+		className: `tooltip__wrapper ${u ?? ""}`,
+		onMouseEnter: C,
+		onMouseLeave: w,
+		tabIndex: p,
+		"aria-describedby": m ? S : void 0,
+		children: [l, T && s(T, document.body)]
+	});
+}
+//#endregion
+export { c as Tooltip };
+
+//# sourceMappingURL=Tooltip2.js.map

package/dist/components/Tooltip/Tooltip2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip2.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/**\n * Tooltip Component\n *\n * A reusable tooltip component that displays content on hover.\n * Supports both simple text and complex ReactNode content.\n *\n * Accessibility:\n * - Shows on mouse hover and keyboard focus (WCAG 1.4.13)\n * - Uses role=\"tooltip\" for screen readers\n * - Accessible via keyboard navigation\n */\n\nimport { useState, useRef, useEffect, useCallback, useId, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport \"./Tooltip.css\";\n\nexport interface TooltipProps {\n  /** Tooltip content - can be string or ReactNode */\n  content: ReactNode;\n  /** Children to wrap with tooltip (trigger element) */\n  children: ReactNode;\n  /** Additional class name for the wrapper */\n  className?: string;\n  /** Additional class name for the tooltip content */\n  contentClassName?: string;\n  /** Custom ID for the tooltip (for aria-describedby association) */\n  tooltipId?: string;\n  /** Tab index for the wrapper. Use -1 when wrapping already-focusable elements like buttons. Defaults to 0. */\n  tabIndex?: number;\n}\n\ninterface TooltipPosition {\n  top: number;\n  left: number;\n  placement: \"top\" | \"bottom\";\n}\n\nexport function Tooltip({\n  content,\n  children,\n  className,\n  contentClassName,\n  tooltipId,\n  tabIndex = 0,\n}: TooltipProps) {\n  const [isVisible, setIsVisible] = useState(false);\n  const [tooltipPosition, setTooltipPosition] = useState<TooltipPosition | null>(null);\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const isMountedRef = useRef(true);\n  const generatedId = useId();\n  const effectiveTooltipId = tooltipId ?? `tooltip-${generatedId}`;\n\n  // Track mount state\n  useEffect(() => {\n    isMountedRef.current = true;\n    return () => {\n      isMountedRef.current = false;\n    };\n  }, []);\n\n  // Handle focus events using focusin/focusout which bubble from child elements\n  // This ensures tooltips show when keyboard focus moves to children (WCAG 1.4.13)\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n\n    // focusin/focusout bubble from child elements, unlike focus/blur\n    const handleFocusIn = () => {\n      if (isMountedRef.current) {\n        setIsVisible(true);\n      }\n    };\n\n    const handleFocusOut = () => {\n      if (isMountedRef.current) {\n        setIsVisible(false);\n        setTooltipPosition(null);\n      }\n    };\n\n    wrapper.addEventListener(\"focusin\", handleFocusIn);\n    wrapper.addEventListener(\"focusout\", handleFocusOut);\n\n    return () => {\n      wrapper.removeEventListener(\"focusin\", handleFocusIn);\n      wrapper.removeEventListener(\"focusout\", handleFocusOut);\n    };\n  }, []);\n\n  // Calculate tooltip position based on available space using fixed positioning\n  useEffect(() => {\n    if (!isVisible || !wrapperRef.current) return;\n    if (!isMountedRef.current) return;\n\n    const wrapperRect = wrapperRef.current.getBoundingClientRect();\n\n    // Use requestAnimationFrame to ensure DOM is updated\n    requestAnimationFrame(() => {\n      if (!isMountedRef.current || !tooltipRef.current) return;\n\n      const tooltipRect = tooltipRef.current.getBoundingClientRect();\n      const spaceAbove = wrapperRect.top;\n      const spaceBelow = window.innerHeight - wrapperRect.bottom;\n\n      const tooltipHeight = tooltipRect.height;\n      const margin = 10;\n\n      // Determine placement\n      const placement: \"top\" | \"bottom\" =\n        spaceAbove < tooltipHeight + margin && spaceBelow > spaceAbove\n          ? \"bottom\"\n          : \"top\";\n\n      // Calculate left position (center on wrapper, but ensure it stays within viewport)\n      const wrapperCenter = wrapperRect.left + wrapperRect.width / 2;\n      const tooltipWidth = tooltipRect.width;\n      let left = wrapperCenter - tooltipWidth / 2;\n      const viewportWidth = window.innerWidth;\n\n      // Keep tooltip within viewport bounds\n      if (left + tooltipWidth > viewportWidth - 16) {\n        left = viewportWidth - tooltipWidth - 16;\n      }\n      if (left < 16) {\n        left = 16;\n      }\n\n      // Calculate top position\n      let top: number;\n      if (placement === \"top\") {\n        top = wrapperRect.top - tooltipHeight - 8;\n      } else {\n        top = wrapperRect.bottom + 8;\n      }\n\n      setTooltipPosition({ top, left, placement });\n    });\n  }, [isVisible]);\n\n  const handleShow = useCallback(() => {\n    setIsVisible(true);\n  }, []);\n\n  const handleHide = useCallback(() => {\n    setIsVisible(false);\n    setTooltipPosition(null);\n  }, []);\n\n  const tooltipElement = isVisible && (\n    <div\n      ref={tooltipRef}\n      id={effectiveTooltipId}\n      className={`tooltip__content tooltip__content--${tooltipPosition?.placement ?? \"top\"} ${contentClassName ?? \"\"}`}\n      style={\n        tooltipPosition\n          ? {\n              top: `${String(tooltipPosition.top)}px`,\n              left: `${String(tooltipPosition.left)}px`,\n            }\n          : { visibility: \"hidden\" }\n      }\n      role=\"tooltip\"\n    >\n      {typeof content === \"string\" ? (\n        <p className=\"tooltip__text\">{content}</p>\n      ) : (\n        content\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={`tooltip__wrapper ${className ?? \"\"}`}\n      onMouseEnter={handleShow}\n      onMouseLeave={handleHide}\n      tabIndex={tabIndex}\n      aria-describedby={isVisible ? effectiveTooltipId : undefined}\n    >\n      {children}\n      {tooltipElement && createPortal(tooltipElement, document.body)}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAqCA,SAAgB,EAAQ,EACtB,YACA,aACA,cACA,qBACA,cACA,cAAW,KACI;CACf,IAAM,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAiB,KAAsB,EAAiC,IAAI,GAC7E,IAAa,EAAuB,IAAI,GACxC,IAAa,EAAuB,IAAI,GACxC,IAAe,EAAO,EAAI,GAC1B,IAAc,EAAM,GACpB,IAAqB,KAAa,WAAW;CAwCnD,AArCA,SACE,EAAa,UAAU,UACV;EACX,EAAa,UAAU;CACzB,IACC,CAAC,CAAC,GAIL,QAAgB;EACd,IAAM,IAAU,EAAW;EAC3B,IAAI,CAAC,GAAS;EAGd,IAAM,UAAsB;GAC1B,AAAI,EAAa,WACf,EAAa,EAAI;EAErB,GAEM,UAAuB;GAC3B,AAAI,EAAa,YACf,EAAa,EAAK,GAClB,EAAmB,IAAI;EAE3B;EAKA,OAHA,EAAQ,iBAAiB,WAAW,CAAa,GACjD,EAAQ,iBAAiB,YAAY,CAAc,SAEtC;GAEX,AADA,EAAQ,oBAAoB,WAAW,CAAa,GACpD,EAAQ,oBAAoB,YAAY,CAAc;EACxD;CACF,GAAG,CAAC,CAAC,GAGL,QAAgB;EAEd,IADI,CAAC,KAAa,CAAC,EAAW,WAC1B,CAAC,EAAa,SAAS;EAE3B,IAAM,IAAc,EAAW,QAAQ,sBAAsB;EAG7D,4BAA4B;GAC1B,IAAI,CAAC,EAAa,WAAW,CAAC,EAAW,SAAS;GAElD,IAAM,IAAc,EAAW,QAAQ,sBAAsB,GACvD,IAAa,EAAY,KACzB,IAAa,OAAO,cAAc,EAAY,QAE9C,IAAgB,EAAY,QAI5B,IACJ,IAAa,IAAgB,MAAU,IAAa,IAChD,WACA,OAGA,IAAgB,EAAY,OAAO,EAAY,QAAQ,GACvD,IAAe,EAAY,OAC7B,IAAO,IAAgB,IAAe,GACpC,IAAgB,OAAO;GAM7B,AAHI,IAAO,IAAe,IAAgB,OACxC,IAAO,IAAgB,IAAe,KAEpC,IAAO,OACT,IAAO;GAIT,IAAI;GAOJ,AANA,AAGE,IAHE,MAAc,QACV,EAAY,MAAM,IAAgB,IAElC,EAAY,SAAS,GAG7B,EAAmB;IAAE;IAAK;IAAM;GAAU,CAAC;EAC7C,CAAC;CACH,GAAG,CAAC,CAAS,CAAC;CAEd,IAAM,IAAa,QAAkB;EACnC,EAAa,EAAI;CACnB,GAAG,CAAC,CAAC,GAEC,IAAa,QAAkB;EAEnC,AADA,EAAa,EAAK,GAClB,EAAmB,IAAI;CACzB,GAAG,CAAC,CAAC,GAEC,IAAiB,KACrB,kBAAC,OAAD;EACE,KAAK;EACL,IAAI;EACJ,WAAW,sCAAsC,GAAiB,aAAa,MAAM,GAAG,KAAoB;EAC5G,OACE,IACI;GACE,KAAK,GAAG,OAAO,EAAgB,GAAG,EAAE;GACpC,MAAM,GAAG,OAAO,EAAgB,IAAI,EAAE;EACxC,IACA,EAAE,YAAY,SAAS;EAE7B,MAAK;EAEJ,UAAA,OAAO,KAAY,WAClB,kBAAC,KAAD;GAAG,WAAU;GAAiB,UAAA;EAAW,CAAA,IAEzC;CAEC,CAAA;CAGP,OACE,kBAAC,OAAD;EACE,KAAK;EACL,WAAW,oBAAoB,KAAa;EAC5C,cAAc;EACd,cAAc;EACJ;EACV,oBAAkB,IAAY,IAAqB,KAAA;EANrD,UAAA,CAQG,GACA,KAAkB,EAAa,GAAgB,SAAS,IAAI,CAC1D;;AAET"}

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

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';

package/dist/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+import { Tooltip as e } from "./Tooltip2.js";
+export { e as Tooltip };

package/dist/hooks/index.d.ts

@@ -0,0 +1 @@
+export { usePrefersReducedMotion } from './usePrefersReducedMotion';

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+import { usePrefersReducedMotion as e } from "./usePrefersReducedMotion.js";
+export { e as usePrefersReducedMotion };

package/dist/hooks/usePrefersReducedMotion.d.ts

@@ -0,0 +1,12 @@
+/**
+ * usePrefersReducedMotion Hook
+ *
+ * Reactive subscription to the `prefers-reduced-motion: reduce` media
+ * query. Returns true when the user has asked the OS to minimize
+ * non-essential motion; components should disable decorative animation
+ * (typewriter reveals, entrance transitions, pulses) in that case.
+ *
+ * Safe in non-browser/test environments: returns false when
+ * `window.matchMedia` is unavailable.
+ */
+export declare function usePrefersReducedMotion(): boolean;

package/dist/hooks/usePrefersReducedMotion.js

@@ -0,0 +1,22 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/hooks/usePrefersReducedMotion.ts
+var n = "(prefers-reduced-motion: reduce)";
+function r() {
+	return typeof window > "u" || typeof window.matchMedia != "function" ? !1 : window.matchMedia(n).matches;
+}
+function i() {
+	let [i, a] = t(r);
+	return e(() => {
+		if (typeof window > "u" || typeof window.matchMedia != "function") return;
+		let e = window.matchMedia(n), t = (e) => {
+			a(e.matches);
+		};
+		return e.addEventListener("change", t), () => {
+			e.removeEventListener("change", t);
+		};
+	}, []), i;
+}
+//#endregion
+export { i as usePrefersReducedMotion };
+
+//# sourceMappingURL=usePrefersReducedMotion.js.map

package/dist/hooks/usePrefersReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefersReducedMotion.js","names":[],"sources":["../../src/hooks/usePrefersReducedMotion.ts"],"sourcesContent":["/**\n * usePrefersReducedMotion Hook\n *\n * Reactive subscription to the `prefers-reduced-motion: reduce` media\n * query. Returns true when the user has asked the OS to minimize\n * non-essential motion; components should disable decorative animation\n * (typewriter reveals, entrance transitions, pulses) in that case.\n *\n * Safe in non-browser/test environments: returns false when\n * `window.matchMedia` is unavailable.\n */\n\nimport { useState, useEffect } from \"react\";\n\nconst QUERY = \"(prefers-reduced-motion: reduce)\";\n\nfunction getInitialValue(): boolean {\n  if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n    return false;\n  }\n  return window.matchMedia(QUERY).matches;\n}\n\nexport function usePrefersReducedMotion(): boolean {\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(getInitialValue);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\" || typeof window.matchMedia !== \"function\") {\n      return;\n    }\n\n    const mediaQuery = window.matchMedia(QUERY);\n    const handleChange = (event: MediaQueryListEvent) => {\n      setPrefersReducedMotion(event.matches);\n    };\n\n    mediaQuery.addEventListener(\"change\", handleChange);\n    return () => {\n      mediaQuery.removeEventListener(\"change\", handleChange);\n    };\n  }, []);\n\n  return prefersReducedMotion;\n}\n"],"mappings":";;AAcA,IAAM,IAAQ;AAEd,SAAS,IAA2B;CAIlC,OAHI,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,aACzD,KAEF,OAAO,WAAW,CAAK,CAAC,CAAC;AAClC;AAEA,SAAgB,IAAmC;CACjD,IAAM,CAAC,GAAsB,KAA2B,EAAS,CAAe;CAkBhF,OAhBA,QAAgB;EACd,IAAI,OAAO,SAAW,OAAe,OAAO,OAAO,cAAe,YAChE;EAGF,IAAM,IAAa,OAAO,WAAW,CAAK,GACpC,KAAgB,MAA+B;GACnD,EAAwB,EAAM,OAAO;EACvC;EAGA,OADA,EAAW,iBAAiB,UAAU,CAAY,SACrC;GACX,EAAW,oBAAoB,UAAU,CAAY;EACvD;CACF,GAAG,CAAC,CAAC,GAEE;AACT"}

package/dist/icons/AlertCircleIcon.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Alert Circle Icon
+ * Used for warnings and info alerts
+ */
+interface IconProps {
+    className?: string;
+    style?: React.CSSProperties;
+    size?: number;
+}
+export declare function AlertCircleIcon({ className, style, size }: IconProps): import("react").JSX.Element;
+export {};

package/dist/icons/AlertCircleIcon.js

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/icons/AlertCircleIcon.tsx
+function t({ className: t, style: n, size: r }) {
+	let i = r ?? "1em";
+	return /* @__PURE__ */ e("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: i,
+		height: i,
+		fill: "none",
+		viewBox: "0 0 24 24",
+		strokeWidth: 1.5,
+		stroke: "currentColor",
+		className: t,
+		style: n,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ e("path", {
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			d: "M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+		})
+	});
+}
+//#endregion
+export { t as AlertCircleIcon };
+
+//# sourceMappingURL=AlertCircleIcon.js.map

package/dist/icons/AlertCircleIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertCircleIcon.js","names":[],"sources":["../../src/icons/AlertCircleIcon.tsx"],"sourcesContent":["/**\n * Alert Circle Icon\n * Used for warnings and info alerts\n */\n\ninterface IconProps {\n  className?: string;\n  style?: React.CSSProperties;\n  size?: number;\n}\n\nexport function AlertCircleIcon({ className, style, size }: IconProps) {\n  const sizeValue = size ?? \"1em\";\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width={sizeValue}\n      height={sizeValue}\n      fill=\"none\"\n      viewBox=\"0 0 24 24\"\n      strokeWidth={1.5}\n      stroke=\"currentColor\"\n      className={className}\n      style={style}\n      aria-hidden=\"true\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z\"\n      />\n    </svg>\n  );\n}\n"],"mappings":";;AAWA,SAAgB,EAAgB,EAAE,cAAW,UAAO,WAAmB;CACrE,IAAM,IAAY,KAAQ;CAC1B,OACE,kBAAC,OAAD;EACE,OAAM;EACN,OAAO;EACP,QAAQ;EACR,MAAK;EACL,SAAQ;EACR,aAAa;EACb,QAAO;EACI;EACJ;EACP,eAAY;EAEZ,UAAA,kBAAC,QAAD;GACE,eAAc;GACd,gBAAe;GACf,GAAE;EACH,CAAA;CACE,CAAA;AAET"}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @lablup/ui-common
+ *
+ * Product-neutral UI components and design tokens shared across Lablup
+ * products. Import from here for the full surface, or from
+ * `@lablup/ui-common/components/<Name>` when you want the smallest
+ * possible graph (see the component subpath exports in package.json).
+ *
+ * Styling is opt-in and lives in a separate entry point:
+ * `@lablup/ui-common/styles/base.css` (required) plus at most one
+ * `@lablup/ui-common/styles/themes/<theme>.css` (optional).
+ */
+export * from './components/BaseCard';
+export * from './components/Badge';
+export * from './components/Button';
+export * from './components/DataTable';
+export * from './components/Drawer';
+export * from './components/EmptyState';
+export * from './components/ErrorState';
+export * from './components/PageHeader';
+export * from './components/PageLayout';
+export * from './components/ProgressBar';
+export * from './components/Skeleton';
+export * from './components/SmoothHeight';
+export * from './components/StatCard';
+export * from './components/StatusTag';
+export * from './components/Tabs';
+export * from './components/Tooltip';
+export * from './hooks';

package/dist/index.js

@@ -0,0 +1,24 @@
+import { BaseCard as e } from "./components/BaseCard/BaseCard2.js";
+import { Badge as t } from "./components/Badge/Badge2.js";
+import { Button as n } from "./components/Button/Button2.js";
+import { DataTable as r } from "./components/DataTable/DataTable2.js";
+import { Drawer as i } from "./components/Drawer/Drawer2.js";
+import { EmptyState as a } from "./components/EmptyState/EmptyState2.js";
+import { ErrorState as o } from "./components/ErrorState/ErrorState2.js";
+import { PageHeader as s } from "./components/PageHeader/PageHeader2.js";
+import { PageLayout as c } from "./components/PageLayout/PageLayout2.js";
+import { ProgressBar as l } from "./components/ProgressBar/ProgressBar2.js";
+import { Skeleton as u } from "./components/Skeleton/Skeleton2.js";
+import { SkeletonCard as d } from "./components/Skeleton/SkeletonCard2.js";
+import { SkeletonText as f } from "./components/Skeleton/SkeletonText2.js";
+import { SkeletonChart as p } from "./components/Skeleton/SkeletonChart2.js";
+import { SkeletonRow as m } from "./components/Skeleton/SkeletonRow2.js";
+import { SmoothHeight as h } from "./components/SmoothHeight/SmoothHeight2.js";
+import { usePrefersReducedMotion as g } from "./hooks/usePrefersReducedMotion.js";
+import { StatCard as _ } from "./components/StatCard/StatCard2.js";
+import { formatCompactNumber as v } from "./components/StatCard/formatters.js";
+import { StatusTag as y } from "./components/StatusTag/StatusTag2.js";
+import { TAG_CONFIG as b } from "./components/Tabs/tabTags.js";
+import { Tabs as x } from "./components/Tabs/Tabs2.js";
+import { Tooltip as S } from "./components/Tooltip/Tooltip2.js";
+export { t as Badge, e as BaseCard, n as Button, r as DataTable, i as Drawer, a as EmptyState, o as ErrorState, s as PageHeader, c as PageLayout, l as ProgressBar, u as Skeleton, d as SkeletonCard, p as SkeletonChart, m as SkeletonRow, f as SkeletonText, h as SmoothHeight, _ as StatCard, y as StatusTag, b as TAG_CONFIG, x as Tabs, S as Tooltip, v as formatCompactNumber, g as usePrefersReducedMotion };

package/dist/styles/base.css

@@ -0,0 +1,169 @@
+/**
+ * @lablup/ui-common design tokens
+ *
+ * The 113 `--token-*` custom properties every component in this package
+ * reads. This file is the token contract: renaming or removing an entry is
+ * a breaking change, exactly like renaming a prop (see CONTRIBUTING.md).
+ *
+ * Values are the resolved defaults of the source product's default theme
+ * (theme family "stained", color scheme "light"), taken from that product's
+ * `src/themes/base.css` (structural tokens: spacing, radius, motion, type
+ * scale, focus ring, z-index) and `src/themes/tokens/stained-light.css`
+ * (color and button tokens). A handful of tokens that no source theme
+ * ever defines (e.g. `--token-colorTextQuaternary`, `--token-marginXXS`)
+ * are given the same literal fallback value the component CSS already
+ * carries at its call site.
+ *
+ * Every component also gives every token reference here its own inline
+ * fallback, so a consumer that imports a component without this stylesheet
+ * still gets a rendered (unthemed) result.
+ *
+ * Those inline fallbacks are NOT all equal to the values above. Roughly 143
+ * of them were inherited verbatim from the source product, where they predate
+ * current theme and were already dead code (the token is always defined, so
+ * the fallback never applies). The most visible divergence is
+ * `--token-colorPrimary`, whose call-site fallback is the older orange
+ * `#ff7a00` rather than the current `#8b5cf6`.
+ *
+ * Consequence: importing a component WITHOUT this stylesheet renders, but not
+ * in the documented default palette. Import `styles/base.css`. Aligning the
+ * fallbacks is a deliberate visual change and was left out of the extraction,
+ * which was required to preserve current rendering exactly.
+ */
+
+:root {
+  --token-borderRadius: 0.375rem;
+  --token-borderRadiusLG: 0.5rem;
+  --token-borderRadiusSM: 0.25rem;
+  --token-borderRadiusXL: 0.75rem;
+  --token-boxShadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02),
+    0 2px 4px 0 rgba(0, 0, 0, 0.02);
+  --token-boxShadowSecondary:
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --token-boxShadowTertiary: 0 1px 3px rgba(0, 0, 0, 0.1);
+  --token-buttonActiveTransform: scale(0.97);
+  --token-buttonBorderRadius: 0.375rem;
+  --token-buttonHoverTransform: translateY(-1px);
+  --token-buttonDangerBg: transparent;
+  --token-buttonDangerBgActive: rgba(255, 77, 79, 0.2);
+  --token-buttonDangerBgHover: rgba(255, 77, 79, 0.1);
+  --token-buttonDangerBorder: 1px solid #c82333;
+  --token-buttonDangerShadow: none;
+  --token-buttonDangerText: #c82333;
+  --token-buttonGhostBackdrop: none;
+  --token-buttonGhostBg: transparent;
+  --token-buttonGhostBgActive: #f5f5f5;
+  --token-buttonGhostBgHover: rgba(139, 92, 246, 0.06);
+  --token-buttonGhostBorder: 1px solid transparent;
+  --token-buttonGhostBorderHover: 1px solid transparent;
+  --token-buttonGhostShadow: none;
+  --token-buttonGhostShadowHover: none;
+  --token-buttonPrimaryBackdrop: none;
+  --token-buttonPrimaryBg:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #8b5cf6;
+  --token-buttonPrimaryBgHover:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #7c3aed;
+  --token-buttonPrimaryBorder: none;
+  --token-buttonPrimaryShadow:
+    0 2px 6px rgba(139, 92, 246, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
+  --token-buttonPrimaryShadowHover:
+    0 4px 10px rgba(139, 92, 246, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.25);
+  --token-buttonSecondaryBackdrop: none;
+  --token-buttonSecondaryBg: rgba(139, 92, 246, 0.04);
+  --token-buttonSecondaryBgActive: #f5f5f5;
+  --token-buttonSecondaryBgHover: rgba(139, 92, 246, 0.08);
+  --token-buttonSecondaryBorder: 1px solid rgba(139, 92, 246, 0.2);
+  --token-buttonSecondaryBorderHover: 1px solid rgba(139, 92, 246, 0.3);
+  --token-buttonSecondaryShadow:
+    0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+  --token-buttonSuccessBackdrop: none;
+  --token-buttonSuccessBg:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%), #007a63;
+  --token-buttonSuccessBgHover:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 50%), #006654;
+  --token-buttonSuccessBorder: none;
+  --token-buttonSuccessShadow:
+    0 2px 6px rgba(0, 189, 155, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
+  --token-colorBgContainer: #ffffff;
+  --token-colorBgElevated: #ffffff;
+  --token-colorBgLayout: #f5f5f5;
+  --token-colorBgMask: rgba(0, 0, 0, 0.45);
+  --token-colorBgTextActive: rgba(0, 0, 0, 0.08);
+  --token-colorBgTextHover: rgba(0, 0, 0, 0.04);
+  --token-colorBorder: #d9d9d9;
+  --token-colorBorderSecondary: #e5e7eb;
+  --token-colorFillQuaternary: #fafafa;
+  --token-colorFillSecondary: #f3f4f6;
+  --token-colorFillTertiary: #f9fafb;
+  --token-colorError: #c82333;
+  --token-colorInfo: #0066cc;
+  --token-colorLink: #8b5cf6;
+  --token-colorLinkHover: #7c3aed;
+  --token-colorPrimary: #8b5cf6;
+  --token-colorPrimaryActive: #6d28d9;
+  --token-colorPrimaryBg: rgba(139, 92, 246, 0.1);
+  --token-colorPrimaryBorder: rgba(139, 92, 246, 0.2);
+  --token-colorSuccess: #007a63;
+  --token-colorSuccessActive: #005244;
+  --token-colorSuccessBg: rgba(0, 189, 155, 0.05);
+  --token-colorSuccessBorder: rgba(0, 189, 155, 0.4);
+  --token-colorSuccessBorderHover: rgba(0, 189, 155, 0.6);
+  --token-colorSuccessBoxShadow: 0 4px 12px rgba(0, 189, 155, 0.15);
+  --token-colorWarning: #9a5d00;
+  --token-colorText: #141414;
+  --token-colorTextQuaternary: #bfbfbf;
+  --token-colorTextSecondary: #595959;
+  --token-colorTextTertiary: #737373;
+  --token-focusRingColor: #8b5cf6;
+  --token-focusRingOffset: 2px;
+  --token-focusRingStyle: solid;
+  --token-focusRingWidth: 2px;
+  --token-fontFamily:
+    "Ubuntu Sans", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+  --token-fontSize: 0.875rem;
+  --token-fontSizeLG: 1rem;
+  --token-fontSizeSM: 0.75rem;
+  --token-fontSizeXL: 1.25rem;
+  --token-fontSizeXXS: 0.5rem;
+  --token-marginXXS: 4px;
+  --token-padding: 0.75rem;
+  --token-paddingLG: 1.5rem;
+  --token-paddingMD: 1rem;
+  --token-paddingSM: 0.5rem;
+  --token-paddingXL: 2rem;
+  --token-paddingXS: 0.25rem;
+  --token-paddingXXS: 0.125rem;
+  --token-motionDurationFast: 0.1s;
+  --token-motionDurationMid: 0.2s;
+  --token-motionDurationSlow: 0.3s;
+  --token-themeTransitionDuration: 0.25s;
+  --token-themeTransitionTiming: ease-in-out;
+  --token-tabActiveBg: rgba(139, 92, 246, 0.1);
+  --token-tabFocusShadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
+  --token-tabHoverBg: #f3f4f6;
+  --token-zIndexDrawer: 1100;
+  --token-zIndexDrawerContent: 1101;
+  --token-zIndexPopover: 1150;
+  --token-zIndexTooltip: 1300;
+
+  /* Type scale (source `src/themes/base.css` :root, which wins over the
+     call-site fallback in the source product today). */
+  --token-fontSizeHeading1: 2rem;
+  --token-fontSizeHeading2: 1.5rem;
+  --token-fontSizeHeading3: 1.25rem;
+  --token-fontSizeHeading4: 1rem;
+  --token-fontSizeDisplay4: 1.75rem;
+
+  /* Referenced by components but defined by no source theme, so the
+     call-site fallback is what renders today and is carried here verbatim. */
+  --token-boxShadowDrawerRight: -4px 0 20px rgba(0, 0, 0, 0.15);
+  --token-buttonPrimaryBgActive: var(--token-colorPrimaryActive);
+  --token-buttonSuccessBgActive: var(--token-colorSuccessActive);
+  --token-buttonDangerShadowHover: var(--token-buttonDangerShadow);
+  --token-buttonSuccessShadowHover: var(--token-buttonSuccessShadow);
+  --token-buttonSecondaryShadowHover:
+    0 2px 6px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}

package/dist/styles/themes/bliss-dark.css

@@ -0,0 +1,123 @@
+/**
+ * @lablup/ui-common theme tokens: bliss-dark
+ *
+ * Overrides for the subset of the 104-token contract (see
+ * ../base.css) that this theme customizes. Import at most one
+ * theme file alongside base.css; components never import a
+ * theme file themselves.
+ */
+
+[data-theme="bliss-dark"] {
+  --token-boxShadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --token-boxShadowSecondary: 0 2px 10px rgba(0, 0, 0, 0.4);
+  --token-buttonActiveTransform: translateY(1px);
+  --token-buttonBorderRadius: 3px;
+  --token-buttonDangerBg: linear-gradient(
+    180deg,
+    #ff7070 0%,
+    #ff5c5c 45%,
+    #e04040 100%
+  );
+  --token-buttonDangerBgActive: #cc3333;
+  --token-buttonDangerBgHover: linear-gradient(
+    180deg,
+    #ff8585 0%,
+    #ff7070 45%,
+    #ff5c5c 100%
+  );
+  --token-buttonDangerBorder: 1px solid #b52828;
+  --token-buttonDangerShadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
+  --token-buttonDangerText: white;
+  --token-buttonGhostBackdrop: none;
+  --token-buttonGhostBg: transparent;
+  --token-buttonGhostBgActive: rgba(255, 255, 255, 0.1);
+  --token-buttonGhostBgHover: rgba(255, 255, 255, 0.06);
+  --token-buttonGhostBorder: 1px solid transparent;
+  --token-buttonGhostBorderHover: 1px solid rgba(255, 255, 255, 0.1);
+  --token-buttonGhostShadow: none;
+  --token-buttonGhostShadowHover: none;
+  --token-buttonHoverTransform: none;
+  --token-buttonPrimaryBg: linear-gradient(
+    180deg,
+    #5a96f7 0%,
+    #4b8bf5 45%,
+    #3570d4 100%
+  );
+  --token-buttonPrimaryBgHover: linear-gradient(
+    180deg,
+    #6ba3f5 0%,
+    #5a96f7 45%,
+    #4b8bf5 100%
+  );
+  --token-buttonPrimaryBorder: 1px solid #1b4aaf;
+  --token-buttonPrimaryShadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
+  --token-buttonPrimaryShadowHover:
+    inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 4px rgba(0, 0, 0, 0.45);
+  --token-buttonSecondaryBackdrop: none;
+  --token-buttonSecondaryBg: linear-gradient(180deg, #3a3e48 0%, #2e323c 100%);
+  --token-buttonSecondaryBgActive: linear-gradient(
+    180deg,
+    #1e2228 0%,
+    #262a32 8%,
+    #282c34 94%,
+    #2e323c 100%
+  );
+  --token-buttonSecondaryBgHover: linear-gradient(180deg, #444854 0%, #3a3e48 100%);
+  --token-buttonSecondaryBorder: 1px solid #4a4e58;
+  --token-buttonSecondaryBorderHover: 1px solid #5a5e68;
+  --token-buttonSecondaryShadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.3);
+  --token-buttonSuccessBg: linear-gradient(
+    180deg,
+    #5cbf60 0%,
+    #4caf50 45%,
+    #43a047 100%
+  );
+  --token-buttonSuccessBgHover: linear-gradient(
+    180deg,
+    #6dcd70 0%,
+    #5cbf60 45%,
+    #4caf50 100%
+  );
+  --token-buttonSuccessBorder: 1px solid #2e7d32;
+  --token-buttonSuccessShadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.4);
+  --token-colorBgContainer: #22262e;
+  --token-colorBgElevated: #2a2e38;
+  --token-colorBgLayout: #1a1d24;
+  --token-colorBorder: #3a3e48;
+  --token-colorBorderSecondary: #2e323c;
+  --token-colorError: #ff5c5c;
+  --token-colorFillQuaternary: rgba(255, 255, 255, 0.02);
+  --token-colorFillSecondary: rgba(255, 255, 255, 0.06);
+  --token-colorFillTertiary: rgba(255, 255, 255, 0.04);
+  --token-colorInfo: #4b8bf5;
+  --token-colorLink: #4b8bf5;
+  --token-colorPrimary: #4b8bf5;
+  --token-colorPrimaryActive: #245edc;
+  --token-colorPrimaryBg: rgba(75, 139, 245, 0.12);
+  --token-colorPrimaryBorder: rgba(75, 139, 245, 0.3);
+  --token-colorSuccess: #4caf50;
+  --token-colorSuccessActive: #43a047;
+  --token-colorSuccessBg: rgba(76, 175, 80, 0.12);
+  --token-colorSuccessBorder: rgba(76, 175, 80, 0.4);
+  --token-colorSuccessBorderHover: rgba(76, 175, 80, 0.6);
+  --token-colorSuccessBoxShadow: 0 2px 6px rgba(76, 175, 80, 0.2);
+  --token-colorText: #e8e6e0;
+  --token-colorTextSecondary: #b5b3ac;
+  --token-colorTextTertiary: #908e88;
+  --token-colorWarning: #ffb74d;
+  --token-focusRingColor: #4b8bf5;
+  --token-focusRingOffset: 2px;
+  --token-focusRingStyle: solid;
+  --token-focusRingWidth: 2px;
+  --token-fontFamily:
+    "Tahoma", "Gulim", system-ui, -apple-system, BlinkMacSystemFont, "Ubuntu Sans",
+    "Pretendard Variable", "Segoe UI", Roboto, sans-serif;
+  --token-tabActiveBg: rgba(75, 139, 245, 0.1);
+  --token-tabFocusShadow: 0 0 0 2px rgba(75, 139, 245, 0.2);
+  --token-tabHoverBg: rgba(255, 255, 255, 0.06);
+}