@kivid/native-components 1.0.0-alpha.1

package/src/components/Chip/index.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { Chip } from ".";
+
+import { View } from "react-native";
+import { ChipSizeEnum, ChipVariantEnum } from "./enums";
+import { SealVariantEnum } from "../Seal/enums";
+
+const meta: Meta<typeof Chip> = {
+  title: "Components/Chip",
+  component: Chip,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: Object.values(ChipSizeEnum),
+      description: "Size of the chip",
+      table: {
+        type: { summary: Object.values(ChipSizeEnum).join(" | ") },
+        defaultValue: { summary: "medium" },
+      },
+    },
+    sealVariant: {
+      control: { type: "select" },
+      options: Object.values(SealVariantEnum),
+      description: "Style variant of the chip",
+      table: {
+        type: { summary: Object.values(SealVariantEnum).join(" | ") },
+        defaultValue: { summary: SealVariantEnum.ADD },
+      },
+    },
+    variant: {
+      control: { type: "select" },
+      options: Object.values(ChipVariantEnum),
+      description: "Visual style of the chip",
+      table: {
+        type: { summary: Object.values(ChipVariantEnum).join(" | ") },
+        defaultValue: { summary: ChipVariantEnum.OUTLINE },
+      },
+    },
+    label: {
+      control: "text",
+      description: "Label text of the chip",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    className: {
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  args: {
+    label: "Add",
+  },
+};
+
+export const AllVariants: Story = {
+  render: (args) => (
+    <View className="flex flex-wrap gap-300">
+      <Chip {...args} sealVariant={SealVariantEnum.ADD} label="Add" />
+      <Chip {...args} sealVariant={SealVariantEnum.SUCCESS} label="Success" />
+      <Chip {...args} sealVariant={SealVariantEnum.ERROR} label="Error" />
+      <Chip {...args} sealVariant={SealVariantEnum.ALERT} label="Alert" />
+      <Chip {...args} sealVariant={SealVariantEnum.MINUS} label="Minus" />
+      <Chip {...args} sealVariant={SealVariantEnum.RIGHT} label="Right" />
+      <Chip {...args} sealVariant={SealVariantEnum.LEFT} label="Left" />
+    </View>
+  ),
+  args: {
+    size: ChipSizeEnum.MEDIUM,
+  },
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <View className="flex flex-wrap gap-300 items-center">
+      <Chip {...args} size={ChipSizeEnum.MEDIUM} label="Medium" />
+      <Chip {...args} size={ChipSizeEnum.LARGE} label="Large" />
+    </View>
+  ),
+  args: {
+    sealVariant: SealVariantEnum.ADD,
+  },
+};

package/src/components/Chip/index.tsx

@@ -0,0 +1,35 @@
+import { merge } from "@butterfly/tailwind-preset";
+import type { ChipProps } from "./types";
+import { chipVariants } from "./assets/class-variants";
+import { Seal } from "../Seal";
+import { Text, View } from "react-native";
+import { SealVariantEnum } from "../Seal/enums";
+
+export function Chip(props: ChipProps) {
+  const {
+    label,
+    className,
+    sealVariant = SealVariantEnum.ADD,
+    size = "medium",
+    variant = "outline",
+  } = props;
+
+  const labelStyles = merge(
+    "mx-auto",
+    size === "medium" ? "text-label_small_700" : "text-label_medium_700",
+    variant === "filled" ? "text-chia-200" : "text-chia-900"
+  );
+
+  return (
+    <View
+      className={merge(chipVariants({ size, variant, sealVariant }), className)}
+    >
+      <Seal
+        variant={sealVariant}
+        inverted={variant === "filled"}
+        size="small"
+      />
+      <Text className={labelStyles}>{label}</Text>
+    </View>
+  );
+}

package/src/components/Chip/types.ts

@@ -0,0 +1,13 @@
+import type { SealVariant } from "../Seal/types";
+import { ChipSizeEnum, ChipVariantEnum } from "./enums";
+
+export type ChipSize = ChipSizeEnum;
+export type ChipVariant = ChipVariantEnum;
+
+export interface ChipProps {
+  label: string;
+  className?: string;
+  sealVariant?: SealVariant;
+  size?: ChipSize;
+  variant?: ChipVariant;
+}

package/src/components/HighlightedText/index.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@storybook/react-native";
+import { HighlightedText } from ".";
+
+const meta = {
+  title: "Components/HighlightedText",
+  component: HighlightedText,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    text: {
+      control: "text",
+    },
+    highlightText: {
+      control: "text",
+    },
+    className: {
+      control: "text",
+    },
+    highlightTextClassName: {
+      control: "text",
+    },
+    reverse: {
+      control: "boolean",
+      description:
+        "If true, the highlighted text will be displayed before the regular text.",
+    },
+  },
+} satisfies Meta<typeof HighlightedText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: "This is a default text",
+  },
+};
+
+export const WithHighlight: Story = {
+  args: {
+    text: "This is text with",
+    highlightText: "highlighted content",
+  },
+};
+
+export const LabelVariant: Story = {
+  args: {
+    text: "Label text",
+    highlightText: "important",
+    className: "text-label_medium_300",
+    highlightTextClassName: "text-label_medium_700",
+  },
+};
+
+export const BodyVariant: Story = {
+  args: {
+    text: "Body text content",
+    highlightText: "highlighted part",
+    className: "text-body_medium_300",
+    highlightTextClassName: "text-body_medium_700",
+  },
+};
+
+export const TitleVariant: Story = {
+  args: {
+    text: "Title text content",
+    highlightText: "highlighted part",
+    className: "text-title_medium_300",
+    highlightTextClassName: "text-title_medium_700",
+  },
+};
+
+export const HeadlineVariant: Story = {
+  args: {
+    text: "Headline text content",
+    highlightText: "highlighted part",
+    className: "text-headline_medium_300",
+    highlightTextClassName: "text-headline_medium_700",
+  },
+};
+
+export const DisplayVariant: Story = {
+  args: {
+    text: "Display text content",
+    highlightText: "highlighted part",
+    className: "text-display_medium_300",
+    highlightTextClassName: "text-display_medium_700",
+  },
+};
+
+export const WithCustomClasses: Story = {
+  args: {
+    text: "Styled text",
+    highlightText: "with custom styling",
+    className: "text-tangerine-900",
+    highlightTextClassName: "text-mango-900 underline",
+  },
+};
+
+export const ReverseHighlight: Story = {
+  args: {
+    text: "text with reverse highlight",
+    highlightText: "Highlighted first",
+    reverse: true,
+    className: "text-label_medium_300",
+    highlightTextClassName: "text-label_medium_700",
+  },
+};

package/src/components/HighlightedText/index.tsx

@@ -0,0 +1,38 @@
+import type { HighlightedTextProps } from "./types";
+import { merge } from "@butterfly/tailwind-preset";
+import { Text } from "react-native";
+
+export function HighlightedText(props: HighlightedTextProps) {
+  const {
+    text,
+    highlightText,
+    className,
+    highlightTextClassName,
+    reverse,
+    ref,
+    ...rest
+  } = props;
+
+  const mergeClassName = merge("text-label_medium_300", className);
+  const mergeHighlightClassName = merge(
+    "text-label_medium_700",
+    highlightTextClassName
+  );
+
+  if (reverse) {
+    return (
+      <Text ref={ref} className={mergeClassName} {...rest}>
+        <Text className={mergeHighlightClassName}>{highlightText}</Text> {text}
+      </Text>
+    );
+  }
+
+  return (
+    <Text ref={ref} className={mergeClassName} {...rest}>
+      {text} <Text className={mergeHighlightClassName}>{highlightText}</Text>
+    </Text>
+  );
+}
+
+HighlightedText.displayName = "HighlightedText";
+export default HighlightedText;

package/src/components/HighlightedText/types.ts

@@ -0,0 +1,10 @@
+import { Text, TextProps } from "react-native";
+
+export interface HighlightedTextProps extends TextProps {
+  text: string;
+  highlightText?: string;
+  highlightTextClassName?: string;
+  className?: string;
+  ref?: React.RefObject<Text | null>;
+  reverse?: boolean;
+}

package/src/components/InformationStatus/components/GradientAdd/index.tsx

@@ -0,0 +1,74 @@
+import Svg, {
+  Path,
+  Defs,
+  Filter,
+  FeFlood,
+  FeBlend,
+  FeColorMatrix,
+  FeOffset,
+  FeGaussianBlur,
+  FeComposite,
+  G,
+} from "react-native-svg";
+import { GradientAddProps } from "./types";
+
+export function GradientAdd(props: GradientAddProps, ref?: React.Ref<Svg>) {
+  const { size = 24, color = "currentColor" } = props;
+
+  return (
+    <Svg
+      viewBox="0 0 16 16"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      ref={ref}
+      {...props}
+    >
+      <G filter="url(#filter0_i_3359_12285)">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.99999 2.6665C8.72036 2.6665 9.30434 3.26346 9.30434 3.99984V6.6665H12.029C12.7493 6.6665 13.3333 7.26346 13.3333 7.99984C13.3333 8.73622 12.7493 9.33317 12.029 9.33317H9.30434V11.9998C9.30434 12.7362 8.72036 13.3332 7.99999 13.3332C7.27962 13.3332 6.69564 12.7362 6.69564 11.9998V9.33317H3.971C3.25063 9.33317 2.66666 8.73622 2.66666 7.99984C2.66666 7.26346 3.25063 6.6665 3.971 6.6665H6.69564V3.99984C6.69564 3.26346 7.27962 2.6665 7.99999 2.6665Z"
+          fill="currentColor"
+        />
+      </G>
+      <Defs>
+        <Filter
+          id="filter0_i_3359_12285"
+          x="2.66666"
+          y="2.6665"
+          width="11.6667"
+          height="11.6665"
+          filterUnits="userSpaceOnUse"
+        >
+          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+          <FeBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <FeColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <FeOffset dx="1" dy="1" />
+          <FeGaussianBlur stdDeviation="1" />
+          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <FeColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.447059 0 0 0 0 0.403922 0 0 0 0 0.894118 0 0 0 0.4 0"
+          />
+          <FeBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_3359_12285"
+          />
+        </Filter>
+      </Defs>
+    </Svg>
+  );
+}

package/src/components/InformationStatus/components/GradientAdd/types.ts

@@ -0,0 +1,6 @@
+import { SvgProps } from "react-native-svg";
+
+export interface GradientAddProps extends SvgProps {
+  size?: number;
+  color?: string;
+}

package/src/components/InformationStatus/components/GradientAlert/index.tsx

@@ -0,0 +1,81 @@
+import Svg, {
+  Path,
+  Defs,
+  Filter,
+  FeFlood,
+  FeBlend,
+  FeColorMatrix,
+  FeOffset,
+  FeGaussianBlur,
+  FeComposite,
+  G,
+  SvgProps,
+} from "react-native-svg";
+import { GradientAlertProps } from "./types";
+
+export function GradientAlert(props: GradientAlertProps, ref?: React.Ref<Svg>) {
+  const { size = 24, color = "currentColor" } = props;
+
+  return (
+    <Svg
+      viewBox="0 0 16 16"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      ref={ref}
+      {...props}
+    >
+      <G filter="url(#filter0_i_3359_12282)">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.00001 2C8.73638 2 9.33334 2.58216 9.33334 3.30028V9.36639C9.33334 10.0845 8.73638 10.6667 8.00001 10.6667C7.26363 10.6667 6.66667 10.0845 6.66667 9.36639V3.30028C6.66667 2.58216 7.26363 2 8.00001 2Z"
+          fill="currentColor"
+        />
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.00001 11.3333C8.73638 11.3333 9.33334 11.9154 9.33334 12.6336V12.6997C9.33334 13.4178 8.73638 14 8.00001 14C7.26363 14 6.66667 13.4178 6.66667 12.6997V12.6336C6.66667 11.9154 7.26363 11.3333 8.00001 11.3333Z"
+          fill="currentColor"
+        />
+      </G>
+      <Defs>
+        <Filter
+          id="filter0_i_3359_12282"
+          x="6.66667"
+          y="2"
+          width="3.66667"
+          height="13"
+          filterUnits="userSpaceOnUse"
+        >
+          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+          <FeBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <FeColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <FeOffset dx="1" dy="1" />
+          <FeGaussianBlur stdDeviation="1" />
+          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <FeColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.960784 0 0 0 0 0.541176 0 0 0 0 0.239216 0 0 0 0.4 0"
+          />
+          <FeBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_3359_12282"
+          />
+        </Filter>
+      </Defs>
+    </Svg>
+  );
+}

package/src/components/InformationStatus/components/GradientAlert/types.ts

@@ -0,0 +1,6 @@
+import { SvgProps } from "react-native-svg";
+
+export interface GradientAlertProps extends SvgProps {
+  size?: number;
+  color?: string;
+}

package/src/components/InformationStatus/components/GradientCheck/index.tsx

@@ -0,0 +1,75 @@
+import Svg, {
+  Path,
+  Defs,
+  Filter,
+  FeFlood,
+  FeBlend,
+  FeColorMatrix,
+  FeOffset,
+  FeGaussianBlur,
+  FeComposite,
+  G,
+  SvgProps,
+} from "react-native-svg";
+import { GradientCheckProps } from "./types";
+
+export function GradientCheck(props: GradientCheckProps, ref?: React.Ref<Svg>) {
+  const { size = 24, color = "currentColor" } = props;
+
+  return (
+    <Svg
+      viewBox="0 0 16 16"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      ref={ref}
+      {...props}
+    >
+      <G filter="url(#filter0_i_3359_12276)">
+        <Path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M12.8985 4.39037C13.4574 4.93089 13.4806 5.83095 12.9504 6.40072L7.97736 11.5567C7.71389 11.8398 7.34787 12.0001 6.96506 12C6.58225 11.9999 6.2163 11.8394 5.95297 11.5562L3.04912 8.40463C2.51919 7.8346 2.54288 6.93454 3.10203 6.3943C3.66118 5.85406 4.54404 5.87821 5.07397 6.44825L6.96589 8.51126L10.9265 4.44334C11.4567 3.87357 12.3396 3.84985 12.8985 4.39037Z"
+          fill="currentColor"
+        />
+      </G>
+      <Defs>
+        <Filter
+          id="filter0_i_3359_12276"
+          x="2.66667"
+          y="4"
+          width="11.6667"
+          height="9"
+          filterUnits="userSpaceOnUse"
+        >
+          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+          <FeBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <FeColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <FeOffset dx="1" dy="1" />
+          <FeGaussianBlur stdDeviation="1" />
+          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <FeColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.215686 0 0 0 0 0.886275 0 0 0 0 0.439216 0 0 0 0.4 0"
+          />
+          <FeBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_3359_12276"
+          />
+        </Filter>
+      </Defs>
+    </Svg>
+  );
+}

package/src/components/InformationStatus/components/GradientCheck/types.ts

@@ -0,0 +1,6 @@
+import { SvgProps } from "react-native-svg";
+
+export interface GradientCheckProps extends SvgProps {
+  size?: number;
+  color?: string;
+}

package/src/components/InformationStatus/components/GradientClose/index.tsx

@@ -0,0 +1,73 @@
+import Svg, {
+  Path,
+  Defs,
+  Filter,
+  FeFlood,
+  FeBlend,
+  FeColorMatrix,
+  FeOffset,
+  FeGaussianBlur,
+  FeComposite,
+  G,
+  SvgProps,
+} from "react-native-svg";
+import { GradientCloseProps } from "./types";
+
+export function GradientClose(props: GradientCloseProps, ref?: React.Ref<Svg>) {
+  const { size = 24, color = "currentColor" } = props;
+
+  return (
+    <Svg
+      viewBox="0 0 16 16"
+      fill="none"
+      width={size}
+      height={size}
+      color={color}
+      ref={ref}
+      {...props}
+    >
+      <G filter="url(#filter0_i_3359_12279)">
+        <Path
+          d="M12.1996 5.86591C12.7827 5.28288 12.7929 4.3479 12.2226 3.77757C11.6523 3.20721 10.7173 3.2175 10.1342 3.80054L8.02294 5.91184L5.86576 3.75461C5.29541 3.18429 4.36043 3.19454 3.7774 3.77757C3.19439 4.36061 3.18411 5.29559 3.75446 5.86591L5.91166 8.02309L3.80036 10.1344C3.21733 10.7174 3.20705 11.6524 3.7774 12.2228C4.34774 12.7931 5.28272 12.7828 5.86576 12.1998L7.97706 10.0885L10.1342 12.2457C10.7046 12.8161 11.6396 12.8058 12.2226 12.2228C12.8056 11.6397 12.8159 10.7048 12.2455 10.1344L10.0883 7.97721L12.1996 5.86591Z"
+          fill="currentColor"
+        />
+      </G>
+      <Defs>
+        <Filter
+          id="filter0_i_3359_12279"
+          x="3.33333"
+          y="3.3335"
+          width="10.3333"
+          height="10.3335"
+          filterUnits="userSpaceOnUse"
+        >
+          <FeFlood floodOpacity="0" result="BackgroundImageFix" />
+          <FeBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="BackgroundImageFix"
+            result="shape"
+          />
+          <FeColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <FeOffset dx="1" dy="1" />
+          <FeGaussianBlur stdDeviation="1" />
+          <FeComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+          <FeColorMatrix
+            type="matrix"
+            values="0 0 0 0 0.898039 0 0 0 0 0.270588 0 0 0 0 0.270588 0 0 0 0.4 0"
+          />
+          <FeBlend
+            mode="normal"
+            in2="shape"
+            result="effect1_innerShadow_3359_12279"
+          />
+        </Filter>
+      </Defs>
+    </Svg>
+  );
+}

package/src/components/InformationStatus/components/GradientClose/types.ts

@@ -0,0 +1,6 @@
+import { SvgProps } from "react-native-svg";
+
+export interface GradientCloseProps extends SvgProps {
+  size?: number;
+  color?: string;
+}

package/src/components/InformationStatus/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./GradientAdd";
+export * from "./GradientAlert";
+export * from "./GradientCheck";
+export * from "./GradientClose";

package/src/components/InformationStatus/enums.ts

@@ -0,0 +1,6 @@
+export enum InformationStatusOptionsEnum {
+  SUCCESS = "success",
+  ERROR = "error",
+  WARNING = "warning",
+  ADD = "add",
+}