@idealyst/components 1.2.29 → 1.2.31

package/src/examples/SwitchExamples.tsx

@@ -29,7 +29,7 @@ export const SwitchExamples: React.FC = () => {
         <Text typography="h5">Basic Switch</Text>
         <Switch
           checked={basicChecked}
-          onCheckedChange={setBasicChecked}
+          onChange={setBasicChecked}
         />
       </View>
 
@@ -37,7 +37,7 @@ export const SwitchExamples: React.FC = () => {
         <Text typography="h5">With Label</Text>
         <Switch
           checked={labelledChecked}
-          onCheckedChange={setLabelledChecked}
+          onChange={setLabelledChecked}
           label="Enable notifications"
         />
       </View>
@@ -46,7 +46,7 @@ export const SwitchExamples: React.FC = () => {
         <Text typography="h5">Label Position</Text>
         <Switch
           checked={labelledChecked}
-          onCheckedChange={setLabelledChecked}
+          onChange={setLabelledChecked}
           label="Left label"
           labelPosition="left"
         />
@@ -57,13 +57,13 @@ export const SwitchExamples: React.FC = () => {
         <View gap="sm">
           <Switch
             checked={basicChecked}
-            onCheckedChange={setBasicChecked}
+            onChange={setBasicChecked}
             size="sm"
             label="Small"
           />
           <Switch
             checked={basicChecked}
-            onCheckedChange={setBasicChecked}
+            onChange={setBasicChecked}
             size="md"
             label="Medium (default)"
           />
@@ -81,31 +81,31 @@ export const SwitchExamples: React.FC = () => {
         <View gap="sm">
           <Switch
             checked={intentChecked.primary}
-            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, primary: checked }))}
+            onChange={(checked) => setIntentChecked(prev => ({ ...prev, primary: checked }))}
             intent="primary"
             label="Primary"
           />
           <Switch
             checked={intentChecked.success}
-            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, success: checked }))}
+            onChange={(checked) => setIntentChecked(prev => ({ ...prev, success: checked }))}
             intent="success"
             label="Success"
           />
           <Switch
             checked={intentChecked.error}
-            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, error: checked }))}
-            intent="error"
+            onChange={(checked) => setIntentChecked(prev => ({ ...prev, error: checked }))}
+            intent="danger"
             label="Error"
           />
           <Switch
             checked={intentChecked.warning}
-            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, warning: checked }))}
+            onChange={(checked) => setIntentChecked(prev => ({ ...prev, warning: checked }))}
             intent="warning"
             label="Warning"
           />
           <Switch
             checked={intentChecked.neutral}
-            onCheckedChange={(checked) => setIntentChecked(prev => ({ ...prev, neutral: checked }))}
+            onChange={(checked) => setIntentChecked(prev => ({ ...prev, neutral: checked }))}
             intent="neutral"
             label="Neutral"
           />
@@ -117,32 +117,32 @@ export const SwitchExamples: React.FC = () => {
         <View gap="sm">
           <Switch
             checked={iconChecked.basic}
-            onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, basic: checked }))}
-            enabledIcon="check"
-            disabledIcon="close"
+            onChange={(checked) => setIconChecked(prev => ({ ...prev, basic: checked }))}
+            onIcon="check"
+            offIcon="close"
             label="On/Off"
           />
           <Switch
             checked={iconChecked.notifications}
-            onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, notifications: checked }))}
-            enabledIcon="bell"
-            disabledIcon="bell-off"
+            onChange={(checked) => setIconChecked(prev => ({ ...prev, notifications: checked }))}
+            onIcon="bell"
+            offIcon="bell-off"
             intent="success"
             label="Notifications"
           />
           <Switch
             checked={iconChecked.visibility}
-            onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, visibility: checked }))}
-            enabledIcon="eye"
-            disabledIcon="eye-off"
+            onChange={(checked) => setIconChecked(prev => ({ ...prev, visibility: checked }))}
+            onIcon="eye"
+            offIcon="eye-off"
             intent="primary"
             label="Visibility"
           />
           <Switch
             checked={iconChecked.volume}
-            onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, volume: checked }))}
-            enabledIcon="volume-high"
-            disabledIcon="volume-off"
+            onChange={(checked) => setIconChecked(prev => ({ ...prev, volume: checked }))}
+            onIcon="volume-high"
+            offIcon="volume-off"
             intent="warning"
             label="Sound"
             size="lg"
@@ -150,9 +150,9 @@ export const SwitchExamples: React.FC = () => {
           <Switch
             checked={iconChecked.wifi}
             onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, wifi: checked }))}
-            enabledIcon="wifi"
-            disabledIcon="wifi-off"
-            intent="error"
+            onIcon="wifi"
+            offIcon="wifi-off"
+            intent="danger"
             label="WiFi Connection"
             size="sm"
           />

package/src/examples/TableExamples.tsx

@@ -126,7 +126,7 @@ export const TableExamples: React.FC = () => {
           <Button size="sm" type="outlined" onPress={() => console.log('Edit', user.id)}>
             Edit
           </Button>
-          <Button size="sm" type="outlined" intent="error" onPress={() => console.log('Delete', user.id)}>
+          <Button size="sm" type="outlined" intent="danger" onPress={() => console.log('Delete', user.id)}>
             Delete
           </Button>
         </View>

package/src/examples/TooltipExamples.tsx

@@ -62,8 +62,8 @@ export const TooltipExamples: React.FC = () => {
           <Tooltip content="Warning tooltip" intent="warning">
             <Button type="contained" intent="warning">Warning</Button>
           </Tooltip>
-          <Tooltip content="Error tooltip" intent="error">
-            <Button type="contained" intent="error">Error</Button>
+          <Tooltip content="Error tooltip" intent="danger">
+            <Button type="contained" intent="danger">Error</Button>
           </Tooltip>
           <Tooltip content="Neutral tooltip" intent="neutral">
             <Button type="contained" intent="neutral">Neutral</Button>

package/src/examples/index.ts

@@ -1,3 +1,4 @@
+export { ActivityIndicatorExamples } from './ActivityIndicatorExamples';
 export { ButtonExamples } from './ButtonExamples';
 export { TextExamples } from './TextExamples';
 export { ViewExamples } from './ViewExamples';

package/src/extensions/index.ts

@@ -61,6 +61,7 @@ export type {
     // Individual component styleable elements
     ButtonStyleableElements,
     CardStyleableElements,
+    TextInputStyleableElements,
     InputStyleableElements,
     ChipStyleableElements,
     AlertStyleableElements,

package/src/extensions/types.ts

@@ -37,6 +37,17 @@ export type ButtonStyleableElements = {
     text: ElementStyle;
     icon: ElementStyle;
     iconContainer: ElementStyle;
+    spinner: ElementStyle;
+};
+
+/**
+ * IconButton styleable elements.
+ * @see IconButtonStylesheet in @idealyst/theme/components/icon-button
+ */
+export type IconButtonStyleableElements = {
+    button: ElementStyle;
+    icon: ElementStyle;
+    spinner: ElementStyle;
 };
 
 /**
@@ -48,10 +59,10 @@ export type CardStyleableElements = {
 };
 
 /**
- * Input styleable elements.
- * @see InputStylesheet in @idealyst/theme/components/input
+ * TextInput styleable elements.
+ * @see TextInputStylesheet in @idealyst/theme/components/text-input
  */
-export type InputStyleableElements = {
+export type TextInputStyleableElements = {
     container: Styles;
     leftIconContainer: Styles;
     rightIconContainer: Styles;
@@ -62,6 +73,11 @@ export type InputStyleableElements = {
     input: Styles;
 };
 
+/**
+ * @deprecated Use TextInputStyleableElements instead
+ */
+export type InputStyleableElements = TextInputStyleableElements;
+
 /**
  * Chip styleable elements.
  * @see ChipStylesheet in @idealyst/theme/components/chip
@@ -451,7 +467,10 @@ export interface ComponentStyleExtensions {}
  */
 interface BuiltInComponentStyleElements {
     Button: ButtonStyleableElements;
+    IconButton: IconButtonStyleableElements;
     Card: CardStyleableElements;
+    TextInput: TextInputStyleableElements;
+    /** @deprecated Use TextInput instead */
     Input: InputStyleableElements;
     Chip: ChipStyleableElements;
     Alert: AlertStyleableElements;

package/src/index.native.ts

@@ -1,6 +1,9 @@
 export { default as Button } from './Button';
 export * from './Button/types';
 
+export { default as IconButton } from './IconButton';
+export * from './IconButton/types';
+
 export { default as Text } from './Text';
 export * from './Text/types';
 
@@ -108,6 +111,7 @@ export { default as Platform } from './Platform';
 export * from './Platform/types';
 
 export type { ButtonProps } from './Button/types';
+export type { IconButtonProps } from './IconButton/types';
 export type { TextProps } from './Text/types';
 export type { ViewProps } from './View/types';
 export type { InputProps } from './Input/types';

package/src/index.ts

@@ -6,6 +6,9 @@ import useMergeRefs from './hooks/useMergeRefs';
 export { default as Button } from './Button';
 export * from './Button/types';
 
+export { default as IconButton } from './IconButton';
+export * from './IconButton/types';
+
 export { default as Text } from './Text';
 export * from './Text/types';
 
@@ -18,8 +21,14 @@ export * from './Pressable/types';
 export { default as Link } from './Link';
 export * from './Link/types';
 
+// TextInput (primary text input component)
+export { default as TextInput } from './TextInput';
+export * from './TextInput/types';
+
+/**
+ * @deprecated Use TextInput instead. Input is maintained for backwards compatibility only.
+ */
 export { default as Input } from './Input';
-export * from './Input/types';
 
 // New primitive components
 export { default as Checkbox } from './Checkbox';
@@ -113,10 +122,13 @@ export { default as Platform } from './Platform';
 export * from './Platform/types';
 
 export type { ButtonProps } from './Button/types';
+export type { IconButtonProps } from './IconButton/types';
 export type { TextProps } from './Text/types';
 export type { ViewProps } from './View/types';
 export type { LinkProps } from './Link/types';
-export type { InputProps } from './Input/types';
+export type { TextInputProps } from './TextInput/types';
+/** @deprecated Use TextInputProps instead */
+export type { InputProps } from './TextInput/types';
 export type { CheckboxProps } from './Checkbox/types';
 export type { CardProps } from './Card/types';
 export type { DividerProps } from './Divider/types';
@@ -156,6 +168,18 @@ export * from './utils/events';
 export * from './utils/viewStyleProps';
 export * from './utils/buildViewStyleVariants';
 
+// Cross-platform ref types
+export type {
+  IdealystElement,
+  AnchorElement,
+  AnchorRef,
+  ComponentElement,
+  WebElement,
+  NativeElement,
+  CrossPlatformElement,
+  CrossPlatformRef,
+} from './utils/refTypes';
+
 // Component style extensions
 export {
     extendComponent,
@@ -174,6 +198,7 @@ export type {
     Styles,
     ButtonStyleableElements,
     CardStyleableElements,
+    TextInputStyleableElements,
     InputStyleableElements,
     ChipStyleableElements,
     AlertStyleableElements,

package/src/utils/index.ts

@@ -18,3 +18,15 @@ export { deepMerge, isPlainObject } from './styleHelpers';
 
 // Accessibility utilities
 export * from './accessibility';
+
+// Cross-platform ref types
+export type {
+  IdealystElement,
+  AnchorElement,
+  AnchorRef,
+  ComponentElement,
+  WebElement,
+  NativeElement,
+  CrossPlatformElement,
+  CrossPlatformRef,
+} from './refTypes';

package/src/utils/refTypes.ts

@@ -0,0 +1,50 @@
+/**
+ * Cross-platform ref types for use with refs across web and React Native.
+ *
+ * These types provide a unified way to work with refs in a cross-platform manner,
+ * especially useful for components like Popover that need to anchor to other elements.
+ */
+
+/**
+ * Universal element type for cross-platform refs.
+ * Works seamlessly in both React web and React Native contexts.
+ *
+ * @example
+ * ```tsx
+ * const anchorRef = React.useRef<IdealystElement>(null);
+ *
+ * <Button ref={anchorRef} onPress={() => setOpen(true)}>
+ *   Open Popover
+ * </Button>
+ * <Popover anchor={anchorRef} open={open} onOpenChange={setOpen}>
+ *   <Text>Content</Text>
+ * </Popover>
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type IdealystElement = any;
+
+/**
+ * @deprecated Use IdealystElement instead
+ */
+export type AnchorElement = IdealystElement;
+
+/**
+ * @deprecated Use React.RefObject<IdealystElement> instead
+ */
+export type AnchorRef = React.RefObject<IdealystElement>;
+
+/**
+ * @deprecated Use IdealystElement instead
+ */
+export type CrossPlatformElement = IdealystElement;
+
+/**
+ * @deprecated Use React.RefObject<IdealystElement> instead
+ */
+export type CrossPlatformRef = React.RefObject<IdealystElement>;
+
+// Legacy exports kept for backwards compatibility
+export type WebElement = IdealystElement;
+export type NativeElement = IdealystElement;
+export type ComponentElement<T> = IdealystElement;