@stateglyph/cli 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kamalveer Singh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @stateglyph/cli
+
+Copy editable StateGlyph components into a React project.
+
+```bash
+npx @stateglyph/cli list
+npx @stateglyph/cli add upload
+```
+
+Add more than one icon or choose a different destination:
+
+```bash
+npx @stateglyph/cli add upload save --dir src/components/stateglyph
+npx @stateglyph/cli add all
+```
+
+Use `--dry-run` to preview files and `--force` to replace existing files.
+Without `--force`, the CLI safely skips files that already exist.
+
+The generated components are TypeScript React files. They are self-contained
+and depend only on `react` and `lucide-react`, so you can edit them freely in
+your own project.
+
+MIT licensed. The source icons from Lucide use the ISC License.

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,52 @@
+# Third-party notices
+
+StateGlyph uses glyphs from [Lucide](https://lucide.dev/) through
+`lucide-react`. Lucide is licensed under the ISC License. Some Lucide glyphs
+are derived from Feather Icons and remain available under the MIT License.
+
+## Lucide Icons
+
+ISC License
+
+Copyright (c) 2026 Lucide Icons and Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
+SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION
+OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN
+CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+## Feather Icons
+
+The following Lucide glyphs used by StateGlyph are derived from Feather Icons:
+`check`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`,
+`download`, `maximize`, `minimize`, `minimize-2`, `pause`, `sidebar`,
+`trash-2`, `upload`, and `x`.
+
+The MIT License (MIT)
+
+Copyright (c) 2013-present Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,238 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { Command } from "commander";
+
+// src/add.ts
+import { access, mkdir, writeFile } from "fs/promises";
+import path from "path";
+import { stateIconCatalog } from "@stateglyph/core";
+
+// src/template.ts
+function toPascalCase(value) {
+  return value.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function renderIconComponent(definition) {
+  const componentName = `${toPascalCase(definition.id)}StateIcon`;
+  const stateTypeName = `${toPascalCase(definition.id)}State`;
+  const propsTypeName = `${componentName}Props`;
+  const states = Object.entries(definition.states);
+  const lucideComponents = [
+    ...new Set(states.map(([, stateDefinition]) => stateDefinition.icon))
+  ].map(toPascalCase).sort();
+  const continuousStates = states.filter(([, stateDefinition]) => stateDefinition.continuous).map(([name]) => name);
+  const animationName = `stateglyph-${definition.id}-spin`;
+  const stateUnion = states.map(([name]) => JSON.stringify(name)).join(" | ");
+  const iconRows = states.map(
+    ([name, stateDefinition]) => `  ${JSON.stringify(name)}: ${toPascalCase(stateDefinition.icon)},`
+  ).join("\n");
+  const labelRows = states.map(
+    ([name, stateDefinition]) => `  ${JSON.stringify(name)}: ${JSON.stringify(stateDefinition.label)},`
+  ).join("\n");
+  return `import type { SVGProps } from "react";
+import {
+${lucideComponents.map((name) => `  ${name},`).join("\n")}
+  type LucideIcon,
+} from "lucide-react";
+
+export type ${stateTypeName} = ${stateUnion};
+
+export type ${propsTypeName} = Omit<SVGProps<SVGSVGElement>, "children"> & {
+  state: ${stateTypeName};
+  size?: number | string;
+  strokeWidth?: number;
+  duration?: number;
+  decorative?: boolean;
+  label?: string;
+};
+
+const iconByState = {
+${iconRows}
+} satisfies Record<${stateTypeName}, LucideIcon>;
+
+const labelByState = {
+${labelRows}
+} satisfies Record<${stateTypeName}, string>;
+
+const continuousStates = new Set<${stateTypeName}>(${JSON.stringify(continuousStates)});
+
+export function ${componentName}({
+  state,
+  size = 24,
+  strokeWidth = 2,
+  duration = 900,
+  decorative = true,
+  label,
+  style,
+  ...svgProps
+}: ${propsTypeName}) {
+  const Icon = iconByState[state];
+  const isContinuous = continuousStates.has(state);
+  const accessibleLabel = label ?? labelByState[state];
+
+  return (
+    <>
+      {isContinuous ? (
+        <style>{\`@keyframes ${animationName} { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { [data-state-icon="${definition.id}"] { animation: none !important; } }\`}</style>
+      ) : null}
+      <Icon
+        {...svgProps}
+        size={size}
+        strokeWidth={strokeWidth}
+        data-state-icon="${definition.id}"
+        data-state={state}
+        aria-hidden={decorative ? true : undefined}
+        aria-label={decorative ? undefined : accessibleLabel}
+        role={decorative ? undefined : "img"}
+        focusable="false"
+        style={{
+          ...style,
+          animation:
+            style?.animation ??
+            (isContinuous
+              ? \`${animationName} \${duration}ms linear infinite\`
+              : undefined),
+        }}
+      />
+    </>
+  );
+}
+`;
+}
+
+// src/add.ts
+async function fileExists(filePath) {
+  try {
+    await access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function addIcons(requestedIcons, options = {}) {
+  const cwd = options.cwd ?? process.cwd();
+  const directory = options.directory ?? "components/stateglyph";
+  const destination = path.resolve(cwd, directory);
+  const requestedNames = requestedIcons.includes("all") ? stateIconCatalog.map((icon) => icon.id) : [...new Set(requestedIcons)];
+  const unknownNames = requestedNames.filter(
+    (name) => !stateIconCatalog.some((icon) => icon.id === name)
+  );
+  if (unknownNames.length > 0) {
+    throw new Error(
+      `Unknown icon${unknownNames.length === 1 ? "" : "s"}: ${unknownNames.join(", ")}. Run 'stateglyph list' to see valid names.`
+    );
+  }
+  const result = { added: [], skipped: [] };
+  for (const name of requestedNames) {
+    const icon = stateIconCatalog.find((item) => item.id === name);
+    if (!icon) {
+      continue;
+    }
+    const relativePath = path.join(directory, `${icon.id}-state-icon.tsx`);
+    const filePath = path.resolve(cwd, relativePath);
+    if (await fileExists(filePath) && !options.force) {
+      result.skipped.push(relativePath);
+      continue;
+    }
+    result.added.push(relativePath);
+    if (!options.dryRun) {
+      await mkdir(destination, { recursive: true });
+      await writeFile(filePath, renderIconComponent(icon), "utf8");
+    }
+  }
+  return result;
+}
+
+// src/list.ts
+import { stateIconCatalog as stateIconCatalog2 } from "@stateglyph/core";
+var categoryLabels = {
+  async: "Async workflows",
+  media: "Media controls",
+  navigation: "Navigation and layout",
+  feedback: "Feedback and toggles",
+  device: "Device and connection",
+  form: "Form states",
+  commerce: "Commerce",
+  notification: "Notifications"
+};
+function formatIconList() {
+  const sections = Object.entries(categoryLabels).flatMap(
+    ([category, label]) => {
+      const icons = stateIconCatalog2.filter(
+        (icon) => icon.category === category
+      );
+      if (icons.length === 0) {
+        return [];
+      }
+      const rows = icons.map(
+        (icon) => `  ${icon.id.padEnd(22)} ${icon.title} (${Object.keys(icon.states).length} states)`
+      );
+      return [[`${label} (${icons.length})`, ...rows].join("\n")];
+    }
+  );
+  return [
+    `StateGlyph \u2014 ${stateIconCatalog2.length} icons`,
+    "",
+    ...sections.flatMap(
+      (section, index) => index === sections.length - 1 ? [section] : [section, ""]
+    )
+  ].join("\n");
+}
+
+// src/index.ts
+var program = new Command();
+program.name("stateglyph").description("Browse and add StateGlyph components to a React project.").version("0.1.0").showHelpAfterError();
+program.command("list").description("List every available icon, grouped by category.").action(() => {
+  process.stdout.write(`${formatIconList()}
+`);
+});
+program.command("add").description(
+  "Copy one or more StateGlyph components into the current project."
+).argument("<icons...>", "Icon names to add, or 'all'").option(
+  "-d, --dir <directory>",
+  "Destination directory",
+  "components/stateglyph"
+).option("--force", "Overwrite existing icon files", false).option(
+  "--dry-run",
+  "Show what would be created without writing files",
+  false
+).action(
+  async (icons, options) => {
+    try {
+      const result = await addIcons(icons, {
+        directory: options.dir,
+        force: options.force,
+        dryRun: options.dryRun
+      });
+      const verb = options.dryRun ? "Would add" : "Added";
+      if (result.added.length > 0) {
+        process.stdout.write(`${verb}:
+`);
+        for (const file of result.added) {
+          process.stdout.write(`  ${file}
+`);
+        }
+      }
+      if (result.skipped.length > 0) {
+        process.stdout.write("Skipped existing files:\n");
+        for (const file of result.skipped) {
+          process.stdout.write(`  ${file}
+`);
+        }
+        process.stdout.write("Use --force to overwrite them.\n");
+      }
+      if (!options.dryRun && result.added.length > 0) {
+        process.stdout.write(
+          "\nThe generated components require react and lucide-react.\n"
+        );
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      program.error(message);
+    }
+  }
+);
+program.action(() => {
+  program.outputHelp();
+});
+await program.parseAsync();

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@stateglyph/cli",
+  "version": "0.1.0",
+  "description": "Copy StateGlyph components into React projects.",
+  "license": "MIT",
+  "author": "Kamalveer Singh",
+  "keywords": [
+    "cli",
+    "react",
+    "icons",
+    "typescript",
+    "codegen"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kamalhara/StateGlyph.git",
+    "directory": "packages/cli"
+  },
+  "homepage": "https://github.com/kamalhara/StateGlyph#readme",
+  "bugs": {
+    "url": "https://github.com/kamalhara/StateGlyph/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "bin": {
+    "stateglyph": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean",
+    "dev": "tsup src/index.ts --format esm --dts --watch",
+    "prepack": "node ../../scripts/sync-package-legal-files.mjs",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@stateglyph/core": "0.1.0",
+    "commander": "^15.0.0"
+  },
+  "engines": {
+    "node": ">=22.19.0"
+  }
+}