@yeoooonn/ds-app 0.0.1

package/dist/index.d.mts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Theme } from '@yeoooonn/ds-tokens';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps {
+    label: string;
+    onPress?: () => void;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+}
+declare function Button({ label, onPress, variant, size, disabled, loading, }: ButtonProps): React.JSX.Element;
+
+type ColorScheme = 'light' | 'dark';
+interface ThemeContextValue {
+    theme: Theme;
+    colorScheme: ColorScheme;
+    toggleTheme: () => void;
+    setColorScheme: (scheme: ColorScheme) => void;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultScheme?: ColorScheme;
+}
+declare function ThemeProvider({ children, defaultScheme }: ThemeProviderProps): React.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { Button, ThemeProvider, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Theme } from '@yeoooonn/ds-tokens';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps {
+    label: string;
+    onPress?: () => void;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+}
+declare function Button({ label, onPress, variant, size, disabled, loading, }: ButtonProps): React.JSX.Element;
+
+type ColorScheme = 'light' | 'dark';
+interface ThemeContextValue {
+    theme: Theme;
+    colorScheme: ColorScheme;
+    toggleTheme: () => void;
+    setColorScheme: (scheme: ColorScheme) => void;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultScheme?: ColorScheme;
+}
+declare function ThemeProvider({ children, defaultScheme }: ThemeProviderProps): React.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { Button, ThemeProvider, useTheme };

package/dist/index.js

@@ -0,0 +1,156 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  ThemeProvider: () => ThemeProvider,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/index.tsx
+var import_react = __toESM(require("react"));
+var import_react_native = require("react-native");
+var import_ds_tokens = require("@yeoooonn/ds-tokens");
+function Button({
+  label,
+  onPress,
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false
+}) {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_react_native.TouchableOpacity,
+    {
+      onPress,
+      disabled: disabled || loading,
+      activeOpacity: 0.7,
+      style: [
+        styles.base,
+        styles[`variant_${variant}`],
+        styles[`size_${size}`],
+        (disabled || loading) && styles.disabled
+      ]
+    },
+    loading ? /* @__PURE__ */ import_react.default.createElement(
+      import_react_native.ActivityIndicator,
+      {
+        size: "small",
+        color: variant === "primary" ? import_ds_tokens.colors.white : import_ds_tokens.colors.primary[600]
+      }
+    ) : /* @__PURE__ */ import_react.default.createElement(import_react_native.Text, { style: [styles.label, styles[`label_${variant}`], styles[`labelSize_${size}`]] }, label)
+  );
+}
+var styles = import_react_native.StyleSheet.create({
+  base: {
+    borderRadius: import_ds_tokens.borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row"
+  },
+  variant_primary: {
+    backgroundColor: import_ds_tokens.colors.primary[600]
+  },
+  variant_secondary: {
+    backgroundColor: import_ds_tokens.colors.transparent,
+    borderWidth: 1.5,
+    borderColor: import_ds_tokens.colors.primary[600]
+  },
+  variant_ghost: {
+    backgroundColor: import_ds_tokens.colors.transparent
+  },
+  size_sm: {
+    paddingHorizontal: import_ds_tokens.spacing[3],
+    paddingVertical: import_ds_tokens.spacing[1],
+    minHeight: 32
+  },
+  size_md: {
+    paddingHorizontal: import_ds_tokens.spacing[4],
+    paddingVertical: import_ds_tokens.spacing[2],
+    minHeight: 44
+  },
+  size_lg: {
+    paddingHorizontal: import_ds_tokens.spacing[6],
+    paddingVertical: import_ds_tokens.spacing[3],
+    minHeight: 52
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  label: {
+    fontWeight: import_ds_tokens.fontWeight.semibold
+  },
+  label_primary: {
+    color: import_ds_tokens.colors.white
+  },
+  label_secondary: {
+    color: import_ds_tokens.colors.primary[600]
+  },
+  label_ghost: {
+    color: import_ds_tokens.colors.primary[600]
+  },
+  labelSize_sm: {
+    fontSize: import_ds_tokens.fontSize.sm
+  },
+  labelSize_md: {
+    fontSize: import_ds_tokens.fontSize.md
+  },
+  labelSize_lg: {
+    fontSize: import_ds_tokens.fontSize.lg
+  }
+});
+
+// src/theme/ThemeProvider.tsx
+var import_react2 = __toESM(require("react"));
+var import_ds_tokens2 = require("@yeoooonn/ds-tokens");
+var ThemeContext = (0, import_react2.createContext)(null);
+function ThemeProvider({ children, defaultScheme = "light" }) {
+  const [colorScheme, setColorScheme] = (0, import_react2.useState)(defaultScheme);
+  const theme = colorScheme === "light" ? import_ds_tokens2.lightTheme : import_ds_tokens2.darkTheme;
+  const toggleTheme = () => {
+    setColorScheme((prev) => prev === "light" ? "dark" : "light");
+  };
+  return /* @__PURE__ */ import_react2.default.createElement(ThemeContext.Provider, { value: { theme, colorScheme, toggleTheme, setColorScheme } }, children);
+}
+function useTheme() {
+  const context = (0, import_react2.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  ThemeProvider,
+  useTheme
+});

package/dist/index.mjs

@@ -0,0 +1,117 @@
+// src/components/Button/index.tsx
+import React from "react";
+import { TouchableOpacity, Text, StyleSheet, ActivityIndicator } from "react-native";
+import { colors, fontSize, fontWeight, spacing, borderRadius } from "@yeoooonn/ds-tokens";
+function Button({
+  label,
+  onPress,
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  loading = false
+}) {
+  return /* @__PURE__ */ React.createElement(
+    TouchableOpacity,
+    {
+      onPress,
+      disabled: disabled || loading,
+      activeOpacity: 0.7,
+      style: [
+        styles.base,
+        styles[`variant_${variant}`],
+        styles[`size_${size}`],
+        (disabled || loading) && styles.disabled
+      ]
+    },
+    loading ? /* @__PURE__ */ React.createElement(
+      ActivityIndicator,
+      {
+        size: "small",
+        color: variant === "primary" ? colors.white : colors.primary[600]
+      }
+    ) : /* @__PURE__ */ React.createElement(Text, { style: [styles.label, styles[`label_${variant}`], styles[`labelSize_${size}`]] }, label)
+  );
+}
+var styles = StyleSheet.create({
+  base: {
+    borderRadius: borderRadius.md,
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: "row"
+  },
+  variant_primary: {
+    backgroundColor: colors.primary[600]
+  },
+  variant_secondary: {
+    backgroundColor: colors.transparent,
+    borderWidth: 1.5,
+    borderColor: colors.primary[600]
+  },
+  variant_ghost: {
+    backgroundColor: colors.transparent
+  },
+  size_sm: {
+    paddingHorizontal: spacing[3],
+    paddingVertical: spacing[1],
+    minHeight: 32
+  },
+  size_md: {
+    paddingHorizontal: spacing[4],
+    paddingVertical: spacing[2],
+    minHeight: 44
+  },
+  size_lg: {
+    paddingHorizontal: spacing[6],
+    paddingVertical: spacing[3],
+    minHeight: 52
+  },
+  disabled: {
+    opacity: 0.5
+  },
+  label: {
+    fontWeight: fontWeight.semibold
+  },
+  label_primary: {
+    color: colors.white
+  },
+  label_secondary: {
+    color: colors.primary[600]
+  },
+  label_ghost: {
+    color: colors.primary[600]
+  },
+  labelSize_sm: {
+    fontSize: fontSize.sm
+  },
+  labelSize_md: {
+    fontSize: fontSize.md
+  },
+  labelSize_lg: {
+    fontSize: fontSize.lg
+  }
+});
+
+// src/theme/ThemeProvider.tsx
+import React2, { createContext, useContext, useState } from "react";
+import { lightTheme, darkTheme } from "@yeoooonn/ds-tokens";
+var ThemeContext = createContext(null);
+function ThemeProvider({ children, defaultScheme = "light" }) {
+  const [colorScheme, setColorScheme] = useState(defaultScheme);
+  const theme = colorScheme === "light" ? lightTheme : darkTheme;
+  const toggleTheme = () => {
+    setColorScheme((prev) => prev === "light" ? "dark" : "light");
+  };
+  return /* @__PURE__ */ React2.createElement(ThemeContext.Provider, { value: { theme, colorScheme, toggleTheme, setColorScheme } }, children);
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within ThemeProvider");
+  }
+  return context;
+}
+export {
+  Button,
+  ThemeProvider,
+  useTheme
+};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@yeoooonn/ds-app",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "expo": ">=50.0.0"
+  },
+  "dependencies": {
+    "@yeoooonn/ds-tokens": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "react-native": "^0.73.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch"
+  }
+}