@girumtech/gs-design-system-react 0.1.4

package/README.md

@@ -0,0 +1,148 @@
+# @girumtech/gs-design-system-react
+
+React web entry point for GsDesignSystem, a TypeScript design system built with Tamagui. It exports the shared components, four themes, path-based icons, and curated web-compatible layout primitives.
+
+## Requirements
+
+- React 19 or newer
+- React DOM 19 or newer
+- Tamagui 2.7
+- React Native Web 0.21 or newer
+- React Native SVG 15 or newer
+
+## Installation
+
+```bash
+npm install @girumtech/gs-design-system-react tamagui react-native-web react-native-svg
+```
+
+## Vite setup
+
+Tamagui uses React Native-compatible modules on the web. Alias `react-native` to `react-native-web` and expose the build environment in Vite:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig(({ mode }) => ({
+  plugins: [react()],
+  define: {
+    'process.env': JSON.stringify({
+      NODE_ENV: mode === 'production' ? 'production' : 'development',
+      TAMAGUI_HEADLESS: '0',
+    }),
+  },
+  resolve: {
+    alias: {
+      'react-native': 'react-native-web',
+    },
+  },
+}))
+```
+
+## Application setup
+
+Add `GsProvider` once near the application root. It supplies the Tamagui configuration, tokens, and default theme.
+
+```tsx
+// src/main.tsx
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { GsProvider } from '@girumtech/gs-design-system-react'
+import { App } from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <GsProvider defaultTheme="blue">
+      <App />
+    </GsProvider>
+  </StrictMode>,
+)
+```
+
+Available themes are `red`, `red_dark`, `blue`, and `blue_dark`.
+
+## Components
+
+```tsx
+import { Button, Field, Text, XStack, YStack } from '@girumtech/gs-design-system-react'
+
+export function SignIn() {
+  return (
+    <YStack maxWidth={420} padding="$5" gap="$4" backgroundColor="$background">
+      <Text variant="title">Welcome back</Text>
+      <Text tone="muted">Sign in to continue.</Text>
+
+      <Field
+        id="email"
+        label="Email"
+        placeholder="you@example.com"
+        helperText="Use your work email."
+      />
+
+      <XStack gap="$3">
+        <Button onPress={() => console.log('Continue')}>Continue</Button>
+        <Button intent="secondary">Cancel</Button>
+      </XStack>
+    </YStack>
+  )
+}
+```
+
+Buttons and inputs use the active theme accent for their border by default. Override it with the standard Tamagui `borderColor` prop:
+
+```tsx
+<Button borderColor="#7C3AED">Custom border</Button>
+<Field id="code" label="Code" borderColor="#7C3AED" />
+```
+
+## Switching and forcing themes
+
+Use `Theme` to force a theme for a subtree. The theme name is fully typed.
+
+```tsx
+import { Theme, View, Text, type GsThemeName } from '@girumtech/gs-design-system-react'
+
+const theme: GsThemeName = 'red_dark'
+
+export function AlertPreview() {
+  return (
+    <Theme name={theme}>
+      <View padding="$4" backgroundColor="$background">
+        <Text tone="accent">This subtree uses red dark.</Text>
+      </View>
+    </Theme>
+  )
+}
+```
+
+## Icons
+
+Use a built-in icon or provide one or more SVG path definitions:
+
+```tsx
+import { Icon, NamedIcon, type IconPath } from '@girumtech/gs-design-system-react'
+
+const spark: readonly IconPath[] = [
+  {
+    d: 'M12 2 14.5 9.5 22 12l-7.5 2.5L12 22l-2.5-7.5L2 12l7.5-2.5L12 2Z',
+    fill: 'currentColor',
+  },
+]
+
+export function Icons() {
+  return (
+    <>
+      <NamedIcon name="heart" size={28} color="#A81D1D" label="Favorite" />
+      <Icon paths={spark} size={32} color="#10106B" label="Spark" />
+    </>
+  )
+}
+```
+
+Decorative icons may omit `label`; meaningful icons should provide one.
+
+## Exports
+
+The package exports `GsProvider`, `Theme`, `Button`, `Input`, `Field`, `Text`, `Icon`, `NamedIcon`, tokens, themes, and the curated `Anchor`, `Image`, `ScrollView`, `Separator`, `View`, `XStack`, `YStack`, and `ZStack` primitives.

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { IconPath, IconName } from '@girumtech/gs-design-system-core';
+export * from '@girumtech/gs-design-system-core';
+import * as react from 'react';
+import { SVGProps } from 'react';
+export { Anchor, Image, ScrollView, Separator, View, XStack, YStack, ZStack } from 'tamagui';
+
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'color'> {
+    paths: readonly IconPath[];
+    size?: number;
+    color?: string;
+    viewBox?: string;
+    label?: string;
+}
+declare function Icon({ paths, size, color, viewBox, label, style, ...props }: IconProps): react.JSX.Element;
+declare function NamedIcon({ name, ...props }: Omit<IconProps, 'paths'> & {
+    name: IconName;
+}): react.JSX.Element;
+
+export { Icon, type IconProps, NamedIcon };

package/dist/index.js

@@ -0,0 +1,47 @@
+// src/index.ts
+export * from "@girumtech/gs-design-system-core";
+
+// src/icon.tsx
+import { icons, normalizeIconPaths } from "@girumtech/gs-design-system-core";
+import { useTheme } from "tamagui";
+import { jsx } from "react/jsx-runtime";
+function Icon({ paths, size = 24, color = "currentColor", viewBox = "0 0 24 24", label, style, ...props }) {
+  const theme = useTheme();
+  const themeColor = color.startsWith("$") ? theme[color.slice(1)]?.get() ?? color : color;
+  const normalized = normalizeIconPaths(paths, themeColor);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox,
+      color: themeColor,
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      focusable: "false",
+      style: { display: "block", flexShrink: 0, ...style },
+      ...props,
+      children: normalized.map((path, index) => /* @__PURE__ */ jsx("path", { ...path }, `${path.d}-${index}`))
+    }
+  );
+}
+function NamedIcon({ name, ...props }) {
+  return /* @__PURE__ */ jsx(Icon, { paths: icons[name], ...props });
+}
+
+// src/index.ts
+import { Anchor, Image, ScrollView, Separator, View, XStack, YStack, ZStack } from "tamagui";
+export {
+  Anchor,
+  Icon,
+  Image,
+  NamedIcon,
+  ScrollView,
+  Separator,
+  View,
+  XStack,
+  YStack,
+  ZStack
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/icon.tsx"],"sourcesContent":["export * from '@girumtech/gs-design-system-core'\nexport { Icon, NamedIcon, type IconProps } from './icon'\nexport { Anchor, Image, ScrollView, Separator, View, XStack, YStack, ZStack } from 'tamagui'\n","import type { SVGProps } from 'react'\nimport { icons, normalizeIconPaths, type IconName, type IconPath } from '@girumtech/gs-design-system-core'\nimport { useTheme } from 'tamagui'\n\nexport interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'color'> {\n  paths: readonly IconPath[]\n  size?: number\n  color?: string\n  viewBox?: string\n  label?: string\n}\n\nexport function Icon({ paths, size = 24, color = 'currentColor', viewBox = '0 0 24 24', label, style, ...props }: IconProps) {\n  const theme = useTheme()\n  const themeColor = color.startsWith('$')\n    ? (theme[color.slice(1) as keyof typeof theme]?.get() as string | undefined) ?? color\n    : color\n  const normalized = normalizeIconPaths(paths, themeColor)\n  return (\n    <svg\n      width={size}\n      height={size}\n      viewBox={viewBox}\n      color={themeColor}\n      role={label ? 'img' : undefined}\n      aria-label={label}\n      aria-hidden={label ? undefined : true}\n      focusable=\"false\"\n      style={{ display: 'block', flexShrink: 0, ...style }}\n      {...props}\n    >\n      {normalized.map((path, index) => <path key={`${path.d}-${index}`} {...path} />)}\n    </svg>\n  )\n}\n\nexport function NamedIcon({ name, ...props }: Omit<IconProps, 'paths'> & { name: IconName }) {\n  return <Icon paths={icons[name]} {...props} />\n}\n"],"mappings":";AAAA,cAAc;;;ACCd,SAAS,OAAO,0BAAwD;AACxE,SAAS,gBAAgB;AA6Bc;AAnBhC,SAAS,KAAK,EAAE,OAAO,OAAO,IAAI,QAAQ,gBAAgB,UAAU,aAAa,OAAO,OAAO,GAAG,MAAM,GAAc;AAC3H,QAAM,QAAQ,SAAS;AACvB,QAAM,aAAa,MAAM,WAAW,GAAG,IAClC,MAAM,MAAM,MAAM,CAAC,CAAuB,GAAG,IAAI,KAA4B,QAC9E;AACJ,QAAM,aAAa,mBAAmB,OAAO,UAAU;AACvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,MACA,OAAO;AAAA,MACP,MAAM,QAAQ,QAAQ;AAAA,MACtB,cAAY;AAAA,MACZ,eAAa,QAAQ,SAAY;AAAA,MACjC,WAAU;AAAA,MACV,OAAO,EAAE,SAAS,SAAS,YAAY,GAAG,GAAG,MAAM;AAAA,MAClD,GAAG;AAAA,MAEH,qBAAW,IAAI,CAAC,MAAM,UAAU,oBAAC,UAAiC,GAAG,QAA1B,GAAG,KAAK,CAAC,IAAI,KAAK,EAAc,CAAE;AAAA;AAAA,EAChF;AAEJ;AAEO,SAAS,UAAU,EAAE,MAAM,GAAG,MAAM,GAAkD;AAC3F,SAAO,oBAAC,QAAK,OAAO,MAAM,IAAI,GAAI,GAAG,OAAO;AAC9C;;;ADpCA,SAAS,QAAQ,OAAO,YAAY,WAAW,MAAM,QAAQ,QAAQ,cAAc;","names":[]}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@girumtech/gs-design-system-react",
+  "version": "0.1.4",
+  "description": "React web entry point for GsDesignSystem",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc -p tsconfig.json"
+  },
+  "dependencies": {
+    "@girumtech/gs-design-system-core": "0.1.4"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "react-native-svg": ">=15",
+    "react-native-web": ">=0.21",
+    "tamagui": ">=2.7.0 <3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}