@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,38 +0,0 @@
-import { cva } from 'class-variance-authority';
-import type { StyleSlots } from '@/core/types';
-
-type CornerBracketSlot = 'root';
-
-const cornerBracketStyles: StyleSlots<CornerBracketSlot> = {
-  root: 'absolute pointer-events-none',
-};
-
-/** CVA variants for CornerBracket positioning and color. */
-const bracketVariants = cva(cornerBracketStyles.root, {
-  variants: {
-    position: {
-      tl: 'top-0 left-0',
-      tr: 'top-0 right-0',
-      bl: 'bottom-0 left-0',
-      br: 'bottom-0 right-0',
-    },
-    variant: {
-      default: 'stroke-primary/50',
-      accent: 'stroke-primary/66',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-  },
-});
-
-/** SVG path data for each corner position. */
-const BRACKET_PATHS = {
-  tl: 'M 0 20 L 0 5 A 5 5 0 0 1 5 0 L 20 0',
-  tr: 'M 0 0 L 15 0 A 5 5 0 0 1 20 5 L 20 20',
-  bl: 'M 0 0 L 0 15 A 5 5 0 0 0 5 20 L 20 20',
-  br: 'M 20 0 L 20 15 A 5 5 0 0 1 15 20 L 0 20',
-} as const;
-
-export { cornerBracketStyles, bracketVariants, BRACKET_PATHS };
-export type { CornerBracketSlot };

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

@@ -1,15 +0,0 @@
-import type { VariantProps } from 'class-variance-authority';
-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> {
-  /** Bracket size in pixels. */
-  size?: number;
-  /** Override classes for bracket visual regions. */
-  slots?: SlotOverrides<CornerBracketSlot>;
-}
-
-export type { ICornerBracketProps };

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

@@ -1,49 +0,0 @@
-import { cn } from '@/react-ui/lib/utils';
-import { bracketVariants, BRACKET_PATHS } from './CornerBracket.styles';
-import type { ICornerBracketProps } from './CornerBracket.types';
-
-/**
- * CornerBracket — SVG corner bracket decoration for industrial/technical UI styling.
- *
- * @param position - Corner position: 'tl', 'tr', 'bl', 'br'
- * @param variant - Visual style: 'default' or 'accent'
- * @param size - Bracket size in pixels (default: 20)
- *
- * @example
- * ```tsx
- * <div className="relative p-4">
- *   <CornerBracket position="tl" />
- *   <CornerBracket position="br" variant="accent" />
- *   Content here
- * </div>
- * ```
- */
-function CornerBracket({
-  className,
-  position,
-  variant,
-  size = 20,
-  slots,
-  ...props
-}: ICornerBracketProps) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 20 20"
-      fill="none"
-      className={cn(bracketVariants({ position, variant }), slots?.root, className)}
-      {...props}
-    >
-      <path
-        d={BRACKET_PATHS[position || 'tl']}
-        strokeWidth={1.5}
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-export { CornerBracket, bracketVariants };
-export type { ICornerBracketProps } from './CornerBracket.types';
-export type { CornerBracketSlot } from './CornerBracket.styles';

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

@@ -1,94 +0,0 @@
-/**
- * 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 slots for DataCard component family.
- */
-export type DataCardSlot =
-  | 'root'
-  | 'bracket'
-  | 'value'
-  | 'label'
-  | 'toggle'
-  | 'actions';
-
-/**
- * Base style slots for DataCard.
- */
-export const dataCardStyles: StyleSlots<DataCardSlot> = {
-  root: 'group/data-card relative isolate rounded-xl transition-all duration-300',
-  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',
-};
-
-/**
- * CVA variants for DataCard root.
- *
- * @example
- * ```tsx
- * <DataCard variant="accent" size="compact" glass>...</DataCard>
- * ```
- */
-export const dataCardVariants = cva(dataCardStyles.root, {
-  variants: {
-    /** Size — controls padding */
-    size: {
-      compact: 'p-3',
-      default: 'p-4',
-      spacious: 'p-6',
-    },
-    /** Visual variant — colors and borders */
-    variant: {
-      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 — adds backdrop blur */
-    glass: {
-      true: 'backdrop-blur-lg',
-      false: '',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'default',
-    glass: true,
-  },
-});
-
-/**
- * Bracket visibility animation CVA.
- */
-export const bracketVariants = cva(dataCardStyles.bracket, {
-  variants: {
-    animate: {
-      true: 'opacity-60 group-hover/data-card:opacity-100 transition-opacity',
-      false: 'opacity-50',
-    },
-  },
-  defaultVariants: {
-    animate: true,
-  },
-});

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

@@ -1,125 +0,0 @@
-/**
- * DataCard type definitions.
- *
- * @module @mks2508/mks-ui/react/ui/DataCard
- */
-
-import type { VariantProps } from 'class-variance-authority';
-import type { SlotOverrides, IBaseConfig } from '@/core/types';
-import type { dataCardVariants, DataCardSlot } from './DataCard.styles';
-export type { DataCardSlot } from './DataCard.styles';
-
-/** Visual variant names */
-export type DataCardVariant = 'default' | 'accent' | 'success' | 'warning' | 'destructive';
-
-/** Size variant names */
-export type DataCardSize = 'compact' | 'default' | 'spacious';
-
-/**
- * Interaction state for state-based styling.
- */
-export interface IDataCardState {
-  /** Whether card is hovered */
-  hovered: boolean;
-  /** Whether card is pressed */
-  pressed: boolean;
-  /** Whether card is disabled */
-  disabled: boolean;
-}
-
-/**
- * Configuration for DataCard behavior and animation.
- *
- * @example
- * ```tsx
- * <DataCard config={{ animateBrackets: true, counterStiffness: 150 }}>...</DataCard>
- * ```
- */
-export interface IDataCardConfig extends IBaseConfig {
-  /** Enable corner bracket hover animation (default: true) */
-  animateBrackets?: boolean;
-  /** Spring stiffness for CountingNumber (default: 90) */
-  counterStiffness?: number;
-  /** Spring damping for CountingNumber (default: 10) */
-  counterDamping?: number;
-}
-
-/**
- * Props for DataCard root component.
- *
- * @example
- * ```tsx
- * <DataCard variant="accent" size="default">
- *   <DataCardLabel title="Revenue" description="This month" />
- *   <DataCardValue number={45678} unit="$" />
- * </DataCard>
- * ```
- */
-export interface IDataCardProps extends VariantProps<typeof dataCardVariants> {
-  /** Visual style variant */
-  variant?: DataCardVariant;
-  /** Size variant affecting spacing */
-  size?: DataCardSize;
-  /** Whether card is disabled */
-  disabled?: boolean;
-  /** Override classes per slot */
-  slots?: SlotOverrides<DataCardSlot>;
-  /** Behavior/animation configuration */
-  config?: IDataCardConfig;
-  /** CSS class or state-based class function */
-  className?: string | ((state: IDataCardState) => string | undefined);
-  /** CSS styles or state-based styles function */
-  style?: React.CSSProperties | ((state: IDataCardState) => React.CSSProperties | undefined);
-  /** Enable glassmorphism blur (default: true) */
-  glass?: boolean;
-  /** Show corner brackets (default: true) */
-  showBrackets?: boolean;
-  /** Child elements */
-  children?: React.ReactNode;
-}
-
-/** Props for DataCardValue */
-export interface IDataCardValueProps {
-  /** Target number to animate to */
-  number: number;
-  /** Label displayed above number */
-  label?: string;
-  /** Unit/suffix after number */
-  unit?: string;
-  /** Decimal places (default: 0) */
-  decimalPlaces?: number;
-  /** Pad number with leading zeros */
-  padStart?: boolean;
-}
-
-/** Props for DataCardLabel */
-export interface IDataCardLabelProps extends React.ComponentProps<'div'> {
-  /** Primary title text */
-  title?: string;
-  /** Secondary description */
-  description?: string;
-}
-
-/** Props for DataCardToggle */
-export interface IDataCardToggleProps {
-  /** Whether toggle is checked */
-  checked?: boolean;
-  /** Callback when toggle changes */
-  onCheckedChange?: (checked: boolean) => void;
-  /** Label for the toggle */
-  label?: string;
-}
-
-/** Props for DataCardActions */
-export interface IDataCardActionsProps extends React.ComponentProps<'div'> {
-  /** Button alignment */
-  align?: 'start' | 'center' | 'end';
-}
-
-/** Props for DataCardBracket */
-export interface IDataCardBracketProps extends React.ComponentProps<'div'> {
-  /** Corner position */
-  position: 'tl' | 'tr' | 'bl' | 'br';
-  /** Variant override */
-  variant?: 'default' | 'accent';
-}

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

@@ -1,340 +0,0 @@
-'use client';
-
-/**
- * DataCard — glassmorphism dashboard metric card.
- *
- * Features: animated numbers, corner brackets, toggle, size/variant CVA,
- * state-based styling, slot overrides, config for animation tuning.
- *
- * @module @mks2508/mks-ui/react/ui/DataCard
- *
- * @example
- * ```tsx
- * <DataCard variant="accent" size="default">
- *   <DataCardLabel title="Revenue" description="This month" />
- *   <DataCardValue number={45678} unit="$" />
- * </DataCard>
- * ```
- */
-
-import * as React from 'react';
-import { motion } from 'motion/react';
-import { cn } from '@/react-ui/lib/utils';
-import { getStrictContext } from '@/react-ui/lib/get-strict-context';
-
-import { CornerBracket } from '@/react-ui/ui/CornerBracket';
-import { CountingNumber } from '@/react-ui/primitives/CountingNumber';
-import { Switch, SwitchThumb } from '@/react-ui/ui/Switch';
-
-import { dataCardVariants, dataCardStyles, bracketVariants } from './DataCard.styles';
-import type { SlotOverrides } from '@/core/types';
-import type {
-  IDataCardProps,
-  IDataCardValueProps,
-  IDataCardLabelProps,
-  IDataCardToggleProps,
-  IDataCardActionsProps,
-  IDataCardBracketProps,
-  IDataCardState,
-  IDataCardConfig,
-  DataCardSlot,
-} from './DataCard.types';
-
-// ---------------------------------------------------------------------------
-// Context
-// ---------------------------------------------------------------------------
-
-type DataCardContextType = {
-  variant: IDataCardProps['variant'];
-  size: IDataCardProps['size'];
-  disabled: boolean;
-  glass: boolean;
-  config?: IDataCardConfig;
-  slots?: SlotOverrides<DataCardSlot>;
-};
-
-const [DataCardProvider, useDataCard] =
-  getStrictContext<DataCardContextType>('DataCardContext');
-
-// ---------------------------------------------------------------------------
-// DataCard (Root)
-// ---------------------------------------------------------------------------
-
-/**
- * Root card container with glassmorphism, corner brackets, and state tracking.
- *
- * @param props - {@link IDataCardProps}
- * @returns A motion.div card with context provider
- */
-function DataCard({
-  variant = 'default',
-  size = 'default',
-  disabled = false,
-  glass = true,
-  showBrackets = true,
-  className,
-  style,
-  slots,
-  config,
-  children,
-}: IDataCardProps) {
-  const [state, setState] = React.useState<IDataCardState>({
-    hovered: false,
-    pressed: false,
-    disabled,
-  });
-
-  const contextValue: DataCardContextType = React.useMemo(
-    () => ({ variant, size, disabled, glass, config, slots }),
-    [variant, size, disabled, glass, config, slots],
-  );
-
-  const computedClassName = typeof className === 'function' ? className(state) : className;
-  const computedStyle = typeof style === 'function' ? style(state) : style;
-
-  return (
-    <DataCardProvider value={contextValue}>
-      <motion.div
-        data-slot="data-card"
-        data-variant={variant}
-        data-size={size}
-        data-disabled={disabled || undefined}
-        aria-disabled={disabled || undefined}
-        className={cn(
-          dataCardVariants({ variant, size, glass }),
-          disabled && 'opacity-50 pointer-events-none',
-          slots?.root,
-          computedClassName,
-        )}
-        style={computedStyle}
-        onHoverStart={() => setState((p) => ({ ...p, hovered: true }))}
-        onHoverEnd={() => setState((p) => ({ ...p, hovered: false }))}
-        onTapStart={() => setState((p) => ({ ...p, pressed: true }))}
-        onTap={() => setState((p) => ({ ...p, pressed: false }))}
-        onTapCancel={() => setState((p) => ({ ...p, pressed: false }))}
-      >
-        {showBrackets && (
-          <>
-            <DataCardBracket position="tl" variant={variant === 'accent' ? 'accent' : 'default'} />
-            <DataCardBracket position="tr" variant={variant === 'accent' ? 'accent' : 'default'} />
-            <DataCardBracket position="bl" variant={variant === 'accent' ? 'accent' : 'default'} />
-            <DataCardBracket position="br" variant={variant === 'accent' ? 'accent' : 'default'} />
-          </>
-        )}
-        {children}
-      </motion.div>
-    </DataCardProvider>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// DataCardValue
-// ---------------------------------------------------------------------------
-
-/**
- * Animated number display with optional label and unit.
- *
- * @param props - {@link IDataCardValueProps}
- * @returns Animated number with CountingNumber primitive
- */
-function DataCardValue({
-  number,
-  label,
-  unit,
-  decimalPlaces = 0,
-  padStart = false,
-}: IDataCardValueProps) {
-  const { size, config, slots } = useDataCard();
-
-  const stiffness = config?.counterStiffness ?? 90;
-  const damping = config?.counterDamping ?? 10;
-
-  const sizeClass =
-    size === 'compact' ? 'text-3xl font-bold'
-    : size === 'spacious' ? 'text-5xl font-bold'
-    : 'text-4xl font-bold';
-
-  return (
-    <div data-slot="data-card-value" className={cn(dataCardStyles.value, slots?.value)}>
-      {label && (
-        <span className="text-muted-foreground text-xs uppercase tracking-wider font-mono">
-          {label}
-        </span>
-      )}
-      <CountingNumber
-        number={number}
-        decimalPlaces={decimalPlaces}
-        padStart={padStart}
-        transition={{ stiffness, damping }}
-        className={sizeClass}
-      />
-      {unit && (
-        <span className="text-muted-foreground text-lg ml-1">{unit}</span>
-      )}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// DataCardLabel
-// ---------------------------------------------------------------------------
-
-/**
- * Title + description label.
- *
- * @param props - {@link IDataCardLabelProps}
- * @returns Title and optional description text
- */
-function DataCardLabel({
-  title,
-  description,
-  className,
-  ...props
-}: IDataCardLabelProps) {
-  const { slots } = useDataCard();
-
-  return (
-    <div
-      data-slot="data-card-label"
-      className={cn(dataCardStyles.label, slots?.label, className)}
-      {...props}
-    >
-      {title && <h3 className="text-foreground font-semibold">{title}</h3>}
-      {description && <p className="text-muted-foreground text-sm">{description}</p>}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// DataCardToggle
-// ---------------------------------------------------------------------------
-
-/**
- * Switch toggle control inside a DataCard.
- *
- * @param props - {@link IDataCardToggleProps}
- * @returns Label + Switch toggle
- */
-function DataCardToggle({
-  checked,
-  onCheckedChange,
-  label,
-}: IDataCardToggleProps) {
-  const { disabled, slots } = useDataCard();
-
-  return (
-    <div data-slot="data-card-toggle" className={cn(dataCardStyles.toggle, slots?.toggle)}>
-      {label && <span className="text-sm text-muted-foreground">{label}</span>}
-      <Switch
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        disabled={disabled}
-        nativeButton
-      >
-        <SwitchThumb />
-      </Switch>
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// DataCardActions
-// ---------------------------------------------------------------------------
-
-/**
- * Action button container.
- *
- * @param props - {@link IDataCardActionsProps}
- * @returns Flex container for action buttons
- */
-function DataCardActions({
-  align = 'end',
-  className,
-  children,
-  ...props
-}: IDataCardActionsProps) {
-  const { slots } = useDataCard();
-
-  return (
-    <div
-      data-slot="data-card-actions"
-      data-align={align}
-      className={cn(
-        dataCardStyles.actions,
-        align === 'center' && 'justify-center',
-        align === 'start' && 'justify-start',
-        align === 'end' && 'justify-end',
-        slots?.actions,
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// DataCardBracket
-// ---------------------------------------------------------------------------
-
-/**
- * Decorative corner bracket. Rendered directly via CornerBracket
- * (no wrapper div — the SVG positions itself via absolute positioning).
- *
- * @param props - {@link IDataCardBracketProps}
- * @returns CornerBracket SVG at the specified corner
- */
-function DataCardBracket({
-  position,
-  variant = 'default',
-}: IDataCardBracketProps) {
-  const { size, config } = useDataCard();
-  const animate = config?.animateBrackets ?? true;
-
-  const sizeMap = { compact: 16, default: 20, spacious: 24 } as const;
-
-  return (
-    <CornerBracket
-      position={position}
-      variant={variant}
-      size={sizeMap[size ?? 'default']}
-      className={cn(
-        animate && 'opacity-60 group-hover/data-card:opacity-100 transition-opacity',
-        !animate && 'opacity-50',
-      )}
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Exports
-// ---------------------------------------------------------------------------
-
-export { useDataCard };
-
-export {
-  DataCard,
-  DataCardValue,
-  DataCardLabel,
-  DataCardToggle,
-  DataCardActions,
-  DataCardBracket,
-  dataCardVariants,
-};
-
-export type {
-  IDataCardProps,
-  IDataCardValueProps,
-  IDataCardLabelProps,
-  IDataCardToggleProps,
-  IDataCardActionsProps,
-  IDataCardBracketProps,
-  IDataCardState,
-  IDataCardConfig,
-  DataCardVariant,
-  DataCardSize,
-  DataCardSlot,
-} from './DataCard.types';
-
-export { dataCardStyles } from './DataCard.styles';