buildgrid-ui 1.1.0-alpha.6 → 1.1.0-dev.10

package/src/components/autocomplete/autocomplete.tsx

@@ -1,136 +0,0 @@
-import { Search } from 'lucide-react'
-import { useState } from 'react'
-
-import { cn } from '@/lib'
-import { AdaptiveInput } from '../adaptative-input'
-import { Popover, PopoverContent, PopoverTrigger } from '../popover'
-
-interface Option {
-	value: string
-	label: string
-}
-
-interface AutoCompleteProps {
-	value?: string
-	onChange?: (value: string) => void
-	options: Option[]
-	className?: string
-	placeholder?: string
-	emptyMessage?: string
-}
-
-export function Autocomplete(props: AutoCompleteProps) {
-	const {
-		value = '',
-		onChange,
-		options: staticOptions,
-		className,
-		placeholder = 'Search...',
-		emptyMessage = 'Nothing found',
-	} = props
-
-	const [query, setQuery] = useState(value)
-	const [suggestions, setSuggestions] = useState<Option[]>(staticOptions)
-	const [selectedIndex, setSelectedIndex] = useState(-1)
-	const [isFocused, setIsFocused] = useState(false)
-
-	const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const newValue = e.target.value
-		setQuery(newValue)
-		onChange?.(newValue)
-		setSelectedIndex(-1)
-		setIsFocused(true)
-
-		if (newValue.trim() === '') {
-			setSuggestions(staticOptions)
-		} else {
-			setSuggestions(
-				staticOptions.filter((option) =>
-					option.label.toLowerCase().includes(newValue.toLowerCase()),
-				),
-			)
-		}
-	}
-
-	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-		if (e.key === 'ArrowDown') {
-			e.preventDefault()
-			setSelectedIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : prev))
-		} else if (e.key === 'ArrowUp') {
-			e.preventDefault()
-			setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1))
-		} else if (e.key === 'Enter' && selectedIndex >= 0) {
-			const selectedOption = suggestions[selectedIndex]
-			setQuery(selectedOption.label)
-			onChange?.(selectedOption.value)
-			setSuggestions([])
-			setSelectedIndex(-1)
-			setIsFocused(false)
-		} else if (e.key === 'Escape') {
-			setSuggestions([])
-			setSelectedIndex(-1)
-		}
-	}
-
-	const handleSuggestionClick = (option: Option) => {
-		setIsFocused(false)
-		setQuery(option.label)
-		onChange?.(option.value)
-		setSuggestions(staticOptions)
-		setSelectedIndex(-1)
-	}
-
-	const handleFocus = () => {
-		setIsFocused(true)
-	}
-
-	const handleBlur = () => {
-		setIsFocused(false)
-	}
-
-	return (
-		<Popover open={isFocused}>
-			<PopoverTrigger asChild>
-				<div className="relative w-fit">
-					<AdaptiveInput
-						type="text"
-						placeholder={placeholder}
-						value={query}
-						onChange={handleInputChange}
-						onKeyDown={handleKeyDown}
-						onClick={handleFocus}
-						onFocus={handleFocus}
-						onBlur={handleBlur}
-						className={cn('pr-10', className)}
-						aria-label="Search field"
-						aria-autocomplete="list"
-						aria-controls="suggestions-list"
-						aria-expanded={suggestions.length > 0}
-						leftIcon={<Search className="w-4 h-4" />}
-					/>
-				</div>
-			</PopoverTrigger>
-			<PopoverContent className="p-0 w-[var(--radix-popover-trigger-width)] max-h-96 overflow-y-auto">
-				{suggestions.length > 0 ? (
-					<ul id="suggestions-list" role="listbox">
-						{suggestions.map((option, index) => (
-							<li
-								key={option.value}
-								className={`px-4 py-2 cursor-pointer hover:bg-muted ${
-									index === selectedIndex ? 'bg-muted' : ''
-								}`}
-								onClick={() => handleSuggestionClick(option)}
-								role="option"
-								aria-selected={index === selectedIndex}
-							>
-								{option.label}
-							</li>
-						))}
-					</ul>
-				) : (
-					<span className="px-4 py-2 block">{emptyMessage}</span>
-				)}
-			</PopoverContent>
-		</Popover>
-	)
-}

package/src/components/autocomplete/index.ts

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

package/src/components/avatar/avatar.stories.tsx

@@ -1,29 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Avatar, AvatarFallback, AvatarImage } from './avatar'
-
-const meta: Meta<typeof Avatar> = {
-	component: Avatar,
-}
-
-export default meta
-type Story = StoryObj<typeof Avatar>
-
-const Template = () => {
-	return (
-		<Avatar className="w-24 h-24">
-			<AvatarImage
-				src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Profile_avatar_placeholder_large.png?20150327203541"
-				alt="User avatar"
-			/>
-			<AvatarFallback>NS</AvatarFallback>
-		</Avatar>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

package/src/components/avatar/avatar.tsx

@@ -1,48 +0,0 @@
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils/cn'
-
-const Avatar = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Root
-		ref={ref}
-		className={cn(
-			'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
-			className,
-		)}
-		{...props}
-	/>
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Image>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Image
-		ref={ref}
-		className={cn('aspect-square h-full w-full', className)}
-		{...props}
-	/>
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-	React.ElementRef<typeof AvatarPrimitive.Fallback>,
-	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-	<AvatarPrimitive.Fallback
-		ref={ref}
-		className={cn(
-			'flex h-full w-full items-center justify-center rounded-full bg-muted',
-			className,
-		)}
-		{...props}
-	/>
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarFallback, AvatarImage }

package/src/components/avatar/index.ts

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

package/src/components/badge/badge.stories.tsx

@@ -1,30 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Badge, BadgeProps, badgeVariants } from './badge'
-
-const meta: Meta<typeof Badge> = {
-	component: Badge,
-}
-
-export default meta
-type Story = StoryObj<typeof Badge>
-
-const Template = (args: BadgeProps) => {
-	const variants = ['default', 'secondary', 'destructive', 'outline']
-	return (
-		<div className="flex gap-2">
-			{Object.values(variants).map((variant) => (
-				<Badge {...args} variant={variant as BadgeProps['variant']}>
-					{variant}
-				</Badge>
-			))}
-		</div>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

package/src/components/badge/badge.tsx

@@ -1,34 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '@/lib'
-
-const badgeVariants = cva(
-	'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-	{
-		variants: {
-			variant: {
-				default:
-					'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-				secondary:
-					'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				destructive:
-					'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
-				outline: 'text-foreground',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-		},
-	},
-)
-
-export interface BadgeProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-	return <div className={cn(badgeVariants({ variant }), className)} {...props} />
-}
-
-export { Badge, badgeVariants }

package/src/components/badge/index.ts

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

package/src/components/button/button.stories.tsx

@@ -1,62 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Button, ButtonProps } from './button'
-
-const meta: Meta<typeof Button> = {
-	component: Button,
-}
-
-export default meta
-type Story = StoryObj<typeof Button>
-
-const variants: Array<ButtonProps['variant']> = [
-	'default',
-	'secondary',
-	'destructive',
-	'outline',
-	'ghost',
-	'link',
-]
-
-const Template = (args: ButtonProps) => {
-	return (
-		<div className="flex gap-2 flex-wrap">
-			{Object.values(variants).map((variant) => (
-				<Button
-					{...args}
-					variant={variant as ButtonProps['variant']}
-					className="capitalize"
-				>
-					{variant}
-				</Button>
-			))}
-		</div>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}
-
-const TemplateIsLoading = () => {
-	return (
-		<div className="flex gap-2 flex-wrap">
-			{Object.values(variants).map((variant) => (
-				<Button
-					isLoading
-					variant={variant as ButtonProps['variant']}
-					className="capitalize"
-				>
-					{variant}
-				</Button>
-			))}
-		</div>
-	)
-}
-
-export const Loading: Story = {
-	render: TemplateIsLoading.bind({}),
-	args: {},
-}

package/src/components/button/button.tsx

@@ -1,82 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-import { cn } from '../../lib/utils/cn'
-
-const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-	{
-		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-				destructive:
-					'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-				outline:
-					'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-				secondary:
-					'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground',
-				link: 'text-primary underline-offset-4 hover:underline',
-			},
-			size: {
-				default: 'h-9 px-4 py-2',
-				sm: 'h-8 rounded-md px-3 text-xs',
-				lg: 'h-10 rounded-md px-8',
-				xl: 'h-12 rounded-md px-10 text-xl',
-				icon: 'h-9 w-9',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default',
-		},
-	},
-)
-
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	isLoading?: boolean
-	asChild?: boolean
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, isLoading = false, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : 'button'
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
-				{...props}
-				disabled={isLoading || props.disabled}
-			>
-				{isLoading && (
-					<svg
-						className="animate-spin -ml-1 h-5 w-5"
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
-					>
-						<circle
-							className="opacity-25"
-							cx="12"
-							cy="12"
-							r="10"
-							stroke="currentColor"
-							strokeWidth="4"
-						/>
-						<path
-							className="opacity-75"
-							fill="currentColor"
-							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-						/>
-					</svg>
-				)}
-				{props.children}
-			</Comp>
-		)
-	},
-)
-Button.displayName = 'Button'
-
-export { Button, buttonVariants }

package/src/components/button/index.ts

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

package/src/components/card/card.stories.tsx

@@ -1,41 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from './Card'
-import { Button } from '../button/button'
-
-const meta: Meta<typeof Card> = {
-	component: Card,
-}
-
-export default meta
-type Story = StoryObj<typeof Button>
-
-const Template = () => {
-	return (
-		<Card className="w-96">
-			<CardHeader>
-				<CardTitle>Title</CardTitle>
-				<CardDescription>Description</CardDescription>
-			</CardHeader>
-			<CardContent className="px-0 pt-2">
-				<div className="bg-gray-200 w-full h-40 p-6">Content goes here</div>
-			</CardContent>
-			<CardFooter>
-				<Button variant="outline">Close</Button>
-			</CardFooter>
-		</Card>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

package/src/components/card/card.tsx

@@ -1,61 +0,0 @@
-import * as React from 'react'
-
-import { cn } from '@/lib/utils/cn'
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div
-			ref={ref}
-			className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
-			{...props}
-		/>
-	),
-)
-Card.displayName = 'Card'
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div
-			ref={ref}
-			className={cn('flex flex-col space-y-1.5 p-6', className)}
-			{...props}
-		/>
-	),
-)
-CardHeader.displayName = 'CardHeader'
-
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div
-			ref={ref}
-			className={cn('font-semibold leading-none tracking-tight pb-4', className)}
-			{...props}
-		/>
-	),
-)
-CardTitle.displayName = 'CardTitle'
-
-const CardDescription = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-))
-CardDescription.displayName = 'CardDescription'
-
-const CardContent = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn('p-6 py-0', className)} {...props} />
-))
-CardContent.displayName = 'CardContent'
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn('flex items-center p-6 pt-6', className)} {...props} />
-	),
-)
-CardFooter.displayName = 'CardFooter'
-
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

package/src/components/card/index.ts

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

package/src/components/checkbox/checkbox.stories.tsx

@@ -1,36 +0,0 @@
-// organize-imports-ignore
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { Checkbox } from './checkbox'
-
-const meta: Meta<typeof Checkbox> = {
-	component: Checkbox,
-}
-
-export default meta
-type Story = StoryObj<typeof Checkbox>
-
-const Template = () => {
-	return (
-		<div className="items-top flex space-x-2">
-			<Checkbox id="terms1" />
-			<div className="grid gap-1.5 leading-none">
-				<label
-					htmlFor="terms1"
-					className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-				>
-					Accept terms and conditions
-				</label>
-				<p className="text-sm text-muted-foreground">
-					You agree to our Terms of Service and Privacy Policy.
-				</p>
-			</div>
-		</div>
-	)
-}
-
-export const Default: Story = {
-	render: Template.bind({}),
-	args: {},
-}

package/src/components/checkbox/checkbox.tsx

@@ -1,28 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Check } from 'lucide-react'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils/cn'
-
-const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-	<CheckboxPrimitive.Root
-		ref={ref}
-		className={cn(
-			'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-			className,
-		)}
-		{...props}
-	>
-		<CheckboxPrimitive.Indicator
-			className={cn('flex items-center justify-center text-current')}
-		>
-			<Check className="h-4 w-4" />
-		</CheckboxPrimitive.Indicator>
-	</CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
-export { Checkbox }

package/src/components/checkbox/index.ts

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