@dust-tt/sparkle 0.2.513 → 0.2.516

package/dist/esm/stories/MultiPageSheet.stories.js

@@ -0,0 +1,179 @@
+import { __assign, __read } from "tslib";
+import React, { useState } from "react";
+import { Button } from "../components/Button";
+import { MultiPageSheet, MultiPageSheetContent, MultiPageSheetTrigger, } from "../components/MultiPageSheet";
+import { Cog6ToothIcon, DocumentTextIcon, UserIcon } from "../icons/app";
+var meta = {
+    title: "Primitives/MultiPageSheet",
+    component: MultiPageSheetContent,
+};
+export default meta;
+var samplePages = [
+    {
+        id: "profile",
+        title: "User Profile",
+        description: "Manage your personal information",
+        icon: UserIcon,
+        content: (React.createElement("div", { className: "s-space-y-4" },
+            React.createElement("div", null,
+                React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Personal Information"),
+                React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Update your profile details and preferences.")),
+            React.createElement("div", { className: "s-space-y-3" },
+                React.createElement("div", null,
+                    React.createElement("label", { className: "s-text-sm s-font-medium" }, "Full Name"),
+                    React.createElement("input", { type: "text", className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "John Doe" })),
+                React.createElement("div", null,
+                    React.createElement("label", { className: "s-text-sm s-font-medium" }, "Email"),
+                    React.createElement("input", { type: "email", className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "john@example.com" }))))),
+    },
+    {
+        id: "documents",
+        title: "Documents",
+        description: "Manage your uploaded files",
+        icon: DocumentTextIcon,
+        content: (React.createElement("div", { className: "s-space-y-4" },
+            React.createElement("div", null,
+                React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "File Management"),
+                React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Upload, organize, and manage your documents.")),
+            React.createElement("div", { className: "s-space-y-2" },
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between s-rounded-md s-border s-p-3" },
+                    React.createElement("span", { className: "s-text-sm" }, "document1.pdf"),
+                    React.createElement(Button, { label: "Download", size: "sm", variant: "outline" })),
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between s-rounded-md s-border s-p-3" },
+                    React.createElement("span", { className: "s-text-sm" }, "report.docx"),
+                    React.createElement(Button, { label: "Download", size: "sm", variant: "outline" }))))),
+    },
+    {
+        id: "settings",
+        title: "Settings",
+        description: "Configure your preferences",
+        icon: Cog6ToothIcon,
+        content: (React.createElement("div", { className: "s-space-y-4" },
+            React.createElement("div", null,
+                React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Application Settings"),
+                React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Customize your experience and notification preferences.")),
+            React.createElement("div", { className: "s-space-y-3" },
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between" },
+                    React.createElement("span", { className: "s-text-sm" }, "Email notifications"),
+                    React.createElement("input", { type: "checkbox", className: "s-rounded", defaultChecked: true })),
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between" },
+                    React.createElement("span", { className: "s-text-sm" }, "Dark mode"),
+                    React.createElement("input", { type: "checkbox", className: "s-rounded" })),
+                React.createElement("div", { className: "s-flex s-items-center s-justify-between" },
+                    React.createElement("span", { className: "s-text-sm" }, "Auto-save"),
+                    React.createElement("input", { type: "checkbox", className: "s-rounded", defaultChecked: true }))))),
+    },
+];
+var MultiPageSheetDemo = function () {
+    var _a = __read(useState("profile"), 2), currentPageId = _a[0], setCurrentPageId = _a[1];
+    var handleSave = function () {
+        alert("Changes saved!");
+    };
+    return (React.createElement(MultiPageSheet, null,
+        React.createElement(MultiPageSheetTrigger, { asChild: true },
+            React.createElement(Button, { label: "Open Multi-Page Sheet" })),
+        React.createElement(MultiPageSheetContent, { pages: samplePages, currentPageId: currentPageId, onPageChange: setCurrentPageId, size: "lg", onSave: handleSave })));
+};
+export var Default = {
+    render: function () { return React.createElement(MultiPageSheetDemo, null); },
+};
+export var InteractiveContent = {
+    render: function () {
+        var _a = __read(useState("step1"), 2), currentPageId = _a[0], setCurrentPageId = _a[1];
+        var _b = __read(useState({
+            name: "",
+            email: "",
+            selectedFile: "",
+            notifications: false,
+        }), 2), formData = _b[0], setFormData = _b[1];
+        var handleSave = function () {
+            alert("Setup completed! Data: ".concat(JSON.stringify(formData, null, 2)));
+        };
+        var interactivePages = [
+            {
+                id: "step1",
+                title: "Personal Info",
+                description: "Enter your basic information",
+                icon: UserIcon,
+                content: (React.createElement("div", { className: "s-space-y-4" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Let's get started"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Fill in your details to continue to the next step.")),
+                    React.createElement("div", { className: "s-space-y-3" },
+                        React.createElement("div", null,
+                            React.createElement("label", { className: "s-text-sm s-font-medium" }, "Full Name *"),
+                            React.createElement("input", { type: "text", className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "Enter your name", value: formData.name, onChange: function (e) {
+                                    return setFormData(__assign(__assign({}, formData), { name: e.target.value }));
+                                } })),
+                        React.createElement("div", null,
+                            React.createElement("label", { className: "s-text-sm s-font-medium" }, "Email *"),
+                            React.createElement("input", { type: "email", className: "s-mt-1 s-w-full s-rounded-md s-border s-px-3 s-py-2", placeholder: "Enter your email", value: formData.email, onChange: function (e) {
+                                    return setFormData(__assign(__assign({}, formData), { email: e.target.value }));
+                                } })),
+                        React.createElement("div", { className: "s-pt-2" },
+                            React.createElement(Button, { label: "Continue to File Selection", variant: "primary", size: "sm", disabled: !formData.name || !formData.email, onClick: function () { return setCurrentPageId("step2"); } }))))),
+            },
+            {
+                id: "step2",
+                title: "File Selection",
+                description: "Choose your files",
+                icon: DocumentTextIcon,
+                content: (React.createElement("div", { className: "s-space-y-4" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Select a file to work with"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Choose from the available files below.")),
+                    React.createElement("div", { className: "s-space-y-2" }, [
+                        "project-proposal.pdf",
+                        "budget-2024.xlsx",
+                        "meeting-notes.docx",
+                    ].map(function (file) { return (React.createElement("div", { key: file, className: "s-flex s-cursor-pointer s-items-center s-justify-between s-rounded-md s-border s-p-3 s-transition-colors hover:s-bg-gray-50 ".concat(formData.selectedFile === file
+                            ? "s-border-blue-300 s-bg-blue-50"
+                            : ""), onClick: function () {
+                            return setFormData(__assign(__assign({}, formData), { selectedFile: file }));
+                        } },
+                        React.createElement("span", { className: "s-text-sm" }, file),
+                        React.createElement("div", { className: "s-flex s-items-center s-gap-2" },
+                            React.createElement("input", { type: "radio", checked: formData.selectedFile === file, readOnly: true, className: "s-pointer-events-none" })))); })),
+                    formData.selectedFile && (React.createElement("div", { className: "s-pt-2" },
+                        React.createElement(Button, { label: "Continue to Settings", variant: "primary", size: "sm", onClick: function () { return setCurrentPageId("step3"); } }))))),
+            },
+            {
+                id: "step3",
+                title: "Final Settings",
+                description: "Configure your preferences",
+                icon: Cog6ToothIcon,
+                content: (React.createElement("div", { className: "s-space-y-4" },
+                    React.createElement("div", null,
+                        React.createElement("h3", { className: "s-mb-2 s-text-lg s-font-semibold" }, "Almost done!"),
+                        React.createElement("p", { className: "s-text-sm s-text-muted-foreground" }, "Configure your final preferences and complete the setup.")),
+                    React.createElement("div", { className: "s-space-y-3" },
+                        React.createElement("div", { className: "s-flex s-items-center s-justify-between" },
+                            React.createElement("span", { className: "s-text-sm" }, "Enable email notifications"),
+                            React.createElement("input", { type: "checkbox", className: "s-rounded", checked: formData.notifications, onChange: function (e) {
+                                    return setFormData(__assign(__assign({}, formData), { notifications: e.target.checked }));
+                                } })),
+                        React.createElement("div", { className: "s-rounded-md s-bg-gray-50 s-p-3" },
+                            React.createElement("h4", { className: "s-mb-2 s-text-sm s-font-medium" }, "Summary"),
+                            React.createElement("div", { className: "s-space-y-1 s-text-xs s-text-gray-600" },
+                                React.createElement("div", null,
+                                    "Name: ",
+                                    formData.name),
+                                React.createElement("div", null,
+                                    "Email: ",
+                                    formData.email),
+                                React.createElement("div", null,
+                                    "Selected File: ",
+                                    formData.selectedFile),
+                                React.createElement("div", null,
+                                    "Notifications:",
+                                    " ",
+                                    formData.notifications ? "Enabled" : "Disabled")))))),
+            },
+        ];
+        return (React.createElement(MultiPageSheet, null,
+            React.createElement(MultiPageSheetTrigger, { asChild: true },
+                React.createElement(Button, { label: "Open Interactive Setup" })),
+            React.createElement(MultiPageSheetContent, { pages: interactivePages, currentPageId: currentPageId, onPageChange: setCurrentPageId, size: "lg", onSave: handleSave })));
+    },
+};
+//# sourceMappingURL=MultiPageSheet.stories.js.map

package/dist/esm/stories/MultiPageSheet.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiPageSheet.stories.js","sourceRoot":"","sources":["../../../src/stories/MultiPageSheet.stories.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -915,6 +915,10 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+.s-pointer-events-none {
+  pointer-events: none;
+}
+
 .s-pointer-events-auto {
   pointer-events: auto;
 }
@@ -1199,6 +1203,10 @@ select {
   margin-right: 0.5rem;
 }
 
+.s-mt-1 {
+  margin-top: 0.25rem;
+}
+
 .s-mt-11 {
   margin-top: 2.75rem;
 }
@@ -5418,6 +5426,11 @@ select {
   border-color: rgb(223 224 226 / var(--tw-border-opacity));
 }
 
+.hover\:s-bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
+}
+
 .hover\:s-bg-highlight-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(122 198 255 / var(--tw-bg-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.513",
+  "version": "0.2.516",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/BarHeader.tsx

@@ -1,3 +1,4 @@
+import { cva, type VariantProps } from "class-variance-authority";
 import React from "react";
 
 import { Tooltip } from "@sparkle/components/Tooltip";
@@ -7,11 +8,27 @@ import {
   TrashIcon,
   XMarkIcon,
 } from "@sparkle/icons/app";
-import { classNames } from "@sparkle/lib/utils";
+import { cn } from "@sparkle/lib/utils";
 
 import { Button } from "./Button";
 
-interface BarHeaderProps {
+const barHeaderVariants = cva(
+  "s-flex s-h-16 s-flex-row s-items-center s-gap-3 s-border-b s-px-4",
+  {
+    variants: {
+      variant: {
+        full: "s-fixed s-left-0 s-right-0 s-top-0 s-z-30 s-backdrop-blur s-border-border-dark/70 s-bg-background/80 dark:s-border-border-dark-night/70 dark:s-bg-background-night/80",
+        default:
+          "s-relative s-z-10 s-border-structure-200 s-bg-structure-50 dark:s-border-structure-200-night dark:s-bg-structure-50-night",
+      },
+    },
+    defaultVariants: {
+      variant: "full",
+    },
+  }
+);
+
+interface BarHeaderProps extends VariantProps<typeof barHeaderVariants> {
   title: string;
   tooltip?: string;
   leftActions?: React.ReactNode;
@@ -24,24 +41,17 @@ export function BarHeader({
   tooltip,
   leftActions,
   rightActions,
-  className = "",
+  className,
+  variant,
 }: BarHeaderProps) {
-  const titleClasses = classNames(
+  const titleClasses = cn(
     "s-text-foreground dark:s-text-foreground-night",
     "s-heading-base s-truncate s-grow"
   );
-  const buttonBarClasses = "s-flex s-gap-1";
 
   return (
-    <div
-      className={classNames(
-        "s-fixed s-left-0 s-right-0 s-top-0 s-z-30 s-flex s-h-16 s-flex-row s-items-center s-gap-3 s-border-b s-px-4 s-backdrop-blur",
-        "s-border-border-dark/70 s-bg-background/80",
-        "dark:s-border-border-dark-night/70 dark:s-bg-background-night/80",
-        className
-      )}
-    >
-      {leftActions && <div className={buttonBarClasses}>{leftActions}</div>}
+    <div className={cn(barHeaderVariants({ variant }), className)}>
+      {leftActions && <div className="s-flex s-gap-1">{leftActions}</div>}
       <div className={titleClasses}>
         {tooltip ? (
           <Tooltip
@@ -53,7 +63,7 @@ export function BarHeader({
           title
         )}
       </div>
-      {rightActions && <div className={buttonBarClasses}>{rightActions}</div>}
+      {rightActions && <div className="s-flex s-gap-1">{rightActions}</div>}
     </div>
   );
 }

package/src/components/MultiPageSheet.tsx

@@ -0,0 +1,202 @@
+import * as React from "react";
+
+import { Button, Icon } from "@sparkle/components";
+import {
+  Sheet,
+  SheetClose,
+  SheetContainer,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@sparkle/components/Sheet";
+import { ChevronLeftIcon, ChevronRightIcon } from "@sparkle/icons/app";
+
+interface MultiPageSheetPage {
+  id: string;
+  title: string;
+  description?: string;
+  icon?: React.ComponentType;
+  content: React.ReactNode;
+}
+
+interface MultiPageSheetProps {
+  pages: MultiPageSheetPage[];
+  currentPageId: string;
+  onPageChange: (pageId: string) => void;
+  size?: React.ComponentProps<typeof SheetContent>["size"];
+  side?: React.ComponentProps<typeof SheetContent>["side"];
+  trapFocusScope?: boolean;
+  showNavigation?: boolean;
+  footerContent?: React.ReactNode;
+  onSave?: () => void;
+  className?: string;
+}
+
+const MultiPageSheetRoot = Sheet;
+const MultiPageSheetTrigger = SheetTrigger;
+const MultiPageSheetClose = SheetClose;
+
+interface MultiPageSheetContentProps extends MultiPageSheetProps {
+  children?: never;
+}
+
+const MultiPageSheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetContent>,
+  MultiPageSheetContentProps
+>(
+  (
+    {
+      pages,
+      currentPageId,
+      onPageChange,
+      size = "md",
+      side = "right",
+      trapFocusScope,
+      showNavigation = true,
+      footerContent,
+      onSave,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const currentPageIndex = pages.findIndex(
+      (page) => page.id === currentPageId
+    );
+    const currentPage = pages[currentPageIndex];
+
+    const handlePrevious = React.useCallback(() => {
+      if (currentPageIndex > 0) {
+        onPageChange(pages[currentPageIndex - 1].id);
+      }
+    }, [currentPageIndex, pages, onPageChange]);
+
+    const handleNext = React.useCallback(() => {
+      if (currentPageIndex < pages.length - 1) {
+        onPageChange(pages[currentPageIndex + 1].id);
+      }
+    }, [currentPageIndex, pages, onPageChange]);
+
+    if (!currentPage) {
+      console.warn(`Page with id "${currentPageId}" not found`);
+      return null;
+    }
+
+    const hasPrevious = currentPageIndex > 0;
+    const hasNext = currentPageIndex < pages.length - 1;
+
+    return (
+      <SheetContent
+        ref={ref}
+        size={size}
+        side={side}
+        trapFocusScope={trapFocusScope}
+        className={className}
+        {...props}
+      >
+        <SheetHeader hideButton={true}>
+          <div className="s-flex s-items-center s-justify-between s-pr-8">
+            <div className="s-flex s-items-center s-gap-3">
+              {showNavigation && (
+                <div className="s-flex s-items-center s-gap-1">
+                  <Button
+                    icon={ChevronLeftIcon}
+                    variant="ghost"
+                    size="sm"
+                    disabled={!hasPrevious}
+                    onClick={handlePrevious}
+                    tooltip={hasPrevious ? "Previous page" : undefined}
+                  />
+                  <Button
+                    icon={ChevronRightIcon}
+                    variant="ghost"
+                    size="sm"
+                    disabled={!hasNext}
+                    onClick={handleNext}
+                    tooltip={hasNext ? "Next page" : undefined}
+                  />
+                </div>
+              )}
+              <div className="s-flex s-items-center s-gap-2">
+                {currentPage.icon && (
+                  <Icon
+                    visual={currentPage.icon}
+                    size="lg"
+                    className="s-text-foreground"
+                  />
+                )}
+                <div>
+                  <SheetTitle>{currentPage.title}</SheetTitle>
+                  {currentPage.description && (
+                    <SheetDescription>
+                      {currentPage.description}
+                    </SheetDescription>
+                  )}
+                </div>
+              </div>
+            </div>
+            {showNavigation && pages.length > 1 && (
+              <div className="s-text-xs s-text-muted-foreground dark:s-text-muted-foreground-night">
+                {currentPageIndex + 1} / {pages.length}
+              </div>
+            )}
+          </div>
+        </SheetHeader>
+
+        <SheetContainer>{currentPage.content}</SheetContainer>
+
+        <SheetFooter
+          leftButtonProps={{
+            label: "Cancel",
+            variant: "outline",
+            size: "sm",
+          }}
+        >
+          <div className="s-ml-auto s-flex s-items-center s-gap-2">
+            {showNavigation && pages.length > 1 && hasPrevious && (
+              <Button
+                label="Previous"
+                icon={ChevronLeftIcon}
+                variant="outline"
+                size="sm"
+                onClick={handlePrevious}
+              />
+            )}
+            {showNavigation && pages.length > 1 && hasNext && (
+              <Button
+                label="Next"
+                icon={ChevronRightIcon}
+                variant="outline"
+                size="sm"
+                onClick={handleNext}
+              />
+            )}
+            {showNavigation && pages.length > 1 && !hasNext && onSave && (
+              <Button
+                label="Save changes"
+                variant="primary"
+                size="sm"
+                onClick={onSave}
+              />
+            )}
+            {footerContent}
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    );
+  }
+);
+
+MultiPageSheetContent.displayName = "MultiPageSheetContent";
+
+export {
+  MultiPageSheetRoot as MultiPageSheet,
+  MultiPageSheetClose,
+  MultiPageSheetContent,
+  type MultiPageSheetPage,
+  type MultiPageSheetProps,
+  MultiPageSheetTrigger,
+};

package/src/components/index.ts

@@ -97,6 +97,14 @@ export { LinkWrapper } from "./LinkWrapper";
 export { LoadingBlock } from "./LoadingBlock";
 export * from "./markdown";
 export { markdownStyles } from "./markdown/styles";
+export {
+  MultiPageSheet,
+  MultiPageSheetClose,
+  MultiPageSheetContent,
+  type MultiPageSheetPage,
+  type MultiPageSheetProps,
+  MultiPageSheetTrigger,
+} from "./MultiPageSheet";
 export * from "./NavigationList";
 export type { NotificationType } from "./Notification";
 export { Notification, useSendNotification } from "./Notification";

package/src/icons/app/Moon.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgMoon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 25"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M10 7.875a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10h.1a6.98 6.98 0 0 0-2.1 5Z"
+    />
+  </svg>
+);
+export default SvgMoon;

package/src/icons/app/Sun.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgSun = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 25"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M12 18.875a6 6 0 1 1 0-12 6 6 0 0 1 0 12Zm-1-17h2v3h-2v-3Zm0 19h2v3h-2v-3ZM3.515 5.804 4.929 4.39 7.05 6.51 5.636 7.925 3.515 5.804ZM16.95 19.239l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121Zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414L19.07 4.39ZM5.636 17.826l1.414 1.414L4.93 21.36l-1.414-1.414 2.121-2.121ZM23 11.875v2h-3v-2h3Zm-19 0v2H1v-2h3Z"
+    />
+  </svg>
+);
+export default SvgSun;

package/src/icons/app/index.ts

@@ -88,6 +88,7 @@ export { default as LogoutIcon } from "./Logout";
 export { default as MagicIcon } from "./Magic";
 export { default as MagnifyingGlassIcon } from "./MagnifyingGlass";
 export { default as MenuIcon } from "./Menu";
+export { default as MoonIcon } from "./Moon";
 export { default as MoreIcon } from "./More";
 export { default as MovingMailIcon } from "./MovingMail";
 export { default as PaintIcon } from "./Paint";
@@ -114,6 +115,7 @@ export { default as StarStrokeIcon } from "./StarStroke";
 export { default as StopIcon } from "./Stop";
 export { default as StopSignIcon } from "./StopSign";
 export { default as SuitcaseIcon } from "./Suitcase";
+export { default as SunIcon } from "./Sun";
 export { default as TableIcon } from "./Table";
 export { default as TagIcon } from "./Tag";
 export { default as TestTubeIcon } from "./TestTube";

package/src/icons/src/app/moon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 7.875C10 11.741 13.134 14.875 17 14.875C18.9584 14.875 20.729 14.0707 21.9995 12.7745C22 12.808 22 12.8415 22 12.875C22 18.3978 17.5228 22.875 12 22.875C6.47715 22.875 2 18.3978 2 12.875C2 7.35215 6.47715 2.875 12 2.875C12.0335 2.875 12.067 2.875 12.1005 2.87549C10.8043 4.14598 10 5.91657 10 7.875Z" fill="#111418"/>
+</svg>

package/src/icons/src/app/sun.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 18.875C8.68629 18.875 6 16.1887 6 12.875C6 9.56129 8.68629 6.875 12 6.875C15.3137 6.875 18 9.56129 18 12.875C18 16.1887 15.3137 18.875 12 18.875ZM11 1.875H13V4.875H11V1.875ZM11 20.875H13V23.875H11V20.875ZM3.51472 5.80393L4.92893 4.38972L7.05025 6.51104L5.63604 7.92525L3.51472 5.80393ZM16.9497 19.239L18.364 17.8247L20.4853 19.9461L19.0711 21.3603L16.9497 19.239ZM19.0711 4.38972L20.4853 5.80393L18.364 7.92525L16.9497 6.51104L19.0711 4.38972ZM5.63604 17.8247L7.05025 19.239L4.92893 21.3603L3.51472 19.9461L5.63604 17.8247ZM23 11.875V13.875H20V11.875H23ZM4 11.875V13.875H1V11.875H4Z" fill="#111418"/>
+</svg>