@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/components/country-dropdown.tsx

@@ -0,0 +1,188 @@
+"use client";
+import React, { forwardRef, useCallback, useEffect, useState } from "react";
+
+// shadcn
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "../shadcn/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "../shadcn/popover";
+
+// utils
+import { cn } from "cn";
+
+// assets
+import { CheckIcon, ChevronDown, Globe } from "lucide-react";
+import { CircleFlag } from "react-circle-flags";
+
+// data
+import { countries } from "country-data-list";
+
+// Country interface
+export interface Country {
+  alpha2: string;
+  alpha3: string;
+  countryCallingCodes: string[];
+  currencies: string[];
+  emoji?: string;
+  ioc: string;
+  languages: string[];
+  name: string;
+  status: string;
+}
+
+// Dropdown props
+interface CountryDropdownProps {
+  options?: Country[];
+  onChange?: (country: Country) => void;
+  defaultValue?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  slim?: boolean;
+}
+
+const CountryDropdownComponent = (
+  {
+    options = countries.all.filter(
+      (country: Country) =>
+        country.emoji && country.status !== "deleted" && country.ioc !== "PRK"
+    ),
+    onChange,
+    defaultValue,
+    disabled = false,
+    placeholder = "Select a country",
+    slim = false,
+    ...props
+  }: CountryDropdownProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) => {
+  const [open, setOpen] = useState(false);
+  const [selectedCountry, setSelectedCountry] = useState<Country | undefined>(
+    undefined
+  );
+
+  useEffect(() => {
+    if (defaultValue) {
+      // Match either alpha2 or alpha3 code
+      const initialCountry = options.find(
+        (country) => country.alpha2 === defaultValue || country.alpha3 === defaultValue
+      );
+      if (initialCountry) {
+        setSelectedCountry(initialCountry);
+      } else {
+        // Reset selected country if defaultValue is not found
+        setSelectedCountry(undefined);
+      }
+    } else {
+      // Reset selected country if defaultValue is undefined or null
+      setSelectedCountry(undefined);
+    }
+  }, [defaultValue, options]);
+
+  const handleSelect = useCallback(
+    (country: Country) => {
+      console.log("🌍 CountryDropdown value: ", country);
+      setSelectedCountry(country);
+      onChange?.(country);
+      setOpen(false);
+    },
+    [onChange]
+  );
+
+  const triggerClasses = cn(
+    "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 cursor-pointer",
+    slim === true && "w-20"
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        ref={ref}
+        className={triggerClasses}
+        disabled={disabled}
+        {...props}
+      >
+        {selectedCountry ? (
+          <div className="flex items-center flex-grow w-0 gap-2 overflow-hidden">
+            <div className="inline-flex items-center justify-center w-5 h-5 shrink-0 overflow-hidden rounded-full">
+              <CircleFlag
+                countryCode={selectedCountry.alpha2.toLowerCase()}
+                height={20}
+              />
+            </div>
+            {slim === false && (
+              <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+                {selectedCountry.name}
+              </span>
+            )}
+          </div>
+        ) : (
+          <span className="text-muted-foreground/30">
+            {slim === false ? (
+              placeholder || setSelectedCountry.name
+            ) : (
+              <Globe size={20} />
+            )}
+          </span>
+        )}
+        <ChevronDown size={16} />
+      </PopoverTrigger>
+      <PopoverContent
+        side="bottom"
+        className="min-w-[--radix-popper-anchor-width] p-0"
+      >
+        <Command className="w-full max-h-[200px] sm:max-h-[270px]">
+          <CommandList>
+            <div className="sticky top-0 z-10 bg-popover">
+              <CommandInput placeholder="Search country..." />
+            </div>
+            <CommandEmpty>No country found.</CommandEmpty>
+            <CommandGroup>
+              {options
+                .filter((x) => x.name)
+                .map((option, key: number) => (
+                  <CommandItem
+                    className="flex items-center w-full gap-2"
+                    key={key}
+                    onSelect={() => handleSelect(option)}
+                  >
+                    <div className="flex flex-grow w-0 space-x-2 overflow-hidden">
+                      <div className="inline-flex items-center justify-center w-5 h-5 shrink-0 overflow-hidden rounded-full">
+                        <CircleFlag
+                          countryCode={option.alpha2.toLowerCase()}
+                          height={20}
+                        />
+                      </div>
+                      <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+                        {option.name}
+                      </span>
+                    </div>
+                    <CheckIcon
+                      className={cn(
+                        "ml-auto h-4 w-4 shrink-0",
+                        option.name === selectedCountry?.name
+                          ? "opacity-100"
+                          : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+CountryDropdownComponent.displayName = "CountryDropdownComponent";
+
+export const CountryDropdown = forwardRef(CountryDropdownComponent);

package/src/components/glow-loader-fast.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import LogoBase from "./logo-base";
+
+interface GlowLoaderFastProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  strokeWidth?: number;
+}
+
+/**
+ * Fast animated logo loader (1s animation cycle).
+ * For contexts where speed/urgency is implied.
+ */
+const GlowLoaderFast = ({ width = 240, height = 240, className, strokeWidth = 3 }: GlowLoaderFastProps) => {
+  return (
+    <LogoBase
+      width={width}
+      height={height}
+      className={className}
+      strokeWidth={strokeWidth}
+      animated={true}
+      animationDuration={1}
+      animationStagger={0.01}
+      colored={true}
+      withGlow={true}
+    />
+  );
+};
+
+export default GlowLoaderFast;

package/src/components/glow-loader-mono.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import LogoBase from "./logo-base";
+
+interface GlowLoaderMonoProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  strokeWidth?: number;
+}
+
+/**
+ * Monochrome animated logo loader (uses muted-foreground).
+ * Apply opacity via className if needed.
+ */
+const GlowLoaderMono = ({ width = 240, height = 240, className, strokeWidth }: GlowLoaderMonoProps) => {
+  return (
+    <LogoBase
+      width={width}
+      height={height}
+      className={className}
+      strokeWidth={strokeWidth}
+      animated={true}
+      animationDuration={3}
+      animationStagger={0.05}
+      colored={false}
+      monoColor="hsl(var(--muted-foreground))"
+      withGlow={false}
+    />
+  );
+};
+
+export default GlowLoaderMono;

package/src/components/glow-loader-sm-fast.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import LogoBase from "./logo-base";
+
+interface GlowLoaderSmFastProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  strokeWidth?: number;
+}
+
+/**
+ * Small fast animated logo loader (60px, 1s animation).
+ * For inline loading indicators that need urgency.
+ */
+const GlowLoaderSmFast = ({ width = 60, height = 60, className, strokeWidth = 1 }: GlowLoaderSmFastProps) => {
+  return (
+    <LogoBase
+      width={width}
+      height={height}
+      className={className}
+      strokeWidth={strokeWidth}
+      animated={true}
+      animationDuration={1}
+      animationStagger={0.05}
+      colored={true}
+      withGlow={true}
+    />
+  );
+};
+
+export default GlowLoaderSmFast;

package/src/components/glow-loader-sm-mono.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import LogoBase from "./logo-base";
+
+interface GlowLoaderSmMonoProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  strokeWidth?: number;
+}
+
+/**
+ * Small monochrome animated logo loader (60px, thicker strokes).
+ * Apply opacity via className if needed.
+ */
+const GlowLoaderSmMono = ({ width = 60, height = 60, className, strokeWidth = 16 }: GlowLoaderSmMonoProps) => {
+  return (
+    <LogoBase
+      width={width}
+      height={height}
+      className={className}
+      strokeWidth={strokeWidth}
+      animated={true}
+      animationDuration={3}
+      animationStagger={0.05}
+      colored={false}
+      monoColor="hsl(var(--muted-foreground))"
+      withGlow={false}
+      label="loading"
+    />
+  );
+};
+
+export default GlowLoaderSmMono;

package/src/components/glow-loader-sm.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import LogoBase from "./logo-base";
+
+interface GlowLoaderSmProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  strokeWidth?: number;
+}
+
+/**
+ * Small animated logo loader (60px, 16px strokes, 3s animation).
+ * For inline loading indicators.
+ */
+const GlowLoaderSm = ({ width = 60, height = 60, className, strokeWidth = 2 }: GlowLoaderSmProps) => {
+  return (
+    <LogoBase
+      width={width}
+      height={height}
+      className={className}
+      strokeWidth={strokeWidth}
+      animated={true}
+      animationDuration={3}
+      animationStagger={0.05}
+      colored={true}
+      withGlow={true}
+    />
+  );
+};
+
+export default GlowLoaderSm;

package/src/components/glow-loader.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import LogoBase from "./logo-base";
+
+interface GlowLoaderProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  strokeWidth?: number;
+}
+
+/**
+ * Standard animated logo loader (240px, 3s animation cycle).
+ * For full-page loading states.
+ */
+const GlowLoader = ({ width = 240, height = 240, className, strokeWidth = 1 }: GlowLoaderProps) => {
+  return (
+    <LogoBase
+      width={width}
+      height={height}
+      className={className}
+      strokeWidth={strokeWidth}
+      animated={true}
+      animationDuration={3}
+      animationStagger={0.05}
+      colored={true}
+      withGlow={true}
+    />
+  );
+};
+
+export default GlowLoader;

package/src/components/glow-logo.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import LogoBase from "./logo-base";
+
+interface GlowLogoProps {
+  width?: number;
+  height?: number;
+  className?: string;
+  strokeWidth?: number;
+}
+
+/**
+ * Slow ambient animated logo (8s animation cycle).
+ * For decorative/branding displays where loading isn't implied.
+ */
+const GlowLogo = ({ width = 240, height = 240, className, strokeWidth = 1 }: GlowLogoProps) => {
+  return (
+    <LogoBase
+      width={width}
+      height={height}
+      className={className}
+      strokeWidth={strokeWidth}
+      animated={true}
+      animationDuration={8}
+      animationStagger={0.05}
+      colored={true}
+      withGlow={true}
+    />
+  );
+};
+
+export default GlowLogo;

package/src/components/gradient.tsx

@@ -0,0 +1,80 @@
+import { cn } from "cn";
+
+export type GradientVariant =
+  | "sunset"
+  | "poppy"
+  | "rosebud"
+  | "sunshine"
+  | "gold"
+  | "twilight"
+  | "powder"
+  | "holly"
+  | "northern-lights"
+  | "raw-green"
+  | "lime"
+  | "nemesia"
+  | "snowflake"
+  | "blue-bird"
+  | "blueprint"
+  | "salvia"
+  | "heartsease"
+  | "amaranthus"
+  | "candy"
+  | "verbena"
+  | "clematis"
+  | "hibiscus"
+  | "clear-night"
+  | "clay"
+  | "soil"
+  | "silver"
+  | "fir-tree"
+  | "metal"
+  | "darkness";
+
+interface GradientProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: GradientVariant;
+}
+const gradientVariants: Record<GradientVariant, string> = {
+  sunset: "bg-gradient-to-r from-red-400 to-orange-400",
+  poppy: "bg-gradient-to-r from-rose-300 to-red-400",
+  rosebud: "bg-gradient-to-r from-pink-400 to-rose-400",
+  sunshine: "bg-gradient-to-r from-amber-100 to-yellow-300",
+  gold: "bg-gradient-to-r from-amber-100 to-yellow-400",
+  twilight: "bg-gradient-to-r from-amber-400 to-pink-400",
+  powder: "bg-gradient-to-r from-violet-100 to-pink-100",
+  holly: "bg-gradient-to-r from-blue-100 to-cyan-100",
+  "northern-lights": "bg-gradient-to-r from-teal-100 to-teal-400",
+  "raw-green": "bg-gradient-to-r from-lime-300 to-lime-400",
+  lime: "bg-gradient-to-r from-teal-300 to-yellow-100",
+  nemesia: "bg-gradient-to-r from-emerald-300 to-cyan-300",
+  snowflake: "bg-gradient-to-r from-indigo-300 to-cyan-300",
+  "blue-bird": "bg-gradient-to-r from-cyan-400 to-blue-400",
+  blueprint: "bg-gradient-to-r from-indigo-400 to-blue-400",
+  salvia: "bg-gradient-to-r from-blue-500 to-violet-500",
+  heartsease: "bg-gradient-to-r from-fuchsia-500 to-pink-500",
+  amaranthus: "bg-gradient-to-r from-fuchsia-500 to-purple-500",
+  candy: "bg-gradient-to-r from-fuchsia-400 to-pink-400",
+  verbena: "bg-gradient-to-r from-violet-400 to-purple-400",
+  clematis: "bg-gradient-to-r from-violet-500 to-indigo-500",
+  hibiscus: "bg-gradient-to-r from-purple-400 to-purple-800",
+  "clear-night": "bg-gradient-to-r from-blue-700 to-indigo-800",
+  clay: "bg-gradient-to-r from-neutral-200 to-stone-300",
+  soil: "bg-gradient-to-r from-stone-400 to-stone-600",
+  silver: "bg-gradient-to-r from-slate-200 to-slate-400",
+  "fir-tree": "bg-gradient-to-r from-emerald-400 to-emerald-800",
+  metal: "bg-gradient-to-r from-slate-400 to-slate-700",
+  darkness: "bg-gradient-to-r from-slate-800 to-slate-600",
+};
+
+export function Gradient({
+  variant = "salvia",
+  className,
+  ...props
+}: GradientProps) {
+  return (
+    <div
+      className={cn(gradientVariants[variant], className)}
+      {...props}
+    />
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,45 @@
+// Custom inference UI components
+// Re-exported from @inference/common/ui/infsh
+
+export * from "./audio-player"
+export * from "./circuit"
+export * from "./pastel-gradient"
+export * from "./pixel-symmetry"
+export * from "./code"
+export * from "./copy-button"
+export { default as CookieConsent } from "./cookie-consent"
+export * from "./country-dropdown"
+export * from "./gradient"
+export * from "./inline-sidebar"
+export * from "./input-color"
+export * from "./logo-color"
+export * from "./logo-full"
+export * from "./logo-svg"
+export * from "./menu-navigation"
+export * from "./multi-select"
+export * from "./scroll-more"
+export * from "./shimmering-text"
+export * from "./tooltip-button"
+export * from "./tree-view"
+export * from "./waveform"
+export * from "./zoomable-image"
+
+// Theme (sidebar-based - requires SidebarProvider)
+export * from "./theme-switcher"
+export * from "./theme-switcher-sidebar"
+// Theme (simple - no sidebar required)
+export * from "./theme-switcher-simple"
+
+// Loaders
+export { default as GlowLoader } from "./glow-loader"
+export { default as GlowLoaderSm } from "./glow-loader-sm"
+export { default as GlowLogo } from "./glow-logo"
+export { default as GlowLoaderFast } from "./glow-loader-fast"
+export { default as GlowLoaderMono } from "./glow-loader-mono"
+export { default as GlowLoaderSmFast } from "./glow-loader-sm-fast"
+export { default as GlowLoaderSmMono } from "./glow-loader-sm-mono"
+export { default as UnglowLoader } from "./unglow-loader"
+export * from "./select"
+export * from "./sidebar-light"
+export * from "./toggle-group"
+export * from "./button"