veloria-ui 0.1.2

package/src/tailwind.ts

@@ -0,0 +1,124 @@
+import type { Config } from "tailwindcss";
+
+// tailwindcss is a peerDep — it lives in the consumer's node_modules, never
+// bundled into veloria-ui. We require() at runtime so tsup marks it external
+// correctly instead of trying to resolve it at build time.
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const plugin = require("tailwindcss/plugin") as (
+  handler: Parameters<typeof import("tailwindcss/plugin")>[0],
+  config?: Parameters<typeof import("tailwindcss/plugin")>[1]
+) => ReturnType<typeof import("tailwindcss/plugin")>;
+
+/**
+ * Veloria UI Tailwind plugin.
+ *
+ * Maps the CSS custom properties in atlas.css to Tailwind utilities.
+ * Add to your tailwind.config.ts:
+ *
+ *   import { atlasPlugin } from "veloria-ui/tailwind";
+ *   plugins: [atlasPlugin],
+ *
+ * Or use atlasPreset which also sets darkMode: ["class"]:
+ *
+ *   import { atlasPreset } from "veloria-ui/tailwind";
+ *   presets: [atlasPreset],
+ */
+export const atlasPlugin = plugin(
+  ({ addBase, addUtilities }) => {
+    addBase({
+      "*": { "border-color": "hsl(var(--border))" },
+      body: {
+        "background-color": "hsl(var(--background))",
+        color: "hsl(var(--foreground))",
+      },
+    });
+    addUtilities({
+      ".text-balance": { "text-wrap": "balance" },
+      ".text-pretty":  { "text-wrap": "pretty" },
+    });
+  },
+  {
+    theme: {
+      extend: {
+        colors: {
+          background:  "hsl(var(--background))",
+          foreground:  "hsl(var(--foreground))",
+          card: {
+            DEFAULT:    "hsl(var(--card))",
+            foreground: "hsl(var(--card-foreground))",
+          },
+          popover: {
+            DEFAULT:    "hsl(var(--popover))",
+            foreground: "hsl(var(--popover-foreground))",
+          },
+          primary: {
+            DEFAULT:    "hsl(var(--primary))",
+            foreground: "hsl(var(--primary-foreground))",
+          },
+          secondary: {
+            DEFAULT:    "hsl(var(--secondary))",
+            foreground: "hsl(var(--secondary-foreground))",
+          },
+          muted: {
+            DEFAULT:    "hsl(var(--muted))",
+            foreground: "hsl(var(--muted-foreground))",
+          },
+          accent: {
+            DEFAULT:    "hsl(var(--accent))",
+            foreground: "hsl(var(--accent-foreground))",
+          },
+          destructive: {
+            DEFAULT:    "hsl(var(--destructive))",
+            foreground: "hsl(var(--destructive-foreground))",
+          },
+          success: {
+            DEFAULT:    "hsl(var(--success))",
+            foreground: "hsl(var(--success-foreground))",
+          },
+          warning: {
+            DEFAULT:    "hsl(var(--warning))",
+            foreground: "hsl(var(--warning-foreground))",
+          },
+          info: {
+            DEFAULT:    "hsl(var(--info))",
+            foreground: "hsl(var(--info-foreground))",
+          },
+          border: "hsl(var(--border))",
+          input:  "hsl(var(--input))",
+          ring:   "hsl(var(--ring))",
+        },
+        borderRadius: {
+          lg: "var(--radius)",
+          md: "calc(var(--radius) - 2px)",
+          sm: "calc(var(--radius) - 4px)",
+        },
+        fontFamily: {
+          sans: ["var(--font-sans)"],
+          mono: ["var(--font-mono)"],
+        },
+        keyframes: {
+          "accordion-down": {
+            from: { height: "0" },
+            to:   { height: "var(--radix-accordion-content-height)" },
+          },
+          "accordion-up": {
+            from: { height: "var(--radix-accordion-content-height)" },
+            to:   { height: "0" },
+          },
+        },
+        animation: {
+          "accordion-down": "accordion-down 0.2s ease-out",
+          "accordion-up":   "accordion-up 0.2s ease-out",
+        },
+      },
+    },
+  }
+);
+
+/** Full preset — includes the plugin + darkMode: ["class"]. Recommended for new projects. */
+export const atlasPreset: Partial<Config> = {
+  darkMode: ["class"],
+  plugins: [atlasPlugin],
+};
+
+export default atlasPlugin;

package/src/types/index.ts

@@ -0,0 +1,95 @@
+import { type VariantProps } from "class-variance-authority";
+import React from "react";
+
+// ─── Size System ────────────────────────────────────────────────────────────
+
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+export type ResponsiveSize = Size | Partial<Record<"base" | "sm" | "md" | "lg" | "xl", Size>>;
+
+// ─── Color Variants ─────────────────────────────────────────────────────────
+
+export type ColorScheme =
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "neutral"
+  | "ghost";
+
+// ─── Visual Variants ────────────────────────────────────────────────────────
+
+export type Variant = "solid" | "outline" | "ghost" | "soft" | "link";
+
+// ─── Placement ──────────────────────────────────────────────────────────────
+
+export type Placement =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end"
+  | "right"
+  | "right-start"
+  | "right-end";
+
+export type Side = "top" | "right" | "bottom" | "left";
+
+// ─── Shared Component Props ──────────────────────────────────────────────────
+
+export interface AtlasBaseProps {
+  /** Additional CSS class names */
+  className?: string;
+  /** Inline style overrides */
+  style?: React.CSSProperties;
+  /** Data attributes passthrough */
+  [key: `data-${string}`]: unknown;
+}
+
+export interface AtlasAriaProps {
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-hidden"?: boolean;
+  id?: string;
+}
+
+// ─── Polymorphic Component Support ──────────────────────────────────────────
+
+export type AsChildProps<T extends React.ElementType = React.ElementType> = {
+  asChild?: boolean;
+  as?: T;
+};
+
+export type PolymorphicRef<C extends React.ElementType> =
+  React.ComponentPropsWithRef<C>["ref"];
+
+export type PolymorphicComponentPropsWithRef<
+  C extends React.ElementType,
+  Props = object
+> = Props &
+  Omit<React.ComponentPropsWithRef<C>, keyof Props> & {
+    as?: C;
+    ref?: PolymorphicRef<C>;
+  };
+
+// ─── Orientation ─────────────────────────────────────────────────────────────
+
+export type Orientation = "horizontal" | "vertical";
+
+// ─── Status ──────────────────────────────────────────────────────────────────
+
+export type Status = "idle" | "loading" | "success" | "error" | "warning";
+
+// ─── Theme ───────────────────────────────────────────────────────────────────
+
+export type Theme = "light" | "dark" | "system";
+
+// ─── Re-exports ───────────────────────────────────────────────────────────────
+
+export type { VariantProps };

package/src/utils/cn.ts

@@ -0,0 +1,66 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges Tailwind classes without conflicts.
+ * Wrapper around clsx + tailwind-merge — use this everywhere in Veloria UI
+ * instead of raw string concatenation.
+ *
+ * @example
+ * cn("px-4 py-2", isLarge && "px-8", className)
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Chains two event handlers so both fire, but respects defaultPrevented
+ * on the original handler before calling ours.
+ */
+export function composeEventHandlers<E>(
+  originalEventHandler?: (event: E) => void,
+  ourEventHandler?: (event: E) => void,
+  { checkForDefaultPrevented = true } = {}
+) {
+  return function handleEvent(event: E) {
+    originalEventHandler?.(event);
+    if (
+      !checkForDefaultPrevented ||
+      !(event as unknown as Event).defaultPrevented
+    ) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+
+/**
+ * Quick incrementing ID generator — used for linking labels to inputs
+ * when no explicit id prop is passed.
+ */
+let idCounter = 0;
+export function generateId(prefix = "atlas"): string {
+  return `${prefix}-${++idCounter}`;
+}
+
+/** True only in browser environments. Guards SSR code paths. */
+export const isBrowser = typeof window !== "undefined";
+
+/** A do-nothing function. Handy as a default prop value. */
+export const noop = () => undefined;
+
+/** Narrows out null and undefined from a value. */
+export function isDefined<T>(value: T | undefined | null): value is T {
+  return value !== undefined && value !== null;
+}
+
+/**
+ * Filters React.Children down to only valid elements.
+ * Useful when mapping children and you need to skip strings/nulls.
+ */
+export function getValidChildren(children: React.ReactNode) {
+  return React.Children.toArray(children).filter((child) =>
+    React.isValidElement(child)
+  ) as React.ReactElement[];
+}
+
+import React from "react";