npm - @danielthurau/atlas-labs-codex - Versions diffs - 0.1.0 → 0.2.0 - Mend

@danielthurau/atlas-labs-codex 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (41) hide show

package/README.md +11 -10
package/components/react/Badge/Badge.module.css +0 -1
package/components/react/Badge/Badge.stories.tsx +0 -1
package/components/react/Badge/Badge.tsx +2 -8
package/components/react/Badge/index.ts +0 -1
package/components/react/Button/Button.module.css +0 -1
package/components/react/Button/Button.stories.tsx +0 -1
package/components/react/Button/Button.tsx +2 -16
package/components/react/Button/index.ts +0 -1
package/components/react/Card/Card.module.css +0 -1
package/components/react/Card/Card.stories.tsx +3 -11
package/components/react/Card/Card.tsx +0 -1
package/components/react/Card/index.ts +0 -1
package/components/react/Input/Input.module.css +3 -2
package/components/react/Input/Input.stories.tsx +2 -11
package/components/react/Input/Input.tsx +0 -1
package/components/react/Input/index.ts +0 -1
package/components/react/Modal/Modal.module.css +3 -2
package/components/react/Modal/Modal.stories.tsx +4 -6
package/components/react/Modal/Modal.tsx +4 -23
package/components/react/Modal/index.ts +0 -1
package/components/react/RefreshButton/RefreshButton.module.css +11 -6
package/components/react/RefreshButton/RefreshButton.stories.tsx +0 -1
package/components/react/RefreshButton/RefreshButton.tsx +10 -18
package/components/react/RefreshButton/index.ts +0 -1
package/components/react/Tabs/Tabs.module.css +3 -2
package/components/react/Tabs/Tabs.stories.tsx +4 -11
package/components/react/Tabs/Tabs.tsx +1 -6
package/components/react/Tabs/index.ts +0 -1
package/components/react/Toast/Toast.module.css +3 -2
package/components/react/Toast/Toast.stories.tsx +1 -4
package/components/react/Toast/Toast.tsx +3 -23
package/components/react/Toast/index.ts +0 -1
package/components/react/index.ts +1 -8
package/lib/index.ts +0 -1
package/lib/utils.ts +4 -5
package/package.json +8 -2
package/themes/css/base.css +10 -5
package/themes/css/reset.css +140 -0
package/themes/css/theme-dark.css +0 -1
package/themes/css/theme-light.css +0 -1

package/README.md CHANGED Viewed

@@ -20,15 +20,15 @@ Then import components, styles, and utilities:
 ```tsx
 // Import components
-import { Button, Card, Input, Badge, RefreshButton } from '@atlas-labs/design-codex';
+import { Button, Card, Input, Badge, RefreshButton } from "@atlas-labs/design-codex";
 // Import utilities
-import { formatRelativeTime, clsx } from '@atlas-labs/design-codex/lib';
+import { formatRelativeTime, clsx } from "@atlas-labs/design-codex/lib";
 // Import CSS (in your layout.tsx or entry point)
-import '@atlas-labs/design-codex/themes/css/base.css';
-import '@atlas-labs/design-codex/themes/css/theme-light.css';
-import '@atlas-labs/design-codex/themes/css/theme-dark.css';
+import "@atlas-labs/design-codex/themes/css/base.css";
+import "@atlas-labs/design-codex/themes/css/theme-light.css";
+import "@atlas-labs/design-codex/themes/css/theme-dark.css";
 ```
 ### Font Setup
@@ -37,8 +37,8 @@ Copy the Martian Mono font to your project's public folder, or load it in your C
 ```css
 @font-face {
-  font-family: 'Martian Mono';
-  src: url('/fonts/MartianMono-VariableFont_wdth,wght.ttf') format('truetype');
+  font-family: "Martian Mono";
+  src: url("/fonts/MartianMono-VariableFont_wdth,wght.ttf") format("truetype");
   font-weight: 100 800;
   font-display: swap;
 }
@@ -121,13 +121,15 @@ The codex supports light and dark themes via CSS custom properties. Theme switch
 ```html
 <html data-theme="light">
-<!-- or -->
-<html data-theme="dark">
+  <!-- or -->
+  <html data-theme="dark"></html>
+</html>
 ```
 ## Components
 All components:
 - Use tokens exclusively (no hardcoded values)
 - Are built on Radix UI primitives for accessibility
 - Encode taste, not flexibility
@@ -135,4 +137,3 @@ All components:
 ## License
 Private repository. Personal use only.

package/components/react/Badge/Badge.module.css CHANGED Viewed

@@ -35,4 +35,3 @@
   background-color: var(--color-intent-danger-bg);
   color: var(--color-intent-danger);
 }

package/components/react/Badge/Badge.stories.tsx CHANGED Viewed

@@ -76,4 +76,3 @@ export const StatusBadges: Story = {
     </div>
   ),
 };

package/components/react/Badge/Badge.tsx CHANGED Viewed

@@ -19,19 +19,14 @@ const badgeVariants = cva(styles.badge, {
 });
 export interface BadgeProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {
+  extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
   children: ReactNode;
 }
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
   ({ className, variant, children, ...props }, ref) => {
     return (
-      <span
-        ref={ref}
-        className={clsx(badgeVariants({ variant }), className)}
-        {...props}
-      >
+      <span ref={ref} className={clsx(badgeVariants({ variant }), className)} {...props}>
         {children}
       </span>
     );
@@ -39,4 +34,3 @@ export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
 );
 Badge.displayName = "Badge";

package/components/react/Badge/index.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { Badge, type BadgeProps } from "./Badge";
2	-

package/components/react/Button/Button.module.css CHANGED Viewed

@@ -115,4 +115,3 @@
     transform: rotate(360deg);
   }
 }

package/components/react/Button/Button.stories.tsx CHANGED Viewed

@@ -105,4 +105,3 @@ export const AllSizes: Story = {
     </div>
   ),
 };

package/components/react/Button/Button.tsx CHANGED Viewed

@@ -25,27 +25,14 @@ const buttonVariants = cva(styles.button, {
 });
 export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   children: ReactNode;
   loading?: boolean;
   asChild?: boolean;
 }
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      loading,
-      disabled,
-      asChild = false,
-      children,
-      ...props
-    },
-    ref
-  ) => {
+  ({ className, variant, size, loading, disabled, asChild = false, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (
@@ -70,4 +57,3 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";

package/components/react/Button/index.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { Button, type ButtonProps } from "./Button";
2	-

package/components/react/Card/Card.module.css CHANGED Viewed

@@ -56,4 +56,3 @@
 .card:has(.header, .content, .footer) {
   padding: 0;
 }

package/components/react/Card/Card.stories.tsx CHANGED Viewed

@@ -25,8 +25,7 @@ export const Default: Story = {
   args: {
     children: (
       <p>
-        This is a basic card with some content. Cards are used to group related
-        content together.
+        This is a basic card with some content. Cards are used to group related content together.
       </p>
     ),
   },
@@ -35,11 +34,7 @@ export const Default: Story = {
 export const Elevated: Story = {
   args: {
     elevated: true,
-    children: (
-      <p>
-        This card has elevation (shadow) for a more prominent appearance.
-      </p>
-    ),
+    children: <p>This card has elevation (shadow) for a more prominent appearance.</p>,
   },
 };
@@ -82,9 +77,7 @@ export const Complete: Story = {
         <p style={{ marginBottom: "16px" }}>
           Configure your project settings here. Changes will be saved automatically.
         </p>
-        <p>
-          Last updated: January 1, 2024
-        </p>
+        <p>Last updated: January 1, 2024</p>
       </CardContent>
       <CardFooter>
         <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
@@ -111,4 +104,3 @@ export const PaddingVariants: Story = {
     </div>
   ),
 };

package/components/react/Card/Card.tsx CHANGED Viewed

@@ -76,4 +76,3 @@ export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
 );
 CardFooter.displayName = "CardFooter";

package/components/react/Card/index.ts CHANGED Viewed

@@ -8,4 +8,3 @@ export {
   type CardContentProps,
   type CardFooterProps,
 } from "./Card";

package/components/react/Input/Input.module.css CHANGED Viewed

@@ -18,7 +18,9 @@
   border-radius: var(--input-radius);
   background-color: var(--color-bg-surface);
   color: var(--color-text-primary);
-  transition: border-color 150ms ease, box-shadow 150ms ease;
+  transition:
+    border-color 150ms ease,
+    box-shadow 150ms ease;
 }
 .input::placeholder {
@@ -60,4 +62,3 @@
   font-size: var(--text-sm);
   color: var(--color-text-secondary);
 }

package/components/react/Input/Input.stories.tsx CHANGED Viewed

@@ -71,18 +71,9 @@ export const AllStates: Story = {
   render: () => (
     <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
       <Input label="Default" placeholder="Enter text" />
-      <Input
-        label="With Helper"
-        placeholder="Enter text"
-        helperText="This is helper text"
-      />
-      <Input
-        label="With Error"
-        placeholder="Enter text"
-        error="This field is required"
-      />
+      <Input label="With Helper" placeholder="Enter text" helperText="This is helper text" />
+      <Input label="With Error" placeholder="Enter text" error="This field is required" />
       <Input label="Disabled" placeholder="Enter text" disabled />
     </div>
   ),
 };

package/components/react/Input/Input.tsx CHANGED Viewed

@@ -47,4 +47,3 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = "Input";

package/components/react/Input/index.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { Input, type InputProps } from "./Input";
2	-

package/components/react/Modal/Modal.module.css CHANGED Viewed

@@ -68,7 +68,9 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  transition: background-color 150ms ease, color 150ms ease;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
 }
 .close:hover {
@@ -100,4 +102,3 @@
     transform: translate(-50%, -50%) scale(1);
   }
 }

package/components/react/Modal/Modal.stories.tsx CHANGED Viewed

@@ -71,12 +71,11 @@ export const LargeModal: Story = {
     children: (
       <div>
         <p style={{ marginBottom: "16px" }}>
-          Large modals are suitable for complex content that needs more space,
-          such as detailed forms or previews.
+          Large modals are suitable for complex content that needs more space, such as detailed
+          forms or previews.
         </p>
         <p style={{ marginBottom: "16px" }}>
-          However, if your modal content is very complex, consider using a
-          dedicated page instead.
+          However, if your modal content is very complex, consider using a dedicated page instead.
         </p>
         <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
           <Button variant="secondary">Cancel</Button>
@@ -101,7 +100,7 @@ const ControlledExample = () => {
         description="This modal is controlled via state."
       >
         <p style={{ marginBottom: "16px" }}>
-          This modal's open state is controlled by the parent component.
+          This modal&apos;s open state is controlled by the parent component.
         </p>
         <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
           <Button variant="secondary" onClick={() => setOpen(false)}>
@@ -116,4 +115,3 @@ const ControlledExample = () => {
 export const Controlled: Story = {
   render: () => <ControlledExample />,
 };

package/components/react/Modal/Modal.tsx CHANGED Viewed

@@ -16,34 +16,16 @@ export interface ModalProps {
 }
 export const Modal = forwardRef<HTMLDivElement, ModalProps>(
-  (
-    {
-      open,
-      onOpenChange,
-      trigger,
-      title,
-      description,
-      children,
-      size = "md",
-    },
-    ref
-  ) => {
+  ({ open, onOpenChange, trigger, title, description, children, size = "md" }, ref) => {
     return (
       <Dialog.Root open={open} onOpenChange={onOpenChange}>
         {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
         <Dialog.Portal>
           <Dialog.Overlay className={styles.overlay} />
-          <Dialog.Content
-            ref={ref}
-            className={clsx(styles.content, styles[size])}
-          >
-            {title && (
-              <Dialog.Title className={styles.title}>{title}</Dialog.Title>
-            )}
+          <Dialog.Content ref={ref} className={clsx(styles.content, styles[size])}>
+            {title && <Dialog.Title className={styles.title}>{title}</Dialog.Title>}
             {description && (
-              <Dialog.Description className={styles.description}>
-                {description}
-              </Dialog.Description>
+              <Dialog.Description className={styles.description}>{description}</Dialog.Description>
             )}
             {children}
             <Dialog.Close asChild>
@@ -72,4 +54,3 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
 );
 Modal.displayName = "Modal";

package/components/react/Modal/index.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { Modal, type ModalProps } from "./Modal";
2	-

package/components/react/RefreshButton/RefreshButton.module.css CHANGED Viewed

@@ -28,7 +28,9 @@
   font-size: var(--text-sm);
   color: var(--color-text-primary);
   cursor: pointer;
-  transition: background 150ms, color 150ms;
+  transition:
+    background 150ms,
+    color 150ms;
 }
 /* When progress bar is shown, remove bottom radius */
@@ -55,8 +57,12 @@
 }
 @keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 /* Dropdown trigger */
@@ -190,13 +196,12 @@
   .refreshButton span:not(.icon) {
     display: none;
   }
   .refreshButton {
     padding: var(--space-2);
   }
   .dropdownTrigger {
     min-width: 50px;
   }
 }

package/components/react/RefreshButton/RefreshButton.stories.tsx CHANGED Viewed

@@ -40,4 +40,3 @@ export const Disabled: Story = {
     disabled: true,
   },
 };

package/components/react/RefreshButton/RefreshButton.tsx CHANGED Viewed

@@ -28,14 +28,14 @@ export function RefreshButton({ onRefresh, onForceCheck, disabled }: RefreshButt
   const [isChecking, setIsChecking] = useState(false);
   const [selectedInterval, setSelectedInterval] = useState<IntervalOption>(INTERVAL_OPTIONS[0]);
   const [progress, setProgress] = useState(0);
-  const [timeLeft, setTimeLeft] = useState<number | null>(null);
+  const [_timeLeft, setTimeLeft] = useState<number | null>(null);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const progressRef = useRef<NodeJS.Timeout | null>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const onRefreshRef = useRef(onRefresh);
   const onForceCheckRef = useRef(onForceCheck);
   // Keep refs updated
   useEffect(() => {
     onRefreshRef.current = onRefresh;
@@ -45,10 +45,10 @@ export function RefreshButton({ onRefresh, onForceCheck, disabled }: RefreshButt
   // Handle manual refresh
   const handleRefresh = useCallback(async () => {
     if (isRefreshing || disabled) return;
     setIsRefreshing(true);
     setProgress(0);
     try {
       await onRefreshRef.current();
     } finally {
@@ -72,10 +72,10 @@ export function RefreshButton({ onRefresh, onForceCheck, disabled }: RefreshButt
   // Handle force check (runs actual health checks)
   const handleForceCheck = useCallback(async () => {
     if (isChecking || disabled || !onForceCheckRef.current) return;
     setIsChecking(true);
     setIsOpen(false);
     try {
       await onForceCheckRef.current();
     } finally {
@@ -154,9 +154,7 @@ export function RefreshButton({ onRefresh, onForceCheck, disabled }: RefreshButt
             disabled={isRefreshing || disabled}
             title="Refresh now"
           >
-            <span className={`${styles.icon} ${isRefreshing ? styles.spinning : ""}`}>
-              ↻
-            </span>
+            <span className={`${styles.icon} ${isRefreshing ? styles.spinning : ""}`}>↻</span>
             {isRefreshing ? "Refreshing..." : "Refresh"}
           </button>
@@ -167,9 +165,7 @@ export function RefreshButton({ onRefresh, onForceCheck, disabled }: RefreshButt
             disabled={disabled}
             title="Set auto-refresh interval"
           >
-            <span className={styles.intervalLabel}>
-              {selectedInterval.label}
-            </span>
+            <span className={styles.intervalLabel}>{selectedInterval.label}</span>
             <span className={styles.chevron}>{isOpen ? "▲" : "▼"}</span>
           </button>
         </div>
@@ -177,10 +173,7 @@ export function RefreshButton({ onRefresh, onForceCheck, disabled }: RefreshButt
         {/* Progress bar - only shows when auto-refresh is active */}
         {isAutoRefresh && (
           <div className={styles.progressBar}>
-            <div
-              className={styles.progressFill}
-              style={{ width: `${progress}%` }}
-            />
+            <div className={styles.progressFill} style={{ width: `${progress}%` }} />
           </div>
         )}
       </div>
@@ -219,4 +212,3 @@ export function RefreshButton({ onRefresh, onForceCheck, disabled }: RefreshButt
     </div>
   );
 }

package/components/react/RefreshButton/index.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { RefreshButton } from "./RefreshButton";
2	-

package/components/react/Tabs/Tabs.module.css CHANGED Viewed

@@ -20,7 +20,9 @@
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
   cursor: pointer;
-  transition: color 150ms ease, border-color 150ms ease;
+  transition:
+    color 150ms ease,
+    border-color 150ms ease;
 }
 .trigger:hover:not(:disabled) {
@@ -55,4 +57,3 @@
 .content[data-state="inactive"] {
   display: none;
 }

package/components/react/Tabs/Tabs.stories.tsx CHANGED Viewed

@@ -30,9 +30,7 @@ export const Default: Story = {
         content: (
           <Card>
             <h3>Account Settings</h3>
-            <p style={{ marginTop: "8px" }}>
-              Manage your account settings and preferences.
-            </p>
+            <p style={{ marginTop: "8px" }}>Manage your account settings and preferences.</p>
           </Card>
         ),
       },
@@ -42,9 +40,7 @@ export const Default: Story = {
         content: (
           <Card>
             <h3>Password Settings</h3>
-            <p style={{ marginTop: "8px" }}>
-              Update your password and security options.
-            </p>
+            <p style={{ marginTop: "8px" }}>Update your password and security options.</p>
           </Card>
         ),
       },
@@ -54,9 +50,7 @@ export const Default: Story = {
         content: (
           <Card>
             <h3>Notification Preferences</h3>
-            <p style={{ marginTop: "8px" }}>
-              Configure how you receive notifications.
-            </p>
+            <p style={{ marginTop: "8px" }}>Configure how you receive notifications.</p>
           </Card>
         ),
       },
@@ -75,7 +69,7 @@ export const WithDisabledTab: Story = {
       {
         id: "disabled",
         label: "Disabled",
-        content: <Card>You shouldn't see this.</Card>,
+        content: <Card>You shouldn&apos;t see this.</Card>,
         disabled: true,
       },
       {
@@ -98,4 +92,3 @@ export const ManyTabs: Story = {
     ],
   },
 };

package/components/react/Tabs/Tabs.tsx CHANGED Viewed

@@ -45,11 +45,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
           ))}
         </TabsPrimitive.List>
         {tabs.map((tab) => (
-          <TabsPrimitive.Content
-            key={tab.id}
-            value={tab.id}
-            className={styles.content}
-          >
+          <TabsPrimitive.Content key={tab.id} value={tab.id} className={styles.content}>
             {tab.content}
           </TabsPrimitive.Content>
         ))}
@@ -59,4 +55,3 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
 );
 Tabs.displayName = "Tabs";

package/components/react/Tabs/index.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { Tabs, type TabsProps, type TabItem } from "./Tabs";
2	-

package/components/react/Toast/Toast.module.css CHANGED Viewed

@@ -97,7 +97,9 @@
   background: transparent;
   border: none;
   cursor: pointer;
-  transition: background-color 150ms ease, color 150ms ease;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
 }
 .close:hover {
@@ -142,4 +144,3 @@
     transform: translateX(100%);
   }
 }

package/components/react/Toast/Toast.stories.tsx CHANGED Viewed

@@ -98,9 +98,7 @@ const AllVariantsDemo = () => {
   };
   const closeToast = (id: number) => {
-    setToasts((prev) =>
-      prev.map((t) => (t.id === id ? { ...t, open: false } : t))
-    );
+    setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, open: false } : t)));
   };
   const titles = {
@@ -140,4 +138,3 @@ const AllVariantsDemo = () => {
 export const AllVariants: Story = {
   render: () => <AllVariantsDemo />,
 };

package/components/react/Toast/Toast.tsx CHANGED Viewed

@@ -1,13 +1,6 @@
 "use client";
-import {
-  forwardRef,
-  type ReactNode,
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-} from "react";
+import { forwardRef, type ReactNode, createContext, useContext } from "react";
 import * as ToastPrimitive from "@radix-ui/react-toast";
 import { clsx } from "clsx";
 import styles from "./Toast.module.css";
@@ -39,15 +32,7 @@ export interface ToastProps {
 export const Toast = forwardRef<HTMLLIElement, ToastProps>(
   (
-    {
-      open,
-      onOpenChange,
-      title,
-      description,
-      action,
-      variant = "default",
-      duration = 5000,
-    },
+    { open, onOpenChange, title, description, action, variant = "default", duration = 5000 },
     ref
   ) => {
     return (
@@ -59,11 +44,7 @@ export const Toast = forwardRef<HTMLLIElement, ToastProps>(
         className={clsx(styles.root, styles[variant])}
       >
         <div className={styles.content}>
-          {title && (
-            <ToastPrimitive.Title className={styles.title}>
-              {title}
-            </ToastPrimitive.Title>
-          )}
+          {title && <ToastPrimitive.Title className={styles.title}>{title}</ToastPrimitive.Title>}
           {description && (
             <ToastPrimitive.Description className={styles.description}>
               {description}
@@ -120,4 +101,3 @@ export function useToast() {
   }
   return context;
 }

package/components/react/Toast/index.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export { Toast, ToastProvider, useToast, type ToastProps, type ToastProviderProps } from "./Toast";
2	-

package/components/react/index.ts CHANGED Viewed

@@ -15,17 +15,10 @@ export {
 // Feedback Components
 export { Badge, type BadgeProps } from "./Badge";
 export { Modal, type ModalProps } from "./Modal";
-export {
-  Toast,
-  ToastProvider,
-  useToast,
-  type ToastProps,
-  type ToastProviderProps,
-} from "./Toast";
+export { Toast, ToastProvider, useToast, type ToastProps, type ToastProviderProps } from "./Toast";
 // Navigation Components
 export { Tabs, type TabsProps, type TabItem } from "./Tabs";
 // Action Components
 export { RefreshButton } from "./RefreshButton";

package/lib/index.ts CHANGED Viewed

@@ -4,4 +4,3 @@
  */
 export { formatRelativeTime, clsx } from "./utils";

package/lib/utils.ts CHANGED Viewed

@@ -8,25 +8,24 @@
  */
 export function formatRelativeTime(date: Date | string | null): string {
   if (!date) return "Never";
   const now = new Date();
   const then = typeof date === "string" ? new Date(date) : date;
   const diffMs = now.getTime() - then.getTime();
   const seconds = Math.floor(diffMs / 1000);
   const minutes = Math.floor(seconds / 60);
   const hours = Math.floor(minutes / 60);
   const days = Math.floor(hours / 24);
   if (seconds < 10) return "Just now";
   if (seconds < 60) return `${seconds}s ago`;
   if (minutes < 60) return `${minutes}m ago`;
   if (hours < 24) return `${hours}h ago`;
   if (days < 7) return `${days}d ago`;
   return then.toLocaleDateString();
 }
 // Re-export clsx for convenience
 export { clsx } from "clsx";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@danielthurau/atlas-labs-codex",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Personal design system with React components, CSS tokens, and utilities",
   "author": "thurau",
   "license": "MIT",
@@ -31,6 +31,7 @@
       "import": "./lib/index.ts",
       "types": "./lib/index.ts"
     },
+    "./themes/css/reset.css": "./themes/css/reset.css",
     "./themes/css/base.css": "./themes/css/base.css",
     "./themes/css/theme-light.css": "./themes/css/theme-light.css",
     "./themes/css/theme-dark.css": "./themes/css/theme-dark.css"
@@ -52,9 +53,13 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check": "npm run lint && npm run format:check",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepublishOnly": "echo 'Ready to publish!'"
+    "prepublishOnly": "npm run check && echo 'Ready to publish!'"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -89,6 +94,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^8.4.7",
+    "prettier": "^3.4.2",
     "typescript": "^5.7.2",
     "vite": "^5.4.0"
   }

package/themes/css/base.css CHANGED Viewed

@@ -2,8 +2,8 @@
 /* Font Faces */
 @font-face {
-  font-family: 'Martian Mono';
-  src: url('/fonts/MartianMono-VariableFont_wdth,wght.ttf') format('truetype');
+  font-family: "Martian Mono";
+  src: url("/fonts/MartianMono-VariableFont_wdth,wght.ttf") format("truetype");
   font-weight: 100 800;
   font-stretch: 75% 112.5%;
   font-display: swap;
@@ -55,10 +55,14 @@
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;
+  --space-5: 1.25rem;
   --space-6: 1.5rem;
   --space-8: 2rem;
+  --space-10: 2.5rem;
   --space-12: 3rem;
   --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
   /* Semantic Spacing */
   --spacing-inline: var(--space-2);
@@ -82,6 +86,8 @@
   --text-lg: 1.125rem;
   --text-xl: 1.5rem;
   --text-2xl: 2rem;
+  --text-3xl: 2.5rem;
+  --text-4xl: 3rem;
   /* Typography - Line Height */
   --leading-xs: 1rem;
@@ -103,8 +109,8 @@
   --tracking-wide: 0.05em;
   /* Typography - Font Family */
-  --font-primary: 'Martian Mono', 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-primary: "Martian Mono", "JetBrains Mono", "Fira Code", Consolas, monospace;
+  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-mono: var(--font-primary);
   /* Shadows */
@@ -139,4 +145,3 @@
   --badge-radius: var(--radius-full);
   --badge-font-size: var(--text-xs);
 }

package/themes/css/reset.css ADDED Viewed

@@ -0,0 +1,140 @@
+/* Design Codex - CSS Reset & Base Styles */
+/* Box Sizing Reset */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/* Margin/Padding Reset */
+* {
+  margin: 0;
+  padding: 0;
+}
+/* Base HTML */
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-size-adjust: 100%;
+}
+/* Body Defaults */
+body {
+  font-family: var(--font-primary);
+  font-size: var(--text-base);
+  line-height: 1.5;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-default);
+  min-height: 100vh;
+}
+/* Typography - Headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: var(--font-semibold);
+  color: var(--color-text-primary);
+  line-height: 1.25;
+}
+h1 {
+  font-size: var(--text-2xl);
+}
+h2 {
+  font-size: var(--text-xl);
+}
+h3 {
+  font-size: var(--text-lg);
+}
+h4 {
+  font-size: var(--text-base);
+}
+h5 {
+  font-size: var(--text-sm);
+}
+h6 {
+  font-size: var(--text-xs);
+}
+/* Typography - Paragraphs */
+p {
+  color: var(--color-text-secondary);
+}
+/* Links */
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+/* Buttons */
+button {
+  font: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+}
+/* Form Elements */
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+/* Images */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+/* Lists */
+ul,
+ol {
+  list-style: none;
+}
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/* Focus States */
+:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+/* Selection */
+::selection {
+  background-color: var(--color-intent-primary);
+  color: white;
+}
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/themes/css/theme-dark.css CHANGED Viewed

@@ -45,4 +45,3 @@
   color-scheme: dark;
 }

package/themes/css/theme-light.css CHANGED Viewed

@@ -46,4 +46,3 @@
   color-scheme: light;
 }