@lunar-js/lunar 0.0.1

package/src/components/primitives/Button/button.css.ts

@@ -0,0 +1,236 @@
+import { createVar } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { themeContract } from '../../../themes/tokens/tokens.css.js';
+import { withCustomOutline, withSafeTransition } from '../../../themes/styles/utilities.js';
+import { COLORS__PURE } from '../../../themes/tokens/primitives/colors.js';
+
+const BUTTON_VARIANT__PRIMARY = 'primary';
+const BUTTON_VARIANT__SECONDARY = 'secondary';
+const BUTTON_VARIANT__OUTLINE = 'outline';
+const BUTTON_VARIANT__DESTRUCTIVE = 'destructive';
+const BUTTON_VARIANT__GHOST = 'ghost';
+const BUTTON_VARIANT__LINK = 'link';
+
+const BUTTON_SIZE__LARGE = 'large';
+const BUTTON_SIZE__MEDIUM = 'medium';
+const BUTTON_SIZE__SMALL = 'small';
+
+const internalFontSize = createVar();
+const internalPadding = createVar();
+
+const buttonVariants = recipe({
+  base: [
+    withCustomOutline(themeContract.colors.shadow.interactive),
+    withSafeTransition({ transition: 'all 0.2s ease-in-out' }),
+    {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: themeContract.borderRadius.md,
+      fontSize: internalFontSize,
+      padding: internalPadding,
+      fontWeight: themeContract.typography.body.md.medium.fontWeight,
+      gap: '0.5rem',
+      whiteSpace: 'nowrap',
+      flexShrink: 0,
+      border: '0',
+      cursor: 'pointer',
+      userSelect: 'none',
+      position: 'relative',
+      textDecoration: 'none',
+      outlineColor: COLORS__PURE.transparent,
+      ':disabled': {
+        cursor: 'not-allowed',
+      },
+    },
+  ],
+  variants: {
+    variant: {
+      [BUTTON_VARIANT__PRIMARY]: {
+        backgroundColor: themeContract.colors.action.bg.primary.default,
+        color: themeContract.colors.action.color.primary,
+        selectors: {
+          '&:hover:not(:disabled)': {
+            backgroundColor: themeContract.colors.action.bg.primary.hover,
+          },
+          '&:hover:not(:focus-visible)': {
+            boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`,
+          },
+          '&:active:not(:disabled)': {
+            backgroundColor: themeContract.colors.action.bg.primary.active,
+            transform: 'translateY(1px)',
+          },
+        },
+        ':disabled': {
+          backgroundColor: themeContract.colors.action.bg.primary.disabled,
+          color: themeContract.colors.text.disabled,
+        },
+      },
+      [BUTTON_VARIANT__SECONDARY]: {
+        backgroundColor: themeContract.colors.action.bg.secondary.default,
+        borderColor: themeContract.colors.border.action.secondary,
+        color: themeContract.colors.text.primary,
+        selectors: {
+          '&:hover:not(:disabled)': {
+            backgroundColor: themeContract.colors.action.bg.secondary.hover,
+            boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`,
+          },
+          '&:active:not(:disabled)': {
+            backgroundColor: themeContract.colors.action.bg.secondary.active,
+            transform: 'translateY(1px)',
+          },
+        },
+        ':disabled': {
+          backgroundColor: themeContract.colors.action.bg.secondary.disabled,
+          color: themeContract.colors.text.disabled,
+        },
+      },
+      [BUTTON_VARIANT__OUTLINE]: {
+        backgroundColor: themeContract.colors.action.bg.outline.default,
+        border: themeContract.borderWidth[1],
+        borderStyle: 'solid',
+        borderColor: themeContract.colors.border.interactive.default,
+        color: themeContract.colors.text.interactive.default,
+        selectors: {
+          '&:hover:not(:disabled)': {
+            backgroundColor: themeContract.colors.action.bg.outline.hover,
+            borderColor: themeContract.colors.border.interactive.hover,
+            color: themeContract.colors.text.interactive.hover,
+            boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`,
+          },
+          '&:active:not(:disabled)': {
+            backgroundColor: themeContract.colors.action.bg.outline.active,
+            borderColor: themeContract.colors.border.interactive.active,
+            color: themeContract.colors.text.interactive.active,
+            transform: 'translateY(1px)',
+          },
+        },
+        ':disabled': {
+          backgroundColor: themeContract.colors.action.bg.outline.disabled,
+          borderColor: themeContract.colors.border.action.disabled,
+          color: themeContract.colors.action.color.outline.disabled,
+        },
+      },
+      [BUTTON_VARIANT__GHOST]: {
+        backgroundColor: themeContract.colors.action.ghost.default,
+        borderColor: themeContract.colors.action.ghost.default,
+        color: themeContract.colors.text.interactive.default,
+        selectors: {
+          '&:hover:not(:disabled)': {
+            backgroundColor: themeContract.colors.action.ghost.hover,
+            color: themeContract.colors.text.interactive.hover,
+          },
+          '&:active:not(:disabled)': {
+            backgroundColor: themeContract.colors.action.ghost.active,
+            color: themeContract.colors.text.interactive.active,
+            transform: 'translateY(1px)',
+          },
+        },
+        ':disabled': {
+          backgroundColor: themeContract.colors.action.ghost.disabled,
+          color: themeContract.colors.text.disabled,
+        },
+      },
+      [BUTTON_VARIANT__LINK]: [
+        withSafeTransition({
+          transition: 'background-size 400ms',
+        }),
+        {
+          alignSelf: 'center',
+          color: themeContract.colors.text.interactive.default,
+          background: `none, linear-gradient(to right, ${themeContract.colors.text.interactive.hover}, ${themeContract.colors.text.interactive.hover})`,
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: '100% 100%, 0 100%',
+          backgroundSize: `100% calc(${internalFontSize} / 4), 0 calc(${internalFontSize} / 4)`,
+          borderRadius: themeContract.borderRadius.none,
+          textWrap: 'nowrap',
+          padding: '0',
+          paddingBottom: '0.2em',
+          height: 'min-content',
+          selectors: {
+            '&:hover:not(:disabled)': {
+              backgroundSize: `0 calc(${internalFontSize} / 4), 100% calc(${internalFontSize} / 4)`,
+              color: themeContract.colors.text.interactive.hover,
+            },
+            '&:focus:not(:disabled)': {
+              backgroundSize: `0 calc(${internalFontSize} / 4), 100% calc(${internalFontSize} / 4)`,
+              color: themeContract.colors.text.interactive.hover,
+            },
+            '&:active:not(:disabled)': {
+              backgroundSize: `0 calc(${internalFontSize} / 4), 100% calc(${internalFontSize} / 4)`,
+              color: themeContract.colors.text.interactive.active,
+            },
+          },
+          ':disabled': {
+            color: themeContract.colors.text.disabled,
+            textDecoration: 'none',
+          },
+          ':focus-visible': {
+            boxShadow: 'none',
+          },
+        },
+      ],
+      [BUTTON_VARIANT__DESTRUCTIVE]: [
+        withCustomOutline(themeContract.colors.shadow.destructive),
+        {
+          backgroundColor: themeContract.colors.action.destructive.default,
+          borderColor: themeContract.colors.border.action.destructive,
+          color: themeContract.colors.text.inverse,
+          selectors: {
+            '&:hover:not(:disabled)': {
+              backgroundColor: themeContract.colors.action.destructive.hover,
+              boxShadow: `0 1px 3px ${themeContract.colors.shadow.subtle}`,
+            },
+            '&:active:not(:disabled)': {
+              backgroundColor: themeContract.colors.action.destructive.active,
+              transform: 'translateY(1px)',
+            },
+          },
+          ':disabled': {
+            backgroundColor: themeContract.colors.action.destructive.disabled,
+            borderColor: themeContract.colors.border.action.disabled,
+            color: themeContract.colors.text.disabled,
+          },
+        },
+      ],
+    },
+    size: {
+      [BUTTON_SIZE__SMALL]: {
+        vars: {
+          [internalFontSize]: themeContract.typography.body.sm.medium.fontSize,
+          [internalPadding]: `${themeContract.spacing[1.5]} ${themeContract.spacing[3]}`,
+        },
+      },
+      [BUTTON_SIZE__MEDIUM]: {
+        vars: {
+          [internalFontSize]: themeContract.typography.body.md.medium.fontSize,
+          [internalPadding]: `${themeContract.spacing[2]} ${themeContract.spacing[4]}`,
+        },
+      },
+      [BUTTON_SIZE__LARGE]: {
+        vars: {
+          [internalFontSize]: themeContract.typography.body.lg.medium.fontSize,
+          [internalPadding]: `${themeContract.spacing[3]} ${themeContract.spacing[6]}`,
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    variant: BUTTON_VARIANT__PRIMARY,
+    size: BUTTON_SIZE__MEDIUM,
+  },
+});
+
+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,
+  buttonVariants,
+};

package/src/components/primitives/Button/button.types.ts

@@ -0,0 +1,23 @@
+import type {
+  BUTTON_SIZE__LARGE,
+  BUTTON_SIZE__MEDIUM,
+  BUTTON_SIZE__SMALL,
+  BUTTON_VARIANT__DESTRUCTIVE,
+  BUTTON_VARIANT__GHOST,
+  BUTTON_VARIANT__LINK,
+  BUTTON_VARIANT__OUTLINE,
+  BUTTON_VARIANT__PRIMARY,
+  BUTTON_VARIANT__SECONDARY,
+} from './button.css.js';
+
+type ButtonVariant =
+  | typeof BUTTON_VARIANT__PRIMARY
+  | typeof BUTTON_VARIANT__SECONDARY
+  | typeof BUTTON_VARIANT__OUTLINE
+  | typeof BUTTON_VARIANT__DESTRUCTIVE
+  | typeof BUTTON_VARIANT__GHOST
+  | typeof BUTTON_VARIANT__LINK;
+
+type ButtonSize = typeof BUTTON_SIZE__LARGE | typeof BUTTON_SIZE__MEDIUM | typeof BUTTON_SIZE__SMALL;
+
+export type { ButtonVariant, ButtonSize };

package/src/components/primitives/Input/Input.tsx

@@ -0,0 +1,13 @@
+import { type ComponentProps, type FC } from 'react';
+import clsx from 'clsx';
+import { input } from './input.css.js';
+
+/**
+ * Standard input component with consistent styling and design system integration.
+ * Extends native HTML input element with theme-aware styling.
+ */
+const Input: FC<ComponentProps<'input'>> = ({ className, ...props }) => {
+  return <input data-slot="input" className={clsx(input, className)} {...props} />;
+};
+
+export default Input;

package/src/components/primitives/Input/input.css.ts

@@ -0,0 +1,64 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeContract } from '../../../themes/tokens/tokens.css.js';
+import { withBreakpoint, withCustomOutline, withSafeTransition } from '../../../themes/styles/utilities.js';
+import { BREAKPOINT__MD } from '../../../constants/theming.js';
+import { COLORS__PURE } from '../../../themes/tokens/primitives/colors.js';
+
+const input = style([
+  withBreakpoint(BREAKPOINT__MD, {
+    fontSize: themeContract.typography.body.sm.medium.fontSize,
+  }),
+  withCustomOutline(themeContract.colors.shadow.focus),
+  withSafeTransition({
+    transition: 'color 150ms ease-in-out, box-shadow 150ms ease-in-out',
+  }),
+  {
+    width: '100%',
+    minWidth: 0,
+    boxSizing: 'border-box',
+    borderRadius: themeContract.borderRadius.md,
+    border: `${themeContract.borderWidth[1]} solid ${themeContract.colors.input.border.default}`,
+    backgroundColor: COLORS__PURE.transparent,
+    paddingLeft: themeContract.spacing[3],
+    paddingRight: themeContract.spacing[3],
+    paddingTop: themeContract.spacing[1],
+    paddingBottom: themeContract.spacing[1],
+    fontSize: themeContract.typography.body.md.medium.fontSize,
+    lineHeight: themeContract.typography.body.md.medium.lineHeight,
+    boxShadow: themeContract.boxShadow.sm,
+    color: themeContract.colors.text.primary,
+    selectors: {
+      '&[aria-invalid="true"]': {
+        borderColor: themeContract.colors.border.error,
+      },
+      ...withCustomOutline(themeContract.colors.shadow.destructive, '&[aria-invalid="true"]'),
+    },
+
+    '::file-selector-button': {
+      display: 'inline-flex',
+      border: 0,
+      backgroundColor: COLORS__PURE.transparent,
+      fontSize: themeContract.typography.body.md.medium.fontSize,
+      fontWeight: themeContract.typography.body.md.medium.fontWeight,
+      color: themeContract.colors.text.primary,
+    },
+
+    '::placeholder': {
+      color: themeContract.colors.input.text.placeholder,
+    },
+
+    '::selection': {
+      backgroundColor: themeContract.colors.action.bg.primary.default,
+      color: themeContract.colors.action.color.primary,
+    },
+
+    ':disabled': {
+      pointerEvents: 'none',
+      cursor: 'not-allowed',
+      opacity: '0.5',
+    },
+  },
+]);
+
+export { input };

package/src/components/primitives/Label/Label.tsx

@@ -0,0 +1,15 @@
+import { type ComponentProps, type FC } from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import clsx from 'clsx';
+
+import { label } from './label.css.js';
+
+/**
+ * Accessible label component built on Radix UI's Label primitive.
+ * Provides proper form control labeling with consistent styling.
+ */
+const Label: FC<ComponentProps<typeof LabelPrimitive.Root>> = ({ className, ...props }) => {
+  return <LabelPrimitive.Root data-slot="label" className={clsx(label, className)} {...props} />;
+};
+
+export default Label;

package/src/components/primitives/Label/label.css.ts

@@ -0,0 +1,39 @@
+import { style } from '@vanilla-extract/css';
+
+import { themeContract } from '../../../themes/tokens/tokens.css.js';
+
+const label = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: themeContract.spacing[2],
+
+  fontSize: themeContract.typography.label.lg.medium.fontSize,
+  lineHeight: themeContract.typography.label.lg.medium.lineHeight,
+  fontWeight: themeContract.typography.label.lg.medium.fontWeight,
+
+  userSelect: 'none',
+
+  selectors: {
+    '[data-disabled="true"] &': {
+      pointerEvents: 'none',
+      opacity: 0.5,
+    },
+
+    ':disabled + &': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+
+    'input:disabled + &': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+
+    ':is(input, select, textarea):disabled + &': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+  },
+});
+
+export { label };

package/src/components/primitives/Typography/Text.tsx

@@ -0,0 +1,55 @@
+import type { ComponentProps, FC } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import clsx from 'clsx';
+
+import { textVariants } from './text.css.js';
+import type { TextColor, TextSize, TextType, TextWeight } from './text.types.js';
+
+interface TextProps extends ComponentProps<'h1'> {
+  /**
+   * When true, the component will render as a child component using Radix UI's Slot primitive.
+   * This allows the text styles to be applied to any element while maintaining accessibility.
+   */
+  asChild?: boolean;
+  /**
+   * HTML element to render as.
+   */
+  as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'small';
+  /**
+   * Text style variant that determines the overall visual appearance.
+   */
+  variant?: TextType;
+  /**
+   * Visual size variant - independent of semantic HTML element.
+   * Allows for flexible styling while maintaining proper semantic structure.
+   */
+  size?: TextSize;
+  /**
+   * Color variant for the text.
+   */
+  color?: TextColor;
+  /**
+   * Font weight variant for the text.
+   */
+  weight?: TextWeight;
+}
+
+/**
+ * Flexible text component that supports multiple HTML elements with consistent styling.
+ * Allows semantic HTML structure while providing design system typography variants.
+ */
+const Text: FC<TextProps> = ({ ref, className, asChild, as: tag, variant, size, color, weight, ...props }) => {
+  const Comp = asChild ? Slot : tag;
+
+  return (
+    <Comp
+      ref={ref}
+      data-slot={tag}
+      className={clsx(textVariants({ variant, size, color, weight }), className)}
+      {...props}
+    />
+  );
+};
+
+export type { TextProps };
+export default Text;