@stampui/blocks 1.1.0 → 2.0.0

package/src/components/core/combobox.tsx

@@ -57,7 +57,7 @@ export function Combobox({
           className={cx(
             "flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm outline-none",
             "hover:border-border-strong transition-colors text-left",
-            "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+            "focus-visible:ring-1 focus-visible:ring-border-strong ",
             "disabled:cursor-not-allowed disabled:opacity-50",
             !selected && "text-muted-foreground",
             className

package/src/components/core/command.tsx

@@ -11,12 +11,15 @@ export interface CommandProps {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   children: React.ReactNode
+  className?: string
 }
 
-export function Command({ open, onOpenChange, children }: CommandProps) {
+export function Command({ open, onOpenChange, children, className }: CommandProps) {
   return (
     <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
-      {children}
+      <div className={className}>
+        {children}
+      </div>
     </RadixDialog.Root>
   )
 }
@@ -88,9 +91,9 @@ export function CommandList({ children, className }: { children: React.ReactNode
 
 // ── Empty ─────────────────────────────────────────────────────────────────────
 
-export function CommandEmpty({ children }: { children?: React.ReactNode }) {
+export function CommandEmpty({ children, className }: { children?: React.ReactNode; className?: string }) {
   return (
-    <div className="px-4 py-8 text-center text-sm text-muted-foreground">
+    <div className={cx("px-4 py-8 text-center text-sm text-muted-foreground", className)}>
       {children ?? "No results found."}
     </div>
   )

package/src/components/core/date-picker.tsx

@@ -43,7 +43,7 @@ export function DatePicker({
           className={cx(
             "flex h-9 w-full items-center justify-start gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm outline-none",
             "hover:border-border-strong transition-colors text-left",
-            "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+            "focus-visible:ring-1 focus-visible:ring-border-strong ",
             "disabled:cursor-not-allowed disabled:opacity-50",
             !selected && "text-muted-foreground",
             className

package/src/components/core/dialog.tsx

@@ -46,7 +46,7 @@ export const DialogContent = React.forwardRef<
     >
       {children}
       {!hideClose && (
-        <RadixDialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background">
+        <RadixDialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground outline-none focus-visible:ring-1 focus-visible:ring-border-strong ">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </RadixDialog.Close>

package/src/components/core/drawer.tsx

@@ -46,7 +46,7 @@ export const DrawerContent = React.forwardRef<
     >
       <div className="mx-auto mt-3 mb-2 h-1.5 w-10 shrink-0 rounded-full bg-border" />
       {children}
-      <RadixDialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background">
+      <RadixDialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground outline-none focus-visible:ring-1 focus-visible:ring-border-strong ">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </RadixDialog.Close>

package/src/components/core/input.tsx

@@ -27,6 +27,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
+        autoComplete="off"
+        spellCheck="false"
         className={cx(inputStyles({ variant }), className)}
         ref={ref}
         {...props}

package/src/components/core/label.tsx

@@ -11,7 +11,7 @@ export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
       <label
         ref={ref}
         className={cx(
-          "text-sm font-medium leading-none text-foreground",
+          "block text-sm font-medium leading-none text-foreground",
           "peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
           className,
         )}

package/src/components/core/multi-select.tsx

@@ -67,7 +67,7 @@ export function MultiSelect({
           className={cx(
             "flex min-h-9 w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface-2 px-3 py-1.5 text-sm outline-none",
             "hover:border-border-strong transition-colors text-left",
-            "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+            "focus-visible:ring-1 focus-visible:ring-border-strong ",
             "disabled:cursor-not-allowed disabled:opacity-50",
             className
           )}

package/src/components/core/native-select.tsx

@@ -12,7 +12,7 @@ export const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProp
         className={cx(
           "h-9 w-full appearance-none rounded-lg border border-border bg-surface-2 px-3 pr-8 py-2 text-sm text-foreground outline-none",
           "hover:border-border-strong transition-colors",
-          "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          "focus-visible:ring-1 focus-visible:ring-border-strong ",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}

package/src/components/core/password-input.tsx

@@ -48,6 +48,9 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputPro
             type={visible ? "text" : "password"}
             value={controlled ? value : internalValue}
             onChange={handleChange}
+            autoComplete={props.autoComplete || "new-password"}
+            data-1p-ignore="true"
+            data-lpignore="true"
             className={cx(
               "flex w-full rounded-lg border border-border bg-input px-3 py-2 pr-10 text-sm text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:border-border-strong disabled:cursor-not-allowed disabled:opacity-50",
               className

package/src/components/core/radio-group.tsx

@@ -8,7 +8,7 @@ import { cx } from "@/lib/cx"
 const radioStyles = cva(
   [
     "peer aspect-square shrink-0 rounded-full border transition-all outline-none",
-    "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "focus-visible:ring-1 focus-visible:ring-border-strong ",
     "disabled:cursor-not-allowed disabled:opacity-40",
     "border-border hover:border-border-strong",
     "data-[state=checked]:border-foreground",

package/src/components/core/resizable.tsx

@@ -215,7 +215,7 @@ export function ResizableHandle({
       className={cx(
         "relative flex shrink-0 items-center justify-center bg-border transition-colors select-none",
         "hover:bg-border-strong active:bg-border-strong",
-        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong ",
         direction === "horizontal"
           ? "w-px h-full cursor-col-resize"
           : "h-px w-full cursor-row-resize",

package/src/components/core/select.tsx

@@ -19,7 +19,7 @@ export const SelectTrigger = React.forwardRef<
       "flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-border bg-surface-2 px-3 py-2 text-sm outline-none",
       "placeholder:text-muted-foreground",
       "hover:border-border-strong transition-colors",
-      "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      "focus-visible:border-border-strong focus-visible:bg-surface-3",
       "data-[placeholder]:text-muted-foreground",
       "disabled:cursor-not-allowed disabled:opacity-50",
       className

package/src/components/core/sheet.tsx

@@ -77,7 +77,7 @@ export const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <RadixDialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background">
+      <RadixDialog.Close className="absolute right-4 top-4 rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground outline-none focus-visible:ring-1 focus-visible:ring-border-strong ">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </RadixDialog.Close>

package/src/components/core/slider.tsx

@@ -46,7 +46,7 @@ const thumbStyles = cva(
   [
     "block rounded-full bg-foreground ring-offset-background",
     "transition-all duration-100",
-    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-strong ",
     "disabled:pointer-events-none disabled:opacity-50",
     "hover:scale-110",
   ],

package/src/components/core/status-pulse.tsx

@@ -10,6 +10,8 @@ const dotStyles = cva("relative inline-flex rounded-full shrink-0", {
       processing: "bg-yellow-400",
       error: "bg-red-500",
       warning: "bg-orange-400",
+      unread: "bg-primary",
+      success: "bg-green-500",
     },
     size: {
       sm: "h-1.5 w-1.5",
@@ -28,6 +30,8 @@ const pingStyles = cva("absolute inline-flex h-full w-full rounded-full opacity-
       processing: "bg-yellow-400",
       error: "bg-red-500",
       warning: "bg-orange-400",
+      unread: "hidden",
+      success: "bg-green-500",
     },
   },
   defaultVariants: { status: "online" },
@@ -39,6 +43,8 @@ const labels: Record<string, string> = {
   processing: "Processing",
   error: "Error",
   warning: "Warning",
+  unread: "Unread",
+  success: "Success",
 }
 
 export interface StatusPulseProps

package/src/components/core/switch.tsx

@@ -9,7 +9,7 @@ const switchStyles = cva(
   [
     "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
     "transition-all duration-200 ease-out outline-none",
-    "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "focus-visible:ring-1 focus-visible:ring-border-strong ",
     "disabled:cursor-not-allowed disabled:opacity-40",
     "data-[state=unchecked]:bg-surface-3",
   ],

package/src/components/core/table.tsx

@@ -1,12 +1,17 @@
 import * as React from "react"
 import { cx } from "@/lib/cx"
 
+export interface TableProps extends React.ComponentPropsWithoutRef<"table"> {
+  containerClassName?: string
+}
+
 export function Table({
   className,
+  containerClassName,
   ...props
-}: React.ComponentPropsWithoutRef<"table">) {
+}: TableProps) {
   return (
-    <div className="w-full overflow-x-auto rounded-xl border border-border">
+    <div className={cx("w-full overflow-x-auto rounded-xl border border-border", containerClassName)}>
       <table
         className={cx("w-full text-sm", className)}
         {...props}

package/src/components/core/tabs.tsx

@@ -46,7 +46,7 @@ export const TabsContent = React.forwardRef<
   <RadixTabs.Content
     ref={ref}
     className={cx(
-      "mt-4 outline-none focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+      "mt-4 outline-none focus-visible:ring-1 focus-visible:ring-border-strong ",
       className
     )}
     {...props}

package/src/components/core/toggle.tsx

@@ -9,7 +9,7 @@ const toggleVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium",
     "transition-all duration-[150ms] ease-out outline-none",
-    "focus-visible:ring-1 focus-visible:ring-border-strong focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "focus-visible:ring-1 focus-visible:ring-border-strong ",
     "disabled:pointer-events-none disabled:opacity-40",
     "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   ],

package/src/components/core/typing-indicator.tsx

@@ -2,50 +2,64 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { cx } from "@/lib/cx"
 
-const wrapperStyles = cva(
+const typingIndicatorVariants = cva(
   "inline-flex items-center gap-1",
   {
     variants: {
       variant: {
-        bubble: "rounded-xl bg-surface-2 border border-border px-3 py-2",
-        bare: "",
+        bare: "bg-transparent p-0",
+        bubble: "bg-surface-2 border border-border px-3 py-2 rounded-2xl rounded-bl-sm",
       },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "bubble",
+      size: "md",
     },
-    defaultVariants: { variant: "bubble" },
   }
 )
 
-const dotClass = "rounded-full bg-muted-foreground animate-bounce"
-
-const dotSizes = { sm: "h-1 w-1", md: "h-1.5 w-1.5", lg: "h-2 w-2" }
-
 export interface TypingIndicatorProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof wrapperStyles> {
-  size?: "sm" | "md" | "lg"
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof typingIndicatorVariants> {
   label?: string
 }
 
-export function TypingIndicator({ variant, size = "md", label = "Typing…", className, ...props }: TypingIndicatorProps) {
+export function TypingIndicator({
+  className,
+  variant,
+  size,
+  label = "Typing…",
+  ...props
+}: TypingIndicatorProps) {
+  const dotSize = size === "sm" ? "h-1 w-1" : size === "lg" ? "h-2 w-2" : "h-1.5 w-1.5"
+
   return (
-    <div
+    <span
       role="status"
       aria-label={label}
-      className={cx(wrapperStyles({ variant }), className)}
+      className={cx(typingIndicatorVariants({ variant, size }), className)}
       {...props}
     >
-      <span
-        className={cx(dotClass, dotSizes[size])}
-        style={{ animationDelay: "0ms", animationDuration: "900ms" }}
-      />
-      <span
-        className={cx(dotClass, dotSizes[size])}
-        style={{ animationDelay: "160ms", animationDuration: "900ms" }}
-      />
-      <span
-        className={cx(dotClass, dotSizes[size])}
-        style={{ animationDelay: "320ms", animationDuration: "900ms" }}
-      />
-    </div>
+      <span className="flex items-center gap-1 h-3">
+        <span 
+          className={cx("bg-foreground/70 rounded-full animate-bounce shrink-0", dotSize)} 
+          style={{ animationDelay: "0ms" }} 
+        />
+        <span 
+          className={cx("bg-foreground/70 rounded-full animate-bounce shrink-0", dotSize)} 
+          style={{ animationDelay: "150ms" }} 
+        />
+        <span 
+          className={cx("bg-foreground/70 rounded-full animate-bounce shrink-0", dotSize)} 
+          style={{ animationDelay: "300ms" }} 
+        />
+      </span>
+      {label && <span className="sr-only">{label}</span>}
+    </span>
   )
 }