kynjal-cli 2.0.6

package/dist/templates/demo/input/input-variants.tsx

@@ -0,0 +1,23 @@
+import { Input } from '@/components/ui/input';
+import { View } from '@/components/ui/view';
+import { Mail, User } from 'lucide-react-native';
+import React from 'react';
+
+export function InputVariants() {
+  return (
+    <View style={{ gap: 16 }}>
+      <Input
+        variant='filled'
+        label='Username'
+        placeholder='Filled variant'
+        icon={User}
+      />
+      <Input
+        variant='outline'
+        label='Email'
+        placeholder='Outline variant'
+        icon={Mail}
+      />
+    </View>
+  );
+}

package/dist/templates/demo/input-otp/input-otp-demo.tsx

@@ -0,0 +1,17 @@
+import { InputOTP } from '@/components/ui/input-otp';
+import React, { useState } from 'react';
+
+export function InputOTPDemo() {
+  const [otp, setOtp] = useState('');
+
+  return (
+    <InputOTP
+      length={6}
+      value={otp}
+      onChangeText={setOtp}
+      onComplete={(value) => {
+        console.log('OTP Complete:', value);
+      }}
+    />
+  );
+}

package/dist/templates/demo/input-otp/input-otp-disabled.tsx

@@ -0,0 +1,40 @@
+import { Button } from '@/components/ui/button';
+import { InputOTP } from '@/components/ui/input-otp';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function InputOTPDisabled() {
+  const [otp, setOtp] = useState('123');
+  const [disabled, setDisabled] = useState(true);
+
+  return (
+    <View style={{ gap: 16, alignItems: 'center' }}>
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>Disabled State</Text>
+        <Text style={{ fontSize: 12, opacity: 0.7, textAlign: 'center' }}>
+          Toggle the button below to enable/disable the input
+        </Text>
+      </View>
+
+      <InputOTP
+        length={6}
+        value={otp}
+        onChangeText={setOtp}
+        disabled={disabled}
+      />
+
+      <Button
+        variant={disabled ? 'default' : 'outline'}
+        size='sm'
+        onPress={() => setDisabled(!disabled)}
+      >
+        {disabled ? 'Enable Input' : 'Disable Input'}
+      </Button>
+
+      {!disabled && (
+        <Text style={{ fontSize: 12, opacity: 0.7 }}>Current value: {otp}</Text>
+      )}
+    </View>
+  );
+}

package/dist/templates/demo/input-otp/input-otp-error.tsx

@@ -0,0 +1,71 @@
+import { Button } from '@/components/ui/button';
+import { InputOTP } from '@/components/ui/input-otp';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function InputOTPError() {
+  const [otp, setOtp] = useState('');
+  const [error, setError] = useState('');
+
+  const validateOtp = (value: string) => {
+    if (value.length === 6) {
+      // Simulate validation - reject if all digits are the same
+      if (value === '111111' || value === '000000') {
+        setError('Invalid verification code. Please try again.');
+      } else {
+        setError('');
+      }
+    } else {
+      setError('');
+    }
+  };
+
+  const handleOtpChange = (value: string) => {
+    setOtp(value);
+    validateOtp(value);
+  };
+
+  const simulateError = () => {
+    setError('Verification code has expired. Please request a new one.');
+  };
+
+  const clearError = () => {
+    setError('');
+    setOtp('');
+  };
+
+  return (
+    <View style={{ gap: 16, alignItems: 'center' }}>
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>
+          Enter Verification Code
+        </Text>
+        <Text style={{ fontSize: 12, opacity: 0.7, textAlign: 'center' }}>
+          Try entering "111111" or "000000" to see error state
+        </Text>
+      </View>
+
+      <InputOTP
+        length={6}
+        value={otp}
+        onChangeText={handleOtpChange}
+        error={error}
+        onComplete={(value) => {
+          if (!error) {
+            console.log('Valid OTP:', value);
+          }
+        }}
+      />
+
+      <View style={{ flexDirection: 'row', gap: 12 }}>
+        <Button variant='outline' size='sm' onPress={simulateError}>
+          Simulate Error
+        </Button>
+        <Button variant='outline' size='sm' onPress={clearError}>
+          Clear
+        </Button>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/input-otp/input-otp-lengths.tsx

@@ -0,0 +1,25 @@
+import { InputOTP } from '@/components/ui/input-otp';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function InputOTPLengths() {
+  const [otp4, setOtp4] = useState('');
+  const [otp6, setOtp6] = useState('');
+
+  return (
+    <View style={{ gap: 20 }}>
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>4 Digits</Text>
+        <InputOTP length={4} value={otp4} onChangeText={setOtp4} />
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>
+          6 Digits (Default)
+        </Text>
+        <InputOTP length={6} value={otp6} onChangeText={setOtp6} />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/input-otp/input-otp-masked.tsx

@@ -0,0 +1,42 @@
+import { InputOTP } from '@/components/ui/input-otp';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function InputOTPMasked() {
+  const [normalOtp, setNormalOtp] = useState('');
+  const [maskedOtp, setMaskedOtp] = useState('');
+
+  return (
+    <View style={{ gap: 24 }}>
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>
+          Normal (Visible Digits)
+        </Text>
+        <InputOTP length={6} value={normalOtp} onChangeText={setNormalOtp} />
+        {normalOtp && (
+          <Text style={{ fontSize: 12, opacity: 0.7 }}>
+            Current value: {normalOtp}
+          </Text>
+        )}
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>
+          Masked (Hidden Digits)
+        </Text>
+        <InputOTP
+          length={6}
+          value={maskedOtp}
+          onChangeText={setMaskedOtp}
+          masked={true}
+        />
+        {maskedOtp && (
+          <Text style={{ fontSize: 12, opacity: 0.7 }}>
+            Current value: {maskedOtp}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/input-otp/input-otp-no-cursor.tsx

@@ -0,0 +1,39 @@
+import { InputOTP } from '@/components/ui/input-otp';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React, { useState } from 'react';
+
+export function InputOTPNoCursor() {
+  const [otpWithCursor, setOtpWithCursor] = useState('');
+  const [otpWithoutCursor, setOtpWithoutCursor] = useState('');
+
+  return (
+    <View style={{ gap: 24 }}>
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>
+          With Cursor (Default)
+        </Text>
+        <InputOTP
+          length={6}
+          value={otpWithCursor}
+          onChangeText={setOtpWithCursor}
+          showCursor={true}
+        />
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>Without Cursor</Text>
+        <InputOTP
+          length={6}
+          value={otpWithoutCursor}
+          onChangeText={setOtpWithoutCursor}
+          showCursor={false}
+        />
+      </View>
+
+      <Text style={{ fontSize: 12, opacity: 0.7, textAlign: 'center' }}>
+        Tap on the inputs above to see the difference in cursor behavior
+      </Text>
+    </View>
+  );
+}

package/dist/templates/demo/input-otp/input-otp-separator.tsx

@@ -0,0 +1,61 @@
+import { InputOTP, InputOTPWithSeparator } from '@/components/ui/input-otp';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React, { useState } from 'react';
+
+export function InputOTPSeparator() {
+  const [otp1, setOtp1] = useState('');
+  const [otp2, setOtp2] = useState('');
+  const [otp3, setOtp3] = useState('');
+
+  const muted = useColor('textMuted');
+
+  return (
+    <View style={{ gap: 24 }}>
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>
+          With Dash Separator
+        </Text>
+        <InputOTPWithSeparator length={6} value={otp1} onChangeText={setOtp1} />
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>
+          With Dot Separator
+        </Text>
+        <InputOTP
+          length={6}
+          value={otp2}
+          onChangeText={setOtp2}
+          separator={
+            <Text style={{ fontSize: 16, color: muted, fontWeight: 'bold' }}>
+              •
+            </Text>
+          }
+        />
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>
+          With Custom Separator
+        </Text>
+        <InputOTP
+          length={4}
+          value={otp3}
+          onChangeText={setOtp3}
+          separator={
+            <View
+              style={{
+                width: 8,
+                height: 2,
+                backgroundColor: muted,
+                marginHorizontal: 4,
+              }}
+            />
+          }
+        />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/input-otp/input-otp-styled.tsx

@@ -0,0 +1,67 @@
+import { InputOTP } from '@/components/ui/input-otp';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { useColor } from '@/hooks/useColor';
+import React, { useState } from 'react';
+
+export function InputOTPStyled() {
+  const [otp1, setOtp1] = useState('');
+  const [otp2, setOtp2] = useState('');
+  const [otp3, setOtp3] = useState('');
+
+  const primary = useColor('primary');
+  const success = '#10B981';
+  const purple = '#8B5CF6';
+
+  return (
+    <View style={{ gap: 24 }}>
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>Rounded Style</Text>
+        <InputOTP
+          length={6}
+          value={otp1}
+          onChangeText={setOtp1}
+          slotStyle={{
+            borderRadius: 25,
+            borderWidth: 2,
+            borderColor: primary,
+          }}
+        />
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>Success Theme</Text>
+        <InputOTP
+          length={4}
+          value={otp2}
+          onChangeText={setOtp2}
+          slotStyle={{
+            borderColor: success,
+            backgroundColor: success + '10',
+            borderRadius: 8,
+          }}
+        />
+      </View>
+
+      <View style={{ alignItems: 'center', gap: 8 }}>
+        <Text style={{ fontSize: 14, fontWeight: '500' }}>Large & Purple</Text>
+        <InputOTP
+          length={4}
+          value={otp3}
+          onChangeText={setOtp3}
+          slotStyle={{
+            width: 70,
+            height: 70,
+            borderColor: purple,
+            borderWidth: 2,
+            borderRadius: 12,
+            backgroundColor: purple + '05',
+          }}
+          containerStyle={{
+            gap: 12,
+          }}
+        />
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/link/link-browser.tsx

@@ -0,0 +1,36 @@
+import { Link } from '@/components/ui/link';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function LinkBrowser() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontWeight: '600', fontSize: 16 }}>
+          In-App Browser (Default)
+        </Text>
+        <View style={{ gap: 6 }}>
+          <Link href='https://github.com' browser='in-app'>
+            Open GitHub in-app
+          </Link>
+          <Link href='https://expo.dev'>Open Expo docs in-app</Link>
+        </View>
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontWeight: '600', fontSize: 16 }}>
+          External Browser
+        </Text>
+        <View style={{ gap: 6 }}>
+          <Link href='https://github.com' browser='external'>
+            Open GitHub externally
+          </Link>
+          <Link href='https://expo.dev' browser='external'>
+            Open Expo docs externally
+          </Link>
+        </View>
+      </View>
+    </View>
+  );
+}

package/dist/templates/demo/link/link-buttons.tsx

@@ -0,0 +1,65 @@
+import { Button } from '@/components/ui/button';
+import { Link } from '@/components/ui/link';
+import { View } from '@/components/ui/view';
+import { ExternalLink, Settings, User } from 'lucide-react-native';
+import React from 'react';
+
+export function LinkButtons() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 12 }}>
+        <Link href='/' asChild>
+          <Button variant='default' icon={User}>
+            View Profile
+          </Button>
+        </Link>
+
+        <Link href='/' asChild>
+          <Button variant='outline' icon={Settings}>
+            Open Settings
+          </Button>
+        </Link>
+
+        <Link href='https://github.com' browser='external' asChild>
+          <Button variant='secondary' icon={ExternalLink}>
+            Visit GitHub
+          </Button>
+        </Link>
+      </View>
+
+      <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+        <Link href='/' asChild>
+          <Button variant='default' size='sm'>
+            Dashboard
+          </Button>
+        </Link>
+
+        <Link href='/' asChild>
+          <Button variant='ghost' size='sm'>
+            Help
+          </Button>
+        </Link>
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Link href='/' asChild>
+          <Button variant='destructive' size='lg'>
+            Danger Zone
+          </Button>
+        </Link>
+
+        <Link href='/' asChild>
+          <Button variant='success' size='lg'>
+            Success Action
+          </Button>
+        </Link>
+      </View>
+
+      <Link href='mailto:support@example.com' asChild>
+        <Button variant='link' size='sm'>
+          Contact
+        </Button>
+      </Link>
+    </View>
+  );
+}

package/dist/templates/demo/link/link-custom.tsx

@@ -0,0 +1,42 @@
+import { Button } from '@/components/ui/button';
+import { Link } from '@/components/ui/link';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import { ExternalLink, HomeIcon, Mail } from 'lucide-react-native';
+import React from 'react';
+
+export function LinkCustom() {
+  return (
+    <View style={{ gap: 16 }}>
+      <Link href='/' asChild>
+        <Button icon={HomeIcon}>Welcome</Button>
+      </Link>
+
+      <Link href='https://github.com'>
+        <View
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+            padding: 12,
+            backgroundColor: 'red',
+            borderRadius: 8,
+          }}
+        >
+          <ExternalLink size={16} color='#fff' />
+          <Text style={{ color: '#fff', textAlign: 'center' }}>
+            External Link
+          </Text>
+        </View>
+      </Link>
+
+      <Link href='mailto:contact@example.com' asChild>
+        <Button variant='success' icon={Mail}>
+          Send Email
+        </Button>
+      </Link>
+    </View>
+  );
+}

package/dist/templates/demo/link/link-demo.tsx

@@ -0,0 +1,13 @@
+import { Link } from '@/components/ui/link';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function LinkDemo() {
+  return (
+    <View style={{ gap: 12 }}>
+      <Link href='/'>Go to Profile</Link>
+      <Link href='/'>Settings</Link>
+      <Link href={{ pathname: '/', params: { id: '123' } }}>User Details</Link>
+    </View>
+  );
+}

package/dist/templates/demo/link/link-external.tsx

@@ -0,0 +1,13 @@
+import { Link } from '@/components/ui/link';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function LinkExternal() {
+  return (
+    <View style={{ gap: 12 }}>
+      <Link href='https://github.com'>Visit GitHub</Link>
+      <Link href='https://expo.dev'>Expo Documentation</Link>
+      <Link href='https://reactnative.dev'>React Native Docs</Link>
+    </View>
+  );
+}

package/dist/templates/demo/link/link-styled.tsx

@@ -0,0 +1,72 @@
+import { Link } from '@/components/ui/link';
+import { Text } from '@/components/ui/text';
+import { View } from '@/components/ui/view';
+import React from 'react';
+
+export function LinkStyled() {
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontWeight: '600', fontSize: 16 }}>Default Styled</Text>
+        <View style={{ gap: 6 }}>
+          <Link href='/'>Default Link Style</Link>
+          <Link href='https://example.com'>External Link</Link>
+        </View>
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontWeight: '600', fontSize: 16 }}>
+          Custom Text Styling
+        </Text>
+        <View style={{ gap: 6 }}>
+          <Link href='/'>
+            <Text
+              style={{
+                color: '#dc2626',
+                fontWeight: '600',
+                textDecorationLine: 'underline',
+              }}
+            >
+              Red Bold Link
+            </Text>
+          </Link>
+
+          <Link href='/'>
+            <Text
+              style={{
+                color: '#059669',
+                fontSize: 18,
+                fontStyle: 'italic',
+              }}
+            >
+              Green Italic Link
+            </Text>
+          </Link>
+
+          <Link href='https://github.com'>
+            <Text
+              style={{
+                color: '#7c3aed',
+                fontWeight: '700',
+                textTransform: 'uppercase',
+                letterSpacing: 1,
+              }}
+            >
+              Purple Uppercase
+            </Text>
+          </Link>
+        </View>
+      </View>
+
+      <View style={{ gap: 8 }}>
+        <Text style={{ fontWeight: '600', fontSize: 16 }}>Inline Links</Text>
+        <Text>
+          This is a paragraph with an <Link href='/'>inline link</Link> that
+          flows naturally with the text. You can also have{' '}
+          <Link href='https://example.com'>external inline links</Link> in your
+          content.
+        </Text>
+      </View>
+    </View>
+  );
+}