npm - @idealyst/components - Versions diffs - 1.0.0 - Mend

@idealyst/components 1.0.0

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 (112) hide show

package/README.md +568 -0
package/package.json +107 -0
package/plugin/web.js +186 -0
package/src/Avatar/Avatar.native.tsx +44 -0
package/src/Avatar/Avatar.styles.tsx +67 -0
package/src/Avatar/Avatar.web.tsx +51 -0
package/src/Avatar/index.native.ts +2 -0
package/src/Avatar/index.ts +2 -0
package/src/Avatar/index.web.ts +2 -0
package/src/Avatar/types.ts +43 -0
package/src/Badge/Badge.native.tsx +43 -0
package/src/Badge/Badge.styles.tsx +154 -0
package/src/Badge/Badge.web.tsx +45 -0
package/src/Badge/index.native.ts +2 -0
package/src/Badge/index.ts +2 -0
package/src/Badge/index.web.ts +2 -0
package/src/Badge/types.ts +34 -0
package/src/Button/Button.native.tsx +39 -0
package/src/Button/Button.styles.tsx +215 -0
package/src/Button/Button.types.ts +12 -0
package/src/Button/Button.web.tsx +56 -0
package/src/Button/index.native.ts +3 -0
package/src/Button/index.ts +5 -0
package/src/Button/index.web.ts +3 -0
package/src/Button/types.ts +49 -0
package/src/Card/Card.native.tsx +52 -0
package/src/Card/Card.styles.tsx +240 -0
package/src/Card/Card.web.tsx +62 -0
package/src/Card/index.native.ts +3 -0
package/src/Card/index.ts +5 -0
package/src/Card/index.web.ts +3 -0
package/src/Card/types.ts +59 -0
package/src/Checkbox/Checkbox.native.tsx +99 -0
package/src/Checkbox/Checkbox.styles.tsx +292 -0
package/src/Checkbox/Checkbox.web.tsx +131 -0
package/src/Checkbox/index.native.ts +3 -0
package/src/Checkbox/index.ts +5 -0
package/src/Checkbox/index.web.ts +3 -0
package/src/Checkbox/types.ts +79 -0
package/src/Divider/Divider.native.tsx +145 -0
package/src/Divider/Divider.styles.tsx +602 -0
package/src/Divider/Divider.web.tsx +73 -0
package/src/Divider/index.native.ts +3 -0
package/src/Divider/index.ts +5 -0
package/src/Divider/index.web.ts +3 -0
package/src/Divider/types.ts +54 -0
package/src/Icon/Icon.native.tsx +39 -0
package/src/Icon/Icon.styles.tsx +50 -0
package/src/Icon/Icon.web.tsx +47 -0
package/src/Icon/icon-types.ts +7452 -0
package/src/Icon/index.native.ts +3 -0
package/src/Icon/index.ts +5 -0
package/src/Icon/index.web.ts +3 -0
package/src/Icon/types.ts +36 -0
package/src/Input/Input.native.tsx +75 -0
package/src/Input/Input.styles.tsx +177 -0
package/src/Input/Input.web.tsx +71 -0
package/src/Input/index.native.ts +3 -0
package/src/Input/index.ts +5 -0
package/src/Input/index.web.ts +3 -0
package/src/Input/types.ts +69 -0
package/src/Screen/Screen.native.tsx +41 -0
package/src/Screen/Screen.styles.tsx +60 -0
package/src/Screen/Screen.web.tsx +33 -0
package/src/Screen/index.native.ts +2 -0
package/src/Screen/index.ts +2 -0
package/src/Screen/index.web.ts +2 -0
package/src/Screen/types.ts +38 -0
package/src/Text/Text.native.tsx +36 -0
package/src/Text/Text.styles.tsx +67 -0
package/src/Text/Text.web.tsx +41 -0
package/src/Text/index.native.ts +3 -0
package/src/Text/index.ts +5 -0
package/src/Text/index.web.ts +3 -0
package/src/Text/types.ts +39 -0
package/src/View/View.native.tsx +56 -0
package/src/View/View.styles.tsx +103 -0
package/src/View/View.web.tsx +60 -0
package/src/View/index.native.ts +3 -0
package/src/View/index.ts +5 -0
package/src/View/index.web.ts +3 -0
package/src/View/types.ts +73 -0
package/src/examples/AllExamples.tsx +72 -0
package/src/examples/AvatarExamples.tsx +97 -0
package/src/examples/BadgeExamples.tsx +200 -0
package/src/examples/ButtonExamples.tsx +150 -0
package/src/examples/CardExamples.tsx +176 -0
package/src/examples/CheckboxExamples.tsx +217 -0
package/src/examples/DividerExamples.tsx +218 -0
package/src/examples/IconExamples.tsx +342 -0
package/src/examples/InputExamples.tsx +134 -0
package/src/examples/README.md +136 -0
package/src/examples/ScreenExamples.tsx +154 -0
package/src/examples/TextExamples.tsx +89 -0
package/src/examples/ThemeExtensionExamples.tsx +91 -0
package/src/examples/ValidationExamples.tsx +95 -0
package/src/examples/ViewExamples.tsx +129 -0
package/src/examples/extendedTheme.ts +331 -0
package/src/examples/index.ts +15 -0
package/src/index.native.ts +52 -0
package/src/index.ts +48 -0
package/src/theme/breakpoints.ts +8 -0
package/src/theme/colorResolver.ts +218 -0
package/src/theme/colors.ts +315 -0
package/src/theme/defaultThemes.ts +326 -0
package/src/theme/index.ts +188 -0
package/src/theme/themeBuilder.ts +602 -0
package/src/theme/unistyles.d.ts +6 -0
package/src/theme/variantHelpers.ts +584 -0
package/src/theme/variants.ts +56 -0
package/src/unistyles.d.ts +108 -0
package/src/unistyles.ts +43 -0

package/src/examples/CheckboxExamples.tsx ADDED Viewed

@@ -0,0 +1,217 @@
+import React, { useState } from 'react';
+import { Screen, View, Text, Checkbox } from '../index';
+export const CheckboxExamples = () => {
+  const [basicChecked, setBasicChecked] = useState(false);
+  const [primaryChecked, setPrimaryChecked] = useState(true);
+  const [successChecked, setSuccessChecked] = useState(false);
+  const [errorChecked, setErrorChecked] = useState(false);
+  const [indeterminateChecked, setIndeterminateChecked] = useState(false);
+  return (
+    <Screen background="primary" padding="lg">
+      <View spacing="none">
+      <Text size="large" weight="bold" align="center">
+        Checkbox Examples
+      </Text>
+      {/* Basic Checkbox */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Basic Checkbox</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Checkbox
+            checked={basicChecked}
+            onCheckedChange={setBasicChecked}
+            label="Basic checkbox"
+          />
+          <Checkbox
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Checked checkbox"
+          />
+          <Checkbox
+            checked={false}
+            onCheckedChange={() => {}}
+            label="Unchecked checkbox"
+          />
+        </View>
+      </View>
+      {/* Checkbox Sizes */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Sizes</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Checkbox
+            size="small"
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Small checkbox"
+          />
+          <Checkbox
+            size="medium"
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Medium checkbox"
+          />
+          <Checkbox
+            size="large"
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Large checkbox"
+          />
+        </View>
+      </View>
+      {/* Checkbox Intents */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Intents</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Checkbox
+            intent="primary"
+            checked={primaryChecked}
+            onCheckedChange={setPrimaryChecked}
+            label="Primary checkbox"
+          />
+          <Checkbox
+            intent="neutral"
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Neutral checkbox"
+          />
+          <Checkbox
+            intent="success"
+            checked={successChecked}
+            onCheckedChange={setSuccessChecked}
+            label="Success checkbox"
+          />
+          <Checkbox
+            intent="error"
+            checked={errorChecked}
+            onCheckedChange={setErrorChecked}
+            label="Error checkbox"
+          />
+          <Checkbox
+            intent="warning"
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Warning checkbox"
+          />
+          <Checkbox
+            intent="info"
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Info checkbox"
+          />
+        </View>
+      </View>
+      {/* Checkbox Variants */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Variants</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Checkbox
+            variant="default"
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Default variant"
+          />
+          <Checkbox
+            variant="outlined"
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Outlined variant"
+          />
+        </View>
+      </View>
+      {/* Checkbox States */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">States</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Checkbox
+            checked={false}
+            onCheckedChange={() => {}}
+            label="Normal state"
+          />
+          <Checkbox
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Checked state"
+          />
+          <Checkbox
+            indeterminate={true}
+            checked={indeterminateChecked}
+            onCheckedChange={setIndeterminateChecked}
+            label="Indeterminate state"
+          />
+          <Checkbox
+            checked={true}
+            disabled
+            onCheckedChange={() => {}}
+            label="Disabled checked"
+          />
+          <Checkbox
+            checked={false}
+            disabled
+            onCheckedChange={() => {}}
+            label="Disabled unchecked"
+          />
+        </View>
+      </View>
+      {/* Checkbox with Custom Children */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">Custom Content</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Checkbox
+            checked={true}
+            onCheckedChange={() => {}}
+          >
+            <Text>Custom label with </Text>
+            <Text weight="bold" color="primary">styled text</Text>
+          </Checkbox>
+          <Checkbox
+            checked={false}
+            onCheckedChange={() => {}}
+          >
+            <View>
+              <Text weight="semibold">Multi-line Label</Text>
+              <Text size="small" color="secondary">
+                This checkbox has a more complex label with multiple lines
+              </Text>
+            </View>
+          </Checkbox>
+        </View>
+      </View>
+      {/* Checkbox with Helper Text and Errors */}
+      <View spacing="md">
+        <Text size="medium" weight="semibold">With Helper Text</Text>
+        <View spacing="sm" style={{ gap: 10 }}>
+          <Checkbox
+            checked={true}
+            onCheckedChange={() => {}}
+            label="Checkbox with helper text"
+            helperText="This is some helpful information"
+          />
+          <Checkbox
+            checked={false}
+            onCheckedChange={() => {}}
+            label="Checkbox with error"
+            error="This field is required"
+            intent="error"
+          />
+          <Checkbox
+            checked={false}
+            onCheckedChange={() => {}}
+            label="Required checkbox"
+            required
+            helperText="This checkbox is required"
+          />
+        </View>
+      </View>
+    </View>
+    </Screen>
+  );
+};

package/src/examples/DividerExamples.tsx ADDED Viewed

@@ -0,0 +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>
+  );
+};