@mks2508/mks-ui 0.8.1 → 0.8.2

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.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/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

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/FileIcon
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions for the FileIcon component. */
 export type FileIconSlot = 'root';
 /**

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

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/FileIcon
  */
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { FileIconSlot, FolderIconSlot } from './FileIcon.styles';
 /**
  * Function that resolves a filename to an icon asset identifier.

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

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/FileItem
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions of the FileItem component. */
 export type FileItemSlot = 'root' | 'icon' | 'path' | 'modifiedChip' | 'boost' | 'gitStatus';
 /**

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

@@ -4,7 +4,7 @@
  * @module @mks2508/mks-ui/react/ui/FileItem
  */
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { FileIconResolver } from '../FileIcon/FileIcon.types';
 import type { FileItemSlot, fileItemVariants } from './FileItem.styles';
 /** What kind of filesystem entry this row represents. */

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

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/FilePanel
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions of the FilePanel component. */
 export type FilePanelSlot = 'root' | 'header' | 'title' | 'toolbar' | 'search' | 'body' | 'footer' | 'status';
 /**

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

@@ -5,7 +5,7 @@
  */
 import type { ReactNode } from 'react';
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { FilePanelSlot, filePanelVariants } from './FilePanel.styles';
 /** Visual density for the panel frame. */
 export type FilePanelDensity = NonNullable<VariantProps<typeof filePanelVariants>['density']>;

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

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/FileTree
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions of the FileTree component. */
 export type FileTreeSlot = 'root' | 'list' | 'node' | 'row' | 'indent' | 'chevron' | 'empty';
 /**

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

@@ -4,7 +4,7 @@
  * @module @mks2508/mks-ui/react/ui/FileTree
  */
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { FileIconResolver } from '../FileIcon/FileIcon.types';
 import type { FileItemChangeStatus } from '../FileItem/FileItem.types';
 import type { FileTreeSlot, fileTreeVariants } from './FileTree.styles';

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

@@ -5,7 +5,7 @@
  * @module @mks2508/mks-ui/react/ui/GooeyButton
  */
 import type { ReactNode } from 'react';
-import type { IGooeyMorphConfig, IGooeyMorphSlots } from '@/react-ui/primitives/GooeyMorphingSurface';
+import type { IGooeyMorphConfig, IGooeyMorphSlots } from '../../../react-ui/primitives/GooeyMorphingSurface';
 export interface IGooeyButtonProps {
     /** Controlled open state. */
     open?: boolean;

package/dist/react-ui/ui/GooeyButton/gooey.css

@@ -0,0 +1,47 @@
+/* =============================================================================
+ *  GooeyButton — transparent hit area over the pill region.
+ *
+ *  The visual pill is drawn by the <GooeyMorphingSurface> primitive; this
+ *  layer is a single button that captures clicks in both open and closed
+ *  states without painting anything. All layout math comes from the
+ *  primitive's CSS custom props (--gms-pill-w, --gms-pill-h).
+ * ============================================================================= */
+
+.gbtn-host {
+	position: relative;
+	display: inline-block;
+}
+
+.gbtn-trigger {
+	position: absolute;
+	top: 0;
+	/* Follow the pill's computed X (which honours `pillOffsetX`) instead of
+	 * centring the hit-area in the host. Centring worked only while
+	 * `pillOffsetX === 0`; any non-zero offset drifted the visual pill away
+	 * from the invisible trigger. See `GooeyButton/index.tsx` — the host
+	 * exposes `--gms-pill-x` identical to the primitive's internal value. */
+	left: var(--gms-pill-x);
+	z-index: 3;
+	width: var(--gms-pill-w);
+	height: var(--gms-pill-h);
+	padding: 0;
+	margin: 0;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+	font: inherit;
+	color: inherit;
+	/* Pill-shaped focus ring. */
+	border-radius: 9999px;
+}
+
+.gbtn-trigger:focus-visible {
+	outline: 2px solid var(--ring, currentColor);
+	outline-offset: 2px;
+}
+
+.gbtn-trigger:disabled {
+	cursor: not-allowed;
+	pointer-events: none;
+}
+

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions for the Input component. */
 type InputSlot = 'root';
 declare const inputStyles: StyleSlots<InputSlot>;

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

@@ -1,4 +1,4 @@
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { InputSlot } from './Input.styles';
 /** Props for the Input component. */
 interface IInputProps extends React.ComponentProps<'input'> {

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions for the InputGroup component family. */
 type InputGroupSlot = 'root' | 'addon' | 'button' | 'text' | 'input' | 'textarea';
 declare const inputGroupStyles: StyleSlots<InputGroupSlot>;

package/dist/react-ui/ui/InputGroup/InputGroup.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 { inputGroupAddonVariants, inputGroupButtonVariants, InputGroupSlot } from './InputGroup.styles';
 /** Props for the InputGroup container. */
 interface IInputGroupProps extends React.ComponentProps<'div'> {

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 type LabelSlot = 'root';
 declare const labelStyles: StyleSlots<LabelSlot>;
 export { labelStyles };

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

@@ -1,4 +1,4 @@
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { LabelSlot } from './Label.styles';
 /** Props for the Label component. */
 interface ILabelProps extends React.ComponentProps<'label'> {

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

@@ -12,7 +12,7 @@
  * // menuStyles.popup => default popup classes
  * ```
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /**
  * Union of all visual regions (slots) in the Menu component tree.
  *

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

@@ -10,8 +10,8 @@
 import type * as React from 'react';
 import type { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import type { HTMLMotionProps, Transition } from 'motion/react';
-import type { IBaseConfig, SlotOverrides } from '@/core/types';
-import type { IHighlightProps, IHighlightItemProps } from '@/react-ui/primitives/Highlight';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
+import type { IHighlightProps, IHighlightItemProps } from '../../../react-ui/primitives/Highlight';
 import type { MenuSlot } from './Menu.styles';
 /**
  * Configuration interface for Menu behavior and animation.

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

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/MiddleTruncatePath
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions of the MiddleTruncatePath component. */
 export type MiddleTruncatePathSlot = 'root' | 'start' | 'end';
 /**