@c-rex/ui 0.1.17 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@c-rex/ui",
-    "version": "0.1.17",
+    "version": "0.1.19",
     "type": "module",
     "files": [
         "src"
@@ -50,6 +50,10 @@
             "types": "./src/input.tsx",
             "import": "./src/input.tsx"
         },
+        "./input-group": {
+            "types": "./src/input-group.tsx",
+            "import": "./src/input-group.tsx"
+        },
         "./popover": {
             "types": "./src/popover.tsx",
             "import": "./src/popover.tsx"
@@ -186,6 +190,7 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "lucide-react": "^0.486.0",
+        "radix-ui": "^1.4.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "sonner": "^2.0.5",

package/src/input-group.tsx

@@ -0,0 +1,189 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@c-rex/utils"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Textarea } from "./textarea"
+
+const inputGroupVariants = cva(
+    "group/input-group relative flex w-full items-center rounded-md transition-[color,box-shadow] outline-none h-9 min-w-0 has-[>textarea]:h-auto",
+    {
+        variants: {
+            variant: {
+                default:
+                    "border border-input bg-white",
+                embedded:
+                    "border-0 bg-transparent shadow-none",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+        },
+    }
+)
+
+function InputGroup({
+    className,
+    variant,
+    ...props
+}: React.ComponentProps<"div"> &
+    VariantProps<typeof inputGroupVariants>) {
+    return (
+        <div
+            data-slot="input-group"
+            role="group"
+            className={cn(
+                inputGroupVariants({ variant }),
+
+                // Variants based on alignment.
+                "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+                "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+                "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+                "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+                // Focus state.
+                "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+
+                // Error state.
+                "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+const inputGroupAddonVariants = cva(
+    "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+    {
+        variants: {
+            align: {
+                "inline-start":
+                    "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+                "inline-end":
+                    "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+                "block-start":
+                    "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+                "block-end":
+                    "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+            },
+        },
+        defaultVariants: {
+            align: "inline-start",
+        },
+    }
+)
+
+function InputGroupAddon({
+    className,
+    align = "inline-start",
+    ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+    return (
+        <div
+            role="group"
+            data-slot="input-group-addon"
+            data-align={align}
+            className={cn(inputGroupAddonVariants({ align }), className)}
+            onClick={(e) => {
+                if ((e.target as HTMLElement).closest("button")) {
+                    return
+                }
+                e.currentTarget.parentElement?.querySelector("input")?.focus()
+            }}
+            {...props}
+        />
+    )
+}
+
+const inputGroupButtonVariants = cva(
+    "text-sm shadow-none flex gap-2 items-center",
+    {
+        variants: {
+            size: {
+                xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+                sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+                "icon-xs":
+                    "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+                "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+            },
+        },
+        defaultVariants: {
+            size: "xs",
+        },
+    }
+)
+
+function InputGroupButton({
+    className,
+    type = "button",
+    variant = "ghost",
+    size = "xs",
+    ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+    VariantProps<typeof inputGroupButtonVariants>) {
+    return (
+        <Button
+            type={type}
+            data-size={size}
+            variant={variant}
+            className={cn(inputGroupButtonVariants({ size }), className)}
+            {...props}
+        />
+    )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+    return (
+        <span
+            className={cn(
+                "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function InputGroupInput({
+    className,
+    ...props
+}: React.ComponentProps<typeof Input>) {
+    return (
+        <Input
+            data-slot="input-group-control"
+            className={cn(
+                "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+function InputGroupTextarea({
+    className,
+    ...props
+}: React.ComponentProps<"textarea">) {
+    return (
+        <Textarea
+            data-slot="input-group-control"
+            className={cn(
+                "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+                className
+            )}
+            {...props}
+        />
+    )
+}
+
+export {
+    InputGroup,
+    InputGroupAddon,
+    InputGroupButton,
+    InputGroupText,
+    InputGroupInput,
+    InputGroupTextarea,
+}

package/src/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@c-rex/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }