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/DividerExamples.tsx CHANGED Viewed

@@ -1,218 +1,218 @@
-import React from 'react';
-import { Screen, View, Text, Divider, Card } from '../index';
-export const DividerExamples = () => {
-  return (
-    <Screen background="primary" padding="lg">
-      <View spacing="none">
-      <Text size="large" weight="bold" align="center">
-        Divider Examples
-      </Text>
-      {/* Horizontal Dividers */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Horizontal Dividers</Text>
-        <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
-            <Text>Content above</Text>
-            <Divider orientation="horizontal" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Content above</Text>
-            <Divider orientation="horizontal" variant="dashed" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Content above</Text>
-            <Divider orientation="horizontal" variant="dotted" />
-            <Text>Content below</Text>
-          </Card>
-        </View>
-      </View>
-      {/* Divider Variants */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Variants</Text>
-        <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
-            <Text>Solid divider</Text>
-            <Divider variant="solid" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Dashed divider</Text>
-            <Divider variant="dashed" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Dotted divider</Text>
-            <Divider variant="dotted" />
-            <Text>Content below</Text>
-          </Card>
-        </View>
-      </View>
-      {/* Divider Thickness */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Thickness</Text>
-        <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
-            <Text>Thin divider</Text>
-            <Divider thickness="thin" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Medium divider</Text>
-            <Divider thickness="medium" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Thick divider</Text>
-            <Divider thickness="thick" />
-            <Text>Content below</Text>
-          </Card>
-        </View>
-      </View>
-      {/* Divider Intents */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Intents</Text>
-        <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
-            <Text>Primary divider</Text>
-            <Divider intent="primary" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-                    <Text>Neutral divider</Text>
-        <Divider intent="neutral" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Neutral divider</Text>
-            <Divider intent="neutral" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Success divider</Text>
-            <Divider intent="success" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Error divider</Text>
-            <Divider intent="error" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Warning divider</Text>
-            <Divider intent="warning" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Info divider</Text>
-            <Divider intent="info" />
-            <Text>Content below</Text>
-          </Card>
-        </View>
-      </View>
-      {/* Divider Spacing */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Spacing</Text>
-        <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
-            <Text>No spacing</Text>
-            <Divider spacing="none" />
-            <Text>Content immediately after</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Small spacing</Text>
-            <Divider spacing="small" />
-            <Text>Content with small spacing</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Medium spacing</Text>
-            <Divider spacing="medium" />
-            <Text>Content with medium spacing</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Large spacing</Text>
-            <Divider spacing="large" />
-            <Text>Content with large spacing</Text>
-          </Card>
-        </View>
-      </View>
-      {/* Divider with Content */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">With Content</Text>
-        <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
-            <Text>Content above</Text>
-            <Divider spacing="medium">
-              <Text size="small" color="secondary">OR</Text>
-            </Divider>
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Content above</Text>
-            <Divider spacing="medium" intent="primary">
-              <Text size="small" color="primary" weight="semibold">SECTION</Text>
-            </Divider>
-            <Text>Content below</Text>
-          </Card>
-        </View>
-      </View>
-      {/* Vertical Dividers */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Vertical Dividers</Text>
-        <Card variant="outlined" padding="medium">
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <Text>Left</Text>
-            <Divider orientation="vertical" />
-            <Text>Center</Text>
-            <Divider orientation="vertical" variant="dashed" />
-            <Text>Right</Text>
-          </View>
-        </Card>
-      </View>
-      {/* Custom Length */}
-      <View spacing="md">
-        <Text size="medium" weight="semibold">Custom Length</Text>
-        <View style={{ gap: 10 }}>
-          <Card variant="outlined" padding="medium">
-            <Text>Auto length</Text>
-            <Divider length="auto" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>Full length</Text>
-            <Divider length="full" />
-            <Text>Content below</Text>
-          </Card>
-          <Card variant="outlined" padding="medium">
-            <Text>50% length</Text>
-            <Divider length={50} />
-            <Text>Content below</Text>
-          </Card>
-        </View>
-      </View>
-    </View>
-    </Screen>
-  );
+import React from 'react';
+import { Screen, View, Text, Divider, Card } from '../index';
+export const DividerExamples = () => {
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Divider Examples
+      </Text>
+      {/* Horizontal Dividers */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Horizontal Dividers</Text>
+        <View style={{ gap: 10 }}>
+          <Card variant="outlined" padding="medium">
+            <Text>Content above</Text>
+            <Divider orientation="horizontal" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Content above</Text>
+            <Divider orientation="horizontal" variant="dashed" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Content above</Text>
+            <Divider orientation="horizontal" variant="dotted" />
+            <Text>Content below</Text>
+          </Card>
+        </View>
+      </View>
+      {/* Divider Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View style={{ gap: 10 }}>
+          <Card variant="outlined" padding="medium">
+            <Text>Solid divider</Text>
+            <Divider variant="solid" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Dashed divider</Text>
+            <Divider variant="dashed" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Dotted divider</Text>
+            <Divider variant="dotted" />
+            <Text>Content below</Text>
+          </Card>
+        </View>
+      </View>
+      {/* Divider Thickness */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Thickness</Text>
+        <View style={{ gap: 10 }}>
+          <Card variant="outlined" padding="medium">
+            <Text>Thin divider</Text>
+            <Divider thickness="thin" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Medium divider</Text>
+            <Divider thickness="medium" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Thick divider</Text>
+            <Divider thickness="thick" />
+            <Text>Content below</Text>
+          </Card>
+        </View>
+      </View>
+      {/* Divider Intents */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Intents</Text>
+        <View style={{ gap: 10 }}>
+          <Card variant="outlined" padding="medium">
+            <Text>Primary divider</Text>
+            <Divider intent="primary" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+                    <Text>Neutral divider</Text>
+        <Divider intent="neutral" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Neutral divider</Text>
+            <Divider intent="neutral" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Success divider</Text>
+            <Divider intent="success" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Error divider</Text>
+            <Divider intent="error" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Warning divider</Text>
+            <Divider intent="warning" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Info divider</Text>
+            <Divider intent="info" />
+            <Text>Content below</Text>
+          </Card>
+        </View>
+      </View>
+      {/* Divider Spacing */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Spacing</Text>
+        <View style={{ gap: 10 }}>
+          <Card variant="outlined" padding="medium">
+            <Text>No spacing</Text>
+            <Divider spacing="none" />
+            <Text>Content immediately after</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Small spacing</Text>
+            <Divider spacing="small" />
+            <Text>Content with small spacing</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Medium spacing</Text>
+            <Divider spacing="medium" />
+            <Text>Content with medium spacing</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Large spacing</Text>
+            <Divider spacing="large" />
+            <Text>Content with large spacing</Text>
+          </Card>
+        </View>
+      </View>
+      {/* Divider with Content */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">With Content</Text>
+        <View style={{ gap: 10 }}>
+          <Card variant="outlined" padding="medium">
+            <Text>Content above</Text>
+            <Divider spacing="medium">
+              <Text size="small" color="secondary">OR</Text>
+            </Divider>
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Content above</Text>
+            <Divider spacing="medium" intent="primary">
+              <Text size="small" color="primary" weight="semibold">SECTION</Text>
+            </Divider>
+            <Text>Content below</Text>
+          </Card>
+        </View>
+      </View>
+      {/* Vertical Dividers */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Vertical Dividers</Text>
+        <Card variant="outlined" padding="medium">
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <Text>Left</Text>
+            <Divider orientation="vertical" />
+            <Text>Center</Text>
+            <Divider orientation="vertical" variant="dashed" />
+            <Text>Right</Text>
+          </View>
+        </Card>
+      </View>
+      {/* Custom Length */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Custom Length</Text>
+        <View style={{ gap: 10 }}>
+          <Card variant="outlined" padding="medium">
+            <Text>Auto length</Text>
+            <Divider length="auto" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>Full length</Text>
+            <Divider length="full" />
+            <Text>Content below</Text>
+          </Card>
+          <Card variant="outlined" padding="medium">
+            <Text>50% length</Text>
+            <Divider length={50} />
+            <Text>Content below</Text>
+          </Card>
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
 };