buildgrid-ui 1.1.0-dev.8 → 1.1.0-dev.9

package/dist/components/adaptive-input/index.d.ts

@@ -0,0 +1 @@
+export * from './adaptive-input';

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as React from 'react';
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './alert-dialog';

package/dist/components/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/button/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "xl" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/currency-input/currency-input.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AdaptiveInputProps } from '../adaptative-input';
+import { AdaptiveInputProps } from '../adaptive-input';
 export interface CurrencyInputProps extends AdaptiveInputProps {
     currencySymbol?: string;
     decimalSeparator?: string;

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
-export * from './adaptative-input';
+export * from './adaptive-input';
+export * from './alert-dialog';
 export * from './autocomplete';
 export * from './avatar';
 export * from './badge';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "buildgrid-ui",
-	"version": "1.1.0-dev.8",
+	"version": "1.1.0-dev.9",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -23,6 +23,7 @@
 	"license": "ISC",
 	"description": "",
 	"dependencies": {
+		"@radix-ui/react-alert-dialog": "^1.1.4",
 		"@radix-ui/react-avatar": "^1.1.2",
 		"@radix-ui/react-checkbox": "^1.1.3",
 		"@radix-ui/react-dropdown-menu": "^2.1.4",

package/src/components/{adaptative-input/adaptative-input.stories.tsx → adaptive-input/adaptive-input.stories.tsx}

@@ -2,7 +2,7 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { AdaptiveInput } from './adaptative-input'
+import { AdaptiveInput } from './adaptive-input'
 import { HelpCircle, Phone, User } from 'lucide-react'
 
 const meta: Meta<typeof AdaptiveInput> = {

package/src/components/{adaptative-input/adaptative-input.tsx → adaptive-input/adaptive-input.tsx}

@@ -39,7 +39,7 @@ const AdaptiveInput = React.forwardRef<HTMLInputElement, AdaptiveInputProps>(
 		}
 
 		return (
-			<div className="relative w-fit">
+			<div className="relative w-full">
 				{leftIcon && (
 					<div className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground">
 						{leftIcon}

package/src/components/adaptive-input/index.ts

@@ -0,0 +1 @@
+export * from './adaptive-input'

package/src/components/alert-dialog/alert-dialog.stories.tsx

@@ -0,0 +1,49 @@
+// organize-imports-ignore
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from './alert-dialog'
+import { Button } from '../button'
+
+const meta: Meta<typeof AlertDialog> = {
+	component: AlertDialog,
+}
+
+export default meta
+type Story = StoryObj<typeof AlertDialog>
+
+const Template = () => {
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>
+				<Button>Open dialog</Button>
+			</AlertDialogTrigger>
+			<AlertDialogContent>
+				<AlertDialogHeader>
+					<AlertDialogTitle>Alert title</AlertDialogTitle>
+					<AlertDialogDescription>This is the alert description</AlertDialogDescription>
+				</AlertDialogHeader>
+				<div className="bg-gray-200 p-4 h-20 text-sm">Content goes here</div>
+
+				<AlertDialogFooter>
+					<AlertDialogCancel>Cancel</AlertDialogCancel>
+					<AlertDialogAction>Submit</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	)
+}
+
+export const Default: Story = {
+	render: Template.bind({}),
+	args: {},
+}

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,130 @@
+import { cn } from '@/lib'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
+import * as React from 'react'
+import { buttonVariants } from '../button'
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Overlay
+		className={cn(
+			'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPortal>
+		<AlertDialogOverlay />
+		<AlertDialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+				className,
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
+		{...props}
+	/>
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+const AlertDialogFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+			className,
+		)}
+		{...props}
+	/>
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+const AlertDialogTitle = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Title
+		ref={ref}
+		className={cn('text-lg font-semibold', className)}
+		{...props}
+	/>
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Description
+		ref={ref}
+		className={cn('text-sm text-muted-foreground', className)}
+		{...props}
+	/>
+))
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Action>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Action
+		ref={ref}
+		className={cn(buttonVariants(), className)}
+		{...props}
+	/>
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Cancel
+		ref={ref}
+		className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
+		{...props}
+	/>
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+}

package/src/components/alert-dialog/index.ts

@@ -0,0 +1 @@
+export * from './alert-dialog'

package/src/components/autocomplete/autocomplete.tsx

@@ -2,7 +2,7 @@ import { Search } from 'lucide-react'
 import { useState } from 'react'
 
 import { cn } from '@/lib'
-import { AdaptiveInput } from '../adaptative-input'
+import { AdaptiveInput } from '../adaptive-input'
 import { Popover, PopoverContent, PopoverTrigger } from '../popover'
 
 interface Option {

package/src/components/currency-input/currency-input.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'
-import { AdaptiveInput, AdaptiveInputProps } from '../adaptative-input'
+import { AdaptiveInput, AdaptiveInputProps } from '../adaptive-input'
 
 export interface CurrencyInputProps extends AdaptiveInputProps {
 	currencySymbol?: string

package/src/components/index.ts

@@ -1,4 +1,5 @@
-export * from './adaptative-input'
+export * from './adaptive-input'
+export * from './alert-dialog'
 export * from './autocomplete'
 export * from './avatar'
 export * from './badge'

package/dist/components/adaptative-input/index.d.ts

@@ -1 +0,0 @@
-export * from './adaptative-input';

package/src/components/adaptative-input/index.ts

@@ -1 +0,0 @@
-export * from './adaptative-input'