@mks2508/mks-ui 0.1.4 → 0.2.0

package/src/components/ui/input.tsx

@@ -1,20 +0,0 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
-
-import { cn } from "@/lib/utils"
-
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
-  return (
-    <InputPrimitive
-      type={type}
-      data-slot="input"
-      className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Input }

package/src/components/ui/label.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Label({ className, ...props }: React.ComponentProps<"label">) {
-  return (
-    <label
-      data-slot="label"
-      className={cn(
-        "gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }

package/src/components/ui/menu.tsx

@@ -1,9 +0,0 @@
-/**
- * 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/morphing-popover/index.ts

@@ -1,10 +0,0 @@
-/**
- * MorphingPopover - A popover that animates from a trigger button to a target position
- *
- * Uses CSS Anchor Positioning + Popover API + @starting-style for smooth morphing animations.
- *
- * @module @mks2508/mks-ui/components/ui/morphing-popover
- */
-
-export { MorphingPopover, MorphingPopoverWithTarget } from './morphing-popover';
-export type { IMorphingPopoverProps, IMorphingPopoverWithTargetProps } from './morphing-popover';

package/src/components/ui/morphing-popover/morphing-popover.tsx

@@ -1,183 +0,0 @@
-"use client";
-
-/**
- * MorphingPopover - A popover that animates from a trigger button to a target position
- *
- * Uses CSS Anchor Positioning + Popover API + @starting-style for smooth morphing animations.
- *
- * @example
- * ```tsx
- * <MorphingPopover
- *   trigger="⋯"
- *   content={<div>Expanded content</div>}
- *   targetSize={{ width: 320, height: 200 }}
- * />
- * ```
- */
-
-import { forwardRef, type HTMLAttributes, type CSSProperties, type ButtonHTMLAttributes } from "react";
-import { cn } from "@/lib/utils";
-import styles from "./morphing-popover.module.css";
-
-// Extend button props to include Popover API attributes
-interface IMorphingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  popovertarget?: string;
-  popoverTargetAction?: "toggle" | "show" | "hide";
-}
-
-interface IMorphingPopoverProps {
-  /** Content to display in popover */
-  content: React.ReactNode;
-  /** Trigger button text or icon */
-  trigger?: React.ReactNode;
-  /** Additional CSS classes for trigger button */
-  triggerClassName?: string;
-  /** Additional CSS classes for popover */
-  popoverClassName?: string;
-  /** Target dimensions and position (if different from default) */
-  targetSize?: { width?: number; height?: number };
-  /** Callback when popover opens */
-  onOpen?: () => void;
-  /** Callback when popover closes */
-  onClose?: () => void;
-  /** Popover HTML ID */
-  popoverId?: string;
-}
-
-export const MorphingPopover = forwardRef<HTMLButtonElement, IMorphingPopoverProps>(
-  (
-    {
-      content,
-      trigger = "⋯",
-      triggerClassName,
-      popoverClassName,
-      targetSize = { width: 220, height: 120 },
-      onOpen,
-      onClose,
-      popoverId = "morphing-popover",
-    },
-    ref
-  ) => {
-    const containerStyle: CSSProperties = {
-      "--target-width": `${targetSize.width}px`,
-      "--target-height": `${targetSize.height}px`,
-    } as CSSProperties;
-
-    const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
-      const isOpen = (e.target as HTMLButtonElement).matches(":popover-open");
-      if (isOpen) {
-        onOpen?.();
-      } else {
-        onClose?.();
-      }
-    };
-
-    return (
-      <div
-        className={styles.morphingPopoverContainer}
-        style={containerStyle}
-      >
-        <button
-          ref={ref}
-          {...({ popovertarget: popoverId, popoverTargetAction: "toggle" } as IMorphingButtonProps)}
-          className={cn(styles.morphingTrigger, triggerClassName)}
-          onClick={handleToggle}
-        >
-          {trigger}
-        </button>
-
-        <div
-          id={popoverId}
-          popover="auto"
-          className={cn(styles.morphingPopover, popoverClassName)}
-        >
-          {content}
-        </div>
-      </div>
-    );
-  }
-);
-
-MorphingPopover.displayName = "MorphingPopover";
-
-/**
- * MorphingPopoverWithTarget - Variant that animates to a specific target element
- *
- * The target element must have CSS `anchor-name: --target-anchor` set on it.
- *
- * @example
- * ```tsx
- * const targetRef = useRef<HTMLDivElement>(null);
- *
- * <div
- *   ref={targetRef}
- *   style={{ anchorName: '--target-anchor' }}
- *   className="draggable-box"
- * >
- *   Drag me around
- * </div>
- *
- * <MorphingPopoverWithTarget
- *   targetRef={targetRef}
- *   content={<div>Content</div>}
- * />
- * ```
- */
-
-interface IMorphingPopoverWithTargetProps extends Omit<IMorphingPopoverProps, "popoverId" | "targetSize"> {
-  /** Reference to target element to anchor to (NOT used directly, for API compatibility) */
-  targetRef: React.RefObject<HTMLElement>;
-  /** Popover HTML ID */
-  popoverId?: string;
-}
-
-export const MorphingPopoverWithTarget = forwardRef<HTMLButtonElement, IMorphingPopoverWithTargetProps>(
-  (
-    {
-      content,
-      trigger = "⋯",
-      triggerClassName,
-      popoverClassName,
-      targetRef,
-      onOpen,
-      onClose,
-      popoverId = "morphing-popover-target",
-    },
-    ref
-  ) => {
-    const handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
-      const isOpen = (e.target as HTMLButtonElement).matches(":popover-open");
-      if (isOpen) {
-        onOpen?.();
-      } else {
-        onClose?.();
-      }
-    };
-
-    return (
-      <div className={styles.morphingPopoverTargetContainer}>
-        <button
-          ref={ref}
-          {...({ popovertarget: popoverId, popoverTargetAction: "toggle" } as IMorphingButtonProps)}
-          className={cn(styles.morphingTrigger, triggerClassName)}
-          onClick={handleToggle}
-        >
-          {trigger}
-        </button>
-
-        <div
-          id={popoverId}
-          popover="auto"
-          className={cn(styles.morphingPopoverTarget, popoverClassName)}
-        >
-          {content}
-        </div>
-      </div>
-    );
-  }
-);
-
-MorphingPopoverWithTarget.displayName = "MorphingPopoverWithTarget";
-
-// Type exports for TypeScript users
-export type { IMorphingPopoverProps, IMorphingPopoverWithTargetProps };

package/src/components/ui/popover.tsx

@@ -1,9 +0,0 @@
-/**
- * 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

@@ -1,9 +0,0 @@
-/**
- * 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';

package/src/components/ui/select.tsx

@@ -1,190 +0,0 @@
-import * as React from "react"
-import { Select as SelectPrimitive } from "@base-ui/react/select"
-
-import { cn } from "@/lib/utils"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { UnfoldMoreIcon, Tick02Icon, ArrowUp01Icon, ArrowDown01Icon } from "@hugeicons/core-free-icons"
-
-const Select = SelectPrimitive.Root
-
-function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
-  return (
-    <SelectPrimitive.Group
-      data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
-  return (
-    <SelectPrimitive.Value
-      data-slot="select-value"
-      className={cn("flex flex-1 text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: SelectPrimitive.Trigger.Props & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon
-        render={
-          <HugeiconsIcon icon={UnfoldMoreIcon} strokeWidth={2} className="text-muted-foreground size-4 pointer-events-none" />
-        }
-      />
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  side = "bottom",
-  sideOffset = 4,
-  align = "center",
-  alignOffset = 0,
-  alignItemWithTrigger = true,
-  ...props
-}: SelectPrimitive.Popup.Props &
-  Pick<
-    SelectPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
-  >) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Positioner
-        side={side}
-        sideOffset={sideOffset}
-        align={align}
-        alignOffset={alignOffset}
-        alignItemWithTrigger={alignItemWithTrigger}
-        className="isolate z-50"
-      >
-        <SelectPrimitive.Popup
-          data-slot="select-content"
-          data-align-trigger={alignItemWithTrigger}
-          className={cn("bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", className )}
-          {...props}
-        >
-          <SelectScrollUpButton />
-          <SelectPrimitive.List>{children}</SelectPrimitive.List>
-          <SelectScrollDownButton />
-        </SelectPrimitive.Popup>
-      </SelectPrimitive.Positioner>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: SelectPrimitive.GroupLabel.Props) {
-  return (
-    <SelectPrimitive.GroupLabel
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectPrimitive.Item.Props) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-        className
-      )}
-      {...props}
-    >
-      <SelectPrimitive.ItemText className="flex flex-1 gap-2 shrink-0 whitespace-nowrap">
-        {children}
-      </SelectPrimitive.ItemText>
-      <SelectPrimitive.ItemIndicator
-        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
-      >
-        <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} className="pointer-events-none" />
-      </SelectPrimitive.ItemIndicator>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: SelectPrimitive.Separator.Props) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
-  return (
-    <SelectPrimitive.ScrollUpArrow
-      data-slot="select-scroll-up-button"
-      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
-      {...props}
-    >
-      <HugeiconsIcon icon={ArrowUp01Icon} strokeWidth={2} />
-    </SelectPrimitive.ScrollUpArrow>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
-  return (
-    <SelectPrimitive.ScrollDownArrow
-      data-slot="select-scroll-down-button"
-      className={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
-      {...props}
-    >
-      <HugeiconsIcon icon={ArrowDown01Icon} strokeWidth={2} />
-    </SelectPrimitive.ScrollDownArrow>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}

package/src/components/ui/separator.tsx

@@ -1,25 +0,0 @@
-"use client"
-
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
-
-import { cn } from "@/lib/utils"
-
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}: SeparatorPrimitive.Props) {
-  return (
-    <SeparatorPrimitive
-      data-slot="separator"
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Separator }

package/src/components/ui/slot.tsx

@@ -1,9 +0,0 @@
-/**
- * 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';

package/src/components/ui/switch.tsx

@@ -1,9 +0,0 @@
-/**
- * Switch component - Animate UI primitive re-export.
- *
- * An animated switch/toggle component with thumb animation.
- *
- * @module @mks2508/mks-ui/components/ui/switch
- */
-
-export * from '@/components/animate-ui/primitives/base/switch';

package/src/components/ui/tabs.tsx

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

package/src/components/ui/textarea.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Textarea }

package/src/components/ui/tooltip.tsx

@@ -1,9 +0,0 @@
-/**
- * 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';

package/src/hooks/index.ts

@@ -1,10 +0,0 @@
-/**
- * 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';

package/src/hooks/use-auto-height.tsx

@@ -1,102 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-type AutoHeightOptions = {
-  includeParentBox?: boolean;
-  includeSelfBox?: boolean;
-};
-
-export function useAutoHeight<T extends HTMLElement = HTMLDivElement>(
-  deps: React.DependencyList = [],
-  options: AutoHeightOptions = {
-    includeParentBox: true,
-    includeSelfBox: false,
-  },
-) {
-  const ref = React.useRef<T | null>(null);
-  const roRef = React.useRef<ResizeObserver | null>(null);
-  const [height, setHeight] = React.useState(0);
-
-  const measure = React.useCallback(() => {
-    const el = ref.current;
-    if (!el) return 0;
-
-    const base = el.getBoundingClientRect().height || 0;
-
-    let extra = 0;
-
-    if (options.includeParentBox && el.parentElement) {
-      const cs = getComputedStyle(el.parentElement);
-      const paddingY =
-        (parseFloat(cs.paddingTop || '0') || 0) +
-        (parseFloat(cs.paddingBottom || '0') || 0);
-      const borderY =
-        (parseFloat(cs.borderTopWidth || '0') || 0) +
-        (parseFloat(cs.borderBottomWidth || '0') || 0);
-      const isBorderBox = cs.boxSizing === 'border-box';
-      if (isBorderBox) {
-        extra += paddingY + borderY;
-      }
-    }
-
-    if (options.includeSelfBox) {
-      const cs = getComputedStyle(el);
-      const paddingY =
-        (parseFloat(cs.paddingTop || '0') || 0) +
-        (parseFloat(cs.paddingBottom || '0') || 0);
-      const borderY =
-        (parseFloat(cs.borderTopWidth || '0') || 0) +
-        (parseFloat(cs.borderBottomWidth || '0') || 0);
-      const isBorderBox = cs.boxSizing === 'border-box';
-      if (isBorderBox) {
-        extra += paddingY + borderY;
-      }
-    }
-
-    const dpr =
-      typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-    const total = Math.ceil((base + extra) * dpr) / dpr;
-
-    return total;
-  }, [options.includeParentBox, options.includeSelfBox]);
-
-  React.useLayoutEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    setHeight(measure());
-
-    if (roRef.current) {
-      roRef.current.disconnect();
-      roRef.current = null;
-    }
-
-    const ro = new ResizeObserver(() => {
-      const next = measure();
-      requestAnimationFrame(() => setHeight(next));
-    });
-
-    ro.observe(el);
-    if (options.includeParentBox && el.parentElement) {
-      ro.observe(el.parentElement);
-    }
-
-    roRef.current = ro;
-
-    return () => {
-      ro.disconnect();
-      roRef.current = null;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-
-  React.useLayoutEffect(() => {
-    if (height === 0) {
-      const next = measure();
-      if (next !== 0) setHeight(next);
-    }
-  }, [height, measure]);
-
-  return { ref, height } as const;
-}