@m1kapp/kit 0.0.33 → 0.0.36

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 (10) hide show
  1. package/README.md +1 -0
  2. package/dist/index.d.mts +29 -5
  3. package/dist/index.d.ts +29 -5
  4. package/dist/index.js +4 -4
  5. package/dist/index.mjs +3 -3
  6. package/dist/meta.json +17 -11
  7. package/dist/pwa.js +2 -2
  8. package/dist/pwa.mjs +1 -1
  9. package/dist/styles.css +1 -1
  10. package/package.json +1 -1
package/README.md CHANGED
@@ -22,6 +22,7 @@ import { Watermark, AppShell, AppShellHeader, AppShellContent, Section, TabBar,
22
22
  export default function App() {
23
23
  return (
24
24
  // Watermark가 뷰포트 전체 높이/중앙정렬/하단 크레딧을 같이 줍니다.
25
+ // (크레딧 스트립은 셸 바로 밑에 붙어서 셸과 한 덩어리로 중앙정렬됨 — 화면 진짜 바닥에 고정되는 게 아님)
25
26
  // AppShell만 단독으로 쓰면 콘텐츠 높이만큼 쪼그라들어요.
26
27
  <Watermark color="#e2603f" text="myapp">
27
28
  <AppShell>
package/dist/index.d.mts CHANGED
@@ -71,6 +71,10 @@ interface AppShellProps {
71
71
  * strip) rather than a hand-rolled height/centering div; without a sized
72
72
  * parent the shell just collapses to content height.
73
73
  *
74
+ * The shell and the credit strip are centered together as one group — the
75
+ * strip sits directly under the shell and moves with it, it does not pin to
76
+ * the screen's true bottom edge.
77
+ *
74
78
  * @example
75
79
  * <Watermark color="#e2603f" text="myapp">
76
80
  * <AppShell>
@@ -84,8 +88,21 @@ interface AppShellHeaderProps {
84
88
  children: ReactNode;
85
89
  className?: string;
86
90
  }
91
+ /**
92
+ * `AppShellHeader`'s rendered height (base 3.5rem/56px + the top safe-area
93
+ * inset on notched devices). Pass this as `<FetchProgress top={APP_SHELL_HEADER_HEIGHT}>`
94
+ * instead of hardcoding `56` so the progress bar still sits flush under the
95
+ * header on a device with a Dynamic Island / notch.
96
+ */
97
+ declare const APP_SHELL_HEADER_HEIGHT = "calc(3.5rem + env(safe-area-inset-top))";
87
98
  /**
88
99
  * Sticky top header with blur backdrop.
100
+ *
101
+ * On mobile the shell is full-bleed (no `sm:` margin from Watermark), so this
102
+ * is the actual topmost element under the device status bar / Dynamic Island
103
+ * in an installed PWA — `min-height` (not `height`) plus `padding-top` let the
104
+ * safe-area inset grow the header without squeezing its content, the same
105
+ * ownership split PoweredByKit uses for the bottom inset.
89
106
  */
90
107
  declare function AppShellHeader({ children, className }: AppShellHeaderProps): react_jsx_runtime.JSX.Element;
91
108
  interface AppShellContentProps {
@@ -102,6 +119,8 @@ declare function AppShellContent({ children, className }: AppShellContentProps):
102
119
  interface FabProps {
103
120
  onClick: () => void;
104
121
  icon: ReactNode;
122
+ /** Accessible label — icon-only button has no other text for screen readers */
123
+ label: string;
105
124
  /** Accent background color. Default: zinc-900/white (follows dark mode) */
106
125
  color?: string;
107
126
  className?: string;
@@ -115,10 +134,10 @@ interface FabProps {
115
134
  * @example
116
135
  * <AppShellContent>
117
136
  * {content}
118
- * <Fab onClick={handleAdd} icon={<PlusIcon />} color="#6366f1" />
137
+ * <Fab onClick={handleAdd} icon={<PlusIcon />} label="추가" color="#6366f1" />
119
138
  * </AppShellContent>
120
139
  */
121
- declare function Fab({ onClick, icon, color, className }: FabProps): react_jsx_runtime.JSX.Element;
140
+ declare function Fab({ onClick, icon, label, color, className }: FabProps): react_jsx_runtime.JSX.Element;
122
141
 
123
142
  interface TabBarProps {
124
143
  children: ReactNode;
@@ -183,8 +202,13 @@ interface FetchProgressProps {
183
202
  * When omitted, the bar shows while ANY useFetch request is in flight.
184
203
  */
185
204
  active?: boolean;
186
- /** Distance from the top of the positioned ancestor, in px (e.g. header height). Default: 0 */
187
- top?: number;
205
+ /**
206
+ * Distance from the top of the positioned ancestor — a number of px, or any
207
+ * CSS length (e.g. `"calc(3.5rem + env(safe-area-inset-top))"` to sit below
208
+ * `AppShellHeader`, whose height grows with the safe-area inset on notched
209
+ * devices). Default: 0
210
+ */
211
+ top?: number | string;
188
212
  /** Bar thickness in px. Default: 3 */
189
213
  height?: number;
190
214
  className?: string;
@@ -1768,4 +1792,4 @@ declare function parseIsoDuration(duration: string): IsoDuration;
1768
1792
  /** "PT1H2M3S" → 3723 (초) */
1769
1793
  declare function isoDurationToSec(duration: string): number;
1770
1794
 
1771
- export { ActionCard, type ActionCardLabels, type ActionCardProps, type ActionCardState, type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AsyncList, type AsyncListProps, type AsyncListStatus, Avatar, type AvatarProps, Badge, type BadgeProps, BarList, type BarListItem, type BarListProps, Button, type ButtonProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, type ChatRole, CodeBlock, type CodeBlockProps, Collapsible, type CollapsibleProps, type ColorName, ColorPicker, type ColorPickerProps, CopyButton, type CopyButtonProps, Countdown, type CountdownLabels, type CountdownProps, type DateCount, type DayGroup, Dialog, type DialogProps, Divider, type DividerProps, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, Fab, type FabProps, FetchProgress, type FetchProgressProps, Field, type FieldProps, FontLinks, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, IconButton, type IconButtonProps, Img, type ImgProps, InAppSheet, type InAppSheetProps, InlineEdit, type InlineEditProps, Input, type InputProps, type IsoDuration, KitStyles, LinkifiedText, type LinkifiedTextProps, ListRow, type ListRowProps, MediaCard, type MediaCardProps, MessageList, type MessageListProps, PWAInstallButton, type PWAInstallState, PoweredByKit, type PoweredByKitProps, ProgressRing, type ProgressRingProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, type TabRootProps, Textarea, type TextareaProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, TypingIndicator, type TypingIndicatorProps, type UnderlineTab, UnderlineTabs, type UnderlineTabsProps, 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, fillDateSeries, fontFamily, fonts, formatDayLabel, formatDuration, formatKoreanNumber, formatNumber, formatPrice, getFetchActiveCount, groupByDay, invalidateFetch, isoDurationToSec, mobileViewport, parseIsoDuration, postJson, relativeTime, subscribeFetchActivity, svgIcon, useCopy, useDebounce, useEscapeKey, useFetch, useFocusTrap, useFormSubmit, useImageLoader, useInView, useLocalStorage, usePWAInstall, usePolling, usePortalTarget, useScrollLock, useShare, useToast };
1795
+ export { APP_SHELL_HEADER_HEIGHT, ActionCard, type ActionCardLabels, type ActionCardProps, type ActionCardState, type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AsyncList, type AsyncListProps, type AsyncListStatus, Avatar, type AvatarProps, Badge, type BadgeProps, BarList, type BarListItem, type BarListProps, Button, type ButtonProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, type ChatRole, CodeBlock, type CodeBlockProps, Collapsible, type CollapsibleProps, type ColorName, ColorPicker, type ColorPickerProps, CopyButton, type CopyButtonProps, Countdown, type CountdownLabels, type CountdownProps, type DateCount, type DayGroup, Dialog, type DialogProps, Divider, type DividerProps, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, Fab, type FabProps, FetchProgress, type FetchProgressProps, Field, type FieldProps, FontLinks, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, IconButton, type IconButtonProps, Img, type ImgProps, InAppSheet, type InAppSheetProps, InlineEdit, type InlineEditProps, Input, type InputProps, type IsoDuration, KitStyles, LinkifiedText, type LinkifiedTextProps, ListRow, type ListRowProps, MediaCard, type MediaCardProps, MessageList, type MessageListProps, PWAInstallButton, type PWAInstallState, PoweredByKit, type PoweredByKitProps, ProgressRing, type ProgressRingProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, type TabRootProps, Textarea, type TextareaProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, TypingIndicator, type TypingIndicatorProps, type UnderlineTab, UnderlineTabs, type UnderlineTabsProps, 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, fillDateSeries, fontFamily, fonts, formatDayLabel, formatDuration, formatKoreanNumber, formatNumber, formatPrice, getFetchActiveCount, groupByDay, invalidateFetch, isoDurationToSec, mobileViewport, parseIsoDuration, postJson, relativeTime, subscribeFetchActivity, svgIcon, useCopy, useDebounce, useEscapeKey, useFetch, useFocusTrap, useFormSubmit, useImageLoader, useInView, useLocalStorage, usePWAInstall, usePolling, usePortalTarget, useScrollLock, useShare, useToast };
package/dist/index.d.ts CHANGED
@@ -71,6 +71,10 @@ interface AppShellProps {
71
71
  * strip) rather than a hand-rolled height/centering div; without a sized
72
72
  * parent the shell just collapses to content height.
73
73
  *
74
+ * The shell and the credit strip are centered together as one group — the
75
+ * strip sits directly under the shell and moves with it, it does not pin to
76
+ * the screen's true bottom edge.
77
+ *
74
78
  * @example
75
79
  * <Watermark color="#e2603f" text="myapp">
76
80
  * <AppShell>
@@ -84,8 +88,21 @@ interface AppShellHeaderProps {
84
88
  children: ReactNode;
85
89
  className?: string;
86
90
  }
91
+ /**
92
+ * `AppShellHeader`'s rendered height (base 3.5rem/56px + the top safe-area
93
+ * inset on notched devices). Pass this as `<FetchProgress top={APP_SHELL_HEADER_HEIGHT}>`
94
+ * instead of hardcoding `56` so the progress bar still sits flush under the
95
+ * header on a device with a Dynamic Island / notch.
96
+ */
97
+ declare const APP_SHELL_HEADER_HEIGHT = "calc(3.5rem + env(safe-area-inset-top))";
87
98
  /**
88
99
  * Sticky top header with blur backdrop.
100
+ *
101
+ * On mobile the shell is full-bleed (no `sm:` margin from Watermark), so this
102
+ * is the actual topmost element under the device status bar / Dynamic Island
103
+ * in an installed PWA — `min-height` (not `height`) plus `padding-top` let the
104
+ * safe-area inset grow the header without squeezing its content, the same
105
+ * ownership split PoweredByKit uses for the bottom inset.
89
106
  */
90
107
  declare function AppShellHeader({ children, className }: AppShellHeaderProps): react_jsx_runtime.JSX.Element;
91
108
  interface AppShellContentProps {
@@ -102,6 +119,8 @@ declare function AppShellContent({ children, className }: AppShellContentProps):
102
119
  interface FabProps {
103
120
  onClick: () => void;
104
121
  icon: ReactNode;
122
+ /** Accessible label — icon-only button has no other text for screen readers */
123
+ label: string;
105
124
  /** Accent background color. Default: zinc-900/white (follows dark mode) */
106
125
  color?: string;
107
126
  className?: string;
@@ -115,10 +134,10 @@ interface FabProps {
115
134
  * @example
116
135
  * <AppShellContent>
117
136
  * {content}
118
- * <Fab onClick={handleAdd} icon={<PlusIcon />} color="#6366f1" />
137
+ * <Fab onClick={handleAdd} icon={<PlusIcon />} label="추가" color="#6366f1" />
119
138
  * </AppShellContent>
120
139
  */
121
- declare function Fab({ onClick, icon, color, className }: FabProps): react_jsx_runtime.JSX.Element;
140
+ declare function Fab({ onClick, icon, label, color, className }: FabProps): react_jsx_runtime.JSX.Element;
122
141
 
123
142
  interface TabBarProps {
124
143
  children: ReactNode;
@@ -183,8 +202,13 @@ interface FetchProgressProps {
183
202
  * When omitted, the bar shows while ANY useFetch request is in flight.
184
203
  */
185
204
  active?: boolean;
186
- /** Distance from the top of the positioned ancestor, in px (e.g. header height). Default: 0 */
187
- top?: number;
205
+ /**
206
+ * Distance from the top of the positioned ancestor — a number of px, or any
207
+ * CSS length (e.g. `"calc(3.5rem + env(safe-area-inset-top))"` to sit below
208
+ * `AppShellHeader`, whose height grows with the safe-area inset on notched
209
+ * devices). Default: 0
210
+ */
211
+ top?: number | string;
188
212
  /** Bar thickness in px. Default: 3 */
189
213
  height?: number;
190
214
  className?: string;
@@ -1768,4 +1792,4 @@ declare function parseIsoDuration(duration: string): IsoDuration;
1768
1792
  /** "PT1H2M3S" → 3723 (초) */
1769
1793
  declare function isoDurationToSec(duration: string): number;
1770
1794
 
1771
- export { ActionCard, type ActionCardLabels, type ActionCardProps, type ActionCardState, type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AsyncList, type AsyncListProps, type AsyncListStatus, Avatar, type AvatarProps, Badge, type BadgeProps, BarList, type BarListItem, type BarListProps, Button, type ButtonProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, type ChatRole, CodeBlock, type CodeBlockProps, Collapsible, type CollapsibleProps, type ColorName, ColorPicker, type ColorPickerProps, CopyButton, type CopyButtonProps, Countdown, type CountdownLabels, type CountdownProps, type DateCount, type DayGroup, Dialog, type DialogProps, Divider, type DividerProps, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, Fab, type FabProps, FetchProgress, type FetchProgressProps, Field, type FieldProps, FontLinks, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, IconButton, type IconButtonProps, Img, type ImgProps, InAppSheet, type InAppSheetProps, InlineEdit, type InlineEditProps, Input, type InputProps, type IsoDuration, KitStyles, LinkifiedText, type LinkifiedTextProps, ListRow, type ListRowProps, MediaCard, type MediaCardProps, MessageList, type MessageListProps, PWAInstallButton, type PWAInstallState, PoweredByKit, type PoweredByKitProps, ProgressRing, type ProgressRingProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, type TabRootProps, Textarea, type TextareaProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, TypingIndicator, type TypingIndicatorProps, type UnderlineTab, UnderlineTabs, type UnderlineTabsProps, 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, fillDateSeries, fontFamily, fonts, formatDayLabel, formatDuration, formatKoreanNumber, formatNumber, formatPrice, getFetchActiveCount, groupByDay, invalidateFetch, isoDurationToSec, mobileViewport, parseIsoDuration, postJson, relativeTime, subscribeFetchActivity, svgIcon, useCopy, useDebounce, useEscapeKey, useFetch, useFocusTrap, useFormSubmit, useImageLoader, useInView, useLocalStorage, usePWAInstall, usePolling, usePortalTarget, useScrollLock, useShare, useToast };
1795
+ export { APP_SHELL_HEADER_HEIGHT, ActionCard, type ActionCardLabels, type ActionCardProps, type ActionCardState, type ApiClient, type ApiClientOptions, ApiError, AppShell, AppShellContent, type AppShellContentProps, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AsyncList, type AsyncListProps, type AsyncListStatus, Avatar, type AvatarProps, Badge, type BadgeProps, BarList, type BarListItem, type BarListProps, Button, type ButtonProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, type ChatRole, CodeBlock, type CodeBlockProps, Collapsible, type CollapsibleProps, type ColorName, ColorPicker, type ColorPickerProps, CopyButton, type CopyButtonProps, Countdown, type CountdownLabels, type CountdownProps, type DateCount, type DayGroup, Dialog, type DialogProps, Divider, type DividerProps, EmojiButton, type EmojiButtonProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, EmptyState, type EmptyStateProps, Fab, type FabProps, FetchProgress, type FetchProgressProps, Field, type FieldProps, FontLinks, type FontName, GrassMap, type GrassMapData, type GrassMapLabels, type GrassMapProps, IOSInstallSheet, IconButton, type IconButtonProps, Img, type ImgProps, InAppSheet, type InAppSheetProps, InlineEdit, type InlineEditProps, Input, type InputProps, type IsoDuration, KitStyles, LinkifiedText, type LinkifiedTextProps, ListRow, type ListRowProps, MediaCard, type MediaCardProps, MessageList, type MessageListProps, PWAInstallButton, type PWAInstallState, PoweredByKit, type PoweredByKitProps, ProgressRing, type ProgressRingProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, type SelectOption, type SelectProps, ShareButton, type ShareButtonProps, Skeleton, type SkeletonProps, StatChip, type StatChipProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, THEME_SCRIPT, Tab, TabBar, type TabBarProps, type TabProps, type TabRootProps, Textarea, type TextareaProps, ThemeButton, type ThemeButtonProps, ThemeDialog, type ThemeDialogLabels, type ThemeDialogProps, type ToastOptions, ToastProvider, type ToastVariant, Tooltip, type TooltipProps, Typewriter, type TypewriterProps, TypingIndicator, type TypingIndicatorProps, type UnderlineTab, UnderlineTabs, type UnderlineTabsProps, 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, fillDateSeries, fontFamily, fonts, formatDayLabel, formatDuration, formatKoreanNumber, formatNumber, formatPrice, getFetchActiveCount, groupByDay, invalidateFetch, isoDurationToSec, mobileViewport, parseIsoDuration, postJson, relativeTime, subscribeFetchActivity, svgIcon, useCopy, useDebounce, useEscapeKey, useFetch, useFocusTrap, useFormSubmit, useImageLoader, useInView, useLocalStorage, usePWAInstall, usePolling, usePortalTarget, useScrollLock, useShare, useToast };