@mks2508/mks-ui 0.3.1 → 0.4.0

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

@@ -1,26 +1,118 @@
+import { cva } from "class-variance-authority";
+
 //#region src/react-ui/ui/Tabs/Tabs.styles.ts
 /**
-* Default style map for every Tabs slot.
+* Style slots, CVA variants, and defaults for the Tabs component.
 *
-* Base classes are intentionally minimal so consumers can fully
-* control the visual appearance through `slots` overrides.
-* No colors are hardcoded -- all visuals come from consumer styles.
+* Provides sensible out-of-the-box styling using semantic theme tokens
+* (bg-muted, text-foreground, etc.) while remaining fully overridable
+* via the `slots` prop and CVA variant/size system.
 *
-* @example
-* ```typescript
-* import { tabsStyles } from './Tabs.styles';
-* cn(tabsStyles.list, slots?.list, className);
-* ```
+* The sliding indicator uses CSS Anchor Positioning API for
+* zero-JS position tracking with WAAPI-driven transitions.
+*
+* @module @mks2508/mks-ui/react/ui/Tabs/Tabs.styles
+*/
+/**
+* Default style map for every Tabs slot.
+* Provides complete styling that works without any overrides.
 */
 const tabsStyles = {
 	root: "",
-	list: "",
-	tab: "",
+	list: "inline-flex items-center relative",
+	tab: [
+		"inline-flex items-center justify-center gap-2 whitespace-nowrap",
+		"font-medium cursor-pointer select-none relative z-[1]",
+		"text-muted-foreground transition-colors duration-150",
+		"hover:text-foreground",
+		"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+		"disabled:pointer-events-none disabled:opacity-50",
+		"data-[active]:text-foreground",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
+	].join(" "),
 	panel: "",
 	panels: "",
 	highlight: "",
-	highlightItem: ""
+	highlightItem: "",
+	indicator: "absolute pointer-events-none z-0"
 };
+/**
+* CVA variants for the TabsList container.
+*
+* @example
+* ```tsx
+* <TabsList variant="underline" size="lg">
+*   <TabsTab value="a">Tab A</TabsTab>
+* </TabsList>
+* ```
+*/
+const tabsListVariants = cva(tabsStyles.list, {
+	variants: {
+		variant: {
+			default: "gap-1 rounded-lg bg-muted p-1",
+			outline: "gap-1 rounded-lg border border-border p-1",
+			ghost: "gap-2 p-0",
+			underline: "gap-0 rounded-none border-b border-border p-0",
+			pill: "gap-1 rounded-full bg-muted p-1"
+		},
+		size: {
+			default: "h-10",
+			sm: "h-8",
+			lg: "h-12"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* CVA variants for individual tab triggers.
+*
+* @example
+* ```tsx
+* <TabsTab value="general" variant="underline" size="sm">
+*   General
+* </TabsTab>
+* ```
+*/
+const tabsTabVariants = cva(tabsStyles.tab, {
+	variants: {
+		variant: {
+			default: "rounded-md",
+			outline: "rounded-md",
+			ghost: "rounded-md hover:bg-accent data-[active]:text-accent-foreground",
+			underline: "rounded-none border-b-2 border-transparent data-[active]:border-primary",
+			pill: "rounded-full"
+		},
+		size: {
+			default: "px-3 py-1.5 text-sm",
+			sm: "px-2.5 py-1 text-xs",
+			lg: "px-4 py-2 text-base"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+/**
+* CVA variants for the sliding indicator.
+*
+* The indicator is positioned via CSS Anchor Positioning API
+* (anchor-name on the selected tab, position-anchor on the indicator)
+* and animated via WAAPI transitions in CSS.
+*/
+const tabsIndicatorVariants = cva(tabsStyles.indicator, {
+	variants: { variant: {
+		default: "bg-background shadow-sm rounded-md inset-y-1",
+		outline: "bg-background shadow-sm border border-border/50 rounded-md inset-y-1",
+		ghost: "bg-accent rounded-md inset-y-0",
+		underline: "bg-primary h-0.5 rounded-full !inset-y-auto bottom-0",
+		pill: "bg-background shadow-sm rounded-full inset-y-1"
+	} },
+	defaultVariants: { variant: "default" }
+});
 
 //#endregion
-export { tabsStyles };
+export { tabsIndicatorVariants, tabsListVariants, tabsStyles, tabsTabVariants };

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

@@ -9,10 +9,11 @@
 import type * as React from 'react';
 import type { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
 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 { IAutoHeightProps } from '../../../react-ui/primitives/AutoHeight';
-import type { TabsSlot } from './Tabs.styles';
+import type { VariantProps } from 'class-variance-authority';
+import type { IBaseConfig, SlotOverrides } from '@/core/types';
+import type { IHighlightProps, IHighlightItemProps } from '@/react-ui/primitives/Highlight';
+import type { IAutoHeightProps } from '@/react-ui/primitives/AutoHeight';
+import type { TabsSlot, tabsListVariants, tabsTabVariants } from './Tabs.styles';
 /**
  * Configuration interface for Tabs behavior and animation.
  *
@@ -107,9 +108,11 @@ export interface ITabsHighlightItemProps extends IHighlightItemProps {
  * </TabsList>
  * ```
  */
-export interface ITabsListProps extends React.ComponentProps<typeof TabsPrimitive.List> {
+export interface ITabsListProps extends React.ComponentProps<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
     /** Partial class overrides per slot. */
     slots?: SlotOverrides<TabsSlot>;
+    /** Show the CSS Anchor-based sliding indicator. Defaults to true for default/outline/pill variants. */
+    indicator?: boolean;
 }
 /**
  * Props for TabsTab -- a single tab trigger button.
@@ -121,7 +124,7 @@ export interface ITabsListProps extends React.ComponentProps<typeof TabsPrimitiv
  * </TabsTab>
  * ```
  */
-export interface ITabsTabProps extends React.ComponentProps<typeof TabsPrimitive.Tab> {
+export interface ITabsTabProps extends React.ComponentProps<typeof TabsPrimitive.Tab>, VariantProps<typeof tabsTabVariants> {
     /** Partial class overrides per slot. */
     slots?: SlotOverrides<TabsSlot>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Tabs/Tabs.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/Tabs/Tabs.types.ts"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { tabsListVariants, tabsTabVariants, tabsIndicatorVariants } from './Tabs.styles';
 import type { ITabsProps, ITabsHighlightProps, ITabsHighlightItemProps, ITabsListProps, ITabsTabProps, ITabsPanelProps, ITabsPanelsProps } from './Tabs.types';
 /**
  * Root Tabs component -- provides active tab value context and
@@ -39,20 +40,24 @@ declare function Tabs({ slots, config, className, ...props }: ITabsProps): impor
 declare function TabsHighlight({ transition, slots, className, ...props }: ITabsHighlightProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TabsList -- the container holding tab trigger buttons.
- * Renders a base-ui Tabs.List with the `list` slot classes.
+ * Renders a base-ui Tabs.List with CVA variant/size styling and
+ * an optional CSS Anchor-based sliding indicator.
  *
+ * @param variant - Visual variant: 'default' | 'outline' | 'ghost' | 'underline' | 'pill'
+ * @param size - Size: 'sm' | 'default' | 'lg'
+ * @param indicator - Show sliding indicator (default: true for default/outline/pill)
  * @param slots - Partial class overrides per slot
  * @param className - Additional class names
  *
  * @example
  * ```tsx
- * <TabsList className="flex gap-1 border-b border-white/10 pb-1">
- *   <TabsTab value="general">General</TabsTab>
- *   <TabsTab value="advanced">Advanced</TabsTab>
+ * <TabsList variant="pill" size="sm">
+ *   <TabsTab value="a">Alpha</TabsTab>
+ *   <TabsTab value="b">Beta</TabsTab>
  * </TabsList>
  * ```
  */
-declare function TabsList({ slots, className, ...props }: ITabsListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ variant, size, indicator, slots, className, children, ...props }: ITabsListProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TabsHighlightItem -- wraps a TabsTab for highlight position tracking.
  * Must be placed inside a TabsHighlight context. The `value` prop should
@@ -71,20 +76,24 @@ declare function TabsList({ slots, className, ...props }: ITabsListProps): impor
 declare function TabsHighlightItem({ slots, ...props }: ITabsHighlightItemProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TabsTab -- a single tab trigger button that activates its panel.
- * Renders a base-ui Tabs.Tab with the `tab` slot classes.
+ * Inherits variant/size from the parent TabsList context, or can be
+ * overridden per-tab.
  *
  * @param value - The value this tab represents
+ * @param variant - Override parent variant
+ * @param size - Override parent size
  * @param slots - Partial class overrides per slot
  * @param className - Additional class names
  *
  * @example
  * ```tsx
- * <TabsTab value="general" className="px-3 py-1.5 text-sm font-medium">
+ * <TabsTab value="general">
+ *   <Search className="size-4" />
  *   General
  * </TabsTab>
  * ```
  */
-declare function TabsTab({ slots, className, ...props }: ITabsTabProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsTab({ variant, size, slots, className, ...props }: ITabsTabProps): import("react/jsx-runtime").JSX.Element;
 /**
  * TabsPanel -- an animated content panel associated with a tab.
  * Uses Motion for blur + opacity enter/exit transitions wrapped in
@@ -135,7 +144,7 @@ declare function TabsPanel({ value, keepMounted, transition, slots, className, .
  * ```
  */
 declare function TabsPanels(props: ITabsPanelsProps): import("react/jsx-runtime").JSX.Element;
-export { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsTab, TabsPanel, TabsPanels, };
+export { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsTab, TabsPanel, TabsPanels, tabsListVariants, tabsTabVariants, tabsIndicatorVariants, };
 export type { ITabsProps, ITabsHighlightProps, ITabsHighlightItemProps, ITabsListProps, ITabsTabProps, ITabsPanelProps, ITabsPanelsProps, ITabsPanelsAutoProps, ITabsPanelsLayoutProps, ITabsConfig, TabsContextType, } from './Tabs.types';
 export type { TabsSlot } from './Tabs.styles';
 //# sourceMappingURL=index.d.ts.map

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":"AAoDA,OAAO,KAAK,EAEV,UAAU,EACV,mBAAmB,EACnB,uBAAuB,EACvB,cAAc,EACd,aAAa,EACb,eAAe,EACf,gBAAgB,EAEjB,MAAM,cAAc,CAAC;AAatB;;;;;;;;;;;;;;;;;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;;;;;;;;;;;;;;GAcG;AACH,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAQ/D;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,iBAAiB,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAEtE;AAMD;;;;;;;;;;;;;;GAcG;AACH,iBAAS,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,2CAQ7D;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,GACX,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;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"}

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

@@ -5,45 +5,85 @@ import { Highlight, HighlightItem } from "../../primitives/Highlight/index.js";
 import { AutoHeight } from "../../primitives/AutoHeight/index.js";
 import { getStrictContext } from "../../lib/get-strict-context.js";
 import { useControlledState } from "../../hooks/State/UseControlledState.js";
-import { tabsStyles } from "./Tabs.styles.js";
+import { tabsIndicatorVariants, tabsListVariants, tabsStyles, tabsTabVariants } from "./Tabs.styles.js";
 import * as React$1 from "react";
 import { AnimatePresence, motion } from "motion/react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Tabs } from "@base-ui/react/tabs";
 
 //#region src/react-ui/ui/Tabs/index.tsx
 /**
-* Tabs component -- animated tab navigation built on base-ui Tabs
-* with motion transitions, highlight tracking, auto-height panels,
-* and the v0.2.0 slot system.
+* Tabs component -- styled tab navigation built on base-ui Tabs
+* with CVA variants, CSS Anchor Positioning indicator, motion panel
+* transitions, and the slot override system.
 *
-* Provides sub-components for the tab list, individual tabs, panels,
-* animated highlight indicators, and a panels container with two modes:
-* auto-height (ResizeObserver) and layout (Motion layout animation).
+* Out-of-the-box styled with 5 variants (default, outline, ghost,
+* underline, pill) and 3 sizes (sm, default, lg). The sliding indicator
+* uses CSS Anchor Positioning API for zero-JS position tracking.
 *
 * @module @mks2508/mks-ui/react/ui/Tabs
 *
 * @example
 * ```tsx
-* <Tabs defaultValue="general" slots={{ list: 'flex gap-1 border-b' }}>
+* // Simplest usage -- styled out of the box
+* <Tabs defaultValue="general">
 *   <TabsList>
+*     <TabsTab value="general">General</TabsTab>
+*     <TabsTab value="advanced">Advanced</TabsTab>
+*   </TabsList>
+*   <TabsPanels>
+*     <TabsPanel value="general">General content</TabsPanel>
+*     <TabsPanel value="advanced">Advanced content</TabsPanel>
+*   </TabsPanels>
+* </Tabs>
+*
+* // With variant + size
+* <Tabs defaultValue="a">
+*   <TabsList variant="underline" size="lg">
+*     <TabsTab value="a">Alpha</TabsTab>
+*     <TabsTab value="b">Beta</TabsTab>
+*   </TabsList>
+*   <TabsPanel value="a">...</TabsPanel>
+* </Tabs>
+*
+* // With Highlight primitive (advanced)
+* <Tabs defaultValue="general">
+*   <TabsList indicator={false}>
 *     <TabsHighlight className="rounded-md bg-white/10">
 *       <TabsHighlightItem value="general">
 *         <TabsTab value="general">General</TabsTab>
 *       </TabsHighlightItem>
-*       <TabsHighlightItem value="advanced">
-*         <TabsTab value="advanced">Advanced</TabsTab>
-*       </TabsHighlightItem>
 *     </TabsHighlight>
 *   </TabsList>
 *   <TabsPanels>
-*     <TabsPanel value="general">General content</TabsPanel>
-*     <TabsPanel value="advanced">Advanced content</TabsPanel>
+*     <TabsPanel value="general">Content</TabsPanel>
 *   </TabsPanels>
 * </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({});
 /**
 * Root Tabs component -- provides active tab value context and
 * controlled/uncontrolled state management.
@@ -117,24 +157,46 @@ function TabsHighlight({ transition = {
 }
 /**
 * TabsList -- the container holding tab trigger buttons.
-* Renders a base-ui Tabs.List with the `list` slot classes.
+* Renders a base-ui Tabs.List with CVA variant/size styling and
+* an optional CSS Anchor-based sliding indicator.
 *
+* @param variant - Visual variant: 'default' | 'outline' | 'ghost' | 'underline' | 'pill'
+* @param size - Size: 'sm' | 'default' | 'lg'
+* @param indicator - Show sliding indicator (default: true for default/outline/pill)
 * @param slots - Partial class overrides per slot
 * @param className - Additional class names
 *
 * @example
 * ```tsx
-* <TabsList className="flex gap-1 border-b border-white/10 pb-1">
-*   <TabsTab value="general">General</TabsTab>
-*   <TabsTab value="advanced">Advanced</TabsTab>
+* <TabsList variant="pill" size="sm">
+*   <TabsTab value="a">Alpha</TabsTab>
+*   <TabsTab value="b">Beta</TabsTab>
 * </TabsList>
 * ```
 */
-function TabsList({ slots, className, ...props }) {
-	return /* @__PURE__ */ jsx(Tabs.List, {
-		"data-slot": "tabs-list",
-		className: cn(tabsStyles.list, slots?.list, className),
-		...props
+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, {
+		value: {
+			variant: resolvedVariant,
+			size
+		},
+		children: /* @__PURE__ */ jsxs(Tabs.List, {
+			"data-slot": "tabs-list",
+			"data-variant": resolvedVariant,
+			className: cn(tabsListVariants({
+				variant: resolvedVariant,
+				size
+			}), slots?.list, className),
+			...props,
+			children: [children, showIndicator && /* @__PURE__ */ jsx("span", {
+				"data-slot": "tabs-indicator",
+				"aria-hidden": "true",
+				className: cn(tabsIndicatorVariants({ variant: resolvedVariant }), slots?.indicator)
+			})]
+		})
 	});
 }
 /**
@@ -160,23 +222,33 @@ function TabsHighlightItem({ slots, ...props }) {
 }
 /**
 * TabsTab -- a single tab trigger button that activates its panel.
-* Renders a base-ui Tabs.Tab with the `tab` slot classes.
+* Inherits variant/size from the parent TabsList context, or can be
+* overridden per-tab.
 *
 * @param value - The value this tab represents
+* @param variant - Override parent variant
+* @param size - Override parent size
 * @param slots - Partial class overrides per slot
 * @param className - Additional class names
 *
 * @example
 * ```tsx
-* <TabsTab value="general" className="px-3 py-1.5 text-sm font-medium">
+* <TabsTab value="general">
+*   <Search className="size-4" />
 *   General
 * </TabsTab>
 * ```
 */
-function TabsTab({ slots, className, ...props }) {
+function TabsTab({ variant, size, slots, className, ...props }) {
+	const ctx = React$1.useContext(TabsVariantCtx);
+	const resolvedVariant = variant ?? ctx.variant;
+	const resolvedSize = size ?? ctx.size;
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		"data-slot": "tabs-tab",
-		className: cn(tabsStyles.tab, slots?.tab, className),
+		className: cn(tabsTabVariants({
+			variant: resolvedVariant,
+			size: resolvedSize
+		}), slots?.tab, className),
 		...props
 	});
 }

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

@@ -1,5 +1,5 @@
 import { type VariantProps } from 'class-variance-authority';
-import type { StyleSlots } from '../../../core/types';
+import type { StyleSlots } from '@/core/types';
 /**
  * Style slots for TextFlow component
  */

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

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

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

@@ -1,4 +1,4 @@
-import type { SlotOverrides } from '../../../core/types';
+import type { SlotOverrides } from '@/core/types';
 import type { TextareaSlot } from './Textarea.styles';
 /** Props for the Textarea component. */
 interface ITextareaProps extends React.ComponentProps<'textarea'> {

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

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

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

@@ -9,7 +9,7 @@
 import type * as React from 'react';
 import type { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
 import type { HTMLMotionProps, MotionValue, SpringOptions } 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/index.d.ts

@@ -27,6 +27,7 @@ export * from './InputGroup';
 export * from './Label';
 export * from './Select';
 export * from './Separator';
+export * from './Textarea';
 export * from './DataCard';
 export * from './TextFlow';
 //# sourceMappingURL=index.d.ts.map

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,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,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,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC"}

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

@@ -13,6 +13,7 @@ import { progressStyles } from "./Progress/Progress.styles.js";
 import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress } from "./Progress/index.js";
 import { switchStyles } from "./Switch/Switch.styles.js";
 import { Switch, SwitchIcon, SwitchThumb, useSwitch } from "./Switch/index.js";
+import { tabsIndicatorVariants, tabsListVariants, tabsTabVariants } from "./Tabs/Tabs.styles.js";
 import { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab } from "./Tabs/index.js";
 import { tooltipStyles } from "./Tooltip/Tooltip.styles.js";
 import { Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, useTooltip } from "./Tooltip/index.js";
@@ -23,6 +24,7 @@ import { Button } from "./Button/index.js";
 import { cardVariants } from "./Card/Card.styles.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./Card/index.js";
 import { Input } from "./Input/index.js";
+import { Textarea } from "./Textarea/index.js";
 import { inputGroupAddonVariants, inputGroupButtonVariants } from "./InputGroup/InputGroup.styles.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from "./InputGroup/index.js";
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor } from "./Combobox/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -26,7 +26,12 @@
     "./react/hooks/State/*": "./src/react-ui/hooks/State/*.tsx",
     "./react/hooks/Formatting/*": "./src/react-ui/hooks/Formatting/*.ts",
     "./react/icons/*": "./src/react-ui/icons/*.tsx",
-    "./react/lib/*": "./src/react-ui/lib/*.ts"
+    "./react/lib/*": "./src/react-ui/lib/*.ts",
+    "./react/blocks/Terminal": {
+      "types": "./dist/react-ui/blocks/Terminal/index.d.ts",
+      "import": "./dist/react-ui/blocks/Terminal/index.js",
+      "default": "./dist/react-ui/blocks/Terminal/index.js"
+    }
   },
   "files": [
     "dist",
@@ -34,9 +39,9 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "rm -rf dist && rolldown --config rolldown.config.ts && tsc --emitDeclarationOnly && tsc-alias && cp src/index.css dist/index.css",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint .",
+    "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",
     "format": "prettier --write ."
   },
@@ -56,7 +61,41 @@
   },
   "peerDependencies": {
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "@xterm/xterm": "^5.5.0",
+    "@xterm/addon-fit": "^0.9.0",
+    "@xterm/addon-web-links": "^0.10.0",
+    "@xterm/addon-search": "^0.14.0",
+    "@xterm/addon-unicode11": "^0.7.0",
+    "restty": "^0.1.24",
+    "shiki": "^3.22.0",
+    "@tanstack/react-virtual": "^3.13.0"
+  },
+  "peerDependenciesMeta": {
+    "@xterm/xterm": {
+      "optional": true
+    },
+    "@xterm/addon-fit": {
+      "optional": true
+    },
+    "@xterm/addon-web-links": {
+      "optional": true
+    },
+    "@xterm/addon-search": {
+      "optional": true
+    },
+    "@xterm/addon-unicode11": {
+      "optional": true
+    },
+    "restty": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -64,6 +103,15 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "@tanstack/react-virtual": "^3.13.0",
+    "@xterm/addon-fit": "^0.9.0",
+    "@xterm/addon-ligatures": "^0.10.0",
+    "@xterm/addon-search": "^0.14.0",
+    "@xterm/addon-unicode11": "^0.7.0",
+    "@xterm/addon-web-links": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
+    "restty": "^0.1.24",
+    "shiki": "^3.22.0",
     "eslint": "^10.0.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.0",