@camtomlabs/malix-design-system 0.1.2 → 0.1.4

package/package.json

@@ -1,16 +1,20 @@
 {
   "name": "@camtomlabs/malix-design-system",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "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/styles.css

@@ -3235,3 +3235,189 @@ a.malix-breadcrumb__label:hover {
   height: 16px;
   flex-shrink: 0;
 }
+
+/* ═══════════════════════════════════════════════
+   CHAT BUBBLE — Pencil: gNrQK, dqzNT
+   AI: surface-secondary bg, foreground text
+   User: cta-primary bg, primary-foreground text
+   ═══════════════════════════════════════════════ */
+
+.malix-chat-bubble-row {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--malix-space-sm);
+  width: 100%;
+}
+
+.malix-chat-bubble-row[data-variant="user"] {
+  justify-content: flex-end;
+}
+
+.malix-chat-bubble {
+  padding: 10px 14px;
+  font-family: var(--malix-font-body);
+  font-size: var(--malix-text-sm);
+  font-weight: var(--malix-weight-normal);
+  line-height: 1.45;
+  max-width: 280px;
+  word-wrap: break-word;
+}
+
+.malix-chat-bubble[data-variant="ai"] {
+  background: var(--malix-surface-secondary);
+  color: var(--malix-foreground);
+  border-radius: 8px 8px 8px 2px;
+}
+
+.malix-chat-bubble[data-variant="user"] {
+  background: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-foreground);
+  border-radius: 8px 8px 2px 8px;
+}
+
+.malix-chat-bubble__avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  border-radius: 50%;
+  background: var(--malix-background-main);
+  border: 1px solid var(--malix-border);
+  font-family: var(--malix-font-body);
+  font-size: var(--malix-text-xs);
+  font-weight: var(--malix-weight-semibold);
+  color: var(--malix-foreground-secondary);
+}
+
+/* ═══════════════════════════════════════════════
+   AI ASSISTANT PANEL — Pencil: MtZxU
+   380×500 panel, border+radius-lg, vertical flex
+   ═══════════════════════════════════════════════ */
+
+.malix-ai-panel {
+  display: flex;
+  flex-direction: column;
+  width: 380px;
+  height: 500px;
+  border-radius: var(--malix-radius-lg);
+  background: var(--malix-background-main);
+  border: 1px solid var(--malix-border);
+  overflow: hidden;
+  font-family: var(--malix-font-body);
+}
+
+/* Header */
+.malix-ai-panel__header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--malix-border);
+}
+
+.malix-ai-panel__logo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  border-radius: var(--malix-radius-pill);
+  background: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-foreground);
+}
+
+.malix-ai-panel__title {
+  font-size: var(--malix-text-base);
+  font-weight: var(--malix-weight-semibold);
+  color: var(--malix-foreground);
+  flex: 1;
+}
+
+.malix-ai-panel__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--malix-foreground-secondary);
+  transition: color 120ms ease;
+}
+
+.malix-ai-panel__close:hover {
+  color: var(--malix-foreground);
+}
+
+/* Body */
+.malix-ai-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--malix-space-md);
+}
+
+/* Footer */
+.malix-ai-panel__footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--malix-border);
+}
+
+.malix-ai-panel__input-row {
+  display: flex;
+  align-items: center;
+  gap: var(--malix-space-sm);
+  padding: 10px 12px 10px 16px;
+  border-radius: var(--malix-radius-lg);
+  border: 1px solid var(--malix-border);
+  background: var(--malix-background-main);
+  transition: border-color 120ms ease;
+}
+
+.malix-ai-panel__input-row:focus-within {
+  border-color: var(--malix-border-focus);
+}
+
+.malix-ai-panel__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--malix-font-body);
+  font-size: var(--malix-text-base);
+  color: var(--malix-foreground);
+  padding: 0;
+}
+
+.malix-ai-panel__input::placeholder {
+  color: var(--malix-foreground-tertiary);
+}
+
+.malix-ai-panel__send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: var(--malix-radius-md);
+  background: var(--malix-cta-primary-bg);
+  color: var(--malix-primary-foreground);
+  border: none;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.malix-ai-panel__send:hover:not(:disabled) {
+  background: var(--malix-primary-hover);
+}
+
+.malix-ai-panel__send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

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>
-  );
-}