@cognite/aura 0.1.0

package/dist/lib/ai/types.d.ts

@@ -0,0 +1,53 @@
+export type ChatStatus = 'submitted' | 'streaming' | 'ready' | 'error';
+export type TextUIPart = {
+    type: 'text';
+    value: string;
+};
+export type FileUIPart = {
+    type: 'file';
+    /**
+     * IANA media type of the file.
+     */
+    mediaType: string;
+    /**
+     * Optional filename of the file.
+     */
+    filename?: string;
+    /**
+     * The URL of the file.
+     * It can either be a URL to a hosted file or a Data URL.
+     */
+    url: string;
+};
+/**
+ * Simplified ToolUIPart type for basic tool rendering.
+ * Full type in AI SDK is more complex with generics and state management.
+ */
+export type ToolUIPart = {
+    type: string;
+    toolCallId?: string;
+    toolName?: string;
+    input?: unknown;
+    output?: unknown;
+    errorText?: string;
+    state?: 'input-streaming' | 'input-available' | 'output-available' | 'output-error';
+};
+export type MessageUIPart = TextUIPart | FileUIPart | ToolUIPart;
+export interface UIMessage<METADATA = unknown> {
+    /**
+     * A unique identifier for the message.
+     */
+    id: string;
+    /**
+     * The role of the message.
+     */
+    role: 'system' | 'user' | 'assistant';
+    /**
+     * The metadata of the message.
+     */
+    metadata?: METADATA;
+    /**
+     * The parts of the message. Use this for rendering the message in the UI.
+     */
+    parts: Array<MessageUIPart>;
+}

package/dist/lib/component-status-config.d.ts

@@ -0,0 +1,12 @@
+import { StatusConfig, ComponentStatusType } from './types';
+export declare const STATUS_CONFIG: Record<ComponentStatusType, StatusConfig>;
+/**
+ * Get the configuration for a specific status type.
+ * Falls back to 'draft' if status is not recognized.
+ */
+export declare function getStatusConfig(status: ComponentStatusType): StatusConfig;
+/**
+ * Get inline styles for a status badge that work in both light and dark modes.
+ * Uses CSS custom properties for dark mode support.
+ */
+export declare function getStatusStyles(status: ComponentStatusType, isDark?: boolean): React.CSSProperties;

package/dist/lib/style-scope.d.ts

@@ -0,0 +1,5 @@
+declare const styleScope: {
+    readonly styleScope: "aura-style-scope";
+    readonly portalContainer: "aura-portal-container";
+};
+export default styleScope;

package/dist/lib/style-scope.js

@@ -0,0 +1,7 @@
+const a = {
+  styleScope: "aura-style-scope",
+  portalContainer: "aura-portal-container"
+};
+export {
+  a as default
+};

package/dist/lib/types.d.ts

@@ -0,0 +1,50 @@
+export interface ComponentExample {
+    title: string;
+    description: string;
+    component: React.ComponentType;
+    code: string;
+    tags?: string[];
+    difficulty?: 'beginner' | 'intermediate' | 'advanced';
+    notes?: string;
+    category?: 'usage' | 'variants' | 'advanced';
+}
+export type ComponentExamples = Record<string, ComponentExample>;
+export interface PropDefinition {
+    name: string;
+    type: string;
+    default?: string;
+    required?: boolean;
+    description: string;
+}
+export interface ComponentMeta {
+    name: string;
+    description: string;
+    /** Component status - defaults to 'draft' if not specified */
+    status?: ComponentStatusType;
+    llmUsage?: string;
+    importPath?: string;
+    apiReference?: {
+        props: PropDefinition[];
+    };
+    relatedComponents?: string[];
+    notes?: string[];
+    codeExamples?: CodeExample[];
+}
+export interface CodeExample {
+    /** Title of the code example */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** The actual code string */
+    code: string;
+}
+export type ComponentStatusType = 'deprecated' | 'planned' | 'shadcn-ui' | 'experimental' | 'draft' | 'in-progress-storybook' | 'in-progress-code-review' | 'in-progress-chromatic' | 'in-progress-design-conformance' | 'ready-for-ga' | 'stable';
+export interface StatusConfig {
+    label: string;
+    color: string;
+    colorDark: string;
+    bgColor: string;
+    bgColorDark: string;
+    borderColor: string;
+    borderColorDark: string;
+}

package/dist/lib/use-controllable-state.d.ts

@@ -0,0 +1,11 @@
+type UseControllableStateParams<T> = {
+    prop?: T;
+    defaultProp: T;
+    onChange?: (next: T) => void;
+};
+type SetStateAction<T> = T | ((prev: T) => T);
+export declare function useControllableState<T>({ prop, defaultProp, onChange, }: UseControllableStateParams<T>): readonly [
+    T,
+    (next: SetStateAction<T>) => void
+];
+export {};

package/dist/lib/use-controllable-state.js

@@ -0,0 +1,32 @@
+import * as o from "react";
+function l(e) {
+  return typeof e == "function";
+}
+function R({
+  prop: e,
+  defaultProp: a,
+  onChange: r
+}) {
+  const [f, i] = o.useState(a), u = e !== void 0, d = u ? e : f, n = o.useRef(r);
+  o.useEffect(() => {
+    n.current = r;
+  }, [r]);
+  const v = o.useCallback(
+    (t) => {
+      if (u) {
+        const s = l(t) ? t(e) : t;
+        n.current?.(s);
+        return;
+      }
+      i((s) => {
+        const c = l(t) ? t(s) : t;
+        return n.current?.(c), c;
+      });
+    },
+    [u, e]
+  );
+  return [d, v];
+}
+export {
+  R as useControllableState
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,45 @@
+import { ClassValue } from 'clsx';
+import { BundledLanguage } from 'shiki';
+type PortalContainerOptions = {
+    id?: string;
+    className?: string;
+    style?: Partial<CSSStyleDeclaration>;
+};
+export declare function cn(...inputs: ClassValue[]): string;
+export declare const isStorybookTestEnv: boolean;
+export declare function highlightCode(code: string, language: BundledLanguage, showLineNumbers?: boolean): Promise<[string, string]>;
+export declare function getInitials(name: string): string;
+/**
+ * Focus rings for non-form interactive elements (buttons, etc.).
+ * These provide only the shadow-based focus ring without background/border changes.
+ */
+export declare const focusRing: "focus-visible:shadow-focus-ring outline-none";
+export declare const focusRingDestructive: "focus-visible:shadow-focus-ring-destructive outline-none";
+/**
+ * Reusable form element state Tailwind classes.
+ * Import these to maintain consistent styling across all form components.
+ */
+export declare const formElementBase: "rounded-md border border-border bg-background p-1.75 text-base leading-5 tracking-tightest text-muted-foreground";
+export declare const hoverState: "hover:bg-accent hover:text-accent-foreground";
+export declare const filledState: "filled:bg-background filled:border-border filled:text-foreground";
+export declare const focusState: "focus-visible:shadow-focus-ring focus-visible:bg-background focus-visible:border-transparent focus-visible:text-foreground outline-none";
+export declare const invalidState: "aria-invalid:border-destructive-foreground aria-invalid:focus-visible:shadow-focus-ring-destructive aria-invalid:focus-visible:border-transparent aria-invalid:focus-visible:text-foreground outline-none";
+export declare const disabledState: "disabled:bg-disabled disabled:border-transparent disabled:text-disabled-foreground disabled:pointer-events-none disabled:cursor-not-allowed";
+export declare const readOnlyState: "read-only:border-transparent read-only:text-foreground read-only:cursor-default read-only:hover:border-transparent read-only:focus-visible:shadow-none read-only:focus-visible:border-transparent";
+export declare function slugToPascalCase(slug: string): string;
+/**
+ * Safely extracts hostname from a URL string.
+ * Returns the hostname if valid, otherwise returns the original string or "unknown".
+ *
+ * @param url - URL string to extract hostname from (optional)
+ * @returns The hostname, original string, or "unknown" if url is undefined
+ */
+export declare function getHostname(url: string | undefined): string;
+/**
+ * Gets or creates the portal container for portalled UI components.
+ * Container is created in document.body to avoid positioning issues
+ * from the shell app's container query context.
+ * The result is cached to avoid side effects on subsequent calls during React renders.
+ */
+export declare const getPortalContainer: (options?: PortalContainerOptions) => HTMLElement | undefined;
+export {};

package/dist/lib/utils.js

@@ -0,0 +1,92 @@
+import { clsx as u } from "clsx";
+import { codeToHtml as a } from "shiki";
+import { twMerge as f } from "tailwind-merge";
+import d from "./style-scope.js";
+let s = null, l = !1;
+function y(...e) {
+  return f(u(e));
+}
+const w = typeof window < "u" && window.__STORYBOOK_TEST__ === !0, b = {
+  name: "strip-pre-styles",
+  pre(e) {
+    e.properties.style = void 0;
+  }
+}, p = {
+  name: "line-numbers",
+  line(e, o) {
+    e.children.unshift({
+      type: "element",
+      tagName: "span",
+      properties: {
+        className: [
+          "inline-block",
+          "min-w-10",
+          "mr-4",
+          "text-right",
+          "select-none",
+          "text-muted-foreground"
+        ]
+      },
+      children: [{ type: "text", value: String(o) }]
+    });
+  }
+};
+async function x(e, o, n = !1) {
+  const r = [
+    b,
+    ...n ? [p] : []
+  ];
+  return await Promise.all([
+    a(e, {
+      lang: o,
+      theme: "one-light",
+      transformers: r
+    }),
+    a(e, {
+      lang: o,
+      theme: "one-dark-pro",
+      transformers: r
+    })
+  ]);
+}
+const C = "focus-visible:shadow-focus-ring outline-none", S = "focus-visible:shadow-focus-ring-destructive outline-none", k = "rounded-md border border-border bg-background p-1.75 text-base leading-5 tracking-tightest text-muted-foreground", P = "hover:bg-accent hover:text-accent-foreground", T = "filled:bg-background filled:border-border filled:text-foreground", E = "focus-visible:shadow-focus-ring focus-visible:bg-background focus-visible:border-transparent focus-visible:text-foreground outline-none", N = "aria-invalid:border-destructive-foreground aria-invalid:focus-visible:shadow-focus-ring-destructive aria-invalid:focus-visible:border-transparent aria-invalid:focus-visible:text-foreground outline-none", O = "disabled:bg-disabled disabled:border-transparent disabled:text-disabled-foreground disabled:pointer-events-none disabled:cursor-not-allowed", _ = "read-only:border-transparent read-only:text-foreground read-only:cursor-default read-only:hover:border-transparent read-only:focus-visible:shadow-none read-only:focus-visible:border-transparent";
+function B(e) {
+  if (!e) return "unknown";
+  try {
+    return new URL(e).hostname;
+  } catch {
+    return e;
+  }
+}
+const R = (e) => {
+  const o = !!e, n = d.portalContainer, r = d.styleScope, c = (i) => {
+    i.id = n, i.className = r, i.style.position = "fixed", i.style.zIndex = "1000";
+  };
+  if (s)
+    return o && console.warn(
+      "getPortalContainer: Portal container already exists. Custom options will be ignored to prevent side effects."
+    ), s;
+  if (typeof window > "u")
+    return;
+  o && !l && (console.warn(
+    "Custom portal container props can lead to unintended behavior. Use with caution."
+  ), l = !0);
+  let t = document?.getElementById(n);
+  return t || (t = document.createElement("div"), document.body.appendChild(t)), c(t), s = t, t;
+};
+export {
+  y as cn,
+  O as disabledState,
+  T as filledState,
+  C as focusRing,
+  S as focusRingDestructive,
+  E as focusState,
+  k as formElementBase,
+  B as getHostname,
+  R as getPortalContainer,
+  x as highlightCode,
+  P as hoverState,
+  N as invalidState,
+  w as isStorybookTestEnv,
+  _ as readOnlyState
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@cognite/aura",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    "./components": {
+      "@fusion/source": "./src/components/index.ts",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": {
+      "@fusion/source": "./src/styles.css",
+      "default": "./src/styles.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@base-ui/react": "^1.1.0",
+    "@tabler/icons-react": "^3.35.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "framer-motion": "^11.0.3",
+    "shiki": "^3.19.0",
+    "streamdown": "^1.6.10",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "10.2.4",
+    "@storybook/addon-vitest": "10.2.4",
+    "@tailwindcss/vite": "^4.1.17",
+    "@testing-library/react": "16.0.1",
+    "@types/react": "18.3.14",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "5.8.3",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "scripts": {
+    "registry:build": "node --loader @swc-node/register/esm scripts/build-registry.ts && npx --yes shadcn@3.8.2 build",
+    "registry:clean": "node -e \"const fs=require('node:fs');fs.rmSync('public/r',{recursive:true,force:true});fs.mkdirSync('public/r',{recursive:true});\""
+  }
+}