@mks2508/mks-ui 0.5.2 → 0.5.7

package/src/react-ui/primitives/waapi/index.ts

@@ -114,3 +114,26 @@ export { useMorphContext } from './Morph/MorphContext';
 export { useFLIPClipPath } from './Morph/techniques/useFLIPClipPath';
 export { useCSSGridMorph } from './Morph/techniques/useCSSGridMorph';
 export { useViewTransitions } from './Morph/techniques/useViewTransitions';
+
+// ============================================================
+// Gooey — SVG-based shape morphing (filter + parametric path)
+// ============================================================
+
+export {
+  GooeyFilter,
+  GooeyCanvas,
+  MorphPath,
+  useMorphPath,
+  GOOEY_DEFAULTS,
+  computeBlur,
+  buildColorMatrixValues,
+  buildFilterString,
+  morphPathDown,
+  morphPathUp,
+} from './Gooey';
+export type {
+  IGooeyFilterProps,
+  IGooeyCanvasProps,
+  IMorphPathProps,
+  IUseMorphPathOptions,
+} from './Gooey';

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

@@ -1,122 +1,76 @@
+/**
+ * DataCard style slots + CVA variants.
+ *
+ * Glassmorphism card for dashboard metrics/stats.
+ * Uses semantic CSS variables — theme-adaptive.
+ *
+ * @module @mks2508/mks-ui/react/ui/DataCard
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="default">
+ *   <DataCardLabel title="Revenue" />
+ *   <DataCardValue number={45678} unit="$" />
+ * </DataCard>
+ * ```
+ */
+
 import { cva } from 'class-variance-authority';
 import type { StyleSlots } from '@/core/types';
 
 /**
- * Visual regions for: DataCard component family.
- * Each slot maps to: customizable visual region.
+ * Visual slots for DataCard component family.
  */
 export type DataCardSlot =
-  | 'root'           // Main card container
-  | 'bracket'         // Corner bracket decoration
-  | 'header'          // Top section with title/description
-  | 'value'           // Animated number display
-  | 'label'           // Text labels
-  | 'toggle'           // Switch/checkbox control
-  | 'actions'         // Action buttons container
-  | 'footer';         // Bottom section
+  | 'root'
+  | 'bracket'
+  | 'value'
+  | 'label'
+  | 'toggle'
+  | 'actions';
 
 /**
- * Base style slots for: DataCard.
- * Uses glassmorphism pattern from: Synthwave Dark design system.
+ * Base style slots for DataCard.
  */
 export const dataCardStyles: StyleSlots<DataCardSlot> = {
   root: 'group/data-card relative isolate rounded-xl transition-all duration-300',
-
-  bracket: 'absolute pointer-events-none transition-opacity duration-300',
-
-  header: 'flex flex-col gap-1.5 px-5 pt-5 pb-2',
-
+  bracket: 'absolute inset-0 pointer-events-none transition-opacity duration-300',
   value: 'flex items-baseline gap-1 tabular-nums tracking-tight',
-
   label: 'text-sm font-medium',
-
   toggle: 'flex items-center justify-between gap-3',
-
   actions: 'flex items-center gap-2',
-
-  footer: 'mt-auto px-5 pb-4 pt-2',
 };
 
 /**
- * CVA variants for: DataCard root.
- * Combines glassmorphism with Synthwave Dark color scheme.
+ * CVA variants for DataCard root.
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="compact" glass>...</DataCard>
+ * ```
  */
 export const dataCardVariants = cva(dataCardStyles.root, {
   variants: {
-    // Size variants - control padding and spacing
+    /** Size — controls padding */
     size: {
-      compact: {
-        root: 'p-3',
-        header: 'gap-1 px-3 pt-3 pb-1.5',
-        footer: 'px-3 pb-1.5 pt-1',
-      },
-      default: {
-        root: 'p-4',
-        header: 'gap-1.5 px-4 pt-4 pb-2',
-        footer: 'px-4 pb-2 pt-2',
-      },
-      spacious: {
-        root: 'p-6',
-        header: 'gap-2 px-6 pt-6 pb-3',
-        footer: 'px-6 pb-3 pt-2',
-      },
+      compact: 'p-3',
+      default: 'p-4',
+      spacious: 'p-6',
     },
-
-    // Visual variants - control colors and borders
+    /** Visual variant — colors and borders */
     variant: {
-      default: [
-        'bg-white/5',
-        'backdrop-blur-lg',
-        'border border-white/10',
-        'hover:bg-white/10',
-        'shadow-lg shadow-black/20',
-      ].join(' '),
-
-      accent: [
-        'bg-cyan-500/10',
-        'backdrop-blur-lg',
-        'border border-cyan-400/30',
-        'hover:bg-cyan-500/20',
-        'shadow-cyan-500/20 shadow-lg',
-      ].join(' '),
-
-      success: [
-        'bg-emerald-500/10',
-        'backdrop-blur-lg',
-        'border border-emerald-400/30',
-        'hover:bg-emerald-500/20',
-        'shadow-emerald-500/20 shadow-lg',
-      ].join(' '),
-
-      warning: [
-        'bg-amber-500/10',
-        'backdrop-blur-lg',
-        'border border-amber-400/30',
-        'hover:bg-amber-500/20',
-        'shadow-amber-500/20 shadow-lg',
-      ].join(' '),
-
-      destructive: [
-        'bg-red-500/10',
-        'backdrop-blur-lg',
-        'border border-red-400/30',
-        'hover:bg-red-500/20',
-        'shadow-red-500/20 shadow-lg',
-      ].join(' '),
+      default: 'bg-card/80 border border-border/50 shadow-lg shadow-black/10',
+      accent: 'bg-accent/20 border border-accent/30 shadow-lg shadow-accent/10',
+      success: 'bg-green-500/10 dark:bg-green-400/10 border border-green-500/30 dark:border-green-400/30 shadow-lg shadow-green-500/10',
+      warning: 'bg-amber-500/10 dark:bg-amber-400/10 border border-amber-500/30 dark:border-amber-400/30 shadow-lg shadow-amber-500/10',
+      destructive: 'bg-destructive/10 border border-destructive/30 shadow-lg shadow-destructive/10',
     },
-
-    // Glass effect toggle
+    /** Glass effect — adds backdrop blur */
     glass: {
-      true: [
-        'backdrop-blur-lg',
-        'bg-white/10',
-        'border border-white/20',
-        'shadow-xl',
-      ].join(' '),
+      true: 'backdrop-blur-lg',
       false: '',
     },
   },
-
   defaultVariants: {
     variant: 'default',
     size: 'default',
@@ -125,7 +79,7 @@ export const dataCardVariants = cva(dataCardStyles.root, {
 });
 
 /**
- * CVA variants for bracket visibility animation.
+ * Bracket visibility animation CVA.
  */
 export const bracketVariants = cva(dataCardStyles.bracket, {
   variants: {
@@ -138,13 +92,3 @@ export const bracketVariants = cva(dataCardStyles.bracket, {
     animate: true,
   },
 });
-
-/**
- * State-specific styles for DataCard interactions.
- */
-export const dataCardStateStyles = {
-  hovered: 'scale-[1.02]',
-  pressed: 'scale-[0.98]',
-  disabled: 'opacity-50 pointer-events-none',
-};
-

package/src/react-ui/ui/DataCard/DataCard.types.ts

@@ -1,49 +1,46 @@
+/**
+ * DataCard type definitions.
+ *
+ * @module @mks2508/mks-ui/react/ui/DataCard
+ */
+
 import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides, IBaseConfig } from '@/core/types';
 import type { dataCardVariants, DataCardSlot } from './DataCard.styles';
 export type { DataCardSlot } from './DataCard.styles';
 
-/**
- * Available visual variants for DataCard.
- * - 'default' - Standard glassmorphism with neutral borders
- * - 'accent' - Cyan accent with primary glow
- * - 'success' - Green accent for positive data
- * - 'warning' - Amber accent for warnings
- * - 'destructive' - Red accent for critical data
- */
+/** Visual variant names */
 export type DataCardVariant = 'default' | 'accent' | 'success' | 'warning' | 'destructive';
 
-/**
- * Size variants affecting padding and spacing.
- * - 'compact' - Dense layout for dashboards
- * - 'default' - Standard balanced spacing
- * - 'spacious' - More breathing room
- */
+/** Size variant names */
 export type DataCardSize = 'compact' | 'default' | 'spacious';
 
 /**
  * Interaction state for state-based styling.
- * Similar to Button's IButtonState pattern.
  */
 export interface IDataCardState {
-  /** Whether card content is hovered. */
+  /** Whether card is hovered */
   hovered: boolean;
-  /** Whether card is pressed/active. */
+  /** Whether card is pressed */
   pressed: boolean;
-  /** Whether card is disabled. */
+  /** Whether card is disabled */
   disabled: boolean;
 }
 
 /**
  * Configuration for DataCard behavior and animation.
- * Extends IBaseConfig with card-specific settings.
+ *
+ * @example
+ * ```tsx
+ * <DataCard config={{ animateBrackets: true, counterStiffness: 150 }}>...</DataCard>
+ * ```
  */
-export interface IDataCardConfig {
-  /** Enable/disable corner bracket animations. */
+export interface IDataCardConfig extends IBaseConfig {
+  /** Enable corner bracket hover animation (default: true) */
   animateBrackets?: boolean;
-  /** Spring stiffness for number counter. */
+  /** Spring stiffness for CountingNumber (default: 90) */
   counterStiffness?: number;
-  /** Spring damping for number counter. */
+  /** Spring damping for CountingNumber (default: 10) */
   counterDamping?: number;
 }
 
@@ -53,94 +50,76 @@ export interface IDataCardConfig {
  * @example
  * ```tsx
  * <DataCard variant="accent" size="default">
- *   <DataCardValue number={1234} />
- *   <DataCardToggle />
+ *   <DataCardLabel title="Revenue" description="This month" />
+ *   <DataCardValue number={45678} unit="$" />
  * </DataCard>
  * ```
  */
-export interface IDataCardProps
-  extends VariantProps<typeof dataCardVariants> {
-  /** Visual style variant. */
+export interface IDataCardProps extends VariantProps<typeof dataCardVariants> {
+  /** Visual style variant */
   variant?: DataCardVariant;
-  /** Size variant affecting spacing. */
+  /** Size variant affecting spacing */
   size?: DataCardSize;
-  /** Whether card is disabled. */
+  /** Whether card is disabled */
   disabled?: boolean;
-  /** Override classes for card visual regions. */
+  /** Override classes per slot */
   slots?: SlotOverrides<DataCardSlot>;
-  /** Behavioral and animation configuration. */
+  /** Behavior/animation configuration */
   config?: IDataCardConfig;
-  /** CSS class or function returning class based on card state. */
+  /** CSS class or state-based class function */
   className?: string | ((state: IDataCardState) => string | undefined);
-  /** CSS styles or function returning styles based on card state. */
+  /** CSS styles or state-based styles function */
   style?: React.CSSProperties | ((state: IDataCardState) => React.CSSProperties | undefined);
-  /** Enable glassmorphism effect (default: true). */
+  /** Enable glassmorphism blur (default: true) */
   glass?: boolean;
-  /** Show corner brackets (default: true). */
+  /** Show corner brackets (default: true) */
   showBrackets?: boolean;
-  /** Child elements. */
+  /** Child elements */
   children?: React.ReactNode;
 }
 
-/**
- * Props for DataCardValue - displays animated number.
- */
+/** Props for DataCardValue */
 export interface IDataCardValueProps {
-  /** Target number to animate to. */
+  /** Target number to animate to */
   number: number;
-  /** Label displayed above: number. */
+  /** Label displayed above number */
   label?: string;
-  /** Unit/suffix displayed after: number. */
+  /** Unit/suffix after number */
   unit?: string;
-  /** Decimal places for precision. */
+  /** Decimal places (default: 0) */
   decimalPlaces?: number;
-  /** Pad number with leading zeros. */
+  /** Pad number with leading zeros */
   padStart?: boolean;
 }
 
-/**
- * Props for DataCardLabel - title/description text.
- */
+/** Props for DataCardLabel */
 export interface IDataCardLabelProps extends React.ComponentProps<'div'> {
-  /** Primary title text. */
+  /** Primary title text */
   title?: string;
-  /** Secondary description text. */
+  /** Secondary description */
   description?: string;
 }
 
-/**
- * Props for DataCardToggle - interactive switch element.
- */
+/** Props for DataCardToggle */
 export interface IDataCardToggleProps {
-  /** Whether toggle is checked. */
+  /** Whether toggle is checked */
   checked?: boolean;
-  /** Callback when toggle state changes. */
+  /** Callback when toggle changes */
   onCheckedChange?: (checked: boolean) => void;
-  /** Icon to show when checked (on). */
-  checkedIcon?: React.ReactNode;
-  /** Icon to show when unchecked (off). */
-  uncheckedIcon?: React.ReactNode;
-  /** Label for: toggle. */
+  /** Label for the toggle */
   label?: string;
-  /** Override classes for toggle regions. */
-  slots?: SlotOverrides<DataCardSlot>;
 }
 
-/**
- * Props for DataCardActions - action button container.
- */
+/** Props for DataCardActions */
 export interface IDataCardActionsProps extends React.ComponentProps<'div'> {
-  /** Alignment of action buttons. */
+  /** Button alignment */
   align?: 'start' | 'center' | 'end';
 }
 
-/**
- * Props for DataCardBracket - decorative corner element.
- */
+/** Props for DataCardBracket */
 export interface IDataCardBracketProps extends React.ComponentProps<'div'> {
-  /** Position of: bracket. */
+  /** Corner position */
   position: 'tl' | 'tr' | 'bl' | 'br';
-  /** Optional variant override for: this bracket. */
+  /** Variant override */
   variant?: 'default' | 'accent';
 }
-