@lunar-js/lunar 0.0.1

package/dist/themes/tokens/tokens.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.css.d.ts","names":[],"sources":["../../../src/themes/tokens/tokens.css.ts"],"sourcesContent":[],"mappings":";cAgBM;EAAA,MAAA,EAAA"}

package/dist/themes/tokens/tokens.css.js

@@ -0,0 +1,36 @@
+import { ACTION_COLORS, BORDER_COLORS, ICON_COLORS, INPUT_COLORS, SHADOW_COLORS, SURFACE_COLORS, TEXT_COLORS } from "./semantic/colors.js";
+import { SPACING } from "./semantic/spacing.js";
+import { FONT_FAMILY, TYPOGRAPHY_THEME_CONTRACT } from "./semantic/typography.js";
+import { BORDER_RADIUS, BORDER_WIDTH } from "./semantic/borders.js";
+import { BOX_SHADOWS } from "./semantic/shadows.js";
+import { createThemeContract } from "@vanilla-extract/css";
+
+//#region src/themes/tokens/tokens.css.ts
+const themeContract = createThemeContract({
+	colors: {
+		...ACTION_COLORS,
+		...TEXT_COLORS,
+		...SURFACE_COLORS,
+		...BORDER_COLORS,
+		...ICON_COLORS,
+		...INPUT_COLORS,
+		...SHADOW_COLORS
+	},
+	typography: {
+		fontFamily: FONT_FAMILY,
+		display: TYPOGRAPHY_THEME_CONTRACT,
+		heading: TYPOGRAPHY_THEME_CONTRACT,
+		subheading: TYPOGRAPHY_THEME_CONTRACT,
+		body: TYPOGRAPHY_THEME_CONTRACT,
+		caption: TYPOGRAPHY_THEME_CONTRACT,
+		label: TYPOGRAPHY_THEME_CONTRACT
+	},
+	spacing: SPACING,
+	borderRadius: BORDER_RADIUS,
+	borderWidth: BORDER_WIDTH,
+	boxShadow: BOX_SHADOWS
+});
+
+//#endregion
+export { themeContract };
+//# sourceMappingURL=tokens.css.js.map

package/dist/themes/tokens/tokens.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.css.js","names":[],"sources":["../../../src/themes/tokens/tokens.css.ts"],"sourcesContent":["import { createThemeContract } from '@vanilla-extract/css';\n\nimport {\n  ACTION_COLORS,\n  BORDER_COLORS,\n  ICON_COLORS,\n  INPUT_COLORS,\n  SHADOW_COLORS,\n  SURFACE_COLORS,\n  TEXT_COLORS,\n} from './semantic/colors.js';\nimport { SPACING } from './semantic/spacing.js';\nimport { FONT_FAMILY, TYPOGRAPHY_THEME_CONTRACT } from './semantic/typography.js';\nimport { BORDER_RADIUS, BORDER_WIDTH } from './semantic/borders.js';\nimport { BOX_SHADOWS } from './semantic/shadows.js';\n\nconst themeContract = createThemeContract({\n  colors: {\n    ...ACTION_COLORS,\n    ...TEXT_COLORS,\n    ...SURFACE_COLORS,\n    ...BORDER_COLORS,\n    ...ICON_COLORS,\n    ...INPUT_COLORS,\n    ...SHADOW_COLORS,\n  },\n  typography: {\n    fontFamily: FONT_FAMILY,\n    display: TYPOGRAPHY_THEME_CONTRACT,\n    heading: TYPOGRAPHY_THEME_CONTRACT,\n    subheading: TYPOGRAPHY_THEME_CONTRACT,\n    body: TYPOGRAPHY_THEME_CONTRACT,\n    caption: TYPOGRAPHY_THEME_CONTRACT,\n    label: TYPOGRAPHY_THEME_CONTRACT,\n  },\n  spacing: SPACING,\n  borderRadius: BORDER_RADIUS,\n  borderWidth: BORDER_WIDTH,\n  boxShadow: BOX_SHADOWS,\n});\n\nexport { themeContract };\n"],"mappings":";;;;;;;;AAgBA,MAAM,gBAAgB,oBAAoB;CACxC,QAAQ;EACN,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACJ;CACD,YAAY;EACV,YAAY;EACZ,SAAS;EACT,SAAS;EACT,YAAY;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACR;CACD,SAAS;CACT,cAAc;CACd,aAAa;CACb,WAAW;CACZ,CAAC"}

package/dist/types/theming.d.ts

@@ -0,0 +1,7 @@
+import { COLOR_SCHEME__DARK, COLOR_SCHEME__LIGHT, COLOR_SCHEME__SYSTEM } from "../constants/theming.js";
+
+//#region src/types/theming.d.ts
+type ColorScheme = typeof COLOR_SCHEME__SYSTEM | typeof COLOR_SCHEME__DARK | typeof COLOR_SCHEME__LIGHT;
+//#endregion
+export { type ColorScheme };
+//# sourceMappingURL=theming.d.ts.map

package/dist/types/theming.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming.d.ts","names":[],"sources":["../../src/types/theming.ts"],"sourcesContent":[],"mappings":";;;KASK,WAAA,UAAqB,8BAA8B,4BAA4B"}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "name": "@lunar-js/lunar",
+  "description": "Lunar is a radix/shadcn inspired component/design library",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lunar-js/lunar.git",
+    "directory": "packages/lunar"
+  },
+  "homepage": "https://github.com/lunar-js/lunar/tree/main/packages/lunar#readme",
+  "version": "0.0.1",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "module": "./dist/index.js",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./styles.css": {
+      "import": {
+        "types": "./dist/styles.css.d.ts",
+        "default": "./dist/styles.css.js"
+      }
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "*.md"
+  ],
+  "dependencies": {
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-slot": "^1.2.3",
+    "dialog-closedby-polyfill": "^1.1.0"
+  },
+  "devDependencies": {
+    "@vanilla-extract/recipes": "0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "clsx": "^2.1.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "peerDependencies": {
+    "@vanilla-extract/css": "^1",
+    "@vanilla-extract/recipes": "^0",
+    "@vanilla-extract/sprinkles": "^1",
+    "clsx": "^2",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "size-limit": [
+    {
+      "path": "./dist/index.js",
+      "import": "{}",
+      "limit": "20 B"
+    }
+  ],
+  "license": "MIT",
+  "scripts": {
+    "____ RUN COMMANDS ____": "",
+    "dev": "tsdown --watch",
+    "____ BUILD COMMANDS ____": "",
+    "build": "pnpm run clean:build && pnpm run build:dist",
+    "build:dist": "tsdown --config ./tsdown.config.ts --format esm",
+    "____ VALIDATION COMMANDS ____": "",
+    "lint": "eslint --max-warnings=0 .",
+    "lint:fix": "pnpm run lint --fix",
+    "typecheck": "tsc -p ./tsconfig.json --noEmit",
+    "size": "size-limit",
+    "____ CLEANUP COMMANDS ____": "",
+    "clean": "pnpm run clean:build",
+    "clean:build": "rimraf dist"
+  }
+}

package/src/components/composite/Card/Card.tsx

@@ -0,0 +1,62 @@
+import type * as React from 'react';
+import clsx from 'clsx';
+
+import { card, cardHeader, cardTitle, cardDescription, cardAction, cardContent, cardFooter } from './card.css.js';
+
+/**
+ * Main card container component that provides a styled container with elevation and borders.
+ * Serves as the foundation for card-based layouts and content organization.
+ */
+const Card = ({ className, ...props }: React.ComponentProps<'div'>) => {
+  return <div data-slot="card" className={clsx(card, className)} {...props} />;
+};
+
+/**
+ * Header section of the card, typically containing the card title and description.
+ * Provides consistent spacing and layout for the card's top section.
+ */
+const CardHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {
+  return <div data-slot="card-header" className={clsx(cardHeader, className)} {...props} />;
+};
+
+/**
+ * Title component for the card header with appropriate typography styling.
+ * Provides semantic structure and consistent text hierarchy.
+ */
+const CardTitle = ({ className, ...props }: React.ComponentProps<'div'>) => {
+  return <div data-slot="card-title" className={clsx(cardTitle, className)} {...props} />;
+};
+
+/**
+ * Description component for the card header with muted text styling.
+ * Used to provide additional context or subtitle information.
+ */
+const CardDescription = ({ className, ...props }: React.ComponentProps<'div'>) => {
+  return <div data-slot="card-description" className={clsx(cardDescription, className)} {...props} />;
+};
+
+/**
+ * Action area component for the card, typically containing buttons or interactive elements.
+ * Provides proper spacing and alignment for card actions.
+ */
+const CardAction = ({ className, ...props }: React.ComponentProps<'div'>) => {
+  return <div data-slot="card-action" className={clsx(cardAction, className)} {...props} />;
+};
+
+/**
+ * Main content area of the card with appropriate padding and spacing.
+ * Houses the primary content between the header and footer sections.
+ */
+const CardContent = ({ className, ...props }: React.ComponentProps<'div'>) => {
+  return <div data-slot="card-content" className={clsx(cardContent, className)} {...props} />;
+};
+
+/**
+ * Footer section of the card, typically used for actions, metadata, or additional information.
+ * Provides consistent spacing and styling for the card's bottom section.
+ */
+const CardFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {
+  return <div data-slot="card-footer" className={clsx(cardFooter, className)} {...props} />;
+};
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/src/components/composite/Card/card.css.ts

@@ -0,0 +1,79 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeContract } from '../../../themes/tokens/tokens.css.js';
+
+const card = style({
+  backgroundColor: themeContract.colors.surface.bg.secondary,
+  color: themeContract.colors.text.primary,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: themeContract.spacing[6],
+  borderRadius: themeContract.borderRadius['2xl'],
+  border: `${themeContract.borderWidth[1]} solid ${themeContract.colors.border.default}`,
+  paddingTop: themeContract.spacing[6],
+  paddingBottom: themeContract.spacing[6],
+  boxShadow: themeContract.boxShadow.lg,
+});
+
+const cardHeader = style({
+  containerType: 'inline-size',
+  containerName: 'card-header',
+  display: 'grid',
+  gridAutoRows: 'min-content',
+  gridTemplateRows: 'auto auto',
+  alignItems: 'flex-start',
+  gap: themeContract.spacing[2],
+  paddingLeft: themeContract.spacing[6],
+  paddingRight: themeContract.spacing[6],
+
+  // Conditional grid columns when card action is present
+  selectors: {
+    '&:has([data-slot="card-action"])': {
+      gridTemplateColumns: '1fr auto',
+    },
+    // Conditional padding when border-b class is present
+    '&.border-b': {
+      paddingBottom: themeContract.spacing[6],
+    },
+  },
+});
+
+const cardTitle = style({
+  lineHeight: '1',
+  fontWeight: themeContract.typography.body.md.bold.fontWeight,
+});
+
+const cardDescription = style({
+  color: themeContract.colors.text.secondary,
+  fontSize: themeContract.typography.body.sm.medium.fontSize,
+  lineHeight: themeContract.typography.body.sm.medium.lineHeight,
+});
+
+const cardAction = style({
+  gridColumn: '2',
+  gridRowStart: '1',
+  gridRowEnd: 'span 2',
+  alignSelf: 'flex-start',
+  justifySelf: 'end',
+});
+
+const cardContent = style({
+  paddingLeft: themeContract.spacing[6],
+  paddingRight: themeContract.spacing[6],
+});
+
+const cardFooter = style({
+  display: 'flex',
+  alignItems: 'center',
+  paddingLeft: themeContract.spacing[6],
+  paddingRight: themeContract.spacing[6],
+
+  // Conditional padding when border-t class is present
+  selectors: {
+    '&.border-t': {
+      paddingTop: themeContract.spacing[6],
+    },
+  },
+});
+
+export { card, cardTitle, cardAction, cardFooter, cardHeader, cardContent, cardDescription };

package/src/components/composite/Dialog/Dialog.tsx

@@ -0,0 +1,150 @@
+import {
+  type ComponentProps,
+  type FC,
+  type MouseEvent,
+  type ReactNode,
+  useEffect,
+  useEffectEvent,
+  useRef,
+  useState,
+} from 'react';
+import clsx from 'clsx';
+// TODO: Remove once there's full browser support for Dialog's closedby attribute.
+import 'dialog-closedby-polyfill';
+
+import DialogProvider from './DialogProvider.js';
+import { useDialog } from '../../../hooks/dialog.js';
+import { useMergedRef } from '../../../hooks/refs.js';
+import Button, { type ButtonProps } from '../../primitives/Button/Button.js';
+import { dialog, dialogContent, dialogFooter, dialogHeader } from './dialog.css.js';
+
+interface DialogProps extends ComponentProps<'dialog'> {
+  /**
+   * Optional function that renders the trigger element for the dialog.
+   * This allows custom trigger components while maintaining dialog functionality.
+   */
+  renderTrigger?: () => ReactNode;
+}
+
+/**
+ * Main Dialog component that renders a modal dialog element.
+ * Handles dialog state management and provides context for child components.
+ */
+const Dialog: FC<DialogProps> = ({
+  className,
+  open = false,
+  closedby = 'any',
+  renderTrigger,
+  ref: forwardedRef,
+  ...props
+}) => {
+  const internalDialogRef = useRef<HTMLDialogElement>(null);
+  const mergedRef = useMergedRef(internalDialogRef, forwardedRef);
+
+  return (
+    <DialogProvider isOpen={open} dialogRef={internalDialogRef}>
+      {renderTrigger?.()}
+
+      <dialog
+        ref={mergedRef}
+        open={open}
+        // eslint-disable-next-line react/no-unknown-property
+        closedby={closedby}
+        data-slot="dialog"
+        className={clsx(dialog, className)}
+        aria-modal="true"
+        {...props}
+      />
+    </DialogProvider>
+  );
+};
+
+/**
+ * Button component that triggers the dialog to open.
+ * Automatically handles aria attributes and dialog state management.
+ */
+const DialogTrigger: FC<ButtonProps> = ({ onClick, ...props }) => {
+  const { dialogRef, isOpen } = useDialog();
+
+  const [isAriaExpanded, setIsAriaExpanded] = useState(isOpen);
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (event.defaultPrevented || event.isPropagationStopped()) {
+      return;
+    }
+
+    setIsAriaExpanded(true);
+    dialogRef.current?.showModal();
+  };
+
+  const handleClose = useEffectEvent(() => {
+    setIsAriaExpanded(false);
+  });
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    dialog.addEventListener('close', handleClose);
+
+    return () => {
+      dialog.removeEventListener('close', handleClose);
+    };
+  }, [dialogRef]);
+
+  return (
+    <Button
+      aria-expanded={isAriaExpanded}
+      aria-haspopup="dialog"
+      data-slot="dialog-trigger"
+      onClick={handleClick}
+      {...props}
+    />
+  );
+};
+
+/**
+ * Button component that closes the dialog when clicked.
+ * Handles dialog close functionality while preserving custom onClick handlers.
+ */
+const DialogClose: FC<ButtonProps> = ({ onClick, ...props }) => {
+  const { dialogRef } = useDialog();
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (event.defaultPrevented || event.isPropagationStopped()) {
+      return;
+    }
+
+    dialogRef.current?.close();
+  };
+
+  return <Button onClick={handleClick} {...props} />;
+};
+
+/**
+ * Container component for the main content area of the dialog.
+ * Provides semantic structure and consistent styling for dialog content.
+ */
+const DialogContent: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
+  return <div data-slot="dialog-content" className={clsx(dialogContent, className)} {...props} />;
+};
+
+/**
+ * Header component for the dialog, typically containing the dialog title.
+ * Provides consistent spacing and styling for the dialog header area.
+ */
+const DialogHeader: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
+  return <div data-slot="dialog-header" className={clsx(dialogHeader, className)} {...props} />;
+};
+
+/**
+ * Footer component for the dialog, typically containing action buttons.
+ * Provides consistent spacing and styling for the dialog footer area.
+ */
+const DialogFooter: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
+  return <div data-slot="dialog-footer" className={clsx(dialogFooter, className)} {...props} />;
+};
+
+export { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter };

package/src/components/composite/Dialog/DialogProvider.tsx

@@ -0,0 +1,21 @@
+import { createContext, type PropsWithChildren, type RefObject } from 'react';
+
+interface DialogContextProps {
+  isOpen: boolean;
+  dialogRef: RefObject<HTMLDialogElement | null>;
+}
+
+const DialogContext = createContext<DialogContextProps | null>(null);
+
+interface DialogProviderProps extends PropsWithChildren {
+  isOpen: boolean;
+  dialogRef: RefObject<HTMLDialogElement | null>;
+}
+
+const DialogProvider = ({ children, isOpen, dialogRef }: DialogProviderProps) => {
+  return <DialogContext.Provider value={{ isOpen, dialogRef }}>{children}</DialogContext.Provider>;
+};
+
+export type { DialogContextProps };
+export default DialogProvider;
+export { DialogContext };

package/src/components/composite/Dialog/dialog.css.ts

@@ -0,0 +1,137 @@
+import { style, keyframes } from '@vanilla-extract/css';
+
+import { themeContract } from '../../../themes/tokens/tokens.css.js';
+import { withBreakpoint, withSafeTransition } from '../../../themes/styles/utilities.js';
+import { BREAKPOINT__SM, BREAKPOINT__MD } from '../../../constants/theming.js';
+
+const fadeIn = keyframes({
+  from: {
+    opacity: '0',
+    transform: 'scale(0.95) translateY(-10px)',
+  },
+  to: {
+    opacity: '1',
+    transform: 'scale(1) translateY(0)',
+  },
+});
+
+const fadeOut = keyframes({
+  from: {
+    display: 'block',
+    opacity: '1',
+    transform: 'scale(1) translateY(0)',
+  },
+  to: {
+    display: 'none',
+    opacity: '0',
+    transform: 'scale(0.95) translateY(-10px)',
+  },
+});
+
+const fadeInBackdrop = keyframes({
+  from: {
+    opacity: '0',
+  },
+  to: {
+    opacity: '1',
+  },
+});
+
+const fadeOutBackdrop = keyframes({
+  from: {
+    opacity: '1',
+  },
+  to: {
+    opacity: '0',
+  },
+});
+
+const dialog = style([
+  {
+    boxSizing: 'border-box',
+    padding: themeContract.spacing[4],
+    border: 'none',
+    backgroundColor: themeContract.colors.surface.bg.primary,
+    color: themeContract.colors.text.primary,
+    borderRadius: themeContract.borderRadius.lg,
+    boxShadow: themeContract.boxShadow.xl,
+    width: '100vw',
+    height: '100vh',
+    maxWidth: '100vw',
+    maxHeight: '100vh',
+
+    '::backdrop': {
+      filter: 'brightness(0%)',
+    },
+  },
+  withSafeTransition({
+    transition: 'display 150ms allow-discrete, overlay 150ms allow-discrete',
+    animation: `${fadeOut} 150ms cubic-bezier(0.4, 0, 0.2, 1)`,
+
+    selectors: {
+      '&[open]': {
+        animation: `${fadeIn} 250ms cubic-bezier(0.34, 1.56, 0.64, 1)`,
+      },
+      '&[open]::backdrop': {
+        animation: `${fadeInBackdrop} 250ms`,
+      },
+    },
+
+    '::backdrop': {
+      transition: 'display 150ms allow-discrete, overlay 150ms allow-discrete',
+      animation: `${fadeOutBackdrop} 150ms`,
+    },
+  }),
+  withBreakpoint(BREAKPOINT__MD, {
+    width: 'fit-content',
+    height: 'fit-content',
+    maxWidth: '32rem',
+    maxHeight: 'unset',
+  }),
+]);
+
+const dialogContent = style([
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: themeContract.spacing[4],
+    minHeight: '100%',
+    padding: 0,
+    overflowY: 'auto',
+    WebkitOverflowScrolling: 'touch',
+  },
+  withBreakpoint(BREAKPOINT__SM, {
+    minHeight: 'auto',
+    maxHeight: 'calc(100vh - 64px)',
+    padding: themeContract.spacing[6],
+  }),
+]);
+
+const dialogHeader = style([
+  {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: themeContract.spacing[2],
+    paddingBottom: themeContract.spacing[2],
+    borderBottom: `${themeContract.borderWidth[1]} solid ${themeContract.colors.border.subtle}`,
+  },
+  withBreakpoint(BREAKPOINT__SM, {
+    paddingBottom: themeContract.spacing[4],
+  }),
+]);
+
+const dialogFooter = style([
+  {
+    display: 'flex',
+    flexDirection: 'column-reverse',
+    gap: themeContract.spacing[2],
+    paddingTop: themeContract.spacing[4],
+    marginTop: 'auto',
+  },
+  withBreakpoint(BREAKPOINT__SM, {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+  }),
+]);
+
+export { dialog, dialogContent, dialogHeader, dialogFooter };

package/src/components/primitives/Button/Button.tsx

@@ -0,0 +1,35 @@
+import { type ComponentProps, type FC } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+
+import { buttonVariants } from './button.css.js';
+import type { ButtonSize, ButtonVariant } from './button.types.js';
+
+interface ButtonProps extends ComponentProps<'button'> {
+  /**
+   * When true, the button will render as a child component using Radix UI's Slot primitive.
+   * This allows the button styles to be applied to any element while maintaining accessibility.
+   */
+  asChild?: boolean;
+  /**
+   * The visual style variant of the button.
+   */
+  variant?: ButtonVariant;
+  /**
+   * The size of the button, affecting padding and font size.
+   */
+  size?: ButtonSize;
+}
+
+/**
+ * Versatile button component with multiple variants and sizes.
+ * Supports rendering as child components via Radix UI's Slot primitive for flexible composition.
+ */
+const Button: FC<ButtonProps> = ({ className, size, variant, asChild = false, ...props }) => {
+  const Comp = asChild ? Slot : 'button';
+
+  return <Comp data-slot="button" className={clsx(buttonVariants({ variant, size }), className)} {...props} />;
+};
+
+export type { ButtonProps };
+export default Button;