@nori-ui/core 0.0.2 → 0.0.4

package/dist/stories/story-registry.cjs

@@ -37,6 +37,21 @@ function Box({ className, children, ...rest }) {
 }
 __name(Box, "Box");
 
+// ../tokens/build/theme.ts
+var theme = {
+  color: {
+    danger: "#ef4444",
+    neutral: {
+      "100": "#f4f4f5",
+      "200": "#e4e4e7",
+      "300": "#d4d4d8",
+      "400": "#a1a1aa",
+      "500": "#71717a",
+      "900": "#18181b"
+    },
+    primary: {
+      "600": "#2563eb"}}};
+
 // src/slot/compose-refs.ts
 function composeRefs(...refs) {
   return (node) => {
@@ -145,6 +160,30 @@ var SIZE_CLASSES = {
 };
 var ICON_SIZE = { sm: 14, md: 16, lg: 20 };
 var BASE_CLASSES = "inline-flex flex-row items-center justify-center gap-2 rounded-md select-none";
+var VARIANT_STYLES = {
+  primary: { backgroundColor: theme.color.primary["600"] },
+  secondary: { backgroundColor: theme.color.neutral["100"] },
+  ghost: { backgroundColor: "transparent" },
+  destructive: { backgroundColor: theme.color.danger }
+};
+var VARIANT_TEXT_COLOR = {
+  primary: "#ffffff",
+  secondary: theme.color.neutral["900"],
+  ghost: theme.color.neutral["900"],
+  destructive: "#ffffff"
+};
+var SIZE_STYLES = {
+  sm: { container: { height: 32, paddingHorizontal: 12 }, text: { fontSize: 14 } },
+  md: { container: { height: 40, paddingHorizontal: 16 }, text: { fontSize: 16 } },
+  lg: { container: { height: 48, paddingHorizontal: 20 }, text: { fontSize: 18 } }
+};
+var BASE_STYLE = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8,
+  borderRadius: 6
+};
 var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
   children,
   variant = "primary",
@@ -157,6 +196,7 @@ var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
   className,
   onPress,
   testID,
+  style,
   ...rest
 }, forwardedRef) {
   const isInoperative = Boolean(disabled) || Boolean(loading);
@@ -167,6 +207,16 @@ var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
     isInoperative ? "opacity-60" : void 0,
     className
   );
+  const baseInlineStyle = [
+    BASE_STYLE,
+    VARIANT_STYLES[variant],
+    SIZE_STYLES[size].container,
+    isInoperative ? { opacity: 0.6 } : null
+  ];
+  const pressableStyle = typeof style === "function" ? (state) => [baseInlineStyle, style(state)] : [baseInlineStyle, style];
+  const slotStyle = [baseInlineStyle, typeof style === "function" ? null : style];
+  const textColor = VARIANT_TEXT_COLOR[variant];
+  const textStyle = { color: textColor, fontSize: SIZE_STYLES[size].text.fontSize, fontWeight: "500" };
   const handlePress = /* @__PURE__ */ __name((ev) => {
     if (isInoperative) return;
     onPress?.(ev);
@@ -175,6 +225,7 @@ var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
     const slotProps = {
       ref: forwardedRef,
       className: classes,
+      style: slotStyle,
       onClick: handlePress,
       ...rest
     };
@@ -197,12 +248,20 @@ var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
       disabled: isInoperative,
       onPress: handlePress,
       className: classes,
+      style: pressableStyle,
       ...pressableExtra,
       ...rest,
       children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_SIZE[size], label: "Loading" }) : LeadingIcon ? /* @__PURE__ */ jsxRuntime.jsx(LeadingIcon, { size: ICON_SIZE[size] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: cn("font-medium", SIZE_CLASSES[size].includes("text-") ? void 0 : "text-md"), children }),
-        TrailingIcon ? /* @__PURE__ */ jsxRuntime.jsx(TrailingIcon, { size: ICON_SIZE[size] }) : null
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_SIZE[size], label: "Loading", color: textColor }) : LeadingIcon ? /* @__PURE__ */ jsxRuntime.jsx(LeadingIcon, { size: ICON_SIZE[size], color: textColor }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            className: cn("font-medium", SIZE_CLASSES[size].includes("text-") ? void 0 : "text-md"),
+            style: textStyle,
+            children
+          }
+        ),
+        TrailingIcon ? /* @__PURE__ */ jsxRuntime.jsx(TrailingIcon, { size: ICON_SIZE[size], color: textColor }) : null
       ]
     }
   );
@@ -250,6 +309,21 @@ function useSemanticIcon(name) {
   return icons[name];
 }
 __name(useSemanticIcon, "useSemanticIcon");
+var ROW_STYLE = { flexDirection: "row", alignItems: "center", gap: 8 };
+var BOX_STYLE = {
+  width: 20,
+  height: 20,
+  borderRadius: 4,
+  borderWidth: 1,
+  borderColor: theme.color.neutral["300"],
+  backgroundColor: "#ffffff",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var BOX_STYLE_CHECKED = {
+  backgroundColor: theme.color.primary["600"],
+  borderColor: theme.color.primary["600"]
+};
 function Checkbox({
   checked,
   defaultChecked = false,
@@ -266,6 +340,7 @@ function Checkbox({
   const isControlled = checked !== void 0;
   const value = isControlled ? Boolean(checked) : inner;
   const ariaChecked = indeterminate ? "mixed" : value ? "true" : "false";
+  const isMarked = value || Boolean(indeterminate);
   const toggle = react.useCallback(() => {
     if (disabled) return;
     const next = !value;
@@ -298,10 +373,26 @@ function Checkbox({
     return /* @__PURE__ */ jsxRuntime.jsx(Slot, { ...slotProps, children });
   }
   const boxClasses = cn("w-5 h-5 rounded-sm border border-semantic-border-strong items-center justify-center");
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center gap-2", disabled ? "opacity-60" : void 0, className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: toggle, ...commonProps, className: boxClasses, children: (value || indeterminate) && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(Check, { size: 14, color: "currentColor" }) : null }),
-    children ?? (label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: label }) : null)
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      className: cn("flex-row items-center gap-2", disabled ? "opacity-60" : void 0, className),
+      style: [ROW_STYLE, disabled ? { opacity: 0.6 } : null],
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            onPress: toggle,
+            ...commonProps,
+            className: boxClasses,
+            style: [BOX_STYLE, isMarked && !disabled ? BOX_STYLE_CHECKED : null],
+            children: isMarked && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(Check, { size: 14, color: "#ffffff" }) : null
+          }
+        ),
+        children ?? (label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: theme.color.neutral["900"], fontSize: 16 }, children: label }) : null)
+      ]
+    }
+  );
 }
 __name(Checkbox, "Checkbox");
 var ALIGN_CLASS = {
@@ -336,6 +427,25 @@ function HStack({ gap, align, justify, className, children, ...rest }) {
   );
 }
 __name(HStack, "HStack");
+var ROW_STYLE2 = { flexDirection: "row", alignItems: "center", gap: 8 };
+var TRACK_BASE = {
+  width: 40,
+  height: 24,
+  borderRadius: 12,
+  justifyContent: "center",
+  paddingHorizontal: 2
+};
+var THUMB_STYLE = {
+  width: 20,
+  height: 20,
+  borderRadius: 10,
+  backgroundColor: "#ffffff",
+  shadowColor: "#000",
+  shadowOpacity: 0.15,
+  shadowRadius: 2,
+  shadowOffset: { width: 0, height: 1 },
+  elevation: 2
+};
 function Switch({
   checked,
   defaultChecked = false,
@@ -387,9 +497,22 @@ function Switch({
     disabled ? "opacity-60" : void 0
   );
   const thumbClasses = cn("w-5 h-5 rounded-full bg-white shadow-sm", value ? "self-end" : "self-start");
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center gap-2", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: toggle, ...commonProps, className: trackClasses, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: thumbClasses }) }),
-    label ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { className: "text-md text-semantic-text-default", children: label }) : null,
+  const trackStyle = [
+    TRACK_BASE,
+    { backgroundColor: value ? theme.color.primary["600"] : theme.color.neutral["300"] },
+    disabled ? { opacity: 0.6 } : null
+  ];
+  const thumbStyle = [THUMB_STYLE, { alignSelf: value ? "flex-end" : "flex-start" }];
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center gap-2", className), style: ROW_STYLE2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: toggle, ...commonProps, className: trackClasses, style: trackStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: thumbClasses, style: thumbStyle }) }),
+    label ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        className: "text-md text-semantic-text-default",
+        style: { color: theme.color.neutral["900"], fontSize: 16 },
+        children: label
+      }
+    ) : null,
     children
   ] });
 }
@@ -419,6 +542,23 @@ function Text({ variant = "body-md", className, testID, children, ...rest }) {
   );
 }
 __name(Text, "Text");
+var CONTAINER_STYLE = { flexDirection: "column", gap: 4 };
+var LABEL_STYLE = { fontSize: 14, fontWeight: "500", color: theme.color.neutral["900"] };
+var FIELD_BASE_STYLE = {
+  flexDirection: "row",
+  alignItems: "center",
+  borderRadius: 6,
+  borderWidth: 1,
+  paddingHorizontal: 12
+};
+var INPUT_STYLE = {
+  flex: 1,
+  paddingVertical: 8,
+  fontSize: 16,
+  color: theme.color.neutral["900"]
+};
+var HELPER_STYLE = { fontSize: 14, color: theme.color.neutral["500"] };
+var ERROR_STYLE = { fontSize: 14, color: theme.color.danger };
 function TextInput({
   label,
   helperText,
@@ -447,8 +587,21 @@ function TextInput({
   if (multiline !== void 0) inputExtras.multiline = multiline;
   if (numberOfLines !== void 0) inputExtras.numberOfLines = numberOfLines;
   if (onChangeText !== void 0) inputExtras.onChangeText = onChangeText;
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex flex-col gap-1", containerClassName), children: [
-    label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-semantic-text-default", children: label }) : null,
+  const fieldStyle = [
+    FIELD_BASE_STYLE,
+    { borderColor: hasError ? theme.color.danger : theme.color.neutral["200"] },
+    disabled ? { opacity: 0.6 } : null
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex flex-col gap-1", containerClassName), style: CONTAINER_STYLE, children: [
+    label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-sm font-medium text-semantic-text-default",
+        style: LABEL_STYLE,
+        children: label
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.View,
       {
@@ -457,23 +610,34 @@ function TextInput({
           hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
           disabled ? "opacity-60" : void 0
         ),
+        style: fieldStyle,
         children: [
-          leading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-2", children: leading }) : null,
+          leading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-2", style: { marginRight: 8 }, children: leading }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.TextInput,
             {
               nativeID: inputId,
               editable: !disabled,
               className: cn("flex-1 py-2 text-md text-semantic-text-default outline-none", className),
+              style: INPUT_STYLE,
+              placeholderTextColor: theme.color.neutral["400"],
               ...inputExtras,
               ...rest
             }
           ),
-          trailing ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "ml-2", children: trailing }) : null
+          trailing ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "ml-2", style: { marginLeft: 8 }, children: trailing }) : null
         ]
       }
     ),
-    error ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: describeId, className: "text-sm text-semantic-interactive-destructive", children: error }) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: describeId, className: "text-sm text-semantic-text-muted", children: helperText }) : null
+    error ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Text,
+      {
+        nativeID: describeId,
+        className: "text-sm text-semantic-interactive-destructive",
+        style: ERROR_STYLE,
+        children: error
+      }
+    ) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: describeId, className: "text-sm text-semantic-text-muted", style: HELPER_STYLE, children: helperText }) : null
   ] });
 }
 __name(TextInput, "TextInput");