"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.button + "sweep-button", install: `clsx`, usage: `import SweepButton from "./SweepButton"; export default function SweepButtonPage() { return (

Launch Vault

); } `, code: `"use client"; import clsx from "clsx"; import React, { forwardRef } from "react"; type Variant = "color" | "transparent"; type Size = "sm" | "md" | "lg"; type SweepButtonProps = { variant?: Variant; size?: Size; loading?: boolean; leftIcon?: React.ReactNode; rightIcon?: React.ReactNode; className?: string; } & React.ButtonHTMLAttributes; const sizeMap = { sm: "px-4 py-2 text-sm", md: "px-6 py-3 text-base", lg: "px-8 py-4 text-lg", }; const variantMap = { color: \`\ bg-[#F89D00] hover:brightness-110 \`, transparent: \`\ bg-transparent border border-border hover:bg-white/5 \`, }; const SweepButton = forwardRef( function SweepButton( { children, variant = "color", size = "md", loading = false, disabled, leftIcon, rightIcon, className, ...buttonProps }, ref, ) { const baseClass = clsx( "relative overflow-hidden group inline-flex items-center justify-center gap-2", "font-medium rounded-lg transition-all duration-300 ease-out", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", "cursor-pointer", sizeMap[size], variantMap[variant], (disabled || loading) && "opacity-50 pointer-events-none", className, ); return ( ); }, ); export default SweepButton; ` }); } 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