npm - @idealyst/components - Versions diffs - 1.0.24 → 1.0.25 - Mend

@idealyst/components 1.0.24 → 1.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/README.md +567 -567
package/package.json +2 -2
package/plugin/web.js +319 -185
package/src/Avatar/Avatar.native.tsx +43 -43
package/src/Avatar/Avatar.styles.tsx +66 -66
package/src/Avatar/Avatar.web.tsx +50 -50
package/src/Avatar/index.native.ts +1 -1
package/src/Avatar/index.ts +1 -1
package/src/Avatar/index.web.ts +1 -1
package/src/Avatar/types.ts +42 -42
package/src/Badge/Badge.native.tsx +42 -42
package/src/Badge/Badge.styles.tsx +153 -153
package/src/Badge/Badge.web.tsx +44 -44
package/src/Badge/index.native.ts +1 -1
package/src/Badge/index.ts +1 -1
package/src/Badge/index.web.ts +1 -1
package/src/Badge/types.ts +33 -33
package/src/Button/Button.native.tsx +38 -38
package/src/Button/Button.styles.tsx +214 -214
package/src/Button/Button.types.ts +11 -11
package/src/Button/Button.web.tsx +55 -55
package/src/Button/index.native.ts +2 -2
package/src/Button/index.ts +4 -4
package/src/Button/index.web.ts +2 -2
package/src/Button/types.ts +48 -48
package/src/Card/Card.native.tsx +51 -51
package/src/Card/Card.styles.tsx +239 -239
package/src/Card/Card.web.tsx +61 -61
package/src/Card/index.native.ts +2 -2
package/src/Card/index.ts +4 -4
package/src/Card/index.web.ts +2 -2
package/src/Card/types.ts +58 -58
package/src/Checkbox/Checkbox.native.tsx +98 -98
package/src/Checkbox/Checkbox.styles.tsx +291 -291
package/src/Checkbox/Checkbox.web.tsx +130 -130
package/src/Checkbox/index.native.ts +2 -2
package/src/Checkbox/index.ts +4 -4
package/src/Checkbox/index.web.ts +2 -2
package/src/Checkbox/types.ts +78 -78
package/src/Divider/Divider.native.tsx +144 -144
package/src/Divider/Divider.styles.tsx +601 -601
package/src/Divider/Divider.web.tsx +72 -72
package/src/Divider/index.native.ts +2 -2
package/src/Divider/index.ts +4 -4
package/src/Divider/index.web.ts +2 -2
package/src/Divider/types.ts +53 -53
package/src/Icon/Icon.native.tsx +38 -38
package/src/Icon/Icon.styles.tsx +49 -49
package/src/Icon/Icon.web.tsx +46 -46
package/src/Icon/icon-types.ts +7452 -7452
package/src/Icon/index.native.ts +2 -2
package/src/Icon/index.ts +4 -4
package/src/Icon/index.web.ts +2 -2
package/src/Icon/types.ts +35 -35
package/src/Input/Input.native.tsx +74 -74
package/src/Input/Input.styles.tsx +176 -176
package/src/Input/Input.web.tsx +70 -70
package/src/Input/index.native.ts +2 -2
package/src/Input/index.ts +4 -4
package/src/Input/index.web.ts +2 -2
package/src/Input/types.ts +68 -68
package/src/Screen/Screen.native.tsx +40 -40
package/src/Screen/Screen.styles.tsx +59 -59
package/src/Screen/Screen.web.tsx +32 -32
package/src/Screen/index.native.ts +1 -1
package/src/Screen/index.ts +1 -1
package/src/Screen/index.web.ts +1 -1
package/src/Screen/types.ts +37 -37
package/src/Text/Text.native.tsx +35 -35
package/src/Text/Text.styles.tsx +66 -66
package/src/Text/Text.web.tsx +40 -40
package/src/Text/index.native.ts +2 -2
package/src/Text/index.ts +4 -4
package/src/Text/index.web.ts +2 -2
package/src/Text/types.ts +38 -38
package/src/View/View.native.tsx +55 -55
package/src/View/View.styles.tsx +102 -102
package/src/View/View.web.tsx +59 -59
package/src/View/index.native.ts +2 -2
package/src/View/index.ts +4 -4
package/src/View/index.web.ts +2 -2
package/src/View/types.ts +72 -72
package/src/examples/AllExamples.tsx +71 -71
package/src/examples/AvatarExamples.tsx +96 -96
package/src/examples/BadgeExamples.tsx +199 -199
package/src/examples/ButtonExamples.tsx +149 -149
package/src/examples/CardExamples.tsx +175 -175
package/src/examples/CheckboxExamples.tsx +216 -216
package/src/examples/DividerExamples.tsx +217 -217
package/src/examples/IconExamples.tsx +341 -341
package/src/examples/InputExamples.tsx +133 -133
package/src/examples/README.md +135 -135
package/src/examples/ScreenExamples.tsx +153 -153
package/src/examples/TextExamples.tsx +88 -88
package/src/examples/ThemeExtensionExamples.tsx +90 -90
package/src/examples/ValidationExamples.tsx +94 -94
package/src/examples/ViewExamples.tsx +128 -128
package/src/examples/extendedTheme.ts +328 -328
package/src/examples/index.ts +14 -14
package/src/index.native.ts +48 -48
package/src/index.ts +47 -47
package/src/theme/breakpoints.ts +8 -8
package/src/theme/colorResolver.ts +217 -217
package/src/theme/colors.ts +314 -314
package/src/theme/defaultThemes.ts +325 -325
package/src/theme/index.ts +187 -187
package/src/theme/themeBuilder.ts +601 -601
package/src/theme/unistyles.d.ts +5 -5
package/src/theme/variantHelpers.ts +583 -583
package/src/theme/variants.ts +55 -55

package/src/examples/ButtonExamples.tsx CHANGED Viewed

@@ -1,150 +1,150 @@
-import React from 'react';
-import { Screen, View, Button, Text } from '../index';
-export const ButtonExamples = () => {
-  const handlePress = (buttonType: string) => {
-    console.log(`Button pressed: ${buttonType}`);
-  };
-  return (
-    <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="large" weight="bold" align="center">
-        Button Examples
-      </Text>
-      {/* Button Variants */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
-          <Button
-            variant="contained"
-            intent="primary"
-            onPress={() => handlePress('contained')}
-          >
-            Contained
-          </Button>
-          <Button
-            variant="outlined"
-            intent="primary"
-            onPress={() => handlePress('outlined')}
-          >
-            Outlined
-          </Button>
-          <Button
-            variant="text"
-            intent="primary"
-            onPress={() => handlePress('text')}
-          >
-            Text
-          </Button>
-        </View>
-      </View>
-      {/* Button Sizes */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Sizes</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
-          <Button
-            size="small"
-            variant="contained"
-            intent="primary"
-            onPress={() => handlePress('small')}
-          >
-            Small
-          </Button>
-          <Button
-            size="medium"
-            variant="contained"
-            intent="primary"
-            onPress={() => handlePress('medium')}
-          >
-            Medium
-          </Button>
-          <Button
-            size="large"
-            variant="contained"
-            intent="primary"
-            onPress={() => handlePress('large')}
-          >
-            Large
-          </Button>
-        </View>
-      </View>
-      {/* Button Intents */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Intents</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
-          <Button
-            intent="primary"
-            variant="contained"
-            onPress={() => handlePress('primary')}
-          >
-            Primary
-          </Button>
-          <Button
-            intent="neutral"
-            variant="contained"
-            onPress={() => handlePress('neutral')}
-          >
-            Neutral
-          </Button>
-          <Button
-            intent="success"
-            variant="contained"
-            onPress={() => handlePress('success')}
-          >
-            Success
-          </Button>
-          <Button
-            intent="error"
-            variant="contained"
-            onPress={() => handlePress('error')}
-          >
-            Error
-          </Button>
-          <Button
-            intent="warning"
-            variant="contained"
-            onPress={() => handlePress('warning')}
-          >
-            Warning
-          </Button>
-        </View>
-      </View>
-      {/* Disabled States */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Disabled States</Text>
-        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
-          <Button
-            variant="contained"
-            intent="primary"
-            disabled
-            onPress={() => handlePress('disabled-contained')}
-          >
-            Disabled Contained
-          </Button>
-          <Button
-            variant="outlined"
-            intent="primary"
-            disabled
-            onPress={() => handlePress('disabled-outlined')}
-          >
-            Disabled Outlined
-          </Button>
-          <Button
-            variant="text"
-            intent="primary"
-            disabled
-            onPress={() => handlePress('disabled-text')}
-          >
-            Disabled Text
-          </Button>
-        </View>
-      </View>
-    </View>
-    </Screen>
-  );
+import React from 'react';
+import { Screen, View, Button, Text } from '../index';
+export const ButtonExamples = () => {
+  const handlePress = (buttonType: string) => {
+    console.log(`Button pressed: ${buttonType}`);
+  };
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Button Examples
+      </Text>
+      {/* Button Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            variant="contained"
+            intent="primary"
+            onPress={() => handlePress('contained')}
+          >
+            Contained
+          </Button>
+          <Button
+            variant="outlined"
+            intent="primary"
+            onPress={() => handlePress('outlined')}
+          >
+            Outlined
+          </Button>
+          <Button
+            variant="text"
+            intent="primary"
+            onPress={() => handlePress('text')}
+          >
+            Text
+          </Button>
+        </View>
+      </View>
+      {/* Button Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
+          <Button
+            size="small"
+            variant="contained"
+            intent="primary"
+            onPress={() => handlePress('small')}
+          >
+            Small
+          </Button>
+          <Button
+            size="medium"
+            variant="contained"
+            intent="primary"
+            onPress={() => handlePress('medium')}
+          >
+            Medium
+          </Button>
+          <Button
+            size="large"
+            variant="contained"
+            intent="primary"
+            onPress={() => handlePress('large')}
+          >
+            Large
+          </Button>
+        </View>
+      </View>
+      {/* Button Intents */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Intents</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            intent="primary"
+            variant="contained"
+            onPress={() => handlePress('primary')}
+          >
+            Primary
+          </Button>
+          <Button
+            intent="neutral"
+            variant="contained"
+            onPress={() => handlePress('neutral')}
+          >
+            Neutral
+          </Button>
+          <Button
+            intent="success"
+            variant="contained"
+            onPress={() => handlePress('success')}
+          >
+            Success
+          </Button>
+          <Button
+            intent="error"
+            variant="contained"
+            onPress={() => handlePress('error')}
+          >
+            Error
+          </Button>
+          <Button
+            intent="warning"
+            variant="contained"
+            onPress={() => handlePress('warning')}
+          >
+            Warning
+          </Button>
+        </View>
+      </View>
+      {/* Disabled States */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Disabled States</Text>
+        <View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap' }}>
+          <Button
+            variant="contained"
+            intent="primary"
+            disabled
+            onPress={() => handlePress('disabled-contained')}
+          >
+            Disabled Contained
+          </Button>
+          <Button
+            variant="outlined"
+            intent="primary"
+            disabled
+            onPress={() => handlePress('disabled-outlined')}
+          >
+            Disabled Outlined
+          </Button>
+          <Button
+            variant="text"
+            intent="primary"
+            disabled
+            onPress={() => handlePress('disabled-text')}
+          >
+            Disabled Text
+          </Button>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
 };

package/src/examples/CardExamples.tsx CHANGED Viewed

@@ -1,176 +1,176 @@
-import React from 'react';
-import { Screen, View, Text, Card, Button } from '../index';
-export const CardExamples = () => {
-  const handleCardPress = (cardType: string) => {
-    console.log(`Card pressed: ${cardType}`);
-  };
-  return (
-    <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="large" weight="bold" align="center">
-        Card Examples
-      </Text>
-      {/* Card Variants */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Card variant="default" padding="medium">
-            <Text>Default Card</Text>
-            <Text size="small" color="secondary">
-              This is a default card with standard styling
-            </Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Outlined Card</Text>
-            <Text size="small" color="secondary">
-              This is an outlined card with border
-            </Text>
-          </Card>
-          <Card variant="elevated" padding="medium">
-            <Text>Elevated Card</Text>
-            <Text size="small" color="secondary">
-              This is an elevated card with shadow
-            </Text>
-          </Card>
-          <Card variant="filled" padding="medium">
-            <Text>Filled Card</Text>
-            <Text size="small" color="secondary">
-              This is a filled card with background
-            </Text>
-          </Card>
-        </View>
-      </View>
-      {/* Card Intents */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Intents</Text>
-        <View spacing="sm" style={{ gap: 10 }}>
-          <Card intent="neutral" padding="medium" variant="outlined">
-            <Text>Neutral Card</Text>
-          </Card>
-          <Card intent="primary" padding="medium" variant="outlined">
-            <Text>Primary Card</Text>
-          </Card>
-          <Card intent="success" padding="medium" variant="outlined">
-            <Text>Success Card</Text>
-          </Card>
-          <Card intent="error" padding="medium" variant="outlined">
-            <Text>Error Card</Text>
-          </Card>
-          <Card intent="warning" padding="medium" variant="outlined">
-            <Text>Warning Card</Text>
-          </Card>
-          <Card intent="info" padding="medium" variant="outlined">
-            <Text>Info Card</Text>
-          </Card>
-        </View>
-      </View>
-      {/* Card Padding */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Padding</Text>
-        <View spacing="sm">
-          <Card padding="none" variant="outlined">
-            <Text>No Padding</Text>
-          </Card>
-          <Card padding="small" variant="outlined">
-            <Text>Small Padding</Text>
-          </Card>
-          <Card padding="medium" variant="outlined">
-            <Text>Medium Padding</Text>
-          </Card>
-          <Card padding="large" variant="outlined">
-            <Text>Large Padding</Text>
-          </Card>
-        </View>
-      </View>
-      {/* Card Radius */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Border Radius</Text>
-        <View spacing="sm">
-          <Card radius="none" variant="outlined" padding="medium">
-            <Text>No Radius</Text>
-          </Card>
-          <Card radius="small" variant="outlined" padding="medium">
-            <Text>Small Radius</Text>
-          </Card>
-          <Card radius="medium" variant="outlined" padding="medium">
-            <Text>Medium Radius</Text>
-          </Card>
-          <Card radius="large" variant="outlined" padding="medium">
-            <Text>Large Radius</Text>
-          </Card>
-        </View>
-      </View>
-      {/* Clickable Cards */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Interactive Cards</Text>
-        <View spacing="sm">
-          <Card
-            clickable
-            onPress={() => handleCardPress('clickable')}
-            variant="outlined"
-            padding="medium"
-          >
-            <Text weight="semibold">Clickable Card</Text>
-            <Text size="small" color="secondary">
-              Click me to see interaction
-            </Text>
-          </Card>
-          <Card
-            clickable
-            disabled
-            onPress={() => handleCardPress('disabled')}
-            variant="outlined"
-            padding="medium"
-          >
-            <Text weight="semibold">Disabled Card</Text>
-            <Text size="small" color="secondary">
-              This card is disabled
-            </Text>
-          </Card>
-        </View>
-      </View>
-      {/* Complex Card Layout */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Complex Layout</Text>
-        <Card variant="elevated" padding="large" radius="medium">
-          <Text size="large" weight="bold">Product Card</Text>
-          <Text size="small" color="secondary" style={{ marginVertical: 8 }}>
-            This is a more complex card layout with multiple elements
-          </Text>
-          <View style={{ flexDirection: 'row', gap: 8, marginTop: 12 }}>
-            <Button size="small" variant="contained" intent="primary">
-              Buy Now
-            </Button>
-            <Button size="small" variant="outlined" intent="neutral">
-              Add to Cart
-            </Button>
-          </View>
-        </Card>
-      </View>
-    </View>
-    </Screen>
-  );
+import React from 'react';
+import { Screen, View, Text, Card, Button } from '../index';
+export const CardExamples = () => {
+  const handleCardPress = (cardType: string) => {
+    console.log(`Card pressed: ${cardType}`);
+  };
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Card Examples
+      </Text>
+      {/* Card Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Card variant="default" padding="medium">
+            <Text>Default Card</Text>
+            <Text size="small" color="secondary">
+              This is a default card with standard styling
+            </Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Outlined Card</Text>
+            <Text size="small" color="secondary">
+              This is an outlined card with border
+            </Text>
+          </Card>
+          <Card variant="elevated" padding="medium">
+            <Text>Elevated Card</Text>
+            <Text size="small" color="secondary">
+              This is an elevated card with shadow
+            </Text>
+          </Card>
+          <Card variant="filled" padding="medium">
+            <Text>Filled Card</Text>
+            <Text size="small" color="secondary">
+              This is a filled card with background
+            </Text>
+          </Card>
+        </View>
+      </View>
+      {/* Card Intents */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Intents</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Card intent="neutral" padding="medium" variant="outlined">
+            <Text>Neutral Card</Text>
+          </Card>
+          <Card intent="primary" padding="medium" variant="outlined">
+            <Text>Primary Card</Text>
+          </Card>
+          <Card intent="success" padding="medium" variant="outlined">
+            <Text>Success Card</Text>
+          </Card>
+          <Card intent="error" padding="medium" variant="outlined">
+            <Text>Error Card</Text>
+          </Card>
+          <Card intent="warning" padding="medium" variant="outlined">
+            <Text>Warning Card</Text>
+          </Card>
+          <Card intent="info" padding="medium" variant="outlined">
+            <Text>Info Card</Text>
+          </Card>
+        </View>
+      </View>
+      {/* Card Padding */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Padding</Text>
+        <View spacing="sm">
+          <Card padding="none" variant="outlined">
+            <Text>No Padding</Text>
+          </Card>
+          <Card padding="small" variant="outlined">
+            <Text>Small Padding</Text>
+          </Card>
+          <Card padding="medium" variant="outlined">
+            <Text>Medium Padding</Text>
+          </Card>
+          <Card padding="large" variant="outlined">
+            <Text>Large Padding</Text>
+          </Card>
+        </View>
+      </View>
+      {/* Card Radius */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Border Radius</Text>
+        <View spacing="sm">
+          <Card radius="none" variant="outlined" padding="medium">
+            <Text>No Radius</Text>
+          </Card>
+          <Card radius="small" variant="outlined" padding="medium">
+            <Text>Small Radius</Text>
+          </Card>
+          <Card radius="medium" variant="outlined" padding="medium">
+            <Text>Medium Radius</Text>
+          </Card>
+          <Card radius="large" variant="outlined" padding="medium">
+            <Text>Large Radius</Text>
+          </Card>
+        </View>
+      </View>
+      {/* Clickable Cards */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Interactive Cards</Text>
+        <View spacing="sm">
+          <Card
+            clickable
+            onPress={() => handleCardPress('clickable')}
+            variant="outlined"
+            padding="medium"
+          >
+            <Text weight="semibold">Clickable Card</Text>
+            <Text size="small" color="secondary">
+              Click me to see interaction
+            </Text>
+          </Card>
+          <Card
+            clickable
+            disabled
+            onPress={() => handleCardPress('disabled')}
+            variant="outlined"
+            padding="medium"
+          >
+            <Text weight="semibold">Disabled Card</Text>
+            <Text size="small" color="secondary">
+              This card is disabled
+            </Text>
+          </Card>
+        </View>
+      </View>
+      {/* Complex Card Layout */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Complex Layout</Text>
+        <Card variant="elevated" padding="large" radius="medium">
+          <Text size="large" weight="bold">Product Card</Text>
+          <Text size="small" color="secondary" style={{ marginVertical: 8 }}>
+            This is a more complex card layout with multiple elements
+          </Text>
+          <View style={{ flexDirection: 'row', gap: 8, marginTop: 12 }}>
+            <Button size="small" variant="contained" intent="primary">
+              Buy Now
+            </Button>
+            <Button size="small" variant="outlined" intent="neutral">
+              Add to Cart
+            </Button>
+          </View>
+        </Card>
+      </View>
+    </View>
+    </Screen>
+  );
 };