@camtomlabs/malix-design-system 0.1.2 → 0.1.3

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@camtomlabs/malix-design-system",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Malix Design System combined package with components, tokens, and bundled styles.",
   "type": "module",
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "sideEffects": [
     "./src/styles.css",
     "./src/tokens.css"
   ],
   "files": [
-    "src"
+    "dist",
+    "src/styles.css",
+    "src/tokens.css",
+    "src/tokens.registry.json"
   ],
   "repository": {
     "type": "git",
@@ -28,9 +32,13 @@
     "components",
     "tokens"
   ],
-  "license": "UNLICENSED",
+  "license": "MIT",
   "exports": {
-    ".": "./src/index.ts",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
     "./styles.css": "./src/styles.css",
     "./tokens.css": "./src/tokens.css",
     "./tokens.registry.json": "./src/tokens.registry.json"
@@ -43,7 +51,12 @@
     "access": "public"
   },
   "scripts": {
-    "lint": "eslint src",
-    "build": "node -e \"console.log('malix build: source package ready')\""
+    "build": "tsup",
+    "lint": "eslint src"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsup": "^8.5.1"
   }
 }

package/src/components/Accordion.tsx

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

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

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

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

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

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

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

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

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

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

@@ -1,75 +0,0 @@
-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>
-  );
-}

package/src/components/DateInput.tsx

@@ -1,57 +0,0 @@
-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>
-  );
-}