@girumtech/gs-design-system-native 0.1.4

package/README.md

@@ -0,0 +1,146 @@
+# @girumtech/gs-design-system-native
+
+React Native entry point for GsDesignSystem, a TypeScript design system built with Tamagui. It exports shared components and themes, native SVG icons, and curated React Native-compatible layout primitives.
+
+## Requirements
+
+- React 19 or newer
+- React Native 0.81 or newer
+- Tamagui 2.7
+- React Native SVG 15 or newer
+
+## Installation
+
+```bash
+npm install @girumtech/gs-design-system-native tamagui react-native-svg
+```
+
+For a bare React Native iOS application, install CocoaPods after adding the dependencies:
+
+```bash
+cd ios
+pod install
+cd ..
+```
+
+## Application setup
+
+Add `GsProvider` once near the application root. It supplies the Tamagui configuration, tokens, and default theme.
+
+```tsx
+// App.tsx
+import { Button, GsProvider, ScrollView, Text, YStack } from '@girumtech/gs-design-system-native'
+
+export default function App() {
+  return (
+    <GsProvider defaultTheme="blue">
+      <ScrollView backgroundColor="$background">
+        <YStack padding="$4" gap="$4">
+          <Text variant="title">My application</Text>
+          <Text tone="muted">Built with GsDesignSystem.</Text>
+          <Button onPress={() => console.log('Pressed')}>Continue</Button>
+        </YStack>
+      </ScrollView>
+    </GsProvider>
+  )
+}
+```
+
+Available themes are `red`, `red_dark`, `blue`, and `blue_dark`.
+
+`GsProvider` does not have to live directly in `App.tsx`, but it should appear once above components that use theme tokens. It can be placed in a dedicated application providers component or in the registered root component.
+
+## Components
+
+```tsx
+import { Button, Field, Text, XStack, YStack } from '@girumtech/gs-design-system-native'
+
+export function ProfileForm() {
+  return (
+    <YStack padding="$4" gap="$4" backgroundColor="$background">
+      <Text variant="title">Profile</Text>
+
+      <Field
+        id="display-name"
+        label="Display name"
+        placeholder="Your name"
+        helperText="This name is visible to your team."
+      />
+
+      <XStack gap="$3">
+        <Button onPress={() => console.log('Saved')}>Save</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 themes
+
+Use the exported `Theme` component when the selected theme changes at runtime:
+
+```tsx
+import { useState } from 'react'
+import {
+  Button,
+  GsProvider,
+  Text,
+  Theme,
+  YStack,
+  type GsThemeName,
+} from '@girumtech/gs-design-system-native'
+
+export function ThemeExample() {
+  const [theme, setTheme] = useState<GsThemeName>('blue')
+
+  return (
+    <GsProvider defaultTheme="blue">
+      <Theme name={theme}>
+        <YStack flex={1} padding="$4" gap="$4" backgroundColor="$background">
+          <Text variant="title">Current theme: {theme}</Text>
+          <Button onPress={() => setTheme('red')}>Use red</Button>
+          <Button onPress={() => setTheme('blue_dark')}>Use dark blue</Button>
+        </YStack>
+      </Theme>
+    </GsProvider>
+  )
+}
+```
+
+## Icons
+
+Built-in icons and custom path icons share the same native SVG API:
+
+```tsx
+import { Icon, NamedIcon, type IconPath } from '@girumtech/gs-design-system-native'
+
+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="#FC2B2B" label="Favorite" />
+      <Icon paths={spark} size={32} color="#2323F7" label="Spark" />
+    </>
+  )
+}
+```
+
+Decorative icons may omit `label`; meaningful icons should provide one for accessibility.
+
+## Exports
+
+The package exports `GsProvider`, `Theme`, `Button`, `Input`, `Field`, `Text`, `Icon`, `NamedIcon`, tokens, themes, and the curated `Image`, `ScrollView`, `Separator`, `View`, `XStack`, `YStack`, and `ZStack` primitives.

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { IconPath, IconName } from '@girumtech/gs-design-system-core';
+export * from '@girumtech/gs-design-system-core';
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import Svg from 'react-native-svg';
+export { Image, ScrollView, Separator, View, XStack, YStack, ZStack } from 'tamagui';
+
+interface IconProps extends Omit<ComponentProps<typeof Svg>, 'children'> {
+    paths: readonly IconPath[];
+    size?: number;
+    color?: string;
+    viewBox?: string;
+    label?: string;
+}
+declare function Icon({ paths, size, color, viewBox, label, ...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,32 @@
+// src/index.ts
+export * from "@girumtech/gs-design-system-core";
+
+// src/icon.tsx
+import Svg, { Path } from "react-native-svg";
+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, ...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, ...label ? { accessibilityLabel: label, accessible: true } : { "aria-hidden": true }, ...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 { Image, ScrollView, Separator, View, XStack, YStack, ZStack } from "tamagui";
+export {
+  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 { Image, ScrollView, Separator, View, XStack, YStack, ZStack } from 'tamagui'\n","import type { ComponentProps } from 'react'\nimport Svg, { Path } from 'react-native-svg'\nimport { icons, normalizeIconPaths, type IconName, type IconPath } from '@girumtech/gs-design-system-core'\nimport { useTheme } from 'tamagui'\n\nexport interface IconProps extends Omit<ComponentProps<typeof Svg>, 'children'> {\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, ...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 width={size} height={size} viewBox={viewBox} {...(label ? { accessibilityLabel: label, accessible: true } : { 'aria-hidden': true })} {...props}>\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,OAAO,OAAO,YAAY;AAC1B,SAAS,OAAO,0BAAwD;AACxE,SAAS,gBAAgB;AAkBc;AARhC,SAAS,KAAK,EAAE,OAAO,OAAO,IAAI,QAAQ,gBAAgB,UAAU,aAAa,OAAO,GAAG,MAAM,GAAc;AACpH,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,oBAAC,OAAI,OAAO,MAAM,QAAQ,MAAM,SAAmB,GAAI,QAAQ,EAAE,oBAAoB,OAAO,YAAY,KAAK,IAAI,EAAE,eAAe,KAAK,GAAK,GAAG,OAC5I,qBAAW,IAAI,CAAC,MAAM,UAAU,oBAAC,QAAiC,GAAG,QAA1B,GAAG,KAAK,CAAC,IAAI,KAAK,EAAc,CAAE,GAChF;AAEJ;AAEO,SAAS,UAAU,EAAE,MAAM,GAAG,MAAM,GAAkD;AAC3F,SAAO,oBAAC,QAAK,OAAO,MAAM,IAAI,GAAI,GAAG,OAAO;AAC9C;;;AD1BA,SAAS,OAAO,YAAY,WAAW,MAAM,QAAQ,QAAQ,cAAc;","names":[]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@girumtech/gs-design-system-native",
+  "version": "0.1.4",
+  "description": "React Native 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",
+  "react-native": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "react-native": "./dist/index.js",
+      "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-native": ">=0.81",
+    "react-native-svg": ">=15",
+    "tamagui": ">=2.7.0 <3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}