buildgrid-ui 1.1.0-dev.5 → 1.1.0-dev.7

package/dist/components/index.d.ts

@@ -7,5 +7,8 @@ export * from './card';
 export * from './checkbox';
 export * from './dropdown-menu';
 export * from './input';
+export * from './password-input';
 export * from './popover';
+export * from './progress';
 export * from './skeleton';
+export * from './switch';

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

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

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

@@ -0,0 +1,16 @@
+import { InputHTMLAttributes } from 'react';
+interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    showStrengthMeter?: boolean;
+    strengthLabels?: {
+        veryWeak: string;
+        weak: string;
+        medium: string;
+        strong: string;
+        veryStrong: string;
+    };
+    showPasswordLabel?: string;
+    hidePasswordLabel?: string;
+    strengthTitle?: string;
+}
+export declare function PasswordInput(props: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/progress/index.d.ts

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

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,4 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Progress };

package/dist/components/switch/index.d.ts

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

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,4 @@
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as React from 'react';
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Switch };

package/dist/index.d.ts

@@ -1,12 +1,2 @@
-export * from './components/adaptative-input';
-export * from './components/autocomplete';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/button';
-export * from './components/card';
-export * from './components/checkbox';
-export * from './components/dropdown-menu';
-export * from './components/input';
-export * from './components/popover';
-export * from './components/skeleton';
-export * from './lib/utils/cn';
+export * from './components';
+export * from './lib';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "buildgrid-ui",
-	"version": "1.1.0-dev.5",
+	"version": "1.1.0-dev.7",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -27,7 +27,9 @@
 		"@radix-ui/react-checkbox": "^1.1.3",
 		"@radix-ui/react-dropdown-menu": "^2.1.4",
 		"@radix-ui/react-popover": "^1.1.4",
+		"@radix-ui/react-progress": "^1.1.1",
 		"@radix-ui/react-slot": "^1.1.1",
+		"@radix-ui/react-switch": "^1.1.2",
 		"@shadcn/ui": "^0.0.4",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",

package/src/components/adaptative-input/adaptative-input.stories.tsx

@@ -6,7 +6,7 @@ import { AdaptiveInput } from './adaptative-input'
 import { HelpCircle, Phone, User } from 'lucide-react'
 
 const meta: Meta<typeof AdaptiveInput> = {
-	title: 'Components/Input/AdaptiveInput',
+	title: 'Components/input/adaptiveInput',
 	component: AdaptiveInput,
 }
 
@@ -15,12 +15,13 @@ type Story = StoryObj<typeof AdaptiveInput>
 
 const Template = () => {
 	return (
-		<AdaptiveInput
-			className="w-64"
-			leftIcon={<Phone className="w-4 h-4" />}
-			rightIcon={<HelpCircle className="w-4 h-4" />}
-			mask="+00 0000-0000"
-		/>
+		<div className="w-64">
+			<AdaptiveInput
+				leftIcon={<Phone className="w-4 h-4" />}
+				rightIcon={<HelpCircle className="w-4 h-4" />}
+				mask="+00 0000-0000"
+			/>
+		</div>
 	)
 }
 

package/src/components/autocomplete/autocomplete.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { Autocomplete } from './autocomplete'
 
 const meta: Meta<typeof Autocomplete> = {
-	title: 'Components/Input/Autocomplete',
+	title: 'Components/input/autocomplete',
 	component: Autocomplete,
 }
 
@@ -67,15 +67,14 @@ const options = [
 const Template = () => {
 	const [value, setValue] = React.useState('')
 	return (
-		<>
+		<div className="w-80">
 			<Autocomplete
 				value={value}
 				onChange={(value) => setValue(value)}
-				className="w-80"
 				options={options.map((option) => ({ value: option, label: option }))}
 			/>
 			<p className="mt-4">Selected value: {value}</p>
-		</>
+		</div>
 	)
 }
 

package/src/components/autocomplete/autocomplete.tsx

@@ -91,7 +91,7 @@ export function Autocomplete(props: AutoCompleteProps) {
 	return (
 		<Popover open={isFocused}>
 			<PopoverTrigger asChild>
-				<div className="relative w-fit">
+				<div className="relative w-full">
 					<AdaptiveInput
 						type="text"
 						placeholder={placeholder}

package/src/components/index.ts

@@ -7,5 +7,8 @@ export * from './card'
 export * from './checkbox'
 export * from './dropdown-menu'
 export * from './input'
+export * from './password-input'
 export * from './popover'
+export * from './progress'
 export * from './skeleton'
+export * from './switch'

package/src/components/input/input.stories.tsx

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { Input } from './input'
 
 const meta: Meta<typeof Input> = {
-	title: 'Components/Input/Simple',
+	title: 'Components/input/simple',
 	component: Input,
 }
 

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

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

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

@@ -0,0 +1,26 @@
+// organize-imports-ignore
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { PasswordInput } from './password-input'
+
+const meta: Meta<typeof PasswordInput> = {
+	title: 'Components/input/password',
+	component: PasswordInput,
+}
+
+export default meta
+type Story = StoryObj<typeof PasswordInput>
+
+const Template = () => {
+	return (
+		<div className="w-96">
+			<PasswordInput />
+		</div>
+	)
+}
+
+export const Default: Story = {
+	render: Template.bind({}),
+	args: {},
+}

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

@@ -0,0 +1,98 @@
+import { Eye, EyeOff } from 'lucide-react'
+import React, { InputHTMLAttributes, useState } from 'react'
+import { Button } from '../button'
+import { Input } from '../input'
+import { Progress } from '../progress'
+
+interface PasswordInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+	showStrengthMeter?: boolean
+	strengthLabels?: {
+		veryWeak: string
+		weak: string
+		medium: string
+		strong: string
+		veryStrong: string
+	}
+	showPasswordLabel?: string
+	hidePasswordLabel?: string
+	strengthTitle?: string
+}
+
+export function PasswordInput(props: PasswordInputProps) {
+	const {
+		showStrengthMeter = true,
+		className,
+		strengthLabels = {
+			veryWeak: 'Very weak',
+			weak: 'Weak',
+			medium: 'Medium',
+			strong: 'Strong',
+			veryStrong: 'Very strong',
+		},
+		showPasswordLabel = 'Show password',
+		hidePasswordLabel = 'Hide password',
+		strengthTitle = 'Password strength',
+		...rest
+	} = props
+
+	const [password, setPassword] = useState('')
+	const [showPassword, setShowPassword] = useState(false)
+
+	const calculateStrength = (password: string): number => {
+		let strength = 0
+		if (password.length >= 8) strength += 25
+		if (password.match(/[a-z]/)) strength += 25
+		if (password.match(/[A-Z]/)) strength += 25
+		if (password.match(/[0-9]/)) strength += 25
+		return strength
+	}
+
+	const getStrengthLabel = (strength: number): string => {
+		if (strength === 0) return strengthLabels.veryWeak
+		if (strength <= 25) return strengthLabels.weak
+		if (strength <= 50) return strengthLabels.medium
+		if (strength <= 75) return strengthLabels.strong
+		return strengthLabels.veryStrong
+	}
+
+	const strength = calculateStrength(password)
+	const strengthLabel = getStrengthLabel(strength)
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setPassword(e.target.value)
+		props.onChange?.(e)
+	}
+
+	return (
+		<div className="w-full space-y-4">
+			<div className="relative">
+				<Input
+					{...rest}
+					type={showPassword ? 'text' : 'password'}
+					value={password}
+					onChange={handleChange}
+					className={`pr-10 ${className || ''}`}
+				/>
+				<Button
+					type="button"
+					variant="ghost"
+					size="icon"
+					className="absolute right-0 top-0 h-full"
+					onClick={() => setShowPassword(!showPassword)}
+					aria-label={showPassword ? hidePasswordLabel : showPasswordLabel}
+				>
+					{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+				</Button>
+			</div>
+			{showStrengthMeter && (
+				<div className="space-y-2">
+					<div className="flex justify-between text-sm">
+						<span>{strengthTitle}:</span>
+						<span>{strengthLabel}</span>
+					</div>
+					<Progress value={strength} className="h-2" />
+				</div>
+			)}
+		</div>
+	)
+}

package/src/components/progress/index.ts

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

package/src/components/progress/progress.stories.tsx

@@ -0,0 +1,21 @@
+// organize-imports-ignore
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Progress } from './progress'
+
+const meta: Meta<typeof Progress> = {
+	component: Progress,
+}
+
+export default meta
+type Story = StoryObj<typeof Progress>
+
+const Template = () => {
+	return <Progress value={90} />
+}
+
+export const Default: Story = {
+	render: Template.bind({}),
+	args: {},
+}

package/src/components/progress/progress.tsx

@@ -0,0 +1,26 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils/cn'
+
+const Progress = React.forwardRef<
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(
+			'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+			className,
+		)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className="h-full w-full flex-1 bg-primary transition-all"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package/src/components/switch/index.ts

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

package/src/components/switch/switch.stories.tsx

@@ -0,0 +1,21 @@
+// organize-imports-ignore
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Switch } from './switch'
+
+const meta: Meta<typeof Switch> = {
+	component: Switch,
+}
+
+export default meta
+type Story = StoryObj<typeof Switch>
+
+const Template = () => {
+	return <Switch />
+}
+
+export const Default: Story = {
+	render: Template.bind({}),
+	args: {},
+}

package/src/components/switch/switch.tsx

@@ -0,0 +1,26 @@
+import { cn } from '@/lib'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import * as React from 'react'
+
+const Switch = React.forwardRef<
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+	<SwitchPrimitives.Root
+		className={cn(
+			'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+			)}
+		/>
+	</SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/src/index.ts

@@ -1,12 +1,2 @@
-export * from './components/adaptative-input'
-export * from './components/autocomplete'
-export * from './components/avatar'
-export * from './components/badge'
-export * from './components/button'
-export * from './components/card'
-export * from './components/checkbox'
-export * from './components/dropdown-menu'
-export * from './components/input'
-export * from './components/popover'
-export * from './components/skeleton'
-export * from './lib/utils/cn'
+export * from './components'
+export * from './lib'