@djangocfg/ui-core 1.0.1

package/src/components/item.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Separator } from "./separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn("group/item-group flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-0", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4 ",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

package/src/components/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from "../lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

package/src/components/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src/components/multi-select.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+import * as React from "react"
+import { Check, ChevronsUpDown, X } from "lucide-react"
+import { cn } from "../lib/utils"
+import { Button } from "./button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover"
+import { Badge } from "./badge"
+
+export interface MultiSelectOption {
+  value: string
+  label: string
+  description?: string
+  disabled?: boolean
+}
+
+export interface MultiSelectProps {
+  options: MultiSelectOption[]
+  value?: string[]
+  onChange?: (value: string[]) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  className?: string
+  disabled?: boolean
+  maxDisplay?: number
+}
+
+export function MultiSelect({
+  options,
+  value = [],
+  onChange,
+  placeholder = "Select options...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results found.",
+  className,
+  disabled = false,
+  maxDisplay = 3,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState("")
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (scrollRef.current && open) {
+      const el = scrollRef.current
+      el.style.cssText = `
+        max-height: 300px !important;
+        overflow-y: scroll !important;
+        overflow-x: hidden !important;
+        -webkit-overflow-scrolling: touch !important;
+        overscroll-behavior: contain !important;
+      `
+    }
+  }, [open])
+
+  const selectedOptions = React.useMemo(
+    () => options.filter((option) => value.includes(option.value)),
+    [options, value]
+  )
+
+  const filteredOptions = React.useMemo(() => {
+    if (!search) return options
+    const searchLower = search.toLowerCase()
+    return options.filter(
+      (option) =>
+        option.label.toLowerCase().includes(searchLower) ||
+        option.value.toLowerCase().includes(searchLower) ||
+        option.description?.toLowerCase().includes(searchLower)
+    )
+  }, [options, search])
+
+  const handleSelect = (optionValue: string) => {
+    const newValue = value.includes(optionValue)
+      ? value.filter((v) => v !== optionValue)
+      : [...value, optionValue]
+    onChange?.(newValue)
+  }
+
+  const handleRemove = (optionValue: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    onChange?.(value.filter((v) => v !== optionValue))
+  }
+
+  const displayValue = React.useMemo(() => {
+    if (selectedOptions.length === 0) {
+      return <span className="text-muted-foreground">{placeholder}</span>
+    }
+
+    const displayed = selectedOptions.slice(0, maxDisplay)
+    const remaining = selectedOptions.length - maxDisplay
+
+    return (
+      <div className="flex flex-wrap gap-1">
+        {displayed.map((option) => (
+          <Badge
+            key={option.value}
+            variant="secondary"
+            className="mr-1 text-xs"
+          >
+            {option.label}
+            <button
+              className="ml-1 rounded-full hover:bg-muted-foreground/20"
+              onClick={(e) => handleRemove(option.value, e)}
+              disabled={disabled}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          </Badge>
+        ))}
+        {remaining > 0 && (
+          <Badge variant="outline" className="text-xs">
+            +{remaining} more
+          </Badge>
+        )}
+      </div>
+    )
+  }, [selectedOptions, maxDisplay, placeholder, disabled])
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={(isOpen) => {
+        setOpen(isOpen)
+        if (!isOpen) {
+          setSearch("")
+        }
+      }}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "w-full justify-between min-h-10 h-auto py-2",
+            className
+          )}
+          disabled={disabled}
+        >
+          <div className="flex-1 text-left overflow-hidden">
+            {displayValue}
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
+        <Command shouldFilter={false} className="flex flex-col">
+          <CommandInput
+            placeholder={searchPlaceholder}
+            className="shrink-0"
+            value={search}
+            onValueChange={setSearch}
+          />
+          <div
+            ref={scrollRef}
+            tabIndex={-1}
+            className="overflow-y-scroll overflow-x-hidden"
+            style={{
+              maxHeight: '300px',
+              minHeight: '100px',
+            }}
+            onWheel={(e) => {
+              e.stopPropagation()
+            }}
+          >
+            <CommandList className="!max-h-none !overflow-visible" style={{ pointerEvents: 'auto' }}>
+              {filteredOptions.length === 0 ? (
+                <CommandEmpty>{emptyText}</CommandEmpty>
+              ) : (
+                <CommandGroup className="!overflow-visible" style={{ pointerEvents: 'auto' }}>
+                  {filteredOptions.map((option) => {
+                    const isSelected = value.includes(option.value)
+                    return (
+                      <CommandItem
+                        key={option.value}
+                        value={option.value}
+                        onSelect={() => {
+                          if (!option.disabled) {
+                            handleSelect(option.value)
+                          }
+                        }}
+                        disabled={option.disabled}
+                      >
+                        <Check
+                          className={cn(
+                            "mr-2 h-4 w-4 shrink-0",
+                            isSelected ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                        <div className="flex flex-col flex-1 min-w-0">
+                          <span className="truncate">{option.label}</span>
+                          {option.description && (
+                            <span className="text-xs text-muted-foreground truncate">
+                              {option.description}
+                            </span>
+                          )}
+                        </div>
+                      </CommandItem>
+                    )
+                  })}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </div>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/og-image.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+import { generateOgImageUrl, type OgImageUrlParams, type GenerateOgImageUrlOptions } from '../lib/og-image'
+import { cn } from '../lib/utils'
+
+export interface OgImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /** OG Image parameters */
+  params: OgImageUrlParams
+  /** Generation options (baseUrl, useBase64) */
+  options?: GenerateOgImageUrlOptions
+}
+
+/**
+ * OgImage Component
+ *
+ * Renders an image using the OG Image API with auto-generated URL.
+ *
+ * @example
+ * ```tsx
+ * <OgImage
+ *   params={{ title: 'My Page', description: 'Description' }}
+ *   className="rounded-lg"
+ * />
+ * ```
+ */
+const OgImage = React.forwardRef<HTMLImageElement, OgImageProps>(
+  ({ params, options, className, alt, ...props }, ref) => {
+    const src = React.useMemo(
+      () => generateOgImageUrl(params, options),
+      [params, options]
+    )
+
+    return (
+      <img
+        ref={ref}
+        src={src}
+        alt={alt || params.title}
+        className={cn('w-full', className)}
+        {...props}
+      />
+    )
+  }
+)
+OgImage.displayName = 'OgImage'
+
+export { OgImage }

package/src/components/popover.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "../lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-200 w-72 rounded-sm border bg-popover backdrop-blur-xl p-4 text-popover-foreground shadow-sm outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/components/portal.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+export interface PortalProps {
+  /**
+   * The content to be rendered inside the portal.
+   */
+  children: React.ReactNode;
+  /**
+   * The container element to render the portal into.
+   * Defaults to document.body.
+   * Can be a DOM element, a function returning a DOM element, or a ref.
+   */
+  container?: Element | (() => Element | null) | React.RefObject<Element | null> | null;
+  /**
+   * Disable the portal behavior.
+   * The children stay within the normal DOM hierarchy.
+   * @default false
+   */
+  disablePortal?: boolean;
+}
+
+/**
+ * Portal component renders children into a different part of the DOM.
+ * Similar to MUI Portal - useful for modals, tooltips, floating elements.
+ *
+ * @example
+ * ```tsx
+ * // Render to document.body (default)
+ * <Portal>
+ *   <div className="fixed inset-0 z-50">Modal content</div>
+ * </Portal>
+ *
+ * // Render to custom container
+ * <Portal container={document.getElementById('modal-root')}>
+ *   <div>Custom container content</div>
+ * </Portal>
+ *
+ * // Disable portal (render in place)
+ * <Portal disablePortal>
+ *   <div>Rendered normally</div>
+ * </Portal>
+ *
+ * // With ref container
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * <div ref={containerRef} />
+ * <Portal container={containerRef}>
+ *   <div>Content in ref container</div>
+ * </Portal>
+ * ```
+ */
+export const Portal = React.forwardRef<HTMLDivElement, PortalProps>(
+  function Portal(props, ref) {
+    const { children, container, disablePortal = false } = props;
+    const [mountNode, setMountNode] = React.useState<Element | null>(null);
+
+    React.useEffect(() => {
+      if (!disablePortal) {
+        setMountNode(getContainer(container) || document.body);
+      }
+    }, [container, disablePortal]);
+
+    if (disablePortal) {
+      if (React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<{ ref?: React.Ref<HTMLDivElement> }>, {
+          ref: ref,
+        });
+      }
+      return <>{children}</>;
+    }
+
+    if (mountNode) {
+      return createPortal(children, mountNode);
+    }
+
+    // SSR: return null until mounted
+    return null;
+  }
+);
+
+Portal.displayName = 'Portal';
+
+/**
+ * Resolves the container from various input types
+ */
+function getContainer(
+  container: PortalProps['container']
+): Element | null {
+  if (container === null || container === undefined) {
+    return null;
+  }
+
+  if (typeof container === 'function') {
+    return container();
+  }
+
+  if ('current' in container) {
+    return container.current;
+  }
+
+  return container;
+}
+
+export type { PortalProps as PortalPropsType };