@jects/jds 0.0.1

package/dist/utils.d.ts

@@ -0,0 +1,139 @@
+import { Theme, CSSObject } from '@emotion/react';
+
+/**
+ * Hex 색상 코드를 RGBA로 변환하는 함수
+ *
+ * @param hex - Hex 색상 코드 (예: '#FF5733' 또는 'FF5733') 현재 토큰의 경우 #이 붙여져서 등록되어있음
+ * @param alpha - 투명도 (0~1 사이의 값)
+ * @returns RGBA 문자열 (예: 'rgba(255, 87, 51, 0.55)')
+ *
+ * @example
+ * hexToRgba('토큰 명(혹은 실제 코드)',투명도)'
+ * hexToRgba('#FF5733', 0.55) // 'rgba(255, 87, 51, 0.55)'
+ * hexToRgba('FF5733', 1) // 'rgba(255, 87, 51, 1)'
+ */
+declare function HexToRgba(hex: string, alpha: number): string;
+
+/**
+ * px값을 rem 단위로 변환합니다
+ * @param pixels - 변환할 px 값
+ * @param baseFontSize - 기본 폰트 크기 (px 단위, 기본값: 16)
+ * @param precision - 소수점 자릿수 (기본값: 4)
+ * @returns rem 값이 포함된 문자열
+ */
+declare function pxToRem(pixels: number, baseFontSize?: number, precision?: number): string;
+/**
+ * 특정 폰트 크기를 기준으로 스페이싱 값을 em 단위로 변환합니다
+ * @param spacing - 변환할 스페이싱 값 (px단위)
+ * @param fontSize - 기준이 되는 폰트 크기 (px단위)
+ * @param precision - 소수점 자릿수 (기본값: 3)
+ * @returns em 값이 포함된 문자열
+ */
+declare function spacingToEm(spacing: number, fontSize: number, precision?: number): string;
+/**
+ * px값으로부터 line-height 비율을 계산합니다
+ * @param lineHeight - 줄 간격 값 (px단위)
+ * @param fontSize - 폰트 크기 (px단위)
+ * @param precision - 소수점 자릿수 (기본값: 1)
+ * @returns 단위 없는 line-height 비율 문자열
+ */
+declare function lineHeightRatio(lineHeight: number, fontSize: number, precision?: number): number;
+
+type Depth = "shallowest" | "shallower" | "shallow" | "standard" | "deep" | "deeper" | "deepest";
+type Level = "standard" | "embossed" | "raised" | "floated" | "overlay";
+type Shadow = "embossed" | "raised" | "floated" | "overlay";
+
+type Variant = "normal" | "accent" | "positive" | "destructive";
+type Density = "bold" | "normal" | "assistive" | "subtle";
+type FillColor = "default" | "inverse";
+type InteractionState = "default" | "readonly" | "disabled" | "locked";
+type InteractionLayerState = "rest" | "hover" | "active" | "focus";
+
+declare function depth(theme: Theme, depthToken: Depth): {
+    backgroundColor: "var(--semantic-surface-shallowest)";
+} | {
+    backgroundColor: "var(--semantic-surface-shallower)";
+} | {
+    backgroundColor: "var(--semantic-surface-shallow)";
+} | {
+    backgroundColor: "var(--semantic-surface-standard)";
+} | {
+    backgroundColor: "var(--semantic-surface-deep)";
+} | {
+    backgroundColor: "var(--semantic-surface-deeper)";
+} | {
+    backgroundColor: "var(--semantic-surface-deepest)";
+} | {
+    backgroundColor?: undefined;
+};
+declare function level(theme: Theme, levelToken: Level): {
+    zIndex: "auto";
+} | {
+    boxShadow: string;
+    zIndex: number;
+} | {
+    boxShadow?: undefined;
+    zIndex: number;
+} | {
+    zIndex?: undefined;
+};
+declare function shadow(theme: Theme, shadowToken: Shadow): {
+    boxShadow: string;
+} | {
+    boxShadow?: undefined;
+};
+
+declare function Interaction(theme: Theme, variant: Variant, density: Density, fillColor: FillColor, state?: InteractionState, borderRadius?: string): CSSObject;
+
+interface InteractionLayerParams {
+    theme: Theme;
+    state: InteractionLayerState;
+    variant: Variant;
+    density: Density;
+    fillColor: FillColor;
+    isReadonly?: boolean;
+    isDisabled?: boolean;
+    isLocked?: boolean;
+    offsetVertical?: number;
+    offsetHorizontal?: number;
+    borderRadius?: number;
+}
+/**
+ * 인터랙션 레이어 스타일 생성
+ *
+ * @description
+ * Figma 스펙에 맞춰 variant + density + fillColor 조합으로 색상 토큰을 결정합니다.
+ * ::after 의사 요소를 사용하여 주어진 state에 대한 스타일만 생성합니다.
+ *
+ * 중요: 컴포넌트의 실제 인터랙션 상태(hover, active, focus)와
+ * InteractionLayer의 state는 독립적으로 설정할 수 있습니다.
+ *
+ * 예: 컴포넌트 hover 시 InteractionLayer state='rest' 사용 가능
+ *
+ * @param theme - Emotion 테마 객체
+ * @param state - InteractionLayer 시각적 상태 (rest, hover, active, focus)
+ * @param variant - 색상 변형 (normal, accent, positive, destructive)
+ * @param density - 색상 강도 (bold, normal, assistive, subtle)
+ * @param fillColor - 배경 타입 (default, inverse)
+ * @param isReadonly - 읽기 전용 상태
+ * @param isDisabled - 비활성화 상태
+ * @param isLocked - 잠김 상태
+ * @param offsetVertical - 상하 방향 오프셋 (px 단위)
+ * @param offsetHorizontal - 좌우 방향 오프셋 (px 단위)
+ * @param borderRadius - 테두리 둥글기 (px 단위)
+ *
+ * @example
+ * // 일반적인 사용 (컴포넌트 상태 = InteractionLayer 상태)
+ * '&:hover': InteractionLayer({ theme, state: 'hover', ... })
+ *
+ * @example
+ * // 독립적인 사용 (컴포넌트 hover 시에도 InteractionLayer는 rest)
+ * '&:hover': InteractionLayer({ theme, state: 'rest', ... })
+ *
+ * @example
+ * // offset과 borderRadius를 사용하여 더 큰 터치 영역과 둥근 모서리 제공
+ * InteractionLayer({ theme, state: 'hover', ..., offsetVertical: 4, offsetHorizontal: 8, borderRadius: 4 })
+ */
+declare function InteractionLayer({ theme, state, variant, density, fillColor, isReadonly, isDisabled, isLocked, offsetVertical, offsetHorizontal, borderRadius, }: InteractionLayerParams): CSSObject;
+
+export { HexToRgba, Interaction, InteractionLayer, type InteractionLayerParams, depth, level, lineHeightRatio, pxToRem, shadow, spacingToEm };

package/dist/utils.js

@@ -0,0 +1,24 @@
+import {
+  HexToRgba,
+  Interaction,
+  InteractionLayer,
+  depth,
+  level,
+  lineHeightRatio,
+  pxToRem,
+  shadow,
+  spacingToEm
+} from "./chunk-4G7IFL4O.js";
+import "./chunk-EGRHWZRV.js";
+export {
+  HexToRgba,
+  Interaction,
+  InteractionLayer,
+  depth,
+  level,
+  lineHeightRatio,
+  pxToRem,
+  shadow,
+  spacingToEm
+};
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "@jects/jds",
+  "version": "0.0.1",
+  "description": "Ject Design System",
+  "author": "Ject Team",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=10.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JECT-Study/JECT-Official-WebSite-Client.git",
+    "directory": "packages/jds"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js",
+      "require": "./dist/theme.cjs"
+    },
+    "./hooks": {
+      "types": "./dist/hooks.d.ts",
+      "import": "./dist/hooks.js",
+      "require": "./dist/hooks.cjs"
+    },
+    "./utils": {
+      "types": "./dist/utils.d.ts",
+      "import": "./dist/utils.js",
+      "require": "./dist/utils.cjs"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "import": "./dist/tokens.js",
+      "require": "./dist/tokens.cjs"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsc --noEmit && tsup",
+    "lint": "eslint --fix --max-warnings 0",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=$CHROMATIC_TOKEN",
+    "build:tokens": "npx tsx tokensBuilder.ts",
+    "clean": "rimraf dist node_modules .turbo storybook-static",
+    "build:icons": "svgr src/assets/icons --out-dir src/components/Icon/generated --typescript --ext tsx",
+    "type-check": "tsc -b --noEmit",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "radix-ui": "^1.4.3"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@emotion/babel-plugin": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@ject/eslint-config": "*",
+    "@storybook/addon-docs": "10.1.0",
+    "@storybook/addon-onboarding": "^10.1.0",
+    "@storybook/react-vite": "10.1.0",
+    "@svgr/cli": "^8.1.0",
+    "@svgr/core": "^8.1.0",
+    "@types/node": "^22.19.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "chromatic": "^11.25.2",
+    "eslint-plugin-storybook": "10.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "10.1.0",
+    "style-dictionary": "^4.3.2",
+    "tsup": "^8.5.0",
+    "zod": "^3.25.76"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11",
+    "@emotion/styled": ">=11",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "4.53.2"
+  }
+}