@exegia/corpora-ui 0.10.0 → 0.11.0

package/src/components/composed/social-providers.tsx

@@ -1,46 +1,99 @@
-"use client";
+"use client"
 
 import {
   RiAppleFill,
   RiGithubFill,
   RiGoogleFill,
   RiTwitterXFill,
-} from "@remixicon/react";
-import type * as React from "react";
+} from "@remixicon/react"
+import type * as React from "react"
 
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
 
-export type SocialProvider = "google" | "apple" | "github" | "x";
+export type SocialProvider = "google" | "apple" | "github" | "x"
 
-/** Label + brand mark per provider, shared with the auth blocks. */
+/** Google's four-color "G" — the only provider whose mark isn't monochrome. */
+function GoogleColorIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" {...props}>
+      <path
+        fill="#4285F4"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.76h3.56c2.09-1.92 3.28-4.74 3.28-8.09Z"
+      />
+      <path
+        fill="#34A853"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.56-2.76c-.99.66-2.25 1.05-3.72 1.05-2.86 0-5.28-1.93-6.15-4.53H2.18v2.85A11 11 0 0 0 12 23Z"
+      />
+      <path
+        fill="#FBBC05"
+        d="M5.85 14.1A6.6 6.6 0 0 1 5.5 12c0-.73.13-1.44.35-2.1V7.05H2.18a11 11 0 0 0 0 9.9l3.67-2.85Z"
+      />
+      <path
+        fill="#EA4335"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A11 11 0 0 0 2.18 7.05L5.85 9.9C6.72 7.3 9.14 5.38 12 5.38Z"
+      />
+    </svg>
+  )
+}
+
+/**
+ * Label + brand mark per provider, shared with the auth blocks. `Icon` is the
+ * monochrome mark that inherits the current text color; `BrandIcon` +
+ * `brandClassName` render it in the provider's own colors.
+ */
 export const SOCIAL_PROVIDERS: Record<
   SocialProvider,
-  { label: string; Icon: React.ComponentType<{ className?: string }> }
+  {
+    label: string
+    Icon: React.ComponentType<{ className?: string }>
+    BrandIcon: React.ComponentType<{ className?: string }>
+    brandClassName: string
+  }
 > = {
-  google: { label: "Google", Icon: RiGoogleFill },
-  apple: { label: "Apple", Icon: RiAppleFill },
-  github: { label: "GitHub", Icon: RiGithubFill },
-  x: { label: "X", Icon: RiTwitterXFill },
-};
+  google: {
+    label: "Google",
+    Icon: RiGoogleFill,
+    BrandIcon: GoogleColorIcon,
+    brandClassName: "",
+  },
+  apple: {
+    label: "Apple",
+    Icon: RiAppleFill,
+    BrandIcon: RiAppleFill,
+    brandClassName: "text-foreground",
+  },
+  github: {
+    label: "GitHub",
+    Icon: RiGithubFill,
+    BrandIcon: RiGithubFill,
+    brandClassName: "text-foreground",
+  },
+  x: {
+    label: "X",
+    Icon: RiTwitterXFill,
+    BrandIcon: RiTwitterXFill,
+    brandClassName: "text-foreground",
+  },
+}
 
 const ACTION_LABELS = {
   login: "Login with",
   signup: "Sign up with",
   continue: "Continue with",
-} as const;
+} as const
 
 export interface SocialProvidersProps {
-  providers?: SocialProvider[];
+  providers?: SocialProvider[]
   /** Verb used in the stacked layout labels. */
-  action?: keyof typeof ACTION_LABELS;
+  action?: keyof typeof ACTION_LABELS
   /** "stack" = full-width labeled buttons; "row" = icon-only buttons. */
-  layout?: "stack" | "row";
+  layout?: "stack" | "row"
   /** Shows the matching button in its loading state and disables the rest. */
-  loadingProvider?: SocialProvider | null;
-  disabled?: boolean;
-  onSelect?: (provider: SocialProvider) => void;
-  className?: string;
+  loadingProvider?: SocialProvider | null
+  disabled?: boolean
+  onSelect?: (provider: SocialProvider) => void
+  className?: string
 }
 
 /** Social auth buttons (coss particle p-button-38). UI only — wire onSelect. */
@@ -53,18 +106,18 @@ export function SocialProviders({
   onSelect,
   className,
 }: SocialProvidersProps) {
-  const row = layout === "row";
+  const row = layout === "row"
 
   return (
     <div
       className={cn(
         "flex w-full gap-2",
         row ? "flex-row justify-center" : "flex-col",
-        className,
+        className
       )}
     >
       {providers.map((provider) => {
-        const { label, Icon } = SOCIAL_PROVIDERS[provider];
+        const { label, Icon } = SOCIAL_PROVIDERS[provider]
         return (
           <Button
             key={provider}
@@ -73,7 +126,10 @@ export function SocialProviders({
             className={row ? undefined : "w-full"}
             aria-label={`${ACTION_LABELS[action]} ${label}`}
             loading={loadingProvider === provider}
-            disabled={disabled || (loadingProvider !== null && loadingProvider !== provider)}
+            disabled={
+              disabled ||
+              (loadingProvider !== null && loadingProvider !== provider)
+            }
             onClick={() => onSelect?.(provider)}
           >
             <Icon aria-hidden="true" />
@@ -83,8 +139,8 @@ export function SocialProviders({
               </span>
             )}
           </Button>
-        );
+        )
       })}
     </div>
-  );
+  )
 }

package/src/components/docs/component-preview.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 
+import { BrowserFrame } from "@/components/beste/piece/browser-frame"
 import type { RegistryEntry } from "@/registry"
 
 /**
@@ -11,18 +12,18 @@ export function ComponentPreview({ entry }: { entry: RegistryEntry }) {
   const Demo = entry.preview
 
   return (
-    <div className="flex min-h-48 items-center justify-center rounded-lg border p-8">
+    <BrowserFrame title={entry.name} titleStyle="hidden">
       {Demo ? (
-        <React.Suspense
-          fallback={<p className="text-sm text-muted-foreground">Loading…</p>}
-        >
-          <Demo />
-        </React.Suspense>
-      ) : (
-        <p className="text-sm text-muted-foreground">
-          Preview coming soon ({entry.status}).
-        </p>
-      )}
-    </div>
+          <React.Suspense
+            fallback={<p className="text-sm text-muted-foreground">Loading…</p>}
+          >
+            <Demo />
+          </React.Suspense>
+        ) : (
+          <p className="text-sm text-muted-foreground">
+            Preview coming soon ({entry.status}).
+          </p>
+        )}
+    </BrowserFrame>
   )
 }

package/src/components/docs/demo-controls.tsx

@@ -1,8 +1,17 @@
 import type * as React from "react"
 
+import {
+  Select,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+ SelectContent} from "@/components/ui/select"
+import { Field, FieldLabel } from "@/components/ui/field"
+import { Card , CardContent} from "@/components/ui/card";
+
 /**
- * Lightweight playground controls for registry demos. Plain native elements
- * on purpose — docs-only, never part of the published library.
+ * Lightweight playground controls for registry demos — docs-only, never
+ * part of the published library.
  */
 
 export function DemoSelect<T extends string>({
@@ -11,26 +20,33 @@ export function DemoSelect<T extends string>({
   options,
   onChange,
 }: {
-  label: string
+  label?: string
   value: T
   options: readonly T[]
   onChange: (value: T) => void
 }) {
+  const items = options.map((option) => ({ label: option, value: option }))
+
   return (
-    <label className="flex flex-col gap-1 text-xs text-muted-foreground">
-      {label}
-      <select
+    <Field className="flex flex-col gap-1 text-xs text-muted-foreground">
+      {label && <FieldLabel>{label}</FieldLabel>}
+      <Select
+        items={items}
+        onValueChange={(next) => onChange(next as T)}
         value={value}
-        onChange={(event) => onChange(event.target.value as T)}
-        className="h-7 rounded-md border bg-background px-2 text-xs text-foreground"
       >
-        {options.map((option) => (
-          <option key={option} value={option}>
-            {option}
-          </option>
-        ))}
-      </select>
-    </label>
+        <SelectTrigger className="h-7 min-w-0 text-xs capitalize rounded-sm " size="sm">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+            {items.map((item) => (
+              <SelectItem key={item.value} value={item.value}>
+                {item.label}
+              </SelectItem>
+            ))}
+        </SelectContent>
+      </Select>
+    </Field>
   )
 }
 
@@ -96,23 +112,23 @@ export function DemoStage({
   children,
   canvasClassName,
 }: {
-  controls: React.ReactNode
+  controls?: React.ReactNode
   children: React.ReactNode
   canvasClassName?: string
 }) {
   return (
-    <div className="flex w-full flex-col items-center gap-6">
+    <div className="relative flex w-full flex-col items-center">
+      {controls && <Card className="absolute top-3 right-3 z-20 rounded-xl shadow-lg">
+        <CardContent className="flex flex-row items-center gap-x-2">{controls}</CardContent>
+      </Card>}
       <div
         className={
           canvasClassName ??
-          "flex min-h-28 w-full items-center justify-center rounded-lg"
+          "flex min-h-32 w-full items-center justify-center rounded-lg"
         }
       >
         {children}
       </div>
-      <div className="flex flex-wrap items-end justify-center gap-x-4 gap-y-3">
-        {controls}
-      </div>
     </div>
   )
 }