@camtomlabs/malix-design-system 0.1.2

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright (c) 2026 Carlos Garcia
+
+All rights reserved.
+
+This package is provided without a public-use license.
+You may not copy, modify, distribute, sublicense, or use this work except with explicit written
+permission from the copyright holder.

package/README.md

@@ -0,0 +1,38 @@
+# @camtomlabs/malix-design-system
+
+Malix Design System combined package.
+
+## Install
+
+```bash
+npm install @camtomlabs/malix-design-system
+```
+
+## Usage
+
+Import the bundled styles once:
+
+```ts
+import '@camtomlabs/malix-design-system/styles.css';
+```
+
+Import components from the combined entrypoint:
+
+```tsx
+import { Button, Input, Card } from '@camtomlabs/malix-design-system';
+```
+
+You can also read the token registry:
+
+```ts
+import { tokenRegistry } from '@camtomlabs/malix-design-system';
+```
+
+## Note
+
+This package publishes raw TypeScript source. Configure your bundler to transpile the package in
+frameworks like Next.js.
+
+## License
+
+`UNLICENSED`

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@camtomlabs/malix-design-system",
+  "version": "0.1.2",
+  "description": "Malix Design System combined package with components, tokens, and bundled styles.",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "sideEffects": [
+    "./src/styles.css",
+    "./src/tokens.css"
+  ],
+  "files": [
+    "src"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/carloscamtom/malix-design-system.git",
+    "directory": "packages/malix"
+  },
+  "homepage": "https://github.com/carloscamtom/malix-design-system#readme",
+  "bugs": {
+    "url": "https://github.com/carloscamtom/malix-design-system/issues"
+  },
+  "keywords": [
+    "malix",
+    "design-system",
+    "react",
+    "components",
+    "tokens"
+  ],
+  "license": "UNLICENSED",
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles.css",
+    "./tokens.css": "./src/tokens.css",
+    "./tokens.registry.json": "./src/tokens.registry.json"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint src",
+    "build": "node -e \"console.log('malix build: source package ready')\""
+  }
+}

package/src/components/Accordion.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+export type AccordionProps = React.HTMLAttributes<HTMLDivElement> & {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  icon?: React.ReactNode;
+};
+
+export function Accordion({
+  title,
+  children,
+  defaultOpen = false,
+  icon,
+  className,
+  ...props
+}: AccordionProps) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div
+      className={`malix-accordion${className ? ` ${className}` : ''}`}
+      data-open={open}
+      {...props}
+    >
+      <button
+        type="button"
+        className="malix-accordion__header"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+      >
+        {icon ? <span className="malix-accordion__icon">{icon}</span> : null}
+        <span className="malix-accordion__title">{title}</span>
+        <svg
+          className="malix-accordion__chevron"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+      <div className="malix-accordion__body">{children}</div>
+    </div>
+  );
+}

package/src/components/Avatar.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+  initials: string;
+  size?: number;
+};
+
+export function Avatar({ initials, size = 40, className, style, ...props }: AvatarProps) {
+  return (
+    <span
+      className={`malix-avatar${className ? ` ${className}` : ''}`}
+      style={{ width: size, height: size, borderRadius: size * 0.35, ...style }}
+      {...props}
+    >
+      <span className="malix-avatar__text">{initials}</span>
+    </span>
+  );
+}

package/src/components/Badge.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
+
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+  variant?: BadgeVariant;
+  dot?: boolean;
+};
+
+export function Badge({
+  variant = 'default',
+  dot = false,
+  children,
+  className,
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      className={`malix-badge${className ? ` ${className}` : ''}`}
+      data-variant={variant}
+      {...props}
+    >
+      {dot ? <span className="malix-badge__dot" /> : null}
+      <span className="malix-badge__label">{children}</span>
+    </span>
+  );
+}

package/src/components/Banner.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+export type BannerVariant = 'info' | 'success' | 'warning' | 'error';
+
+export type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+  variant?: BannerVariant;
+  onClose?: () => void;
+  icon?: React.ReactNode;
+};
+
+const defaultIcons: Record<BannerVariant, React.ReactNode> = {
+  info: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  ),
+  success: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  ),
+  warning: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  ),
+  error: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+  ),
+};
+
+export function Banner({
+  variant = 'info',
+  onClose,
+  icon,
+  children,
+  className,
+  ...props
+}: BannerProps) {
+  return (
+    <div
+      className={`malix-banner${className ? ` ${className}` : ''}`}
+      data-variant={variant}
+      role="alert"
+      {...props}
+    >
+      <span className="malix-banner__icon">
+        {icon ?? defaultIcons[variant]}
+      </span>
+      <span className="malix-banner__content">{children}</span>
+      {onClose ? (
+        <button
+          type="button"
+          className="malix-banner__close"
+          onClick={onClose}
+          aria-label="Dismiss"
+        >
+          <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>
+  );
+}

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+export type BreadcrumbItem = {
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+  active?: boolean;
+};
+
+export type BreadcrumbProps = React.HTMLAttributes<HTMLElement> & {
+  items: BreadcrumbItem[];
+  separator?: React.ReactNode;
+};
+
+const DefaultSeparator = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 3L11 8L6 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export function Breadcrumb({ items, separator, className, ...props }: BreadcrumbProps) {
+  return (
+    <nav
+      className={`malix-breadcrumb${className ? ` ${className}` : ''}`}
+      aria-label="Breadcrumb"
+      {...props}
+    >
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        const isActive = item.active ?? isLast;
+
+        return (
+          <React.Fragment key={index}>
+            <span className="malix-breadcrumb__item" data-active={isActive || undefined}>
+              {item.icon ? (
+                <span className="malix-breadcrumb__icon">{item.icon}</span>
+              ) : null}
+              {isActive || !item.href ? (
+                <span className="malix-breadcrumb__label" aria-current={isActive ? 'page' : undefined}>
+                  {item.label}
+                </span>
+              ) : (
+                <a className="malix-breadcrumb__label" href={item.href}>
+                  {item.label}
+                </a>
+              )}
+            </span>
+            {!isLast ? (
+              <span className="malix-breadcrumb__separator" aria-hidden="true">
+                {separator ?? <DefaultSeparator />}
+              </span>
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+    </nav>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export type ButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export type ButtonVariant = 'text' | 'leading-icon-text' | 'icon-only' | 'icon-badge';
+
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  hierarchy?: ButtonHierarchy;
+  variant?: ButtonVariant;
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+  loading?: boolean;
+  label?: string;
+};
+
+export function Button({
+  hierarchy = 'primary',
+  variant = 'text',
+  icon,
+  badge,
+  loading = false,
+  disabled,
+  children,
+  label,
+  ...props
+}: ButtonProps) {
+  const isDisabled = disabled || loading;
+  const isIconOnly = variant === 'icon-only';
+
+  return (
+    <button
+      type="button"
+      className="malix-button"
+      data-hierarchy={hierarchy}
+      data-variant={variant}
+      data-loading={loading}
+      disabled={isDisabled}
+      aria-busy={loading || undefined}
+      aria-label={isIconOnly ? label : props['aria-label']}
+      {...props}
+    >
+      {icon ? <span className="malix-button__icon">{icon}</span> : null}
+      {!isIconOnly ? <span>{loading ? 'Loading...' : children}</span> : null}
+      {variant === 'icon-badge' && badge ? <span className="malix-button__badge">{badge}</span> : null}
+      {isIconOnly && !icon ? <span>{loading ? '...' : label}</span> : null}
+    </button>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export type CardLevel = 1 | 2 | 3;
+
+export type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+  level?: CardLevel;
+  title?: string;
+  description?: string;
+};
+
+export function Card({
+  level = 1,
+  title,
+  description,
+  children,
+  className,
+  ...props
+}: CardProps) {
+  return (
+    <div
+      className={`malix-card${className ? ` ${className}` : ''}`}
+      data-level={level}
+      {...props}
+    >
+      {(title || description) ? (
+        <div className="malix-card__header">
+          {title ? <h3 className="malix-card__title">{title}</h3> : null}
+          {description ? <p className="malix-card__desc">{description}</p> : null}
+        </div>
+      ) : null}
+      {children ? <div className="malix-card__body">{children}</div> : null}
+    </div>
+  );
+}

package/src/components/ChatInput.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+
+export type ChatInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onSend: () => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function ChatInput({
+  value,
+  onChange,
+  onSend,
+  placeholder = 'Type a message...',
+  disabled,
+  className,
+}: ChatInputProps) {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey && value.trim()) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+
+  return (
+    <div className={`malix-chat-input${className ? ` ${className}` : ''}`}>
+      <input
+        type="text"
+        className="malix-chat-input__field"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder={placeholder}
+        disabled={disabled}
+        aria-label={placeholder}
+      />
+      <button
+        type="button"
+        className="malix-chat-input__send-btn"
+        onClick={onSend}
+        disabled={disabled || !value.trim()}
+        aria-label="Send message"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 19V5" />
+          <path d="m5 12 7-7 7 7" />
+        </svg>
+      </button>
+    </div>
+  );
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+
+export type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: string;
+  indeterminate?: boolean;
+};
+
+export function Checkbox({
+  checked = false,
+  onChange,
+  disabled = false,
+  label,
+  indeterminate = false,
+  className,
+  ...props
+}: CheckboxProps) {
+  const handleClick = () => {
+    if (!disabled && onChange) {
+      onChange(!checked);
+    }
+  };
+
+  const checkbox = (
+    <button
+      type="button"
+      role="checkbox"
+      className={`malix-checkbox${className ? ` ${className}` : ''}`}
+      data-checked={checked}
+      data-disabled={disabled}
+      data-indeterminate={indeterminate}
+      aria-checked={indeterminate ? 'mixed' : checked}
+      disabled={disabled}
+      onClick={handleClick}
+      {...props}
+    >
+      {checked && !indeterminate ? (
+        <svg
+          className="malix-checkbox__icon"
+          viewBox="0 0 12 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            d="M2 6l3 3 5-5"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      ) : null}
+      {indeterminate ? (
+        <svg
+          className="malix-checkbox__icon"
+          viewBox="0 0 12 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            d="M2 6h8"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          />
+        </svg>
+      ) : null}
+    </button>
+  );
+
+  if (label) {
+    return (
+      <label className="malix-checkbox-row">
+        {checkbox}
+        <span className="malix-checkbox-row__label">{label}</span>
+      </label>
+    );
+  }
+
+  return checkbox;
+}

package/src/components/CreditsIndicator.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export type CreditsIndicatorProps = React.HTMLAttributes<HTMLDivElement> & {
+  remaining: number;
+  label?: string;
+};
+
+export function CreditsIndicator({
+  remaining,
+  label = 'Credits Remaining',
+  className,
+  ...props
+}: CreditsIndicatorProps) {
+  return (
+    <div
+      className={`malix-credits-indicator${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <span className="malix-credits-indicator__icon" aria-hidden="true">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <ellipse cx="12" cy="6" rx="8" ry="3" />
+          <path d="M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6" />
+          <path d="M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6" />
+        </svg>
+      </span>
+      <div className="malix-credits-indicator__info">
+        <span className="malix-credits-indicator__label">{label}</span>
+        <span className="malix-credits-indicator__value">{remaining}</span>
+      </div>
+    </div>
+  );
+}

package/src/components/DataTable.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+export type TableColumn = {
+  key: string;
+  header: string;
+  width?: string;
+  render?: (value: any, row: TableRow) => React.ReactNode;
+};
+
+export type TableRow = Record<string, any>;
+
+export type DataTableProps = React.HTMLAttributes<HTMLTableElement> & {
+  columns: TableColumn[];
+  data: TableRow[];
+  onRowClick?: (row: TableRow) => void;
+  emptyMessage?: string;
+  className?: string;
+};
+
+export function DataTable({
+  columns,
+  data,
+  onRowClick,
+  emptyMessage,
+  className,
+  ...props
+}: DataTableProps) {
+  return (
+    <table
+      className={`malix-data-table${className ? ` ${className}` : ''}`}
+      {...props}
+    >
+      <thead>
+        <tr className="malix-data-table__header-row">
+          {columns.map((col) => (
+            <th
+              key={col.key}
+              className="malix-data-table__header-cell"
+              style={col.width ? { width: col.width } : undefined}
+            >
+              {col.header}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody className="malix-data-table__body">
+        {data.length > 0 ? (
+          data.map((row, rowIndex) => (
+            <tr
+              key={rowIndex}
+              className="malix-data-table__data-row"
+              data-clickable={onRowClick ? true : undefined}
+              onClick={onRowClick ? () => onRowClick(row) : undefined}
+            >
+              {columns.map((col) => (
+                <td key={col.key} className="malix-data-table__cell">
+                  {col.render ? col.render(row[col.key], row) : row[col.key]}
+                </td>
+              ))}
+            </tr>
+          ))
+        ) : (
+          <tr className="malix-data-table__data-row">
+            <td
+              className="malix-data-table__cell"
+              colSpan={columns.length}
+            >
+              {emptyMessage || 'No data available'}
+            </td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+}