@idealyst/components 1.0.24 → 1.0.26

package/src/Checkbox/Checkbox.web.tsx

@@ -1,131 +1,131 @@
-import React, { useState, useEffect } from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-import { CheckboxProps } from './types';
-import { checkboxStyles, checkboxLabelStyles, checkboxCheckmarkStyles, checkboxHelperStyles } from './Checkbox.styles';
-
-const Checkbox: React.FC<CheckboxProps> = ({
-  checked = false,
-  indeterminate = false,
-  disabled = false,
-  onCheckedChange,
-  size = 'medium',
-  intent = 'primary',
-  variant = 'default',
-  label,
-  children,
-  style,
-  testID,
-  accessibilityLabel,
-  required = false,
-  error,
-  helperText,
-}) => {
-  const [internalChecked, setInternalChecked] = useState(checked);
-  
-  useEffect(() => {
-    setInternalChecked(checked);
-  }, [checked]);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (disabled) return;
-    
-    const newChecked = event.target.checked;
-    setInternalChecked(newChecked);
-    onCheckedChange?.(newChecked);
-  };
-
-  // Apply variants for main checkbox
-  checkboxStyles.useVariants({
-    size,
-    intent,
-    variant: variant as any,
-    checked: internalChecked,
-    disabled,
-  });
-
-  // Apply variants for label
-  checkboxLabelStyles.useVariants({
-    size,
-    disabled,
-  });
-
-  // Apply variants for checkmark
-  checkboxCheckmarkStyles.useVariants({
-    size,
-    visible: internalChecked,
-  });
-
-  // Apply variants for helper text
-  checkboxHelperStyles.useVariants({
-    error: !!error,
-  });
-
-  // Create style arrays
-  const wrapperStyleArray = [checkboxStyles.wrapper, style];
-  const containerStyleArray = [checkboxStyles.container];
-  const checkboxStyleArray = [checkboxStyles.checkbox];
-  const labelStyleArray = [checkboxLabelStyles.label];
-  const helperTextStyleArray = [checkboxHelperStyles.helperText];
-  const checkmarkStyleArray = [checkboxCheckmarkStyles.checkmark];
-
-  // Generate web props
-  const wrapperProps = getWebProps(wrapperStyleArray);
-  const containerProps = getWebProps(containerStyleArray);
-  const checkboxProps = getWebProps(checkboxStyleArray);
-  const labelProps = getWebProps(labelStyleArray);
-  const helperTextProps = getWebProps(helperTextStyleArray);
-  const checkmarkProps = getWebProps(checkmarkStyleArray);
-
-  const labelContent = children || label;
-  const displayHelperText = error || helperText;
-
-  return (
-    <div {...wrapperProps}>
-      <label {...containerProps}>
-        <div style={{ position: 'relative' }}>
-          <input
-            type="checkbox"
-            checked={internalChecked}
-            onChange={handleChange}
-            disabled={disabled}
-            required={required}
-            data-testid={testID}
-            aria-label={accessibilityLabel}
-            ref={(ref) => {
-              if (ref) {
-                ref.indeterminate = indeterminate;
-              }
-            }}
-            style={{
-              position: 'absolute',
-              opacity: 0,
-              width: '100%',
-              height: '100%',
-              margin: 0,
-              cursor: disabled ? 'not-allowed' : 'pointer',
-            }}
-          />
-          <div {...checkboxProps}>
-            {(internalChecked || indeterminate) && (
-              <div {...checkmarkProps}>
-                {indeterminate ? '−' : '✓'}
-              </div>
-            )}
-          </div>
-        </div>
-        {labelContent && (
-          <span {...labelProps}>
-            {labelContent}
-          </span>
-        )}
-      </label>
-      {displayHelperText && (
-        <div {...helperTextProps}>
-          {error || helperText}
-        </div>
-      )}
-    </div>
-  );
-};
-
+import React, { useState, useEffect } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { CheckboxProps } from './types';
+import { checkboxStyles, checkboxLabelStyles, checkboxCheckmarkStyles, checkboxHelperStyles } from './Checkbox.styles';
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  onCheckedChange,
+  size = 'medium',
+  intent = 'primary',
+  variant = 'default',
+  label,
+  children,
+  style,
+  testID,
+  accessibilityLabel,
+  required = false,
+  error,
+  helperText,
+}) => {
+  const [internalChecked, setInternalChecked] = useState(checked);
+  
+  useEffect(() => {
+    setInternalChecked(checked);
+  }, [checked]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    
+    const newChecked = event.target.checked;
+    setInternalChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+
+  // Apply variants for main checkbox
+  checkboxStyles.useVariants({
+    size,
+    intent,
+    variant: variant as any,
+    checked: internalChecked,
+    disabled,
+  });
+
+  // Apply variants for label
+  checkboxLabelStyles.useVariants({
+    size,
+    disabled,
+  });
+
+  // Apply variants for checkmark
+  checkboxCheckmarkStyles.useVariants({
+    size,
+    visible: internalChecked,
+  });
+
+  // Apply variants for helper text
+  checkboxHelperStyles.useVariants({
+    error: !!error,
+  });
+
+  // Create style arrays
+  const wrapperStyleArray = [checkboxStyles.wrapper, style];
+  const containerStyleArray = [checkboxStyles.container];
+  const checkboxStyleArray = [checkboxStyles.checkbox];
+  const labelStyleArray = [checkboxLabelStyles.label];
+  const helperTextStyleArray = [checkboxHelperStyles.helperText];
+  const checkmarkStyleArray = [checkboxCheckmarkStyles.checkmark];
+
+  // Generate web props
+  const wrapperProps = getWebProps(wrapperStyleArray);
+  const containerProps = getWebProps(containerStyleArray);
+  const checkboxProps = getWebProps(checkboxStyleArray);
+  const labelProps = getWebProps(labelStyleArray);
+  const helperTextProps = getWebProps(helperTextStyleArray);
+  const checkmarkProps = getWebProps(checkmarkStyleArray);
+
+  const labelContent = children || label;
+  const displayHelperText = error || helperText;
+
+  return (
+    <div {...wrapperProps}>
+      <label {...containerProps}>
+        <div style={{ position: 'relative' }}>
+          <input
+            type="checkbox"
+            checked={internalChecked}
+            onChange={handleChange}
+            disabled={disabled}
+            required={required}
+            data-testid={testID}
+            aria-label={accessibilityLabel}
+            ref={(ref) => {
+              if (ref) {
+                ref.indeterminate = indeterminate;
+              }
+            }}
+            style={{
+              position: 'absolute',
+              opacity: 0,
+              width: '100%',
+              height: '100%',
+              margin: 0,
+              cursor: disabled ? 'not-allowed' : 'pointer',
+            }}
+          />
+          <div {...checkboxProps}>
+            {(internalChecked || indeterminate) && (
+              <div {...checkmarkProps}>
+                {indeterminate ? '−' : '✓'}
+              </div>
+            )}
+          </div>
+        </div>
+        {labelContent && (
+          <span {...labelProps}>
+            {labelContent}
+          </span>
+        )}
+      </label>
+      {displayHelperText && (
+        <div {...helperTextProps}>
+          {error || helperText}
+        </div>
+      )}
+    </div>
+  );
+};
+
 export default Checkbox; 

package/src/Checkbox/index.native.ts

@@ -1,3 +1,3 @@
-// React Native-specific Checkbox export
-export { default } from './Checkbox.native';
+// React Native-specific Checkbox export
+export { default } from './Checkbox.native';
 export * from './types'; 

package/src/Checkbox/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic Checkbox export
-// Metro will resolve to index.native.ts for React Native
-// This file serves as fallback for web environments
-export { default } from './Checkbox.web';
+// Platform-agnostic Checkbox export
+// Metro will resolve to index.native.ts for React Native
+// This file serves as fallback for web environments
+export { default } from './Checkbox.web';
 export * from './types'; 

package/src/Checkbox/index.web.ts

@@ -1,3 +1,3 @@
-// Web-specific Checkbox export
-export { default } from './Checkbox.web';
+// Web-specific Checkbox export
+export { default } from './Checkbox.web';
 export * from './types'; 

package/src/Checkbox/types.ts

@@ -1,79 +1,79 @@
-import { ReactNode } from 'react';
-import type { IntentVariant } from '../theme/variants';
-
-export interface CheckboxProps {
-  /**
-   * Whether the checkbox is checked
-   */
-  checked?: boolean;
-  
-  /**
-   * Whether the checkbox is in an indeterminate state
-   */
-  indeterminate?: boolean;
-  
-  /**
-   * Whether the checkbox is disabled
-   */
-  disabled?: boolean;
-  
-  /**
-   * Called when the checkbox state changes
-   */
-  onCheckedChange?: (checked: boolean) => void;
-  
-  /**
-   * The size of the checkbox
-   */
-  size?: 'small' | 'medium' | 'large';
-  
-  /**
-   * The intent/color scheme of the checkbox
-   */
-  intent?: IntentVariant;
-  
-  /**
-   * The visual style variant of the checkbox
-   */
-  variant?: 'default' | 'outlined';
-  
-  /**
-   * Label text to display next to the checkbox
-   */
-  label?: string;
-  
-  /**
-   * Custom label content (ReactNode)
-   */
-  children?: ReactNode;
-  
-  /**
-   * Additional styles (platform-specific)
-   */
-  style?: any;
-  
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
-  
-  /**
-   * Accessibility label
-   */
-  accessibilityLabel?: string;
-  
-  /**
-   * Whether the checkbox is required
-   */
-  required?: boolean;
-  
-  /**
-   * Error message to display
-   */
-  error?: string;
-  
-  /**
-   * Helper text to display
-   */
-  helperText?: string;
+import { ReactNode } from 'react';
+import type { IntentVariant } from '../theme/variants';
+
+export interface CheckboxProps {
+  /**
+   * Whether the checkbox is checked
+   */
+  checked?: boolean;
+  
+  /**
+   * Whether the checkbox is in an indeterminate state
+   */
+  indeterminate?: boolean;
+  
+  /**
+   * Whether the checkbox is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Called when the checkbox state changes
+   */
+  onCheckedChange?: (checked: boolean) => void;
+  
+  /**
+   * The size of the checkbox
+   */
+  size?: 'small' | 'medium' | 'large';
+  
+  /**
+   * The intent/color scheme of the checkbox
+   */
+  intent?: IntentVariant;
+  
+  /**
+   * The visual style variant of the checkbox
+   */
+  variant?: 'default' | 'outlined';
+  
+  /**
+   * Label text to display next to the checkbox
+   */
+  label?: string;
+  
+  /**
+   * Custom label content (ReactNode)
+   */
+  children?: ReactNode;
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+  
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+  
+  /**
+   * Whether the checkbox is required
+   */
+  required?: boolean;
+  
+  /**
+   * Error message to display
+   */
+  error?: string;
+  
+  /**
+   * Helper text to display
+   */
+  helperText?: string;
 }