@mks2508/mks-ui 0.5.4 → 0.5.8

package/src/react-ui/ui/DropdownMenu/index.tsx

@@ -1,300 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Menu as MenuPrimitive } from '@base-ui/react/menu';
-
-import { cn } from '@/react-ui/lib/utils';
-import { HugeiconsIcon } from '@hugeicons/react';
-import { ArrowRight01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
-import { dropdownMenuStyles } from './DropdownMenu.styles';
-import type {
-  IDropdownMenuProps,
-  IDropdownMenuPortalProps,
-  IDropdownMenuTriggerProps,
-  IDropdownMenuContentProps,
-  IDropdownMenuGroupProps,
-  IDropdownMenuLabelProps,
-  IDropdownMenuItemProps,
-  IDropdownMenuSubProps,
-  IDropdownMenuSubTriggerProps,
-  IDropdownMenuCheckboxItemProps,
-  IDropdownMenuRadioGroupProps,
-  IDropdownMenuRadioItemProps,
-  IDropdownMenuSeparatorProps,
-  IDropdownMenuShortcutProps,
-} from './DropdownMenu.types';
-
-/**
- * DropdownMenu — context menu built on Base UI Menu primitive.
- *
- * @example
- * ```tsx
- * <DropdownMenu>
- *   <DropdownMenuTrigger>Open</DropdownMenuTrigger>
- *   <DropdownMenuContent>
- *     <DropdownMenuItem>Item 1</DropdownMenuItem>
- *     <DropdownMenuSeparator />
- *     <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
- *   </DropdownMenuContent>
- * </DropdownMenu>
- * ```
- */
-function DropdownMenu({ ...props }: IDropdownMenuProps) {
-  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
-}
-
-/** DropdownMenuPortal — renders dropdown content in a portal. */
-function DropdownMenuPortal({ ...props }: IDropdownMenuPortalProps) {
-  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
-}
-
-/** DropdownMenuTrigger — element that opens the dropdown. */
-function DropdownMenuTrigger({ ...props }: IDropdownMenuTriggerProps) {
-  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
-}
-
-/** DropdownMenuContent — popup content area for the dropdown. */
-function DropdownMenuContent({
-  align = 'start',
-  alignOffset = 0,
-  side = 'bottom',
-  sideOffset = 4,
-  className,
-  slots,
-  ...props
-}: IDropdownMenuContentProps) {
-  return (
-    <MenuPrimitive.Portal>
-      <MenuPrimitive.Positioner
-        className="isolate z-50 outline-none"
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
-      >
-        <MenuPrimitive.Popup
-          data-slot="dropdown-menu-content"
-          className={cn(dropdownMenuStyles.content, slots?.content, className)}
-          {...props}
-        />
-      </MenuPrimitive.Positioner>
-    </MenuPrimitive.Portal>
-  );
-}
-
-/** DropdownMenuGroup — groups related menu items. */
-function DropdownMenuGroup({ ...props }: IDropdownMenuGroupProps) {
-  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
-}
-
-/** DropdownMenuLabel — label for a group of menu items. */
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: IDropdownMenuLabelProps) {
-  return (
-    <MenuPrimitive.GroupLabel
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(dropdownMenuStyles.label, className)}
-      {...props}
-    />
-  );
-}
-
-/** DropdownMenuItem — a single selectable menu item. */
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = 'default',
-  ...props
-}: IDropdownMenuItemProps) {
-  return (
-    <MenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(dropdownMenuStyles.item, className)}
-      {...props}
-    />
-  );
-}
-
-/** DropdownMenuSub — submenu root. */
-function DropdownMenuSub({ ...props }: IDropdownMenuSubProps) {
-  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />;
-}
-
-/** DropdownMenuSubTrigger — trigger for opening a submenu. */
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: IDropdownMenuSubTriggerProps) {
-  return (
-    <MenuPrimitive.SubmenuTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(dropdownMenuStyles.subTrigger, className)}
-      {...props}
-    >
-      {children}
-      <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} className="ml-auto" />
-    </MenuPrimitive.SubmenuTrigger>
-  );
-}
-
-/** DropdownMenuSubContent — content area for a submenu. */
-function DropdownMenuSubContent({
-  align = 'start',
-  alignOffset = -3,
-  side = 'right',
-  sideOffset = 0,
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuContent>) {
-  return (
-    <DropdownMenuContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(dropdownMenuStyles.subContent, className)}
-      align={align}
-      alignOffset={alignOffset}
-      side={side}
-      sideOffset={sideOffset}
-      {...props}
-    />
-  );
-}
-
-/** DropdownMenuCheckboxItem — menu item with checkbox behavior. */
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  inset,
-  ...props
-}: IDropdownMenuCheckboxItemProps) {
-  return (
-    <MenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      data-inset={inset}
-      className={cn(dropdownMenuStyles.checkboxItem, className)}
-      checked={checked}
-      {...props}
-    >
-      <span
-        className="absolute right-2 flex items-center justify-center pointer-events-none"
-        data-slot="dropdown-menu-checkbox-item-indicator"
-      >
-        <MenuPrimitive.CheckboxItemIndicator>
-          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
-        </MenuPrimitive.CheckboxItemIndicator>
-      </span>
-      {children}
-    </MenuPrimitive.CheckboxItem>
-  );
-}
-
-/** DropdownMenuRadioGroup — groups radio items. */
-function DropdownMenuRadioGroup({ ...props }: IDropdownMenuRadioGroupProps) {
-  return (
-    <MenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  );
-}
-
-/** DropdownMenuRadioItem — menu item with radio behavior. */
-function DropdownMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}: IDropdownMenuRadioItemProps) {
-  return (
-    <MenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      data-inset={inset}
-      className={cn(dropdownMenuStyles.radioItem, className)}
-      {...props}
-    >
-      <span
-        className="absolute right-2 flex items-center justify-center pointer-events-none"
-        data-slot="dropdown-menu-radio-item-indicator"
-      >
-        <MenuPrimitive.RadioItemIndicator>
-          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
-        </MenuPrimitive.RadioItemIndicator>
-      </span>
-      {children}
-    </MenuPrimitive.RadioItem>
-  );
-}
-
-/** DropdownMenuSeparator — visual divider between menu items. */
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: IDropdownMenuSeparatorProps) {
-  return (
-    <MenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn(dropdownMenuStyles.separator, className)}
-      {...props}
-    />
-  );
-}
-
-/** DropdownMenuShortcut — keyboard shortcut hint text. */
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: IDropdownMenuShortcutProps) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(dropdownMenuStyles.shortcut, className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-};
-
-export type {
-  IDropdownMenuProps,
-  IDropdownMenuPortalProps,
-  IDropdownMenuTriggerProps,
-  IDropdownMenuContentProps,
-  IDropdownMenuGroupProps,
-  IDropdownMenuLabelProps,
-  IDropdownMenuItemProps,
-  IDropdownMenuSubProps,
-  IDropdownMenuSubTriggerProps,
-  IDropdownMenuCheckboxItemProps,
-  IDropdownMenuRadioGroupProps,
-  IDropdownMenuRadioItemProps,
-  IDropdownMenuSeparatorProps,
-  IDropdownMenuShortcutProps,
-} from './DropdownMenu.types';
-
-export type { DropdownMenuSlot } from './DropdownMenu.styles';

package/src/react-ui/ui/DynamicToggle/DynamicToggle.css

@@ -1,303 +0,0 @@
-/**
- * DynamicToggle — CSS state transitions.
- *
- * Rules requiring :has(), container queries, clip-path, or pseudo-elements.
- * Layout, colors, sizing in Tailwind (DynamicToggle.styles.ts).
- *
- * @import '@mks2508/mks-ui/dist/react-ui/ui/DynamicToggle/DynamicToggle.css';
- */
-
-/* ── Variables ── */
-[data-slot="dt-root"] {
-  --dt-dur: 0.22s;
-  --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
-  --dt-fade: 0.45;
-}
-
-/* ── Track: explicit row prevents h-full items from overflowing container ── */
-[data-slot="dt-root"] [data-slot="dt-track"] {
-  grid-template-rows: minmax(0, 1fr);
-}
-
-/* ── Top-level option spans 2 grid cols ── */
-[data-slot="dt-root"] [data-slot="dt-track"] > label {
-  grid-column: span 2;
-}
-
-/* ── Main indicator slide ── */
-[data-slot="dt-root"] [data-slot="dt-indicator"] {
-  transition: translate var(--dt-dur) var(--dt-ease);
-  translate: 100% 0;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
-  translate: 0 0;
-}
-
-/* ── Primary option text ── */
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) > label {
-  color: var(--card);
-  z-index: 2;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:not(:has(> input:checked)) > label {
-  color: var(--foreground);
-  opacity: var(--dt-fade);
-}
-
-/* ── Group: container queries ── */
-[data-slot="dt-root"] [data-slot="dt-group"] {
-  container-type: size;
-  overflow: hidden;
-}
-
-/* ── Group indicator: clip-path reveal ── */
-[data-slot="dt-root"] [data-slot="dt-group-indicator"] {
-  pointer-events: none;
-  transition:
-    translate var(--dt-dur) var(--dt-ease),
-    clip-path var(--dt-dur) var(--dt-ease),
-    background var(--dt-dur) var(--dt-ease);
-  clip-path: inset(
-    73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px)
-    round var(--dt-radius, 9999px)
-  );
-  translate: -50% 0;
-}
-[data-slot="dt-root"] [data-slot="dt-track"]:has(> input:checked) [data-slot="dt-group-indicator"] {
-  background: transparent;
-}
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"] {
-  background: var(--card);
-  clip-path: inset(0 0 0 0 round var(--dt-radius, 9999px));
-}
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"] {
-  translate: -100% 0;
-}
-[data-slot="dt-root"] [data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"] {
-  translate: 0 0;
-}
-
-/* ══════════════════════════════════════════════════════════
- * GROUP COLLAPSED STATE
- *
- * ::before = title text (via data-label attr)
- * ::after  = combined opts text (via data-opts attr)
- * <label>s = controlled by data-collapsed mode
- *
- * 3 modes: title | opts | title-opts (default)
- * ══════════════════════════════════════════════════════════ */
-
-/* ── ::before — group title ── */
-[data-slot="dt-group"]::before {
-  content: attr(data-label);
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  translate: -50% -80%;
-  color: var(--foreground);
-  font-size: inherit;
-  font-weight: 500;
-  z-index: 2;
-  white-space: nowrap;
-  pointer-events: none;
-  transition:
-    scale var(--dt-dur) var(--dt-ease),
-    translate var(--dt-dur) var(--dt-ease),
-    opacity var(--dt-dur) var(--dt-ease);
-}
-
-/* ── ::after — combined opts text ── */
-[data-slot="dt-group"]::after {
-  content: attr(data-opts);
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  translate: -50% 20%;
-  color: var(--muted-foreground);
-  font-size: 0.85em;
-  opacity: 0.6;
-  z-index: 2;
-  white-space: nowrap;
-  pointer-events: none;
-  transition: opacity var(--dt-dur) var(--dt-ease);
-}
-[data-slot="dt-group"]:not([data-opts])::after {
-  content: none;
-}
-
-/* ── Group labels — transition props ── */
-[data-slot="dt-root"] [data-slot="dt-group"] label {
-  color: var(--muted-foreground);
-  cursor: pointer;
-  z-index: 2;
-  transition:
-    color var(--dt-dur) var(--dt-ease),
-    opacity var(--dt-dur) var(--dt-ease),
-    translate var(--dt-dur) var(--dt-ease);
-}
-[data-slot="dt-root"] [data-slot="dt-group"] label span {
-  display: grid;
-  place-items: center;
-  height: 100%;
-  width: 100%;
-  border-radius: var(--dt-radius, 9999px);
-  transition: scale var(--dt-dur) var(--dt-ease);
-}
-
-/* ── Collapsed mode: "title" — only ::before, labels slide+scale out ── */
-[data-slot="dt-group"][data-collapsed="title"]::before {
-  translate: -50% -50%;
-}
-[data-slot="dt-group"][data-collapsed="title"]::after {
-  display: none;
-}
-[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label {
-  opacity: 0;
-  translate: 0 30%;
-}
-[data-slot="dt-group"][data-collapsed="title"]:not(:has(input:checked)) label span {
-  scale: 0.5;
-}
-
-/* ── Collapsed mode: "opts" — only ::after, labels slide+scale out ── */
-[data-slot="dt-group"][data-collapsed="opts"]::before {
-  display: none;
-}
-[data-slot="dt-group"][data-collapsed="opts"]::after {
-  translate: -50% -50%;
-  font-size: inherit;
-  opacity: 0.7;
-}
-[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label {
-  opacity: 0;
-  translate: 0 30%;
-}
-[data-slot="dt-group"][data-collapsed="opts"]:not(:has(input:checked)) label span {
-  scale: 0.5;
-}
-
-/* ── Collapsed mode: "title-opts" — WIP: disabled, falls back to "title" behavior ── */
-/* TODO: title-opts needs a redesign — title (::before) and scaled labels overlap
-   at all container sizes. The codepen original morph relied on specific dimensions
-   that don't translate to the component's size variants. Needs a different approach
-   (e.g., crossfade, flex layout, or JS-measured positions). */
-[data-slot="dt-group"][data-collapsed="title-opts"]::after {
-  content: none;
-}
-[data-slot="dt-group"][data-collapsed="title-opts"]::before {
-  translate: -50% -50%;
-}
-[data-slot="dt-group"][data-collapsed="title-opts"]:not(:has(input:checked)) label {
-  opacity: 0;
-  translate: 0 30%;
-}
-
-/* ── When group expanded ── */
-[data-slot="dt-group"]:has(input:checked)::before {
-  translate: -50% -250%;
-  scale: 0.85;
-}
-[data-slot="dt-group"]:has(input:checked)::after {
-  opacity: 0;
-}
-[data-slot="dt-group"]:has(input:checked) label {
-  opacity: 0.75;
-  color: var(--muted-foreground);
-  translate: 0 0;
-}
-[data-slot="dt-group"]:has(input:checked) label span {
-  scale: 1;
-}
-[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),
-[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2) {
-  color: var(--foreground);
-  opacity: 1;
-}
-
-/* ══════════════════════════════════════════════════════════
- * GROUP LABEL (above/below the pill)
- *
- * Replaces the old "bubble" element. Positioned via CSS grid.
- * In filter/path morph modes, rendered inside GooeyCanvas.
- * In none mode, simple CSS-driven show/hide.
- * ══════════════════════════════════════════════════════════ */
-
-[data-slot="dt-group-label"] {
-  display: grid;
-  grid-template-rows: 0fr;
-  left: 20%;
-  right: 20%;
-  transition:
-    grid-template-rows calc(var(--dt-dur) * 1.5) var(--dt-ease),
-    opacity var(--dt-dur) var(--dt-ease);
-  opacity: 0;
-  background: var(--card);
-  border: 1px solid var(--border);
-  z-index: 3;
-}
-[data-slot="dt-group-label"] > span {
-  overflow: hidden;
-  min-height: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 0.75em;
-  height: calc(var(--dt-h, 38px) * 0.4);
-  box-sizing: border-box;
-}
-
-/* Top position */
-[data-slot="dt-group-label"][data-position="top"] {
-  bottom: 100%;
-  border-radius: calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2) 0 0;
-  border-bottom: none;
-  margin-bottom: -1px;
-}
-
-/* Bottom position */
-[data-slot="dt-group-label"][data-position="bottom"] {
-  top: 100%;
-  border-radius: 0 0 calc(var(--dt-h, 38px) * 0.2) calc(var(--dt-h, 38px) * 0.2);
-  border-top: none;
-  margin-top: -1px;
-}
-
-/* When group active → group label grows */
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] {
-  grid-template-rows: 1fr;
-  opacity: 1;
-}
-[data-slot="dt-root"]:not(:has([data-slot="dt-track"] > input:checked)) [data-slot="dt-group-label"] > span {
-  padding: 0.35em 0.75em;
-}
-
-/* ── Filter morph mode ── */
-[data-slot="dt-root"][data-morph="filter"] {
-  background: transparent;
-  border-color: transparent;
-  box-shadow: none;
-  overflow: visible;
-}
-[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group-label"] {
-  border: none;
-}
-[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-track"] {
-  position: relative;
-  z-index: 1;
-}
-
-/* ── Filter morph: ::before hides on expand, gooey canvas handles junction ── */
-[data-slot="dt-root"][data-morph="filter"] [data-slot="dt-group"]:has(input:checked)::before {
-  opacity: 0;
-  translate: -50% -80%;
-  scale: 1;
-}
-
-/* ── Path morph mode ── */
-[data-slot="dt-root"][data-morph="path"] {
-  background: transparent;
-  border-color: transparent;
-}
-[data-slot="dt-root"][data-morph="path"] [data-slot="dt-track"] {
-  position: relative;
-  z-index: 1;
-}

package/src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts

@@ -1,85 +0,0 @@
-/**
- * DynamicToggle style slots + CVA variants.
- *
- * Layout via Tailwind. State animations via CSS file (`:has()`, `clip-path`).
- * Shape propagated to indicators via `--dt-radius` CSS variable.
- *
- * @module @mks2508/mks-ui/react/ui/DynamicToggle
- */
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import type { StyleSlots } from '@/core/types';
-
-/** Slot names for DynamicToggle */
-export type DynamicToggleSlot =
-  | 'root'
-  | 'track'
-  | 'option'
-  | 'indicator'
-  | 'group'
-  | 'groupIndicator'
-  | 'groupLabel';
-
-/**
- * Default styles for each DynamicToggle slot.
- *
- * Width is set by size variants — required because indicator uses `width: 50%`
- * and clip-path uses container query units. Override: `slots={{ root: 'w-80' }}`.
- */
-export const dynamicToggleStyles: StyleSlots<DynamicToggleSlot> = {
-  root: 'relative border p-[2px] select-none',
-  track: 'relative grid grid-cols-[repeat(4,1fr)] place-items-center w-full h-full',
-  option: 'inline-grid place-items-center cursor-pointer font-medium z-[2] h-full w-full whitespace-nowrap',
-  indicator: 'absolute w-1/2 left-0 top-0 bottom-0 bg-foreground rounded-[var(--dt-radius,9999px)] pointer-events-none z-0',
-  group: 'col-span-2 relative w-full h-full grid grid-cols-2',
-  groupIndicator: 'absolute left-1/2 top-0 bottom-0 w-1/2 bg-foreground rounded-[var(--dt-radius,9999px)] pointer-events-none z-0',
-  groupLabel: [
-    'absolute',
-    'flex items-center justify-center',
-    'text-muted-foreground font-medium whitespace-nowrap',
-    'pointer-events-none',
-  ].join(' '),
-};
-
-/**
- * CVA variants for DynamicToggle root.
- *
- * @example
- * ```tsx
- * <DynamicToggle size="sm" variant="outline" shape="rounded">
- * ```
- */
-export const dynamicToggleVariants = cva(dynamicToggleStyles.root, {
-  variants: {
-    /** Visual variant — background and border */
-    variant: {
-      default: 'bg-card border-border shadow-sm',
-      ghost: 'bg-transparent border-transparent',
-      muted: 'bg-muted border-muted',
-      outline: 'bg-transparent border-border',
-    },
-    /**
-     * Size — height, width, and font size.
-     * Width is required for the 50% indicator and cqh clip-path.
-     */
-    size: {
-      sm: 'h-[30px] w-[210px] text-[10px] [--dt-h:30px]',
-      default: 'h-[38px] w-[260px] text-xs [--dt-h:38px]',
-      lg: 'h-[44px] w-80 text-sm [--dt-h:44px]',
-    },
-    /** Shape — border radius propagated to indicators via --dt-radius */
-    shape: {
-      pill: 'rounded-full [--dt-radius:9999px]',
-      rounded: 'rounded-xl [--dt-radius:0.75rem]',
-      square: 'rounded-md [--dt-radius:0.375rem]',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'default',
-    shape: 'pill',
-  },
-});
-
-/** Variant props extracted from CVA */
-export type DynamicToggleVariantProps = VariantProps<typeof dynamicToggleVariants>;