@mks2508/mks-ui 0.2.0 → 0.3.1

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

@@ -0,0 +1,331 @@
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+
+import { cn } from '@/react-ui/lib/utils';
+import { Button } from '@/react-ui/ui/Button';
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from '@/react-ui/ui/InputGroup';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { ArrowDown01Icon, Cancel01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import { comboboxStyles } from './Combobox.styles';
+import type {
+  IComboboxTriggerProps,
+  IComboboxClearProps,
+  IComboboxInputProps,
+  IComboboxContentProps,
+  IComboboxListProps,
+  IComboboxItemProps,
+  IComboboxGroupProps,
+  IComboboxLabelProps,
+  IComboboxCollectionProps,
+  IComboboxEmptyProps,
+  IComboboxSeparatorProps,
+  IComboboxChipsProps,
+  IComboboxChipProps,
+  IComboboxChipsInputProps,
+  IComboboxValueProps,
+} from './Combobox.types';
+
+/** Combobox — root component wrapping Base UI Combobox. */
+const Combobox = ComboboxPrimitive.Root;
+
+/** ComboboxValue — displays the selected value. */
+function ComboboxValue({ ...props }: IComboboxValueProps) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+
+/** ComboboxTrigger — trigger button with arrow icon. */
+function ComboboxTrigger({ className, children, ...props }: IComboboxTriggerProps) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn(comboboxStyles.trigger, className)}
+      {...props}
+    >
+      {children}
+      <HugeiconsIcon
+        icon={ArrowDown01Icon}
+        strokeWidth={2}
+        className="text-muted-foreground size-4 pointer-events-none"
+      />
+    </ComboboxPrimitive.Trigger>
+  );
+}
+
+/** ComboboxClear — clears the combobox selection. */
+function ComboboxClear({ className, ...props }: IComboboxClearProps) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  );
+}
+
+/**
+ * ComboboxInput — text input with optional trigger and clear buttons.
+ *
+ * @param showTrigger - Show dropdown arrow button
+ * @param showClear - Show clear button
+ *
+ * @example
+ * ```tsx
+ * <Combobox>
+ *   <ComboboxInput showClear placeholder="Search..." />
+ *   <ComboboxContent>
+ *     <ComboboxList>
+ *       <ComboboxItem>Option 1</ComboboxItem>
+ *     </ComboboxList>
+ *   </ComboboxContent>
+ * </Combobox>
+ * ```
+ */
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: IComboboxInputProps) {
+  return (
+    <InputGroup className={cn('w-auto', className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  );
+}
+
+/** ComboboxContent — popup content area for the combobox. */
+function ComboboxContent({
+  className,
+  side = 'bottom',
+  sideOffset = 6,
+  align = 'start',
+  alignOffset = 0,
+  anchor,
+  slots,
+  ...props
+}: IComboboxContentProps) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(comboboxStyles.content, slots?.content, className)}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+
+/** ComboboxList — scrollable list of combobox items. */
+function ComboboxList({ className, ...props }: IComboboxListProps) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(comboboxStyles.list, className)}
+      {...props}
+    />
+  );
+}
+
+/** ComboboxItem — a single selectable item with check indicator. */
+function ComboboxItem({ className, children, ...props }: IComboboxItemProps) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(comboboxStyles.item, className)}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.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" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+
+/** ComboboxGroup — groups related combobox items. */
+function ComboboxGroup({ className, ...props }: IComboboxGroupProps) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+/** ComboboxLabel — label for a group of combobox items. */
+function ComboboxLabel({ className, ...props }: IComboboxLabelProps) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn(comboboxStyles.label, className)}
+      {...props}
+    />
+  );
+}
+
+/** ComboboxCollection — collection for combobox items. */
+function ComboboxCollection({ ...props }: IComboboxCollectionProps) {
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
+}
+
+/** ComboboxEmpty — displayed when no items match the query. */
+function ComboboxEmpty({ className, ...props }: IComboboxEmptyProps) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(comboboxStyles.empty, className)}
+      {...props}
+    />
+  );
+}
+
+/** ComboboxSeparator — visual divider between combobox items. */
+function ComboboxSeparator({ className, ...props }: IComboboxSeparatorProps) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn(comboboxStyles.separator, className)}
+      {...props}
+    />
+  );
+}
+
+/** ComboboxChips — container for multi-select chips. */
+function ComboboxChips({ className, ...props }: IComboboxChipsProps) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(comboboxStyles.chips, className)}
+      {...props}
+    />
+  );
+}
+
+/** ComboboxChip — individual chip with optional remove button. */
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: IComboboxChipProps) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(comboboxStyles.chip, className)}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="sm" className="h-5 w-5 p-0" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+}
+
+/** ComboboxChipsInput — input within the chips container for multi-select. */
+function ComboboxChipsInput({ className, ...props }: IComboboxChipsInputProps) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn(comboboxStyles.chipInput, className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Hook to create an anchor ref for the combobox chips.
+ *
+ * @returns A ref to be used as the anchor for ComboboxContent
+ */
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null);
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+};
+
+export type {
+  IComboboxProps,
+  IComboboxValueProps,
+  IComboboxTriggerProps,
+  IComboboxClearProps,
+  IComboboxInputProps,
+  IComboboxContentProps,
+  IComboboxListProps,
+  IComboboxItemProps,
+  IComboboxGroupProps,
+  IComboboxLabelProps,
+  IComboboxCollectionProps,
+  IComboboxEmptyProps,
+  IComboboxSeparatorProps,
+  IComboboxChipsProps,
+  IComboboxChipProps,
+  IComboboxChipsInputProps,
+} from './Combobox.types';
+
+export type { ComboboxSlot } from './Combobox.styles';

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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,150 @@
+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.
+ */
+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
+
+/**
+ * Base style slots for: DataCard.
+ * Uses glassmorphism pattern from: Synthwave Dark design system.
+ */
+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',
+
+  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.
+ */
+export const dataCardVariants = cva(dataCardStyles.root, {
+  variants: {
+    // Size variants - control padding and spacing
+    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',
+      },
+    },
+
+    // Visual variants - control 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(' '),
+    },
+
+    // Glass effect toggle
+    glass: {
+      true: [
+        'backdrop-blur-lg',
+        'bg-white/10',
+        'border border-white/20',
+        'shadow-xl',
+      ].join(' '),
+      false: '',
+    },
+  },
+
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+    glass: true,
+  },
+});
+
+/**
+ * CVA variants for bracket visibility animation.
+ */
+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,
+  },
+});
+
+/**
+ * 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

@@ -0,0 +1,146 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { SlotOverrides } 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
+ */
+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
+ */
+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. */
+  hovered: boolean;
+  /** Whether card is pressed/active. */
+  pressed: boolean;
+  /** Whether card is disabled. */
+  disabled: boolean;
+}
+
+/**
+ * Configuration for DataCard behavior and animation.
+ * Extends IBaseConfig with card-specific settings.
+ */
+export interface IDataCardConfig {
+  /** Enable/disable corner bracket animations. */
+  animateBrackets?: boolean;
+  /** Spring stiffness for number counter. */
+  counterStiffness?: number;
+  /** Spring damping for number counter. */
+  counterDamping?: number;
+}
+
+/**
+ * Props for DataCard root component.
+ *
+ * @example
+ * ```tsx
+ * <DataCard variant="accent" size="default">
+ *   <DataCardValue number={1234} />
+ *   <DataCardToggle />
+ * </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 for card visual regions. */
+  slots?: SlotOverrides<DataCardSlot>;
+  /** Behavioral and animation configuration. */
+  config?: IDataCardConfig;
+  /** CSS class or function returning class based on card state. */
+  className?: string | ((state: IDataCardState) => string | undefined);
+  /** CSS styles or function returning styles based on card state. */
+  style?: React.CSSProperties | ((state: IDataCardState) => React.CSSProperties | undefined);
+  /** Enable glassmorphism effect (default: true). */
+  glass?: boolean;
+  /** Show corner brackets (default: true). */
+  showBrackets?: boolean;
+  /** Child elements. */
+  children?: React.ReactNode;
+}
+
+/**
+ * Props for DataCardValue - displays animated number.
+ */
+export interface IDataCardValueProps {
+  /** Target number to animate to. */
+  number: number;
+  /** Label displayed above: number. */
+  label?: string;
+  /** Unit/suffix displayed after: number. */
+  unit?: string;
+  /** Decimal places for precision. */
+  decimalPlaces?: number;
+  /** Pad number with leading zeros. */
+  padStart?: boolean;
+}
+
+/**
+ * Props for DataCardLabel - title/description text.
+ */
+export interface IDataCardLabelProps extends React.ComponentProps<'div'> {
+  /** Primary title text. */
+  title?: string;
+  /** Secondary description text. */
+  description?: string;
+}
+
+/**
+ * Props for DataCardToggle - interactive switch element.
+ */
+export interface IDataCardToggleProps {
+  /** Whether toggle is checked. */
+  checked?: boolean;
+  /** Callback when toggle state 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?: string;
+  /** Override classes for toggle regions. */
+  slots?: SlotOverrides<DataCardSlot>;
+}
+
+/**
+ * Props for DataCardActions - action button container.
+ */
+export interface IDataCardActionsProps extends React.ComponentProps<'div'> {
+  /** Alignment of action buttons. */
+  align?: 'start' | 'center' | 'end';
+}
+
+/**
+ * Props for DataCardBracket - decorative corner element.
+ */
+export interface IDataCardBracketProps extends React.ComponentProps<'div'> {
+  /** Position of: bracket. */
+  position: 'tl' | 'tr' | 'bl' | 'br';
+  /** Optional variant override for: this bracket. */
+  variant?: 'default' | 'accent';
+}
+