@mks2508/mks-ui 0.1.2 → 0.1.4

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Popover component - Animate UI primitive re-export.
+ *
+ * Animated popover with arrow and motion transitions.
+ *
+ * @module @mks2508/mks-ui/components/ui/popover
+ */
+export * from '../../components/animate-ui/primitives/base/popover';
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/ui/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,iDAAiD,CAAC"}

package/dist/components/ui/popover.js

@@ -0,0 +1 @@
+import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopover } from "../animate-ui/primitives/base/popover.js";

package/dist/components/ui/progress.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Progress component - Animate UI primitive re-export.
+ *
+ * Animated progress bar with track and indicator.
+ *
+ * @module @mks2508/mks-ui/components/ui/progress
+ */
+export * from '../../components/animate-ui/primitives/base/progress';
+//# sourceMappingURL=progress.d.ts.map

package/dist/components/ui/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,kDAAkD,CAAC"}

package/dist/components/ui/progress.js

@@ -0,0 +1 @@
+import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress } from "../animate-ui/primitives/base/progress.js";

package/dist/components/ui/slot.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Slot component - Animate UI primitive re-export.
+ *
+ * Motion-enhanced Slot for asChild composition pattern with animations.
+ *
+ * @module @mks2508/mks-ui/components/ui/slot
+ */
+export * from '../../components/animate-ui/primitives/animate/slot';
+//# sourceMappingURL=slot.d.ts.map

package/dist/components/ui/slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../../../src/components/ui/slot.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,iDAAiD,CAAC"}

package/dist/components/ui/slot.js

@@ -0,0 +1 @@
+import { Slot } from "../animate-ui/primitives/animate/slot.js";

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Tooltip component - Animate UI primitive re-export.
+ *
+ * Animated tooltip with provider, arrow, and motion transitions.
+ *
+ * @module @mks2508/mks-ui/components/ui/tooltip
+ */
+export * from '../../components/animate-ui/primitives/base/tooltip';
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/ui/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tooltip.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,iDAAiD,CAAC"}

package/dist/components/ui/tooltip.js

@@ -0,0 +1 @@
+import { Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, useTooltip } from "../animate-ui/primitives/base/tooltip.js";

package/dist/hooks/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Custom React hooks barrel export.
+ *
+ * @module @mks2508/mks-ui/hooks
+ */
+export * from './use-auto-height';
+export * from './use-controlled-state';
+export * from './use-data-state';
+export * from './use-is-in-view';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,4 @@
+import { useControlledState } from "./use-controlled-state.js";
+import { useDataState } from "./use-data-state.js";
+import { useIsInView } from "./use-is-in-view.js";
+import { useAutoHeight } from "./use-auto-height.js";

package/dist/hooks/use-data-state.js

@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from "react";
+
+//#region src/hooks/use-data-state.tsx
+function parseDatasetValue(value) {
+	if (value === null) return null;
+	if (value === "" || value === "true") return true;
+	if (value === "false") return false;
+	return value;
+}
+function useDataState(key, forwardedRef, onChange) {
+	const localRef = React.useRef(null);
+	React.useImperativeHandle(forwardedRef, () => localRef.current);
+	const getSnapshot = () => {
+		const el = localRef.current;
+		return el ? parseDatasetValue(el.getAttribute(`data-${key}`)) : null;
+	};
+	const subscribe = (callback) => {
+		const el = localRef.current;
+		if (!el) return () => {};
+		const observer = new MutationObserver((records) => {
+			for (const record of records) if (record.attributeName === `data-${key}`) {
+				callback();
+				break;
+			}
+		});
+		observer.observe(el, {
+			attributes: true,
+			attributeFilter: [`data-${key}`]
+		});
+		return () => observer.disconnect();
+	};
+	const value = React.useSyncExternalStore(subscribe, getSnapshot);
+	React.useEffect(() => {
+		if (onChange) onChange(value);
+	}, [value, onChange]);
+	return [value, localRef];
+}
+
+//#endregion
+export { useDataState };

package/dist/hooks/use-is-in-view.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { useInView } from "motion/react";
+
+//#region src/hooks/use-is-in-view.tsx
+function useIsInView(ref, options = {}) {
+	const { inView, inViewOnce = false, inViewMargin = "0px" } = options;
+	const localRef = React.useRef(null);
+	React.useImperativeHandle(ref, () => localRef.current);
+	const inViewResult = useInView(localRef, {
+		once: inViewOnce,
+		margin: inViewMargin
+	});
+	return {
+		ref: localRef,
+		isInView: !inView || inViewResult
+	};
+}
+
+//#endregion
+export { useIsInView };

package/dist/index.d.ts

@@ -1,15 +1,16 @@
 /**
  * @mks2508/mks-ui
  *
- * UI component library - Shadcn/Animate UI based with DevEnv components.
+ * UI component library - Shadcn/Animate UI based with custom components.
  *
  * @example
  * ```tsx
- * import { Button, Card } from '@mks2508/mks-ui';
- * import { DevEnvBracket } from '@mks2508/mks-ui/components/ui';
+ * import { Button, Card, CornerBracket } from '@mks2508/mks-ui';
+ * import { useAutoHeight } from '@mks2508/mks-ui';
  * ```
  */
 export * from './lib/utils';
 export * from './components/ui';
 export * from './icons';
+export * from './hooks';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,cAAc,aAAa,CAAC;AAG5B,cAAc,iBAAiB,CAAC;AAGhC,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,9 +1,26 @@
 import { cn } from "./lib/utils.js";
-import { buttonStateStyles, buttonVariants } from "./components/ui/button/button.styles.js";
-import { Button } from "./components/ui/button/button.js";
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/ui/alert-dialog.js";
+import { useControlledState } from "./hooks/use-controlled-state.js";
+import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, useAccordionItem } from "./components/animate-ui/primitives/base/accordion.js";
+import { AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, useAlertDialog } from "./components/animate-ui/primitives/base/alert-dialog.js";
+import { Checkbox, CheckboxIndicator, useCheckbox } from "./components/animate-ui/primitives/base/checkbox.js";
+import { Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, useDialog } from "./components/animate-ui/primitives/base/dialog.js";
+import { Highlight, HighlightItem, useHighlight } from "./components/animate-ui/primitives/effects/highlight.js";
+import { useDataState } from "./hooks/use-data-state.js";
+import { Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, useMenu, useMenuActiveValue } from "./components/animate-ui/primitives/base/menu.js";
+import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, usePopover } from "./components/animate-ui/primitives/base/popover.js";
+import { useIsInView } from "./hooks/use-is-in-view.js";
+import { CountingNumber } from "./components/animate-ui/primitives/texts/counting-number.js";
+import { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, useProgress } from "./components/animate-ui/primitives/base/progress.js";
+import { Switch, SwitchIcon, SwitchThumb, useSwitch } from "./components/animate-ui/primitives/base/switch.js";
+import { useAutoHeight } from "./hooks/use-auto-height.js";
+import { Slot } from "./components/animate-ui/primitives/animate/slot.js";
+import { AutoHeight } from "./components/animate-ui/primitives/effects/auto-height.js";
+import { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab } from "./components/animate-ui/primitives/base/tabs.js";
+import { Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, useTooltip } from "./components/animate-ui/primitives/base/tooltip.js";
 import { badgeVariants } from "./components/ui/badge/badge.styles.js";
 import { Badge } from "./components/ui/badge/badge.js";
+import { buttonStateStyles, buttonVariants } from "./components/ui/button/button.styles.js";
+import { Button } from "./components/ui/button/button.js";
 import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/ui/card.js";
 import { Input } from "./components/ui/input.js";
 import { Textarea } from "./components/ui/textarea.js";
@@ -14,9 +31,7 @@ import { Label } from "./components/ui/label.js";
 import { Separator } from "./components/ui/separator.js";
 import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./components/ui/field.js";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/select.js";
-import { Switch, SwitchIcon, SwitchThumb, useSwitch } from "./components/animate-ui/primitives/base/switch.js";
-import { Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab } from "./components/animate-ui/primitives/base/tabs.js";
-import { DevEnvBracket } from "./components/ui/devenv-bracket.js";
+import { CornerBracket } from "./components/ui/corner-bracket.js";
 import { MorphingPopover, MorphingPopoverWithTarget } from "./components/ui/morphing-popover/morphing-popover.js";
 import "./components/ui/index.js";
 import { ActivityIcon } from "./icons/lucide-animated/activity.js";
@@ -52,5 +67,6 @@ import { Type } from "./icons/lucide-animated/type.js";
 import { Upload } from "./icons/lucide-animated/upload.js";
 import { XIcon } from "./icons/lucide-animated/x.js";
 import { HugeIcons } from "./icons/index.js";
+import "./hooks/index.js";
 
-export { ActivityIcon, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, DeleteIcon, DevEnvBracket, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, HomeIcon, HugeIcons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, MorphingPopover, MorphingPopoverWithTarget, Package, Palette, PlusIcon, RefreshCw, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Switch, SwitchIcon, SwitchThumb, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, Textarea, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, badgeVariants, buttonStateStyles, buttonVariants, cardVariants, cn, useComboboxAnchor, useSwitch };
+export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, 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, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, MorphingPopover, MorphingPopoverWithTarget, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RefreshCw, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, Slot, Switch, SwitchIcon, SwitchThumb, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, badgeVariants, buttonStateStyles, buttonVariants, cardVariants, cn, useAccordionItem, useAlertDialog, useAutoHeight, useCheckbox, useComboboxAnchor, useControlledState, useDataState, useDialog, useHighlight, useIsInView, useMenu, useMenuActiveValue, usePopover, useProgress, useSwitch, useTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,13 +14,9 @@
     },
     "./components/*": "./src/components/*.tsx",
     "./components/ui/*": "./src/components/ui/*.tsx",
-    "./components/animate-ui/primitives/*": "./src/components/animate-ui/primitives/*.tsx",
-    "./components/animate-ui/primitives/base/*": "./src/components/animate-ui/primitives/base/*.tsx",
-    "./components/animate-ui/primitives/animate/*": "./src/components/animate-ui/primitives/animate/*.tsx",
-    "./components/animate-ui/primitives/effects/*": "./src/components/animate-ui/primitives/effects/*.tsx",
-    "./components/animate-ui/primitives/texts/*": "./src/components/animate-ui/primitives/texts/*.tsx",
-    "./icons/*": "./src/components/icons/*.tsx",
-    "./icons/lucide-animated/*": "./src/components/icons/lucide-animated/*.tsx",
+    "./icons/*": "./src/icons/*.tsx",
+    "./icons/lucide-animated/*": "./src/icons/lucide-animated/*.tsx",
+    "./hooks/*": "./src/hooks/*.tsx",
     "./lib/*": "./src/lib/*.ts"
   },
   "files": [

package/src/components/ui/accordion.tsx

@@ -0,0 +1,9 @@
+/**
+ * Accordion component - Animate UI primitive re-export.
+ *
+ * Animated accordion with smooth expand/collapse transitions.
+ *
+ * @module @mks2508/mks-ui/components/ui/accordion
+ */
+
+export * from '@/components/animate-ui/primitives/base/accordion';

package/src/components/ui/alert-dialog.tsx

@@ -1,177 +1,9 @@
-"use client"
-
-import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
-
-function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
-
-function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
-
-function AlertDialogOverlay({
-  className,
-  ...props
-}: AlertDialogPrimitive.Backdrop.Props) {
-  return (
-    <AlertDialogPrimitive.Backdrop
-      data-slot="alert-dialog-overlay"
-      className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogContent({
-  className,
-  size = "default",
-  ...props
-}: AlertDialogPrimitive.Popup.Props & {
-  size?: "default" | "sm"
-}) {
-  return (
-    <AlertDialogPortal>
-      <AlertDialogOverlay />
-      <AlertDialogPrimitive.Popup
-        data-slot="alert-dialog-content"
-        data-size={size}
-        className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
-          className
-        )}
-        {...props}
-      />
-    </AlertDialogPortal>
-  )
-}
-
-function AlertDialogHeader({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-header"
-      className={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
-      className={cn(
-        "bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
-  return (
-    <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
-      className={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
-  return (
-    <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof Button>) {
-  return (
-    <Button
-      data-slot="alert-dialog-action"
-      className={cn(className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogCancel({
-  className,
-  variant = "outline",
-  children,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Close> & {
-  variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "success" | "warning"
-}) {
-  return (
-    <AlertDialogPrimitive.Close
-      data-slot="alert-dialog-cancel"
-      className={cn(className)}
-      {...props}
-    >
-      <Button variant={variant}>{children || "Cancel"}</Button>
-    </AlertDialogPrimitive.Close>
-  )
-}
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-}
+/**
+ * AlertDialog component - Animate UI primitive re-export.
+ *
+ * Animated alert dialog with backdrop and motion transitions.
+ *
+ * @module @mks2508/mks-ui/components/ui/alert-dialog
+ */
+
+export * from '@/components/animate-ui/primitives/base/alert-dialog';

package/src/components/ui/auto-height.tsx

@@ -0,0 +1,9 @@
+/**
+ * AutoHeight effect - Animate UI primitive re-export.
+ *
+ * Smooth height auto-resize animation for dynamic content.
+ *
+ * @module @mks2508/mks-ui/components/ui/auto-height
+ */
+
+export * from '@/components/animate-ui/primitives/effects/auto-height';

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,9 @@
+/**
+ * Checkbox component - Animate UI primitive re-export.
+ *
+ * Animated checkbox with indicator transition.
+ *
+ * @module @mks2508/mks-ui/components/ui/checkbox
+ */
+
+export * from '@/components/animate-ui/primitives/base/checkbox';

package/src/components/ui/{devenv-bracket.tsx → corner-bracket.tsx}

@@ -1,7 +1,7 @@
 /**
- * DevEnv Bracket Component
+ * Corner Bracket Component
  *
- * Corner bracket decoration for Synthwave Industrial styling.
+ * Corner bracket decoration for industrial/technical styling.
  *
  * @module @mks2508/mks-ui/components/ui
  */
@@ -30,7 +30,7 @@ const bracketVariants = cva(
 	}
 );
 
-export interface IDevEnvBracketProps
+export interface ICornerBracketProps
 	extends Omit<React.SVGProps<SVGSVGElement>, 'variant'>,
 		VariantProps<typeof bracketVariants> {
 	size?: number;
@@ -44,24 +44,28 @@ const PATHS = {
 } as const;
 
 /**
- * DevEnv corner bracket decoration.
+ * Corner bracket decoration for industrial/technical UI styling.
+ *
+ * @param position - Corner position: 'tl' (top-left), 'tr' (top-right), 'bl' (bottom-left), 'br' (bottom-right)
+ * @param variant - Visual style: 'default' or 'accent'
+ * @param size - Bracket size in pixels (default: 20)
  *
  * @example
  * ```tsx
  * <div className="relative p-4">
- *   <DevEnvBracket position="tl" />
- *   <DevEnvBracket position="br" />
+ *   <CornerBracket position="tl" />
+ *   <CornerBracket position="br" />
  *   Content here
  * </div>
  * ```
  */
-export function DevEnvBracket({
+export function CornerBracket({
 	className,
 	position,
 	variant,
 	size = 20,
 	...props
-}: IDevEnvBracketProps) {
+}: ICornerBracketProps) {
 	return (
 		<svg
 			width={size}

package/src/components/ui/counting-number.tsx

@@ -0,0 +1,9 @@
+/**
+ * CountingNumber component - Animate UI primitive re-export.
+ *
+ * Animated number display with counting/interpolation effect.
+ *
+ * @module @mks2508/mks-ui/components/ui/counting-number
+ */
+
+export * from '@/components/animate-ui/primitives/texts/counting-number';

package/src/components/ui/dialog.tsx

@@ -0,0 +1,9 @@
+/**
+ * Dialog component - Animate UI primitive re-export.
+ *
+ * Animated modal dialog with backdrop and motion transitions.
+ *
+ * @module @mks2508/mks-ui/components/ui/dialog
+ */
+
+export * from '@/components/animate-ui/primitives/base/dialog';

package/src/components/ui/highlight.tsx

@@ -0,0 +1,9 @@
+/**
+ * Highlight effect - Animate UI primitive re-export.
+ *
+ * Animated highlight effect used by tabs, menus, and other interactive components.
+ *
+ * @module @mks2508/mks-ui/components/ui/highlight
+ */
+
+export * from '@/components/animate-ui/primitives/effects/highlight';

package/src/components/ui/index.ts

@@ -6,8 +6,25 @@
  * @module @mks2508/mks-ui/components/ui
  */
 
-// Base UI components
+// Animate UI base components
+export * from './accordion';
 export * from './alert-dialog';
+export * from './checkbox';
+export * from './dialog';
+export * from './menu';
+export * from './popover';
+export * from './progress';
+export * from './switch';
+export * from './tabs';
+export * from './tooltip';
+
+// Animate UI utilities
+export * from './auto-height';
+export * from './counting-number';
+export * from './highlight';
+export * from './slot';
+
+// Shadcn base components
 export * from './badge';
 export * from './button';
 export * from './card';
@@ -19,10 +36,8 @@ export * from './input';
 export * from './label';
 export * from './select';
 export * from './separator';
-export * from './switch';
-export * from './tabs';
 export * from './textarea';
 
-// DevEnv-specific components
-export * from './devenv-bracket';
+// Custom components
+export * from './corner-bracket';
 export * from './morphing-popover';

package/src/components/ui/menu.tsx

@@ -0,0 +1,9 @@
+/**
+ * Menu component - Animate UI primitive re-export.
+ *
+ * Animated context/trigger menu with motion transitions and highlight effects.
+ *
+ * @module @mks2508/mks-ui/components/ui/menu
+ */
+
+export * from '@/components/animate-ui/primitives/base/menu';

package/src/components/ui/popover.tsx

@@ -0,0 +1,9 @@
+/**
+ * Popover component - Animate UI primitive re-export.
+ *
+ * Animated popover with arrow and motion transitions.
+ *
+ * @module @mks2508/mks-ui/components/ui/popover
+ */
+
+export * from '@/components/animate-ui/primitives/base/popover';

package/src/components/ui/progress.tsx

@@ -0,0 +1,9 @@
+/**
+ * Progress component - Animate UI primitive re-export.
+ *
+ * Animated progress bar with track and indicator.
+ *
+ * @module @mks2508/mks-ui/components/ui/progress
+ */
+
+export * from '@/components/animate-ui/primitives/base/progress';