@idealyst/components 1.2.30 → 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 }))}
+            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,8 +150,8 @@ export const SwitchExamples: React.FC = () => {
           <Switch
             checked={iconChecked.wifi}
             onCheckedChange={(checked) => setIconChecked(prev => ({ ...prev, wifi: checked }))}
-            enabledIcon="wifi"
-            disabledIcon="wifi-off"
+            onIcon="wifi"
+            offIcon="wifi-off"
             intent="danger"
             label="WiFi Connection"
             size="sm"

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/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;
 };
 
 /**
@@ -456,6 +467,7 @@ export interface ComponentStyleExtensions {}
  */
 interface BuiltInComponentStyleElements {
     Button: ButtonStyleableElements;
+    IconButton: IconButtonStyleableElements;
     Card: CardStyleableElements;
     TextInput: TextInputStyleableElements;
     /** @deprecated Use TextInput instead */

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';
 
@@ -119,6 +122,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 { LinkProps } from './Link/types';