@camtomlabs/malix-design-system 0.1.2

package/src/components/DateInput.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+export type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
+  value?: string;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+};
+
+export function DateInput({
+  value,
+  placeholder = 'dd/mm/yyyy',
+  onChange,
+  disabled,
+  className,
+  id,
+  ...props
+}: DateInputProps) {
+  const inputId = id || `date-input-${React.useId()}`;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e.target.value);
+  };
+
+  return (
+    <div
+      className={`malix-date-input${className ? ` ${className}` : ''}`}
+      data-filled={value ? true : undefined}
+      data-disabled={disabled || undefined}
+    >
+      <input
+        id={inputId}
+        type="date"
+        className="malix-date-input__native"
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+        aria-label={placeholder}
+        {...props}
+      />
+      <span className="malix-date-input__value">
+        {value || placeholder}
+      </span>
+      <span className="malix-date-input__icon" aria-hidden="true">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M12.667 2.667H3.333C2.597 2.667 2 3.264 2 4v9.333c0 .737.597 1.334 1.333 1.334h9.334c.736 0 1.333-.597 1.333-1.334V4c0-.736-.597-1.333-1.333-1.333ZM10.667 1.333V4M5.333 1.333V4M2 6.667h12"
+            stroke="currentColor"
+            strokeWidth="1.33"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </span>
+    </div>
+  );
+}

package/src/components/Divider.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export type DividerProps = React.HTMLAttributes<HTMLHRElement>;
+
+export function Divider({ className, ...props }: DividerProps) {
+  return (
+    <hr
+      className={`malix-divider${className ? ` ${className}` : ''}`}
+      {...props}
+    />
+  );
+}

package/src/components/Dropzone.tsx

@@ -0,0 +1,94 @@
+import React, { useRef, useState } from 'react';
+
+export type DropzoneProps = React.HTMLAttributes<HTMLDivElement> & {
+  onDrop?: (files: File[]) => void;
+  accept?: string;
+  title?: string;
+  hint?: string;
+  disabled?: boolean;
+};
+
+export function Dropzone({
+  onDrop,
+  accept,
+  title = 'Drop files here',
+  hint = 'or click to browse',
+  disabled = false,
+  className,
+  ...props
+}: DropzoneProps) {
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  function handleDragOver(event: React.DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    if (!disabled) setDragging(true);
+  }
+
+  function handleDragLeave(event: React.DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    setDragging(false);
+  }
+
+  function handleDrop(event: React.DragEvent<HTMLDivElement>) {
+    event.preventDefault();
+    setDragging(false);
+    if (disabled) return;
+    const files = Array.from(event.dataTransfer.files);
+    onDrop?.(files);
+  }
+
+  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const files = event.target.files ? Array.from(event.target.files) : [];
+    if (files.length > 0) onDrop?.(files);
+    event.target.value = '';
+  }
+
+  function handleClick() {
+    if (!disabled) inputRef.current?.click();
+  }
+
+  return (
+    <div
+      className={`malix-dropzone${className ? ` ${className}` : ''}`}
+      data-dragging={dragging}
+      data-disabled={disabled}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      onClick={handleClick}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
+      {...props}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        onChange={handleInputChange}
+        hidden
+        aria-hidden="true"
+      />
+      <svg
+        className="malix-dropzone__icon"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" />
+        <path d="M12 12v9" />
+        <path d="m16 16-4-4-4 4" />
+      </svg>
+      <span className="malix-dropzone__title">{title}</span>
+      <span className="malix-dropzone__hint">{hint}</span>
+      <span className="malix-dropzone__browse-btn">Browse files</span>
+    </div>
+  );
+}

package/src/components/EmptyState.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+};
+
+const DefaultIcon = () => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3 7V5C3 3.895 3.895 3 5 3H9L11 5H19C20.105 5 21 5.895 21 7V9"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <rect
+      x="2"
+      y="9"
+      width="20"
+      height="12"
+      rx="2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9 15H15"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      className={`malix-empty-state${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <div className="malix-empty-state__icon-wrap">
+        {icon ?? <DefaultIcon />}
+      </div>
+      <h3 className="malix-empty-state__title">{title}</h3>
+      {description ? (
+        <p className="malix-empty-state__description">{description}</p>
+      ) : null}
+      {action ? (
+        <div className="malix-empty-state__action">{action}</div>
+      ) : null}
+    </div>
+  );
+}

package/src/components/FileCard.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+export type FileCardProps = React.HTMLAttributes<HTMLDivElement> & {
+  fileName: string;
+  meta?: string;
+  icon?: React.ReactNode;
+  onAction?: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+const DefaultFileIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+    <polyline points="14 2 14 8 20 8" />
+    <line x1="16" y1="13" x2="8" y2="13" />
+    <line x1="16" y1="17" x2="8" y2="17" />
+    <polyline points="10 9 9 9 8 9" />
+  </svg>
+);
+
+const MoreVerticalIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <circle cx="12" cy="5" r="1.5" />
+    <circle cx="12" cy="12" r="1.5" />
+    <circle cx="12" cy="19" r="1.5" />
+  </svg>
+);
+
+export function FileCard({
+  fileName,
+  meta,
+  icon,
+  onAction,
+  className,
+  ...props
+}: FileCardProps) {
+  return (
+    <div
+      className={`malix-file-card${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <div className="malix-file-card__icon-wrap">
+        <span className="malix-file-card__icon">
+          {icon ?? <DefaultFileIcon />}
+        </span>
+      </div>
+      <div className="malix-file-card__info">
+        <span className="malix-file-card__name">{fileName}</span>
+        {meta ? (
+          <span className="malix-file-card__meta">{meta}</span>
+        ) : null}
+      </div>
+      {onAction ? (
+        <button
+          type="button"
+          className="malix-file-card__action"
+          onClick={onAction}
+          aria-label="More actions"
+        >
+          <MoreVerticalIcon />
+        </button>
+      ) : null}
+    </div>
+  );
+}

package/src/components/FilterTabs.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+export type FilterTabItem = {
+  label: string;
+  count?: number;
+  value: string;
+};
+
+export type FilterTabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  items: FilterTabItem[];
+  value: string;
+  onChange: (value: string) => void;
+};
+
+export function FilterTabs({
+  items,
+  value,
+  onChange,
+  className,
+  ...props
+}: FilterTabsProps) {
+  return (
+    <div
+      className={`malix-filter-tabs${className ? ` ${className}` : ''}`}
+      role="tablist"
+      {...props}
+    >
+      {items.map((item) => {
+        const isActive = item.value === value;
+        return (
+          <button
+            key={item.value}
+            type="button"
+            role="tab"
+            className="malix-filter-tabs__tab"
+            data-active={isActive || undefined}
+            aria-selected={isActive}
+            onClick={() => onChange(item.value)}
+          >
+            <span className="malix-filter-tabs__tab-label">{item.label}</span>
+            {item.count != null ? (
+              <span className="malix-filter-tabs__tab-count">{item.count}</span>
+            ) : null}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/FlyoutMenu.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export type FlyoutMenuItem = {
+  icon?: React.ReactNode;
+  label: string;
+  active?: boolean;
+  onClick?: () => void;
+};
+
+export type FlyoutMenuProps = React.HTMLAttributes<HTMLDivElement> & {
+  items: FlyoutMenuItem[];
+};
+
+export function FlyoutMenu({ items, className, ...props }: FlyoutMenuProps) {
+  return (
+    <nav
+      className={`malix-flyout-menu${className ? ` ${className}` : ''}`}
+      role="menu"
+      {...props}
+    >
+      {items.map((item, i) => (
+        <button
+          key={i}
+          type="button"
+          className="malix-flyout-menu__item"
+          data-active={item.active || undefined}
+          role="menuitem"
+          onClick={item.onClick}
+        >
+          {item.icon ? <span className="malix-flyout-menu__icon">{item.icon}</span> : null}
+          <span className="malix-flyout-menu__label">{item.label}</span>
+        </button>
+      ))}
+    </nav>
+  );
+}

package/src/components/GlassPopover.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+export type GlassPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
+  title?: string;
+  onClose?: () => void;
+};
+
+export function GlassPopover({
+  title,
+  onClose,
+  children,
+  className,
+  ...props
+}: GlassPopoverProps) {
+  return (
+    <div
+      className={`malix-glass-popover${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      {(title || onClose) ? (
+        <div className="malix-glass-popover__header">
+          {title ? <span className="malix-glass-popover__title">{title}</span> : null}
+          {onClose ? (
+            <button
+              type="button"
+              className="malix-glass-popover__close"
+              onClick={onClose}
+              aria-label="Close"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+      <div className="malix-glass-popover__body">{children}</div>
+    </div>
+  );
+}

package/src/components/Header.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export type HeaderProps = React.HTMLAttributes<HTMLElement> & {
+  pageTitle: string;
+  actions?: React.ReactNode;
+};
+
+export function Header({ pageTitle, actions, className, ...props }: HeaderProps) {
+  return (
+    <header
+      className={`malix-header${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <div className="malix-header__left">
+        <h1 className="malix-header__title">{pageTitle}</h1>
+      </div>
+      {actions ? (
+        <div className="malix-header__right">{actions}</div>
+      ) : null}
+    </header>
+  );
+}

package/src/components/Input.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  leadingIcon?: React.ReactNode;
+};
+
+export function Input({ leadingIcon, ...props }: InputProps) {
+  return (
+    <label className="malix-input-wrap">
+      {leadingIcon ? <span className="malix-button__icon">{leadingIcon}</span> : null}
+      <input className="malix-input" {...props} />
+    </label>
+  );
+}
+
+export function SearchInput(props: Omit<InputProps, 'type'>) {
+  return <Input type="search" placeholder="Search" {...props} />;
+}

package/src/components/InputGroup.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export type InputGroupProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+  helperText?: string;
+  leadingIcon?: React.ReactNode;
+  error?: boolean;
+};
+
+export function InputGroup({
+  label,
+  helperText,
+  leadingIcon,
+  error,
+  id,
+  className,
+  ...props
+}: InputGroupProps) {
+  const inputId = id || `input-${React.useId()}`;
+
+  return (
+    <div className={`malix-input-group${className ? ` ${className}` : ''}`} data-error={error || undefined}>
+      {label ? (
+        <label htmlFor={inputId} className="malix-input-group__label">
+          {label}
+        </label>
+      ) : null}
+      <div className="malix-input-group__field">
+        {leadingIcon ? <span className="malix-input-group__icon">{leadingIcon}</span> : null}
+        <input id={inputId} className="malix-input" {...props} />
+      </div>
+      {helperText ? (
+        <span className="malix-input-group__helper">{helperText}</span>
+      ) : null}
+    </div>
+  );
+}

package/src/components/LanguageSelector.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+export type LanguageSelectorOption = {
+  value: string;
+  label: string;
+};
+
+export type LanguageSelectorProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+  value: string;
+  options?: LanguageSelectorOption[];
+  onChange?: (value: string) => void;
+};
+
+export function LanguageSelector({
+  value,
+  options,
+  onChange,
+  className,
+  ...props
+}: LanguageSelectorProps) {
+  const selectedOption = options?.find((opt) => opt.value === value);
+  const displayLabel = selectedOption?.label ?? value;
+
+  return (
+    <div
+      className={`malix-language-selector${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <span className="malix-language-selector__icon" aria-hidden="true">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="2" y1="12" x2="22" y2="12" />
+          <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z" />
+        </svg>
+      </span>
+
+      <select
+        className="malix-language-selector__select"
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        aria-label="Select language"
+      >
+        {options ? (
+          options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))
+        ) : (
+          <option value={value}>{displayLabel}</option>
+        )}
+      </select>
+
+      <span className="malix-language-selector__label">{displayLabel}</span>
+
+      <span className="malix-language-selector__chevron" aria-hidden="true">
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </span>
+    </div>
+  );
+}