futsuno-ui 0.1.0

package/dist/tokens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokens/colors.ts","../../src/tokens/typography.ts","../../src/tokens/spacing.ts","../../src/tokens/index.ts"],"names":[],"mappings":";AAKO,IAAM,MAAA,GAAS;AAAA;AAAA,EAEpB,KAAA,EAAO,SAAA;AAAA;AAAA,EAGP,KAAA,EAAO,SAAA;AAAA;AAAA,EAGP,IAAA,EAAM;AAAA;AAAA,IAEJ,GAAA,EAAK,SAAA;AAAA;AAAA,IAEL,GAAA,EAAK,SAAA;AAAA;AAAA,IAEL,GAAA,EAAK,SAAA;AAAA;AAAA,IAEL,GAAA,EAAK;AAAA,GACP;AAAA;AAAA,EAGA,UAAA,EAAY;AAAA;AAAA,IAEV,IAAA,EAAM;AAAA,GACR;AAAA;AAAA,EAGA,MAAA,EAAQ;AAAA;AAAA,IAEN,IAAA,EAAM,SAAA;AAAA;AAAA,IAEN,IAAA,EAAM,SAAA;AAAA;AAAA,IAEN,GAAA,EAAK;AAAA,GACP;AAAA;AAAA,EAGA,MAAA,EAAQ;AAAA,IACN,KAAA,EAAO,SAAA;AAAA,IACP,GAAA,EAAK,SAAA;AAAA,IACL,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA;AAAA,EAGA,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,SAAA;AAAA,IACT,SAAA,EAAW,SAAA;AAAA,IACX,OAAA,EAAS,SAAA;AAAA,IACT,MAAA,EAAQ;AAAA;AAEZ;AAMO,IAAM,YAAA,GAAe;AAAA,EAC1B,iBAAiB,MAAA,CAAO,KAAA;AAAA,EACxB,iBAAiB,MAAA,CAAO,KAAA;AAAA,EACxB,kBAAA,EAAoB,MAAA,CAAO,IAAA,CAAK,GAAG,CAAA;AAAA,EACnC,kBAAA,EAAoB,MAAA,CAAO,IAAA,CAAK,GAAG,CAAA;AAAA,EACnC,kBAAA,EAAoB,MAAA,CAAO,IAAA,CAAK,GAAG,CAAA;AAAA,EACnC,kBAAA,EAAoB,MAAA,CAAO,IAAA,CAAK,GAAG,CAAA;AAAA,EACnC,yBAAA,EAA2B,OAAO,UAAA,CAAW,IAAA;AAAA,EAC7C,qBAAA,EAAuB,OAAO,MAAA,CAAO,IAAA;AAAA,EACrC,qBAAA,EAAuB,OAAO,MAAA,CAAO,IAAA;AAAA,EACrC,oBAAA,EAAsB,OAAO,MAAA,CAAO;AACtC;;;AClEO,IAAM,UAAA,GAAa;AAAA;AAAA,EAExB,OAAA,EAAS,4BAAA;AAAA;AAAA,EAET,KAAA,EAAO;AACT;AAGO,IAAM,UAAA,GAAa;AAAA,EACxB,OAAA,EAAS,GAAA;AAAA,EACT,MAAA,EAAQ,GAAA;AAAA,EACR,IAAA,EAAM;AACR;AAGO,IAAM,UAAA,GAAa;AAAA;AAAA,EAExB,EAAA,EAAI;AAAA,IACF,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,EAAA,EAAI;AAAA,IACF,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,EAAA,EAAI;AAAA,IACF,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,EAAA,EAAI;AAAA,IACF,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,MAAA,EAAQ;AAAA,IACN,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,MAAA,EAAQ;AAAA,IACN,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,MAAA,EAAQ;AAAA,IACN,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,SAAA,EAAW;AAAA,IACT,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,SAAA,EAAW;AAAA,IACT,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,SAAA,EAAW;AAAA,IACT,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,SAAA,EAAW;AAAA,IACT,QAAA,EAAU,KAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,MAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,QAAA,EAAU;AAAA,IACR,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,IAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,QAAA,EAAU;AAAA,IACR,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,IAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA,IACP,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,IAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA,GACzB;AAAA;AAAA,EAGA,OAAA,EAAS;AAAA,IACP,QAAA,EAAU,MAAA;AAAA,IACV,UAAA,EAAY,IAAA;AAAA,IACZ,aAAA,EAAe,QAAA;AAAA,IACf,YAAY,UAAA,CAAW,IAAA;AAAA,IACvB,YAAY,UAAA,CAAW;AAAA;AAE3B;;;ACtJO,IAAM,OAAA,GAAU;AAAA;AAAA,EAErB,GAAA,EAAK,KAAA;AAAA;AAAA,EAEL,GAAA,EAAK,KAAA;AAAA;AAAA,EAEL,IAAA,EAAM,MAAA;AAAA;AAAA,EAEN,IAAA,EAAM,MAAA;AAAA;AAAA,EAEN,IAAA,EAAM,MAAA;AAAA;AAAA,EAEN,IAAA,EAAM,MAAA;AAAA;AAAA,EAEN,IAAA,EAAM,MAAA;AAAA;AAAA,EAEN,IAAA,EAAM;AACR;AAGO,IAAM,aAAA,GAAgB;AAAA,EAC3B,GAAA,EAAK,CAAA;AAAA,EACL,GAAA,EAAK,CAAA;AAAA,EACL,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM;AACR;AAGO,IAAM,YAAA,GAAe;AAAA;AAAA,EAE1B,MAAA,EAAQ,KAAA;AAAA;AAAA,EAER,EAAA,EAAI,KAAA;AAAA;AAAA,EAEJ,KAAA,EAAO,MAAA;AAAA;AAAA,EAEP,IAAA,EAAM;AACR;AAGO,IAAM,SAAA,GAAY;AAAA;AAAA,EAEvB,MAAA,EAAQ,qCAAA;AAAA;AAAA,EAER,IAAA,EAAM;AACR;;;AC3BO,IAAM,MAAA,GAAS;AAAA,EACpB,MAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF","file":"index.js","sourcesContent":["/**\n * Futsuno Design System - Color Tokens\n * Extracted from Figma Design System\n */\n\nexport const colors = {\n  /** Primary black color - #040404 */\n  black: '#040404',\n\n  /** Primary white color - #FFFFFF */\n  white: '#FFFFFF',\n\n  /** Gray scale colors */\n  gray: {\n    /** Dark gray - #464646 - Used for buttons, secondary text */\n    900: '#464646',\n    /** Medium gray - #BDC1C2 - Used for borders */\n    400: '#BDC1C2',\n    /** Light gray - #E5E6E6 - Used for backgrounds */\n    200: '#E5E6E6',\n    /** Lightest gray - #E5E6E6 */\n    100: '#E5E6E6',\n  },\n\n  /** Background colors */\n  background: {\n    /** Section background gray - #F2F3F1 */\n    gray: '#F2F3F1',\n  },\n\n  /** Accent colors */\n  accent: {\n    /** Gold accent - #978E5F - Used for badges, premium elements */\n    gold: '#978E5F',\n    /** Blue accent - #457D99 */\n    blue: '#457D99',\n    /** Red accent - #CC5E58 - Used for CTAs, emphasis */\n    red: '#CC5E58',\n  },\n\n  /** Button colors - semantic aliases */\n  button: {\n    black: '#464646',\n    red: '#CC5E58',\n    gold: '#978E5F',\n    white: '#FFFFFF',\n  },\n\n  /** Text colors - semantic aliases */\n  text: {\n    primary: '#040404',\n    secondary: '#464646',\n    inverse: '#FFFFFF',\n    accent: '#CC5E58',\n  },\n} as const;\n\n/** Type for color tokens */\nexport type Colors = typeof colors;\n\n/** Flat color palette for CSS variables */\nexport const colorPalette = {\n  '--color-black': colors.black,\n  '--color-white': colors.white,\n  '--color-gray-900': colors.gray[900],\n  '--color-gray-400': colors.gray[400],\n  '--color-gray-200': colors.gray[200],\n  '--color-gray-100': colors.gray[100],\n  '--color-background-gray': colors.background.gray,\n  '--color-accent-gold': colors.accent.gold,\n  '--color-accent-blue': colors.accent.blue,\n  '--color-accent-red': colors.accent.red,\n} as const;\n\n","/**\n * Futsuno Design System - Typography Tokens\n * Extracted from Figma Design System\n */\n\n/** Font families */\nexport const fontFamily = {\n  /** Primary font - Noto Sans JP */\n  primary: '\"Noto Sans JP\", sans-serif',\n  /** Secondary font for prices - A-OTF Shuei NGo Kin StdN */\n  price: '\"A-OTF Shuei NGo Kin StdN\", \"Noto Sans JP\", sans-serif',\n} as const;\n\n/** Font weights */\nexport const fontWeight = {\n  regular: 400,\n  medium: 500,\n  bold: 700,\n} as const;\n\n/** Typography scale */\nexport const typography = {\n  /** Heading 1 - 24px */\n  h1: {\n    fontSize: '24px',\n    lineHeight: 1.55,\n    letterSpacing: '0.16em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Heading 2 - 22px */\n  h2: {\n    fontSize: '22px',\n    lineHeight: 1.55,\n    letterSpacing: '0.16em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Heading 3 - 20px */\n  h3: {\n    fontSize: '20px',\n    lineHeight: 1.35,\n    letterSpacing: '0.16em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Heading 4 - 18px */\n  h4: {\n    fontSize: '18px',\n    lineHeight: 1.45,\n    letterSpacing: '0.16em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Body large - 16px */\n  bodyLg: {\n    fontSize: '16px',\n    lineHeight: 1.95,\n    letterSpacing: '0.08em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Body medium - 15px */\n  bodyMd: {\n    fontSize: '15px',\n    lineHeight: 1.85,\n    letterSpacing: '0.08em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Body small - 13px */\n  bodySm: {\n    fontSize: '13px',\n    lineHeight: 1.85,\n    letterSpacing: '0.08em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Caption large - 12px */\n  captionLg: {\n    fontSize: '12px',\n    lineHeight: 1.45,\n    letterSpacing: '0.08em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Caption medium - 11px */\n  captionMd: {\n    fontSize: '11px',\n    lineHeight: 1.45,\n    letterSpacing: '0.08em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Caption small - 10px */\n  captionSm: {\n    fontSize: '10px',\n    lineHeight: 1.45,\n    letterSpacing: '0.08em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Caption extra small - 8px */\n  captionXs: {\n    fontSize: '8px',\n    lineHeight: 1.45,\n    letterSpacing: '0.08em',\n    fontWeight: fontWeight.medium,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Button text - 20px bold */\n  buttonLg: {\n    fontSize: '20px',\n    lineHeight: 1.45,\n    letterSpacing: '0.05em',\n    fontWeight: fontWeight.bold,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Button text - 18px bold */\n  buttonMd: {\n    fontSize: '18px',\n    lineHeight: 1.45,\n    letterSpacing: '0.05em',\n    fontWeight: fontWeight.bold,\n    fontFamily: fontFamily.primary,\n  },\n\n  /** Price text - 25px */\n  priceLg: {\n    fontSize: '25px',\n    lineHeight: 1.45,\n    letterSpacing: '0.05em',\n    fontWeight: fontWeight.bold,\n    fontFamily: fontFamily.price,\n  },\n\n  /** Price text - 14px */\n  priceSm: {\n    fontSize: '14px',\n    lineHeight: 1.45,\n    letterSpacing: '0.05em',\n    fontWeight: fontWeight.bold,\n    fontFamily: fontFamily.price,\n  },\n} as const;\n\n/** Type for typography tokens */\nexport type Typography = typeof typography;\nexport type TypographyKey = keyof Typography;\n\n","/**\n * Futsuno Design System - Spacing Tokens\n * Extracted from Figma Design System\n */\n\n/** Spacing scale in pixels */\nexport const spacing = {\n  /** 4px */\n  '4': '4px',\n  /** 8px */\n  '8': '8px',\n  /** 12px */\n  '12': '12px',\n  /** 16px */\n  '16': '16px',\n  /** 24px */\n  '24': '24px',\n  /** 32px */\n  '32': '32px',\n  /** 40px */\n  '40': '40px',\n  /** 48px */\n  '48': '48px',\n} as const;\n\n/** Spacing as numbers (for calculations) */\nexport const spacingValues = {\n  '4': 4,\n  '8': 8,\n  '12': 12,\n  '16': 16,\n  '24': 24,\n  '32': 32,\n  '40': 40,\n  '48': 48,\n} as const;\n\n/** Border radius tokens */\nexport const borderRadius = {\n  /** Button border radius - 3px */\n  button: '3px',\n  /** Small radius - 2px */\n  sm: '2px',\n  /** Badge radius - 55px (circular) */\n  badge: '55px',\n  /** Full circle */\n  full: '9999px',\n} as const;\n\n/** Box shadow tokens */\nexport const boxShadow = {\n  /** Button shadow */\n  button: '0px 4px 16px 0px rgba(4, 4, 4, 0.4)',\n  /** None */\n  none: 'none',\n} as const;\n\n/** Type for spacing tokens */\nexport type Spacing = typeof spacing;\nexport type SpacingKey = keyof Spacing;\n\n","/**\n * Futsuno Design System - Design Tokens\n * All design tokens extracted from Figma\n */\n\nexport { colors, colorPalette, type Colors } from './colors';\nexport {\n  typography,\n  fontFamily,\n  fontWeight,\n  type Typography,\n  type TypographyKey,\n} from './typography';\nexport {\n  spacing,\n  spacingValues,\n  borderRadius,\n  boxShadow,\n  type Spacing,\n  type SpacingKey,\n} from './spacing';\n\n// Re-import for combined tokens object\nimport { colors } from './colors';\nimport { typography } from './typography';\nimport { spacing, borderRadius, boxShadow } from './spacing';\n\n/** Combined tokens object for convenience */\nexport const tokens = {\n  colors,\n  typography,\n  spacing,\n  borderRadius,\n  boxShadow,\n} as const;\n\n"]}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "futsuno-ui",
+  "version": "0.1.0",
+  "description": "Design system for Futsuno Shop - D2C brand UI components",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./tokens": {
+      "import": "./dist/tokens/index.js",
+      "types": "./dist/tokens/index.d.ts"
+    },
+    "./theme": {
+      "import": "./dist/theme/index.js",
+      "types": "./dist/theme/index.d.ts"
+    },
+    "./lp": {
+      "import": "./dist/lp/index.js",
+      "types": "./dist/lp/index.d.ts"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
+    "postcss": "^8.4.47",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.4"
+  },
+  "keywords": [
+    "futsuno",
+    "design-system",
+    "react",
+    "tailwindcss",
+    "ecforce",
+    "lp",
+    "ui-components"
+  ],
+  "author": "Futsuno Shop",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/futsuno/futsuno-ui.git"
+  }
+}
+