@korsolutions/ui 0.0.4 → 0.0.6

package/dist/portal-DoPaAohb.mjs

@@ -0,0 +1,61 @@
+import { useEffect, useState, useSyncExternalStore } from "react";
+import "react-native";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/primitives/portal/portal.tsx
+const DEFAULT_PORTAL_HOST = "KOR_NATIVE_DEFAULT_HOST_NAME";
+const store = {
+	map: (/* @__PURE__ */ new Map()).set(DEFAULT_PORTAL_HOST, /* @__PURE__ */ new Map()),
+	listeners: /* @__PURE__ */ new Set()
+};
+function emit() {
+	for (const cb of store.listeners) cb();
+}
+function getSnapshot() {
+	return store.map;
+}
+function subscribe(cb) {
+	store.listeners.add(cb);
+	return () => {
+		store.listeners.delete(cb);
+	};
+}
+function updatePortal(hostName, name, children) {
+	const next = new Map(store.map);
+	const portal = next.get(hostName) ?? /* @__PURE__ */ new Map();
+	portal.set(name, children);
+	next.set(hostName, portal);
+	store.map = next;
+	emit();
+}
+function removePortal(hostName, name) {
+	const next = new Map(store.map);
+	const portal = next.get(hostName) ?? /* @__PURE__ */ new Map();
+	portal.delete(name);
+	next.set(hostName, portal);
+	store.map = next;
+	emit();
+}
+function PortalHost({ name = DEFAULT_PORTAL_HOST }) {
+	const portalMap = useSyncExternalStore(subscribe, getSnapshot, getSnapshot).get(name) ?? /* @__PURE__ */ new Map();
+	if (portalMap.size === 0) return null;
+	return /* @__PURE__ */ jsx(Fragment, { children: Array.from(portalMap.values()) });
+}
+function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }) {
+	useEffect(() => {
+		updatePortal(hostName, name, children);
+	}, [
+		hostName,
+		name,
+		children
+	]);
+	useEffect(() => {
+		return () => {
+			removePortal(hostName, name);
+		};
+	}, [hostName, name]);
+	return null;
+}
+
+//#endregion
+export { PortalHost as n, Portal as t };

package/dist/primitives/index.d.mts

@@ -0,0 +1,2 @@
+import { A as FieldErrorProps, C as InputPrimitive, D as FieldPrimitive, E as InputStyles, M as FieldLabelProps, O as FieldPrimitiveRootProps, S as ButtonPrimitiveLabelProps, T as InputPrimitiveProps, _ as SelectTriggerProps, a as CardBodyProps, b as ButtonState, c as SelectPrimitive, d as SelectRootProps, f as SelectStyles, g as SelectValueProps, h as SelectOverlayProps, i as CardFooterProps, j as FieldDescriptionProps, k as FieldStyles, l as SelectPortalProps, m as SelectContentProps, n as CardRootProps, o as CardTitleProps, p as SelectOptionProps, r as CardStyles, s as CardHeaderProps, t as CardPrimitive, u as SelectRootBaseProps, v as ButtonPrimitive, w as InputPrimitiveBaseProps, x as ButtonStyles, y as ButtonPrimitiveRootProps } from "../index-Dafk8ZGv.mjs";
+export { ButtonPrimitive, ButtonPrimitiveLabelProps, ButtonPrimitiveRootProps, ButtonState, ButtonStyles, CardBodyProps, CardFooterProps, CardHeaderProps, CardPrimitive, CardRootProps, CardStyles, CardTitleProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldPrimitive, FieldPrimitiveRootProps, FieldStyles, InputPrimitive, InputPrimitiveBaseProps, InputPrimitiveProps, InputStyles, SelectContentProps, SelectOptionProps, SelectOverlayProps, SelectPortalProps, SelectPrimitive, SelectRootBaseProps, SelectRootProps, SelectStyles, SelectTriggerProps, SelectValueProps };

package/dist/primitives/index.mjs

@@ -0,0 +1,4 @@
+import "../portal-DoPaAohb.mjs";
+import { a as FieldPrimitive, i as InputPrimitive, n as SelectPrimitive, r as ButtonPrimitive, t as CardPrimitive } from "../primitives-C2enZ5Ku.mjs";
+
+export { ButtonPrimitive, CardPrimitive, FieldPrimitive, InputPrimitive, SelectPrimitive };

package/dist/primitives-C2enZ5Ku.mjs

@@ -0,0 +1,441 @@
+import { t as Portal } from "./portal-DoPaAohb.mjs";
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { ActivityIndicator, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/primitives/field/context.ts
+const FieldContext = createContext(void 0);
+const useField = () => {
+	const context = useContext(FieldContext);
+	if (!context) throw new Error("useField must be used within a FieldProvider");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/field/field-root.tsx
+function FieldRoot(props) {
+	const composedStyles = [props.styles?.root, props.style];
+	const Component = props.render ?? View;
+	return /* @__PURE__ */ jsx(FieldContext.Provider, {
+		value: { styles: props.styles },
+		children: /* @__PURE__ */ jsx(Component, {
+			...props,
+			style: composedStyles
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/field/field-label.tsx
+function FieldLabel(props) {
+	const field = useField();
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		htmlFor: props.htmlFor,
+		style: [field.styles?.label, props.style]
+	});
+}
+
+//#endregion
+//#region src/primitives/field/field-description.tsx
+function FieldDescription(props) {
+	const field = useField();
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		style: [field.styles?.description, props.style]
+	});
+}
+
+//#endregion
+//#region src/primitives/field/field-error.tsx
+function FieldError(props) {
+	const field = useField();
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		style: [field.styles?.error, props.style]
+	});
+}
+
+//#endregion
+//#region src/primitives/field/index.ts
+const FieldPrimitive = {
+	Root: FieldRoot,
+	Label: FieldLabel,
+	Description: FieldDescription,
+	Error: FieldError
+};
+
+//#endregion
+//#region src/primitives/input/input.tsx
+const calculateState$3 = (props, isFocused) => {
+	if (props.isDisabled) return "disabled";
+	if (isFocused) return "focused";
+	return "default";
+};
+function InputPrimitive(props) {
+	const [isFocused, setIsFocused] = useState(false);
+	const state = calculateState$3(props, isFocused);
+	const composedStyles = [
+		props.styles?.default?.style,
+		props.styles?.[state]?.style,
+		props.style
+	];
+	const composedProps = {
+		...props.styles?.default,
+		...props.styles?.[state],
+		...props
+	};
+	return /* @__PURE__ */ jsx(props.render ?? TextInput, {
+		...composedProps,
+		onChange: void 0,
+		onChangeText: props.onChange,
+		onFocus: (e) => {
+			setIsFocused(true);
+			props.onFocus?.(e);
+		},
+		onBlur: (e) => {
+			setIsFocused(false);
+			props.onBlur?.(e);
+		},
+		readOnly: props.isDisabled || props.readOnly,
+		style: composedStyles
+	});
+}
+
+//#endregion
+//#region src/primitives/button/button-context.tsx
+const ButtonPrimitiveContext = createContext(void 0);
+const useButtonPrimitive = () => {
+	const context = useContext(ButtonPrimitiveContext);
+	if (!context) throw new Error("useButtonPrimitive must be used within a ButtonPrimitiveProvider");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/button/button-root.tsx
+const calculateState$2 = (props) => {
+	if (props.isDisabled) return "disabled";
+	if (props.isLoading) return "loading";
+	return "default";
+};
+function ButtonRoot(props) {
+	const state = calculateState$2(props);
+	const calculatedStyle = [
+		props.styles?.root?.default,
+		props.styles?.root?.[state],
+		props.style
+	];
+	const Container = props.render ?? Pressable;
+	return /* @__PURE__ */ jsx(ButtonPrimitiveContext.Provider, {
+		value: {
+			disabled: props.isDisabled,
+			state,
+			styles: props.styles
+		},
+		children: /* @__PURE__ */ jsx(Container, {
+			...props,
+			style: calculatedStyle
+		})
+	});
+}
+
+//#endregion
+//#region src/utils/calculate-styles.ts
+const calculateComposedStyles = (styles = {}, state, component, style) => {
+	const result = [];
+	const componentStyles = styles?.[component];
+	if (componentStyles && "default" in componentStyles && componentStyles["default"]) result.push(componentStyles["default"]);
+	if (componentStyles?.[state]) result.push(componentStyles[state]);
+	if (style) result.push(style);
+	return result;
+};
+
+//#endregion
+//#region src/primitives/button/button-label.tsx
+function ButtonLabel(props) {
+	const button = useButtonPrimitive();
+	const calculatedStyle = calculateComposedStyles(button.styles, button.state, "label", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		style: calculatedStyle,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/button/button-spinner.tsx
+function ButtonSpinner(props) {
+	const button = useButtonPrimitive();
+	return /* @__PURE__ */ jsx(ActivityIndicator, { style: calculateComposedStyles(button.styles, button.state, "spinner", props.style) });
+}
+
+//#endregion
+//#region src/primitives/button/index.ts
+const ButtonPrimitive = {
+	Root: ButtonRoot,
+	Label: ButtonLabel,
+	Spinner: ButtonSpinner
+};
+
+//#endregion
+//#region src/primitives/select/context.ts
+const SelectContext = createContext(void 0);
+const useSelect = () => {
+	const context = useContext(SelectContext);
+	if (!context) throw new Error("useSelect must be used within a SelectProvider");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/select/select-root.tsx
+const calculateState$1 = (props) => {
+	if (props.isDisabled) return "disabled";
+	return "default";
+};
+function SelectRoot(props) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [triggerLayout, setTriggerLayout] = useState(null);
+	const [options, setOptions] = useState([]);
+	const state = calculateState$1(props);
+	const composedStyles = calculateComposedStyles(props.styles, state, "root", props.style);
+	const Component = props.render ?? View;
+	return /* @__PURE__ */ jsx(SelectContext.Provider, {
+		value: {
+			value: props.value,
+			onChange: props.onChange,
+			placeholder: props.placeholder,
+			isOpen,
+			setIsOpen,
+			triggerLayout,
+			setTriggerLayout,
+			options,
+			setOptions,
+			state,
+			isDisabled: props.isDisabled ?? false,
+			styles: props.styles ?? null
+		},
+		children: /* @__PURE__ */ jsx(Component, {
+			style: composedStyles,
+			children: props.children
+		})
+	});
+}
+
+//#endregion
+//#region src/utils/normalize-layout.ts
+const normalizeLayout = (layout) => {
+	if (!layout.y && "top" in layout && typeof layout.top === "number") layout.y = layout.top;
+	if (!layout.x && "left" in layout && typeof layout.left === "number") layout.x = layout.left;
+	return layout;
+};
+
+//#endregion
+//#region src/primitives/select/select-trigger.tsx
+function SelectTrigger(props) {
+	const select = useSelect();
+	const composedStyles = calculateComposedStyles(select.styles, select.state, "trigger", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? Pressable, {
+		onPress: () => {
+			select.setIsOpen((prev) => !prev);
+		},
+		onLayout: (e) => {
+			const layout = normalizeLayout(e.nativeEvent.layout);
+			select.setTriggerLayout(layout);
+		},
+		disabled: select.isDisabled,
+		style: composedStyles,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/select/select-value.tsx
+function SelectValue(props) {
+	const select = useSelect();
+	const selectedOption = select.options.find((option) => option.value === select.value);
+	const selectedOptionLabel = selectedOption?.label;
+	const composedStyles = calculateComposedStyles(select.styles, select.state, selectedOptionLabel ? "value" : "placeholder", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		style: composedStyles,
+		children: selectedOption?.label ?? select.placeholder
+	});
+}
+
+//#endregion
+//#region src/primitives/select/select-portal.tsx
+function SelectPortal(props) {
+	const select = useSelect();
+	useEffect(() => {
+		return () => {
+			select.setOptions([]);
+		};
+	}, []);
+	if (!select.isOpen) return null;
+	return /* @__PURE__ */ jsx(Portal, {
+		name: "select-portal",
+		children: /* @__PURE__ */ jsx(SelectContext.Provider, {
+			value: select,
+			children: props.children
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/select/select-overlay.tsx
+function SelectOverlay(props) {
+	const select = useSelect();
+	const composedStyles = calculateComposedStyles(select.styles, select.state, "overlay", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? Pressable, {
+		onPress: () => {
+			select.setIsOpen(false);
+		},
+		style: [StyleSheet.absoluteFill, composedStyles],
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/select/select-content.tsx
+function SelectContent(props) {
+	const select = useSelect();
+	const composedStyles = calculateComposedStyles(select.styles, select.state, "content", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? View, {
+		style: [composedStyles, {
+			position: "absolute",
+			top: select.triggerLayout?.y + select.triggerLayout?.height,
+			left: select.triggerLayout?.x,
+			width: select.triggerLayout?.width
+		}],
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/select/select-option.tsx
+const calculateState = (selectState, hovered, selected) => {
+	if (selectState === "disabled") return "disabled";
+	if (selected) return "selected";
+	if (hovered) return "hovered";
+	return "default";
+};
+function SelectOption(props) {
+	const [isHovered, setIsHovered] = useState(false);
+	const select = useSelect();
+	const isSelected = select.value === props.value;
+	const optionState = calculateState(select.state, isHovered, isSelected);
+	const composedStyles = calculateComposedStyles(select.styles, optionState, "option", props.style);
+	useEffect(() => {
+		select.setOptions((prev) => {
+			if (prev.find((option) => option.value === props.value)) return prev;
+			return [...prev, {
+				value: props.value,
+				label: props.children
+			}];
+		});
+	}, [props.value, props.children]);
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		value: props.value,
+		onPress: () => {
+			select.onChange?.(props.value);
+			select.setIsOpen(false);
+		},
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		style: composedStyles,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/primitives/select/index.ts
+const SelectPrimitive = {
+	Root: SelectRoot,
+	Trigger: SelectTrigger,
+	Value: SelectValue,
+	Portal: SelectPortal,
+	Overlay: SelectOverlay,
+	Content: SelectContent,
+	Option: SelectOption
+};
+
+//#endregion
+//#region src/primitives/card/context.ts
+const CardContext = createContext(void 0);
+const useCard = () => {
+	const context = useContext(CardContext);
+	if (!context) throw new Error("useCard must be used within a CardProvider");
+	return context;
+};
+
+//#endregion
+//#region src/primitives/card/card-root.tsx
+function CardRoot(props) {
+	const composedStyle = calculateComposedStyles(props.styles, "default", "root", props.style);
+	const Component = props.render ?? View;
+	return /* @__PURE__ */ jsx(CardContext.Provider, {
+		value: {
+			state: "default",
+			styles: props.styles
+		},
+		children: /* @__PURE__ */ jsx(Component, {
+			...props,
+			style: composedStyle
+		})
+	});
+}
+
+//#endregion
+//#region src/primitives/card/card-header.tsx
+function CardHeader(props) {
+	const card = useCard();
+	const composedStyle = calculateComposedStyles(card.styles, card.state, "header", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? View, {
+		...props,
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/card/card-title.tsx
+function CardTitle(props) {
+	const card = useCard();
+	const composedStyle = calculateComposedStyles(card.styles, card.state, "title", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? Text, {
+		...props,
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/card/card-body.tsx
+function CardBody(props) {
+	const card = useCard();
+	const composedStyle = calculateComposedStyles(card.styles, card.state, "body", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? View, {
+		...props,
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/card/card-footer.tsx
+function CardFooter(props) {
+	const card = useCard();
+	const composedStyle = calculateComposedStyles(card.styles, card.state, "footer", props.style);
+	return /* @__PURE__ */ jsx(props.render ?? View, {
+		...props,
+		style: composedStyle
+	});
+}
+
+//#endregion
+//#region src/primitives/card/index.ts
+const CardPrimitive = {
+	Root: CardRoot,
+	Header: CardHeader,
+	Title: CardTitle,
+	Body: CardBody,
+	Footer: CardFooter
+};
+
+//#endregion
+export { FieldPrimitive as a, InputPrimitive as i, SelectPrimitive as n, ButtonPrimitive as r, CardPrimitive as t };

package/dist/themes-BrLbh9h6.mjs

@@ -0,0 +1,86 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { useColorScheme } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/themes/default/colors.ts
+const lightColors = {
+	background: "hsla(223.81, 100%, 100%, 1)",
+	foreground: "hsla(223.81, 0%, 3.94%, 1)",
+	primary: "hsla(223.81, 0%, 9.05%, 1)",
+	primaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+	secondary: "hsla(223.81, 0%, 96.06%, 1)",
+	secondaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+	muted: "hsla(223.81, 0%, 96.06%, 1)",
+	mutedForeground: "hsla(223.81, 0%, 45.15%, 1)",
+	border: "hsla(223.81, 0%, 89.82%, 1)",
+	surface: "hsla(223.81, 100%, 100%, 1)",
+	danger: "hsla(0, 84.2%, 60.2%, 1)",
+	success: "hsla(173, 58%, 39%, 1)",
+	warning: "hsla(43, 74%, 66%, 1)",
+	info: "hsla(197, 37%, 24%, 1)"
+};
+const darkColors = {
+	background: "hsla(223.81, 0%, 3.94%, 1)",
+	foreground: "hsla(223.81, 0%, 98.03%, 1)",
+	primary: "hsla(223.81, 0%, 89.82%, 1)",
+	primaryForeground: "hsla(223.81, 0%, 9.05%, 1)",
+	secondary: "hsla(223.81, 0%, 14.94%, 1)",
+	secondaryForeground: "hsla(223.81, 0%, 98.03%, 1)",
+	muted: "hsla(223.81, 0%, 14.94%, 1)",
+	mutedForeground: "hsla(223.81, 0%, 63.02%, 1)",
+	border: "hsla(223.81, 0%, 15.51%, 1)",
+	surface: "hsla(223.81, 0%, 9.05%, 1)",
+	danger: "hsla(0, 62.8%, 30.6%, 1)",
+	success: "hsla(160, 60%, 45%, 1)",
+	warning: "hsla(30, 80%, 55%, 1)",
+	info: "hsla(220, 70%, 50%, 1)"
+};
+
+//#endregion
+//#region src/themes/default/index.ts
+const defaultThemeAssets = {
+	colors: {
+		light: lightColors,
+		dark: darkColors
+	},
+	radius: 10,
+	fontFamily: "System"
+};
+
+//#endregion
+//#region src/themes/themes.ts
+const themes = { default: defaultThemeAssets };
+
+//#endregion
+//#region src/themes/provider.tsx
+const ThemeContext = createContext(null);
+const ThemeProvider = (props) => {
+	const [themeName, setTheme] = useState("default");
+	const systemColorScheme = useColorScheme();
+	const [colorScheme, setColorScheme] = useState(systemColorScheme ?? "light");
+	const themesAssets = themes[themeName];
+	const colors = themesAssets.colors[colorScheme];
+	useEffect(() => {
+		if (systemColorScheme) setColorScheme(systemColorScheme);
+	}, [systemColorScheme]);
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: {
+			themeName,
+			setTheme,
+			colorScheme,
+			setColorScheme,
+			colors,
+			radius: themesAssets.radius,
+			fontFamily: themesAssets.fontFamily
+		},
+		children: props.children
+	});
+};
+const useTheme = () => {
+	const context = useContext(ThemeContext);
+	if (!context) throw new Error("useTheme must be used within a ThemeProvider");
+	return context;
+};
+
+//#endregion
+export { useTheme as n, ThemeProvider as t };

package/package.json

@@ -1,15 +1,22 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "license": "MIT",
   "main": ".src/index.ts",
   "types": ".src/index.ts",
   "exports": {
-    ".": "./src/index.ts"
-  },
-  "scripts": {
-    "publish": "npm publish --access public",
-    "ts-check": "tsc --noEmit"
+    ".": {
+      "default": "./dist/index.mjs",
+      "types": "./dist/index.d.mts"
+    },
+    "./primitives": {
+      "default": "./dist/primitives/index.mjs",
+      "types": "./dist/primitives/index.d.mts"
+    },
+    "./components": {
+      "default": "./dist/components/index.mjs",
+      "types": "./dist/components/index.d.mts"
+    }
   },
   "peerDependencies": {
     "react": "*",
@@ -17,7 +24,8 @@
     "react-native-web": "*"
   },
   "devDependencies": {
-    "@types/react": "^19.2.3"
+    "@types/react": "^19.2.3",
+    "tsdown": "0.17.0-beta.4"
   },
   "repository": {
     "type": "git",
@@ -25,5 +33,9 @@
   },
   "bugs": {
     "url": "https://github.com/KorSoftwareSolutions/ui/issues"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "ts-check": "tsc --noEmit"
   }
-}
+}

package/src/components/button/button.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ButtonPrimitive } from "@/primitives";
+import { ButtonVariants } from "./variants";
+
+interface ButtonProps {
+  onPress?: () => void;
+  children?: string;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+
+  variant?: keyof typeof ButtonVariants;
+}
+
+export function Button(props: ButtonProps) {
+  const useVariantStyles = props.variant ? ButtonVariants[props.variant] : ButtonVariants["default"];
+  const variantStyles = useVariantStyles();
+
+  return (
+    <ButtonPrimitive.Root onPress={props.onPress} isDisabled={props.isDisabled} isLoading={props.isLoading} styles={variantStyles}>
+      {props.isLoading && <ButtonPrimitive.Spinner />}
+      <ButtonPrimitive.Label>{props.children}</ButtonPrimitive.Label>
+    </ButtonPrimitive.Root>
+  );
+}