@mks2508/mks-ui 0.9.0 → 0.10.0

package/dist/react-ui/index.js

@@ -75,7 +75,9 @@ import { fieldVariants } from "./ui/Field/Field.styles.js";
 import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./ui/Field/index.js";
 import { FileIconStyles, FolderIconStyles, fileIconVariants, folderIconVariants } from "./ui/FileIcon/FileIcon.styles.js";
 import { FileIcon, FolderIcon } from "./ui/FileIcon/index.js";
-import { MiddleTruncatePathStyles, middleTruncatePathVariants } from "./ui/MiddleTruncatePath/MiddleTruncatePath.styles.js";
+import { MiddleTruncateStyles, middleTruncateVariants } from "./ui/MiddleTruncate/MiddleTruncate.styles.js";
+import { MiddleTruncate } from "./ui/MiddleTruncate/index.js";
+import { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles } from "./ui/MiddleTruncatePath/MiddleTruncatePath.styles.js";
 import { MiddleTruncatePath } from "./ui/MiddleTruncatePath/index.js";
 import { FileItemGitStatusClasses, FileItemStyles, fileItemVariants } from "./ui/FileItem/FileItem.styles.js";
 import { FileItem } from "./ui/FileItem/index.js";
@@ -173,4 +175,4 @@ import { TerminalPanelChrome } from "./blocks/Terminal/panel/TerminalPanelChrome
 import { TerminalPanelFooter } from "./blocks/Terminal/panel/TerminalPanelFooter/index.js";
 import "./blocks/Terminal/index.js";
 
-export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, AnimationType, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BlurIntensity, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DEFAULT_ANIMATIONS, DEFAULT_ANIMATION_CONFIG, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_GLASS_CONFIG, DEFAULT_GOOEY_CONFIG, DEFAULT_SAFE_AREAS, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, DEFAULT_VISUAL_STYLE, DOT_MATRIX_PATTERNS, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DotMatrix, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileIcon, FileIconStyles, FileItem, FileItemGitStatusClasses, FileItemStyles, FilePanel, FilePanelStyles, FileTree, FileTreeStyles, FolderIcon, FolderIconStyles, GOOEY_DEFAULTS, Globe, GooeyButton, GooeyCanvas, GooeyFilter, GooeyMorphingSurface, Highlight, HighlightItem, HomeIcon, HugeIcons, IconSize, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LOG_LEVEL_STYLES, Label, LabelPosition, Layers, LayoutPanelTopIcon, ListIcon, LogParserService, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MiddleTruncatePath, MiddleTruncatePathStyles, MobileBottomNav, Morph, MorphPath, MorphingPopover, MorphingPopoverWithTarget, NavItemState, NavSize, NavVariant, OperationCard, OperationCardActions, OperationCardHeader, OperationCardProgress, OperationCardRoot, OperationCardStats, OperationCardStyles, OperationCardVisualizer, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, SIDEBAR_VISUAL_PRESETS, STATUS_COLORS, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sidebar, SidebarBorderRadius, SidebarCollapseMode, SidebarContent, SidebarFluidIndicator, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarIconLibrary, SidebarIndicator, SidebarItem, SidebarLayoutBehaviour, SidebarNav, SidebarSafeArea, SidebarSafeAreaPosition, SidebarSubContent, SidebarSubLink, SidebarTimingFunction, SidebarToggle, SidebarTooltip, SidebarTransitionDuration, SidebarWidth, SidebarZIndex, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalActionBar, TerminalClearButton, TerminalConnectionStatus, TerminalIcon, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, TerminalSettingsPopover, TerminalStatusBar, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, ZIndexLevel, accordionVariants, badgeVariants, bracketVariants, buildColorMatrixValues, buildDelays, buildFilterString, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, computeBlur, dataCardStyles, dataCardVariants, detectIOSVersion, dialogStyles, dynamicToggleStyles, dynamicToggleVariants, fieldVariants, fileIconVariants, fileItemVariants, filePanelVariants, fileTreeVariants, folderIconVariants, generateIndicatorStyles, generateSidebarStyles, getResponsiveDuration, getResponsiveStagger, getStrictContext, iconVariants, inputGroupAddonVariants, inputGroupButtonVariants, labelVariants, middleTruncatePathVariants, morphPathDown, morphPathUp, badgeVariants$1 as navBadgeVariants, navItemVariants, navListVariants, operationCardVariants, popoverStyles, progressStyles, rootVariants, shouldShowSeparator, spacerVariants, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useDynamicToggle, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIOSFixedReset, useIOSSafariFix, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, useMorphPath, useOperationCard, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSidebarContext, useSidebarIndicator, useSidebarKeyboard, useSubContent, useSwitch, useTooltip, useViewTransitions };
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, AnimationType, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BlurIntensity, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DEFAULT_ANIMATIONS, DEFAULT_ANIMATION_CONFIG, DEFAULT_CONFIG, DEFAULT_DIMENSIONS, DEFAULT_GLASS_CONFIG, DEFAULT_GOOEY_CONFIG, DEFAULT_SAFE_AREAS, DEFAULT_SPRING_CONFIG, DEFAULT_TWEEN_CONFIG, DEFAULT_VISUAL_STYLE, DOT_MATRIX_PATTERNS, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DotMatrix, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FileIcon, FileIconStyles, FileItem, FileItemGitStatusClasses, FileItemStyles, FilePanel, FilePanelStyles, FileTree, FileTreeStyles, FolderIcon, FolderIconStyles, GOOEY_DEFAULTS, Globe, GooeyButton, GooeyCanvas, GooeyFilter, GooeyMorphingSurface, Highlight, HighlightItem, HomeIcon, HugeIcons, IconSize, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, LOG_LEVEL_STYLES, Label, LabelPosition, Layers, LayoutPanelTopIcon, ListIcon, LogParserService, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MiddleTruncate, MiddleTruncatePath, MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles, MiddleTruncateStyles, MobileBottomNav, Morph, MorphPath, MorphingPopover, MorphingPopoverWithTarget, NavItemState, NavSize, NavVariant, OperationCard, OperationCardActions, OperationCardHeader, OperationCardProgress, OperationCardRoot, OperationCardStats, OperationCardStyles, OperationCardVisualizer, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, SIDEBAR_VISUAL_PRESETS, STATUS_COLORS, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Sidebar, SidebarBorderRadius, SidebarCollapseMode, SidebarContent, SidebarFluidIndicator, SidebarHideBehaviour, SidebarHideOpensBehavior, SidebarIconLibrary, SidebarIndicator, SidebarItem, SidebarLayoutBehaviour, SidebarNav, SidebarSafeArea, SidebarSafeAreaPosition, SidebarSubContent, SidebarSubLink, SidebarTimingFunction, SidebarToggle, SidebarTooltip, SidebarTransitionDuration, SidebarWidth, SidebarZIndex, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalActionBar, TerminalClearButton, TerminalConnectionStatus, TerminalIcon, TerminalPanelChrome, TerminalPanelFooter, TerminalPanelHeader, TerminalSettingsPopover, TerminalStatusBar, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, ZIndexLevel, accordionVariants, badgeVariants, bracketVariants, buildColorMatrixValues, buildDelays, buildFilterString, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, computeBlur, dataCardStyles, dataCardVariants, detectIOSVersion, dialogStyles, dynamicToggleStyles, dynamicToggleVariants, fieldVariants, fileIconVariants, fileItemVariants, filePanelVariants, fileTreeVariants, folderIconVariants, generateIndicatorStyles, generateSidebarStyles, getResponsiveDuration, getResponsiveStagger, getStrictContext, iconVariants, inputGroupAddonVariants, inputGroupButtonVariants, labelVariants, middleTruncateVariants, morphPathDown, morphPathUp, badgeVariants$1 as navBadgeVariants, navItemVariants, navListVariants, operationCardVariants, popoverStyles, progressStyles, rootVariants, shouldShowSeparator, spacerVariants, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useDynamicToggle, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIOSFixedReset, useIOSSafariFix, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, useMorphPath, useOperationCard, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSidebarContext, useSidebarIndicator, useSidebarKeyboard, useSubContent, useSwitch, useTooltip, useViewTransitions };

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

@@ -0,0 +1,30 @@
+/**
+ * Styles for MiddleTruncate.
+ *
+ * @module @mks2508/mks-ui/react/ui/MiddleTruncate
+ */
+import type { StyleSlots } from '../../../core/types';
+/**
+ * Visual regions of the MiddleTruncate component.
+ *
+ * | Slot | Region |
+ * |------|--------|
+ * | `root` | Container `<span>` wrapping start + ellipsis + end segments |
+ * | `start` | Truncatable leading portion (collapses when narrow) |
+ * | `ellipsis` | Ellipsis character(s) between start and end |
+ * | `end` | Fixed trailing portion (always visible) |
+ */
+export type TMiddleTruncateSlot = 'root' | 'start' | 'ellipsis' | 'end';
+/**
+ * Default Tailwind classes for each MiddleTruncate slot.
+ *
+ * Uses CSS-only flex truncation — `start` segment has `min-w-0 flex-1 truncate`
+ * so the browser truncates it automatically when the container is too narrow.
+ * No JS measurement, no ResizeObserver.
+ */
+export declare const MiddleTruncateStyles: StyleSlots<TMiddleTruncateSlot>;
+/** CVA variants for the MiddleTruncate root. */
+export declare const middleTruncateVariants: (props?: ({} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Tailwind classes used when text is short enough to skip splitting. */
+export declare const MiddleTruncateShortRootStyles: "truncate";
+//# sourceMappingURL=MiddleTruncate.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MiddleTruncate.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;;;;;;;;GASG;AACH,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC;AAExE;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,EAAE,UAAU,CAAC,mBAAmB,CAKvD,CAAC;AAEX,gDAAgD;AAChD,eAAO,MAAM,sBAAsB,2FAGjC,CAAC;AAEH,yEAAyE;AACzE,eAAO,MAAM,6BAA6B,EAAG,UAAmB,CAAC"}

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

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+
+//#region src/react-ui/ui/MiddleTruncate/MiddleTruncate.styles.ts
+/**
+* Styles for MiddleTruncate.
+*
+* @module @mks2508/mks-ui/react/ui/MiddleTruncate
+*/
+/**
+* Default Tailwind classes for each MiddleTruncate slot.
+*
+* Uses CSS-only flex truncation — `start` segment has `min-w-0 flex-1 truncate`
+* so the browser truncates it automatically when the container is too narrow.
+* No JS measurement, no ResizeObserver.
+*/
+const MiddleTruncateStyles = {
+	root: "inline-flex items-baseline min-w-0 max-w-full",
+	start: "truncate min-w-0 flex-1",
+	ellipsis: "shrink-0",
+	end: "shrink-0"
+};
+/** CVA variants for the MiddleTruncate root. */
+const middleTruncateVariants = cva(MiddleTruncateStyles.root, {
+	variants: {},
+	defaultVariants: {}
+});
+/** Tailwind classes used when text is short enough to skip splitting. */
+const MiddleTruncateShortRootStyles = "truncate";
+
+//#endregion
+export { MiddleTruncateShortRootStyles, MiddleTruncateStyles, middleTruncateVariants };

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

@@ -0,0 +1,66 @@
+/**
+ * Types for MiddleTruncate.
+ *
+ * @module @mks2508/mks-ui/react/ui/MiddleTruncate
+ */
+import type { SlotOverrides } from '../../../core/types';
+import type { TMiddleTruncateSlot } from './MiddleTruncate.styles';
+/**
+ * Props for `<MiddleTruncate>`.
+ *
+ * Supports two strategies via discriminated union:
+ * - `strategy: 'chars'` — split by individual characters (hashes, UUIDs, commit SHAs)
+ * - `strategy: 'segments'` — split by a separator string (paths, domains, k8s names)
+ *
+ * @example
+ * ```tsx
+ * // Char-based truncation (keep 6 start + 4 end chars)
+ * <MiddleTruncate strategy="chars" text="0xABCDEF1234567890" keepStart={6} keepEnd={4} />
+ * // → 0xABCD…7890
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Segment-based truncation (file path)
+ * <MiddleTruncate strategy="segments" separator="/" text="src/components/Button/index.tsx" keepEnd={2} />
+ * // → src/…/Button/index.tsx
+ * ```
+ */
+export type IMiddleTruncateProps = {
+    /** Full text to truncate. */
+    text: string;
+    /** Character-level truncation. */
+    strategy: 'chars';
+    /** Leading characters locked visible. Default 0. */
+    keepStart?: number;
+    /** Trailing characters locked visible. Default 6. */
+    keepEnd?: number;
+    /** Ellipsis character. Default '…'. */
+    ellipsis?: string;
+    /** Tooltip on hover. Default: full text. */
+    title?: string;
+    /** Optional CSS class merged onto the root span. */
+    className?: string;
+    /** Override default Tailwind classes per visual slot. */
+    slots?: SlotOverrides<TMiddleTruncateSlot>;
+} | {
+    /** Full text to truncate. */
+    text: string;
+    /** Segment-level truncation split by separator. */
+    strategy: 'segments';
+    /** Required separator string (e.g. '/' for paths, '.' for domains, '-' for k8s). */
+    separator: string;
+    /** Leading segments locked visible. Default 0. */
+    keepStart?: number;
+    /** Trailing segments locked visible. Default 1. */
+    keepEnd?: number;
+    /** Ellipsis character. Default '…'. */
+    ellipsis?: string;
+    /** Tooltip on hover. Default: full text. */
+    title?: string;
+    /** Optional CSS class merged onto the root span. */
+    className?: string;
+    /** Override default Tailwind classes per visual slot. */
+    slots?: SlotOverrides<TMiddleTruncateSlot>;
+};
+//# sourceMappingURL=MiddleTruncate.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MiddleTruncate.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncate/MiddleTruncate.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,oBAAoB,GAC5B;IACE,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;CAC5C,GACD;IACE,6BAA6B;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,EAAE,UAAU,CAAC;IACrB,oFAAoF;IACpF,SAAS,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;CAC5C,CAAC"}

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

@@ -0,0 +1,79 @@
+/**
+ * MiddleTruncate — CSS-only middle truncation primitive.
+ *
+ * Truncates text from the middle, preserving the start and/or end portions.
+ * Supports two strategies:
+ *
+ * - `strategy='chars'` — splits by individual characters, useful for hashes,
+ *   UUIDs, commit SHAs, or any long identifier where you want to keep the
+ *   first N and last M characters visible.
+ *
+ * - `strategy='segments'` — splits by a separator string (e.g. '/', '.', '-'),
+ *   useful for file paths, domain names, or k8s resource names where segment
+ *   boundaries are semantically meaningful.
+ *
+ * Uses CSS-only flex truncation: the `start` segment uses `flex-1 min-w-0 truncate`
+ * so the browser truncates it automatically when the container is too narrow.
+ * Zero JS measurement, zero ResizeObserver.
+ *
+ * @module @mks2508/mks-ui/react/ui/MiddleTruncate
+ *
+ * @example
+ * ```tsx
+ * // Hash truncation — preserve first 6 and last 4 chars
+ * <MiddleTruncate strategy="chars" text="0xABCDEF1234567890" keepStart={6} keepEnd={4} />
+ * // → 0xABCD…7890
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // File path — preserve filename + parent dir
+ * <MiddleTruncate
+ *   strategy="segments"
+ *   separator="/"
+ *   text="src/components/Terminal/primitives/ChromeShell.tsx"
+ *   keepEnd={2}
+ * />
+ * // → src/…/ChromeShell.tsx
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Domain — preserve root + TLD
+ * <MiddleTruncate
+ *   strategy="segments"
+ *   separator="."
+ *   text="api.production.eu-west.example.com"
+ *   keepStart={1}
+ *   keepEnd={2}
+ * />
+ * // → api.…example.com
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With slot overrides for custom styling
+ * <MiddleTruncate
+ *   strategy="segments"
+ *   separator="/"
+ *   text={path}
+ *   keepEnd={2}
+ *   slots={{
+ *     start: 'text-muted-foreground/60',
+ *     ellipsis: 'text-muted-foreground/40 mx-0.5',
+ *     end: 'font-semibold text-foreground',
+ *   }}
+ * />
+ * ```
+ */
+import type { IMiddleTruncateProps } from './MiddleTruncate.types';
+/**
+ * Middle-truncates text, preserving start and/or end portions.
+ *
+ * @param props - See {@link IMiddleTruncateProps}
+ */
+export declare const MiddleTruncate: import("react").MemoExoticComponent<(props: IMiddleTruncateProps) => React.ReactElement>;
+export { MiddleTruncateStyles, middleTruncateVariants, } from './MiddleTruncate.styles';
+export type { TMiddleTruncateSlot } from './MiddleTruncate.styles';
+export type { IMiddleTruncateProps } from './MiddleTruncate.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncate/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AAWH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE;;;;GAIG;AACH,eAAO,MAAM,cAAc,8CAClB,oBAAoB,KAC1B,KAAK,CAAC,YAAY,CAqBnB,CAAC;AA+FH,OAAO,EACL,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -0,0 +1,164 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { MiddleTruncateShortRootStyles, MiddleTruncateStyles, middleTruncateVariants } from "./MiddleTruncate.styles.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/MiddleTruncate/index.tsx
+/**
+* MiddleTruncate — CSS-only middle truncation primitive.
+*
+* Truncates text from the middle, preserving the start and/or end portions.
+* Supports two strategies:
+*
+* - `strategy='chars'` — splits by individual characters, useful for hashes,
+*   UUIDs, commit SHAs, or any long identifier where you want to keep the
+*   first N and last M characters visible.
+*
+* - `strategy='segments'` — splits by a separator string (e.g. '/', '.', '-'),
+*   useful for file paths, domain names, or k8s resource names where segment
+*   boundaries are semantically meaningful.
+*
+* Uses CSS-only flex truncation: the `start` segment uses `flex-1 min-w-0 truncate`
+* so the browser truncates it automatically when the container is too narrow.
+* Zero JS measurement, zero ResizeObserver.
+*
+* @module @mks2508/mks-ui/react/ui/MiddleTruncate
+*
+* @example
+* ```tsx
+* // Hash truncation — preserve first 6 and last 4 chars
+* <MiddleTruncate strategy="chars" text="0xABCDEF1234567890" keepStart={6} keepEnd={4} />
+* // → 0xABCD…7890
+* ```
+*
+* @example
+* ```tsx
+* // File path — preserve filename + parent dir
+* <MiddleTruncate
+*   strategy="segments"
+*   separator="/"
+*   text="src/components/Terminal/primitives/ChromeShell.tsx"
+*   keepEnd={2}
+* />
+* // → src/…/ChromeShell.tsx
+* ```
+*
+* @example
+* ```tsx
+* // Domain — preserve root + TLD
+* <MiddleTruncate
+*   strategy="segments"
+*   separator="."
+*   text="api.production.eu-west.example.com"
+*   keepStart={1}
+*   keepEnd={2}
+* />
+* // → api.…example.com
+* ```
+*
+* @example
+* ```tsx
+* // With slot overrides for custom styling
+* <MiddleTruncate
+*   strategy="segments"
+*   separator="/"
+*   text={path}
+*   keepEnd={2}
+*   slots={{
+*     start: 'text-muted-foreground/60',
+*     ellipsis: 'text-muted-foreground/40 mx-0.5',
+*     end: 'font-semibold text-foreground',
+*   }}
+* />
+* ```
+*/
+/**
+* Middle-truncates text, preserving start and/or end portions.
+*
+* @param props - See {@link IMiddleTruncateProps}
+*/
+const MiddleTruncate = memo(function MiddleTruncate(props) {
+	const { text, strategy, keepStart = 0, keepEnd = strategy === "chars" ? 6 : 1, ellipsis = "…", title, className, slots } = props;
+	const tooltip = title ?? text;
+	if (strategy === "chars") return /* @__PURE__ */ jsx(CharTruncator, {
+		text,
+		keepStart,
+		keepEnd,
+		ellipsis,
+		tooltip,
+		className,
+		slots
+	});
+	const sep = props.separator;
+	return /* @__PURE__ */ jsx(SegmentTruncator, {
+		text,
+		separator: sep,
+		keepStart,
+		keepEnd,
+		ellipsis,
+		tooltip,
+		className,
+		slots
+	});
+});
+function CharTruncator({ text, keepStart, keepEnd, ellipsis, tooltip, className, slots }) {
+	if (text.length <= keepStart + keepEnd) return /* @__PURE__ */ jsx("span", {
+		className: cn(MiddleTruncateShortRootStyles, slots?.root, className),
+		title: tooltip,
+		children: text
+	});
+	const start = text.slice(0, keepStart);
+	const end = text.slice(-keepEnd);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(middleTruncateVariants(), slots?.root, className),
+		title: tooltip,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn(MiddleTruncateStyles.start, slots?.start),
+				children: start
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(MiddleTruncateStyles.ellipsis, slots?.ellipsis),
+				children: ellipsis
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(MiddleTruncateStyles.end, slots?.end),
+				children: end
+			})
+		]
+	});
+}
+function SegmentTruncator({ text, separator, keepStart, keepEnd, ellipsis, tooltip, className, slots }) {
+	const segments = text.split(separator);
+	if (segments.length <= keepStart + keepEnd) return /* @__PURE__ */ jsx("span", {
+		className: cn(MiddleTruncateShortRootStyles, slots?.root, className),
+		title: tooltip,
+		children: text
+	});
+	const endSegments = segments.slice(-keepEnd);
+	const start = segments.slice(0, -keepEnd).join(separator) + separator;
+	const end = endSegments.join(separator);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(middleTruncateVariants(), slots?.root, className),
+		title: tooltip,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn(MiddleTruncateStyles.start, slots?.start),
+				children: start
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(MiddleTruncateStyles.ellipsis, slots?.ellipsis),
+				children: ellipsis
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn(MiddleTruncateStyles.end, slots?.end),
+				children: end
+			})
+		]
+	});
+}
+
+//#endregion
+export { MiddleTruncate };

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

@@ -29,4 +29,4 @@ const middleTruncatePathVariants = cva(MiddleTruncatePathStyles.root, {
 const MiddleTruncatePathShortRootStyles = "truncate";
 
 //#endregion
-export { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles, middleTruncatePathVariants };
+export { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles };

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

@@ -1,6 +1,9 @@
 /**
  * MiddleTruncatePath — CSS-only middle truncation for file paths.
  *
+ * @deprecated Use `<MiddleTruncate strategy="segments" separator="/">` instead.
+ * Path-specific wrapper kept for backward compatibility. Will be removed in v0.11.
+ *
  * Splits a path into a truncatable start and a fixed end
  * (`parent/filename` by default). When space is limited, the start
  * truncates with ellipsis while the end (the most identifiable part)
@@ -16,6 +19,9 @@ import type { IMiddleTruncatePathProps } from './MiddleTruncatePath.types';
 /**
  * Middle-truncates a file path, keeping the end segments visible.
  *
+ * @deprecated Use `<MiddleTruncate strategy="segments" separator="/">` instead.
+ *   This component is a thin path-specific wrapper and will be removed in v0.11.
+ *
  * @param slots - Override Tailwind classes per visual slot
  *
  * @example
@@ -27,7 +33,7 @@ import type { IMiddleTruncatePathProps } from './MiddleTruncatePath.types';
  * ```
  */
 export declare const MiddleTruncatePath: import("react").MemoExoticComponent<({ path, keepEnd, className, startClassName, endClassName, slots, }: IMiddleTruncatePathProps) => import("react/jsx-runtime").JSX.Element>;
-export { MiddleTruncatePathStyles, middleTruncatePathVariants, } from './MiddleTruncatePath.styles';
+export { MiddleTruncatePathStyles, MiddleTruncatePathShortRootStyles, } from './MiddleTruncatePath.styles';
 export type { MiddleTruncatePathSlot } from './MiddleTruncatePath.styles';
 export type { IMiddleTruncatePathProps } from './MiddleTruncatePath.types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncatePath/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAWH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE3E;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,kBAAkB,2GAO5B,wBAAwB,6CAqCzB,CAAC;AAEH,OAAO,EACL,wBAAwB,EACxB,0BAA0B,GAC3B,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,YAAY,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/MiddleTruncatePath/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAQH,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAE3E;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,2GAO5B,wBAAwB,6CA6BzB,CAAC;AAEH,OAAO,EACL,wBAAwB,EACxB,iCAAiC,GAClC,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,YAAY,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

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

@@ -1,14 +1,18 @@
 'use client';
 
 import { cn } from "../../lib/utils.js";
-import { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles, middleTruncatePathVariants } from "./MiddleTruncatePath.styles.js";
+import { MiddleTruncate } from "../MiddleTruncate/index.js";
+import { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles } from "./MiddleTruncatePath.styles.js";
 import { memo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/react-ui/ui/MiddleTruncatePath/index.tsx
 /**
 * MiddleTruncatePath — CSS-only middle truncation for file paths.
 *
+* @deprecated Use `<MiddleTruncate strategy="segments" separator="/">` instead.
+* Path-specific wrapper kept for backward compatibility. Will be removed in v0.11.
+*
 * Splits a path into a truncatable start and a fixed end
 * (`parent/filename` by default). When space is limited, the start
 * truncates with ellipsis while the end (the most identifiable part)
@@ -23,6 +27,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * Middle-truncates a file path, keeping the end segments visible.
 *
+* @deprecated Use `<MiddleTruncate strategy="segments" separator="/">` instead.
+*   This component is a thin path-specific wrapper and will be removed in v0.11.
+*
 * @param slots - Override Tailwind classes per visual slot
 *
 * @example
@@ -34,25 +41,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * ```
 */
 const MiddleTruncatePath = memo(function MiddleTruncatePath({ path, keepEnd = 2, className, startClassName, endClassName, slots }) {
-	const segments = path.split("/");
-	if (segments.length <= keepEnd) return /* @__PURE__ */ jsx("span", {
+	if (path.split("/").length <= keepEnd) return /* @__PURE__ */ jsx("span", {
 		className: cn(MiddleTruncatePathShortRootStyles, slots?.root, className),
 		title: path,
 		children: path
 	});
-	const endSegments = segments.slice(-keepEnd);
-	const start = segments.slice(0, -keepEnd).join("/") + "/";
-	const end = endSegments.join("/");
-	return /* @__PURE__ */ jsxs("span", {
-		className: cn(middleTruncatePathVariants(), slots?.root, className),
-		title: path,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: cn(MiddleTruncatePathStyles.start, slots?.start, startClassName),
-			children: start
-		}), /* @__PURE__ */ jsx("span", {
-			className: cn(MiddleTruncatePathStyles.end, slots?.end, endClassName),
-			children: end
-		})]
+	return /* @__PURE__ */ jsx(MiddleTruncate, {
+		strategy: "segments",
+		separator: "/",
+		text: path,
+		keepEnd,
+		className,
+		slots: {
+			...slots,
+			start: cn(slots?.start, startClassName),
+			end: cn(slots?.end, endClassName)
+		}
 	});
 });
 

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

@@ -30,6 +30,7 @@ export * from './FileTree';
 export * from './Input';
 export * from './InputGroup';
 export * from './Label';
+export * from './MiddleTruncate';
 export * from './MiddleTruncatePath';
 export * from './OperationCard';
 export * from './Select';

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,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"}
+{"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,kBAAkB,CAAC;AACjC,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

@@ -38,7 +38,9 @@ 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 { MiddleTruncateStyles, middleTruncateVariants } from "./MiddleTruncate/MiddleTruncate.styles.js";
+import { MiddleTruncate } from "./MiddleTruncate/index.js";
+import { MiddleTruncatePathShortRootStyles, MiddleTruncatePathStyles } 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";

package/package.json

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