dripsy-variants 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Axel Valles
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,218 @@
+# dripsy-variants
+
+**Variant utility for Dripsy** – A lightweight helper to build style variants and compound variants using `sx` props.
+
+> Inspired by Tailwind Variants and styled-system patterns.
+
+## ✨ Features
+
+- ✅ Define `base` styles
+- ✅ Support for multiple `variants`
+- ✅ Support for `compoundVariants`
+- ✅ `defaultVariants` handling
+- ✅ Type-safe with full TypeScript support
+
+## 📦 Installation
+
+```bash
+npm install dripsy-variants
+# or
+yarn add dripsy-variants
+```
+
+> Make sure you also have `dripsy` installed.
+
+## 🚀 Usage
+
+```typescript
+import { createDripsyVariant } from "dripsy-variants";
+
+const getButtonStyles = createDripsyVariant({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  variants: {
+    variant: {
+      primary: { backgroundColor: "#0F0F0F" },
+      secondary: { backgroundColor: "#E8E8E8" },
+      link: { backgroundColor: "transparent" },
+    },
+    size: {
+      md: { py: "$1_5", px: "$2", borderRadius: 16 },
+      sm: { py: "$1", px: "$2", borderRadius: 12 },
+    },
+    disabled: {
+      true: {},
+      false: {},
+    },
+    pressed: {
+      true: {},
+      false: {},
+    },
+  },
+  compoundVariants: [
+    {
+      pressed: ["true"],
+      variant: ["primary"],
+      sx: { backgroundColor: "#454545" },
+    },
+    {
+      pressed: ["true"],
+      variant: ["secondary"],
+      sx: { backgroundColor: "#D3D3D3" },
+    },
+    {
+      disabled: ["true"],
+      variant: ["primary"],
+      sx: { backgroundColor: "#F3F3F3" },
+    },
+    {
+      disabled: ["true"],
+      variant: ["secondary"],
+      sx: { backgroundColor: "#F3F3F3" },
+    },
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+});
+
+const getTextStyles = createSxVariant({
+  base: {
+    textAlign: "center",
+    flex: 1,
+  },
+  variants: {
+    variant: {
+      primary: { color: "$white" },
+      secondary: { color: "#2A2E2F" },
+      link: { color: "#2A2E2F" },
+    },
+    size: {
+      md: { variant: "text.$buttonMd" },
+      sm: { variant: "text.$buttonSm" },
+    },
+    disabled: {
+      true: {},
+      false: {},
+    },
+    pressed: {
+      true: {},
+      false: {},
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: ["true"],
+      variant: ["primary"],
+      sx: { color: "#A8A8A8" },
+    },
+    {
+      disabled: ["true"],
+      variant: ["secondary"],
+      sx: { color: "#D3D3D3" },
+    },
+    {
+      disabled: ["true"],
+      variant: ["link"],
+      sx: { color: "#A8A8A8" },
+    },
+  ],
+  defaultVariants: {
+    variant: "primary",
+    size: "md",
+  },
+});
+
+// Usage
+export const Button = ({
+  title,
+  onPress = () => {},
+  icon,
+  isLoading = false,
+  disabled = false,
+  sx = {},
+  variant = "primary",
+  size = "md",
+}: ButtonProps) => {
+  const sxConverter = useSx();
+  const { theme } = useDripsyTheme();
+
+  return (
+    <Pressable
+      disabled={isLoading || disabled}
+      onPress={onPress}
+      style={({ pressed }) =>
+        sxConverter({
+          ...getButtonStyles({
+            variant,
+            size,
+            pressed: pressed ? "true" : "false",
+            disabled: disabled ? "true" : "false",
+          }),
+          ...sx,
+        })
+      }
+    >
+      {({ pressed }) => {
+        const textStyles = getTextStyles({
+          variant,
+          size,
+          disabled: disabled ? "true" : "false",
+          pressed: pressed ? "true" : "false",
+        });
+
+        const colorToken = textStyles.color as keyof typeof theme.colors;
+        const resolvedColor = theme.colors?.[colorToken] ?? colorToken;
+
+        const renderedIcon = enhanceIconElement(icon, {
+          color: resolvedColor,
+          size: 16,
+        });
+
+        return (
+          <>
+            <View sx={{ width: 20 }}>{isLoading && <Spinner />}</View>
+            <Text sx={textStyles}>{title}</Text>
+            <View sx={{ width: 20 }}>{icon && renderedIcon}</View>
+          </>
+        );
+      }}
+    </Pressable>
+  );
+};
+```
+
+## 🧠 API Reference
+
+### `createDripsyVariant(config)`
+
+#### `config.base?: SxProp`
+
+Base styles applied to all variants.
+
+#### `config.variants?: Record<string, Record<string, SxProp>>`
+
+Object containing named variants (like `variant`, `size`, etc.).
+
+#### `config.defaultVariants?: { [K in keyof Variants]?: keyof Variants[K] }`
+
+Default values used when no variant prop is passed.
+
+#### `config.compoundVariants?: CompoundVariant[]`
+
+List of compound variant conditions to apply extra styles based on a combination of variant values.
+
+Each `CompoundVariant` is:
+
+{
+sx: SxProp;
+[key: string]: string[]; // matches variant keys and values
+}
+
+## 🪪 License
+
+MIT License © 2025 Axel Valles

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { SxProp } from "dripsy";
+type VariantDefinitions = Record<string, Record<string, SxProp>>;
+type CompoundVariant = {
+    sx: SxProp;
+} & {
+    [key: string]: string[] | undefined;
+};
+type Config<Variants extends VariantDefinitions = VariantDefinitions> = {
+    base?: SxProp;
+    variants?: Variants;
+    compoundVariants?: CompoundVariant[];
+    defaultVariants?: {
+        [K in keyof Variants]?: keyof Variants[K];
+    };
+};
+type VariantProps<V extends VariantDefinitions> = {
+    [K in keyof V]?: keyof V[K];
+};
+export declare function createDripsyVariant<V extends VariantDefinitions = VariantDefinitions>(config: Config<V>): (props?: VariantProps<V>) => any;
+export {};

package/dist/index.js

@@ -0,0 +1,27 @@
+export function createDripsyVariant(config) {
+    return (props = {}) => {
+        const { base = {}, variants = {}, compoundVariants = [], defaultVariants = {}, } = config;
+        const resolved = [base];
+        Object.keys(variants).forEach((key) => {
+            const selected = props[key] ?? defaultVariants[key];
+            if (selected && variants[key]?.[selected]) {
+                resolved.push(variants[key][selected]);
+            }
+        });
+        for (const cv of compoundVariants) {
+            const match = Object.entries(cv).every(([key, value]) => {
+                if (key === "sx")
+                    return true;
+                const propKey = key;
+                const propValue = props[propKey] ?? defaultVariants[propKey];
+                return Array.isArray(value)
+                    ? value.includes(propValue)
+                    : propValue === value;
+            });
+            if (match) {
+                resolved.push(cv.sx);
+            }
+        }
+        return Object.assign({}, ...resolved);
+    };
+}

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "dripsy-variants",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc"
+  },
+  "keywords": [],
+  "author": "axel valles",
+  "license": "MIT",
+  "description": "",
+  "dependencies": {
+    "dripsy": "^4.3.8"
+  },
+  "devDependencies": {
+    "typescript": "^5.8.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,66 @@
+// lib/createSxVariant.ts
+import { SxProp } from "dripsy";
+
+type VariantDefinitions = Record<string, Record<string, SxProp>>;
+
+type CompoundVariant = {
+  sx: SxProp;
+  [key: string]: string[] | SxProp;
+};
+
+type Config<Variants extends VariantDefinitions = VariantDefinitions> = {
+  base?: SxProp;
+  variants?: Variants;
+  compoundVariants?: CompoundVariant[];
+  defaultVariants?: {
+    [K in keyof Variants]?: keyof Variants[K];
+  };
+};
+
+type VariantProps<V extends VariantDefinitions> = {
+  [K in keyof V]?: keyof V[K];
+};
+
+export function createDripsyVariant<
+  V extends VariantDefinitions = VariantDefinitions
+>(config: Config<V>) {
+  return (props: VariantProps<V> = {}) => {
+    const {
+      base = {} as SxProp,
+      variants = {} as V,
+      compoundVariants = [],
+      defaultVariants = {} as {
+        [K in keyof V]?: keyof V[K];
+      },
+    } = config;
+
+    const resolved: SxProp[] = [base];
+
+    (Object.keys(variants) as (keyof V)[]).forEach((key) => {
+      const selected = props[key] ?? defaultVariants[key];
+      if (selected && variants[key]?.[selected]) {
+        resolved.push(variants[key][selected]);
+      }
+    });
+
+    for (const cv of compoundVariants) {
+      const match = Object.entries(cv).every(([key, value]) => {
+        if (key === "sx") return true;
+
+        const propKey = key as keyof V;
+        const propValue = props[propKey] ?? defaultVariants[propKey];
+
+        return Array.isArray(value)
+          ? value.includes(propValue as string)
+          : propValue === (value as any);
+      });
+
+      if (match) {
+        resolved.push(cv.sx);
+      }
+    }
+
+    // ✅ Fusionar todos los objetos en uno
+    return Object.assign({}, ...resolved);
+  };
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM"],
+    "declaration": true,
+    "outDir": "dist",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}