@oppulence/design-system 1.0.11 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oppulence/design-system",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Design system for Oppulence - shadcn-style components with Tailwind CSS v4",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/atoms/animated-size-container.tsx

@@ -16,7 +16,10 @@ type AnimatedSizeContainerProps = PropsWithChildren<{
   width?: boolean;
   height?: boolean;
 }> &
-  Omit<ComponentPropsWithoutRef<typeof motion.div>, "animate" | "children" | "className">;
+  Omit<
+    ComponentPropsWithoutRef<typeof motion.div>,
+    "animate" | "children" | "className"
+  >;
 
 /**
  * A container with animated width and height (each optional) based on children dimensions.
@@ -26,7 +29,9 @@ const AnimatedSizeContainer = forwardRef<
   AnimatedSizeContainerProps
 >(({ width = false, height = false, transition, children, ...rest }, ref) => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const resizeObserverEntry = useResizeObserver(containerRef as RefObject<Element>);
+  const resizeObserverEntry = useResizeObserver(
+    containerRef as RefObject<Element>,
+  );
 
   return (
     <motion.div

package/src/components/atoms/icons.tsx

@@ -1,7 +1,13 @@
 import { ArchiveIcon } from "@radix-ui/react-icons";
 import { FiGithub } from "react-icons/fi";
 import type { IconType as BaseIconType } from "react-icons/lib";
-import type { ComponentType, FC, ReactNode, SVGAttributes, SVGProps } from "react";
+import type {
+  ComponentType,
+  FC,
+  ReactNode,
+  SVGAttributes,
+  SVGProps,
+} from "react";
 import {
   MdArrowBack,
   MdArrowDownward,
@@ -131,9 +137,7 @@ type RadixIconProps = Omit<SVGAttributes<SVGElement>, "children"> & {
 
 const createReactIcon =
   (Icon: BaseIconType) =>
-  ({ size = 20, color }: IconProps) => (
-    <Icon size={size} color={color} />
-  );
+  ({ size = 20, color }: IconProps) => <Icon size={size} color={color} />;
 
 const createRadixIcon =
   (Icon: ComponentType<RadixIconProps>) =>
@@ -573,10 +577,7 @@ export const Icons = {
       <path d="M480-80 200-360l56-57 184 184v-287h80v287l184-183 56 56L480-80Zm-40-520v-120h80v120h-80Zm0-200v-80h80v80h-80Z" />
     </svg>
   ),
-  Delete: ({
-    size = 24,
-    ...props
-  }: SvgProps) => (
+  Delete: ({ size = 24, ...props }: SvgProps) => (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width={size}
@@ -730,7 +731,13 @@ export const Icons = {
   Instagram: (props: SVGIconProps) => (
     <SVGIcon {...props} viewBox="0 0 24 24">
       <defs>
-        <linearGradient id="instagram-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
+        <linearGradient
+          id="instagram-gradient"
+          x1="0%"
+          y1="100%"
+          x2="100%"
+          y2="0%"
+        >
           <stop offset="0%" stopColor="#FEDA77" />
           <stop offset="25%" stopColor="#FA7E1E" />
           <stop offset="50%" stopColor="#D62976" />
@@ -749,7 +756,14 @@ export const Icons = {
         strokeWidth="2"
         fill="none"
       />
-      <circle cx="12" cy="12" r="3.5" stroke="#fff" strokeWidth="2" fill="none" />
+      <circle
+        cx="12"
+        cy="12"
+        r="3.5"
+        stroke="#fff"
+        strokeWidth="2"
+        fill="none"
+      />
       <circle cx="17" cy="7" r="1.5" fill="#fff" />
     </SVGIcon>
   ),

package/src/components/atoms/image.tsx

@@ -6,12 +6,7 @@ export type ImageProps = GeneratedImage &
     alt?: string;
   };
 
-export function Image({
-  base64,
-  mediaType,
-  alt,
-  ...props
-}: ImageProps) {
+export function Image({ base64, mediaType, alt, ...props }: ImageProps) {
   return (
     <img
       {...props}

package/src/components/atoms/submit-button.tsx

@@ -5,8 +5,7 @@ type SubmitButtonProps = {
   children: ReactNode;
   isSubmitting: boolean;
   disabled?: boolean;
-} &
-  Omit<ButtonProps, "loading">;
+} & Omit<ButtonProps, "loading">;
 
 export function SubmitButton({
   children,

package/src/components/atoms/text-effect.tsx

@@ -206,10 +206,10 @@ export const TextEffect = ({
 
   const baseContainer = preset
     ? presetVariants[preset].container
-    : variants?.container ?? defaultContainerVariants;
+    : (variants?.container ?? defaultContainerVariants);
   const baseItem = preset
     ? presetVariants[preset].item
-    : variants?.item ?? defaultItemVariants;
+    : (variants?.item ?? defaultItemVariants);
 
   const staggerChildren = speedSegment ?? defaultStaggerTimes[per];
 

package/src/components/molecules/actions.tsx

@@ -37,7 +37,9 @@ export const Action = ({
     return (
       <Tooltip>
         <TooltipTrigger
-          render={<Button size={size} type="button" variant={variant} {...props} />}
+          render={
+            <Button size={size} type="button" variant={variant} {...props} />
+          }
         >
           {children}
           <span className="sr-only">{label || tooltip}</span>

package/src/components/molecules/branch.tsx

@@ -75,7 +75,10 @@ export const Branch = ({
   );
 };
 
-export type BranchMessagesProps = Omit<HTMLAttributes<HTMLDivElement>, "className">;
+export type BranchMessagesProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className"
+>;
 
 export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => {
   const { currentBranch, setBranches, branches } = useBranch();
@@ -101,7 +104,10 @@ export const BranchMessages = ({ children, ...props }: BranchMessagesProps) => {
   ));
 };
 
-export type BranchSelectorProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
+export type BranchSelectorProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className"
+> & {
   from: ChatRole;
 };
 

package/src/components/molecules/code-block.tsx

@@ -20,7 +20,10 @@ const CodeBlockContext = createContext<CodeBlockContextType>({
   code: "",
 });
 
-export type CodeBlockProps = Omit<HTMLAttributes<HTMLDivElement>, "className"> & {
+export type CodeBlockProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "className"
+> & {
   code: string;
   language: string;
   showLineNumbers?: boolean;

package/src/components/molecules/inline-citation.tsx

@@ -20,19 +20,13 @@ import {
 } from "../organisms/carousel";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "./hover-card";
 
-export type InlineCitationProps = Omit<
-  ComponentProps<"span">,
-  "className"
->;
+export type InlineCitationProps = Omit<ComponentProps<"span">, "className">;
 
 export const InlineCitation = ({ ...props }: InlineCitationProps) => (
   <span className="group inline items-center gap-1" {...props} />
 );
 
-export type InlineCitationTextProps = Omit<
-  ComponentProps<"span">,
-  "className"
->;
+export type InlineCitationTextProps = Omit<ComponentProps<"span">, "className">;
 
 export const InlineCitationText = ({ ...props }: InlineCitationTextProps) => (
   <span className="transition-colors group-hover:bg-accent" {...props} />
@@ -44,10 +38,12 @@ export const InlineCitationCard = (props: InlineCitationCardProps) => (
   <HoverCard {...props} />
 );
 
-export type InlineCitationCardTriggerProps =
-  Omit<ComponentProps<"span">, "className"> & {
-    sources: string[];
-  };
+export type InlineCitationCardTriggerProps = Omit<
+  ComponentProps<"span">,
+  "className"
+> & {
+  sources: string[];
+};
 
 export const InlineCitationCardTrigger = ({
   sources,
@@ -68,7 +64,8 @@ export const InlineCitationCardTrigger = ({
   >
     {sources.length ? (
       <>
-        {new URL(sources[0]!).hostname} {sources.length > 1 && `+${sources.length - 1}`}
+        {new URL(sources[0]!).hostname}{" "}
+        {sources.length > 1 && `+${sources.length - 1}`}
       </>
     ) : (
       "unknown"

package/src/components/molecules/message.tsx

@@ -24,10 +24,7 @@ export type MessageContentProps = Omit<
   "className"
 >;
 
-export const MessageContent = ({
-  children,
-  ...props
-}: MessageContentProps) => (
+export const MessageContent = ({ children, ...props }: MessageContentProps) => (
   <div
     className={cn(
       "flex flex-col gap-2 overflow-hidden rounded-lg px-4 py-3 text-foreground text-sm",
@@ -57,8 +54,6 @@ export const MessageAvatar = ({
 }: MessageAvatarProps) => (
   <Avatar size={size} {...props}>
     <AvatarImage alt="" src={src} />
-    <AvatarFallback>
-      {name?.slice(0, 1) || "M"}
-    </AvatarFallback>
+    <AvatarFallback>{name?.slice(0, 1) || "M"}</AvatarFallback>
   </Avatar>
 );

package/src/components/molecules/sources.tsx

@@ -10,7 +10,10 @@ import {
   CollapsibleTrigger,
 } from "./collapsible";
 
-export type SourcesProps = Omit<ComponentProps<typeof Collapsible>, "className">;
+export type SourcesProps = Omit<
+  ComponentProps<typeof Collapsible>,
+  "className"
+>;
 
 export const Sources = ({ ...props }: SourcesProps) => (
   <Collapsible className="not-prose mb-4 text-primary text-xs" {...props} />

package/src/components/molecules/suggestion.tsx

@@ -9,9 +9,7 @@ export type SuggestionsProps = Omit<ComponentProps<"div">, "className">;
 
 export const Suggestions = ({ children, ...props }: SuggestionsProps) => (
   <div className="w-full overflow-x-auto whitespace-nowrap" {...props}>
-    <div className="flex w-max flex-nowrap items-center gap-2">
-      {children}
-    </div>
+    <div className="flex w-max flex-nowrap items-center gap-2">{children}</div>
   </div>
 );
 

package/src/components/molecules/task.tsx

@@ -45,7 +45,11 @@ export type TaskTriggerProps = Omit<
   title: string;
 };
 
-export const TaskTrigger = ({ children, title, ...props }: TaskTriggerProps) => (
+export const TaskTrigger = ({
+  children,
+  title,
+  ...props
+}: TaskTriggerProps) => (
   <CollapsibleTrigger className="group" {...props}>
     {children ?? (
       <div className="flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground">

package/src/components/molecules/tool-call-indicator.tsx

@@ -33,7 +33,12 @@ export function ToolCallIndicator({ toolName }: ToolCallIndicatorProps) {
         <div className="flex items-center justify-center size-3.5">
           <config.icon size={14} />
         </div>
-        <TextShimmer size="xs" baseColor="#707070" gradientColor="#111111" duration={1}>
+        <TextShimmer
+          size="xs"
+          baseColor="#707070"
+          gradientColor="#111111"
+          duration={1}
+        >
           {config.displayText}
         </TextShimmer>
       </div>

package/src/components/molecules/tool.tsx

@@ -47,7 +47,12 @@ const getStatusBadge = (status: ToolUIPart["state"]) => {
   } as const;
 
   return (
-    <span className={cn(badgeVariants({ variant: "secondary" }), "gap-1.5 rounded-full text-xs")}>
+    <span
+      className={cn(
+        badgeVariants({ variant: "secondary" }),
+        "gap-1.5 rounded-full text-xs",
+      )}
+    >
       {icons[status]}
       {labels[status]}
     </span>

package/src/components/organisms/combobox-dropdown.tsx

@@ -4,7 +4,13 @@ import { Check, ChevronsUpDown } from "lucide-react";
 import * as React from "react";
 
 import { Command } from "./command";
-import { CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command";
+import {
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command";
 import { Button } from "../atoms/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../molecules/popover";
 
@@ -22,7 +28,10 @@ type Props<T> = {
   selectedItem?: T;
   renderSelectedItem?: (selectedItem: T) => React.ReactNode;
   renderOnCreate?: (value: string) => React.ReactNode;
-  renderListItem?: (listItem: { isChecked: boolean; item: T }) => React.ReactNode;
+  renderListItem?: (listItem: {
+    isChecked: boolean;
+    item: T;
+  }) => React.ReactNode;
   emptyResults?: React.ReactNode;
   popoverProps?: Omit<React.ComponentProps<typeof PopoverContent>, "className">;
   disabled?: boolean;
@@ -97,7 +106,9 @@ export function ComboboxDropdown<T extends ComboboxItem>({
                   <>
                     <Check
                       className={
-                        isChecked ? "mr-2 h-4 w-4 opacity-100" : "mr-2 h-4 w-4 opacity-0"
+                        isChecked
+                          ? "mr-2 h-4 w-4 opacity-100"
+                          : "mr-2 h-4 w-4 opacity-0"
                       }
                     />
                     {item.label}
@@ -150,7 +161,7 @@ export function ComboboxDropdown<T extends ComboboxItem>({
                   : selectedItem.label}
               </span>
             ) : (
-              placeholder ?? "Select item..."
+              (placeholder ?? "Select item...")
             )}
           </span>
           <ChevronsUpDown className="size-4 opacity-50" />

package/src/components/organisms/editor/extentions/bubble-menu/link-item.tsx

@@ -10,7 +10,11 @@ import {
 } from "react-icons/md";
 import { cn } from "../../../../../../lib/utils";
 import { buttonVariants } from "../../../../atoms/button";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../../molecules/popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../../../../molecules/popover";
 import { formatUrlWithProtocol } from "../../utils";
 import { BubbleMenuButton } from "./bubble-menu-button";
 
@@ -44,7 +48,9 @@ export function LinkItem({ editor, open, setOpen }: LinkItemProps) {
   return (
     <Popover modal={false} open={open} onOpenChange={setOpen}>
       <PopoverTrigger
-        render={<BubbleMenuButton isActive={isActive} action={() => setOpen(true)} />}
+        render={
+          <BubbleMenuButton isActive={isActive} action={() => setOpen(true)} />
+        }
       >
         {linkValue ? (
           <MdOutlineLinkOff className="size-4" />

package/src/components/organisms/multiple-selector.tsx

@@ -463,13 +463,10 @@ const MultipleSelector = React.forwardRef<
         filter={commandFilter()}
       >
         <div
-          className={cn(
-            "min-h-10 border-b border-border text-sm",
-            {
-              "py-1": selected.length !== 0,
-              "cursor-text": !disabled && selected.length !== 0,
-            },
-          )}
+          className={cn("min-h-10 border-b border-border text-sm", {
+            "py-1": selected.length !== 0,
+            "cursor-text": !disabled && selected.length !== 0,
+          })}
           onClick={() => {
             if (disabled) return;
             inputRef?.current?.focus();

package/src/components/organisms/prompt-input.tsx

@@ -78,11 +78,7 @@ export function PromptInputAttachment({
   const attachments = usePromptInputAttachments();
 
   return (
-    <div
-      className="group relative h-14 w-14 border"
-      key={data.id}
-      {...props}
-    >
+    <div className="group relative h-14 w-14 border" key={data.id} {...props}>
       {data.mediaType?.startsWith("image/") && data.url ? (
         <img
           alt={data.filename || "attachment"}

package/src/components/organisms/response.tsx

@@ -100,13 +100,7 @@ export const Response = memo(
         ),
         a: (componentProps) => {
           if (isExternalUrl(componentProps.href)) {
-            return (
-              <a
-                {...componentProps}
-                rel="noreferrer"
-                target="_blank"
-              />
-            );
+            return <a {...componentProps} rel="noreferrer" target="_blank" />;
           }
 
           return <a {...componentProps} />;

package/src/components/organisms/toast-toaster.tsx

@@ -62,7 +62,9 @@ export function ToastToaster() {
                       </div>
                     </div>
 
-                    {props.variant === "progress" && <Progress value={progress} />}
+                    {props.variant === "progress" && (
+                      <Progress value={progress} />
+                    )}
 
                     {description && (
                       <ToastDescription>{description}</ToastDescription>

package/src/components/organisms/toast.tsx

@@ -7,7 +7,10 @@ const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
-  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>, "className">
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>,
+    "className"
+  >
 >((props, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
@@ -40,7 +43,10 @@ const toastVariants = cva(
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
-  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>, "className"> &
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root>,
+    "className"
+  > &
     VariantProps<typeof toastVariants>
 >(({ variant, ...props }, ref) => {
   return (
@@ -55,7 +61,10 @@ Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
-  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>, "className">
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>,
+    "className"
+  >
 >((props, ref) => (
   <ToastPrimitives.Action
     ref={ref}
@@ -67,7 +76,10 @@ ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
-  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>, "className">
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>,
+    "className"
+  >
 >((props, ref) => (
   <ToastPrimitives.Close
     ref={ref}
@@ -82,13 +94,12 @@ ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
-  Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>, "className">
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>,
+    "className"
+  >
 >((props, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className="text-sm"
-    {...props}
-  />
+  <ToastPrimitives.Title ref={ref} className="text-sm" {...props} />
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;