@mks2508/mks-ui 0.1.2 → 0.1.4

package/README.md

@@ -1,73 +1,109 @@
-# React + TypeScript + Vite
+# @mks2508/mks-ui
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+UI component library built on Shadcn UI + Animate UI primitives with custom components, animated icons, and React hooks.
 
-Currently, two official plugins are available:
+## Install
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+bun add @mks2508/mks-ui
+```
+
+Peer dependencies: `react >= 19.2.0`, `react-dom >= 19.2.0`
+
+## Usage
+
+```tsx
+import { Button, Card, Dialog, CornerBracket } from '@mks2508/mks-ui';
+import { useAutoHeight } from '@mks2508/mks-ui';
+import { cn } from '@mks2508/mks-ui';
+```
+
+## Components
+
+### Animate UI (animated)
+
+| Component | Description |
+|-----------|-------------|
+| `Accordion` | Animated expand/collapse panels |
+| `AlertDialog` | Animated alert dialog with backdrop |
+| `Checkbox` | Animated checkbox with indicator |
+| `Dialog` | Modal dialog with motion transitions |
+| `Menu` | Context/trigger menu with highlight |
+| `Popover` | Animated popover with arrow |
+| `Progress` | Animated progress bar |
+| `Switch` | Animated toggle switch |
+| `Tabs` | Animated tabs with highlight |
+| `Tooltip` | Animated tooltip with arrow |
+
+### Animate UI utilities
 
-## React Compiler
+| Component | Description |
+|-----------|-------------|
+| `AutoHeight` | Smooth height auto-resize animation |
+| `CountingNumber` | Animated number interpolation |
+| `Highlight` | Animated highlight effect |
+| `Slot` | Motion-enhanced asChild composition |
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+### Shadcn base
 
-## Expanding the ESLint configuration
+| Component | Description |
+|-----------|-------------|
+| `Badge` | Status/label badges |
+| `Button` | Button with variants and sizes |
+| `Card` | Container card |
+| `Combobox` | Searchable select |
+| `DropdownMenu` | Dropdown menu (Shadcn API) |
+| `Field` | Form field wrapper |
+| `Input` | Text input |
+| `InputGroup` | Grouped input with addons |
+| `Label` | Form label |
+| `Select` | Select dropdown |
+| `Separator` | Visual divider |
+| `Textarea` | Multi-line text input |
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### Custom
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+| Component | Description |
+|-----------|-------------|
+| `CornerBracket` | Corner bracket decoration (tl/tr/bl/br) |
+| `MorphingPopover` | Morphing transition popover |
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+## Icons
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+32 animated Lucide icons + HugeIcons namespace.
+
+```tsx
+import { Check, Search, Terminal } from '@mks2508/mks-ui';
+import { HugeIcons } from '@mks2508/mks-ui';
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useAutoHeight` | Auto-resizing height |
+| `useControlledState` | Controlled/uncontrolled state |
+| `useDataState` | Data loading state |
+| `useIsInView` | Intersection Observer |
+
+## Sub-path imports
+
+```tsx
+import { Button } from '@mks2508/mks-ui/components/ui/button';
+import { Check } from '@mks2508/mks-ui/icons/lucide-animated/check';
+import { cn } from '@mks2508/mks-ui/lib/utils';
 ```
+
+## Development
+
+```bash
+bun run dev        # Vite dev server
+bun run build      # Production build
+bun run typecheck  # Type check
+bun run lint       # ESLint
+bun run format     # Prettier
+```
+
+## License
+
+MIT

package/dist/components/animate-ui/primitives/animate/slot.js

@@ -2,8 +2,8 @@
 
 import { cn } from "../../../../lib/utils.js";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
 import { isMotionComponent, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/animate-ui/primitives/animate/slot.tsx
 function mergeRefs(...refs) {

package/dist/components/animate-ui/primitives/base/accordion.js

@@ -0,0 +1,132 @@
+'use client';
+
+import { getStrictContext } from "../../../../lib/get-strict-context.js";
+import { useControlledState } from "../../../../hooks/use-controlled-state.js";
+import * as React from "react";
+import { Accordion } from "@base-ui-components/react/accordion";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/animate-ui/primitives/base/accordion.tsx
+const [AccordionProvider, useAccordion] = getStrictContext("AccordionContext");
+const [AccordionItemProvider, useAccordionItem] = getStrictContext("AccordionItemContext");
+function Accordion$1(props) {
+	const [value, setValue] = useControlledState({
+		value: props?.value,
+		defaultValue: props?.defaultValue,
+		onChange: props?.onValueChange
+	});
+	return /* @__PURE__ */ jsx(AccordionProvider, {
+		value: {
+			value,
+			setValue
+		},
+		children: /* @__PURE__ */ jsx(Accordion.Root, {
+			"data-slot": "accordion",
+			...props,
+			onValueChange: setValue
+		})
+	});
+}
+function AccordionItem(props) {
+	const { value } = useAccordion();
+	const [isOpen, setIsOpen] = React.useState(value?.includes(props?.value) ?? false);
+	React.useEffect(() => {
+		setIsOpen(value?.includes(props?.value) ?? false);
+	}, [value, props?.value]);
+	return /* @__PURE__ */ jsx(AccordionItemProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Accordion.Item, {
+			"data-slot": "accordion-item",
+			...props
+		})
+	});
+}
+function AccordionHeader(props) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		"data-slot": "accordion-header",
+		...props
+	});
+}
+function AccordionTrigger(props) {
+	return /* @__PURE__ */ jsx(Accordion.Trigger, {
+		"data-slot": "accordion-trigger",
+		...props
+	});
+}
+function AccordionPanel({ transition = {
+	duration: .35,
+	ease: "easeInOut"
+}, hiddenUntilFound, keepRendered = false, ...props }) {
+	const { isOpen } = useAccordionItem();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: keepRendered ? /* @__PURE__ */ jsx(Accordion.Panel, {
+		hidden: false,
+		hiddenUntilFound,
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "accordion-panel",
+			initial: {
+				height: 0,
+				opacity: 0,
+				"--mask-stop": "0%",
+				y: 20
+			},
+			animate: isOpen ? {
+				height: "auto",
+				opacity: 1,
+				"--mask-stop": "100%",
+				y: 0
+			} : {
+				height: 0,
+				opacity: 0,
+				"--mask-stop": "0%",
+				y: 20
+			},
+			transition,
+			style: {
+				maskImage: "linear-gradient(black var(--mask-stop), transparent var(--mask-stop))",
+				WebkitMaskImage: "linear-gradient(black var(--mask-stop), transparent var(--mask-stop))",
+				overflow: "hidden"
+			},
+			...props
+		}, "accordion-panel")
+	}) : isOpen && /* @__PURE__ */ jsx(Accordion.Panel, {
+		hidden: false,
+		hiddenUntilFound,
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "accordion-panel",
+			initial: {
+				height: 0,
+				opacity: 0,
+				"--mask-stop": "0%",
+				y: 20
+			},
+			animate: {
+				height: "auto",
+				opacity: 1,
+				"--mask-stop": "100%",
+				y: 0
+			},
+			exit: {
+				height: 0,
+				opacity: 0,
+				"--mask-stop": "0%",
+				y: 20
+			},
+			transition,
+			style: {
+				maskImage: "linear-gradient(black var(--mask-stop), transparent var(--mask-stop))",
+				WebkitMaskImage: "linear-gradient(black var(--mask-stop), transparent var(--mask-stop))",
+				overflow: "hidden"
+			},
+			...props
+		}, "accordion-panel")
+	}) });
+}
+
+//#endregion
+export { Accordion$1 as Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, useAccordionItem };

package/dist/components/animate-ui/primitives/base/alert-dialog.js

@@ -0,0 +1,132 @@
+'use client';
+
+import { getStrictContext } from "../../../../lib/get-strict-context.js";
+import { useControlledState } from "../../../../hooks/use-controlled-state.js";
+import "react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui-components/react/alert-dialog";
+
+//#region src/components/animate-ui/primitives/base/alert-dialog.tsx
+const [AlertDialogProvider, useAlertDialog] = getStrictContext("AlertDialogContext");
+function AlertDialog$1(props) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(AlertDialogProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(AlertDialog.Root, {
+			"data-slot": "alert-dialog",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+function AlertDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogPortal(props) {
+	const { isOpen } = useAlertDialog();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		keepMounted: true,
+		...props
+	}) });
+}
+function AlertDialogBackdrop({ transition = {
+	duration: .2,
+	ease: "easeInOut"
+}, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-backdrop",
+		render: /* @__PURE__ */ jsx(motion.div, {
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			transition,
+			...props
+		}, "alert-dialog-backdrop")
+	});
+}
+function AlertDialogPopup({ from = "top", initialFocus, finalFocus, transition = {
+	type: "spring",
+	stiffness: 150,
+	damping: 25
+}, ...props }) {
+	const initialRotation = from === "bottom" || from === "left" ? "20deg" : "-20deg";
+	const rotateAxis = from === "top" || from === "bottom" ? "rotateX" : "rotateY";
+	return /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		initialFocus,
+		finalFocus,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "alert-dialog-popup",
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)",
+				transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			transition,
+			...props
+		}, "alert-dialog-popup")
+	});
+}
+function AlertDialogClose(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		"data-slot": "alert-dialog-close",
+		...props
+	});
+}
+function AlertDialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		...props
+	});
+}
+function AlertDialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		...props
+	});
+}
+function AlertDialogTitle(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		...props
+	});
+}
+function AlertDialogDescription(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		...props
+	});
+}
+
+//#endregion
+export { AlertDialog$1 as AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, useAlertDialog };

package/dist/components/animate-ui/primitives/base/checkbox.js

@@ -0,0 +1,101 @@
+'use client';
+
+import { getStrictContext } from "../../../../lib/get-strict-context.js";
+import { useControlledState } from "../../../../hooks/use-controlled-state.js";
+import "react";
+import { motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@base-ui-components/react/checkbox";
+
+//#region src/components/animate-ui/primitives/base/checkbox.tsx
+const [CheckboxProvider, useCheckbox] = getStrictContext("CheckboxContext");
+function Checkbox$1({ name, checked, defaultChecked, onCheckedChange, indeterminate, value, nativeButton, parent, disabled, readOnly, required, inputRef, id, ...props }) {
+	const [isChecked, setIsChecked] = useControlledState({
+		value: checked,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	return /* @__PURE__ */ jsx(CheckboxProvider, {
+		value: {
+			isChecked,
+			setIsChecked,
+			isIndeterminate: indeterminate
+		},
+		children: /* @__PURE__ */ jsx(Checkbox.Root, {
+			name,
+			defaultChecked,
+			checked,
+			onCheckedChange: setIsChecked,
+			indeterminate,
+			value,
+			nativeButton,
+			parent,
+			disabled,
+			readOnly,
+			required,
+			inputRef,
+			id,
+			render: /* @__PURE__ */ jsx(motion.button, {
+				"data-slot": "checkbox",
+				whileTap: { scale: .95 },
+				whileHover: { scale: 1.05 },
+				...props
+			})
+		})
+	});
+}
+function CheckboxIndicator(props) {
+	const { isChecked, isIndeterminate } = useCheckbox();
+	return /* @__PURE__ */ jsx(Checkbox.Indicator, {
+		keepMounted: true,
+		render: /* @__PURE__ */ jsx(motion.svg, {
+			"data-slot": "checkbox-indicator",
+			xmlns: "http://www.w3.org/2000/svg",
+			fill: "none",
+			viewBox: "0 0 24 24",
+			strokeWidth: "3.5",
+			stroke: "currentColor",
+			initial: "unchecked",
+			animate: isChecked ? "checked" : "unchecked",
+			...props,
+			children: isIndeterminate ? /* @__PURE__ */ jsx(motion.line, {
+				x1: "5",
+				y1: "12",
+				x2: "19",
+				y2: "12",
+				strokeLinecap: "round",
+				initial: {
+					pathLength: 0,
+					opacity: 0
+				},
+				animate: {
+					pathLength: 1,
+					opacity: 1,
+					transition: { duration: .2 }
+				}
+			}) : /* @__PURE__ */ jsx(motion.path, {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				d: "M4.5 12.75l6 6 9-13.5",
+				variants: {
+					checked: {
+						pathLength: 1,
+						opacity: 1,
+						transition: {
+							duration: .2,
+							delay: .2
+						}
+					},
+					unchecked: {
+						pathLength: 0,
+						opacity: 0,
+						transition: { duration: .2 }
+					}
+				}
+			})
+		})
+	});
+}
+
+//#endregion
+export { Checkbox$1 as Checkbox, CheckboxIndicator, useCheckbox };

package/dist/components/animate-ui/primitives/base/dialog.js

@@ -0,0 +1,132 @@
+'use client';
+
+import { getStrictContext } from "../../../../lib/get-strict-context.js";
+import { useControlledState } from "../../../../hooks/use-controlled-state.js";
+import "react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@base-ui-components/react/dialog";
+
+//#region src/components/animate-ui/primitives/base/dialog.tsx
+const [DialogProvider, useDialog] = getStrictContext("DialogContext");
+function Dialog$1(props) {
+	const [isOpen, setIsOpen] = useControlledState({
+		value: props?.open,
+		defaultValue: props?.defaultOpen,
+		onChange: props?.onOpenChange
+	});
+	return /* @__PURE__ */ jsx(DialogProvider, {
+		value: {
+			isOpen,
+			setIsOpen
+		},
+		children: /* @__PURE__ */ jsx(Dialog.Root, {
+			"data-slot": "dialog",
+			...props,
+			onOpenChange: setIsOpen
+		})
+	});
+}
+function DialogTrigger(props) {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "dialog-trigger",
+		...props
+	});
+}
+function DialogPortal(props) {
+	const { isOpen } = useDialog();
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "dialog-portal",
+		keepMounted: true,
+		...props
+	}) });
+}
+function DialogBackdrop({ transition = {
+	duration: .2,
+	ease: "easeInOut"
+}, ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "dialog-backdrop",
+		render: /* @__PURE__ */ jsx(motion.div, {
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)"
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)"
+			},
+			transition,
+			...props
+		}, "dialog-backdrop")
+	});
+}
+function DialogPopup({ from = "top", initialFocus, finalFocus, transition = {
+	type: "spring",
+	stiffness: 150,
+	damping: 25
+}, ...props }) {
+	const initialRotation = from === "bottom" || from === "left" ? "20deg" : "-20deg";
+	const rotateAxis = from === "top" || from === "bottom" ? "rotateX" : "rotateY";
+	return /* @__PURE__ */ jsx(Dialog.Popup, {
+		initialFocus,
+		finalFocus,
+		render: /* @__PURE__ */ jsx(motion.div, {
+			"data-slot": "dialog-popup",
+			initial: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			animate: {
+				opacity: 1,
+				filter: "blur(0px)",
+				transform: `perspective(500px) ${rotateAxis}(0deg) scale(1)`
+			},
+			exit: {
+				opacity: 0,
+				filter: "blur(4px)",
+				transform: `perspective(500px) ${rotateAxis}(${initialRotation}) scale(0.8)`
+			},
+			transition,
+			...props
+		}, "dialog-popup")
+	});
+}
+function DialogClose(props) {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "dialog-close",
+		...props
+	});
+}
+function DialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-header",
+		...props
+	});
+}
+function DialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dialog-footer",
+		...props
+	});
+}
+function DialogTitle(props) {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "dialog-title",
+		...props
+	});
+}
+function DialogDescription(props) {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "dialog-description",
+		...props
+	});
+}
+
+//#endregion
+export { Dialog$1 as Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, useDialog };