@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.4

package/lib/components/shared/accessibility/LightHouse-components/MultiSelectLightHouse.tsx

@@ -0,0 +1,308 @@
+import {
+    MultiSelect,
+    MultiSelectVariant,
+    MultiSelectMenuSize,
+    MultiSelectSelectionTagType,
+} from '../../../MultiSelect'
+import { User, Settings } from 'lucide-react'
+
+const MultiSelectLightHouse = () => {
+    const basicItems = [
+        {
+            items: [
+                { label: 'Option 1', value: 'option1' },
+                { label: 'Option 2', value: 'option2' },
+                { label: 'Option 3', value: 'option3' },
+            ],
+        },
+    ]
+
+    const groupedItems = [
+        {
+            groupLabel: 'Group 1',
+            items: [
+                { label: 'Option 1', value: 'option1' },
+                { label: 'Option 2', value: 'option2' },
+            ],
+        },
+        {
+            groupLabel: 'Group 2',
+            items: [
+                { label: 'Option 3', value: 'option3' },
+                { label: 'Option 4', value: 'option4' },
+            ],
+        },
+    ]
+
+    return (
+        <>
+            {/* Basic MultiSelect - Container */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="Basic MultiSelect"
+                placeholder="Select options"
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* Basic MultiSelect - No Container */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="No Container MultiSelect"
+                placeholder="Select options"
+                variant={MultiSelectVariant.NO_CONTAINER}
+            />
+
+            {/* With Selected Values */}
+            <MultiSelect
+                selectedValues={['option1', 'option2']}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="With Selections"
+                placeholder="Select options"
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* Small Size */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="Small Size"
+                placeholder="Select options"
+                size={MultiSelectMenuSize.SMALL}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* Medium Size */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="Medium Size"
+                placeholder="Select options"
+                size={MultiSelectMenuSize.MEDIUM}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* Large Size */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="Large Size"
+                placeholder="Select options"
+                size={MultiSelectMenuSize.LARGE}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* Disabled */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="Disabled"
+                placeholder="Select options"
+                disabled={true}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* Required */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="Required"
+                placeholder="Select options"
+                required={true}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* With Error */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="With Error"
+                placeholder="Select options"
+                error={true}
+                errorMessage="Please select at least one option"
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* With Hint Text */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="With Hint"
+                placeholder="Select options"
+                hintText="Select one or more options"
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* With Sublabel */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="With Sublabel"
+                sublabel="Additional information"
+                placeholder="Select options"
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* With Slot */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="With Slot"
+                placeholder="Select options"
+                slot={<User size={16} />}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* With Grouped Items */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={groupedItems}
+                label="Grouped Items"
+                placeholder="Select options"
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* With Search Disabled */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="No Search"
+                placeholder="Select options"
+                enableSearch={false}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* With Select All */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="With Select All"
+                placeholder="Select options"
+                enableSelectAll={true}
+                selectAllText="Select All Options"
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* Complex Example */}
+            <MultiSelect
+                selectedValues={['option1', 'option2']}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={groupedItems}
+                label="Complex MultiSelect"
+                sublabel="Select multiple options"
+                placeholder="Choose options"
+                hintText="You can select multiple items"
+                required={true}
+                slot={<Settings size={16} />}
+                size={MultiSelectMenuSize.MEDIUM}
+                enableSearch={true}
+                searchPlaceholder="Search options..."
+                enableSelectAll={true}
+                maxSelections={5}
+                variant={MultiSelectVariant.CONTAINER}
+                selectionTagType={MultiSelectSelectionTagType.COUNT}
+            />
+
+            {/* With Max Selections */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="Max 2 Selections"
+                placeholder="Select options"
+                maxSelections={2}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* Full Width */}
+            <MultiSelect
+                selectedValues={[]}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="Full Width"
+                placeholder="Select options"
+                fullWidth={true}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+
+            {/* With Action Buttons */}
+            <MultiSelect
+                selectedValues={['option1']}
+                onChange={(value) => {
+                    console.log('Value changed:', value)
+                }}
+                items={basicItems}
+                label="With Actions"
+                placeholder="Select options"
+                showActionButtons={true}
+                primaryAction={{
+                    text: 'Apply',
+                    onClick: (values) => {
+                        console.log('Apply clicked:', values)
+                    },
+                }}
+                secondaryAction={{
+                    text: 'Cancel',
+                    onClick: () => {
+                        console.log('Cancel clicked')
+                    },
+                }}
+                variant={MultiSelectVariant.CONTAINER}
+            />
+        </>
+    )
+}
+
+export default MultiSelectLightHouse

package/lib/components/shared/accessibility/LightHouse-components/MultiValueInputLightHouse.tsx

@@ -0,0 +1,144 @@
+import { useState } from 'react'
+import { MultiValueInput } from '../../../Inputs'
+import { TextInputSize } from '../../../Inputs/TextInput/types'
+
+const MultiValueInputLightHouse = () => {
+    const [basicTags, setBasicTags] = useState<string[]>([])
+    const [requiredTags, setRequiredTags] = useState<string[]>([])
+    const [errorTags, setErrorTags] = useState<string[]>([])
+    const [disabledTags] = useState(['readonly', 'tags'])
+
+    return (
+        <div className="flex flex-col gap-4">
+            {/* Basic MultiValueInput */}
+            <MultiValueInput
+                label="Keywords"
+                placeholder="Add keyword..."
+                value=""
+                onChange={() => {}}
+                tags={basicTags}
+                onTagAdd={(tag) => setBasicTags((prev) => [...prev, tag])}
+                onTagRemove={(tag) =>
+                    setBasicTags((prev) => prev.filter((t) => t !== tag))
+                }
+            />
+
+            {/* With sublabel and hint */}
+            <MultiValueInput
+                label="Project Technologies"
+                sublabel="Add technologies used in this project"
+                hintText="Press Enter to add a technology"
+                placeholder="e.g., React, TypeScript..."
+                value=""
+                onChange={() => {}}
+                tags={basicTags}
+                onTagAdd={(tag) => setBasicTags((prev) => [...prev, tag])}
+                onTagRemove={(tag) =>
+                    setBasicTags((prev) => prev.filter((t) => t !== tag))
+                }
+            />
+
+            {/* Required field */}
+            <MultiValueInput
+                label="Required Tags"
+                placeholder="This field is required..."
+                value=""
+                onChange={() => {}}
+                tags={requiredTags}
+                onTagAdd={(tag) => setRequiredTags((prev) => [...prev, tag])}
+                onTagRemove={(tag) =>
+                    setRequiredTags((prev) => prev.filter((t) => t !== tag))
+                }
+                required
+                hintText="This field is required"
+            />
+
+            {/* Error state */}
+            <MultiValueInput
+                label="Categories (Error Example)"
+                placeholder="Add category..."
+                value=""
+                onChange={() => {}}
+                tags={errorTags}
+                onTagAdd={(tag) => setErrorTags((prev) => [...prev, tag])}
+                onTagRemove={(tag) =>
+                    setErrorTags((prev) => prev.filter((t) => t !== tag))
+                }
+                error={errorTags.length === 0}
+                errorMessage="At least one category is required"
+            />
+
+            {/* Disabled state */}
+            <MultiValueInput
+                label="Disabled MultiValueInput"
+                placeholder="This input is disabled"
+                value=""
+                onChange={() => {}}
+                tags={disabledTags}
+                onTagAdd={() => {}}
+                onTagRemove={() => {}}
+                disabled
+                hintText="This field is disabled"
+            />
+
+            {/* Different sizes */}
+            <MultiValueInput
+                label="Small Size"
+                placeholder="Add tag..."
+                value=""
+                onChange={() => {}}
+                tags={[]}
+                onTagAdd={() => {}}
+                onTagRemove={() => {}}
+                size={TextInputSize.SMALL}
+            />
+            <MultiValueInput
+                label="Medium Size"
+                placeholder="Add tag..."
+                value=""
+                onChange={() => {}}
+                tags={[]}
+                onTagAdd={() => {}}
+                onTagRemove={() => {}}
+                size={TextInputSize.MEDIUM}
+            />
+            <MultiValueInput
+                label="Large Size"
+                placeholder="Add tag..."
+                value=""
+                onChange={() => {}}
+                tags={[]}
+                onTagAdd={() => {}}
+                onTagRemove={() => {}}
+                size={TextInputSize.LARGE}
+            />
+
+            {/* With multiple tags */}
+            <MultiValueInput
+                label="Skills"
+                placeholder="Add skill..."
+                value=""
+                onChange={() => {}}
+                tags={['react', 'typescript', 'javascript', 'css', 'html']}
+                onTagAdd={() => {}}
+                onTagRemove={() => {}}
+            />
+
+            {/* With help icon */}
+            <MultiValueInput
+                label="Keywords"
+                helpIconHintText="Keywords help categorize your content and improve searchability"
+                placeholder="Add keyword..."
+                value=""
+                onChange={() => {}}
+                tags={basicTags}
+                onTagAdd={(tag) => setBasicTags((prev) => [...prev, tag])}
+                onTagRemove={(tag) =>
+                    setBasicTags((prev) => prev.filter((t) => t !== tag))
+                }
+            />
+        </div>
+    )
+}
+
+export default MultiValueInputLightHouse

package/lib/components/shared/accessibility/LightHouse-components/NumberInputLightHouse.tsx

@@ -0,0 +1,106 @@
+import { useState } from 'react'
+import { NumberInput, NumberInputSize } from '../../../Inputs'
+
+const NumberInputLightHouse = () => {
+    const [age, setAge] = useState<number | null>(null)
+    const [income, setIncome] = useState<number | null>(5000)
+    const [percentage, setPercentage] = useState<number | null>(50)
+
+    return (
+        <div className="flex flex-col gap-4">
+            {/* Basic NumberInput */}
+            <NumberInput
+                label="Age"
+                placeholder="Enter your age"
+                value={age}
+                onChange={(e) =>
+                    setAge(e.target.value ? parseInt(e.target.value, 10) : null)
+                }
+                min={0}
+                max={120}
+                step={1}
+            />
+
+            {/* Pre-filled value */}
+            <NumberInput
+                label="Monthly Income"
+                placeholder="Enter your income"
+                sublabel="Before taxes and deductions"
+                value={income}
+                onChange={(e) =>
+                    setIncome(
+                        e.target.value ? parseFloat(e.target.value) : null
+                    )
+                }
+                min={0}
+                step={100}
+                hintText="Enter your gross monthly income"
+                required
+            />
+
+            {/* Percentage field */}
+            <NumberInput
+                label="Completion Percentage"
+                placeholder="0"
+                value={percentage}
+                onChange={(e) =>
+                    setPercentage(
+                        e.target.value ? parseFloat(e.target.value) : null
+                    )
+                }
+                min={0}
+                max={100}
+                step={0.5}
+                hintText="Between 0 and 100"
+            />
+
+            {/* Error state */}
+            <NumberInput
+                label="Age (Error Example)"
+                placeholder="Enter your age"
+                value={150}
+                onChange={() => {}}
+                min={0}
+                max={120}
+                error
+                errorMessage="Age must be between 0 and 120"
+            />
+
+            {/* Disabled state */}
+            <NumberInput
+                label="Disabled NumberInput"
+                value={42}
+                onChange={() => {}}
+                disabled
+                hintText="This field is disabled"
+            />
+
+            {/* Required field */}
+            <NumberInput
+                label="Required Amount"
+                placeholder="Enter amount"
+                value={null}
+                onChange={() => {}}
+                required
+                hintText="This field is required"
+            />
+
+            {/* Different sizes */}
+            <NumberInput
+                label="Medium Size"
+                placeholder="Medium number input"
+                value={null}
+                onChange={() => {}}
+            />
+            <NumberInput
+                label="Large Size"
+                placeholder="Large number input"
+                value={null}
+                onChange={() => {}}
+                size={NumberInputSize.LARGE}
+            />
+        </div>
+    )
+}
+
+export default NumberInputLightHouse

package/lib/components/shared/accessibility/LightHouse-components/OTPInputLightHouse.tsx

@@ -0,0 +1,97 @@
+import { useState } from 'react'
+import { OTPInput } from '../../../Inputs'
+
+const OTPInputLightHouse = () => {
+    const [basicOtp, setBasicOtp] = useState('')
+    const [requiredOtp, setRequiredOtp] = useState('')
+    const [errorOtp, setErrorOtp] = useState('123')
+    const [disabledOtp] = useState('123456')
+    const [fourDigitOtp, setFourDigitOtp] = useState('')
+    const [eightDigitOtp, setEightDigitOtp] = useState('')
+
+    return (
+        <div className="flex flex-col gap-4">
+            {/* Basic OTPInput */}
+            <OTPInput
+                label="Verification Code"
+                placeholder="0"
+                value={basicOtp}
+                onChange={setBasicOtp}
+                length={6}
+            />
+
+            {/* With sublabel and hint */}
+            <OTPInput
+                label="Two-Factor Authentication"
+                sublabel="Enter the 6-digit code from your authenticator app"
+                hintText="Code expires in 60 seconds"
+                length={6}
+                value={basicOtp}
+                onChange={setBasicOtp}
+            />
+
+            {/* Required field */}
+            <OTPInput
+                label="Required Verification Code"
+                placeholder="0"
+                value={requiredOtp}
+                onChange={setRequiredOtp}
+                length={6}
+                required
+                hintText="This field is required"
+            />
+
+            {/* Error state */}
+            <OTPInput
+                label="Verification Code (Error Example)"
+                placeholder="0"
+                value={errorOtp}
+                onChange={setErrorOtp}
+                length={6}
+                error={errorOtp.length > 0 && errorOtp.length < 6}
+                errorMessage="Please enter all 6 digits"
+            />
+
+            {/* Disabled state */}
+            <OTPInput
+                label="Disabled OTP Input"
+                placeholder="0"
+                value={disabledOtp}
+                onChange={() => {}}
+                length={6}
+                disabled
+                hintText="This field is disabled"
+            />
+
+            {/* Different lengths */}
+            <OTPInput
+                label="4-Digit PIN"
+                placeholder="0"
+                value={fourDigitOtp}
+                onChange={setFourDigitOtp}
+                length={4}
+                hintText="Enter 4-digit PIN"
+            />
+            <OTPInput
+                label="8-Digit Security Code"
+                placeholder="0"
+                value={eightDigitOtp}
+                onChange={setEightDigitOtp}
+                length={8}
+                hintText="Enter 8-digit security code"
+            />
+
+            {/* With help icon */}
+            <OTPInput
+                label="Verification Code"
+                helpIconHintText="If you don't receive a code, check your email or contact support"
+                placeholder="0"
+                value={basicOtp}
+                onChange={setBasicOtp}
+                length={6}
+            />
+        </div>
+    )
+}
+
+export default OTPInputLightHouse