@mks2508/mks-ui 0.7.0 → 0.8.1

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

@@ -0,0 +1,141 @@
+import { cn } from "../../lib/utils.js";
+import "./gooey-morphing-surface.js";
+import { DEFAULT_GOOEY_CONFIG } from "./GooeyMorphingSurface.types.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/GooeyMorphingSurface/index.tsx
+/**
+* GooeyMorphingSurface — headless pill→card gooey morph primitive.
+*
+* Paints an SVG canvas where a pill-shaped rect sits on top and a card-
+* shaped rect sits below (body). Both rects share a gaussian-blur +
+* alpha-threshold filter that fuses them into a single silhouette with a
+* soft metaball throat wherever they overlap. When `open` is false, the
+* body rect is a geometric clone of the pill (same x/y/w/h/rx) — no extra
+* halo, no pop. When `open` flips to true, all six SVG presentation attrs
+* (x, y, width, height, rx, ry) interpolate in lock-step, producing a
+* continuous morph from pill to card.
+*
+* The primitive is purely presentational: it does not own open state, does
+* not bind click handlers, does not trap focus. Use `<GooeyButton>` for
+* the ergonomic wrapper that adds those behaviours.
+*
+* @module @mks2508/mks-ui/react/primitives/GooeyMorphingSurface
+*/
+/**
+* Headless gooey pill→card morph surface.
+*
+* @example
+* ```tsx
+* <GooeyMorphingSurface
+*   open={open}
+*   pill={<span>Pull origin</span>}
+*   card={<ProgressCard transfer={transfer} />}
+*   config={{ blur: 12, mergeOverlap: 14 }}
+* />
+* ```
+*/
+function GooeyMorphingSurface({ open, pill, card, config: userConfig, className, slots, "aria-hidden": ariaHidden = true }) {
+	const filterId = `gms-filter-${useId().replace(/:/g, "")}`;
+	const { pillWidth, pillHeight, cardWidth, cardHeight, cardRadius, mergeOverlap, blur, alphaAmp, alphaOffset, fill, durationMs, easing, pillOffsetX } = {
+		...DEFAULT_GOOEY_CONFIG,
+		...userConfig
+	};
+	const pillRadius = pillHeight / 2;
+	const svgHeight = pillHeight + cardHeight + mergeOverlap;
+	const pillX = (cardWidth - pillWidth) / 2 + pillOffsetX;
+	const bodyX = open ? 0 : pillX;
+	const bodyY = open ? pillHeight - mergeOverlap : 0;
+	const bodyW = open ? cardWidth : pillWidth;
+	const bodyH = open ? cardHeight + mergeOverlap : pillHeight;
+	const bodyR = open ? cardRadius : pillRadius;
+	const rootStyle = {
+		"--gms-pill-w": `${pillWidth}px`,
+		"--gms-pill-h": `${pillHeight}px`,
+		"--gms-card-w": `${cardWidth}px`,
+		"--gms-card-h": `${cardHeight}px`,
+		"--gms-card-r": `${cardRadius}px`,
+		"--gms-overlap": `${mergeOverlap}px`,
+		"--gms-pill-x": `${pillX}px`,
+		"--gms-fill": fill,
+		"--gms-duration": `${durationMs}ms`,
+		"--gms-ease": easing
+	};
+	const alphaMatrix = `1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 ${alphaAmp} ${alphaOffset}`;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("gms-root", slots?.root, className),
+		style: rootStyle,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("gms-shell", slots?.shell),
+			"data-open": open,
+			children: [
+				/* @__PURE__ */ jsxs("svg", {
+					className: "gms-svg",
+					width: cardWidth,
+					height: svgHeight,
+					"aria-hidden": ariaHidden,
+					children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+						id: filterId,
+						x: "-20%",
+						y: "-20%",
+						width: "140%",
+						height: "140%",
+						colorInterpolationFilters: "sRGB",
+						children: [
+							/* @__PURE__ */ jsx("feGaussianBlur", {
+								in: "SourceGraphic",
+								stdDeviation: blur,
+								result: "blur"
+							}),
+							/* @__PURE__ */ jsx("feColorMatrix", {
+								in: "blur",
+								mode: "matrix",
+								values: alphaMatrix,
+								result: "goo"
+							}),
+							/* @__PURE__ */ jsx("feComposite", {
+								in: "SourceGraphic",
+								in2: "goo",
+								operator: "atop"
+							})
+						]
+					}) }), /* @__PURE__ */ jsxs("g", {
+						filter: `url(#${filterId})`,
+						children: [/* @__PURE__ */ jsx("rect", {
+							x: pillX,
+							y: 0,
+							width: pillWidth,
+							height: pillHeight,
+							rx: pillRadius,
+							ry: pillRadius,
+							fill
+						}), /* @__PURE__ */ jsx("rect", {
+							className: "gms-body-rect",
+							fill,
+							style: {
+								x: bodyX,
+								y: bodyY,
+								width: bodyW,
+								height: bodyH,
+								rx: bodyR,
+								ry: bodyR
+							}
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("gms-pill", slots?.pill),
+					children: pill
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("gms-card", slots?.card),
+					children: card
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { GooeyMorphingSurface };

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

@@ -9,5 +9,7 @@ export * from './Slot';
 export * from './Highlight';
 export * from './AutoHeight';
 export * from './CountingNumber';
+export * from './DotMatrix';
+export * from './GooeyMorphingSurface';
 export * from './waapi';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/primitives/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AAGjC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/primitives/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AAGvC,cAAc,SAAS,CAAC"}

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

@@ -2,6 +2,10 @@ import { Slot } from "./Slot/index.js";
 import { Highlight, HighlightItem, useHighlight } from "./Highlight/index.js";
 import { AutoHeight } from "./AutoHeight/index.js";
 import { CountingNumber } from "./CountingNumber/index.js";
+import { DOT_MATRIX_PATTERNS, buildDelays } from "./DotMatrix/patterns.js";
+import { DotMatrix } from "./DotMatrix/index.js";
+import { DEFAULT_GOOEY_CONFIG } from "./GooeyMorphingSurface/GooeyMorphingSurface.types.js";
+import { GooeyMorphingSurface } from "./GooeyMorphingSurface/index.js";
 import { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, EASINGS, EFFECTS, PRESETS, RESPONSIVE_CONFIGS, TIMING, TRANSFORMS, getResponsiveDuration, getResponsiveStagger } from "./waapi/core/animationConstants.js";
 import { useElementRegistry } from "./waapi/core/useElementRegistry.js";
 import { usePositionCapture } from "./waapi/core/usePositionCapture.js";

package/dist/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /**
  * Style slots for SlidingNumber component
  */

package/dist/react-ui/primitives/waapi/SlidingText/SlidingText.styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /**
  * Style slots for SlidingText component
  */

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

@@ -7,7 +7,7 @@
  * @module @mks2508/mks-ui/react/ui/Accordion/Accordion.styles
  */
 import { type VariantProps } from 'class-variance-authority';
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 import type { AccordionSlot } from './Accordion.types';
 /**
  * Default Tailwind classes for each visual region of the Accordion.

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

@@ -8,7 +8,7 @@
  */
 import type { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import type { HTMLMotionProps } from 'motion/react';
-import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+import type { IBaseConfig, SlotOverrides } from '@/core/types';
 import type { AccordionVariantProps } from './Accordion.styles';
 /**
  * Named visual regions of the Accordion that can be styled via the `slots` prop.

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

@@ -7,7 +7,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/AlertDialog/AlertDialog.styles
  */
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 import type { AlertDialogSlot } from './AlertDialog.types';
 /**
  * Default Tailwind classes for each visual region of the AlertDialog.

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

@@ -8,7 +8,7 @@
  */
 import type { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
 import type { HTMLMotionProps } from 'motion/react';
-import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+import type { IBaseConfig, SlotOverrides } from '@/core/types';
 /**
  * Named visual regions of the AlertDialog that can be styled via the `slots` prop.
  *

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /** Visual regions for the Badge component. */
 type BadgeSlot = 'root';
 declare const badgeStyles: StyleSlots<BadgeSlot>;
@@ -8,7 +8,7 @@ declare const badgeStyles: StyleSlots<BadgeSlot>;
  * @see {@link https://cva.style/docs/getting-started/variants}
  */
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | "destructive" | null | undefined;
+    variant?: "default" | "outline" | "destructive" | "secondary" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export { badgeStyles, badgeVariants };

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

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { badgeVariants, BadgeSlot } from './Badge.styles';
 /**
  * Props for the Badge component.

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /** Visual regions for the Button component. */
 type ButtonSlot = 'root';
 declare const buttonStyles: StyleSlots<ButtonSlot>;
@@ -8,7 +8,7 @@ declare const buttonStyles: StyleSlots<ButtonSlot>;
  * @see {@link https://cva.style/docs/getting-started/variants}
  */
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "outline" | "ghost" | "secondary" | "destructive" | "success" | "warning" | "bare" | null | undefined;
+    variant?: "link" | "default" | "outline" | "success" | "destructive" | "warning" | "ghost" | "secondary" | "bare" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | "bare" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** State-specific style classes for Button. */

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

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { buttonVariants, ButtonSlot } from './Button.styles';
 /** Button interaction state. */
 interface IButtonState {

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /** Visual regions for the Card component. */
 type CardSlot = 'root' | 'header' | 'title' | 'description' | 'action' | 'content' | 'footer';
 declare const cardStyles: StyleSlots<CardSlot>;

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

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { cardVariants, CardSlot } from './Card.styles';
 /** Props for the Card component. */
 interface ICardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {

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

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/Checkbox/Checkbox.styles
  */
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 import type { CheckboxSlot } from './Checkbox.types';
 /**
  * Default style slots for the Checkbox component.

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

@@ -5,7 +5,7 @@
  */
 import type { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import type { HTMLMotionProps, SVGMotionProps } from 'motion/react';
-import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+import type { IBaseConfig, SlotOverrides } from '@/core/types';
 /**
  * Available style slot names for the Checkbox component.
  * Each slot maps to a visual region that can be customized via the `slots` prop.

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /** Visual regions for the Combobox component family. */
 type ComboboxSlot = 'root' | 'trigger' | 'content' | 'list' | 'item' | 'label' | 'separator' | 'empty' | 'chips' | 'chip' | 'chipInput';
 declare const comboboxStyles: StyleSlots<ComboboxSlot>;

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

@@ -1,5 +1,5 @@
 import type { Combobox as ComboboxPrimitive } from '@base-ui/react';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { ComboboxSlot } from './Combobox.styles';
 /** Props for the Combobox root. */
 type IComboboxProps = ComboboxPrimitive.Root.Props<any, any>;

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 type CornerBracketSlot = 'root';
 declare const cornerBracketStyles: StyleSlots<CornerBracketSlot>;
 /** CVA variants for CornerBracket positioning and color. */

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

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { bracketVariants, CornerBracketSlot } from './CornerBracket.styles';
 /** Props for the CornerBracket component. */
 interface ICornerBracketProps extends Omit<React.SVGProps<SVGSVGElement>, 'variant'>, VariantProps<typeof bracketVariants> {

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

@@ -14,7 +14,7 @@
  * </DataCard>
  * ```
  */
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /**
  * Visual slots for DataCard component family.
  */
@@ -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/DataCard/DataCard.types.d.ts

@@ -4,7 +4,7 @@
  * @module @mks2508/mks-ui/react/ui/DataCard
  */
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides, IBaseConfig } from '../../../core/types';
+import type { SlotOverrides, IBaseConfig } from '@/core/types';
 import type { dataCardVariants, DataCardSlot } from './DataCard.styles';
 export type { DataCardSlot } from './DataCard.styles';
 /** Visual variant names */

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

@@ -1,5 +1,5 @@
 import { dataCardVariants } from './DataCard.styles';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps, IDataCardConfig, DataCardSlot } from './DataCard.types';
 type DataCardContextType = {
     variant: IDataCardProps['variant'];

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

@@ -7,7 +7,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/Dialog/Dialog.styles
  */
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 import type { DialogSlot } from './Dialog.types';
 /**
  * Default Tailwind classes for each Dialog visual region.

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

@@ -9,7 +9,7 @@
 import type * as React from 'react';
 import type { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import type { HTMLMotionProps } from 'motion/react';
-import type { SlotOverrides, IBaseConfig } from '../../../core/types';
+import type { SlotOverrides, IBaseConfig } from '@/core/types';
 /**
  * Visual regions available for class-name overrides via the `slots` prop.
  *

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /** Visual regions for the DropdownMenu component family. */
 type DropdownMenuSlot = 'root' | 'content' | 'item' | 'label' | 'separator' | 'shortcut' | 'subTrigger' | 'subContent' | 'checkboxItem' | 'radioItem';
 declare const dropdownMenuStyles: StyleSlots<DropdownMenuSlot>;

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

@@ -1,5 +1,5 @@
 import type { Menu as MenuPrimitive } from '@base-ui/react/menu';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { DropdownMenuSlot } from './DropdownMenu.styles';
 /** Props for the DropdownMenu root. */
 type IDropdownMenuProps = MenuPrimitive.Root.Props;

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

@@ -7,7 +7,7 @@
  * @module @mks2508/mks-ui/react/ui/DynamicToggle
  */
 import { type VariantProps } from 'class-variance-authority';
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /** Slot names for DynamicToggle */
 export type DynamicToggleSlot = 'root' | 'track' | 'option' | 'indicator' | 'group' | 'groupIndicator' | 'groupLabel';
 /**

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

@@ -7,7 +7,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/DynamicToggle
  */
-import type { SlotOverrides, IBaseConfig } from '../../../core/types';
+import type { SlotOverrides, IBaseConfig } from '@/core/types';
 import type { DynamicToggleSlot, DynamicToggleVariantProps } from './DynamicToggle.styles';
 /** How the group appears when collapsed (standalone option active). */
 export type DynamicToggleCollapsedMode = 'title' | 'opts' | 'title-opts';

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /** Visual regions for the Field component family. */
 type FieldSlot = 'root' | 'set' | 'legend' | 'group' | 'content' | 'label' | 'title' | 'description' | 'separator' | 'error';
 declare const fieldStyles: StyleSlots<FieldSlot>;

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

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { fieldVariants, FieldSlot } from './Field.styles';
 /** Props for the FieldSet component. */
 interface IFieldSetProps extends React.ComponentProps<'fieldset'> {

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"}