@lunar-js/lunar 0.0.1

package/src/components/primitives/Typography/text.types.ts

@@ -0,0 +1,55 @@
+import type {
+  TEXT_COLOR__ACCENT,
+  TEXT_COLOR__BRAND,
+  TEXT_COLOR__DANGER,
+  TEXT_COLOR__DISABLED,
+  TEXT_COLOR__INFO,
+  TEXT_COLOR__INTERACTIVE,
+  TEXT_COLOR__INVERSE,
+  TEXT_COLOR__MUTED,
+  TEXT_COLOR__PRIMARY,
+  TEXT_COLOR__SECONDARY,
+  TEXT_COLOR__SUCCESS,
+  TEXT_COLOR__WARNING,
+  TEXT_SIZE__LG,
+  TEXT_SIZE__MD,
+  TEXT_SIZE__SM,
+  TEXT_SIZE__XL,
+  TEXT_VARIANT__BODY,
+  TEXT_VARIANT__CAPTION,
+  TEXT_VARIANT__DISPLAY,
+  TEXT_VARIANT__HEADING,
+  TEXT_VARIANT__LABEL,
+  TEXT_VARIANT__SUBHEADING,
+  TEXT_WEIGHT__BOLD,
+  TEXT_WEIGHT__LIGHT,
+  TEXT_WEIGHT__MEDIUM,
+} from './text.css.js';
+
+type TextType =
+  | typeof TEXT_VARIANT__DISPLAY
+  | typeof TEXT_VARIANT__HEADING
+  | typeof TEXT_VARIANT__SUBHEADING
+  | typeof TEXT_VARIANT__BODY
+  | typeof TEXT_VARIANT__CAPTION
+  | typeof TEXT_VARIANT__LABEL;
+
+type TextSize = typeof TEXT_SIZE__XL | typeof TEXT_SIZE__LG | typeof TEXT_SIZE__MD | typeof TEXT_SIZE__SM;
+
+type TextWeight = typeof TEXT_WEIGHT__LIGHT | typeof TEXT_WEIGHT__MEDIUM | typeof TEXT_WEIGHT__BOLD;
+
+type TextColor =
+  | typeof TEXT_COLOR__PRIMARY
+  | typeof TEXT_COLOR__SECONDARY
+  | typeof TEXT_COLOR__MUTED
+  | typeof TEXT_COLOR__DISABLED
+  | typeof TEXT_COLOR__INVERSE
+  | typeof TEXT_COLOR__INTERACTIVE
+  | typeof TEXT_COLOR__SUCCESS
+  | typeof TEXT_COLOR__WARNING
+  | typeof TEXT_COLOR__DANGER
+  | typeof TEXT_COLOR__INFO
+  | typeof TEXT_COLOR__BRAND
+  | typeof TEXT_COLOR__ACCENT;
+
+export type { TextType, TextSize, TextWeight, TextColor };

package/src/constants/theming.ts

@@ -0,0 +1,16 @@
+const COLOR_SCHEME__SYSTEM = 'system';
+const COLOR_SCHEME__LIGHT = 'light';
+const COLOR_SCHEME__DARK = 'dark';
+
+const BREAKPOINT__SM = '40rem';
+const BREAKPOINT__MD = '48rem';
+const BREAKPOINT__LG = '64rem';
+
+export {
+  COLOR_SCHEME__LIGHT,
+  COLOR_SCHEME__SYSTEM,
+  COLOR_SCHEME__DARK,
+  BREAKPOINT__SM,
+  BREAKPOINT__MD,
+  BREAKPOINT__LG,
+};

package/src/hooks/dialog.ts

@@ -0,0 +1,15 @@
+import { use } from 'react';
+
+import { DialogContext } from '../components/composite/Dialog/DialogProvider.js';
+import { createUnitializedProviderError } from './utils.js';
+
+const useDialog = () => {
+  const dialogContext = use(DialogContext);
+  if (!dialogContext) {
+    throw createUnitializedProviderError('DialogProvider');
+  }
+
+  return dialogContext;
+};
+
+export { useDialog };

package/src/hooks/refs.ts

@@ -0,0 +1,34 @@
+import { useCallback, type RefCallback, type RefObject } from 'react';
+
+/**
+ * Merges an internal ref with a forwarded ref, handling both callback and object refs.
+ * This is useful for components that need their own internal ref while also allowing
+ * consumers to pass their own ref.
+ *
+ * @param internalRef - The component's internal ref object
+ * @param forwardedRef - The ref passed by the consumer (can be callback or object ref)
+ * @returns A callback ref that updates both internal and forwarded refs
+ */
+const useMergedRef = <T>(
+  internalRef: RefObject<T | null>,
+  forwardedRef?: RefCallback<T | null> | RefObject<T | null> | null
+): RefCallback<T | null> => {
+  return useCallback(
+    (node: T | null) => {
+      internalRef.current = node;
+
+      if (forwardedRef) {
+        if (typeof forwardedRef === 'function') {
+          // Handle callback ref
+          forwardedRef(node);
+        } else {
+          // Handle ref object
+          forwardedRef.current = node;
+        }
+      }
+    },
+    [internalRef, forwardedRef]
+  );
+};
+
+export { useMergedRef };

package/src/hooks/theme.ts

@@ -0,0 +1,15 @@
+import { use } from 'react';
+
+import { ThemeContext } from '../themes/ThemeProvider/ThemeProvider.js';
+import { createUnitializedProviderError } from './utils.js';
+
+const useTheme = () => {
+  const themeContext = use(ThemeContext);
+  if (!themeContext) {
+    throw createUnitializedProviderError('ThemeProvider');
+  }
+
+  return themeContext;
+};
+
+export { useTheme };

package/src/hooks/utils.ts

@@ -0,0 +1,3 @@
+const createUnitializedProviderError = (contextName: string): Error => new Error(`${contextName} is unitialized`);
+
+export { createUnitializedProviderError };

package/src/index.css.ts

@@ -0,0 +1,26 @@
+/**
+ * CSS Styling Index
+ *
+ * This index file exports CSS-in-JS objects, theme definitions, and styling
+ * utilities for use with Vanilla Extract and other CSS-in-JS systems.
+ * Consumed via the "./styles.css" package export.
+ *
+ * Should export:
+ * - Theme objects and configurations (regalTheme, themeContract)
+ * - Vanilla Extract style recipes and variants
+ *
+ */
+
+/**
+ * Theming Exports
+ */
+
+export { themeContract } from './themes/tokens/tokens.css.js';
+
+export { regalTheme } from './themes/regal.css.js';
+
+/**
+ * Styling Exports
+ */
+
+export { darkColorScheme, lightColorScheme } from './themes/styles/color-scheme.css.js';

package/src/index.ts

@@ -0,0 +1,111 @@
+/**
+ * Main Package Index
+ *
+ * This is the primary entry point for the Lunar design system package.
+ * Exports all React components, TypeScript types, and JavaScript utilities
+ * that consumers need at runtime.
+ *
+ * Should export:
+ * - React components (Button, Text, Card, etc.)
+ * - Component prop types
+ * - Runtime utilities and helper functions
+ * - ThemeProvider and theme-related React functionality
+ *
+ */
+
+/**
+ * Component Exports
+ */
+export { default as ThemeProvider } from './themes/ThemeProvider/ThemeProvider.js';
+export { useTheme } from './hooks/theme.js';
+
+export { default as Button, type ButtonProps } from './components/primitives/Button/Button.js';
+export {
+  BUTTON_VARIANT__PRIMARY,
+  BUTTON_VARIANT__SECONDARY,
+  BUTTON_VARIANT__OUTLINE,
+  BUTTON_VARIANT__DESTRUCTIVE,
+  BUTTON_VARIANT__GHOST,
+  BUTTON_VARIANT__LINK,
+  BUTTON_SIZE__LARGE,
+  BUTTON_SIZE__MEDIUM,
+  BUTTON_SIZE__SMALL,
+} from './components/primitives/Button/button.css.js';
+export { default as Input } from './components/primitives/Input/Input.js';
+export { default as Label } from './components/primitives/Label/Label.js';
+export { default as Text, type TextProps } from './components/primitives/Typography/Text.js';
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+} from './components/composite/Card/Card.js';
+export {
+  TEXT_VARIANT__DISPLAY,
+  TEXT_VARIANT__HEADING,
+  TEXT_VARIANT__SUBHEADING,
+  TEXT_VARIANT__BODY,
+  TEXT_VARIANT__CAPTION,
+  TEXT_VARIANT__LABEL,
+  TEXT_SIZE__XL,
+  TEXT_SIZE__LG,
+  TEXT_SIZE__MD,
+  TEXT_SIZE__SM,
+  TEXT_COLOR__PRIMARY,
+  TEXT_COLOR__SECONDARY,
+  TEXT_COLOR__MUTED,
+  TEXT_COLOR__DISABLED,
+  TEXT_COLOR__INVERSE,
+  TEXT_COLOR__INTERACTIVE,
+  TEXT_COLOR__SUCCESS,
+  TEXT_COLOR__WARNING,
+  TEXT_COLOR__DANGER,
+  TEXT_COLOR__INFO,
+  TEXT_COLOR__BRAND,
+  TEXT_COLOR__ACCENT,
+  TEXT_WEIGHT__LIGHT,
+  TEXT_WEIGHT__MEDIUM,
+  TEXT_WEIGHT__BOLD,
+} from './components/primitives/Typography/text.css.js';
+export {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+} from './components/composite/Dialog/Dialog.js';
+export { useDialog } from './hooks/dialog.js';
+
+/**
+ * Styling Utility Exports
+ */
+export { withCustomOutline, withSafeTransition, withBreakpoint } from './themes/styles/utilities.js';
+
+export { BREAKPOINT__SM, BREAKPOINT__MD, BREAKPOINT__LG } from './constants/theming.js';
+export {
+  COLORS__PURE,
+  COLORS__STONE,
+  COLORS__RED,
+  COLORS__GREEN,
+  COLORS__GOLD,
+  COLORS__PEARL,
+  COLORS__YELLOW,
+  COLORS__BLUE,
+} from './themes/tokens/primitives/colors.js';
+export { SPACING } from './themes/tokens/primitives/spacing.js';
+export { BORDER_RADIUS, BORDER_WIDTH } from './themes/tokens/primitives/borders.js';
+export { BOX_SHADOW } from './themes/tokens/primitives/shadows.js';
+export {
+  FONT_FAMILY,
+  FONT_SIZE,
+  FONT_WEIGHT,
+  LETTER_SPACING,
+  LINE_HEIGHT__TIGHT,
+  LINE_HEIGHT__RELAXED,
+} from './themes/tokens/primitives/typography.js';
+export { COLOR_SCHEME__DARK, COLOR_SCHEME__LIGHT, COLOR_SCHEME__SYSTEM } from './constants/theming.js';
+export type { ColorScheme } from './types/theming.js';

package/src/themes/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,39 @@
+import { type ReactNode, createContext, useMemo } from 'react';
+import clsx from 'clsx';
+
+import { darkColorScheme, lightColorScheme } from '../styles/color-scheme.css.js';
+import type { ColorScheme } from '../../types/theming.js';
+import { COLOR_SCHEME__DARK, COLOR_SCHEME__LIGHT, COLOR_SCHEME__SYSTEM } from '../../constants/theming.js';
+
+interface ThemeProviderProps {
+  children: (themeClassName: string) => ReactNode;
+  themeClassName: string;
+  colorScheme?: ColorScheme;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+interface ThemeContextProps {}
+
+const ThemeContext = createContext<ThemeContextProps | null>(null);
+
+const ThemeProvider = ({ children, themeClassName, colorScheme = COLOR_SCHEME__SYSTEM }: ThemeProviderProps) => {
+  const colorSchemeOverrideClassName = useMemo(() => {
+    switch (colorScheme) {
+      case COLOR_SCHEME__LIGHT: {
+        return lightColorScheme;
+      }
+      case COLOR_SCHEME__DARK: {
+        return darkColorScheme;
+      }
+      default: {
+        return;
+      }
+    }
+  }, [colorScheme]);
+
+  return <ThemeContext value={{}}>{children(clsx(themeClassName, colorSchemeOverrideClassName))}</ThemeContext>;
+};
+
+export type { ThemeContextProps };
+export default ThemeProvider;
+export { ThemeContext };