@crewlethq/icons 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Crewlet
+
+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,73 @@
+# @crewlethq/icons
+
+Crewlet signature icon set, including the illustrated agent variants such as `agent-reading` (crewlet reading a book). SVG sources live in `svg/`. The build compiles each one into a typed React component and re-exports them through a single `<Icon name="..." />` API.
+
+## Use it
+
+```tsx
+import { Icon } from '@crewlethq/icons';
+
+<Icon name="AgentReading" size="lg" title="Documentation" />
+```
+
+`size` accepts `'sm' | 'md' | 'lg' | 'xl'`, a number (px), or any CSS length string. `title` makes the icon accessible to screen readers; without it, the icon is marked `aria-hidden`.
+
+`name` is typed as the `IconName` union, so TypeScript rejects a name the package does not ship. Plain JavaScript gets no such check, and `<Icon>` renders nothing for an unknown name, so search for a name across the whole project when an icon is renamed. `ICON_NAMES` lists every name in file-name order; treat it as a set and never index it by position, because adding or renaming an icon shifts the order.
+
+Each icon is also exported as its own component through the `Icons` namespace (`<Icons.AgentReading />`).
+
+### Raw SVG files
+
+The source SVGs ship in the package and are exported as `@crewlethq/icons/svg/*`, for an `<img>`, a favicon or any other surface that needs a file rather than a React component:
+
+```ts
+import markUrl from '@crewlethq/icons/svg/crewlet-icon.svg';
+```
+
+A bundler resolves the import to a URL. Outside a bundler, resolve the same specifier with `import.meta.resolve('@crewlethq/icons/svg/crewlet-icon.svg')` to get the file on disk.
+
+### CrewletFigure
+
+`CrewletFigure` renders the Crewlet character as five separately animated body parts:
+
+```tsx
+import { CrewletFigure } from '@crewlethq/icons';
+
+<CrewletFigure motion="wave" style={{ fontSize: 96 }} />
+```
+
+| Prop | Type | Default | Purpose |
+| ---- | ---- | ------- | ------- |
+| `motion` | `CrewletMotion`: `'idle' \| 'dance' \| 'wave' \| 'jump' \| 'walk' \| 'spin'` | `'idle'` | The looping motion. |
+| `delay` | number (seconds) | `0` | Phase offset, so several figures do not move in lockstep. |
+| `color` | CSS colour | `'#7c56ff'` | Body fill. |
+| `fillGaps` | boolean | `true` | Backs each joint with body, so a moving limb never uncovers a gap. `false` renders the plain trim, where the pieces meet with visible seams. |
+
+The figure is sized in `em` like the icons (set `font-size` or pass `width` and `height`) and is `aria-hidden`; give the surrounding element an accessible name when the figure carries meaning. Every motion stops when the user prefers reduced motion. The geometry lives in `src/crewletParts.ts`.
+
+## Add an icon
+
+1. Drop `<your-icon>.svg` into `svg/`. File names become PascalCase component names (for example, `agent-celebrating.svg` -> `AgentCelebrating`).
+2. Run `npm run build`.
+3. The new icon is auto-exported from `@crewlethq/icons` and appears in `ICON_NAMES`.
+
+## Conventions for source SVGs
+
+Three families coexist in this package:
+
+**Brand artwork**: `crewlet-icon` (the Crewlet mark) and `crewlet-reading` (a full-colour illustration of the Crewlet character reading a newspaper), together with `CrewletFigure`. Filled artwork on its own viewBox; render it as supplied. `crewlet-reading` is a large, detailed illustration (about 670 KB of SVG), so reserve it for hero and empty-state surfaces rather than inline icon slots. The Crewlet name, mark and character are trademarks that the MIT License does not cover; see [TRADEMARKS.md](./TRADEMARKS.md) before using them outside an official Crewlet product.
+
+**Feature illustrations** (80x80): `hierarchy`, `human-in-loop` and `company-as-code`. Self-contained artwork with its own gradients and background disc, so it does not inherit `currentColor`. The build prefixes every `id` in a file with that file's name, because inline SVGs share the page's id space; keep gradient and other `id` references inside the file that defines them.
+
+**Signature illustrations** (32x32): the crewlet "agent" character in different contexts (`agent-idle`, `agent-working`, `agent-thinking`, `agent-reading`, `agent-greeting`, `agent-success`, `agent-error` and `agent-loading`). The set reads as one character through a shared line style and scale rather than an identical outline: the head and shoulders move, shrink or give way to a torso when the pose needs room for a prop (a book, a desk, a thought bubble). Name new variants `agent-<pose>.svg`.
+
+Signature illustrations follow these rules so they recolor from CSS and sit on one visual weight:
+- A `0 0 32 32` viewBox.
+- `stroke="currentColor"` and `fill="none"`.
+- A single 1.6 stroke weight.
+- `stroke-linecap="round"` and `stroke-linejoin="round"`.
+- No hard-coded width or height attributes (the build strips them).
+
+## License
+
+MIT. The license text is in [`LICENSE`](./LICENSE), which ships in the package. The license covers copyright only: the Crewlet name, logo and character are trademarks, and [`TRADEMARKS.md`](./TRADEMARKS.md), which also ships in the package, says how they may be used.

package/TRADEMARKS.md

@@ -0,0 +1,26 @@
+# Trademarks
+
+"Crewlet", the Crewlet logo and the Crewlet character (in every pose, illustration, animation and rigged or trimmed variant) are trademarks of Crewlet. The source code and assets in this repository are licensed under the MIT License, and that license covers copyright only: it grants no right to use these trademarks.
+
+## What you may do
+
+- Refer to the project by name to describe it truthfully, for example "built with @crewlethq/ui" or "a fork of the Crewlet design system".
+- Use the packages, including the brand files listed below, in an official Crewlet product or in an unmodified build of this repository, such as its Storybook.
+
+## What you may not do
+
+- Use the Crewlet name, logo or character in a way that suggests your product is Crewlet, is endorsed by Crewlet, or is an official distribution.
+- Use the logo or the character as the identity of another product, service, company or account, including in a fork. A fork or redistribution that ships a user-facing surface must remove the Crewlet logo and character from it and use a different product name.
+
+## The brand files
+
+These files in the repository carry the Crewlet logo or character:
+
+- `packages/icons/svg/crewlet-icon.svg`
+- `packages/icons/svg/crewlet-reading.svg`
+- `packages/icons/src/crewletParts.ts`
+- `packages/icons/src/CrewletFigure.tsx`
+
+The `CrewletIcon`, `CrewletReading` and `CrewletFigure` components that the `@crewlethq/icons` package builds from them are covered in the same way.
+
+For any use this page does not allow, ask the maintainers first by opening an issue in this repository.

package/dist/index.d.ts

@@ -0,0 +1,82 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SVGProps } from 'react';
+
+declare const AgentError: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const AgentGreeting: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const AgentIdle: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const AgentLoading: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const AgentReading: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const AgentSuccess: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const AgentThinking: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const AgentWorking: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const CompanyAsCode: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const CrewletIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const CrewletReading: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const Hierarchy: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const HumanInLoop: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const ICON_NAMES: readonly ["AgentError", "AgentGreeting", "AgentIdle", "AgentLoading", "AgentReading", "AgentSuccess", "AgentThinking", "AgentWorking", "CompanyAsCode", "CrewletIcon", "CrewletReading", "Hierarchy", "HumanInLoop"];
+type IconName = (typeof ICON_NAMES)[number];
+
+declare const index_AgentError: typeof AgentError;
+declare const index_AgentGreeting: typeof AgentGreeting;
+declare const index_AgentIdle: typeof AgentIdle;
+declare const index_AgentLoading: typeof AgentLoading;
+declare const index_AgentReading: typeof AgentReading;
+declare const index_AgentSuccess: typeof AgentSuccess;
+declare const index_AgentThinking: typeof AgentThinking;
+declare const index_AgentWorking: typeof AgentWorking;
+declare const index_CompanyAsCode: typeof CompanyAsCode;
+declare const index_CrewletIcon: typeof CrewletIcon;
+declare const index_CrewletReading: typeof CrewletReading;
+declare const index_Hierarchy: typeof Hierarchy;
+declare const index_HumanInLoop: typeof HumanInLoop;
+declare const index_ICON_NAMES: typeof ICON_NAMES;
+type index_IconName = IconName;
+declare namespace index {
+  export { index_AgentError as AgentError, index_AgentGreeting as AgentGreeting, index_AgentIdle as AgentIdle, index_AgentLoading as AgentLoading, index_AgentReading as AgentReading, index_AgentSuccess as AgentSuccess, index_AgentThinking as AgentThinking, index_AgentWorking as AgentWorking, index_CompanyAsCode as CompanyAsCode, index_CrewletIcon as CrewletIcon, index_CrewletReading as CrewletReading, index_Hierarchy as Hierarchy, index_HumanInLoop as HumanInLoop, index_ICON_NAMES as ICON_NAMES, type index_IconName as IconName };
+}
+
+declare const sizes: {
+    readonly sm: "16px";
+    readonly md: "20px";
+    readonly lg: "24px";
+    readonly xl: "32px";
+};
+type IconSize = keyof typeof sizes | number | string;
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'name' | 'fontSize'> {
+    name: IconName;
+    size?: IconSize;
+    title?: string;
+}
+declare const Icon: ({ name, size, title, style, ...rest }: IconProps) => react_jsx_runtime.JSX.Element | null;
+
+type CrewletMotion = 'idle' | 'dance' | 'wave' | 'jump' | 'walk' | 'spin';
+interface CrewletFigureProps extends SVGProps<SVGSVGElement> {
+    /** Which looping motion the figure plays. Defaults to a subtle idle. */
+    motion?: CrewletMotion;
+    /** Phase offset in seconds, so a group of figures does not move in lockstep. */
+    delay?: number;
+    /** Body fill. Defaults to the crewlet purple; also settable via CSS color. */
+    color?: string;
+    /**
+     * Back the joints so a moving limb reveals body instead of a blank gap.
+     * On by default. Set false for the plain trim (pieces meet with visible seams).
+     */
+    fillGaps?: boolean;
+}
+declare const CrewletFigure: ({ motion, delay, color, fillGaps, style, ...rest }: CrewletFigureProps) => react_jsx_runtime.JSX.Element;
+
+export { CrewletFigure, type CrewletFigureProps, type CrewletMotion, ICON_NAMES, Icon, type IconName, type IconProps, type IconSize, index as Icons };