@atlas-art/ui-react 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlas-art/ui-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -18,7 +18,9 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src",
+    "README.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -35,7 +37,7 @@
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",
-    "@atlas-art/ui-core": "0.1.0"
+    "@atlas-art/ui-core": "0.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/adapters/react-router/app-link.tsx

@@ -0,0 +1,34 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { forwardRef } from "react";
+import { Link, type LinkProps } from "react-router";
+import { cn } from "@atlas-art/ui-core";
+
+const appLinkVariants = cva("transition", {
+  variants: {
+    variant: {
+      primary: "font-medium text-(--app-active-text) hover:underline",
+      muted: "text-sm text-(--app-muted-text) hover:text-(--app-text)",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+  },
+});
+
+export interface AppLinkProps
+  extends LinkProps,
+    VariantProps<typeof appLinkVariants> {
+  className?: string;
+}
+
+export const AppLink = forwardRef<HTMLAnchorElement, AppLinkProps>(
+  ({ className, variant, ...props }, ref) => (
+    <Link
+      ref={ref}
+      className={cn(appLinkVariants({ variant }), className)}
+      {...props}
+    />
+  ),
+);
+
+AppLink.displayName = "AppLink";

package/src/adapters/react-router/index.ts

@@ -0,0 +1 @@
+export * from "./app-link";

package/src/components/hooks/useComposedRefs.ts

@@ -0,0 +1,18 @@
+import type { Ref } from "react";
+
+function setRef<T>(ref: Ref<T> | undefined, value: T) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+
+  if (ref && typeof ref === "object") {
+    (ref as { current: T }).current = value;
+  }
+}
+
+export function composeRefs<T>(...refs: Array<Ref<T> | undefined>) {
+  return (node: T) => {
+    refs.forEach((ref) => setRef(ref, node));
+  };
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from "./ui";

package/src/components/ui/button.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+import { buttonVariants, type ButtonVariantProps } from "@atlas-art/ui-core";
+import { cn } from "@atlas-art/ui-core";
+
+export interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    ButtonVariantProps {}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, fullWidth, type = "button", ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn(buttonVariants({ variant, size, fullWidth }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+Button.displayName = "Button";

package/src/components/ui/card.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cardVariants, type CardVariantProps } from "@atlas-art/ui-core";
+import { cn } from "@atlas-art/ui-core";
+
+export interface CardProps
+  extends HTMLAttributes<HTMLDivElement>,
+    CardVariantProps {}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, padding, shadow, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(cardVariants({ padding, shadow }), className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("mb-3 flex flex-col gap-1.5", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-base font-semibold", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-(--app-muted-text)", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("space-y-3", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("mt-4 flex items-center gap-2", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";

package/src/components/ui/form-field.tsx

@@ -0,0 +1,36 @@
+import {
+  createContext,
+  type HTMLAttributes,
+  type LabelHTMLAttributes,
+} from "react";
+import {
+  errorVariants,
+  fieldVariants,
+  labelVariants,
+} from "@atlas-art/ui-core";
+import { cn } from "@atlas-art/ui-core";
+
+interface FormFieldContextValue {
+  hasError: boolean;
+}
+
+const FormFieldContext = createContext<FormFieldContextValue>({ hasError: false });
+
+export interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
+  error?: string;
+}
+
+export function FormField({ className, error, children, ...props }: FormFieldProps) {
+  return (
+    <FormFieldContext.Provider value={{ hasError: Boolean(error) }}>
+      <div className={cn(fieldVariants(), className)} {...props}>
+        {children}
+        {error ? <p className={errorVariants()}>{error}</p> : null}
+      </div>
+    </FormFieldContext.Provider>
+  );
+}
+
+export function FormFieldLabel({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
+  return <label className={cn(labelVariants(), className)} {...props} />;
+}

package/src/components/ui/index.ts

@@ -0,0 +1,7 @@
+export * from "./button";
+export * from "./input";
+export * from "./card";
+export * from "./form-field";
+export * from "./typography";
+export * from "./split-card";
+export * from "./stack";

package/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, type InputHTMLAttributes } from "react";
+import { inputVariants, type InputVariantProps } from "@atlas-art/ui-core";
+import { cn } from "@atlas-art/ui-core";
+
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size">,
+    InputVariantProps {}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, size, state, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        className={cn(inputVariants({ size, state }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+Input.displayName = "Input";

package/src/components/ui/split-card.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import {
+  splitCardAsideVariants,
+  splitCardMainVariants,
+  splitCardVariants,
+  type SplitCardVariantProps,
+} from "@atlas-art/ui-core";
+import { cn } from "@atlas-art/ui-core";
+
+export interface SplitCardProps
+  extends HTMLAttributes<HTMLDivElement>,
+    SplitCardVariantProps {}
+
+export const SplitCard = forwardRef<HTMLDivElement, SplitCardProps>(
+  ({ className, columns, ...props }, ref) => (
+    <div ref={ref} className={cn(splitCardVariants({ columns }), className)} {...props} />
+  ),
+);
+SplitCard.displayName = "SplitCard";
+
+export const SplitCardAside = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <section ref={ref} className={cn(splitCardAsideVariants(), className)} {...props} />
+  ),
+);
+SplitCardAside.displayName = "SplitCardAside";
+
+export const SplitCardMain = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <section ref={ref} className={cn(splitCardMainVariants(), className)} {...props} />
+  ),
+);
+SplitCardMain.displayName = "SplitCardMain";
+
+export const SplitCardDecoration = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "pointer-events-none absolute -bottom-14 -right-14 h-44 w-44 rounded-full border border-(--app-border)",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+SplitCardDecoration.displayName = "SplitCardDecoration";

package/src/components/ui/stack.tsx

@@ -0,0 +1,18 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { stackVariants, type StackVariantProps } from "@atlas-art/ui-core";
+import { cn } from "@atlas-art/ui-core";
+
+export interface StackProps
+  extends HTMLAttributes<HTMLDivElement>, StackVariantProps {}
+
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  ({ className, gap, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(stackVariants({ gap }), className)}
+      {...props}
+    />
+  ),
+);
+
+Stack.displayName = "Stack";

package/src/components/ui/typography.tsx

@@ -0,0 +1,16 @@
+import { type ElementType, type HTMLAttributes } from "react";
+import { textVariants, type TextVariantProps } from "@atlas-art/ui-core";
+import { cn } from "@atlas-art/ui-core";
+
+type TypographyElement = ElementType;
+
+export interface TextProps
+  extends HTMLAttributes<HTMLElement>,
+    TextVariantProps {
+  as?: TypographyElement;
+}
+
+export function Text({ as, className, variant, ...props }: TextProps) {
+  const Component = as ?? "p";
+  return <Component className={cn(textVariants({ variant }), className)} {...props} />;
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./components";