@contractspec/bundle.library 3.7.6 → 3.8.2

package/dist/components/templates/messaging/ConversationList.js

@@ -1,10 +1,10 @@
 // @bun
 // src/components/templates/messaging/ConversationList.tsx
-import { useQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
 import { MessageCircle, Users } from "lucide-react";
 import { useMemo } from "react";
-import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CONVERSATIONS_QUERY = gql`
   query Conversations($projectId: ID!) {
@@ -32,15 +32,15 @@ function ConversationList({
   });
   const conversations = useMemo(() => data?.conversations ?? [], [data]);
   return /* @__PURE__ */ jsxs("aside", {
-    className: "border-border bg-card h-full overflow-y-auto rounded-2xl border",
+    className: "h-full overflow-y-auto rounded-2xl border border-border bg-card",
     children: [
       /* @__PURE__ */ jsxs("header", {
-        className: "border-border px -4 flex items-center justify-between border-b px-4 py-3",
+        className: "px -4 flex items-center justify-between border-border border-b px-4 py-3",
         children: [
           /* @__PURE__ */ jsxs("div", {
             children: [
               /* @__PURE__ */ jsx("p", {
-                className: "text-sm font-semibold",
+                className: "font-semibold text-sm",
                 children: "Conversations"
               }),
               /* @__PURE__ */ jsx("p", {
@@ -50,28 +50,28 @@ function ConversationList({
             ]
           }),
           /* @__PURE__ */ jsx(Users, {
-            className: "text-muted-foreground h-4 w-4"
+            className: "h-4 w-4 text-muted-foreground"
           })
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        className: "divide-border/70 divide-y",
+        className: "divide-y divide-border/70",
         children: [
           conversations.map((conversation) => {
             const isSelected = selectedId === conversation.id;
             return /* @__PURE__ */ jsxs("button", {
               type: "button",
-              className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${isSelected ? "text-foreground bg-violet-500/10" : "hover:bg-muted/40"}`,
+              className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${isSelected ? "bg-violet-500/10 text-foreground" : "hover:bg-muted/40"}`,
               onClick: () => onSelect?.(conversation.id),
               children: [
                 /* @__PURE__ */ jsxs("div", {
                   className: "flex items-center gap-2",
                   children: [
                     /* @__PURE__ */ jsx(MessageCircle, {
-                      className: "text-muted-foreground h-4 w-4"
+                      className: "h-4 w-4 text-muted-foreground"
                     }),
                     /* @__PURE__ */ jsx("span", {
-                      className: "text-sm font-medium",
+                      className: "font-medium text-sm",
                       children: conversation.name || "Untitled conversation"
                     })
                   ]
@@ -84,7 +84,7 @@ function ConversationList({
             }, conversation.id);
           }),
           !loading && conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground p-4 text-center text-xs",
+            className: "p-4 text-center text-muted-foreground text-xs",
             children: "No conversations yet."
           }) : null
         ]

package/dist/components/templates/messaging/MessageComposer.js

@@ -1,9 +1,9 @@
 // @bun
 // src/components/templates/messaging/MessageThread.tsx
-import { useMutation, useQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client";
-import { useEffect, useRef } from "react";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 "use client";
 var MESSAGES_QUERY = gql`
@@ -50,7 +50,7 @@ function MessageThread({
   }, [messages]);
   if (!conversationId) {
     return /* @__PURE__ */ jsx("div", {
-      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
+      className: "flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed",
       children: /* @__PURE__ */ jsx("p", {
         className: "text-muted-foreground text-sm",
         children: "Select a conversation"
@@ -58,12 +58,12 @@ function MessageThread({
     });
   }
   return /* @__PURE__ */ jsx("div", {
-    className: "border-border bg-card flex flex-1 flex-col rounded-2xl border",
+    className: "flex flex-1 flex-col rounded-2xl border border-border bg-card",
     children: /* @__PURE__ */ jsx("div", {
       ref: scrollRef,
       className: "flex-1 space-y-3 overflow-y-auto p-4",
       children: loading ? /* @__PURE__ */ jsx("p", {
-        className: "text-muted-foreground text-center text-sm",
+        className: "text-center text-muted-foreground text-sm",
         children: "Loading\u2026"
       }) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxs("div", {
         className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
@@ -75,7 +75,7 @@ function MessageThread({
             })
           }),
           /* @__PURE__ */ jsxs("span", {
-            className: "text-muted-foreground mt-1 text-xs",
+            className: "mt-1 text-muted-foreground text-xs",
             children: [
               message.senderName || message.senderId,
               " \xB7",
@@ -93,11 +93,11 @@ function MessageThread({
 }
 
 // src/components/templates/messaging/MessageComposer.tsx
-import { useState } from "react";
-import { useMutation as useMutation2 } from "@apollo/client/react";
 import { gql as gql2 } from "@apollo/client";
-import { Send } from "lucide-react";
+import { useMutation as useMutation2 } from "@apollo/client/react";
 import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { Send } from "lucide-react";
+import { useState } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 "use client";
 var SEND_MESSAGE = gql2`
@@ -140,11 +140,11 @@ function MessageComposer({
   };
   return /* @__PURE__ */ jsxs2("form", {
     onSubmit: handleSubmit,
-    className: "border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3",
+    className: "mt-3 flex items-center gap-2 rounded-2xl border border-border bg-card px-4 py-3",
     children: [
       /* @__PURE__ */ jsx2("input", {
         type: "text",
-        className: "text-foreground flex-1 bg-transparent text-sm outline-none",
+        className: "flex-1 bg-transparent text-foreground text-sm outline-none",
         placeholder: conversationId ? "Type a message\u2026" : "Select a conversation to start",
         disabled: !conversationId || loading,
         value: content,

package/dist/components/templates/messaging/MessageThread.js

@@ -1,9 +1,9 @@
 // @bun
 // src/components/templates/messaging/MessageThread.tsx
-import { useMutation, useQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client";
-import { useEffect, useRef } from "react";
+import { useMutation, useQuery } from "@apollo/client/react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 "use client";
 var MESSAGES_QUERY = gql`
@@ -50,7 +50,7 @@ function MessageThread({
   }, [messages]);
   if (!conversationId) {
     return /* @__PURE__ */ jsx("div", {
-      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
+      className: "flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed",
       children: /* @__PURE__ */ jsx("p", {
         className: "text-muted-foreground text-sm",
         children: "Select a conversation"
@@ -58,12 +58,12 @@ function MessageThread({
     });
   }
   return /* @__PURE__ */ jsx("div", {
-    className: "border-border bg-card flex flex-1 flex-col rounded-2xl border",
+    className: "flex flex-1 flex-col rounded-2xl border border-border bg-card",
     children: /* @__PURE__ */ jsx("div", {
       ref: scrollRef,
       className: "flex-1 space-y-3 overflow-y-auto p-4",
       children: loading ? /* @__PURE__ */ jsx("p", {
-        className: "text-muted-foreground text-center text-sm",
+        className: "text-center text-muted-foreground text-sm",
         children: "Loading\u2026"
       }) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxs("div", {
         className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
@@ -75,7 +75,7 @@ function MessageThread({
             })
           }),
           /* @__PURE__ */ jsxs("span", {
-            className: "text-muted-foreground mt-1 text-xs",
+            className: "mt-1 text-muted-foreground text-xs",
             children: [
               message.senderName || message.senderId,
               " \xB7",

package/dist/components/templates/messaging/MessagingWorkspace.js

@@ -1,10 +1,10 @@
 // @bun
 // src/components/templates/messaging/ConversationList.tsx
-import { useQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
 import { MessageCircle, Users } from "lucide-react";
 import { useMemo } from "react";
-import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CONVERSATIONS_QUERY = gql`
   query Conversations($projectId: ID!) {
@@ -32,15 +32,15 @@ function ConversationList({
   });
   const conversations = useMemo(() => data?.conversations ?? [], [data]);
   return /* @__PURE__ */ jsxs("aside", {
-    className: "border-border bg-card h-full overflow-y-auto rounded-2xl border",
+    className: "h-full overflow-y-auto rounded-2xl border border-border bg-card",
     children: [
       /* @__PURE__ */ jsxs("header", {
-        className: "border-border px -4 flex items-center justify-between border-b px-4 py-3",
+        className: "px -4 flex items-center justify-between border-border border-b px-4 py-3",
         children: [
           /* @__PURE__ */ jsxs("div", {
             children: [
               /* @__PURE__ */ jsx("p", {
-                className: "text-sm font-semibold",
+                className: "font-semibold text-sm",
                 children: "Conversations"
               }),
               /* @__PURE__ */ jsx("p", {
@@ -50,28 +50,28 @@ function ConversationList({
             ]
           }),
           /* @__PURE__ */ jsx(Users, {
-            className: "text-muted-foreground h-4 w-4"
+            className: "h-4 w-4 text-muted-foreground"
           })
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        className: "divide-border/70 divide-y",
+        className: "divide-y divide-border/70",
         children: [
           conversations.map((conversation) => {
             const isSelected = selectedId === conversation.id;
             return /* @__PURE__ */ jsxs("button", {
               type: "button",
-              className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${isSelected ? "text-foreground bg-violet-500/10" : "hover:bg-muted/40"}`,
+              className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${isSelected ? "bg-violet-500/10 text-foreground" : "hover:bg-muted/40"}`,
               onClick: () => onSelect?.(conversation.id),
               children: [
                 /* @__PURE__ */ jsxs("div", {
                   className: "flex items-center gap-2",
                   children: [
                     /* @__PURE__ */ jsx(MessageCircle, {
-                      className: "text-muted-foreground h-4 w-4"
+                      className: "h-4 w-4 text-muted-foreground"
                     }),
                     /* @__PURE__ */ jsx("span", {
-                      className: "text-sm font-medium",
+                      className: "font-medium text-sm",
                       children: conversation.name || "Untitled conversation"
                     })
                   ]
@@ -84,7 +84,7 @@ function ConversationList({
             }, conversation.id);
           }),
           !loading && conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground p-4 text-center text-xs",
+            className: "p-4 text-center text-muted-foreground text-xs",
             children: "No conversations yet."
           }) : null
         ]
@@ -94,10 +94,10 @@ function ConversationList({
 }
 
 // src/components/templates/messaging/MessageThread.tsx
-import { useMutation, useQuery as useQuery2 } from "@apollo/client/react";
 import { gql as gql2 } from "@apollo/client";
-import { useEffect, useRef } from "react";
+import { useMutation, useQuery as useQuery2 } from "@apollo/client/react";
 import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useEffect, useRef } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 "use client";
 var MESSAGES_QUERY = gql2`
@@ -144,7 +144,7 @@ function MessageThread({
   }, [messages]);
   if (!conversationId) {
     return /* @__PURE__ */ jsx2("div", {
-      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
+      className: "flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed",
       children: /* @__PURE__ */ jsx2("p", {
         className: "text-muted-foreground text-sm",
         children: "Select a conversation"
@@ -152,12 +152,12 @@ function MessageThread({
     });
   }
   return /* @__PURE__ */ jsx2("div", {
-    className: "border-border bg-card flex flex-1 flex-col rounded-2xl border",
+    className: "flex flex-1 flex-col rounded-2xl border border-border bg-card",
     children: /* @__PURE__ */ jsx2("div", {
       ref: scrollRef,
       className: "flex-1 space-y-3 overflow-y-auto p-4",
       children: loading ? /* @__PURE__ */ jsx2("p", {
-        className: "text-muted-foreground text-center text-sm",
+        className: "text-center text-muted-foreground text-sm",
         children: "Loading\u2026"
       }) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxs2("div", {
         className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
@@ -169,7 +169,7 @@ function MessageThread({
             })
           }),
           /* @__PURE__ */ jsxs2("span", {
-            className: "text-muted-foreground mt-1 text-xs",
+            className: "mt-1 text-muted-foreground text-xs",
             children: [
               message.senderName || message.senderId,
               " \xB7",
@@ -187,11 +187,11 @@ function MessageThread({
 }
 
 // src/components/templates/messaging/MessageComposer.tsx
-import { useState } from "react";
-import { useMutation as useMutation2 } from "@apollo/client/react";
 import { gql as gql3 } from "@apollo/client";
-import { Send } from "lucide-react";
+import { useMutation as useMutation2 } from "@apollo/client/react";
 import { useTemplateRuntime as useTemplateRuntime3 } from "@contractspec/lib.example-shared-ui";
+import { Send } from "lucide-react";
+import { useState } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 "use client";
 var SEND_MESSAGE = gql3`
@@ -234,11 +234,11 @@ function MessageComposer({
   };
   return /* @__PURE__ */ jsxs3("form", {
     onSubmit: handleSubmit,
-    className: "border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3",
+    className: "mt-3 flex items-center gap-2 rounded-2xl border border-border bg-card px-4 py-3",
     children: [
       /* @__PURE__ */ jsx3("input", {
         type: "text",
-        className: "text-foreground flex-1 bg-transparent text-sm outline-none",
+        className: "flex-1 bg-transparent text-foreground text-sm outline-none",
         placeholder: conversationId ? "Type a message\u2026" : "Select a conversation to start",
         disabled: !conversationId || loading,
         value: content,
@@ -260,8 +260,8 @@ function MessageComposer({
 }
 
 // src/components/templates/messaging/MessagingWorkspace.tsx
-import { useState as useState2 } from "react";
 import { registerTemplateComponents } from "@contractspec/lib.example-shared-ui";
+import { useState as useState2 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 "use client";
 function MessagingWorkspace() {

package/dist/components/templates/messaging/index.d.ts

@@ -1,4 +1,4 @@
 export * from './ConversationList';
-export * from './MessageThread';
 export * from './MessageComposer';
+export * from './MessageThread';
 export * from './MessagingWorkspace';

package/dist/components/templates/messaging/index.js

@@ -1,10 +1,10 @@
 // @bun
 // src/components/templates/messaging/ConversationList.tsx
-import { useQuery } from "@apollo/client/react";
 import { gql } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
 import { MessageCircle, Users } from "lucide-react";
 import { useMemo } from "react";
-import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 var CONVERSATIONS_QUERY = gql`
   query Conversations($projectId: ID!) {
@@ -32,15 +32,15 @@ function ConversationList({
   });
   const conversations = useMemo(() => data?.conversations ?? [], [data]);
   return /* @__PURE__ */ jsxs("aside", {
-    className: "border-border bg-card h-full overflow-y-auto rounded-2xl border",
+    className: "h-full overflow-y-auto rounded-2xl border border-border bg-card",
     children: [
       /* @__PURE__ */ jsxs("header", {
-        className: "border-border px -4 flex items-center justify-between border-b px-4 py-3",
+        className: "px -4 flex items-center justify-between border-border border-b px-4 py-3",
         children: [
           /* @__PURE__ */ jsxs("div", {
             children: [
               /* @__PURE__ */ jsx("p", {
-                className: "text-sm font-semibold",
+                className: "font-semibold text-sm",
                 children: "Conversations"
               }),
               /* @__PURE__ */ jsx("p", {
@@ -50,28 +50,28 @@ function ConversationList({
             ]
           }),
           /* @__PURE__ */ jsx(Users, {
-            className: "text-muted-foreground h-4 w-4"
+            className: "h-4 w-4 text-muted-foreground"
           })
         ]
       }),
       /* @__PURE__ */ jsxs("div", {
-        className: "divide-border/70 divide-y",
+        className: "divide-y divide-border/70",
         children: [
           conversations.map((conversation) => {
             const isSelected = selectedId === conversation.id;
             return /* @__PURE__ */ jsxs("button", {
               type: "button",
-              className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${isSelected ? "text-foreground bg-violet-500/10" : "hover:bg-muted/40"}`,
+              className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${isSelected ? "bg-violet-500/10 text-foreground" : "hover:bg-muted/40"}`,
               onClick: () => onSelect?.(conversation.id),
               children: [
                 /* @__PURE__ */ jsxs("div", {
                   className: "flex items-center gap-2",
                   children: [
                     /* @__PURE__ */ jsx(MessageCircle, {
-                      className: "text-muted-foreground h-4 w-4"
+                      className: "h-4 w-4 text-muted-foreground"
                     }),
                     /* @__PURE__ */ jsx("span", {
-                      className: "text-sm font-medium",
+                      className: "font-medium text-sm",
                       children: conversation.name || "Untitled conversation"
                     })
                   ]
@@ -84,7 +84,7 @@ function ConversationList({
             }, conversation.id);
           }),
           !loading && conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground p-4 text-center text-xs",
+            className: "p-4 text-center text-muted-foreground text-xs",
             children: "No conversations yet."
           }) : null
         ]
@@ -94,10 +94,10 @@ function ConversationList({
 }
 
 // src/components/templates/messaging/MessageThread.tsx
-import { useMutation, useQuery as useQuery2 } from "@apollo/client/react";
 import { gql as gql2 } from "@apollo/client";
-import { useEffect, useRef } from "react";
+import { useMutation, useQuery as useQuery2 } from "@apollo/client/react";
 import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useEffect, useRef } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 "use client";
 var MESSAGES_QUERY = gql2`
@@ -144,7 +144,7 @@ function MessageThread({
   }, [messages]);
   if (!conversationId) {
     return /* @__PURE__ */ jsx2("div", {
-      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
+      className: "flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed",
       children: /* @__PURE__ */ jsx2("p", {
         className: "text-muted-foreground text-sm",
         children: "Select a conversation"
@@ -152,12 +152,12 @@ function MessageThread({
     });
   }
   return /* @__PURE__ */ jsx2("div", {
-    className: "border-border bg-card flex flex-1 flex-col rounded-2xl border",
+    className: "flex flex-1 flex-col rounded-2xl border border-border bg-card",
     children: /* @__PURE__ */ jsx2("div", {
       ref: scrollRef,
       className: "flex-1 space-y-3 overflow-y-auto p-4",
       children: loading ? /* @__PURE__ */ jsx2("p", {
-        className: "text-muted-foreground text-center text-sm",
+        className: "text-center text-muted-foreground text-sm",
         children: "Loading\u2026"
       }) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxs2("div", {
         className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
@@ -169,7 +169,7 @@ function MessageThread({
             })
           }),
           /* @__PURE__ */ jsxs2("span", {
-            className: "text-muted-foreground mt-1 text-xs",
+            className: "mt-1 text-muted-foreground text-xs",
             children: [
               message.senderName || message.senderId,
               " \xB7",
@@ -187,11 +187,11 @@ function MessageThread({
 }
 
 // src/components/templates/messaging/MessageComposer.tsx
-import { useState } from "react";
-import { useMutation as useMutation2 } from "@apollo/client/react";
 import { gql as gql3 } from "@apollo/client";
-import { Send } from "lucide-react";
+import { useMutation as useMutation2 } from "@apollo/client/react";
 import { useTemplateRuntime as useTemplateRuntime3 } from "@contractspec/lib.example-shared-ui";
+import { Send } from "lucide-react";
+import { useState } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 "use client";
 var SEND_MESSAGE = gql3`
@@ -234,11 +234,11 @@ function MessageComposer({
   };
   return /* @__PURE__ */ jsxs3("form", {
     onSubmit: handleSubmit,
-    className: "border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3",
+    className: "mt-3 flex items-center gap-2 rounded-2xl border border-border bg-card px-4 py-3",
     children: [
       /* @__PURE__ */ jsx3("input", {
         type: "text",
-        className: "text-foreground flex-1 bg-transparent text-sm outline-none",
+        className: "flex-1 bg-transparent text-foreground text-sm outline-none",
         placeholder: conversationId ? "Type a message\u2026" : "Select a conversation to start",
         disabled: !conversationId || loading,
         value: content,
@@ -260,8 +260,8 @@ function MessageComposer({
 }
 
 // src/components/templates/messaging/MessagingWorkspace.tsx
-import { useState as useState2 } from "react";
 import { registerTemplateComponents } from "@contractspec/lib.example-shared-ui";
+import { useState as useState2 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 "use client";
 function MessagingWorkspace() {

package/dist/components/templates/recipes/LanguageSwitcher.js

@@ -3,7 +3,7 @@
 import { jsx } from "react/jsx-runtime";
 function LanguageSwitcher({ locale, onChange }) {
   return /* @__PURE__ */ jsx("div", {
-    className: "border-border bg-card text-muted-foreground inline-flex rounded-full border p-1 text-xs font-semibold",
+    className: "inline-flex rounded-full border border-border bg-card p-1 font-semibold text-muted-foreground text-xs",
     children: ["EN", "FR"].map((language) => /* @__PURE__ */ jsx("button", {
       type: "button",
       className: `rounded-full px-3 py-1 transition ${locale === language ? "bg-violet-500 text-white" : "hover:text-foreground"}`,

package/dist/components/templates/recipes/RecipeCard.js

@@ -10,14 +10,14 @@ function RecipeCard({
   return /* @__PURE__ */ jsxs("button", {
     type: "button",
     onClick: () => onSelect?.(recipe),
-    className: "border-border bg-card flex flex-col gap-3 rounded-2xl border text-left transition hover:border-violet-400",
+    className: "flex flex-col gap-3 rounded-2xl border border-border bg-card text-left transition hover:border-violet-400",
     children: [
       recipe.heroImageUrl ? /* @__PURE__ */ jsx("img", {
         src: recipe.heroImageUrl,
         alt: recipe.name,
         className: "h-40 w-full rounded-t-2xl object-cover"
       }) : /* @__PURE__ */ jsx("div", {
-        className: "bg-muted h-40 rounded-t-2xl"
+        className: "h-40 rounded-t-2xl bg-muted"
       }),
       /* @__PURE__ */ jsxs("div", {
         className: "space-y-2 p-4",
@@ -26,7 +26,7 @@ function RecipeCard({
             className: "flex items-center justify-between",
             children: [
               /* @__PURE__ */ jsx("p", {
-                className: "text-base font-semibold",
+                className: "font-semibold text-base",
                 children: recipe.name
               }),
               /* @__PURE__ */ jsx("button", {
@@ -43,11 +43,11 @@ function RecipeCard({
             ]
           }),
           /* @__PURE__ */ jsx("p", {
-            className: "text-muted-foreground line-clamp-2 text-sm",
+            className: "line-clamp-2 text-muted-foreground text-sm",
             children: recipe.description
           }),
           /* @__PURE__ */ jsxs("div", {
-            className: "text-muted-foreground flex flex-wrap gap-3 text-xs",
+            className: "flex flex-wrap gap-3 text-muted-foreground text-xs",
             children: [
               recipe.prepTimeMinutes ? /* @__PURE__ */ jsxs("span", {
                 children: [

package/dist/components/templates/recipes/RecipeDetail.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function RecipeDetail({ recipe }) {
   if (!recipe) {
     return /* @__PURE__ */ jsx("div", {
-      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
+      className: "flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed",
       children: /* @__PURE__ */ jsx("p", {
         className: "text-muted-foreground text-sm",
         children: "Select a recipe to view details."
@@ -13,18 +13,18 @@ function RecipeDetail({ recipe }) {
     });
   }
   return /* @__PURE__ */ jsxs("article", {
-    className: "border-border bg-card space-y-4 rounded-2xl border p-6",
+    className: "space-y-4 rounded-2xl border border-border bg-card p-6",
     children: [
       /* @__PURE__ */ jsxs("header", {
         className: "flex flex-wrap items-center gap-3",
         children: [
           /* @__PURE__ */ jsx(BookOpen, {
-            className: "text-muted-foreground h-5 w-5"
+            className: "h-5 w-5 text-muted-foreground"
           }),
           /* @__PURE__ */ jsxs("div", {
             children: [
               /* @__PURE__ */ jsx("h2", {
-                className: "text-xl font-semibold",
+                className: "font-semibold text-xl",
                 children: recipe.name
               }),
               /* @__PURE__ */ jsx("p", {
@@ -38,11 +38,11 @@ function RecipeDetail({ recipe }) {
       /* @__PURE__ */ jsxs("section", {
         children: [
           /* @__PURE__ */ jsx("h3", {
-            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+            className: "font-semibold text-muted-foreground text-sm uppercase tracking-wide",
             children: "Ingredients"
           }),
           /* @__PURE__ */ jsx("ul", {
-            className: "text-foreground mt-2 list-disc space-y-1 pl-6 text-sm",
+            className: "mt-2 list-disc space-y-1 pl-6 text-foreground text-sm",
             children: recipe.ingredients.map((ingredient) => /* @__PURE__ */ jsxs("li", {
               children: [
                 ingredient.name,
@@ -56,11 +56,11 @@ function RecipeDetail({ recipe }) {
       /* @__PURE__ */ jsxs("section", {
         children: [
           /* @__PURE__ */ jsx("h3", {
-            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+            className: "font-semibold text-muted-foreground text-sm uppercase tracking-wide",
             children: "Instructions"
           }),
           /* @__PURE__ */ jsx("ol", {
-            className: "text-foreground mt-2 list-decimal space-y-2 pl-6 text-sm",
+            className: "mt-2 list-decimal space-y-2 pl-6 text-foreground text-sm",
             children: recipe.instructions.map((instruction) => /* @__PURE__ */ jsx("li", {
               children: instruction.content
             }, instruction.id))