sileo 0.0.2 → 0.0.4

package/dist/cc-2Yt7NqMX.mjs

@@ -0,0 +1,21 @@
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+export { _extends as _ };

package/dist/cc-DGff5sSY.js

@@ -0,0 +1,21 @@
+function __insertCSS(code) {
+  if (!code || typeof document == 'undefined') return
+  let head = document.head || document.getElementsByTagName('head')[0]
+  let style = document.createElement('style')
+  style.type = 'text/css'
+  head.appendChild(style)
+  ;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
+}
+
+function _extends() {
+    _extends = Object.assign || function assign(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+exports._extends = _extends;

package/dist/index.d.mts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+
+type SileoState = "success" | "loading" | "error" | "warning" | "info" | "action";
+interface SileoStyles {
+    title?: string;
+    description?: string;
+    badge?: string;
+    button?: string;
+}
+interface SileoButton {
+    title: string;
+    onClick: () => void;
+}
+declare const SILEO_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+type SileoPosition = (typeof SILEO_POSITIONS)[number];
+interface SileoOptions {
+    title?: string;
+    description?: ReactNode | string;
+    position?: SileoPosition;
+    duration?: number | null;
+    icon?: ReactNode | null;
+    styles?: SileoStyles;
+    fill?: string;
+    roundness?: number;
+    autopilot?: boolean | {
+        expand?: number;
+        collapse?: number;
+    };
+    button?: SileoButton;
+}
+
+type SileoOffsetValue = number | string;
+type SileoOffsetConfig = Partial<Record<"top" | "right" | "bottom" | "left", SileoOffsetValue>>;
+interface SileoToasterProps {
+    children?: ReactNode;
+    position?: SileoPosition;
+    offset?: SileoOffsetValue | SileoOffsetConfig;
+    options?: Partial<SileoOptions>;
+}
+interface SileoPromiseOptions<T = unknown> {
+    loading: Pick<SileoOptions, "title" | "icon">;
+    success: SileoOptions | ((data: T) => SileoOptions);
+    error: SileoOptions | ((err: unknown) => SileoOptions);
+    action?: SileoOptions | ((data: T) => SileoOptions);
+}
+declare const sileo: {
+    show: (opts: SileoOptions) => string;
+    success: (opts: SileoOptions) => string;
+    error: (opts: SileoOptions) => string;
+    warning: (opts: SileoOptions) => string;
+    info: (opts: SileoOptions) => string;
+    action: (opts: SileoOptions) => string;
+    promise: <T>(promise: Promise<T> | (() => Promise<T>), opts: SileoPromiseOptions<T>) => Promise<T>;
+    dismiss: (id: string) => void;
+    clear: (position?: SileoPosition) => void;
+};
+declare function Toaster({ children, position, offset, options, }: SileoToasterProps): any;
+
+export { Toaster, sileo };
+export type { SileoButton, SileoOptions, SileoPosition, SileoState, SileoStyles };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sources":["../src/types.ts","../src/toast.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport type SileoState =\n\t| \"success\"\n\t| \"loading\"\n\t| \"error\"\n\t| \"warning\"\n\t| \"info\"\n\t| \"action\";\n\nexport interface SileoStyles {\n\ttitle?: string;\n\tdescription?: string;\n\tbadge?: string;\n\tbutton?: string;\n}\n\nexport interface SileoButton {\n\ttitle: string;\n\tonClick: () => void;\n}\n\nexport const SILEO_POSITIONS = [\n\t\"top-left\",\n\t\"top-center\",\n\t\"top-right\",\n\t\"bottom-left\",\n\t\"bottom-center\",\n\t\"bottom-right\",\n] as const;\n\nexport type SileoPosition = (typeof SILEO_POSITIONS)[number];\n\nexport interface SileoOptions {\n\ttitle?: string;\n\tdescription?: ReactNode | string;\n\tposition?: SileoPosition;\n\tduration?: number | null;\n\ticon?: ReactNode | null;\n\tstyles?: SileoStyles;\n\tfill?: string;\n\troundness?: number;\n\tautopilot?: boolean | { expand?: number; collapse?: number };\n\tbutton?: SileoButton;\n}\n","import {\n\ttype CSSProperties,\n\ttype MouseEventHandler,\n\ttype ReactNode,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { Sileo } from \"./sileo\";\nimport {\n\tSILEO_POSITIONS,\n\ttype SileoOptions,\n\ttype SileoPosition,\n\ttype SileoState,\n} from \"./types\";\n\n/* -------------------------------- Constants ------------------------------- */\n\nconst DEFAULT_DURATION = 6000;\nconst EXIT_DURATION = DEFAULT_DURATION * 0.1;\nconst AUTO_EXPAND_DELAY = DEFAULT_DURATION * 0.025;\nconst AUTO_COLLAPSE_DELAY = DEFAULT_DURATION - 2000;\n\nconst pillAlign = (pos: SileoPosition) =>\n\tpos.includes(\"right\") ? \"right\" : pos.includes(\"center\") ? \"center\" : \"left\";\nconst expandDir = (pos: SileoPosition) =>\n\tpos.startsWith(\"top\") ? \"bottom\" as const : \"top\" as const;\n\n/* ---------------------------------- Types --------------------------------- */\n\ninterface InternalSileoOptions extends SileoOptions {\n\tid?: string;\n\tstate?: SileoState;\n}\n\ninterface SileoItem extends InternalSileoOptions {\n\tid: string;\n\tinstanceId: string;\n\texiting?: boolean;\n\tautoExpandDelayMs?: number;\n\tautoCollapseDelayMs?: number;\n}\n\ntype SileoOffsetValue = number | string;\ntype SileoOffsetConfig = Partial<\n\tRecord<\"top\" | \"right\" | \"bottom\" | \"left\", SileoOffsetValue>\n>;\n\nexport interface SileoToasterProps {\n\tchildren?: ReactNode;\n\tposition?: SileoPosition;\n\toffset?: SileoOffsetValue | SileoOffsetConfig;\n\toptions?: Partial<SileoOptions>;\n}\n\n/* ------------------------------ Global State ------------------------------ */\n\ntype SileoListener = (toasts: SileoItem[]) => void;\n\nconst store = {\n\ttoasts: [] as SileoItem[],\n\tlisteners: new Set<SileoListener>(),\n\tposition: \"top-right\" as SileoPosition,\n\toptions: undefined as Partial<SileoOptions> | undefined,\n\n\temit() {\n\t\tfor (const fn of this.listeners) fn(this.toasts);\n\t},\n\n\tupdate(fn: (prev: SileoItem[]) => SileoItem[]) {\n\t\tthis.toasts = fn(this.toasts);\n\t\tthis.emit();\n\t},\n};\n\nlet idCounter = 0;\nconst generateId = () =>\n\t`${++idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;\n\nconst timeoutKey = (t: SileoItem) => `${t.id}:${t.instanceId}`;\n\n/* ------------------------------- Toast API -------------------------------- */\n\nconst dismissToast = (id: string) => {\n\tconst item = store.toasts.find((t) => t.id === id);\n\tif (!item || item.exiting) return;\n\n\tstore.update((prev) =>\n\t\tprev.map((t) => (t.id === id ? { ...t, exiting: true } : t)),\n\t);\n\n\tsetTimeout(\n\t\t() => store.update((prev) => prev.filter((t) => t.id !== id)),\n\t\tEXIT_DURATION,\n\t);\n};\n\nconst resolveAutopilot = (\n\topts: InternalSileoOptions,\n\tduration: number | null,\n): { expandDelayMs?: number; collapseDelayMs?: number } => {\n\tif (opts.autopilot === false || !duration || duration <= 0) return {};\n\tconst cfg = typeof opts.autopilot === \"object\" ? opts.autopilot : undefined;\n\tconst clamp = (v: number) => Math.min(duration, Math.max(0, v));\n\treturn {\n\t\texpandDelayMs: clamp(cfg?.expand ?? AUTO_EXPAND_DELAY),\n\t\tcollapseDelayMs: clamp(cfg?.collapse ?? AUTO_COLLAPSE_DELAY),\n\t};\n};\n\nconst mergeOptions = (options: InternalSileoOptions) => ({\n\t...store.options,\n\t...options,\n\tstyles: { ...store.options?.styles, ...options.styles },\n});\n\nconst buildSileoItem = (\n\tmerged: InternalSileoOptions,\n\tid: string,\n\tfallbackPosition?: SileoPosition,\n): SileoItem => {\n\tconst duration = merged.duration ?? DEFAULT_DURATION;\n\tconst auto = resolveAutopilot(merged, duration);\n\treturn {\n\t\t...merged,\n\t\tid,\n\t\tinstanceId: generateId(),\n\t\tposition: merged.position ?? fallbackPosition ?? store.position,\n\t\tautoExpandDelayMs: auto.expandDelayMs,\n\t\tautoCollapseDelayMs: auto.collapseDelayMs,\n\t};\n};\n\nconst createToast = (options: InternalSileoOptions) => {\n\tconst live = store.toasts.filter((t) => !t.exiting);\n\tconst merged = mergeOptions(options);\n\n\tconst prev = merged.id\n\t\t? live.find((t) => t.id === merged.id)\n\t\t: live[live.length - 1];\n\tconst id = merged.id ?? prev?.id ?? generateId();\n\tconst item = buildSileoItem(merged, id, prev?.position);\n\n\tstore.update(() => [item]);\n\treturn { id, duration: merged.duration ?? DEFAULT_DURATION };\n};\n\nconst updateToast = (id: string, options: InternalSileoOptions) => {\n\tconst existing = store.toasts.find((t) => t.id === id);\n\tif (!existing) return;\n\n\tconst item = buildSileoItem(mergeOptions(options), id, existing.position);\n\tstore.update((prev) => prev.map((t) => (t.id === id ? item : t)));\n};\n\nexport interface SileoPromiseOptions<T = unknown> {\n\tloading: Pick<SileoOptions, \"title\" | \"icon\">;\n\tsuccess: SileoOptions | ((data: T) => SileoOptions);\n\terror: SileoOptions | ((err: unknown) => SileoOptions);\n\taction?: SileoOptions | ((data: T) => SileoOptions);\n}\n\nexport const sileo = {\n\tshow: (opts: SileoOptions) => createToast(opts).id,\n\tsuccess: (opts: SileoOptions) =>\n\t\tcreateToast({ ...opts, state: \"success\" }).id,\n\terror: (opts: SileoOptions) => createToast({ ...opts, state: \"error\" }).id,\n\twarning: (opts: SileoOptions) =>\n\t\tcreateToast({ ...opts, state: \"warning\" }).id,\n\tinfo: (opts: SileoOptions) => createToast({ ...opts, state: \"info\" }).id,\n\taction: (opts: SileoOptions) => createToast({ ...opts, state: \"action\" }).id,\n\n\tpromise: <T,>(\n\t\tpromise: Promise<T> | (() => Promise<T>),\n\t\topts: SileoPromiseOptions<T>,\n\t): Promise<T> => {\n\t\tconst { id } = createToast({\n\t\t\t...opts.loading,\n\t\t\tstate: \"loading\",\n\t\t\tduration: null,\n\t\t});\n\n\t\tconst p = typeof promise === \"function\" ? promise() : promise;\n\n\t\tp.then((data) => {\n\t\t\tif (opts.action) {\n\t\t\t\tconst actionOpts =\n\t\t\t\t\ttypeof opts.action === \"function\" ? opts.action(data) : opts.action;\n\t\t\t\tupdateToast(id, { ...actionOpts, state: \"action\", id });\n\t\t\t} else {\n\t\t\t\tconst successOpts =\n\t\t\t\t\ttypeof opts.success === \"function\"\n\t\t\t\t\t\t? opts.success(data)\n\t\t\t\t\t\t: opts.success;\n\t\t\t\tupdateToast(id, { ...successOpts, state: \"success\", id });\n\t\t\t}\n\t\t}).catch((err) => {\n\t\t\tconst errorOpts =\n\t\t\t\ttypeof opts.error === \"function\" ? opts.error(err) : opts.error;\n\t\t\tupdateToast(id, { ...errorOpts, state: \"error\", id });\n\t\t});\n\n\t\treturn p;\n\t},\n\n\tdismiss: dismissToast,\n\n\tclear: (position?: SileoPosition) =>\n\t\tstore.update((prev) =>\n\t\t\tposition ? prev.filter((t) => t.position !== position) : [],\n\t\t),\n};\n\n/* ------------------------------ Toaster Component ------------------------- */\n\nexport function Toaster({\n\tchildren,\n\tposition = \"top-right\",\n\toffset,\n\toptions,\n}: SileoToasterProps) {\n\tconst [toasts, setToasts] = useState<SileoItem[]>(store.toasts);\n\tconst [activeId, setActiveId] = useState<string>();\n\n\t// Refs - consolidated\n\tconst hoverRef = useRef(false);\n\tconst timersRef = useRef(new Map<string, number>());\n\tconst listRef = useRef(toasts);\n\tconst latestRef = useRef<string | undefined>(undefined);\n\tconst handlersCache = useRef(\n\t\tnew Map<\n\t\t\tstring,\n\t\t\t{\n\t\t\t\tenter: MouseEventHandler<HTMLButtonElement>;\n\t\t\t\tleave: MouseEventHandler<HTMLButtonElement>;\n\t\t\t}\n\t\t>(),\n\t);\n\n\t// Update store on mount\n\tuseEffect(() => {\n\t\tstore.position = position;\n\t\tstore.options = options;\n\t}, [position, options]);\n\n\t// Memoized callbacks\n\tconst clearAllTimers = useCallback(() => {\n\t\tfor (const t of timersRef.current.values()) clearTimeout(t);\n\t\ttimersRef.current.clear();\n\t}, []);\n\n\tconst schedule = useCallback((items: SileoItem[]) => {\n\t\tif (hoverRef.current) return;\n\n\t\tfor (const item of items) {\n\t\t\tif (item.exiting) continue;\n\t\t\tconst key = timeoutKey(item);\n\t\t\tif (timersRef.current.has(key)) continue;\n\n\t\t\tconst dur = item.duration ?? DEFAULT_DURATION;\n\t\t\tif (dur === null || dur <= 0) continue;\n\n\t\t\ttimersRef.current.set(\n\t\t\t\tkey,\n\t\t\t\twindow.setTimeout(() => dismissToast(item.id), dur),\n\t\t\t);\n\t\t}\n\t}, []);\n\n\t// Subscribe to store changes\n\tuseEffect(() => {\n\t\tconst listener: SileoListener = (next) => setToasts(next);\n\t\tstore.listeners.add(listener);\n\t\treturn () => {\n\t\t\tstore.listeners.delete(listener);\n\t\t\tclearAllTimers();\n\t\t};\n\t}, [clearAllTimers]);\n\n\t// Manage timers based on toast changes\n\tuseEffect(() => {\n\t\tlistRef.current = toasts;\n\n\t\t// Clean up timers and cached handlers for removed toasts\n\t\tconst toastKeys = new Set(toasts.map(timeoutKey));\n\t\tconst toastIds = new Set(toasts.map((t) => t.id));\n\t\tfor (const [key, timer] of timersRef.current) {\n\t\t\tif (!toastKeys.has(key)) {\n\t\t\t\tclearTimeout(timer);\n\t\t\t\ttimersRef.current.delete(key);\n\t\t\t}\n\t\t}\n\t\tfor (const id of handlersCache.current.keys()) {\n\t\t\tif (!toastIds.has(id)) handlersCache.current.delete(id);\n\t\t}\n\n\t\tschedule(toasts);\n\t}, [toasts, schedule]);\n\n\tconst handleMouseEnterRef =\n\t\tuseRef<MouseEventHandler<HTMLButtonElement>>(null);\n\tconst handleMouseLeaveRef =\n\t\tuseRef<MouseEventHandler<HTMLButtonElement>>(null);\n\n\thandleMouseEnterRef.current = useCallback<\n\t\tMouseEventHandler<HTMLButtonElement>\n\t>(() => {\n\t\tif (hoverRef.current) return;\n\t\thoverRef.current = true;\n\t\tclearAllTimers();\n\t}, [clearAllTimers]);\n\n\thandleMouseLeaveRef.current = useCallback<\n\t\tMouseEventHandler<HTMLButtonElement>\n\t>(() => {\n\t\tif (!hoverRef.current) return;\n\t\thoverRef.current = false;\n\t\tschedule(listRef.current);\n\t}, [schedule]);\n\n\t// Get latest toast ID\n\tconst latest = useMemo(() => {\n\t\tfor (let i = toasts.length - 1; i >= 0; i--) {\n\t\t\tif (!toasts[i].exiting) return toasts[i].id;\n\t\t}\n\t\treturn undefined;\n\t}, [toasts]);\n\n\tuseEffect(() => {\n\t\tlatestRef.current = latest;\n\t\tsetActiveId(latest);\n\t}, [latest]);\n\n\t// Get handlers for a toast - cached to prevent recreating\n\tconst getHandlers = useCallback((toastId: string) => {\n\t\tlet cached = handlersCache.current.get(toastId);\n\t\tif (cached) return cached;\n\n\t\tcached = {\n\t\t\tenter: ((e) => {\n\t\t\t\tsetActiveId((prev) => (prev === toastId ? prev : toastId));\n\t\t\t\thandleMouseEnterRef.current?.(e);\n\t\t\t}) as MouseEventHandler<HTMLButtonElement>,\n\t\t\tleave: ((e) => {\n\t\t\t\tsetActiveId((prev) =>\n\t\t\t\t\tprev === latestRef.current ? prev : latestRef.current,\n\t\t\t\t);\n\t\t\t\thandleMouseLeaveRef.current?.(e);\n\t\t\t}) as MouseEventHandler<HTMLButtonElement>,\n\t\t};\n\n\t\thandlersCache.current.set(toastId, cached);\n\t\treturn cached;\n\t}, []);\n\n\t// Viewport style computation - memoized\n\tconst getViewportStyle = useCallback(\n\t\t(pos: SileoPosition): CSSProperties | undefined => {\n\t\t\tif (offset === undefined) return undefined;\n\n\t\t\tconst o =\n\t\t\t\ttypeof offset === \"object\"\n\t\t\t\t\t? offset\n\t\t\t\t\t: { top: offset, right: offset, bottom: offset, left: offset };\n\n\t\t\tconst s: CSSProperties = {};\n\t\t\tconst px = (v: SileoOffsetValue) =>\n\t\t\t\ttypeof v === \"number\" ? `${v}px` : v;\n\n\t\t\tif (pos.startsWith(\"top\") && o.top) s.top = px(o.top);\n\t\t\tif (pos.startsWith(\"bottom\") && o.bottom) s.bottom = px(o.bottom);\n\t\t\tif (pos.endsWith(\"left\") && o.left) s.left = px(o.left);\n\t\t\tif (pos.endsWith(\"right\") && o.right) s.right = px(o.right);\n\n\t\t\treturn s;\n\t\t},\n\t\t[offset],\n\t);\n\n\t// Group toasts by position - optimized\n\tconst byPosition = useMemo(() => {\n\t\tconst map = {} as Partial<Record<SileoPosition, SileoItem[]>>;\n\t\tfor (const t of toasts) {\n\t\t\tconst pos = t.position ?? position;\n\t\t\tconst arr = map[pos];\n\t\t\tif (arr) {\n\t\t\t\tarr.push(t);\n\t\t\t} else {\n\t\t\t\tmap[pos] = [t];\n\t\t\t}\n\t\t}\n\t\treturn map;\n\t}, [toasts, position]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t{SILEO_POSITIONS.map((pos) => {\n\t\t\t\tconst items = byPosition[pos];\n\t\t\t\tif (!items?.length) return null;\n\n\t\t\t\tconst pill = pillAlign(pos);\n\t\t\t\tconst expand = expandDir(pos);\n\n\t\t\t\treturn (\n\t\t\t\t\t<section\n\t\t\t\t\t\tkey={pos}\n\t\t\t\t\t\tdata-sileo-viewport\n\t\t\t\t\t\tdata-position={pos}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tstyle={getViewportStyle(pos)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\tconst h = getHandlers(item.id);\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Sileo\n\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\tid={item.id}\n\t\t\t\t\t\t\t\t\tstate={item.state}\n\t\t\t\t\t\t\t\t\ttitle={item.title}\n\t\t\t\t\t\t\t\t\tdescription={item.description}\n\t\t\t\t\t\t\t\t\tposition={pill}\n\t\t\t\t\t\t\t\t\texpand={expand}\n\t\t\t\t\t\t\t\t\ticon={item.icon}\n\t\t\t\t\t\t\t\t\tfill={item.fill}\n\t\t\t\t\t\t\t\t\tstyles={item.styles}\n\t\t\t\t\t\t\t\t\tbutton={item.button}\n\t\t\t\t\t\t\t\t\troundness={item.roundness}\n\t\t\t\t\t\t\t\t\texiting={item.exiting}\n\t\t\t\t\t\t\t\t\tautoExpandDelayMs={item.autoExpandDelayMs}\n\t\t\t\t\t\t\t\t\tautoCollapseDelayMs={item.autoCollapseDelayMs}\n\t\t\t\t\t\t\t\t\trefreshKey={item.instanceId}\n\t\t\t\t\t\t\t\t\tcanExpand={activeId === undefined || activeId === item.id}\n\t\t\t\t\t\t\t\t\tonMouseEnter={h.enter}\n\t\t\t\t\t\t\t\t\tonMouseLeave={h.leave}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</section>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n}\n"],"names":[],"mappings":";;AACO,KAAA,UAAA;AACA,UAAA,WAAA;AACP;AACA;AACA;AACA;AACA;AACO,UAAA,WAAA;AACP;AACA;AACA;AACO,cAAA,eAAA;AACA,KAAA,aAAA,WAAA,eAAA;AACA,UAAA,YAAA;AACP;AACA,kBAAA,SAAA;AACA,eAAA,aAAA;AACA;AACA,WAAA,SAAA;AACA,aAAA,WAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAA,WAAA;AACA;;AC1BA,KAAA,gBAAA;AACA,KAAA,iBAAA,GAAA,OAAA,CAAA,MAAA,sCAAA,gBAAA;AACO,UAAA,iBAAA;AACP,eAAA,SAAA;AACA,eAAA,aAAA;AACA,aAAA,gBAAA,GAAA,iBAAA;AACA,cAAA,OAAA,CAAA,YAAA;AACA;AACO,UAAA,mBAAA;AACP,aAAA,IAAA,CAAA,YAAA;AACA,aAAA,YAAA,iBAAA,YAAA;AACA,WAAA,YAAA,sBAAA,YAAA;AACA,aAAA,YAAA,iBAAA,YAAA;AACA;AACO,cAAA,KAAA;AACP,iBAAA,YAAA;AACA,oBAAA,YAAA;AACA,kBAAA,YAAA;AACA,oBAAA,YAAA;AACA,iBAAA,YAAA;AACA,mBAAA,YAAA;AACA,0BAAA,OAAA,aAAA,OAAA,YAAA,mBAAA,QAAA,OAAA;AACA;AACA,uBAAA,aAAA;AACA;AACO,iBAAA,OAAA,2CAAA,iBAAA;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+
+type SileoState = "success" | "loading" | "error" | "warning" | "info" | "action";
+interface SileoStyles {
+    title?: string;
+    description?: string;
+    badge?: string;
+    button?: string;
+}
+interface SileoButton {
+    title: string;
+    onClick: () => void;
+}
+declare const SILEO_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+type SileoPosition = (typeof SILEO_POSITIONS)[number];
+interface SileoOptions {
+    title?: string;
+    description?: ReactNode | string;
+    position?: SileoPosition;
+    duration?: number | null;
+    icon?: ReactNode | null;
+    styles?: SileoStyles;
+    fill?: string;
+    roundness?: number;
+    autopilot?: boolean | {
+        expand?: number;
+        collapse?: number;
+    };
+    button?: SileoButton;
+}
+
+type SileoOffsetValue = number | string;
+type SileoOffsetConfig = Partial<Record<"top" | "right" | "bottom" | "left", SileoOffsetValue>>;
+interface SileoToasterProps {
+    children?: ReactNode;
+    position?: SileoPosition;
+    offset?: SileoOffsetValue | SileoOffsetConfig;
+    options?: Partial<SileoOptions>;
+}
+interface SileoPromiseOptions<T = unknown> {
+    loading: Pick<SileoOptions, "title" | "icon">;
+    success: SileoOptions | ((data: T) => SileoOptions);
+    error: SileoOptions | ((err: unknown) => SileoOptions);
+    action?: SileoOptions | ((data: T) => SileoOptions);
+}
+declare const sileo: {
+    show: (opts: SileoOptions) => string;
+    success: (opts: SileoOptions) => string;
+    error: (opts: SileoOptions) => string;
+    warning: (opts: SileoOptions) => string;
+    info: (opts: SileoOptions) => string;
+    action: (opts: SileoOptions) => string;
+    promise: <T>(promise: Promise<T> | (() => Promise<T>), opts: SileoPromiseOptions<T>) => Promise<T>;
+    dismiss: (id: string) => void;
+    clear: (position?: SileoPosition) => void;
+};
+declare function Toaster({ children, position, offset, options, }: SileoToasterProps): any;
+
+export { Toaster, sileo };
+export type { SileoButton, SileoOptions, SileoPosition, SileoState, SileoStyles };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":["../src/types.ts","../src/toast.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport type SileoState =\n\t| \"success\"\n\t| \"loading\"\n\t| \"error\"\n\t| \"warning\"\n\t| \"info\"\n\t| \"action\";\n\nexport interface SileoStyles {\n\ttitle?: string;\n\tdescription?: string;\n\tbadge?: string;\n\tbutton?: string;\n}\n\nexport interface SileoButton {\n\ttitle: string;\n\tonClick: () => void;\n}\n\nexport const SILEO_POSITIONS = [\n\t\"top-left\",\n\t\"top-center\",\n\t\"top-right\",\n\t\"bottom-left\",\n\t\"bottom-center\",\n\t\"bottom-right\",\n] as const;\n\nexport type SileoPosition = (typeof SILEO_POSITIONS)[number];\n\nexport interface SileoOptions {\n\ttitle?: string;\n\tdescription?: ReactNode | string;\n\tposition?: SileoPosition;\n\tduration?: number | null;\n\ticon?: ReactNode | null;\n\tstyles?: SileoStyles;\n\tfill?: string;\n\troundness?: number;\n\tautopilot?: boolean | { expand?: number; collapse?: number };\n\tbutton?: SileoButton;\n}\n","import {\n\ttype CSSProperties,\n\ttype MouseEventHandler,\n\ttype ReactNode,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { Sileo } from \"./sileo\";\nimport {\n\tSILEO_POSITIONS,\n\ttype SileoOptions,\n\ttype SileoPosition,\n\ttype SileoState,\n} from \"./types\";\n\n/* -------------------------------- Constants ------------------------------- */\n\nconst DEFAULT_DURATION = 6000;\nconst EXIT_DURATION = DEFAULT_DURATION * 0.1;\nconst AUTO_EXPAND_DELAY = DEFAULT_DURATION * 0.025;\nconst AUTO_COLLAPSE_DELAY = DEFAULT_DURATION - 2000;\n\nconst pillAlign = (pos: SileoPosition) =>\n\tpos.includes(\"right\") ? \"right\" : pos.includes(\"center\") ? \"center\" : \"left\";\nconst expandDir = (pos: SileoPosition) =>\n\tpos.startsWith(\"top\") ? \"bottom\" as const : \"top\" as const;\n\n/* ---------------------------------- Types --------------------------------- */\n\ninterface InternalSileoOptions extends SileoOptions {\n\tid?: string;\n\tstate?: SileoState;\n}\n\ninterface SileoItem extends InternalSileoOptions {\n\tid: string;\n\tinstanceId: string;\n\texiting?: boolean;\n\tautoExpandDelayMs?: number;\n\tautoCollapseDelayMs?: number;\n}\n\ntype SileoOffsetValue = number | string;\ntype SileoOffsetConfig = Partial<\n\tRecord<\"top\" | \"right\" | \"bottom\" | \"left\", SileoOffsetValue>\n>;\n\nexport interface SileoToasterProps {\n\tchildren?: ReactNode;\n\tposition?: SileoPosition;\n\toffset?: SileoOffsetValue | SileoOffsetConfig;\n\toptions?: Partial<SileoOptions>;\n}\n\n/* ------------------------------ Global State ------------------------------ */\n\ntype SileoListener = (toasts: SileoItem[]) => void;\n\nconst store = {\n\ttoasts: [] as SileoItem[],\n\tlisteners: new Set<SileoListener>(),\n\tposition: \"top-right\" as SileoPosition,\n\toptions: undefined as Partial<SileoOptions> | undefined,\n\n\temit() {\n\t\tfor (const fn of this.listeners) fn(this.toasts);\n\t},\n\n\tupdate(fn: (prev: SileoItem[]) => SileoItem[]) {\n\t\tthis.toasts = fn(this.toasts);\n\t\tthis.emit();\n\t},\n};\n\nlet idCounter = 0;\nconst generateId = () =>\n\t`${++idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;\n\nconst timeoutKey = (t: SileoItem) => `${t.id}:${t.instanceId}`;\n\n/* ------------------------------- Toast API -------------------------------- */\n\nconst dismissToast = (id: string) => {\n\tconst item = store.toasts.find((t) => t.id === id);\n\tif (!item || item.exiting) return;\n\n\tstore.update((prev) =>\n\t\tprev.map((t) => (t.id === id ? { ...t, exiting: true } : t)),\n\t);\n\n\tsetTimeout(\n\t\t() => store.update((prev) => prev.filter((t) => t.id !== id)),\n\t\tEXIT_DURATION,\n\t);\n};\n\nconst resolveAutopilot = (\n\topts: InternalSileoOptions,\n\tduration: number | null,\n): { expandDelayMs?: number; collapseDelayMs?: number } => {\n\tif (opts.autopilot === false || !duration || duration <= 0) return {};\n\tconst cfg = typeof opts.autopilot === \"object\" ? opts.autopilot : undefined;\n\tconst clamp = (v: number) => Math.min(duration, Math.max(0, v));\n\treturn {\n\t\texpandDelayMs: clamp(cfg?.expand ?? AUTO_EXPAND_DELAY),\n\t\tcollapseDelayMs: clamp(cfg?.collapse ?? AUTO_COLLAPSE_DELAY),\n\t};\n};\n\nconst mergeOptions = (options: InternalSileoOptions) => ({\n\t...store.options,\n\t...options,\n\tstyles: { ...store.options?.styles, ...options.styles },\n});\n\nconst buildSileoItem = (\n\tmerged: InternalSileoOptions,\n\tid: string,\n\tfallbackPosition?: SileoPosition,\n): SileoItem => {\n\tconst duration = merged.duration ?? DEFAULT_DURATION;\n\tconst auto = resolveAutopilot(merged, duration);\n\treturn {\n\t\t...merged,\n\t\tid,\n\t\tinstanceId: generateId(),\n\t\tposition: merged.position ?? fallbackPosition ?? store.position,\n\t\tautoExpandDelayMs: auto.expandDelayMs,\n\t\tautoCollapseDelayMs: auto.collapseDelayMs,\n\t};\n};\n\nconst createToast = (options: InternalSileoOptions) => {\n\tconst live = store.toasts.filter((t) => !t.exiting);\n\tconst merged = mergeOptions(options);\n\n\tconst prev = merged.id\n\t\t? live.find((t) => t.id === merged.id)\n\t\t: live[live.length - 1];\n\tconst id = merged.id ?? prev?.id ?? generateId();\n\tconst item = buildSileoItem(merged, id, prev?.position);\n\n\tstore.update(() => [item]);\n\treturn { id, duration: merged.duration ?? DEFAULT_DURATION };\n};\n\nconst updateToast = (id: string, options: InternalSileoOptions) => {\n\tconst existing = store.toasts.find((t) => t.id === id);\n\tif (!existing) return;\n\n\tconst item = buildSileoItem(mergeOptions(options), id, existing.position);\n\tstore.update((prev) => prev.map((t) => (t.id === id ? item : t)));\n};\n\nexport interface SileoPromiseOptions<T = unknown> {\n\tloading: Pick<SileoOptions, \"title\" | \"icon\">;\n\tsuccess: SileoOptions | ((data: T) => SileoOptions);\n\terror: SileoOptions | ((err: unknown) => SileoOptions);\n\taction?: SileoOptions | ((data: T) => SileoOptions);\n}\n\nexport const sileo = {\n\tshow: (opts: SileoOptions) => createToast(opts).id,\n\tsuccess: (opts: SileoOptions) =>\n\t\tcreateToast({ ...opts, state: \"success\" }).id,\n\terror: (opts: SileoOptions) => createToast({ ...opts, state: \"error\" }).id,\n\twarning: (opts: SileoOptions) =>\n\t\tcreateToast({ ...opts, state: \"warning\" }).id,\n\tinfo: (opts: SileoOptions) => createToast({ ...opts, state: \"info\" }).id,\n\taction: (opts: SileoOptions) => createToast({ ...opts, state: \"action\" }).id,\n\n\tpromise: <T,>(\n\t\tpromise: Promise<T> | (() => Promise<T>),\n\t\topts: SileoPromiseOptions<T>,\n\t): Promise<T> => {\n\t\tconst { id } = createToast({\n\t\t\t...opts.loading,\n\t\t\tstate: \"loading\",\n\t\t\tduration: null,\n\t\t});\n\n\t\tconst p = typeof promise === \"function\" ? promise() : promise;\n\n\t\tp.then((data) => {\n\t\t\tif (opts.action) {\n\t\t\t\tconst actionOpts =\n\t\t\t\t\ttypeof opts.action === \"function\" ? opts.action(data) : opts.action;\n\t\t\t\tupdateToast(id, { ...actionOpts, state: \"action\", id });\n\t\t\t} else {\n\t\t\t\tconst successOpts =\n\t\t\t\t\ttypeof opts.success === \"function\"\n\t\t\t\t\t\t? opts.success(data)\n\t\t\t\t\t\t: opts.success;\n\t\t\t\tupdateToast(id, { ...successOpts, state: \"success\", id });\n\t\t\t}\n\t\t}).catch((err) => {\n\t\t\tconst errorOpts =\n\t\t\t\ttypeof opts.error === \"function\" ? opts.error(err) : opts.error;\n\t\t\tupdateToast(id, { ...errorOpts, state: \"error\", id });\n\t\t});\n\n\t\treturn p;\n\t},\n\n\tdismiss: dismissToast,\n\n\tclear: (position?: SileoPosition) =>\n\t\tstore.update((prev) =>\n\t\t\tposition ? prev.filter((t) => t.position !== position) : [],\n\t\t),\n};\n\n/* ------------------------------ Toaster Component ------------------------- */\n\nexport function Toaster({\n\tchildren,\n\tposition = \"top-right\",\n\toffset,\n\toptions,\n}: SileoToasterProps) {\n\tconst [toasts, setToasts] = useState<SileoItem[]>(store.toasts);\n\tconst [activeId, setActiveId] = useState<string>();\n\n\t// Refs - consolidated\n\tconst hoverRef = useRef(false);\n\tconst timersRef = useRef(new Map<string, number>());\n\tconst listRef = useRef(toasts);\n\tconst latestRef = useRef<string | undefined>(undefined);\n\tconst handlersCache = useRef(\n\t\tnew Map<\n\t\t\tstring,\n\t\t\t{\n\t\t\t\tenter: MouseEventHandler<HTMLButtonElement>;\n\t\t\t\tleave: MouseEventHandler<HTMLButtonElement>;\n\t\t\t}\n\t\t>(),\n\t);\n\n\t// Update store on mount\n\tuseEffect(() => {\n\t\tstore.position = position;\n\t\tstore.options = options;\n\t}, [position, options]);\n\n\t// Memoized callbacks\n\tconst clearAllTimers = useCallback(() => {\n\t\tfor (const t of timersRef.current.values()) clearTimeout(t);\n\t\ttimersRef.current.clear();\n\t}, []);\n\n\tconst schedule = useCallback((items: SileoItem[]) => {\n\t\tif (hoverRef.current) return;\n\n\t\tfor (const item of items) {\n\t\t\tif (item.exiting) continue;\n\t\t\tconst key = timeoutKey(item);\n\t\t\tif (timersRef.current.has(key)) continue;\n\n\t\t\tconst dur = item.duration ?? DEFAULT_DURATION;\n\t\t\tif (dur === null || dur <= 0) continue;\n\n\t\t\ttimersRef.current.set(\n\t\t\t\tkey,\n\t\t\t\twindow.setTimeout(() => dismissToast(item.id), dur),\n\t\t\t);\n\t\t}\n\t}, []);\n\n\t// Subscribe to store changes\n\tuseEffect(() => {\n\t\tconst listener: SileoListener = (next) => setToasts(next);\n\t\tstore.listeners.add(listener);\n\t\treturn () => {\n\t\t\tstore.listeners.delete(listener);\n\t\t\tclearAllTimers();\n\t\t};\n\t}, [clearAllTimers]);\n\n\t// Manage timers based on toast changes\n\tuseEffect(() => {\n\t\tlistRef.current = toasts;\n\n\t\t// Clean up timers and cached handlers for removed toasts\n\t\tconst toastKeys = new Set(toasts.map(timeoutKey));\n\t\tconst toastIds = new Set(toasts.map((t) => t.id));\n\t\tfor (const [key, timer] of timersRef.current) {\n\t\t\tif (!toastKeys.has(key)) {\n\t\t\t\tclearTimeout(timer);\n\t\t\t\ttimersRef.current.delete(key);\n\t\t\t}\n\t\t}\n\t\tfor (const id of handlersCache.current.keys()) {\n\t\t\tif (!toastIds.has(id)) handlersCache.current.delete(id);\n\t\t}\n\n\t\tschedule(toasts);\n\t}, [toasts, schedule]);\n\n\tconst handleMouseEnterRef =\n\t\tuseRef<MouseEventHandler<HTMLButtonElement>>(null);\n\tconst handleMouseLeaveRef =\n\t\tuseRef<MouseEventHandler<HTMLButtonElement>>(null);\n\n\thandleMouseEnterRef.current = useCallback<\n\t\tMouseEventHandler<HTMLButtonElement>\n\t>(() => {\n\t\tif (hoverRef.current) return;\n\t\thoverRef.current = true;\n\t\tclearAllTimers();\n\t}, [clearAllTimers]);\n\n\thandleMouseLeaveRef.current = useCallback<\n\t\tMouseEventHandler<HTMLButtonElement>\n\t>(() => {\n\t\tif (!hoverRef.current) return;\n\t\thoverRef.current = false;\n\t\tschedule(listRef.current);\n\t}, [schedule]);\n\n\t// Get latest toast ID\n\tconst latest = useMemo(() => {\n\t\tfor (let i = toasts.length - 1; i >= 0; i--) {\n\t\t\tif (!toasts[i].exiting) return toasts[i].id;\n\t\t}\n\t\treturn undefined;\n\t}, [toasts]);\n\n\tuseEffect(() => {\n\t\tlatestRef.current = latest;\n\t\tsetActiveId(latest);\n\t}, [latest]);\n\n\t// Get handlers for a toast - cached to prevent recreating\n\tconst getHandlers = useCallback((toastId: string) => {\n\t\tlet cached = handlersCache.current.get(toastId);\n\t\tif (cached) return cached;\n\n\t\tcached = {\n\t\t\tenter: ((e) => {\n\t\t\t\tsetActiveId((prev) => (prev === toastId ? prev : toastId));\n\t\t\t\thandleMouseEnterRef.current?.(e);\n\t\t\t}) as MouseEventHandler<HTMLButtonElement>,\n\t\t\tleave: ((e) => {\n\t\t\t\tsetActiveId((prev) =>\n\t\t\t\t\tprev === latestRef.current ? prev : latestRef.current,\n\t\t\t\t);\n\t\t\t\thandleMouseLeaveRef.current?.(e);\n\t\t\t}) as MouseEventHandler<HTMLButtonElement>,\n\t\t};\n\n\t\thandlersCache.current.set(toastId, cached);\n\t\treturn cached;\n\t}, []);\n\n\t// Viewport style computation - memoized\n\tconst getViewportStyle = useCallback(\n\t\t(pos: SileoPosition): CSSProperties | undefined => {\n\t\t\tif (offset === undefined) return undefined;\n\n\t\t\tconst o =\n\t\t\t\ttypeof offset === \"object\"\n\t\t\t\t\t? offset\n\t\t\t\t\t: { top: offset, right: offset, bottom: offset, left: offset };\n\n\t\t\tconst s: CSSProperties = {};\n\t\t\tconst px = (v: SileoOffsetValue) =>\n\t\t\t\ttypeof v === \"number\" ? `${v}px` : v;\n\n\t\t\tif (pos.startsWith(\"top\") && o.top) s.top = px(o.top);\n\t\t\tif (pos.startsWith(\"bottom\") && o.bottom) s.bottom = px(o.bottom);\n\t\t\tif (pos.endsWith(\"left\") && o.left) s.left = px(o.left);\n\t\t\tif (pos.endsWith(\"right\") && o.right) s.right = px(o.right);\n\n\t\t\treturn s;\n\t\t},\n\t\t[offset],\n\t);\n\n\t// Group toasts by position - optimized\n\tconst byPosition = useMemo(() => {\n\t\tconst map = {} as Partial<Record<SileoPosition, SileoItem[]>>;\n\t\tfor (const t of toasts) {\n\t\t\tconst pos = t.position ?? position;\n\t\t\tconst arr = map[pos];\n\t\t\tif (arr) {\n\t\t\t\tarr.push(t);\n\t\t\t} else {\n\t\t\t\tmap[pos] = [t];\n\t\t\t}\n\t\t}\n\t\treturn map;\n\t}, [toasts, position]);\n\n\treturn (\n\t\t<>\n\t\t\t{children}\n\t\t\t{SILEO_POSITIONS.map((pos) => {\n\t\t\t\tconst items = byPosition[pos];\n\t\t\t\tif (!items?.length) return null;\n\n\t\t\t\tconst pill = pillAlign(pos);\n\t\t\t\tconst expand = expandDir(pos);\n\n\t\t\t\treturn (\n\t\t\t\t\t<section\n\t\t\t\t\t\tkey={pos}\n\t\t\t\t\t\tdata-sileo-viewport\n\t\t\t\t\t\tdata-position={pos}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tstyle={getViewportStyle(pos)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\t\tconst h = getHandlers(item.id);\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Sileo\n\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\tid={item.id}\n\t\t\t\t\t\t\t\t\tstate={item.state}\n\t\t\t\t\t\t\t\t\ttitle={item.title}\n\t\t\t\t\t\t\t\t\tdescription={item.description}\n\t\t\t\t\t\t\t\t\tposition={pill}\n\t\t\t\t\t\t\t\t\texpand={expand}\n\t\t\t\t\t\t\t\t\ticon={item.icon}\n\t\t\t\t\t\t\t\t\tfill={item.fill}\n\t\t\t\t\t\t\t\t\tstyles={item.styles}\n\t\t\t\t\t\t\t\t\tbutton={item.button}\n\t\t\t\t\t\t\t\t\troundness={item.roundness}\n\t\t\t\t\t\t\t\t\texiting={item.exiting}\n\t\t\t\t\t\t\t\t\tautoExpandDelayMs={item.autoExpandDelayMs}\n\t\t\t\t\t\t\t\t\tautoCollapseDelayMs={item.autoCollapseDelayMs}\n\t\t\t\t\t\t\t\t\trefreshKey={item.instanceId}\n\t\t\t\t\t\t\t\t\tcanExpand={activeId === undefined || activeId === item.id}\n\t\t\t\t\t\t\t\t\tonMouseEnter={h.enter}\n\t\t\t\t\t\t\t\t\tonMouseLeave={h.leave}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</section>\n\t\t\t\t);\n\t\t\t})}\n\t\t</>\n\t);\n}\n"],"names":[],"mappings":";;AACO,KAAA,UAAA;AACA,UAAA,WAAA;AACP;AACA;AACA;AACA;AACA;AACO,UAAA,WAAA;AACP;AACA;AACA;AACO,cAAA,eAAA;AACA,KAAA,aAAA,WAAA,eAAA;AACA,UAAA,YAAA;AACP;AACA,kBAAA,SAAA;AACA,eAAA,aAAA;AACA;AACA,WAAA,SAAA;AACA,aAAA,WAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAA,WAAA;AACA;;AC1BA,KAAA,gBAAA;AACA,KAAA,iBAAA,GAAA,OAAA,CAAA,MAAA,sCAAA,gBAAA;AACO,UAAA,iBAAA;AACP,eAAA,SAAA;AACA,eAAA,aAAA;AACA,aAAA,gBAAA,GAAA,iBAAA;AACA,cAAA,OAAA,CAAA,YAAA;AACA;AACO,UAAA,mBAAA;AACP,aAAA,IAAA,CAAA,YAAA;AACA,aAAA,YAAA,iBAAA,YAAA;AACA,WAAA,YAAA,sBAAA,YAAA;AACA,aAAA,YAAA,iBAAA,YAAA;AACA;AACO,cAAA,KAAA;AACP,iBAAA,YAAA;AACA,oBAAA,YAAA;AACA,kBAAA,YAAA;AACA,oBAAA,YAAA;AACA,iBAAA,YAAA;AACA,mBAAA,YAAA;AACA,0BAAA,OAAA,aAAA,OAAA,YAAA,mBAAA,QAAA,OAAA;AACA;AACA,uBAAA,aAAA;AACA;AACO,iBAAA,OAAA,2CAAA,iBAAA;;;;"}