@camtomlabs/malix-design-system 0.1.2

package/src/components/Select.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+export type SelectOption = {
+  value: string;
+  label: string;
+};
+
+export type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> & {
+  placeholder?: string;
+  options?: SelectOption[];
+  onChange?: (value: string) => void;
+  filled?: boolean;
+};
+
+export function Select({
+  value,
+  placeholder,
+  options = [],
+  onChange,
+  disabled,
+  filled,
+  className,
+  ...props
+}: SelectProps) {
+  return (
+    <div
+      className={`malix-select${className ? ` ${className}` : ''}`}
+      data-filled={filled || undefined}
+      data-disabled={disabled || undefined}
+    >
+      <select
+        className="malix-select__native"
+        value={value}
+        disabled={disabled}
+        onChange={(e) => onChange?.(e.target.value)}
+        {...props}
+      >
+        {placeholder ? (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        ) : null}
+        {options.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      <span className="malix-select__icon">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path
+            d="M4 6L8 10L12 6"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </span>
+    </div>
+  );
+}

package/src/components/SelectGroup.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export type SelectGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+  label?: string;
+  helperText?: string;
+  error?: boolean;
+};
+
+export function SelectGroup({
+  label,
+  helperText,
+  error,
+  children,
+  className,
+  ...props
+}: SelectGroupProps) {
+  return (
+    <div
+      className={`malix-select-group${className ? ` ${className}` : ''}`}
+      data-error={error || undefined}
+      {...props}
+    >
+      {label ? (
+        <span className="malix-select-group__label">{label}</span>
+      ) : null}
+      {children}
+      {helperText ? (
+        <span className="malix-select-group__helper">{helperText}</span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/SelectionCard.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export type SelectionCardProps = {
+  title: string;
+  description?: string;
+  icon?: React.ReactNode;
+  active?: boolean;
+  onClick?: () => void;
+  className?: string;
+};
+
+export function SelectionCard({
+  title,
+  description,
+  icon,
+  active = false,
+  onClick,
+  className,
+}: SelectionCardProps) {
+  return (
+    <div
+      className={`malix-selection-card${className ? ` ${className}` : ''}`}
+      data-active={active || undefined}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={
+        onClick
+          ? (e: React.KeyboardEvent) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick();
+              }
+            }
+          : undefined
+      }
+    >
+      {icon ? (
+        <span className="malix-selection-card__icon-wrap">{icon}</span>
+      ) : null}
+      <span className="malix-selection-card__title">{title}</span>
+      {description ? (
+        <span className="malix-selection-card__description">{description}</span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/SidebarItem.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export type SidebarItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  icon?: React.ReactNode;
+  active?: boolean;
+};
+
+export function SidebarItem({
+  icon,
+  active = false,
+  children,
+  className,
+  ...props
+}: SidebarItemProps) {
+  return (
+    <button
+      type="button"
+      className={`malix-sidebar-item${className ? ` ${className}` : ''}`}
+      data-active={active || undefined}
+      aria-current={active ? 'page' : undefined}
+      {...props}
+    >
+      {icon ? <span className="malix-sidebar-item__icon">{icon}</span> : null}
+      <span className="malix-sidebar-item__label">{children}</span>
+    </button>
+  );
+}

package/src/components/SidebarPanel.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+
+export type SidebarPanelProps = React.HTMLAttributes<HTMLElement> & {
+  collapsed?: boolean;
+  logo?: React.ReactNode;
+  collapsedLogo?: React.ReactNode;
+  navigation?: React.ReactNode;
+  footer?: React.ReactNode;
+  onToggleCollapse?: () => void;
+};
+
+export function SidebarPanel({
+  collapsed = false,
+  logo,
+  collapsedLogo,
+  navigation,
+  footer,
+  onToggleCollapse,
+  className,
+  ...props
+}: SidebarPanelProps) {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <aside
+      className={`malix-sidebar-panel${className ? ` ${className}` : ''}`}
+      data-collapsed={collapsed || undefined}
+      onMouseEnter={collapsed ? () => setHovered(true) : undefined}
+      onMouseLeave={collapsed ? () => setHovered(false) : undefined}
+      {...props}
+    >
+      <div className="malix-sidebar-panel__top">
+        <div className="malix-sidebar-panel__brand">
+          {collapsed ? (
+            /* Collapsed: show isotype by default, toggle button on hover */
+            hovered && onToggleCollapse ? (
+              <button
+                type="button"
+                className="malix-sidebar-panel__toggle"
+                onClick={onToggleCollapse}
+                aria-label="Expand sidebar"
+              >
+                {/* panel-left-open */}
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <rect width="18" height="18" x="3" y="3" rx="2" />
+                  <path d="M9 3v18" />
+                  <path d="m14 9 3 3-3 3" />
+                </svg>
+              </button>
+            ) : (
+              <span className="malix-sidebar-panel__collapsed-logo">
+                {collapsedLogo ?? logo}
+              </span>
+            )
+          ) : (
+            /* Expanded: logo + toggle button */
+            <>
+              {logo}
+              {onToggleCollapse ? (
+                <button
+                  type="button"
+                  className="malix-sidebar-panel__toggle"
+                  onClick={onToggleCollapse}
+                  aria-label="Collapse sidebar"
+                >
+                  {/* panel-left-close */}
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <rect width="18" height="18" x="3" y="3" rx="2" />
+                    <path d="M9 3v18" />
+                    <path d="m16 15-3-3 3-3" />
+                  </svg>
+                </button>
+              ) : null}
+            </>
+          )}
+        </div>
+        <nav className="malix-sidebar-panel__nav">{navigation}</nav>
+      </div>
+      {footer ? (
+        <div className="malix-sidebar-panel__bottom">{footer}</div>
+      ) : null}
+    </aside>
+  );
+}

package/src/components/SplitPane.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+
+export type SplitPaneProps = React.HTMLAttributes<HTMLDivElement> & {
+  leftPanel: React.ReactNode;
+  rightPanel: React.ReactNode;
+  leftTitle?: string;
+  rightTitle?: string;
+  defaultSplit?: number;
+};
+
+export function SplitPane({
+  leftPanel,
+  rightPanel,
+  leftTitle,
+  rightTitle,
+  defaultSplit = 50,
+  className,
+  ...props
+}: SplitPaneProps) {
+  const [split, setSplit] = useState(defaultSplit);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const dragging = useRef(false);
+
+  const onMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    dragging.current = true;
+  }, []);
+
+  useEffect(() => {
+    function onMouseMove(e: MouseEvent) {
+      if (!dragging.current || !containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const pct = Math.min(Math.max((x / rect.width) * 100, 5), 95);
+      setSplit(pct);
+    }
+
+    function onMouseUp() {
+      dragging.current = false;
+    }
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`malix-split-pane${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <div className="malix-split-pane__left" style={{ width: `${split}%` }}>
+        {leftTitle ? (
+          <span className="malix-split-pane__panel-title">{leftTitle}</span>
+        ) : null}
+        {leftPanel}
+      </div>
+
+      <div
+        className="malix-split-pane__handle"
+        role="separator"
+        aria-valuenow={Math.round(split)}
+        aria-valuemin={5}
+        aria-valuemax={95}
+        aria-label="Resize panels"
+        onMouseDown={onMouseDown}
+      >
+        <span className="malix-split-pane__handle-dot" aria-hidden="true" />
+        <span className="malix-split-pane__handle-dot" aria-hidden="true" />
+        <span className="malix-split-pane__handle-dot" aria-hidden="true" />
+      </div>
+
+      <div className="malix-split-pane__right" style={{ width: `${100 - split}%` }}>
+        {rightTitle ? (
+          <span className="malix-split-pane__panel-title">{rightTitle}</span>
+        ) : null}
+        {rightPanel}
+      </div>
+    </div>
+  );
+}

package/src/components/StatCard.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+
+export type StatCardChangeType = 'positive' | 'negative' | 'neutral';
+
+export type StatCardProps = React.HTMLAttributes<HTMLDivElement> & {
+  label: string;
+  value: string;
+  change?: string;
+  changeType?: StatCardChangeType;
+};
+
+function ChangeIcon({ type }: { type: StatCardChangeType }) {
+  const shared = { width: 12, height: 12, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const };
+
+  switch (type) {
+    case 'positive':
+      return (
+        <svg {...shared}>
+          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+          <polyline points="16 7 22 7 22 13" />
+        </svg>
+      );
+    case 'negative':
+      return (
+        <svg {...shared}>
+          <polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />
+          <polyline points="16 17 22 17 22 11" />
+        </svg>
+      );
+    case 'neutral':
+      return (
+        <svg {...shared}>
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </svg>
+      );
+  }
+}
+
+export function StatCard({
+  label,
+  value,
+  change,
+  changeType = 'neutral',
+  className,
+  ...props
+}: StatCardProps) {
+  return (
+    <div
+      className={`malix-stat-card${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <span className="malix-stat-card__label">{label}</span>
+      <span className="malix-stat-card__value">{value}</span>
+      {change ? (
+        <span className="malix-stat-card__change" data-type={changeType}>
+          <span className="malix-stat-card__change-icon">
+            <ChangeIcon type={changeType} />
+          </span>
+          {change}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/StatusDot.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export type StatusDotVariant = 'success' | 'warning' | 'error' | 'default';
+
+export type StatusDotProps = React.HTMLAttributes<HTMLSpanElement> & {
+  variant?: StatusDotVariant;
+  label: string;
+};
+
+export function StatusDot({
+  variant = 'default',
+  label,
+  className,
+  ...props
+}: StatusDotProps) {
+  return (
+    <span
+      className={`malix-status-dot${className ? ` ${className}` : ''}`}
+      data-variant={variant}
+      {...props}
+    >
+      <span className="malix-status-dot__dot" aria-hidden="true" />
+      <span className="malix-status-dot__label">{label}</span>
+    </span>
+  );
+}

package/src/components/Stepper.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export type StepStatus = 'completed' | 'active' | 'pending';
+
+export type StepItem = {
+  label: string;
+  icon?: React.ReactNode;
+  status: StepStatus;
+};
+
+export type StepperProps = {
+  steps: StepItem[];
+  className?: string;
+};
+
+export function Stepper({ steps, className }: StepperProps) {
+  return (
+    <div className={`malix-stepper${className ? ` ${className}` : ''}`}>
+      {steps.map((step, index) => (
+        <React.Fragment key={index}>
+          <div className="malix-stepper__step" data-status={step.status}>
+            <span className="malix-stepper__step-icon">
+              {step.status === 'completed' ? (
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M11.5 3.5L5.5 10L2.5 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              ) : (
+                step.icon ?? null
+              )}
+            </span>
+            <span className="malix-stepper__step-label">{step.label}</span>
+          </div>
+          {index < steps.length - 1 ? (
+            <span className="malix-stepper__connector" />
+          ) : null}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}

package/src/components/TabBar.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+export type TabItem = {
+  label: string;
+  value: string;
+};
+
+export type TabBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  items: TabItem[];
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export function TabBar({
+  items,
+  value,
+  onChange,
+  className,
+  ...props
+}: TabBarProps) {
+  return (
+    <div
+      className={`malix-tab-bar${className ? ` ${className}` : ''}`}
+      role="tablist"
+      {...props}
+    >
+      {items.map((item) => {
+        const isActive = item.value === value;
+        return (
+          <button
+            key={item.value}
+            type="button"
+            role="tab"
+            className="malix-tab-bar__tab"
+            data-active={isActive || undefined}
+            aria-selected={isActive}
+            onClick={() => onChange(item.value)}
+          >
+            <span className="malix-tab-bar__tab-label">{item.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/Textarea.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  label?: string;
+  helperText?: string;
+  error?: boolean;
+  errorMessage?: string;
+};
+
+export function Textarea({
+  label,
+  helperText,
+  error,
+  errorMessage,
+  id,
+  className,
+  ...props
+}: TextareaProps) {
+  const textareaId = id || `textarea-${React.useId()}`;
+  const displayHelper = error && errorMessage ? errorMessage : helperText;
+
+  return (
+    <div
+      className={`malix-textarea-group${className ? ` ${className}` : ''}`}
+      data-error={error || undefined}
+    >
+      {label ? (
+        <label htmlFor={textareaId} className="malix-textarea-group__label">
+          {label}
+        </label>
+      ) : null}
+      <textarea
+        id={textareaId}
+        className="malix-textarea-group__field"
+        aria-invalid={error || undefined}
+        {...props}
+      />
+      {displayHelper ? (
+        <span className="malix-textarea-group__helper">{displayHelper}</span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/Toggle.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+export type ToggleProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: string;
+};
+
+export function Toggle({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  className,
+  ...props
+}: ToggleProps) {
+  const handleClick = () => {
+    if (!disabled && onChange) {
+      onChange(!checked);
+    }
+  };
+
+  const toggle = (
+    <button
+      type="button"
+      role="switch"
+      className={`malix-toggle${className ? ` ${className}` : ''}`}
+      data-checked={checked}
+      data-disabled={disabled}
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={handleClick}
+      {...props}
+    >
+      <span className="malix-toggle__knob" />
+    </button>
+  );
+
+  if (label) {
+    return (
+      <div className="malix-toggle-row">
+        <span className="malix-toggle-row__label">{label}</span>
+        {toggle}
+      </div>
+    );
+  }
+
+  return toggle;
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,33 @@
+import React, { useId, useState } from 'react';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export type TooltipProps = {
+  content: React.ReactNode;
+  children: React.ReactElement;
+  placement?: TooltipPlacement;
+};
+
+export function Tooltip({ content, children, placement = 'top' }: TooltipProps) {
+  const [open, setOpen] = useState(false);
+  const tooltipId = useId();
+
+  return (
+    <span
+      className="malix-tooltip-wrap"
+      onMouseEnter={() => setOpen(true)}
+      onMouseLeave={() => setOpen(false)}
+      onFocus={() => setOpen(true)}
+      onBlur={() => setOpen(false)}
+    >
+      {React.cloneElement(children as React.ReactElement<any>, {
+        'aria-describedby': open ? tooltipId : undefined
+      })}
+      {open ? (
+        <span role="tooltip" id={tooltipId} className="malix-tooltip" data-placement={placement}>
+          {content}
+        </span>
+      ) : null}
+    </span>
+  );
+}