@camtomlabs/malix-design-system 0.2.0 → 0.3.0

package/README.md

@@ -23,11 +23,29 @@ npm install react react-dom
 Import the bundled stylesheet once in your app's entry point (e.g. `main.tsx`, `layout.tsx`, or `_app.tsx`):
 
 ```ts
+// Optional: opt-in reset scoped to @layer malix-reset.
+// Import BEFORE styles.css so the layer order is established correctly.
+import '@camtomlabs/malix-design-system/reset.css';
+
 import '@camtomlabs/malix-design-system/styles.css';
 ```
 
 That's it. All components are styled and ready to use.
 
+### Why the reset is optional
+
+`reset.css` lives inside `@layer malix-reset`, which means **any style you
+write outside a layer will automatically win** — no specificity wars, no
+`:not()` hacks. Use it if your project has a hostile global reset that
+makes CSS Modules fight for background colors; skip it if you already
+have your own reset.
+
+Layer cascade order:
+
+```
+malix-reset  →  malix-tokens  →  malix-components  →  app
+```
+
 ## Usage
 
 ```tsx
@@ -43,6 +61,54 @@ export function MyPage() {
 }
 ```
 
+## Icons
+
+Malix ships a canonical `<Icon>` wrapper that accepts any icon component
+(lucide-react, phosphor-react, custom SVG) and enforces consistent
+sizing and theming via `currentColor`.
+
+```tsx
+import { Icon } from '@camtomlabs/malix-design-system';
+import { Plus, Search, Trash } from 'lucide-react';
+
+<Icon as={Plus} size="md" label="Add item" />       // 16px, aria-label
+<Icon as={Search} size="sm" />                       // decorative (aria-hidden)
+<Icon as={Trash} size="lg" />                        // 20px
+```
+
+Sizes: `'xs'` (12px), `'sm'` (14px), `'md'` (16px), `'lg'` (20px), `'xl'` (24px), or a raw number.
+
+## ESLint Plugin — enforce canonical components
+
+Malix ships an ESLint plugin that catches raw `<button>` and `<input>`
+elements and tells you to use `<Button>` / `<Input>` from the DS.
+
+```js
+// .eslintrc.cjs
+module.exports = {
+  plugins: ['@camtomlabs/malix'],
+  rules: {
+    '@camtomlabs/malix/no-raw-button': 'warn',
+    '@camtomlabs/malix/no-raw-input': 'warn',
+  },
+};
+```
+
+Or use the recommended preset:
+
+```js
+extends: ['plugin:@camtomlabs/malix/recommended']
+```
+
+You can escape the rule with a standard disable comment when needed:
+
+```tsx
+// eslint-disable-next-line @camtomlabs/malix/no-raw-button
+<button type="submit" form="external-form-id" />
+```
+
+The `no-raw-input` rule allows `type="hidden"` and `type="file"` by default.
+
 ## Theme Provider
 
 Malix includes a React theme provider for managing dark mode:

package/dist/index.cjs

@@ -53,6 +53,7 @@ __export(index_exports, {
   FlyoutMenu: () => FlyoutMenu,
   GlassPopover: () => GlassPopover,
   Header: () => Header,
+  Icon: () => Icon,
   Input: () => Input,
   InputGroup: () => InputGroup,
   LanguageSelector: () => LanguageSelector,
@@ -2650,6 +2651,31 @@ function useMalixTheme() {
   }
   return ctx;
 }
+
+// src/components/Icon.tsx
+var import_react16 = require("react");
+var SIZE_MAP = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20,
+  xl: 24
+};
+function resolveSize(size) {
+  return typeof size === "number" ? size : SIZE_MAP[size];
+}
+var Icon = (0, import_react16.forwardRef)(function Icon2({ as: Component, size = "md", label, ...props }, ref) {
+  const pixelSize = resolveSize(size);
+  const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true, focusable: false };
+  return (0, import_react16.createElement)(Component, {
+    ref,
+    width: pixelSize,
+    height: pixelSize,
+    color: "currentColor",
+    ...a11y,
+    ...props
+  });
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIAssistantPanel,
@@ -2675,6 +2701,7 @@ function useMalixTheme() {
   FlyoutMenu,
   GlassPopover,
   Header,
+  Icon,
   Input,
   InputGroup,
   LanguageSelector,

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, SVGProps, ComponentType } from 'react';
 
 var version = 1;
 var tokens = [
@@ -627,4 +627,36 @@ interface MalixThemeProviderProps {
 declare function MalixThemeProvider({ children, defaultTheme }: MalixThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<MalixThemeContextValue | null>>;
 declare function useMalixTheme(): MalixThemeContextValue;
 
-export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, type MalixTheme, MalixThemeProvider, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry, useMalixTheme };
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+/**
+ * Minimal shape that any icon component (lucide-react, phosphor-react,
+ * custom SVGs) must satisfy. We accept any React component that takes
+ * SVG props so consumers can bring their own icon library and still
+ * get consistent sizing and theming.
+ */
+type IconComponent = ComponentType<SVGProps<SVGSVGElement> & {
+    size?: number | string;
+}>;
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'ref'> {
+    /** The icon component to render (e.g. any lucide-react icon) */
+    as: IconComponent;
+    /** Visual size — tokens or raw px. Default: 'md' (16px) */
+    size?: IconSize;
+    /** Accessible label. If omitted, icon is decorative (aria-hidden) */
+    label?: string;
+}
+/**
+ * Canonical icon wrapper. Takes any icon component and renders it
+ * with consistent sizing aligned to Malix typography tokens and
+ * `currentColor` so the icon inherits text color.
+ *
+ * @example
+ * import { Icon } from '@camtomlabs/malix-design-system';
+ * import { Plus, Search } from 'lucide-react';
+ *
+ * <Icon as={Plus} size="md" label="Add item" />
+ * <Icon as={Search} size="sm" />  // decorative
+ */
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+
+export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Icon, type IconComponent, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, type MalixTheme, MalixThemeProvider, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry, useMalixTheme };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { ReactNode } from 'react';
+import React__default, { ReactNode, SVGProps, ComponentType } from 'react';
 
 var version = 1;
 var tokens = [
@@ -627,4 +627,36 @@ interface MalixThemeProviderProps {
 declare function MalixThemeProvider({ children, defaultTheme }: MalixThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<MalixThemeContextValue | null>>;
 declare function useMalixTheme(): MalixThemeContextValue;
 
-export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, type MalixTheme, MalixThemeProvider, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry, useMalixTheme };
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+/**
+ * Minimal shape that any icon component (lucide-react, phosphor-react,
+ * custom SVGs) must satisfy. We accept any React component that takes
+ * SVG props so consumers can bring their own icon library and still
+ * get consistent sizing and theming.
+ */
+type IconComponent = ComponentType<SVGProps<SVGSVGElement> & {
+    size?: number | string;
+}>;
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'ref'> {
+    /** The icon component to render (e.g. any lucide-react icon) */
+    as: IconComponent;
+    /** Visual size — tokens or raw px. Default: 'md' (16px) */
+    size?: IconSize;
+    /** Accessible label. If omitted, icon is decorative (aria-hidden) */
+    label?: string;
+}
+/**
+ * Canonical icon wrapper. Takes any icon component and renders it
+ * with consistent sizing aligned to Malix typography tokens and
+ * `currentColor` so the icon inherits text color.
+ *
+ * @example
+ * import { Icon } from '@camtomlabs/malix-design-system';
+ * import { Plus, Search } from 'lucide-react';
+ *
+ * <Icon as={Plus} size="md" label="Add item" />
+ * <Icon as={Search} size="sm" />  // decorative
+ */
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+
+export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Icon, type IconComponent, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, type MalixTheme, MalixThemeProvider, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry, useMalixTheme };

package/dist/index.js

@@ -2559,6 +2559,31 @@ function useMalixTheme() {
   }
   return ctx;
 }
+
+// src/components/Icon.tsx
+import { createElement as createElement2, forwardRef } from "react";
+var SIZE_MAP = {
+  xs: 12,
+  sm: 14,
+  md: 16,
+  lg: 20,
+  xl: 24
+};
+function resolveSize(size) {
+  return typeof size === "number" ? size : SIZE_MAP[size];
+}
+var Icon = forwardRef(function Icon2({ as: Component, size = "md", label, ...props }, ref) {
+  const pixelSize = resolveSize(size);
+  const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true, focusable: false };
+  return createElement2(Component, {
+    ref,
+    width: pixelSize,
+    height: pixelSize,
+    color: "currentColor",
+    ...a11y,
+    ...props
+  });
+});
 export {
   AIAssistantPanel,
   Accordion,
@@ -2583,6 +2608,7 @@ export {
   FlyoutMenu,
   GlassPopover,
   Header,
+  Icon,
   Input,
   InputGroup,
   LanguageSelector,

package/eslint-plugin.cjs

@@ -0,0 +1,128 @@
+/**
+ * @camtomlabs/malix-design-system/eslint-plugin
+ *
+ * Custom ESLint rules that enforce usage of canonical Malix components
+ * instead of raw HTML elements.
+ *
+ * Usage in consuming repo:
+ *
+ *   // .eslintrc.cjs
+ *   module.exports = {
+ *     plugins: ['@camtomlabs/malix'],
+ *     rules: {
+ *       '@camtomlabs/malix/no-raw-button': 'warn',
+ *       '@camtomlabs/malix/no-raw-input': 'warn',
+ *     },
+ *   };
+ *
+ * Both rules allow an escape hatch via the disable comment:
+ *   // eslint-disable-next-line @camtomlabs/malix/no-raw-button
+ *   <button type="submit" form="external-form-id" />
+ */
+
+'use strict';
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noRawButton = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallow raw <button> elements. Use <Button> from @camtomlabs/malix-design-system instead.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allow: {
+            type: 'array',
+            items: { type: 'string' },
+            description: 'JSX element names that are allowed (e.g. ["Button", "MenuButton"])',
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      rawButton:
+        'Do not use raw <button>. Import Button from "@camtomlabs/malix-design-system" and use <Button hierarchy="primary">.',
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== 'JSXIdentifier') return;
+        if (node.name.name !== 'button') return;
+        context.report({ node, messageId: 'rawButton' });
+      },
+    };
+  },
+};
+
+/** @type {import('eslint').Rule.RuleModule} */
+const noRawInput = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'Disallow raw <input> elements (except type="hidden"). Use <Input> from @camtomlabs/malix-design-system instead.',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allowTypes: {
+            type: 'array',
+            items: { type: 'string' },
+            default: ['hidden', 'file'],
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      rawInput:
+        'Do not use raw <input>. Import Input from "@camtomlabs/malix-design-system" and use <Input>.',
+    },
+  },
+  create(context) {
+    const options = context.options[0] || {};
+    const allowTypes = options.allowTypes || ['hidden', 'file'];
+
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== 'JSXIdentifier') return;
+        if (node.name.name !== 'input') return;
+
+        // Allow inputs whose type attribute is in allowTypes (e.g. hidden, file)
+        const typeAttr = node.attributes.find(
+          (attr) =>
+            attr.type === 'JSXAttribute' &&
+            attr.name &&
+            attr.name.name === 'type' &&
+            attr.value &&
+            attr.value.type === 'Literal',
+        );
+        if (typeAttr && allowTypes.includes(typeAttr.value.value)) return;
+
+        context.report({ node, messageId: 'rawInput' });
+      },
+    };
+  },
+};
+
+module.exports = {
+  rules: {
+    'no-raw-button': noRawButton,
+    'no-raw-input': noRawInput,
+  },
+  configs: {
+    recommended: {
+      plugins: ['@camtomlabs/malix'],
+      rules: {
+        '@camtomlabs/malix/no-raw-button': 'warn',
+        '@camtomlabs/malix/no-raw-input': 'warn',
+      },
+    },
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camtomlabs/malix-design-system",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Malix Design System combined package with components, tokens, and bundled styles.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,15 +8,18 @@
   "types": "./dist/index.d.ts",
   "sideEffects": [
     "./src/styles.css",
-    "./src/tokens.css"
+    "./src/tokens.css",
+    "./src/reset.css"
   ],
   "files": [
     "dist",
     "src/styles.css",
     "src/tokens.css",
+    "src/reset.css",
     "src/tokens.registry.json",
     "tailwind.preset.js",
-    "stylelint.config.cjs"
+    "stylelint.config.cjs",
+    "eslint-plugin.cjs"
   ],
   "repository": {
     "type": "git",
@@ -44,9 +47,11 @@
     "./css": "./src/styles.css",
     "./styles.css": "./src/styles.css",
     "./tokens.css": "./src/tokens.css",
+    "./reset.css": "./src/reset.css",
     "./tokens.registry.json": "./src/tokens.registry.json",
     "./tailwind.preset": "./tailwind.preset.js",
-    "./stylelint.config": "./stylelint.config.cjs"
+    "./stylelint.config": "./stylelint.config.cjs",
+    "./eslint-plugin": "./eslint-plugin.cjs"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/reset.css

@@ -0,0 +1,212 @@
+/* ═══════════════════════════════════════════════
+   MALIX RESET — Opt-in CSS reset scoped to @layer
+
+   Ships inside the `malix-reset` layer so any style
+   defined outside this layer (or in a later layer)
+   will win regardless of selector specificity.
+
+   Usage:
+     import '@camtomlabs/malix-design-system/reset.css';
+
+   This file defines the cascade order. Import it
+   ONCE, before any other Malix stylesheet:
+
+     1. malix-reset      (this file)
+     2. malix-tokens     (CSS custom properties)
+     3. malix-components (component styles)
+     4. app              (your own styles)
+
+   Any CSS you write outside these layers will
+   automatically beat the reset — no :not() hacks,
+   no specificity wars.
+   ═══════════════════════════════════════════════ */
+
+@layer malix-reset, malix-tokens, malix-components, app;
+
+@layer malix-reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    -moz-tab-size: 4;
+    tab-size: 4;
+  }
+
+  body {
+    margin: 0;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-family: var(--malix-font-body, system-ui, sans-serif);
+    color: var(--malix-foreground, #111827);
+    background-color: var(--malix-background-main, #ffffff);
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+  }
+
+  p, blockquote, dl, dd {
+    margin: 0;
+  }
+
+  ul, ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  b, strong {
+    font-weight: bolder;
+  }
+
+  code, kbd, samp, pre {
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+    font-size: 1em;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub { bottom: -0.25em; }
+  sup { top: -0.5em; }
+
+  table {
+    border-collapse: collapse;
+    border-color: inherit;
+    text-indent: 0;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  /* IMPORTANT: intentionally NOT resetting button background-color.
+     Components or CSS Modules must be able to set their own background
+     without fighting a global reset. */
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+    border: 0;
+    cursor: pointer;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [type='search'] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  legend {
+    padding: 0;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1;
+    color: var(--malix-placeholder, #9ca3af);
+  }
+
+  [role="button"] {
+    cursor: pointer;
+  }
+
+  :disabled {
+    cursor: default;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+}

package/src/styles.css

@@ -1,5 +1,11 @@
 @import "./tokens.css";
 
+/* Declare the layer here (harmless if reset.css isn't imported) so
+   consumers that skip reset.css still get a named layer for our
+   component styles. When reset.css IS imported, this declaration
+   merges with the one there and the cascade order is preserved. */
+@layer malix-reset, malix-tokens, malix-components, app;
+
 /* ═══════════════════════════════════════════════
    BUTTON — Pencil: KCjkg, 5eAkI, zMyI0, zUoM5
    padding: 10px 20px, gap: 8px, radius-md