@zylem/ui 0.8.11 → 0.8.12

package/README.md

@@ -14,6 +14,9 @@ import '@zylem/ui/styles.css';
 
 // Solid components (compiled by the consuming app's bundler)
 import { Button } from '@zylem/ui/components';
+
+// Camera icons (Lucide-shaped originals: currentColor stroke, 24×24)
+import { Perspective, GameCamera } from '@zylem/ui/icons';
 ```
 
 ## Development

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zylem/ui",
-  "version": "0.8.11",
+  "version": "0.8.12",
   "description": "Design tokens, global styles, and Solid components for Zylem, built with vanilla-extract",
   "license": "MIT",
   "repository": {
@@ -42,6 +42,10 @@
       "types": "./vite/index.ts",
       "import": "./vite/index.ts"
     },
+    "./icons": {
+      "types": "./src/icons/index.ts",
+      "import": "./src/icons/index.ts"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "files": [
@@ -49,15 +53,6 @@
     "src",
     "vite"
   ],
-  "scripts": {
-    "build": "tsup",
-    "prepublishOnly": "NODE_ENV=production tsup",
-    "dev": "tsup --watch",
-    "showcase": "vite --host",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "biome check ."
-  },
   "peerDependencies": {
     "solid-js": "^1.9.9"
   },
@@ -91,5 +86,12 @@
     "node": ">=22.12.0",
     "pnpm": ">=10.32.1"
   },
-  "packageManager": "pnpm@10.33.0"
-}
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "showcase": "vite --host",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "biome check ."
+  }
+}

package/src/components/index.ts

@@ -217,3 +217,20 @@ export {
   type TransportBarProps,
   type TransportTimeSignature,
 } from './TransportBar/TransportBar';
+
+// Camera icons (Lucide-shaped originals; also `@zylem/ui/icons`)
+export {
+  CAMERA_ICONS,
+  FreePerspective,
+  GameCamera,
+  IsometricPerspective,
+  Perspective,
+  SideviewPerspective,
+  TopDownPerspective,
+  cameraIconNodes,
+  createZylemIcon,
+  type CameraIcon,
+  type CameraIconName,
+  type IconNode,
+  type ZylemIconProps,
+} from '../icons';

package/src/icons/create-icon.tsx

@@ -0,0 +1,71 @@
+import { For, splitProps, type Component, type JSX } from 'solid-js';
+import { Dynamic } from 'solid-js/web';
+import type { IconNode } from './icon-nodes';
+
+export interface ZylemIconProps extends JSX.SvgSVGAttributes<SVGSVGElement> {
+  color?: string;
+  size?: string | number;
+  strokeWidth?: string | number;
+  absoluteStrokeWidth?: boolean;
+}
+
+const DEFAULTS = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  'stroke-linecap': 'round',
+  'stroke-linejoin': 'round',
+} as const;
+
+function kebab(name: string): string {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * Solid icon factory matching lucide-solid's size / color / strokeWidth
+ * props so these glyphs drop into the same toolbar buttons and CSS.
+ */
+export function createZylemIcon(
+  name: string,
+  iconNode: IconNode,
+): Component<ZylemIconProps> {
+  const Icon: Component<ZylemIconProps> = (props) => {
+    const [local, rest] = splitProps(props, [
+      'color',
+      'size',
+      'strokeWidth',
+      'class',
+      'absoluteStrokeWidth',
+    ]);
+    const size = () => local.size ?? 24;
+    const strokeWidth = () => {
+      const width = Number(local.strokeWidth ?? 2);
+      if (local.absoluteStrokeWidth) {
+        return (width * 24) / Number(size());
+      }
+      return width;
+    };
+    const classes = () =>
+      ['zylem-icon', `zylem-icon-${kebab(name)}`, local.class]
+        .filter((value) => Boolean(value))
+        .join(' ');
+
+    return (
+      <svg
+        {...DEFAULTS}
+        width={size()}
+        height={size()}
+        stroke={local.color ?? 'currentColor'}
+        stroke-width={strokeWidth()}
+        class={classes()}
+        aria-hidden="true"
+        {...rest}
+      >
+        <For each={iconNode}>
+          {([element, attrs]) => <Dynamic component={element} {...attrs} />}
+        </For>
+      </svg>
+    );
+  };
+  return Icon;
+}

package/src/icons/icon-nodes.ts

@@ -0,0 +1,75 @@
+/**
+ * Original Zylem camera icons as Lucide-style SVG node lists.
+ * 24×24 viewBox, 2-unit stroke, no fill, rounded caps and joins.
+ */
+export type IconNode = [
+  elementName: 'rect' | 'path',
+  attributes: Record<string, string>,
+][];
+
+export const PerspectiveNode: IconNode = [
+  ['rect', { x: '2', y: '8', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10 4-2v8l-4-2' }],
+  ['path', { d: 'm18 7 4-3m-4 13 4 3' }],
+];
+
+export const SideviewPerspectiveNode: IconNode = [
+  ['rect', { x: '2', y: '8', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10 4-2v8l-4-2' }],
+  ['path', { d: 'M18 6h4v12h-4' }],
+];
+
+export const TopDownPerspectiveNode: IconNode = [
+  ['rect', { x: '8', y: '2', width: '8', height: '8', rx: '2' }],
+  ['path', { d: 'm10 10-2 4h8l-2-4' }],
+  ['path', { d: 'M6 18v4h12v-4' }],
+];
+
+export const FreePerspectiveNode: IconNode = [
+  ['rect', { x: '7', y: '9', width: '7', height: '6', rx: '1' }],
+  ['path', { d: 'm14 11 3-2v6l-3-2' }],
+  ['path', { d: 'M3 8a9 9 0 0 1 15-3' }],
+  ['path', { d: 'M18 2v3h-3' }],
+  ['path', { d: 'M21 16a9 9 0 0 1-15 3' }],
+  ['path', { d: 'M6 22v-3h3' }],
+];
+
+/** Source: `src/icons/svg/camera-isometric.svg` */
+export const IsometricPerspectiveNode: IconNode = [
+  ['path', { d: 'M11.549 11.368 2 5.855' }],
+  ['path', { d: 'M11.549 19.944 11.549 17.252' }],
+  ['path', { d: 'M11.549 14.06 11.549 11.368' }],
+  ['path', { d: 'M11.549 19.944 2 14.431' }],
+  ['path', { d: 'M2 14.431 2 5.855' }],
+  ['path', { d: 'M2 5.855 6.775 3.098' }],
+  ['path', { d: 'M6.775 3.098 16.324 8.611' }],
+  ['path', { d: 'M11.549 11.368 16.324 8.611' }],
+  ['path', { d: 'M16.324 8.611 16.324 11.151' }],
+  ['path', { d: 'M13.749 18.674 11.549 19.944' }],
+  ['path', { d: 'M15.887 10.899 21.192 13.962' }],
+  ['path', { d: 'M11.986 17.656 17.291 20.719' }],
+  ['path', { d: 'M15.887 10.899A3.901 2.252 -60 0 0 11.986 17.656' }],
+  [
+    'path',
+    {
+      d: 'M21.192 13.962A3.901 2.252 -60 1 1 17.291 20.719A3.901 2.252 -60 1 1 21.192 13.962Z',
+    },
+  ],
+];
+export const GameCameraNode: IconNode = [
+  ['rect', { x: '2', y: '6', width: '16', height: '12', rx: '2' }],
+  ['path', { d: 'm18 10 4-3v10l-4-3' }],
+  ['path', { d: 'M6 12h4m-2-2v4' }],
+  ['path', { d: 'M14 10h.01M14 14h.01' }],
+];
+
+export const cameraIconNodes = {
+  perspective: PerspectiveNode,
+  'sideview-perspective': SideviewPerspectiveNode,
+  'top-down-perspective': TopDownPerspectiveNode,
+  'isometric-perspective': IsometricPerspectiveNode,
+  'free-perspective': FreePerspectiveNode,
+  'game-camera': GameCameraNode,
+} as const;
+
+export type CameraIconName = keyof typeof cameraIconNodes;

package/src/icons/index.ts

@@ -0,0 +1,54 @@
+import type { Component } from 'solid-js';
+import { createZylemIcon, type ZylemIconProps } from './create-icon';
+import {
+  FreePerspectiveNode,
+  GameCameraNode,
+  IsometricPerspectiveNode,
+  PerspectiveNode,
+  SideviewPerspectiveNode,
+  TopDownPerspectiveNode,
+} from './icon-nodes';
+
+export type { IconNode, CameraIconName } from './icon-nodes';
+export {
+  cameraIconNodes,
+  FreePerspectiveNode,
+  GameCameraNode,
+  IsometricPerspectiveNode,
+  PerspectiveNode,
+  SideviewPerspectiveNode,
+  TopDownPerspectiveNode,
+} from './icon-nodes';
+export { createZylemIcon, type ZylemIconProps } from './create-icon';
+
+export type CameraIcon = Component<ZylemIconProps>;
+
+/** Recorder with diverging FOV rays. */
+export const Perspective = createZylemIcon('Perspective', PerspectiveNode);
+/** Recorder facing a vertical view plane (side / ortho). */
+export const SideviewPerspective = createZylemIcon(
+  'SideviewPerspective',
+  SideviewPerspectiveNode,
+);
+/** Downward recorder facing a horizontal plane (top-down). */
+export const TopDownPerspective = createZylemIcon(
+  'TopDownPerspective',
+  TopDownPerspectiveNode,
+);
+/** Isometric camera body with lens (from camera-isometric.svg). */
+export const IsometricPerspective = createZylemIcon(
+  'IsometricPerspective',
+  IsometricPerspectiveNode,
+);/** Recorder with two orbit arrows (free / orbit camera). */
+export const FreePerspective = createZylemIcon('FreePerspective', FreePerspectiveNode);
+/** Recorder with controller buttons (game camera). */
+export const GameCamera = createZylemIcon('GameCamera', GameCameraNode);
+
+export const CAMERA_ICONS = [
+  { name: 'perspective', label: 'Perspective', Icon: Perspective },
+  { name: 'sideview-perspective', label: 'Side view', Icon: SideviewPerspective },
+  { name: 'top-down-perspective', label: 'Top down', Icon: TopDownPerspective },
+  { name: 'isometric-perspective', label: 'Isometric', Icon: IsometricPerspective },
+  { name: 'free-perspective', label: 'Free / orbit', Icon: FreePerspective },
+  { name: 'game-camera', label: 'Game camera', Icon: GameCamera },
+] as const;

package/src/icons/svg/camera-isometric.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11.549 11.368 2 5.855" />
+  <path d="M11.549 19.944 11.549 17.252" />
+  <path d="M11.549 14.06 11.549 11.368" />
+  <path d="M11.549 19.944 2 14.431" />
+  <path d="M2 14.431 2 5.855" />
+  <path d="M2 5.855 6.775 3.098" />
+  <path d="M6.775 3.098 16.324 8.611" />
+  <path d="M11.549 11.368 16.324 8.611" />
+  <path d="M16.324 8.611 16.324 11.151" />
+  <path d="M13.749 18.674 11.549 19.944" />
+  <path d="M15.887 10.899 21.192 13.962" />
+  <path d="M11.986 17.656 17.291 20.719" />
+  <path d="M15.887 10.899A3.901 2.252 -60 0 0 11.986 17.656" />
+  <path d="M21.192 13.962A3.901 2.252 -60 1 1 17.291 20.719A3.901 2.252 -60 1 1 21.192 13.962Z" />
+</svg>

package/src/icons/svg/free-perspective.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="7" y="9" width="7" height="6" rx="1" />
+  <path d="m14 11 3-2v6l-3-2" />
+  <path d="M3 8a9 9 0 0 1 15-3" />
+  <path d="M18 2v3h-3" />
+  <path d="M21 16a9 9 0 0 1-15 3" />
+  <path d="M6 22v-3h3" />
+</svg>

package/src/icons/svg/game-camera.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="6" width="16" height="12" rx="2" />
+  <path d="m18 10 4-3v10l-4-3" />
+  <path d="M6 12h4m-2-2v4" />
+  <path d="M14 10h.01M14 14h.01" />
+</svg>

package/src/icons/svg/perspective.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="8" width="8" height="8" rx="2" />
+  <path d="m10 10 4-2v8l-4-2" />
+  <path d="m18 7 4-3m-4 13 4 3" />
+</svg>

package/src/icons/svg/sideview-perspective.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="8" width="8" height="8" rx="2" />
+  <path d="m10 10 4-2v8l-4-2" />
+  <path d="M18 6h4v12h-4" />
+</svg>

package/src/icons/svg/top-down-perspective.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="8" y="2" width="8" height="8" rx="2" />
+  <path d="m10 10-2 4h8l-2-4" />
+  <path d="M6 18v4h12v-4" />
+</svg>