@lablup/ui-common 0.1.0-alpha.1 → 0.1.0-alpha.10

package/dist/components/Skeleton/SkeletonRow2.js

@@ -2,9 +2,9 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css            */
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonRow.tsx
-function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c }) {
-	let l = Array.from({ length: o });
-	return /* @__PURE__ */ n(t, { children: l.map((t, o) => /* @__PURE__ */ r("div", {
+function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s = "", testId: c, loadingLabel: l }) {
+	let u = Array.from({ length: o });
+	return /* @__PURE__ */ n(t, { children: u.map((t, o) => /* @__PURE__ */ r("div", {
 		className: `skeleton-row ${s}`,
 		"data-testid": c ? `${c}-${String(o)}` : void 0,
 		role: "status",
@@ -13,6 +13,7 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			i && /* @__PURE__ */ n("div", {
 				className: "skeleton-row__avatar",
 				children: /* @__PURE__ */ n(e, {
+					loadingLabel: l,
 					width: "40px",
 					height: "40px",
 					variant: "circle"
@@ -21,9 +22,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			/* @__PURE__ */ r("div", {
 				className: "skeleton-row__content",
 				children: [/* @__PURE__ */ n(e, {
+					loadingLabel: l,
 					width: "25%",
 					height: "14px"
 				}), /* @__PURE__ */ n(e, {
+					loadingLabel: l,
 					width: "100%",
 					height: "16px"
 				})]
@@ -31,9 +34,11 @@ function i({ showAvatar: i = !1, showActions: a = !1, count: o = 1, className: s
 			a && /* @__PURE__ */ r("div", {
 				className: "skeleton-row__actions",
 				children: [/* @__PURE__ */ n(e, {
+					loadingLabel: l,
 					width: "32px",
 					height: "32px"
 				}), /* @__PURE__ */ n(e, {
+					loadingLabel: l,
 					width: "32px",
 					height: "32px"
 				})]

package/dist/components/Skeleton/SkeletonRow2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow Component\n *\n * Skeleton placeholder for list rows and table rows.\n * Mimics the structure of a log entry or table row.\n *\n * @example\n * // Basic usage\n * <SkeletonRow />\n *\n * @example\n * // With avatar\n * <SkeletonRow showAvatar />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n  /** Show avatar/icon on the left */\n  showAvatar?: boolean;\n  /** Show action buttons on the right */\n  showActions?: boolean;\n  /** Number of rows to display */\n  count?: number;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonRow provides a loading placeholder for list/table rows.\n *\n * Features:\n * - Optional avatar/icon\n * - Optional action buttons\n * - Multiple rows for lists\n */\nexport function SkeletonRow({\n  showAvatar = false,\n  showActions = false,\n  count = 1,\n  className = \"\",\n  testId,\n}: SkeletonRowProps) {\n  const rows = Array.from({ length: count });\n\n  return (\n    <>\n      {rows.map((_, index) => (\n        <div\n          key={index}\n          className={`skeleton-row ${className}`}\n          data-testid={testId ? `${testId}-${String(index)}` : undefined}\n          role=\"status\"\n          aria-busy=\"true\"\n        >\n          {showAvatar && (\n            <div className=\"skeleton-row__avatar\">\n              <Skeleton width=\"40px\" height=\"40px\" variant=\"circle\" />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton width=\"25%\" height=\"14px\" />\n            <Skeleton width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton width=\"32px\" height=\"32px\" />\n              <Skeleton width=\"32px\" height=\"32px\" />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAuCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,aACmB;CACnB,IAAM,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,CAAC;CAEzC,OACE,kBAAA,GAAA,EAAA,UACG,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;EAEE,WAAW,gBAAgB;EAC3B,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EALZ,UAAA;GAOG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;KAAO,SAAQ;IAAU,CAAA;GACpD,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAM,QAAO;IAAQ,CAAA,GACrC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,GACtC,kBAAC,GAAD;KAAU,OAAM;KAAO,QAAO;IAAQ,CAAA,CACnC;;EAEJ;CArBE,GAAA,CAqBF,CACN,EACD,CAAA;AAEN"}
+{"version":3,"file":"SkeletonRow2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonRow.tsx"],"sourcesContent":["/**\n * SkeletonRow Component\n *\n * Skeleton placeholder for list rows and table rows.\n * Mimics the structure of a log entry or table row.\n *\n * @example\n * // Basic usage\n * <SkeletonRow />\n *\n * @example\n * // With avatar\n * <SkeletonRow showAvatar />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonRow.css\";\n\nexport interface SkeletonRowProps {\n  /** Show avatar/icon on the left */\n  showAvatar?: boolean;\n  /** Show action buttons on the right */\n  showActions?: boolean;\n  /** Number of rows to display */\n  count?: number;\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name for each skeleton inside. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonRow provides a loading placeholder for list/table rows.\n *\n * Features:\n * - Optional avatar/icon\n * - Optional action buttons\n * - Multiple rows for lists\n */\nexport function SkeletonRow({\n  showAvatar = false,\n  showActions = false,\n  count = 1,\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonRowProps) {\n  const rows = Array.from({ length: count });\n\n  return (\n    <>\n      {rows.map((_, index) => (\n        <div\n          key={index}\n          className={`skeleton-row ${className}`}\n          data-testid={testId ? `${testId}-${String(index)}` : undefined}\n          role=\"status\"\n          aria-busy=\"true\"\n        >\n          {showAvatar && (\n            <div className=\"skeleton-row__avatar\">\n              <Skeleton\n                loadingLabel={loadingLabel}\n                width=\"40px\"\n                height=\"40px\"\n                variant=\"circle\"\n              />\n            </div>\n          )}\n          <div className=\"skeleton-row__content\">\n            <Skeleton loadingLabel={loadingLabel} width=\"25%\" height=\"14px\" />\n            <Skeleton loadingLabel={loadingLabel} width=\"100%\" height=\"16px\" />\n          </div>\n          {showActions && (\n            <div className=\"skeleton-row__actions\">\n              <Skeleton loadingLabel={loadingLabel} width=\"32px\" height=\"32px\" />\n              <Skeleton loadingLabel={loadingLabel} width=\"32px\" height=\"32px\" />\n            </div>\n          )}\n        </div>\n      ))}\n    </>\n  );\n}\n\nexport default SkeletonRow;\n"],"mappings":";;;;AAyCA,SAAgB,EAAY,EAC1B,gBAAa,IACb,iBAAc,IACd,WAAQ,GACR,eAAY,IACZ,WACA,mBACmB;CACnB,IAAM,IAAO,MAAM,KAAK,EAAE,QAAQ,EAAM,CAAC;CAEzC,OACE,kBAAA,GAAA,EAAA,UACG,EAAK,KAAK,GAAG,MACZ,kBAAC,OAAD;EAEE,WAAW,gBAAgB;EAC3B,eAAa,IAAS,GAAG,EAAO,GAAG,OAAO,CAAK,MAAM,KAAA;EACrD,MAAK;EACL,aAAU;EALZ,UAAA;GAOG,KACC,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KACgB;KACd,OAAM;KACN,QAAO;KACP,SAAQ;IACT,CAAA;GACE,CAAA;GAEP,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAM,QAAO;IAAQ,CAAA,GACjE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;GACJ,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,GAClE,kBAAC,GAAD;KAAwB;KAAc,OAAM;KAAO,QAAO;IAAQ,CAAA,CAC/D;;EAEJ;CA1BE,GAAA,CA0BF,CACN,EACD,CAAA;AAEN"}

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -7,6 +7,8 @@ export interface SkeletonTextProps {
     className?: string;
     /** Test ID for testing */
     testId?: string;
+    /** Accessible name for each skeleton inside. Defaults to "Loading". */
+    loadingLabel?: string;
 }
 /**
  * SkeletonText provides a loading placeholder for text content.
@@ -16,5 +18,5 @@ export interface SkeletonTextProps {
  * - Configurable line spacing
  * - Accessible via aria-busy
  */
-export declare function SkeletonText({ lines, spacing, className, testId, }: SkeletonTextProps): import("react").JSX.Element;
+export declare function SkeletonText({ lines, spacing, className, testId, loadingLabel, }: SkeletonTextProps): import("react").JSX.Element;
 export default SkeletonText;

package/dist/components/Skeleton/SkeletonText2.js

@@ -2,18 +2,19 @@ import { Skeleton as e } from "./Skeleton2.js";
 /* empty css             */
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Skeleton/SkeletonText.tsx
-function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a }) {
-	let o = [
+function n({ lines: n = 3, spacing: r = "normal", className: i = "", testId: a, loadingLabel: o }) {
+	let s = [
 		"skeleton-text",
 		`skeleton-text--${r}`,
 		i
-	].filter(Boolean).join(" "), s = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
+	].filter(Boolean).join(" "), c = Array.from({ length: n }, (e, t) => t === n - 1 ? "60%" : t % 2 == 0 ? "100%" : "95%");
 	return /* @__PURE__ */ t("div", {
-		className: o,
+		className: s,
 		"data-testid": a,
 		role: "status",
 		"aria-busy": "true",
-		children: s.map((n, r) => /* @__PURE__ */ t(e, {
+		children: c.map((n, r) => /* @__PURE__ */ t(e, {
+			loadingLabel: o,
 			width: n,
 			height: "1em",
 			variant: "text"

package/dist/components/Skeleton/SkeletonText2.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n}\n\n/**\n * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {widths.map((width, index) => (\n        <Skeleton key={index} width={width} height=\"1em\" variant=\"text\" />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAqCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,aACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GAA6B;GAAO,QAAO;GAAM,SAAQ;EAAQ,GAAlD,CAAkD,CAClE;CACE,CAAA;AAET"}
+{"version":3,"file":"SkeletonText2.js","names":[],"sources":["../../../src/components/Skeleton/SkeletonText.tsx"],"sourcesContent":["/**\n * SkeletonText Component\n *\n * Skeleton placeholder for text content.\n * Provides multiple lines with varying widths for natural appearance.\n *\n * @example\n * // Basic usage (3 lines)\n * <SkeletonText />\n *\n * @example\n * // Custom number of lines\n * <SkeletonText lines={5} />\n */\n\nimport { Skeleton } from \"./Skeleton\";\nimport \"./SkeletonText.css\";\n\nexport interface SkeletonTextProps {\n  /** Number of text lines to display */\n  lines?: number;\n  /** Spacing between lines */\n  spacing?: \"compact\" | \"normal\" | \"relaxed\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible name for each skeleton inside. Defaults to \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * SkeletonText provides a loading placeholder for text content.\n *\n * Features:\n * - Multiple lines with varying widths\n * - Configurable line spacing\n * - Accessible via aria-busy\n */\nexport function SkeletonText({\n  lines = 3,\n  spacing = \"normal\",\n  className = \"\",\n  testId,\n  loadingLabel,\n}: SkeletonTextProps) {\n  const classNames = [\"skeleton-text\", `skeleton-text--${spacing}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  // Generate varying widths for natural appearance\n  const widths = Array.from({ length: lines }, (_, i) => {\n    if (i === lines - 1) {\n      // Last line is shorter\n      return \"60%\";\n    }\n    // Alternate between full and slightly shorter widths\n    return i % 2 === 0 ? \"100%\" : \"95%\";\n  });\n\n  return (\n    <div className={classNames} data-testid={testId} role=\"status\" aria-busy=\"true\">\n      {widths.map((width, index) => (\n        <Skeleton\n          loadingLabel={loadingLabel}\n          key={index}\n          width={width}\n          height=\"1em\"\n          variant=\"text\"\n        />\n      ))}\n    </div>\n  );\n}\n\nexport default SkeletonText;\n"],"mappings":";;;;AAuCA,SAAgB,EAAa,EAC3B,WAAQ,GACR,aAAU,UACV,eAAY,IACZ,WACA,mBACoB;CACpB,IAAM,IAAa;EAAC;EAAiB,kBAAkB;EAAW;CAAS,CAAC,CACzE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAGL,IAAS,MAAM,KAAK,EAAE,QAAQ,EAAM,IAAI,GAAG,MAC3C,MAAM,IAAQ,IAET,QAGF,IAAI,KAAM,IAAI,SAAS,KAC/B;CAED,OACE,kBAAC,OAAD;EAAK,WAAW;EAAY,eAAa;EAAQ,MAAK;EAAS,aAAU;EACtE,UAAA,EAAO,KAAK,GAAO,MAClB,kBAAC,GAAD;GACgB;GAEP;GACP,QAAO;GACP,SAAQ;EACT,GAJM,CAIN,CACF;CACE,CAAA;AAET"}

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

@@ -1,26 +1,18 @@
 import { ReactNode } from 'react';
-import { TabTagType, TabTagLabels } from './tabTags';
-export type { TabTagType, TabTagLabels } from './tabTags';
-export { TAG_CONFIG } from './tabTags';
 export interface TabItem {
     id: string;
     label: string;
     content: ReactNode;
     /**
-     * Show a "Required" badge next to the tab label.
-     * @deprecated Use `tag="required"` instead. Kept for backward compatibility.
-     */
-    required?: boolean;
-    /**
-     * Guide tag displayed after the tab label as a small badge.
-     * When set, takes precedence over the `required` boolean.
-     */
-    tag?: TabTagType;
-    /**
-     * Optional extra trailing node rendered next to the tab label (e.g. a
-     * count badge). Distinct from `tag` (which uses a fixed preset). Use this
-     * when migrating segmented controls that rendered their own inline count
-     * pill alongside the label.
+     * Trailing node rendered next to the tab label: a count pill, a status
+     * badge, whatever the consumer's vocabulary calls for.
+     *
+     * This used to sit beside a `tag` prop that took one of four fixed names,
+     * required / recommended / beta / experimental, and rendered a Badge for
+     * it. Those are one product's guide vocabulary, and the arrangement had
+     * already split across the boundary: the badge variant lived here while the
+     * label text had to be passed in from the consumer's locale bundle. A
+     * consumer that wants that badge renders it here, and owns both halves.
      */
     labelExtra?: ReactNode;
     /**
@@ -98,10 +90,5 @@ export interface TabsProps {
     scrollLeftLabel?: string;
     /** Accessible label for the right scroll-arrow button. Default: "Scroll right" */
     scrollRightLabel?: string;
-    /**
-     * English defaults for every guide-tag badge label (required / recommended
-     * / beta / experimental). Override individual entries to translate them.
-     */
-    tagLabels?: TabTagLabels;
 }
-export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, tagLabels, }: TabsProps): import("react").JSX.Element;
+export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, }: TabsProps): import("react").JSX.Element;