@mks2508/mks-ui 0.6.4 → 0.6.6

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.d.ts

@@ -1,3 +1,4 @@
+import './useViewTransitions.module.css';
 import type { IViewTransitionsOptions, IViewTransitionsAPI } from '../Morph.types';
 /**
  * Hook for the View Transitions API.
@@ -10,18 +11,25 @@ import type { IViewTransitionsOptions, IViewTransitionsAPI } from '../Morph.type
  * - Firefox 144+
  * - Safari latest
  *
- * @param options - Optional view transition name and types
+ * View transition styles are applied via CSS module, eliminating
+ * the need for runtime style injection. Elements should have
+ * `view-transition-name` applied via inline style or CSS class.
+ *
+ * @param options - Optional view transition name (deprecated, use inline style)
  * @returns View Transitions API with support detection and transition trigger
  *
  * @example
  * ```tsx
- * const { isSupported, startTransition } = useViewTransitions({ name: 'hero' });
+ * const { isSupported, startTransition } = useViewTransitions();
  *
  * const handleTransition = async () => {
  *   await startTransition(() => {
  *     setActiveImage(nextImage);
  *   });
  * };
+ *
+ * // Apply view-transition-name to elements
+ * <div style={{ viewTransitionName: 'hero' }}>...</div>
  * ```
  */
 export declare function useViewTransitions(options?: IViewTransitionsOptions): IViewTransitionsAPI;

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useViewTransitions.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,mBAAmB,CAyDzF"}
+{"version":3,"file":"useViewTransitions.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.ts"],"names":[],"mappings":"AAGA,OAAO,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,uBAAuB,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,CAAC,EAAE,uBAAuB,GAAG,mBAAmB,CAoCzF"}

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.js

@@ -1,5 +1,6 @@
 'use client';
 
+import "./useViewTransitions.module.js";
 import { useCallback, useMemo, useRef } from "react";
 
 //#region src/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.ts
@@ -14,22 +15,29 @@ import { useCallback, useMemo, useRef } from "react";
 * - Firefox 144+
 * - Safari latest
 *
-* @param options - Optional view transition name and types
+* View transition styles are applied via CSS module, eliminating
+* the need for runtime style injection. Elements should have
+* `view-transition-name` applied via inline style or CSS class.
+*
+* @param options - Optional view transition name (deprecated, use inline style)
 * @returns View Transitions API with support detection and transition trigger
 *
 * @example
 * ```tsx
-* const { isSupported, startTransition } = useViewTransitions({ name: 'hero' });
+* const { isSupported, startTransition } = useViewTransitions();
 *
 * const handleTransition = async () => {
 *   await startTransition(() => {
 *     setActiveImage(nextImage);
 *   });
 * };
+*
+* // Apply view-transition-name to elements
+* <div style={{ viewTransitionName: 'hero' }}>...</div>
 * ```
 */
 function useViewTransitions(options) {
-	const optionsRef = useRef(options);
+	useRef(options);
 	const typesRef = useRef(options?.types || []);
 	const isSupported = useMemo(() => {
 		if (typeof document === "undefined") return false;
@@ -45,30 +53,10 @@ function useViewTransitions(options) {
 				await callback();
 				return;
 			}
-			const viewTransitionName = optionsRef.current?.name;
-			const setupStyles = () => {
-				if (viewTransitionName) {
-					const styleEl = document.createElement("style");
-					styleEl.id = `view-transition-${viewTransitionName}`;
-					styleEl.textContent = `
-          ::view-transition-old(${viewTransitionName}),
-          ::view-transition-new(${viewTransitionName}) {
-            animation-duration: 300ms;
-            animation-timing-function: ease-out;
-          }
-        `;
-					document.head.appendChild(styleEl);
-					return () => {
-						styleEl.remove();
-					};
-				}
-				return () => {};
-			};
-			const cleanup = setupStyles();
 			try {
 				await document.startViewTransition(callback).finished;
-			} finally {
-				cleanup();
+			} catch (error) {
+				await callback();
 			}
 		}, []),
 		setTypes

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.module-7y-To7On.css

@@ -0,0 +1,20 @@
+/**
+ * View Transitions API - Default transition styles.
+ *
+ * These styles apply to all view-transition pseudo-elements by default,
+ * eliminating the need for dynamic style injection based on transition names.
+ *
+ * Usage: Apply `view-transition-name` via inline style or CSS variable:
+ *   <div style={{ viewTransitionName: 'hero' }}>...</div>
+ *
+ * Or via CSS:
+ *   .my-element { view-transition-name: hero; }
+ */
+
+/* Default animation for all view transitions */
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: 300ms;
+  animation-timing-function: ease-out;
+}
+

package/dist/react-ui/ui/DynamicToggle/{DynamicToggle.css → DynamicToggle.module-BE6uirOX.css}

@@ -4,7 +4,7 @@
  * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
  * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
  *
- * @import '@mks2508/mks-ui/dist/react-ui/ui/DynamicToggle/DynamicToggle.css';
+ * @import '@mks2508/mks-ui/react/ui/DynamicToggle/DynamicToggle.module.css';
  */
 
 /* ── Variables ── */
@@ -366,3 +366,4 @@
   position: relative;
   z-index: 1;
 }
+

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

@@ -1,4 +1,4 @@
-import './DynamicToggle.css';
+import './DynamicToggle.module.css';
 import { dynamicToggleVariants } from './DynamicToggle.styles';
 import type { DynamicToggleContextType, IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps } from './DynamicToggle.types';
 declare const useDynamicToggle: () => DynamicToggleContextType;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAuB,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,KAAK,EACV,wBAAwB,EAIxB,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAM/B,QAAA,MAA8B,gBAAgB,gCACsB,CAAC;AAmCrE;;GAEG;AACH,iBAAS,aAAa,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAuGrB;kBArHQ,aAAa;;;AA2HtB;;GAEG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA2BrF;kBA3BQ,mBAAmB;;;AAiC5B;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,cAAsB,EACtB,aAAuB,EACvB,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,2CA0C1B;kBAjDQ,kBAAkB;;;AA4D3B,2DAA2D;AAC3D,KAAK,qBAAqB,GAAG,OAAO,aAAa,GAAG;IAClD,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,KAAK,EAAE,OAAO,kBAAkB,CAAC;CAClC,CAAC;AASF,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GACtB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC;AAEtC,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,wBAAwB,EACxB,0BAA0B,EAC1B,2BAA2B,EAC3B,8BAA8B,GAC/B,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/index.tsx"],"names":[],"mappings":"AA8BA,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAuB,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,KAAK,EACV,wBAAwB,EAIxB,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAM/B,QAAA,MAA8B,gBAAgB,gCACsB,CAAC;AAmCrE;;GAEG;AACH,iBAAS,aAAa,CAAC,EACrB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,KAAK,EAAE,SAAS,EAChB,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,YAAY,EACZ,aAAa,EACb,GAAG,IAAI,EACR,EAAE,mBAAmB,2CAuGrB;kBArHQ,aAAa;;;AA2HtB;;GAEG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA2BrF;kBA3BQ,mBAAmB;;;AAiC5B;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,cAAsB,EACtB,aAAuB,EACvB,QAAQ,EACR,SAAS,GACV,EAAE,wBAAwB,2CA0C1B;kBAjDQ,kBAAkB;;;AA4D3B,2DAA2D;AAC3D,KAAK,qBAAqB,GAAG,OAAO,aAAa,GAAG;IAClD,MAAM,EAAE,OAAO,mBAAmB,CAAC;IACnC,KAAK,EAAE,OAAO,kBAAkB,CAAC;CAClC,CAAC;AASF,OAAO,EACL,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GACtB,CAAC;AAEF,YAAY,EAAE,qBAAqB,EAAE,CAAC;AAEtC,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,wBAAwB,EACxB,0BAA0B,EAC1B,2BAA2B,EAC3B,8BAA8B,GAC/B,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

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

@@ -4,7 +4,7 @@ import { cn } from "../../lib/utils.js";
 import { GooeyCanvas } from "../../primitives/waapi/Gooey/GooeyCanvas.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { useControlledState } from "../../hooks/State/UseControlledState.js";
-import "./DynamicToggle.js";
+import "./DynamicToggle.module.js";
 import { dynamicToggleStyles, dynamicToggleVariants } from "./DynamicToggle.styles.js";
 import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/react-ui/ui/Tabs/Tabs.module-CFzRKHsx.css

@@ -0,0 +1,38 @@
+/**
+ * Tabs CSS Anchor Positioning.
+ *
+ * Zero-JS position tracking for the sliding indicator using CSS Anchor API.
+ * The indicator automatically follows the active tab via anchor positioning.
+ */
+
+/* Scope anchors per Tabs instance */
+[data-slot="tabs-list"] {
+  anchor-scope: --tabs-active;
+}
+
+/* Active tab becomes the anchor */
+[data-slot="tabs-tab"][data-active] {
+  anchor-name: --tabs-active;
+}
+
+/* Indicator follows the active anchor */
+[data-slot="tabs-indicator"] {
+  position-anchor: --tabs-active;
+  left: anchor(left);
+  right: anchor(right);
+  transition:
+    top 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    left 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    right 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    bottom 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    width 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    height 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+/* Respect reduced motion preference */
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="tabs-indicator"] {
+    transition-duration: 0ms;
+  }
+}
+

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

@@ -1,4 +1,5 @@
 import { tabsListVariants, tabsTabVariants, tabsIndicatorVariants } from './Tabs.styles';
+import './Tabs.module.css';
 import type { ITabsProps, ITabsHighlightProps, ITabsHighlightItemProps, ITabsListProps, ITabsTabProps, ITabsPanelProps, ITabsPanelsProps } from './Tabs.types';
 /**
  * Root Tabs component -- provides active tab value context and

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Tabs/index.tsx"],"names":[],"mappings":"AAoEA,OAAO,EAEL,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACtB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAEV,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAEjB,MAAM,cAAc,CAAC;AAgDtB;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAiB/D;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,aAAa,CAAC,EACrB,UAA4D,EAC5D,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAcrB;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CA+BhB;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,iBAAiB,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAEtE;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAgB5E;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,WAAW,EACX,UAAiD,EACjD,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,2CAsBjB;AAuBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,gBAAgB,2CAiD1C;AAMD,OAAO,EACL,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,qBAAqB,GACtB,CAAC;AAGF,YAAY,EACV,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,WAAW,EACX,eAAe,GAChB,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Tabs/index.tsx"],"names":[],"mappings":"AAoEA,OAAO,EAEL,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACtB,MAAM,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAE3B,OAAO,KAAK,EAEV,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAEjB,MAAM,cAAc,CAAC;AAqBtB;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAiB/D;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,aAAa,CAAC,EACrB,UAA4D,EAC5D,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAcrB;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,QAAQ,CAAC,EAChB,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,2CA8BhB;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,iBAAiB,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAEtE;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,OAAO,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAgB5E;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,WAAW,EACX,UAAiD,EACjD,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,2CAsBjB;AAuBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,UAAU,CAAC,KAAK,EAAE,gBAAgB,2CAiD1C;AAMD,OAAO,EACL,IAAI,EACJ,aAAa,EACb,iBAAiB,EACjB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,qBAAqB,GACtB,CAAC;AAGF,YAAY,EACV,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,EACtB,WAAW,EACX,eAAe,GAChB,MAAM,cAAc,CAAC;AAEtB,YAAY,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}

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

@@ -6,6 +6,7 @@ import { AutoHeight } from "../../primitives/AutoHeight/index.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { useControlledState } from "../../hooks/State/UseControlledState.js";
 import { tabsIndicatorVariants, tabsListVariants, tabsStyles, tabsTabVariants } from "./Tabs.styles.js";
+import "./Tabs.module.js";
 import * as React$1 from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -61,27 +62,6 @@ import { Tabs } from "@base-ui/react/tabs";
 * </Tabs>
 * ```
 */
-const TABS_CSS_ID = "mks-tabs-anchor-css";
-const TABS_ANCHOR_CSS = `
-[data-slot="tabs-list"]{anchor-scope:--tabs-active}
-[data-slot="tabs-tab"][data-active]{anchor-name:--tabs-active}
-[data-slot="tabs-indicator"]{position-anchor:--tabs-active;left:anchor(left);right:anchor(right);transition:top 200ms cubic-bezier(.25,.46,.45,.94),left 200ms cubic-bezier(.25,.46,.45,.94),right 200ms cubic-bezier(.25,.46,.45,.94),bottom 200ms cubic-bezier(.25,.46,.45,.94),width 200ms cubic-bezier(.25,.46,.45,.94),height 200ms cubic-bezier(.25,.46,.45,.94)}
-@media(prefers-reduced-motion:reduce){[data-slot="tabs-indicator"]{transition-duration:0ms}}
-`;
-/**
-* Injects the CSS Anchor Positioning rules into the document head once.
-* Safe for SSR -- no-ops on the server.
-*/
-function useTabsAnchorCSS() {
-	React$1.useEffect(() => {
-		if (typeof document === "undefined") return;
-		if (document.getElementById(TABS_CSS_ID)) return;
-		const style = document.createElement("style");
-		style.id = TABS_CSS_ID;
-		style.textContent = TABS_ANCHOR_CSS;
-		document.head.appendChild(style);
-	}, []);
-}
 const [TabsProvider, useTabs] = getStrictContext("TabsContext");
 const TabsVariantCtx = React$1.createContext({});
 /**
@@ -175,7 +155,6 @@ function TabsHighlight({ transition = {
 * ```
 */
 function TabsList({ variant, size, indicator, slots, className, children, ...props }) {
-	useTabsAnchorCSS();
 	const resolvedVariant = variant ?? "default";
 	const showIndicator = indicator ?? !["ghost", "underline"].includes(resolvedVariant);
 	return /* @__PURE__ */ jsx(TabsVariantCtx.Provider, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -81,14 +81,15 @@
       "types": "./dist/react-ui/blocks/Terminal/display.d.ts",
       "import": "./dist/react-ui/blocks/Terminal/display.js",
       "default": "./dist/react-ui/blocks/Terminal/display.js"
-    }
+    },
+    "./index.css": "./dist/index.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf dist && bunx rolldown --config rolldown.config.ts && bunx tsc --emitDeclarationOnly && bunx tsc-alias && cp src/index.css dist/index.css && mkdir -p dist/react-ui/ui/DynamicToggle && cp src/react-ui/ui/DynamicToggle/DynamicToggle.css dist/react-ui/ui/DynamicToggle/DynamicToggle.css",
+    "build": "rm -rf dist && bunx rolldown --config rolldown.config.ts && bunx tsc --emitDeclarationOnly && bunx tsc-alias && cp src/index.css dist/index.css",
     "typecheck": "bunx tsc --noEmit",
     "lint": "bunx oxlint .",
     "preview": "vite preview",

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

@@ -1,369 +0,0 @@
-/**
- * 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/dist/react-ui/ui/DynamicToggle/DynamicToggle.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;
-}
-