"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const vars = { host: "https://arctis.ranaufalmuha.com", get background() { return this.host + "/component/background/"; }, get button() { return this.host + "/component/button/"; }, get card() { return this.host + "/component/card/"; }, get cursor() { return this.host + "/component/cursor/"; }, get toaster() { return this.host + "/component/toaster/"; } }; const PreviewTabs = ({iframe, install, usage, code}) => { const _components = { div: "div", h2: "h2", h3: "h3", iframe: "iframe", ..._provideComponents() }, {Card, CodeBlock, CodeGroup, Tab, Tabs} = _components; if (!Card) _missingMdxReference("Card", true); if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!CodeGroup) _missingMdxReference("CodeGroup", true); if (!Tab) _missingMdxReference("Tab", true); if (!Tabs) _missingMdxReference("Tabs", true); return _jsxs(_Fragment, { children: [_jsxs(Tabs, { children: [_jsx(Tab, { title: "Preview", children: _jsx(_components.div, { style: { border: "1px solid #e5e7eb", borderRadius: 20, overflow: "hidden" }, children: _jsx(_components.iframe, { src: iframe, style: { width: "100%", height: "600px", border: "none" } }) }) }), _jsxs(Tab, { title: "Code", children: [install && _jsxs(_Fragment, { children: [_jsx(_components.h3, { children: "Installation" }), _jsxs(CodeGroup, { children: [_jsxs(CodeBlock, { filename: "pnpm", language: "bash", children: ["pnpm add ", install] }), _jsxs(CodeBlock, { filename: "npm", language: "bash", children: ["npm install ", install] }), _jsxs(CodeBlock, { filename: "yarn", language: "bash", children: ["yarn add ", install] }), _jsxs(CodeBlock, { filename: "bun", language: "bash", children: ["bun add ", install] })] })] }), _jsx(_components.h3, { children: "Usage" }), _jsx(CodeBlock, { filename: "typescript", language: "tsx", children: usage }), _jsx(_components.h3, { children: "Code" }), _jsx(CodeBlock, { filename: "typescript", language: "tsx", children: code })] })] }), _jsx(_components.h2, { children: " Built by" }), _jsx(Card, { title: "Ranaufal Muha", icon: "heart", href: "https://ranaufalmuha.com", children: "Arctis UI is designed and maintained with 💛 by Ranaufal Muha. All components are free to use, modify, and ship in any project — personal or commercial." })] }); }; function _createMdxContent(props) { return _jsx(PreviewTabs, { iframe: vars.toaster + "glass-toaster", install: `sonner`, usage: ` "use client"; import { useRef } from "react"; import SweepButton from "../../button/sweep-button/SweepButton"; import { glassToaster, GlassToaster } from "./GlassToaster"; export default function SweepButtonPage() { const loadingIdRef = useRef(null); return (

{ glassToaster.success("Testing Toast", { desc: "this is description, you can add anything for your toast 💚", }); }} > Succes { glassToaster.error("Testing Toast", { desc: "this is description, you can add anything for your toast ❤️", }); }} > Error { loadingIdRef.current = glassToaster.loading( "Testing Toast", "this is description, you can add anything for your toast 🤍", ); }} > Loading { if (!loadingIdRef.current) return; glassToaster.success("Loading Toast Done", { id: loadingIdRef.current, desc: "Finished ✅", }); loadingIdRef.current = null; // optional cleanup }} > Loading Done

); } `, code: ` "use client"; import { FaCircleCheck, FaCircleXmark, FaSpinner } from "react-icons/fa6"; import { Toaster, toast } from "sonner"; export function GlassToaster() { return ( , error: , loading: , }} toastOptions={{ unstyled: true, classNames: { toast: \`\ group pointer-events-auto flex w-[360px] items-center gap-4 rounded-xl border border-[#ffffff69] backdrop-blur-xl p-3 text-sm \`, title: \`\ font-medium leading-5 tracking-[0.01em] \`, description: \`\ mt-0.5 leading-5 text-white/70 \`, icon: \`\flex items-center justify-center shrink-0 w-5 h-5 text-lg relative\`, actionButton: \`\ ml-auto inline-flex h-8 items-center justify-center rounded-xl px-3 font-semibold bg-[#4cff8f] text-[#06120b] hover:brightness-110 active:brightness-95 transition \`, cancelButton: \`\ inline-flex h-8 items-center justify-center rounded-xl px-3 font-medium border border-white/15 bg-white/5 text-white/80 hover:bg-white/10 transition \`, }, }} /> ); } export type ToastOpts = { id?: string | number; desc?: string; }; const duration: number = 3000; export const glassToaster = { success: (title: string, opts?: ToastOpts) => toast.success(title, { id: opts?.id, description: opts?.desc, duration: duration, classNames: { toast: \`\border-l-6 border-l-green-500\`, }, }), error: (title: string, opts?: ToastOpts) => toast.error(title, { id: opts?.id, description: opts?.desc, duration: duration, classNames: { toast: \`\border-l-6 border-l-red-500\`, }, }), loading: (title: string, desc?: string) => toast.loading(title, { description: desc, duration: Infinity, classNames: { toast: \`\border-l-6 border-l-[#ffffff69]\`, }, }), }; /\*\* ──────────────────────────────────────────────────────────── Arctis UI — GlassToaster ──────────────────────────────────────────────────────────── Author Ranaufal Muha Part of Arctis Design System https://arctis.ranaufalmuha.com Description Frosted glass toast notifications built on Sonner, featuring composable status APIs and blur-layered visual hierarchy aligned with the Arctis motion and surface language. License You may use, modify, and distribute this component. Attribution is appreciated but not required. Philosophy Arctis components prioritize: • Interaction clarity • Visual depth without noise • Motion as communication • Minimal cognitive load ──────────────────────────────────────────────────────────── \*/ ` }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { vars, PreviewTabs, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Getting started

Background

Button

Cursor

Toaster

Installation

Usage

Code

Built by

Ranaufal Muha