@mks2508/mks-ui 0.6.8 → 0.8.0

package/dist/react-ui/ui/Button/Button.styles.js

@@ -16,13 +16,15 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 			ghost: "hover:bg-accent hover:text-accent-foreground",
 			link: "text-primary underline-offset-4 hover:underline",
 			success: "bg-emerald-600 text-white hover:bg-emerald-700 focus-visible:ring-emerald-600",
-			warning: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-500"
+			warning: "bg-amber-500 text-white hover:bg-amber-600 focus-visible:ring-amber-500",
+			bare: ""
 		},
 		size: {
 			default: "h-10 px-4 py-2",
 			sm: "h-9 rounded-md px-3 text-xs",
 			lg: "h-11 rounded-md px-8 text-base",
-			icon: "h-10 w-10 p-0"
+			icon: "h-10 w-10 p-0",
+			bare: ""
 		}
 	},
 	defaultVariants: {

package/dist/react-ui/ui/Button/Button.types.d.ts

@@ -38,8 +38,8 @@ interface IButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement
     slots?: SlotOverrides<ButtonSlot>;
 }
 /** Available button variants. */
-type ButtonVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'success' | 'warning';
+type ButtonVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'success' | 'warning' | 'bare';
 /** Available button sizes. */
-type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
+type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'bare';
 export type { IButtonProps, IButtonState, ButtonVariant, ButtonSize };
 //# sourceMappingURL=Button.types.d.ts.map

package/dist/react-ui/ui/Button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElE,gCAAgC;AAChC,UAAU,YAAY;IACpB,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,UAAU,YACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,EAChF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,2CAA2C;IAC3C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EACH,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC,CAAC;IACvF,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;IACnE,qEAAqE;IACrE,KAAK,CAAC,EACF,KAAK,CAAC,aAAa,GACnB,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC/D,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACnC;AAED,iCAAiC;AACjC,KAAK,aAAa,GACd,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,GACT,OAAO,GACP,MAAM,GACN,SAAS,GACT,SAAS,CAAC;AAEd,8BAA8B;AAC9B,KAAK,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEnD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElE,gCAAgC;AAChC,UAAU,YAAY;IACpB,sCAAsC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,UAAU,YACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,EAChF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,2CAA2C;IAC3C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,uDAAuD;IACvD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,MAAM,CAAC,EACH,KAAK,CAAC,YAAY,GAClB,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC,CAAC;IACvF,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK,MAAM,GAAG,SAAS,CAAC,CAAC;IACnE,qEAAqE;IACrE,KAAK,CAAC,EACF,KAAK,CAAC,aAAa,GACnB,CAAC,CAAC,KAAK,EAAE,YAAY,KAAK,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC,CAAC;IAC/D,kDAAkD;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACnC;AAED,iCAAiC;AACjC,KAAK,aAAa,GACd,SAAS,GACT,WAAW,GACX,aAAa,GACb,SAAS,GACT,OAAO,GACP,MAAM,GACN,SAAS,GACT,SAAS,GACT,MAAM,CAAC;AAEX,8BAA8B;AAC9B,KAAK,UAAU,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5D,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC"}

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

@@ -33,7 +33,7 @@ export declare const dataCardStyles: StyleSlots<DataCardSlot>;
  */
 export declare const dataCardVariants: (props?: ({
     size?: "default" | "compact" | "spacious" | null | undefined;
-    variant?: "default" | "destructive" | "success" | "warning" | "accent" | null | undefined;
+    variant?: "default" | "success" | "destructive" | "warning" | "accent" | null | undefined;
     glass?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.css

@@ -0,0 +1,369 @@
+/**
+ * DynamicToggle v2 — CSS state transitions.
+ *
+ * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
+ * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
+ *
+ * @import '@mks2508/mks-ui/react/ui/DynamicToggle/DynamicToggle.module.css';
+ */
+
+/* ── Variables ── */
+[data-slot="dt-root"] {
+  --dt-dur: 0.22s;
+  --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --dt-fade: 0.45;
+  --dt-indicator-dur: 0.3s;
+  --dt-indicator-ease: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Track: explicit row prevents h-full items from overflowing container ── */
+[data-slot="dt-root"] [data-slot="dt-track"] {
+  grid-template-rows: minmax(0, 1fr);
+}
+
+/* ── Top-level option spans 2 grid cols ── */
+[data-slot="dt-root"] [data-slot="dt-track"] > label {
+  grid-column: span 2;
+}
+
+/* ── Primary option text ── */
+[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
+  color: var(--accent-foreground);
+  z-index: 2;
+}
+[data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
+  color: var(--foreground);
+  opacity: var(--dt-fade);
+}
+
+/* ── Group: container queries ── */
+[data-slot="dt-root"] [data-slot="dt-group"] {
+  container-type: size;
+  overflow: hidden;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * INDICATOR POSITIONING
+ *
+ * Modern: CSS Anchor Positioning — indicator follows active option
+ * Fallback: translate-based positioning for older browsers
+ * ══════════════════════════════════════════════════════════ */
+
+/* ── Anchor-based indicator (requires full anchor API) ── */
+@supports (anchor-scope: all) {
+  /* Scope anchors per toggle instance */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) {
+    anchor-scope: --dt-active;
+  }
+
+  /* Active option becomes the anchor via native :checked */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-track"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group"] > label:has(+ input:checked) {
+    anchor-name: --dt-active;
+  }
+
+  /* Single unified indicator: morphs from full-width to half-width */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-indicator"] {
+    position-anchor: --dt-active;
+    top: anchor(top);
+    right: anchor(right);
+    bottom: anchor(bottom);
+    left: anchor(left);
+    translate: none;
+    width: auto;
+    transition:
+      top var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease),
+      bottom var(--dt-indicator-dur) var(--dt-indicator-ease),
+      left var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+
+  /* Hide the group indicator — unified indicator handles everything */
+  [data-slot="dt-root"]:not([data-indicator="translate"]) [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Inset-based fallback (older browsers) — same morph as anchor but hardcoded ── */
+@supports not (anchor-scope: all) {
+  /* Unified indicator: left/right transition morphs width + position */
+  [data-slot="dt-root"] [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 0;
+    width: auto;
+    translate: none;
+    transition:
+      left var(--dt-indicator-dur) var(--dt-indicator-ease),
+      right var(--dt-indicator-dur) var(--dt-indicator-ease);
+  }
+  /* Top-level checked: indicator covers left half */
+  [data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+    left: 0;
+    right: 50%;
+  }
+  /* Group option 1 checked: indicator at 3rd quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+    left: 50%;
+    right: 25%;
+  }
+  /* Group option 2 checked: indicator at 4th quarter */
+  [data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) ~ [data-slot="dt-indicator"],
+  [data-slot="dt-root"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+    left: 75%;
+    right: 0;
+  }
+  /* Hide group indicator — unified indicator handles everything */
+  [data-slot="dt-root"] [data-slot="dt-group-indicator"] {
+    display: none;
+  }
+}
+
+/* ── Force inset mode via data-indicator="translate" (works regardless of @supports) ── */
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 0;
+  width: auto;
+  translate: none;
+  transition:
+    left var(--dt-indicator-dur) var(--dt-indicator-ease),
+    right var(--dt-indicator-dur) var(--dt-indicator-ease);
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  left: 0;
+  right: 50%;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(1):checked) [data-slot="dt-indicator"] {
+  left: 50%;
+  right: 25%;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-track"]:has([data-slot="dt-group"] input:nth-of-type(2):checked) [data-slot="dt-indicator"] {
+  left: 75%;
+  right: 0;
+}
+[data-slot="dt-root"][data-indicator="translate"] [data-slot="dt-group-indicator"] {
+  display: none;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * GROUP COLLAPSED STATE
+ *
+ * ::before = title text (via data-label attr)
+ * ::after  = combined opts text (via data-opts attr)
+ * <label>s = controlled by data-collapsed mode
+ *
+ * 3 modes: title | opts | title-opts (default)
+ * ══════════════════════════════════════════════════════════ */
+
+/* ── ::before — group title ── */
+[data-slot="dt-group"]::before {
+  content: attr(data-label);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% -80%;
+  color: var(--foreground);
+  font-size: inherit;
+  font-weight: 500;
+  z-index: 2;
+  white-space: nowrap;
+  pointer-events: none;
+  transition:
+    scale var(--dt-dur) var(--dt-ease),
+    translate var(--dt-dur) var(--dt-ease),
+    opacity var(--dt-dur) var(--dt-ease);
+}
+
+/* ── ::after — combined opts text ── */
+[data-slot="dt-group"]::after {
+  content: attr(data-opts);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  translate: -50% 20%;
+  color: var(--muted-foreground);
+  font-size: 0.85em;
+  opacity: 0.6;
+  z-index: 2;
+  white-space: nowrap;
+  pointer-events: none;
+  transition: opacity var(--dt-dur) var(--dt-ease);
+}
+[data-slot="dt-group"]:not([data-opts])::after {
+  content: none;
+}
+
+/* ── Group labels — transition props ── */
+[data-slot="dt-root"] [data-slot="dt-group"] label {
+  color: var(--muted-foreground);
+  cursor: pointer;
+  z-index: 2;
+  transition:
+    color var(--dt-dur) var(--dt-ease),
+    opacity var(--dt-dur) var(--dt-ease),
+    translate var(--dt-dur) var(--dt-ease);
+}
+[data-slot="dt-root"] [data-slot="dt-group"] label span {
+  display: grid;
+  place-items: center;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--dt-radius, 9999px);
+  transition: scale var(--dt-dur) var(--dt-ease);
+}
+
+/* ── Collapsed mode: "title" — only ::before, labels slide+scale out ── */
+[data-slot="dt-group"][data-collapsed="title"]::before {
+  translate: -50% -50%;
+}
+[data-slot="dt-group"][data-collapsed="title"]::after {
+  display: none;
+}
+[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label {
+  opacity: 0;
+  translate: 0 30%;
+}
+[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label span {
+  scale: 0.5;
+}
+
+/* ── Collapsed mode: "opts" — only ::after, labels slide+scale out ── */
+[data-slot="dt-group"][data-collapsed="opts"]::before {
+  display: none;
+}
+[data-slot="dt-group"][data-collapsed="opts"]::after {
+  translate: -50% -50%;
+  font-size: inherit;
+  opacity: 0.7;
+}
+[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label {
+  opacity: 0;
+  translate: 0 30%;
+}
+[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label span {
+  scale: 0.5;
+}
+
+/* ── Collapsed mode: "title-opts" — WIP: disabled, falls back to "title" behavior ── */
+/* TODO: title-opts needs a redesign — title (::before) and scaled labels overlap
+   at all container sizes. The codepen original morph relied on specific dimensions
+   that don't translate to the component's size variants. Needs a different approach
+   (e.g., crossfade, flex layout, or JS-measured positions). */
+[data-slot="dt-group"][data-collapsed="title-opts"]::after {
+  content: none;
+}
+[data-slot="dt-group"][data-collapsed="title-opts"]::before {
+  translate: -50% -50%;
+}
+[data-slot="dt-group"][data-collapsed="title-opts"]:not(:has(input:checked)) label {
+  opacity: 0;
+  translate: 0 30%;
+}
+
+/* ── When group expanded ── */
+[data-slot="dt-group"]:has(input:checked)::before {
+  translate: -50% -250%;
+  scale: 0.85;
+}
+[data-slot="dt-group"]:has(input:checked)::after {
+  opacity: 0;
+}
+[data-slot="dt-group"]:has(input:checked) label {
+  opacity: 0.75;
+  color: var(--muted-foreground);
+  translate: 0 0;
+}
+[data-slot="dt-group"]:has(input:checked) label span {
+  scale: 1;
+}
+[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),
+[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2) {
+  color: var(--foreground);
+  opacity: 1;
+}
+
+/* ══════════════════════════════════════════════════════════
+ * GROUP LABEL / BUBBLE (above or below the pill)
+ *
+ * Positioned via CSS. In filter/path morph modes, rendered with GooeyCanvas.
+ * In none mode, simple CSS-driven show/hide.
+ * bubblePosition: top | bottom (no left/right in v2)
+ * ══════════════════════════════════════════════════════════ */
+
+[data-slot="dt-group-label"] {
+  display: grid;
+  grid-template-rows: 0fr;
+  left: 20%;
+  right: 20%;
+  transition:
+    grid-template-rows calc(var(--dt-dur) * 1.5) var(--dt-ease),
+    opacity var(--dt-dur) var(--dt-ease);
+  opacity: 0;
+  background: var(--card);
+  border: 1px solid var(--border);
+  z-index: 3;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+[data-slot="dt-group-label"] > span {
+  overflow: hidden;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.75em;
+  height: calc(var(--dt-h, 38px) * 0.4);
+  box-sizing: border-box;
+}
+
+/* Top position */
+[data-slot="dt-group-label"][data-bubble-position="top"] {
+  bottom: 100%;
+  border-radius: calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2) 0 0;
+  border-bottom: none;
+  margin-bottom: -1px;
+}
+
+/* Bottom position */
+[data-slot="dt-group-label"][data-bubble-position="bottom"] {
+  top: 100%;
+  border-radius: 0 0 calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2);
+  border-top: none;
+  margin-top: -1px;
+}
+
+/* When group active → group label grows (vertical: top/bottom) */
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"],
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="top"] > span,
+[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"][data-bubble-position="bottom"] > span {
+  padding: 0.35em 0.75em;
+}
+
+/* ── Filter morph mode ── */
+[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group-label"] {
+  border: none;
+}
+[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-track"] {
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Filter morph: ::before hides on expand, gooey canvas handles junction ── */
+[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group"]:has(input:checked)::before {
+  opacity: 0;
+  translate: -50% -80%;
+  scale: 1;
+}
+
+/* ── Path morph mode ── */
+[data-slot="dt-root"][data-morph="path"] [data-slot="dt-track"] {
+  position: relative;
+  z-index: 1;
+}
+

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

@@ -0,0 +1,25 @@
+/**
+ * Styles for FileIcon / FolderIcon components.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileIcon
+ */
+import type { StyleSlots } from '../../../core/types';
+/** Visual regions for the FileIcon component. */
+export type FileIconSlot = 'root';
+/**
+ * Default Tailwind classes for each FileIcon slot.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | The `<img>` (or fallback glyph) element |
+ */
+export declare const FileIconStyles: StyleSlots<FileIconSlot>;
+/** CVA variants for the FileIcon root. */
+export declare const fileIconVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Visual regions for the FolderIcon component. */
+export type FolderIconSlot = 'root';
+/** Default Tailwind classes for each FolderIcon slot. */
+export declare const FolderIconStyles: StyleSlots<FolderIconSlot>;
+/** CVA variants for the FolderIcon root. */
+export declare const folderIconVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=FileIcon.styles.d.ts.map

package/dist/react-ui/ui/FileIcon/FileIcon.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileIcon/FileIcon.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,iDAAiD;AACjD,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC;AAElC;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,UAAU,CAAC,YAAY,CAE1C,CAAC;AAEX,0CAA0C;AAC1C,eAAO,MAAM,gBAAgB,2FAG3B,CAAC;AAEH,mDAAmD;AACnD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AAEpC,yDAAyD;AACzD,eAAO,MAAM,gBAAgB,EAAE,UAAU,CAAC,cAAc,CAE9C,CAAC;AAEX,4CAA4C;AAC5C,eAAO,MAAM,kBAAkB,2FAG7B,CAAC"}

package/dist/react-ui/ui/FileIcon/FileIcon.styles.js

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/FileIcon/FileIcon.styles.ts
+/**
+* Styles for FileIcon / FolderIcon components.
+*
+* @module @mks2508/mks-ui/react/ui/FileIcon
+*/
+/**
+* Default Tailwind classes for each FileIcon slot.
+*
+* | Slot | Region |
+* |------|--------|
+* | `root` | The `<img>` (or fallback glyph) element |
+*/
+const FileIconStyles = { root: "shrink-0" };
+/** CVA variants for the FileIcon root. */
+const fileIconVariants = cva(FileIconStyles.root, {
+	variants: {},
+	defaultVariants: {}
+});
+/** Default Tailwind classes for each FolderIcon slot. */
+const FolderIconStyles = { root: "shrink-0" };
+/** CVA variants for the FolderIcon root. */
+const folderIconVariants = cva(FolderIconStyles.root, {
+	variants: {},
+	defaultVariants: {}
+});
+
+//#endregion
+export { FileIconStyles, FolderIconStyles, fileIconVariants, folderIconVariants };

package/dist/react-ui/ui/FileIcon/FileIcon.types.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Types for FileIcon / FolderIcon components.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileIcon
+ */
+import type { SlotOverrides } from '../../../core/types';
+import type { FileIconSlot, FolderIconSlot } from './FileIcon.styles';
+/**
+ * Function that resolves a filename to an icon asset identifier.
+ *
+ * Return value is the filename of the SVG (e.g. `"typescript.svg"`)
+ * which is appended to `basePath` to form the full URL.
+ *
+ * Defaults (when `vscode-material-icon-theme-js` is available as an
+ * optional peer) use the Material Icon Theme resolver. Consumers may
+ * pass their own to support custom icon sets.
+ */
+export type FileIconResolver = (filename: string) => string;
+/**
+ * Function that resolves a folder name (and open state) to an icon asset.
+ */
+export type FolderIconResolver = (name: string, open: boolean) => string;
+/**
+ * Props for FileIcon.
+ *
+ * @see {@link FileIconSlot} for available slot names
+ */
+export interface IFileIconProps {
+    /** Filename (e.g. `"App.tsx"`, `"package.json"`, `".gitignore"`). */
+    filename: string;
+    /** Icon size in pixels. Default 16. */
+    size?: number;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /** Whether this entry is a submodule (renders a GitFork glyph). */
+    isSubmodule?: boolean;
+    /**
+     * Base path prefix where icon SVGs are hosted. Default `"/file-icons/"`.
+     * Consumers must serve the matching SVGs (same contract as Material Icon Theme).
+     */
+    basePath?: string;
+    /**
+     * Custom resolver to translate filename → SVG basename.
+     * Falls back to Material Icon Theme resolver if available at runtime.
+     */
+    resolve?: FileIconResolver;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FileIcon filename="App.tsx" slots={{ root: 'opacity-80' }} />
+     * ```
+     */
+    slots?: SlotOverrides<FileIconSlot>;
+}
+/**
+ * Props for FolderIcon.
+ *
+ * @see {@link FolderIconSlot} for available slot names
+ */
+export interface IFolderIconProps {
+    /** Folder name (e.g. `"src"`, `"components"`, `"node_modules"`). */
+    name: string;
+    /** Whether the folder is open/expanded. Default false. */
+    open?: boolean;
+    /** Icon size in pixels. Default 16. */
+    size?: number;
+    /** Optional CSS class merged onto the root. */
+    className?: string;
+    /**
+     * Base path prefix where icon SVGs are hosted. Default `"/file-icons/"`.
+     */
+    basePath?: string;
+    /**
+     * Custom resolver (closed + open). Falls back to Material Icon Theme if available.
+     */
+    resolve?: FolderIconResolver;
+    /**
+     * Override default Tailwind classes for specific visual regions.
+     *
+     * @example
+     * ```tsx
+     * <FolderIcon name="src" slots={{ root: 'opacity-80' }} />
+     * ```
+     */
+    slots?: SlotOverrides<FolderIconSlot>;
+}
+//# sourceMappingURL=FileIcon.types.d.ts.map

package/dist/react-ui/ui/FileIcon/FileIcon.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileIcon/FileIcon.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEtE;;;;;;;;;GASG;AACH,MAAM,MAAM,gBAAgB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;AAE5D;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,MAAM,CAAC;AAEzE;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,qEAAqE;IACrE,QAAQ,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACrC;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;CACvC"}

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

@@ -0,0 +1,46 @@
+/**
+ * FileIcon / FolderIcon — Material Icon Theme-powered file/folder glyphs.
+ *
+ * Thin React wrapper over a configurable icon resolver. By default it
+ * consumes `vscode-material-icon-theme-js` (optional peer) to map a
+ * filename to an SVG basename, then renders an `<img>` pointing at
+ * `${basePath}${basename}`. Consumers are responsible for hosting the
+ * SVGs under `basePath` (defaults to `/file-icons/`).
+ *
+ * Ported from mks-mission-control with MC-specific plumbing stripped.
+ *
+ * @module @mks2508/mks-ui/react/ui/FileIcon
+ */
+import type { IFileIconProps, IFolderIconProps } from './FileIcon.types';
+/**
+ * FileIcon — renders an icon for a given filename.
+ *
+ * @param filename - Filename used to resolve the icon asset
+ * @param slots - Override Tailwind classes per visual slot
+ *
+ * @example
+ * ```tsx
+ * <FileIcon filename="App.tsx" />         // react_ts.svg
+ * <FileIcon filename="package.json" />    // json.svg
+ * <FileIcon filename=".gitignore" size={20} />
+ * ```
+ */
+export declare const FileIcon: import("react").MemoExoticComponent<({ filename, size, className, isSubmodule, basePath, resolve, slots, }: IFileIconProps) => import("react/jsx-runtime").JSX.Element>;
+/**
+ * FolderIcon — renders an icon for a given folder (supports open/closed state).
+ *
+ * @param name - Folder name used to resolve the icon asset
+ * @param open - Whether the folder is visually open
+ * @param slots - Override Tailwind classes per visual slot
+ *
+ * @example
+ * ```tsx
+ * <FolderIcon name="src" />              // folder-src.svg
+ * <FolderIcon name="src" open />         // folder-src-open.svg
+ * ```
+ */
+export declare const FolderIcon: import("react").MemoExoticComponent<({ name, open, size, className, basePath, resolve, slots, }: IFolderIconProps) => import("react/jsx-runtime").JSX.Element>;
+export { FileIconStyles, fileIconVariants, FolderIconStyles, folderIconVariants, } from './FileIcon.styles';
+export type { FileIconSlot, FolderIconSlot } from './FileIcon.styles';
+export type { IFileIconProps, IFolderIconProps, FileIconResolver, FolderIconResolver, } from './FileIcon.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/FileIcon/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAYH,OAAO,KAAK,EACV,cAAc,EACd,gBAAgB,EAGjB,MAAM,kBAAkB,CAAC;AAwE1B;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,8GAQlB,cAAc,6CAuBf,CAAC;AAEH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,mGAQpB,gBAAgB,6CAajB,CAAC;AAEH,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACtE,YAAY,EACV,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC"}