@mks2508/mks-ui 0.7.0 → 0.8.0

package/dist/react-ui/ui/OperationCard/parts/OperationCardHeader.js

@@ -0,0 +1,62 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { CountingNumber } from "../../../primitives/CountingNumber/index.js";
+import { SlidingText } from "../../../primitives/waapi/SlidingText/index.js";
+import { useOperationCard } from "../OperationCard.context.js";
+import { OperationCardStyles } from "../OperationCard.styles.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/OperationCard/parts/OperationCardHeader.tsx
+/**
+* OperationCardHeader — title + animated phase label + percent badge.
+*
+* Reads state from OperationCardContext. Uses SlidingText to crossfade
+* phase labels and CountingNumber to animate the percent badge.
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+/**
+* Header row of the operation card.
+*
+* @example
+* ```tsx
+* <OperationCardRoot state={state}>
+*   <OperationCardHeader />
+*   ...
+* </OperationCardRoot>
+* ```
+*/
+function OperationCardHeader({ className }) {
+	const { state } = useOperationCard();
+	const percent = Math.round(state.progress * 100);
+	const hasPhase = Boolean(state.phaseLabel);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "operation-card-header",
+		className: cn(OperationCardStyles.header, className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: OperationCardStyles.title,
+				children: state.title
+			}), hasPhase && /* @__PURE__ */ jsx("div", {
+				className: OperationCardStyles.phase,
+				children: /* @__PURE__ */ jsx(SlidingText, {
+					text: state.phaseLabel ?? "",
+					mode: "word",
+					direction: "vertical",
+					duration: 220,
+					staggerDelay: 12,
+					blur: true
+				})
+			})]
+		}), /* @__PURE__ */ jsxs("span", {
+			"data-slot": "operation-card-percent",
+			className: OperationCardStyles.percent,
+			children: [/* @__PURE__ */ jsx(CountingNumber, { number: percent }), "%"]
+		})]
+	});
+}
+
+//#endregion
+export { OperationCardHeader };

package/dist/react-ui/ui/OperationCard/parts/OperationCardProgress.d.ts

@@ -0,0 +1,3 @@
+import type { IOperationCardProgressProps } from '../OperationCard.types';
+export declare function OperationCardProgress({ className, }: IOperationCardProgressProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OperationCardProgress.d.ts.map

package/dist/react-ui/ui/OperationCard/parts/OperationCardProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCardProgress.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/ui/OperationCard/parts/OperationCardProgress.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAE1E,wBAAgB,qBAAqB,CAAC,EACrC,SAAS,GACT,EAAE,2BAA2B,2CAgC7B"}

package/dist/react-ui/ui/OperationCard/parts/OperationCardProgress.js

@@ -0,0 +1,37 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useOperationCard } from "../OperationCard.context.js";
+import { OperationCardStyles } from "../OperationCard.styles.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/OperationCard/parts/OperationCardProgress.tsx
+/**
+* OperationCardProgress — thin progress bar driven by state.progress.
+*
+* Plain CSS transition on width. Uses the `destructive` token when the
+* operation failed so the bar turns red without changing layout.
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+function OperationCardProgress({ className }) {
+	const { state } = useOperationCard();
+	const pct = Math.round(Math.min(1, Math.max(0, state.progress)) * 100);
+	const fillClass = state.status === "failed" ? "bg-destructive" : state.status === "cancelled" ? "bg-foreground/40" : state.status === "success" ? "bg-foreground" : "bg-foreground/80";
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "operation-card-progress",
+		"data-status": state.status,
+		className: cn(OperationCardStyles.progress, className),
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": pct,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("h-full transition-[width] duration-300 ease-out", fillClass),
+			style: { width: `${pct}%` }
+		})
+	});
+}
+
+//#endregion
+export { OperationCardProgress };

package/dist/react-ui/ui/OperationCard/parts/OperationCardStats.d.ts

@@ -0,0 +1,3 @@
+import type { IOperationCardStatsProps } from '../OperationCard.types';
+export declare function OperationCardStats<TTransfer = unknown>({ children, className, }: IOperationCardStatsProps<TTransfer>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OperationCardStats.d.ts.map

package/dist/react-ui/ui/OperationCard/parts/OperationCardStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCardStats.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/ui/OperationCard/parts/OperationCardStats.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,wBAAgB,kBAAkB,CAAC,SAAS,GAAG,OAAO,EAAE,EACvD,QAAQ,EACR,SAAS,GACT,EAAE,wBAAwB,CAAC,SAAS,CAAC,2CAWrC"}

package/dist/react-ui/ui/OperationCard/parts/OperationCardStats.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { useOperationCard } from "../OperationCard.context.js";
+import { OperationCardStyles } from "../OperationCard.styles.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/OperationCard/parts/OperationCardStats.tsx
+/**
+* OperationCardStats — render prop that receives the transfer payload.
+*
+* The compound is generic in `TTransfer`; the consumer owns the layout
+* and the individual cells. Typical use:
+*
+* ```tsx
+* <OperationCardStats>
+*   {(t: ITransferProgress) => (
+*     <>
+*       <StatCell label="Objects">
+*         <SlidingNumber value={t.receivedObjects} />
+*         {' / '}
+*         <SlidingNumber value={t.totalObjects} />
+*       </StatCell>
+*       ...
+*     </>
+*   )}
+* </OperationCardStats>
+* ```
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+function OperationCardStats({ children, className }) {
+	const { state } = useOperationCard();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "operation-card-stats",
+		className: cn(OperationCardStyles.stats, className),
+		children: children(state.transfer)
+	});
+}
+
+//#endregion
+export { OperationCardStats };

package/dist/react-ui/ui/OperationCard/parts/OperationCardVisualizer.d.ts

@@ -0,0 +1,3 @@
+import type { IOperationCardVisualizerProps } from '../OperationCard.types';
+export declare function OperationCardVisualizer({ rows, cols, pattern, color, bloom, accentRow, children, className, }: IOperationCardVisualizerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OperationCardVisualizer.d.ts.map

package/dist/react-ui/ui/OperationCard/parts/OperationCardVisualizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OperationCardVisualizer.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/ui/OperationCard/parts/OperationCardVisualizer.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EACX,6BAA6B,EAE7B,MAAM,wBAAwB,CAAC;AAOhC,wBAAgB,uBAAuB,CAAC,EACvC,IAAQ,EACR,IAAS,EACT,OAAO,EACP,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,GACT,EAAE,6BAA6B,2CA8B/B"}

package/dist/react-ui/ui/OperationCard/parts/OperationCardVisualizer.js

@@ -0,0 +1,53 @@
+'use client';
+
+import { cn } from "../../../lib/utils.js";
+import { DotMatrix } from "../../../primitives/DotMatrix/index.js";
+import { useOperationCard } from "../OperationCard.context.js";
+import { OperationCardStyles } from "../OperationCard.styles.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/OperationCard/parts/OperationCardVisualizer.tsx
+/**
+* OperationCardVisualizer — the "what's happening" visual layer.
+*
+* Default rendering: a `<DotMatrix>` driven by the context state. Maps
+* the OperationCard lifecycle → DotMatrix lifecycle:
+*
+*   idle      → idle       (all cells off)
+*   pending   → running    (pattern cycle plays)
+*   success   → success    (all cells forced on, glow)
+*   failed    → failed     (cycle frozen; on→red, off→muted)
+*   cancelled → cancelled  (cycle frozen; on→muted)
+*
+* Pattern + palette + bloom come from `state.meta` so the consumer
+* adapts the visual language per operation kind.
+*
+* @module @mks2508/mks-ui/react/ui/OperationCard
+*/
+function mapStatus(op) {
+	if (op === "pending") return "running";
+	return op;
+}
+function OperationCardVisualizer({ rows = 6, cols = 18, pattern, color, bloom, accentRow, children, className }) {
+	const { state } = useOperationCard();
+	const meta = state.meta;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "operation-card-visualizer",
+		className: cn(OperationCardStyles.visualizer, className),
+		children: children ?? /* @__PURE__ */ jsx(DotMatrix, {
+			rows,
+			cols,
+			status: mapStatus(state.status),
+			pattern: pattern ?? meta?.pattern ?? "snake",
+			color: color ?? meta?.color ?? "primary",
+			bloom: bloom ?? meta?.bloom ?? true,
+			variant: "glow",
+			progress: state.progress,
+			accentCount: meta?.accentCount,
+			accentRow: accentRow ?? meta?.accentRow ?? "top"
+		})
+	});
+}
+
+//#endregion
+export { OperationCardVisualizer };

package/dist/react-ui/ui/Tabs/Tabs.styles.d.ts

@@ -31,7 +31,7 @@ export declare const tabsStyles: StyleSlots<TabsSlot>;
  * ```
  */
 export declare const tabsListVariants: (props?: ({
-    variant?: "default" | "outline" | "underline" | "ghost" | "pill" | null | undefined;
+    variant?: "default" | "outline" | "underline" | "pill" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
@@ -45,7 +45,7 @@ export declare const tabsListVariants: (props?: ({
  * ```
  */
 export declare const tabsTabVariants: (props?: ({
-    variant?: "default" | "outline" | "underline" | "ghost" | "pill" | null | undefined;
+    variant?: "default" | "outline" | "underline" | "pill" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
@@ -56,6 +56,6 @@ export declare const tabsTabVariants: (props?: ({
  * and animated via WAAPI transitions in CSS.
  */
 export declare const tabsIndicatorVariants: (props?: ({
-    variant?: "default" | "outline" | "underline" | "ghost" | "pill" | null | undefined;
+    variant?: "default" | "outline" | "underline" | "pill" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=Tabs.styles.d.ts.map

package/dist/react-ui/ui/index.d.ts

@@ -18,13 +18,20 @@ export * from './Tooltip';
 export * from './Badge';
 export * from './Button';
 export * from './Card';
+export * from './GooeyButton';
 export * from './Combobox';
 export * from './CornerBracket';
 export * from './DropdownMenu';
 export * from './Field';
+export * from './FileIcon';
+export * from './FileItem';
+export * from './FilePanel';
+export * from './FileTree';
 export * from './Input';
 export * from './InputGroup';
 export * from './Label';
+export * from './MiddleTruncatePath';
+export * from './OperationCard';
 export * from './Select';
 export * from './Separator';
 export * from './Textarea';

package/dist/react-ui/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,iBAAiB,CAAC"}

package/dist/react-ui/ui/index.js

@@ -23,6 +23,7 @@ import { buttonStateStyles, buttonVariants } from "./Button/Button.styles.js";
 import { Button } from "./Button/index.js";
 import { cardVariants } from "./Card/Card.styles.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./Card/index.js";
+import { GooeyButton } from "./GooeyButton/index.js";
 import { Input } from "./Input/index.js";
 import { Textarea } from "./Textarea/index.js";
 import { inputGroupAddonVariants, inputGroupButtonVariants } from "./InputGroup/InputGroup.styles.js";
@@ -35,6 +36,24 @@ import { Label } from "./Label/index.js";
 import { Separator } from "./Separator/index.js";
 import { fieldVariants } from "./Field/Field.styles.js";
 import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./Field/index.js";
+import { FileIconStyles, FolderIconStyles, fileIconVariants, folderIconVariants } from "./FileIcon/FileIcon.styles.js";
+import { FileIcon, FolderIcon } from "./FileIcon/index.js";
+import { MiddleTruncatePathStyles, middleTruncatePathVariants } from "./MiddleTruncatePath/MiddleTruncatePath.styles.js";
+import { MiddleTruncatePath } from "./MiddleTruncatePath/index.js";
+import { FileItemGitStatusClasses, FileItemStyles, fileItemVariants } from "./FileItem/FileItem.styles.js";
+import { FileItem } from "./FileItem/index.js";
+import { FilePanelStyles, filePanelVariants } from "./FilePanel/FilePanel.styles.js";
+import { FilePanel } from "./FilePanel/index.js";
+import { FileTreeStyles, fileTreeVariants } from "./FileTree/FileTree.styles.js";
+import { FileTree } from "./FileTree/index.js";
+import { useOperationCard } from "./OperationCard/OperationCard.context.js";
+import { OperationCardStyles, operationCardVariants } from "./OperationCard/OperationCard.styles.js";
+import { OperationCardHeader } from "./OperationCard/parts/OperationCardHeader.js";
+import { OperationCardVisualizer } from "./OperationCard/parts/OperationCardVisualizer.js";
+import { OperationCardStats } from "./OperationCard/parts/OperationCardStats.js";
+import { OperationCardProgress } from "./OperationCard/parts/OperationCardProgress.js";
+import { OperationCardActions } from "./OperationCard/parts/OperationCardActions.js";
+import { OperationCard, OperationCardRoot } from "./OperationCard/index.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./Select/index.js";
 import { dataCardStyles, dataCardVariants } from "./DataCard/DataCard.styles.js";
 import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./DataCard/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",