@candiesocean/craftui 0.1.0

package/lib/typescript/src/squircle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"squircle.d.ts","sourceRoot":"","sources":["../../../src/squircle.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAA4B,CAAC;AAC3C,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAImsyB,CAAC;kBAAoB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAJ5ryB,CAAC;AAEzC,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,KAAK,EAAE,KAAK,IAAI,aAAa,EAAE,CAAC"}

package/lib/typescript/src/text.d.ts

@@ -0,0 +1,43 @@
+import type { TextProps as RNTextProps } from 'react-native';
+import type { VariantProps } from 'tailwind-variants';
+export declare const textStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        display: string;
+        title: string;
+        subtitle: string;
+        body: string;
+        'body-secondary': string;
+        caption: string;
+        'caption-secondary': string;
+        button: string;
+    };
+}, undefined, "text-foreground", {
+    variant: {
+        display: string;
+        title: string;
+        subtitle: string;
+        body: string;
+        'body-secondary': string;
+        caption: string;
+        'caption-secondary': string;
+        button: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        display: string;
+        title: string;
+        subtitle: string;
+        body: string;
+        'body-secondary': string;
+        caption: string;
+        'caption-secondary': string;
+        button: string;
+    };
+}, undefined, "text-foreground", unknown, unknown, undefined>>;
+export type TextVariant = NonNullable<VariantProps<typeof textStyles>['variant']>;
+export interface TextProps extends RNTextProps, VariantProps<typeof textStyles> {
+    className?: string;
+}
+declare function Text({ variant, children, className, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+export default Text;
+//# sourceMappingURL=text.d.ts.map

package/lib/typescript/src/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;8DAiBrB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,WAAW,CACnC,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC,SAAS,CAAC,CAC3C,CAAC;AAEF,MAAM,WAAW,SACf,SAAQ,WAAW,EACjB,YAAY,CAAC,OAAO,UAAU,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,IAAI,CAAC,EAAE,OAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAM3E;AAED,eAAe,IAAI,CAAC"}

package/lib/typescript/src/theme.d.ts

@@ -0,0 +1,22 @@
+export declare const themeColorVariables: {
+    readonly background: "--color-background";
+    readonly backgroundElement: "--color-background-element";
+    readonly foreground: "--color-foreground";
+    readonly text: "--color-text";
+    readonly textSecondary: "--color-text-secondary";
+    readonly primary: "--color-primary";
+    readonly primaryForeground: "--color-primary-foreground";
+    readonly muted: "--color-muted";
+    readonly mutedForeground: "--color-muted-foreground";
+    readonly card: "--color-card";
+    readonly cardForeground: "--color-card-foreground";
+    readonly border: "--color-border";
+    readonly destructive: "--color-destructive";
+    readonly success: "--color-success";
+    readonly warning: "--color-warning";
+};
+export type ThemeColorName = keyof typeof themeColorVariables;
+export declare const requiredThemeVariables: ("--color-background" | "--color-background-element" | "--color-foreground" | "--color-text" | "--color-text-secondary" | "--color-primary" | "--color-primary-foreground" | "--color-muted" | "--color-muted-foreground" | "--color-card" | "--color-card-foreground" | "--color-border" | "--color-destructive" | "--color-success" | "--color-warning")[];
+export declare function useThemeColor(colorName: ThemeColorName): string;
+export declare function useThemeColors(): Record<ThemeColorName, string>;
+//# sourceMappingURL=theme.d.ts.map

package/lib/typescript/src/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;CAgBtB,CAAC;AAEX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,mBAAmB,CAAC;AAE9D,eAAO,MAAM,sBAAsB,8VAAqC,CAAC;AAEzE,wBAAgB,aAAa,CAAC,SAAS,EAAE,cAAc,GAAG,MAAM,CAE/D;AAED,wBAAgB,cAAc,IAAI,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,CAQ/D"}

package/package.json

@@ -0,0 +1,121 @@
+{
+  "name": "@candiesocean/craftui",
+  "version": "0.1.0",
+  "description": "Minimal React Native UI primitives for Expo apps using Uniwind, Pressto, and rn-squircle",
+  "main": "./lib/module/index.js",
+  "react-native": "./src/index.tsx",
+  "types": "./lib/typescript/src/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "react-native": "./src/index.tsx",
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "example": "yarn workspace craftui-example",
+    "build": "bob build",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "pack:check": "npm pack --dry-run",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\""
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "ui",
+    "design-system",
+    "uniwind",
+    "rn-squircle",
+    "pressto"
+  ],
+  "author": "candiesocean <candiesoocean@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@types/react": "^19.1.12",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "expo": "^55.0.0",
+    "expo-image": "~55.0.5",
+    "pressto": "^0.6.1",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-builder-bob": "^0.40.18",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-native-reanimated": "~4.2.1",
+    "react-native-worklets": "0.7.2",
+    "rn-squircle": "^1.2.4",
+    "tailwindcss": "^4.0.0",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2",
+    "uniwind": "^1.3.1"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2"
+  },
+  "peerDependencies": {
+    "expo": ">=55.0.0",
+    "expo-image": ">=55.0.0",
+    "pressto": ">=0.6.0",
+    "react": ">=19.0.0",
+    "react-native": ">=0.81.0",
+    "react-native-gesture-handler": ">=2.30.0",
+    "react-native-reanimated": ">=4.2.0",
+    "react-native-worklets": ">=0.7.0",
+    "rn-squircle": ">=1.2.0",
+    "uniwind": ">=1.3.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  }
+}

package/src/button.tsx

@@ -0,0 +1,202 @@
+import type { CustomPressableProps } from 'pressto';
+import type { ReactNode } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import type { VariantProps } from 'tailwind-variants';
+import { tv } from 'tailwind-variants';
+import { withUniwind } from 'uniwind';
+import { cn } from './internal/cn';
+import Pressable from './pressable';
+import Squircle from './squircle';
+import Text from './text';
+import { useThemeColor } from './theme';
+
+const StyledView = withUniwind(View);
+
+export const buttonStyles = tv({
+  slots: {
+    container: 'items-center justify-center flex-row gap-2',
+    label: 'font-semibold',
+  },
+  variants: {
+    variant: {
+      'primary': {
+        container: 'bg-primary',
+        label: 'text-primary-foreground',
+      },
+      'secondary': {
+        container: 'bg-muted',
+        label: 'text-foreground',
+      },
+      'outline': {
+        container: 'bg-transparent border-2 border-border',
+        label: 'text-foreground',
+      },
+      'ghost': {
+        container: 'bg-transparent',
+        label: 'text-primary',
+      },
+      'destructive': {
+        container: 'bg-destructive',
+        label: 'text-primary-foreground',
+      },
+      'destructive-light': {
+        container: 'bg-destructive/10',
+        label: 'text-destructive',
+      },
+    },
+    size: {
+      sm: {
+        container: 'px-4 py-2',
+        label: 'text-sm',
+      },
+      default: {
+        container: 'px-6 py-4',
+        label: 'text-base',
+      },
+      lg: {
+        container: 'px-8 py-5',
+        label: 'text-lg',
+      },
+      icon: {
+        container: 'p-2',
+        label: '',
+      },
+    },
+    disabled: {
+      true: {
+        container: 'opacity-50',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+    size: 'default',
+    disabled: false,
+  },
+});
+
+type ButtonVariants = VariantProps<typeof buttonStyles>;
+
+export type ButtonVariant = NonNullable<ButtonVariants['variant']>;
+export type ButtonSize = NonNullable<ButtonVariants['size']>;
+
+export interface ButtonProps
+  extends Omit<CustomPressableProps, 'children' | 'onPress'>,
+    ButtonVariants {
+  children?: ReactNode;
+  label?: string;
+  loading?: boolean;
+  leadingAccessory?: ReactNode;
+  trailingAccessory?: ReactNode;
+  className?: string;
+  labelClassName?: string;
+  onPress?: () => void | Promise<void>;
+}
+
+export function useButtonForegroundColor(
+  variant: ButtonVariant = 'primary'
+): string {
+  const primaryForeground = useThemeColor('primaryForeground');
+  const foreground = useThemeColor('foreground');
+  const primary = useThemeColor('primary');
+  const destructive = useThemeColor('destructive');
+
+  if (variant === 'secondary' || variant === 'outline') {
+    return foreground;
+  }
+
+  if (variant === 'ghost') {
+    return primary;
+  }
+
+  if (variant === 'destructive-light') {
+    return destructive;
+  }
+
+  return primaryForeground;
+}
+
+export function getButtonAccessorySize(size: ButtonSize = 'default'): number {
+  if (size === 'sm') {
+    return 16;
+  }
+
+  if (size === 'lg') {
+    return 24;
+  }
+
+  return 20;
+}
+
+function Button({
+  children,
+  label,
+  variant = 'primary',
+  size = 'default',
+  disabled = false,
+  loading = false,
+  leadingAccessory,
+  trailingAccessory,
+  className,
+  labelClassName,
+  onPress,
+  ...props
+}: ButtonProps) {
+  const styles = buttonStyles({ variant, size, disabled: disabled || loading });
+  const foregroundColor = useButtonForegroundColor(variant);
+
+  const renderContent = () => {
+    if (children) {
+      return (
+        <StyledView className={cn({ 'opacity-0': loading })}>
+          {children}
+        </StyledView>
+      );
+    }
+
+    return (
+      <>
+        {leadingAccessory && (
+          <StyledView className={cn({ 'opacity-0': loading })}>
+            {leadingAccessory}
+          </StyledView>
+        )}
+        {label && (
+          <Text
+            className={cn(styles.label(), labelClassName, {
+              'opacity-0': loading,
+            })}
+          >
+            {label}
+          </Text>
+        )}
+        {trailingAccessory && (
+          <StyledView className={cn({ 'opacity-0': loading })}>
+            {trailingAccessory}
+          </StyledView>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <Pressable
+      onPress={onPress}
+      enabled={!disabled && !loading}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: disabled || loading }}
+      {...props}
+    >
+      <Squircle borderRadius={12} className={cn(styles.container(), className)}>
+        {renderContent()}
+        {loading && (
+          <StyledView className="absolute inset-0 items-center justify-center">
+            <ActivityIndicator size="small" color={foregroundColor} />
+          </StyledView>
+        )}
+      </Squircle>
+    </Pressable>
+  );
+}
+
+export default Button;

package/src/image.tsx

@@ -0,0 +1 @@
+export { Image as default } from './squircle';

package/src/index.tsx

@@ -0,0 +1,25 @@
+export { default as Button } from './button';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './button';
+export {
+  buttonStyles,
+  getButtonAccessorySize,
+  useButtonForegroundColor,
+} from './button';
+
+export { default as Image } from './image';
+
+export { default as Pressable } from './pressable';
+
+export { default as Squircle, Image as SquircleImage } from './squircle';
+
+export { default as Text } from './text';
+export type { TextProps, TextVariant } from './text';
+export { textStyles } from './text';
+
+export type { ThemeColorName } from './theme';
+export {
+  requiredThemeVariables,
+  themeColorVariables,
+  useThemeColor,
+  useThemeColors,
+} from './theme';

package/src/internal/cn.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/pressable.tsx

@@ -0,0 +1,6 @@
+import { PressableScale } from 'pressto';
+import { withUniwind } from 'uniwind';
+
+const Pressable = withUniwind(PressableScale);
+
+export default Pressable;

package/src/squircle.tsx

@@ -0,0 +1,8 @@
+import { SquircleImage, SquircleView } from 'rn-squircle';
+import { withUniwind } from 'uniwind';
+
+const Squircle = withUniwind(SquircleView);
+const Image = withUniwind(SquircleImage);
+
+export default Squircle;
+export { Image, Image as SquircleImage };

package/src/text.tsx

@@ -0,0 +1,47 @@
+import type { TextProps as RNTextProps } from 'react-native';
+import { Text as RNText } from 'react-native';
+import type { VariantProps } from 'tailwind-variants';
+import { tv } from 'tailwind-variants';
+import { withUniwind } from 'uniwind';
+import { cn } from './internal/cn';
+
+const StyledText = withUniwind(RNText);
+
+export const textStyles = tv({
+  base: 'text-foreground',
+  variants: {
+    variant: {
+      'display': 'text-3xl font-bold',
+      'title': 'text-2xl font-bold',
+      'subtitle': 'text-xl font-semibold',
+      'body': 'text-base',
+      'body-secondary': 'text-base text-text-secondary',
+      'caption': 'text-sm',
+      'caption-secondary': 'text-sm text-text-secondary',
+      'button': 'text-base font-semibold text-primary-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'body',
+  },
+});
+
+export type TextVariant = NonNullable<
+  VariantProps<typeof textStyles>['variant']
+>;
+
+export interface TextProps
+  extends RNTextProps,
+    VariantProps<typeof textStyles> {
+  className?: string;
+}
+
+function Text({ variant = 'body', children, className, ...props }: TextProps) {
+  return (
+    <StyledText className={cn(textStyles({ variant }), className)} {...props}>
+      {children}
+    </StyledText>
+  );
+}
+
+export default Text;

package/src/theme.ts

@@ -0,0 +1,37 @@
+import { useCSSVariable } from 'uniwind';
+
+export const themeColorVariables = {
+  background: '--color-background',
+  backgroundElement: '--color-background-element',
+  foreground: '--color-foreground',
+  text: '--color-text',
+  textSecondary: '--color-text-secondary',
+  primary: '--color-primary',
+  primaryForeground: '--color-primary-foreground',
+  muted: '--color-muted',
+  mutedForeground: '--color-muted-foreground',
+  card: '--color-card',
+  cardForeground: '--color-card-foreground',
+  border: '--color-border',
+  destructive: '--color-destructive',
+  success: '--color-success',
+  warning: '--color-warning',
+} as const;
+
+export type ThemeColorName = keyof typeof themeColorVariables;
+
+export const requiredThemeVariables = Object.values(themeColorVariables);
+
+export function useThemeColor(colorName: ThemeColorName): string {
+  return useCSSVariable(themeColorVariables[colorName]) as string;
+}
+
+export function useThemeColors(): Record<ThemeColorName, string> {
+  const values = useCSSVariable(requiredThemeVariables) as string[];
+  const colorNames = Object.keys(themeColorVariables) as ThemeColorName[];
+
+  return colorNames.reduce((acc, name, index) => {
+    acc[name] = values[index] ?? '';
+    return acc;
+  }, {} as Record<ThemeColorName, string>);
+}