@lumiastream/ui 0.0.2-alpha.5 → 0.0.2-alpha.7

package/README.md

@@ -0,0 +1,81 @@
+# Lumia UI Kit
+
+A modern, Tailwind‑powered component library used across the Lumia Stream ecosystem. It provides production‑ready React components, design tokens, and Storybook documentation—all published as `@lumiastream/ui`.
+
+---
+
+## ✨ Features
+
+| Feature               | Details                                               |
+| --------------------- | ----------------------------------------------------- |
+| **React 18 → 19**     | Built and typed for the latest React majors.          |
+| **Tailwind CSS 4**    | Utility‑first styling with full theme access.         |
+| **TypeScript first**  | 100 % typed public API (`.d.ts` included).            |
+| **Storybook 9**       | Live docs with interactive playgrounds & a11y checks. |
+| **ESM + CJS bundles** | Works in every modern build tool.                     |
+
+---
+
+## 🔧 Installation
+
+```bash
+npm i @lumiastream/ui
+```
+
+> **Peer dependencies**
+>
+> - React ≥ 18.0 < 20 (`^18 || ^19`)
+> - Tailwind CSS is _already compiled_—you do **not** need Tailwind in the host app unless you want to extend the theme.
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+// App.tsx
+import { LSButton } from "@lumiastream/ui";
+
+export default function App() {
+	return <LSButton variant="primary" label="Click Me" />;
+}
+```
+
+---
+
+## 📚 Storybook Docs
+
+Run a fully interactive playground locally:
+
+```bash
+pnpm storybook
+open http://localhost:6006
+```
+
+The public Storybook for the latest release lives at [https://ui.lumiastream.com](https://ui.lumiastream.com).
+
+---
+
+## 🏗️ Building from source
+
+```bash
+# clone & bootstrap
+pnpm install
+
+# compile library (ESM + CJS + types) and Tailwind sheet
+pnpm build
+```
+
+Artifacts land in `dist/` and are what gets published to npm.
+
+---
+
+## 🤝 Running live
+
+1. Run `pnpm storybook` for hot‑reloading Storybook and `pnpm watch` for the library bundle.
+2. Commit with Conventional Commits (`feat:`, `fix:` …) so the release pipeline can auto‑generate changelogs.
+
+---
+
+## 🪪 License
+
+ISC © Lumia Stream LLC

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CompletionContext } from '@codemirror/autocomplete';
 
 interface LSButtonProps {
     /** Is this the principal call to action on the page? */
@@ -15,4 +16,20 @@ interface LSButtonProps {
 /** Primary UI component for user interaction */
 declare const LSButton: ({ primary, size, backgroundColor, label, ...props }: LSButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { LSButton, type LSButtonProps };
+declare function allowedVariableCompletion(context: CompletionContext, variables: Record<string, any>, extraOptions: {
+    label: string;
+    displayLabel: string;
+    type: string;
+    info: string;
+}[]): {
+    from: number;
+    options: {
+        label: string;
+        displayLabel: string;
+        type: string;
+        info: string;
+    }[];
+    validFor: RegExp;
+} | null;
+
+export { LSButton, type LSButtonProps, allowedVariableCompletion };

package/dist/index.js

@@ -40,14 +40,45 @@ var LSButton = ({
       className: [
         "bg-blue-500",
         size === "small" ? "px-3 py-1 text-sm" : size === "large" ? "px-6 py-3 text-lg" : "px-4 py-2 text-base",
-        mode
+        mode,
+        backgroundColor ? `bg-[${backgroundColor}]` : ""
       ].join(" "),
-      style: { backgroundColor },
       ...props,
       children: label
     }
   );
 };
+
+// src/utils/allowedVariableCompletion.ts
+function allowedVariableCompletion(context, variables, extraOptions) {
+  const before = context.state.sliceDoc(0, context.pos);
+  const after = context.state.sliceDoc(context.pos, context.pos + 2);
+  const wordMatch = /(\w*)$/.exec(before);
+  if (!wordMatch) return null;
+  const word = wordMatch[1];
+  const from = context.pos - word.length;
+  const openCount = before.match(/({+)\s*\w*$/)?.[1].length ?? 0;
+  const closeCount = after.startsWith("}}") ? 2 : after.startsWith("}") ? 1 : 0;
+  const openNeeded = Math.max(0, 2 - openCount);
+  const closeNeeded = Math.max(0, 2 - closeCount);
+  const braceWrap = (v) => `${"{".repeat(openNeeded)}${v}${"}".repeat(closeNeeded)}`;
+  const options = [
+    ...Object.keys(variables).map((variable) => ({
+      label: braceWrap(variable),
+      displayLabel: variable,
+      type: "variable",
+      info: "A variable in Lumia Stream"
+    })),
+    ...extraOptions
+  ];
+  return {
+    from,
+    options,
+    validFor: /^[\w$]*$/
+    // keep list open while typing identifiers
+  };
+}
 export {
-  LSButton
+  LSButton,
+  allowedVariableCompletion
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lumiastream/ui",
-	"version": "0.0.2-alpha.5",
+	"version": "0.0.2-alpha.7",
 	"author": "Lumia Stream",
 	"license": "ISC",
 	"description": "Lumia UI Kit",
@@ -21,14 +21,17 @@
 		"start": "storybook dev -p 6006",
 		"build": "tsup src/index.ts",
 		"build-storybook": "storybook build",
+		"watch": "tsup src/index.ts --watch",
 		"release": "changeset && changeset tag && pnpm build && pnpm publish",
 		"prepublishOnly": "pnpm build"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0 || ^19.0.0",
-		"react-dom": "^18.0.0 || ^19.0.0"
+		"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+		"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
+		"@codemirror/autocomplete": "^6.0.0"
 	},
 	"devDependencies": {
+		"@codemirror/autocomplete": "^6.0.0",
 		"@storybook/builder-vite": "^9.0.15",
 		"@storybook/react-vite": "^9.0.15",
 		"@tailwindcss/vite": "^4.1.11",