@m1kapp/kit 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.d.mts +56 -33
  2. package/dist/index.d.ts +56 -33
  3. package/dist/index.js +4 -4
  4. package/dist/index.mjs +3 -3
  5. package/dist/pwa.js +1 -1
  6. package/dist/pwa.mjs +1 -1
  7. package/dist/styles.css +1 -1
  8. package/package.json +5 -2
package/dist/index.d.mts CHANGED
@@ -239,39 +239,55 @@ interface ThemeDialogProps {
239
239
  declare function ThemeDialog({ open, onClose, current, onSelect, dark: darkProp, onDarkToggle, palette, labels: _labels, }: ThemeDialogProps): react_jsx_runtime.JSX.Element;
240
240
 
241
241
  /**
242
- * Font presets for @m1kapp/ui.
242
+ * Font presets for @m1kapp/kit.
243
243
  * CDN links only — no font files bundled.
244
244
  *
245
- * ## Quick setup (recommended)
245
+ * ## Setup
246
+ *
247
+ * ### Option A: `FontLinks` 컴포넌트 (Next.js App Router 권장)
248
+ *
249
+ * ```tsx
250
+ * // app/layout.tsx
251
+ * import { FontLinks, fontFamily, THEME_SCRIPT } from "@m1kapp/kit";
252
+ *
253
+ * export default function RootLayout({ children }) {
254
+ * return (
255
+ * <html lang="ko">
256
+ * <head>
257
+ * <FontLinks />
258
+ * <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
259
+ * </head>
260
+ * <body style={{ fontFamily: fontFamily.default }}>
261
+ * {children}
262
+ * </body>
263
+ * </html>
264
+ * );
265
+ * }
266
+ * ```
267
+ *
268
+ * ### Option B: 수동 `<link>` (Vite / static HTML)
269
+ *
270
+ * ⚠️ Next.js App Router에서 `<link href={fonts.tossface}>` 처럼
271
+ * 변수를 사용하면 SSR 시 href가 누락됩니다. URL을 직접 하드코딩하세요.
246
272
  *
247
- * Add to your `index.html` <head>:
248
273
  * ```html
249
- * <link rel="preconnect" href="https://cdn.jsdelivr.net" />
250
- * <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
251
274
  * <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css" />
252
275
  * <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
253
276
  * ```
254
277
  *
255
- * Add to your global CSS:
278
+ * ### Font stack
279
+ *
280
+ * Tossface를 `system-ui` 앞에 배치해야 macOS에서
281
+ * Apple Color Emoji 대신 Tossface가 적용됩니다.
282
+ *
256
283
  * ```css
257
- * html {
258
- * font-family: "Tossface", "Pretendard Variable", "Pretendard", system-ui, sans-serif;
259
- * }
284
+ * html { font-family: "Tossface", "Pretendard Variable", "Pretendard", sans-serif; }
260
285
  * ```
261
- *
262
- * That's it — Tossface handles emojis, Pretendard handles text.
263
286
  */
264
287
  declare const fonts: {
265
- /**
266
- * Tossface — Toss emoji font (open source, jsDelivr CDN).
267
- * Renders all emoji with the Toss design style.
268
- * Add this to get consistent emoji across platforms.
269
- */
288
+ /** Tossface — Toss emoji font (open source, jsDelivr CDN). */
270
289
  readonly tossface: "https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css";
271
- /**
272
- * Pretendard — best Korean variable web font (jsDelivr CDN).
273
- * Recommended for all Korean UI text.
274
- */
290
+ /** Pretendard — Korean variable web font (jsDelivr CDN). */
275
291
  readonly pretendard: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css";
276
292
  /** Inter — clean Latin sans-serif (Google Fonts) */
277
293
  readonly inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap";
@@ -280,24 +296,31 @@ type FontName = keyof typeof fonts;
280
296
  /**
281
297
  * Recommended font-family stacks.
282
298
  *
283
- * @example
284
- * // In your global CSS:
285
- * html { font-family: ${fontFamily.default}; }
286
- *
287
- * // Or in JS (e.g. main.tsx):
288
- * document.documentElement.style.fontFamily = fontFamily.default;
299
+ * Tossface를 맨 앞에 배치합니다.
300
+ * unicode-range 덕분에 이모지만 Tossface로, 나머지는 Pretendard로 렌더됩니다.
301
+ * system-ui를 포함하면 macOS Apple Color Emoji가 먼저 적용될 수 있어 제외합니다.
289
302
  */
290
303
  declare const fontFamily: {
291
- /**
292
- * Default recommended stack.
293
- * Tossface for emoji + Pretendard for Korean/Latin text.
294
- */
295
- readonly default: "\"Pretendard Variable\", \"Pretendard\", system-ui, -apple-system, sans-serif, \"Tossface\"";
296
- /** Pretendard only */
304
+ /** Tossface(emoji) + Pretendard(text). */
305
+ readonly default: "\"Tossface\", \"Pretendard Variable\", \"Pretendard\", sans-serif";
306
+ /** Pretendard only (no Tossface emoji) */
297
307
  readonly pretendard: "\"Pretendard Variable\", \"Pretendard\", system-ui, sans-serif";
298
308
  /** Inter only */
299
309
  readonly inter: "\"Inter\", system-ui, sans-serif";
300
310
  };
311
+ /**
312
+ * `<link>` 태그를 렌더하는 컴포넌트.
313
+ *
314
+ * Next.js App Router에서 `<link href={변수}>`를 쓰면
315
+ * SSR 시 href가 누락되는 버그가 있어, URL을 리터럴로 하드코딩합니다.
316
+ *
317
+ * ```tsx
318
+ * <head>
319
+ * <FontLinks />
320
+ * </head>
321
+ * ```
322
+ */
323
+ declare function FontLinks(): react_jsx_runtime.JSX.Element;
301
324
 
302
325
  interface TypewriterProps {
303
326
  /** Words to cycle through */
@@ -795,4 +818,4 @@ declare function formatPrice(amount: number, currency?: string, locale?: string)
795
818
 
796
819
  declare function cn(...inputs: ClassValue[]): string;
797
820
 
798
- export { type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, type ColorName, Dialog, type DialogProps, Divider, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, InAppSheet, type InAppSheetProps, KitStyles, PWAInstallButton, type PWAInstallState, Section, SectionHeader, type SectionHeaderProps, type SectionProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, type UseFetchOptions, type UseFetchResult, type UseFormSubmitOptions, type UseFormSubmitResult, type UseInViewOptions, type UseInViewResult, type UsePWAInstallReturn, type UsePollingOptions, type UsePollingResult, type UseShareOptions, type UseShareReturn, Watermark, type WatermarkProps, type WatermarkSponsor, clearFetchCache, cn, colors, createApiClient, createManifest, fontFamily, fonts, formatNumber, formatPrice, mobileViewport, relativeTime, svgIcon, useDebounce, useFetch, useFocusTrap, useFormSubmit, useInView, useLocalStorage, usePWAInstall, usePolling, useShare, useToast };
821
+ export { type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, type ColorName, Dialog, type DialogProps, Divider, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, FontLinks, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, InAppSheet, type InAppSheetProps, KitStyles, PWAInstallButton, type PWAInstallState, Section, SectionHeader, type SectionHeaderProps, type SectionProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, type UseFetchOptions, type UseFetchResult, type UseFormSubmitOptions, type UseFormSubmitResult, type UseInViewOptions, type UseInViewResult, type UsePWAInstallReturn, type UsePollingOptions, type UsePollingResult, type UseShareOptions, type UseShareReturn, Watermark, type WatermarkProps, type WatermarkSponsor, clearFetchCache, cn, colors, createApiClient, createManifest, fontFamily, fonts, formatNumber, formatPrice, mobileViewport, relativeTime, svgIcon, useDebounce, useFetch, useFocusTrap, useFormSubmit, useInView, useLocalStorage, usePWAInstall, usePolling, useShare, useToast };
package/dist/index.d.ts CHANGED
@@ -239,39 +239,55 @@ interface ThemeDialogProps {
239
239
  declare function ThemeDialog({ open, onClose, current, onSelect, dark: darkProp, onDarkToggle, palette, labels: _labels, }: ThemeDialogProps): react_jsx_runtime.JSX.Element;
240
240
 
241
241
  /**
242
- * Font presets for @m1kapp/ui.
242
+ * Font presets for @m1kapp/kit.
243
243
  * CDN links only — no font files bundled.
244
244
  *
245
- * ## Quick setup (recommended)
245
+ * ## Setup
246
+ *
247
+ * ### Option A: `FontLinks` 컴포넌트 (Next.js App Router 권장)
248
+ *
249
+ * ```tsx
250
+ * // app/layout.tsx
251
+ * import { FontLinks, fontFamily, THEME_SCRIPT } from "@m1kapp/kit";
252
+ *
253
+ * export default function RootLayout({ children }) {
254
+ * return (
255
+ * <html lang="ko">
256
+ * <head>
257
+ * <FontLinks />
258
+ * <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
259
+ * </head>
260
+ * <body style={{ fontFamily: fontFamily.default }}>
261
+ * {children}
262
+ * </body>
263
+ * </html>
264
+ * );
265
+ * }
266
+ * ```
267
+ *
268
+ * ### Option B: 수동 `<link>` (Vite / static HTML)
269
+ *
270
+ * ⚠️ Next.js App Router에서 `<link href={fonts.tossface}>` 처럼
271
+ * 변수를 사용하면 SSR 시 href가 누락됩니다. URL을 직접 하드코딩하세요.
246
272
  *
247
- * Add to your `index.html` <head>:
248
273
  * ```html
249
- * <link rel="preconnect" href="https://cdn.jsdelivr.net" />
250
- * <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
251
274
  * <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css" />
252
275
  * <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css" />
253
276
  * ```
254
277
  *
255
- * Add to your global CSS:
278
+ * ### Font stack
279
+ *
280
+ * Tossface를 `system-ui` 앞에 배치해야 macOS에서
281
+ * Apple Color Emoji 대신 Tossface가 적용됩니다.
282
+ *
256
283
  * ```css
257
- * html {
258
- * font-family: "Tossface", "Pretendard Variable", "Pretendard", system-ui, sans-serif;
259
- * }
284
+ * html { font-family: "Tossface", "Pretendard Variable", "Pretendard", sans-serif; }
260
285
  * ```
261
- *
262
- * That's it — Tossface handles emojis, Pretendard handles text.
263
286
  */
264
287
  declare const fonts: {
265
- /**
266
- * Tossface — Toss emoji font (open source, jsDelivr CDN).
267
- * Renders all emoji with the Toss design style.
268
- * Add this to get consistent emoji across platforms.
269
- */
288
+ /** Tossface — Toss emoji font (open source, jsDelivr CDN). */
270
289
  readonly tossface: "https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css";
271
- /**
272
- * Pretendard — best Korean variable web font (jsDelivr CDN).
273
- * Recommended for all Korean UI text.
274
- */
290
+ /** Pretendard — Korean variable web font (jsDelivr CDN). */
275
291
  readonly pretendard: "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css";
276
292
  /** Inter — clean Latin sans-serif (Google Fonts) */
277
293
  readonly inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap";
@@ -280,24 +296,31 @@ type FontName = keyof typeof fonts;
280
296
  /**
281
297
  * Recommended font-family stacks.
282
298
  *
283
- * @example
284
- * // In your global CSS:
285
- * html { font-family: ${fontFamily.default}; }
286
- *
287
- * // Or in JS (e.g. main.tsx):
288
- * document.documentElement.style.fontFamily = fontFamily.default;
299
+ * Tossface를 맨 앞에 배치합니다.
300
+ * unicode-range 덕분에 이모지만 Tossface로, 나머지는 Pretendard로 렌더됩니다.
301
+ * system-ui를 포함하면 macOS Apple Color Emoji가 먼저 적용될 수 있어 제외합니다.
289
302
  */
290
303
  declare const fontFamily: {
291
- /**
292
- * Default recommended stack.
293
- * Tossface for emoji + Pretendard for Korean/Latin text.
294
- */
295
- readonly default: "\"Pretendard Variable\", \"Pretendard\", system-ui, -apple-system, sans-serif, \"Tossface\"";
296
- /** Pretendard only */
304
+ /** Tossface(emoji) + Pretendard(text). */
305
+ readonly default: "\"Tossface\", \"Pretendard Variable\", \"Pretendard\", sans-serif";
306
+ /** Pretendard only (no Tossface emoji) */
297
307
  readonly pretendard: "\"Pretendard Variable\", \"Pretendard\", system-ui, sans-serif";
298
308
  /** Inter only */
299
309
  readonly inter: "\"Inter\", system-ui, sans-serif";
300
310
  };
311
+ /**
312
+ * `<link>` 태그를 렌더하는 컴포넌트.
313
+ *
314
+ * Next.js App Router에서 `<link href={변수}>`를 쓰면
315
+ * SSR 시 href가 누락되는 버그가 있어, URL을 리터럴로 하드코딩합니다.
316
+ *
317
+ * ```tsx
318
+ * <head>
319
+ * <FontLinks />
320
+ * </head>
321
+ * ```
322
+ */
323
+ declare function FontLinks(): react_jsx_runtime.JSX.Element;
301
324
 
302
325
  interface TypewriterProps {
303
326
  /** Words to cycle through */
@@ -795,4 +818,4 @@ declare function formatPrice(amount: number, currency?: string, locale?: string)
795
818
 
796
819
  declare function cn(...inputs: ClassValue[]): string;
797
820
 
798
- export { type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, type ColorName, Dialog, type DialogProps, Divider, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, InAppSheet, type InAppSheetProps, KitStyles, PWAInstallButton, type PWAInstallState, Section, SectionHeader, type SectionHeaderProps, type SectionProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, type UseFetchOptions, type UseFetchResult, type UseFormSubmitOptions, type UseFormSubmitResult, type UseInViewOptions, type UseInViewResult, type UsePWAInstallReturn, type UsePollingOptions, type UsePollingResult, type UseShareOptions, type UseShareReturn, Watermark, type WatermarkProps, type WatermarkSponsor, clearFetchCache, cn, colors, createApiClient, createManifest, fontFamily, fonts, formatNumber, formatPrice, mobileViewport, relativeTime, svgIcon, useDebounce, useFetch, useFocusTrap, useFormSubmit, useInView, useLocalStorage, usePWAInstall, usePolling, useShare, useToast };
821
+ export { type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, type ColorName, Dialog, type DialogProps, Divider, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, FontLinks, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, InAppSheet, type InAppSheetProps, KitStyles, PWAInstallButton, type PWAInstallState, Section, SectionHeader, type SectionHeaderProps, type SectionProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, type UseFetchOptions, type UseFetchResult, type UseFormSubmitOptions, type UseFormSubmitResult, type UseInViewOptions, type UseInViewResult, type UsePWAInstallReturn, type UsePollingOptions, type UsePollingResult, type UseShareOptions, type UseShareReturn, Watermark, type WatermarkProps, type WatermarkSponsor, clearFetchCache, cn, colors, createApiClient, createManifest, fontFamily, fonts, formatNumber, formatPrice, mobileViewport, relativeTime, svgIcon, useDebounce, useFetch, useFocusTrap, useFormSubmit, useInView, useLocalStorage, usePWAInstall, usePolling, useShare, useToast };