@mks2508/mks-ui 0.8.1 → 0.9.0

package/dist/react-ui/primitives/GooeyMorphingSurface/gooey-morphing.css

@@ -0,0 +1,112 @@
+/* =============================================================================
+ *  GooeyMorphingSurface — CSS layer for the SVG rect morph + HTML overlays.
+ *
+ *  Classes are prefixed `.gms-*` so they act as a manual scope (mks-ui's
+ *  rolldown build produces empty default-exports for CSS modules, so we use
+ *  plain CSS with explicit classnames referenced as string literals from
+ *  the component).
+ *
+ *  Every tunable value comes from inline CSS custom props set by the React
+ *  component at the root element. No hard-coded dimensions or timings here.
+ *
+ *  Technique recap: two <rect>s inside a <g filter="url(#gooey)">. Body rect
+ *  is a geometric CLONE of the pill when closed, and morphs into the card
+ *  geometry (x, y, width, height, rx, ry all interpolate) when open. The
+ *  gaussian-blur + alpha-threshold filter bends the overlapping silhouettes
+ *  into a single shape with a soft metaball throat.
+ * ============================================================================= */
+
+.gms-root {
+	position: relative;
+	display: inline-block;
+}
+
+.gms-shell {
+	position: relative;
+	width: var(--gms-card-w);
+	height: var(--gms-pill-h);
+	color: var(--gms-fill);
+	transition: height var(--gms-duration) var(--gms-ease);
+	/* Drop-shadow follows the fused silhouette. Chained filters = additive
+	 * shadow layers for depth without a hard box-shadow. */
+	filter: drop-shadow(0 16px 38px rgb(0 0 0 / 0.35))
+		drop-shadow(0 4px 10px rgb(0 0 0 / 0.18));
+}
+
+.gms-shell[data-open='true'] {
+	height: calc(var(--gms-pill-h) + var(--gms-card-h));
+}
+
+.gms-svg {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	display: block;
+	overflow: visible;
+	pointer-events: none;
+}
+
+.gms-body-rect {
+	will-change: x, y, width, height;
+	transition:
+		x var(--gms-duration) var(--gms-ease),
+		y var(--gms-duration) var(--gms-ease),
+		width var(--gms-duration) var(--gms-ease),
+		height var(--gms-duration) var(--gms-ease),
+		rx var(--gms-duration) var(--gms-ease),
+		ry var(--gms-duration) var(--gms-ease);
+}
+
+.gms-pill {
+	position: absolute;
+	top: 0;
+	left: var(--gms-pill-x);
+	width: var(--gms-pill-w);
+	height: var(--gms-pill-h);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	color: var(--card-foreground);
+	pointer-events: none;
+	z-index: 2;
+}
+
+.gms-card {
+	position: absolute;
+	top: calc(var(--gms-pill-h) - var(--gms-overlap));
+	left: 0;
+	width: var(--gms-card-w);
+	height: var(--gms-card-h);
+	color: var(--card-foreground);
+	opacity: 0;
+	transform: translateY(4px);
+	pointer-events: none;
+	z-index: 2;
+	overflow: hidden;
+	border-radius: var(--gms-card-r);
+	transition:
+		opacity calc(var(--gms-duration) * 0.35) var(--gms-ease),
+		transform calc(var(--gms-duration) * 0.35) var(--gms-ease);
+}
+
+.gms-shell[data-open='true'] .gms-card {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: auto;
+	transition:
+		opacity calc(var(--gms-duration) * 0.55) var(--gms-ease)
+			calc(var(--gms-duration) * 0.45),
+		transform calc(var(--gms-duration) * 0.55) var(--gms-ease)
+			calc(var(--gms-duration) * 0.45);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.gms-shell,
+	.gms-body-rect,
+	.gms-card {
+		transition-duration: 0.01ms !important;
+	}
+}
+

package/dist/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.module.css

@@ -0,0 +1,20 @@
+/**
+ * View Transitions API - Default transition styles.
+ *
+ * These styles apply to all view-transition pseudo-elements by default,
+ * eliminating the need for dynamic style injection based on transition names.
+ *
+ * Usage: Apply `view-transition-name` via inline style or CSS variable:
+ *   <div style={{ viewTransitionName: 'hero' }}>...</div>
+ *
+ * Or via CSS:
+ *   .my-element { view-transition-name: hero; }
+ */
+
+/* Default animation for all view transitions */
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: 300ms;
+  animation-timing-function: ease-out;
+}
+

package/dist/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../../core/types';
 /**
  * Style slots for SlidingNumber component
  */

package/dist/react-ui/primitives/waapi/SlidingText/SlidingText.styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../../core/types';
 /**
  * Style slots for SlidingText component
  */

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

@@ -7,7 +7,7 @@
  * @module @mks2508/mks-ui/react/ui/Accordion/Accordion.styles
  */
 import { type VariantProps } from 'class-variance-authority';
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 import type { AccordionSlot } from './Accordion.types';
 /**
  * Default Tailwind classes for each visual region of the Accordion.

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

@@ -8,7 +8,7 @@
  */
 import type { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import type { HTMLMotionProps } from 'motion/react';
-import type { IBaseConfig, SlotOverrides } from '@/core/types';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
 import type { AccordionVariantProps } from './Accordion.styles';
 /**
  * Named visual regions of the Accordion that can be styled via the `slots` prop.

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

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

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

@@ -8,7 +8,7 @@
  */
 import type { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
 import type { HTMLMotionProps } from 'motion/react';
-import type { IBaseConfig, SlotOverrides } from '@/core/types';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
 /**
  * Named visual regions of the AlertDialog that can be styled via the `slots` prop.
  *

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions for the Badge component. */
 type BadgeSlot = 'root';
 declare const badgeStyles: StyleSlots<BadgeSlot>;

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

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { badgeVariants, BadgeSlot } from './Badge.styles';
 /**
  * Props for the Badge component.

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions for the Button component. */
 type ButtonSlot = 'root';
 declare const buttonStyles: StyleSlots<ButtonSlot>;

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

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { buttonVariants, ButtonSlot } from './Button.styles';
 /** Button interaction state. */
 interface IButtonState {

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions for the Card component. */
 type CardSlot = 'root' | 'header' | 'title' | 'description' | 'action' | 'content' | 'footer';
 declare const cardStyles: StyleSlots<CardSlot>;

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

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { cardVariants, CardSlot } from './Card.styles';
 /** Props for the Card component. */
 interface ICardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {

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

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/ui/Checkbox/Checkbox.styles
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 import type { CheckboxSlot } from './Checkbox.types';
 /**
  * Default style slots for the Checkbox component.

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

@@ -5,7 +5,7 @@
  */
 import type { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
 import type { HTMLMotionProps, SVGMotionProps } from 'motion/react';
-import type { IBaseConfig, SlotOverrides } from '@/core/types';
+import type { IBaseConfig, SlotOverrides } from '../../../core/types';
 /**
  * Available style slot names for the Checkbox component.
  * Each slot maps to a visual region that can be customized via the `slots` prop.

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions for the Combobox component family. */
 type ComboboxSlot = 'root' | 'trigger' | 'content' | 'list' | 'item' | 'label' | 'separator' | 'empty' | 'chips' | 'chip' | 'chipInput';
 declare const comboboxStyles: StyleSlots<ComboboxSlot>;

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

@@ -1,5 +1,5 @@
 import type { Combobox as ComboboxPrimitive } from '@base-ui/react';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { ComboboxSlot } from './Combobox.styles';
 /** Props for the Combobox root. */
 type IComboboxProps = ComboboxPrimitive.Root.Props<any, any>;

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

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 type CornerBracketSlot = 'root';
 declare const cornerBracketStyles: StyleSlots<CornerBracketSlot>;
 /** CVA variants for CornerBracket positioning and color. */

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

@@ -1,5 +1,5 @@
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { bracketVariants, CornerBracketSlot } from './CornerBracket.styles';
 /** Props for the CornerBracket component. */
 interface ICornerBracketProps extends Omit<React.SVGProps<SVGSVGElement>, 'variant'>, VariantProps<typeof bracketVariants> {

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

@@ -14,7 +14,7 @@
  * </DataCard>
  * ```
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /**
  * Visual slots for DataCard component family.
  */

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

@@ -4,7 +4,7 @@
  * @module @mks2508/mks-ui/react/ui/DataCard
  */
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides, IBaseConfig } from '@/core/types';
+import type { SlotOverrides, IBaseConfig } from '../../../core/types';
 import type { dataCardVariants, DataCardSlot } from './DataCard.styles';
 export type { DataCardSlot } from './DataCard.styles';
 /** Visual variant names */

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

@@ -1,5 +1,5 @@
 import { dataCardVariants } from './DataCard.styles';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { IDataCardProps, IDataCardValueProps, IDataCardLabelProps, IDataCardToggleProps, IDataCardActionsProps, IDataCardBracketProps, IDataCardConfig, DataCardSlot } from './DataCard.types';
 type DataCardContextType = {
     variant: IDataCardProps['variant'];

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

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

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

@@ -9,7 +9,7 @@
 import type * as React from 'react';
 import type { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import type { HTMLMotionProps } 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/DropdownMenu/DropdownMenu.styles.d.ts

@@ -1,4 +1,4 @@
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../core/types';
 /** Visual regions for the DropdownMenu component family. */
 type DropdownMenuSlot = 'root' | 'content' | 'item' | 'label' | 'separator' | 'shortcut' | 'subTrigger' | 'subContent' | 'checkboxItem' | 'radioItem';
 declare const dropdownMenuStyles: StyleSlots<DropdownMenuSlot>;

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

@@ -1,5 +1,5 @@
 import type { Menu as MenuPrimitive } from '@base-ui/react/menu';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { DropdownMenuSlot } from './DropdownMenu.styles';
 /** Props for the DropdownMenu root. */
 type IDropdownMenuProps = MenuPrimitive.Root.Props;